/* ════════════════════════════════════════════════════════════════
   Logistics module — branding uplift (shared, additive)
   Linked LAST in every Logistics page so it re-skins the existing
   token-based pages to the Prime identity (Outfit/DM Sans + green
   accent) and adds glowing borders, WITHOUT rewriting inline styles.
   Light is the default; dark is honoured when data-theme="dark".
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --sans:    'DM Sans', system-ui, sans-serif;
  --display: 'Outfit', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --accent:  #0d9488;
  --accent2: #14b8a6;
  --glow:      rgba(13,148,136,.16);
  --glow-line: rgba(13,148,136,.30);
}
html[data-theme="dark"] {
  --accent:  #3dd7a8;
  --accent2: #5dd39e;
  --glow:      rgba(61,215,168,.18);
  --glow-line: rgba(61,215,168,.32);
}

/* Match the module typography to the rest of Prime */
body { font-family: var(--sans); }
.page-title, .detail-code, .detail-title, .table-view-title, .modal-title,
.empty-title, h1, h2, h3, .card-title { font-family: var(--display); }
.cell-code, .mono, .list-meta, .ev-meta, .ev-by, code { font-family: var(--mono); }

/* ── Glowing borders on cards / list items / tables / key controls ── */
.card, .panel, .ship-item, .list-item, .row-card, .stat-card, .kpi-card,
.sum-card, .summary-card, .ev-card, .modal-box, .shipment-table,
.view-toggle, .attachment, .asset-card, .facility-card {
  border: 1px solid var(--glow-line);
  box-shadow: 0 6px 22px var(--glow);
}
.ship-item:hover, .list-item:hover, .row-card:hover, .stat-card:hover,
.kpi-card:hover, .card:hover, .asset-card:hover, .facility-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--glow-line), 0 0 26px var(--glow);
}
.ship-item.active, .list-item.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 28px var(--glow) !important;
}

/* Glowing primary actions + the active view-toggle */
.btn-primary, .btn-accent, .view-toggle button.active {
  box-shadow: 0 0 18px var(--glow);
}
.btn-primary:hover, .btn-accent:hover { box-shadow: 0 0 28px var(--glow-line); }

/* Inputs / selects pick up the accent on focus */
.input-search:focus, .select-mini:focus, .form-control:focus,
.input:focus, .select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--glow);
}

/* Accent the sticky/sortable table header underline subtly */
thead th { border-bottom-color: var(--glow-line); }

/* ── Search box injected above long project/client <select>s ── */
.sel-search {
  width: 100%; padding: 6px 9px; margin-bottom: 5px;
  border: 1.5px solid var(--glow-line); border-radius: 7px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 12px; outline: none;
}
.sel-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.sel-search::placeholder { color: var(--dim); opacity: .8; }

/* ── Searchable combobox (single click → opens, type to filter, click to pick) ── */
.lc-combo { position: relative; display: block; width: 100%; }
.lc-combo-btn {
  width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 1.5px solid var(--mid); border-radius: 8px;
  background: #fff; color: var(--ink); font-family: var(--sans); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border .14s;
}
html[data-theme="dark"] .lc-combo-btn { background: rgba(7,18,15,.5); }
.lc-combo-btn:hover { border-color: var(--accent); }
.lc-combo-btn.empty { color: var(--dim); }
.lc-combo-btn::after { content: "▾"; float: right; opacity: .5; margin-left: 6px; }
.lc-compact .lc-combo-btn { padding: 5px 8px; font-size: 12px; border-radius: 6px; }
.lc-combo-pop {
  position: fixed; z-index: 1300; display: none; flex-direction: column;
  width: 240px; max-height: 280px; overflow: hidden;
  background: #fff; border: 1.5px solid var(--mid); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
html[data-theme="dark"] .lc-combo-pop { background: #0f201a; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.lc-combo.open .lc-combo-pop { display: flex; }
.lc-combo-search {
  margin: 8px; padding: 7px 10px; border: 1.5px solid var(--mid); border-radius: 7px;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: 12px; outline: none;
}
.lc-combo-search:focus { border-color: var(--accent); }
.lc-combo-list { overflow-y: auto; padding: 0 6px 8px; }
.lc-opt { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-opt:hover { background: var(--glow); }
.lc-clear { color: var(--dim); }
.lc-empty { padding: 10px; font-size: 12px; color: var(--dim); text-align: center; }
.shipment-line-combo { min-width: 150px; max-width: 200px; }

td.lc-cli, td.lc-proj { min-width: 152px; }

/* ── Brand background image (same hr-bg.jpg the other modules use) ── */
body {
  background-image: linear-gradient(rgba(243,246,251,.52), rgba(243,246,251,.70)), url('/HR/assets/hr-bg.jpg') !important;
  background-size: cover !important; background-position: center !important;
  background-attachment: fixed !important; background-repeat: no-repeat !important;
}
html[data-theme="dark"] body {
  background-image: linear-gradient(rgba(7,16,12,.70), rgba(7,16,12,.84)), url('/HR/assets/hr-bg.jpg') !important;
}
.wrap, .ax-shell__content { background: transparent !important; }