/* ============================================================
   Codex Platform — Global Stylesheet
   asset/css/customs.css
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  --sidebar-w:       240px;
  --sidebar-w-col:    64px;
  --topbar-h:         56px;
  --brand-dark:      #1a2a4a;
  --brand-blue:      #2d7dd2;
  --brand-accent:    #38bdf8;
  --sidebar-bg:      #1a2a4a;
  --sidebar-text:    #b8c8e8;
  --sidebar-active:  #2d7dd2;
  --sidebar-hover:   rgba(255,255,255,.07);
  --content-bg:      #f4f6fb;
  --card-bg:         #ffffff;
  --card-shadow:     0 2px 12px rgba(17,24,39,.07);
  --radius-card:     16px;
  --radius-btn:      10px;

  /* Module accent colours */
  --col-shipment:    #2563eb;
  --col-air:         #0891b2;
  --col-customs:     #7c3aed;
  --col-ocr:         #059669;
  --col-billing:     #d97706;
  --col-reports:     #dc2626;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--content-bg); color: #1f2937; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   LAYOUT: sidebar + main
   ============================================================ */
.codex-layout { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.codex-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  transition: transform .25s ease;
}

/* Mobile: sidebar hidden off-screen */
@media (max-width: 991px) {
  .codex-sidebar { transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,.3); }
  .codex-sidebar.open { transform: translateX(0); }
  .codex-main { margin-left: 0 !important; }
}

.codex-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Sidebar Brand ---- */
.sidebar-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-text {
  font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.5px;
}
.brand-accent { color: var(--brand-accent); }
.sidebar-toggle { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; padding: .25rem; }

/* ---- Company Badge ---- */
.sidebar-company {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.company-avatar {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--brand-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.company-name { font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.2; }
.company-role { font-size: .72rem; color: var(--sidebar-text); text-transform: capitalize; }

/* ---- Nav ---- */
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* Collapsible nav groups */
.nav-group { border-top: 1px solid rgba(255,255,255,.04); }
.nav-group-header {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; font-weight:700; letter-spacing:.02em; text-transform:lowercase;
  color:rgba(255,255,255,.5); padding:.85rem 1.25rem .35rem 1.25rem;
  cursor:pointer; user-select:none;
}
.nav-group-header > span::first-letter { text-transform: uppercase; }
.nav-group-header:hover { color:rgba(255,255,255,.85); }
.nav-group-header .chev { transition:transform .2s; font-size:.7rem; opacity:.6; }
.nav-group.collapsed .nav-group-header .chev { transform:rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display:none; }
.nav-group-items { padding-bottom:.25rem; }

/* Nested subgroup (e.g. Billing > AR/AP) */
.nav-subgroup { margin-left:.5rem; border-left:1px solid rgba(255,255,255,.06); }
.nav-subgroup-header {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.7rem; font-weight:600; text-transform:none; letter-spacing:0;
  color:rgba(255,255,255,.45); padding:.35rem 1rem .25rem 1rem;
  cursor:pointer; user-select:none;
}
.nav-subgroup-header:hover { color:rgba(255,255,255,.8); }
.nav-subgroup-header .chev { transition:transform .2s; font-size:.65rem; opacity:.5; }
.nav-subgroup.collapsed .nav-subgroup-header .chev { transform:rotate(-90deg); }
.nav-subgroup.collapsed .nav-subgroup-items { display:none; }
.nav-subgroup-items .nav-link { padding-left:2.3rem; font-size:.82rem; }

.nav-divider {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  text-transform: lowercase; color: rgba(255,255,255,.35);
  padding: .9rem 1.25rem .3rem;
}
.nav-divider::first-letter { text-transform: uppercase; }

.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1.25rem;
  color: var(--sidebar-text);
  border-radius: 0;
  font-size: .875rem; font-weight: 500;
  transition: background .15s, color .15s;
  border-left: 3px solid transparent;
}
.sidebar-nav .nav-link i { font-size: 1rem; flex-shrink: 0; }
.sidebar-nav .nav-link:hover  { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav .nav-link.active {
  background: rgba(45,125,210,.2);
  color: #fff;
  border-left-color: var(--brand-blue);
}

/* ---- Sidebar Footer ---- */
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .85rem 1.25rem;
}
.user-row { display: flex; align-items: center; gap: .6rem; }
.user-name  { font-size: .8rem; font-weight: 600; color: #fff; }
.user-email { font-size: .7rem; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.btn-signout {
  margin-left: auto; color: var(--sidebar-text); font-size: 1.1rem;
  flex-shrink: 0; padding: .25rem;
  transition: color .15s;
}
.btn-signout:hover { color: #f87171; }

/* ---- Mobile Overlay ---- */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999;
}
.sidebar-overlay.visible { display: block; }

/* ============================================================
   TOPBAR
   ============================================================ */
.codex-topbar {
  height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center;
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.topbar-title { font-size: 1.1rem; font-weight: 700; color: #111827; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-greeting { font-size: .85rem; color: #6b7280; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.codex-content { flex: 1; padding: 1.5rem; max-width: 1300px; width: 100%; margin: 0 auto; }

/* ============================================================
   MODULE TILES (dashboard)
   ============================================================ */
.module-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  border: 2px solid transparent;
  min-height: 130px;
}
.module-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.module-icon { font-size: 2rem; margin-bottom: .5rem; }
.module-label { font-weight: 700; font-size: .95rem; color: #1f2937; }
.module-sub   { font-size: .72rem; color: #6b7280; margin-top: .15rem; }

.module-shipment { border-color: var(--col-shipment); }
.module-shipment .module-icon { color: var(--col-shipment); }
.module-air      { border-color: var(--col-air); }
.module-air      .module-icon { color: var(--col-air); }
.module-customs  { border-color: var(--col-customs); }
.module-customs  .module-icon { color: var(--col-customs); }
.module-ocr      { border-color: var(--col-ocr); }
.module-ocr      .module-icon { color: var(--col-ocr); }
.module-billing  { border-color: var(--col-billing); }
.module-billing  .module-icon { color: var(--col-billing); }
.module-reports  { border-color: var(--col-reports); }
.module-reports  .module-icon { color: var(--col-reports); }

/* ============================================================
   CONTENT CARDS
   ============================================================ */
.content-card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.card-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid #f0f2f7;
}
.card-title { font-weight: 700; font-size: .95rem; color: #111827; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { border-radius: var(--radius-btn); }
.btn-primary { background: var(--brand-blue); border-color: var(--brand-blue); }
.btn-primary:hover { background: #1a6ab8; border-color: #1a6ab8; }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
  border-radius: 8px;
  border-color: #d1d5db;
  font-size: .875rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(45,125,210,.15);
}
.form-control[readonly], .form-select:disabled, .form-control:disabled {
  background-color: #fff;
  opacity: 1;
  color: #374151;
}
.form-label { font-weight: 600; font-size: .8rem; color: #374151; margin-bottom: .3rem; }

/* ============================================================
   TABLES
   ============================================================ */
.table { font-size: .875rem; }
.table thead th { background: #f8faff; font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: #6b7280; border-bottom: 2px solid #e5e7eb; }

/* ============================================================
   Global "first letter only uppercase" rule for ALL table headers.
   Applies to: plain <table>, .table, table.dataTable, modal tables.
   Implementation: lowercase the whole header, then uppercase its
   first letter via the ::first-letter pseudo (Chrome/Firefox/Safari
   all support ::first-letter on display:table-cell).
   ============================================================ */
table thead th,
table thead td,
.table thead th,
table.dataTable thead th,
.dataTables_wrapper table thead th,
.modal table thead th {
  text-transform: lowercase !important;
  letter-spacing: .02em !important;
}
table thead th::first-letter,
table thead td::first-letter,
.table thead th::first-letter,
table.dataTable thead th::first-letter,
.dataTables_wrapper table thead th::first-letter,
.modal table thead th::first-letter {
  text-transform: uppercase !important;
}
.table tbody tr:hover { background: #f8faff; }

/* ============================================================
   GLOBAL DATATABLES THEME — applies to every .dataTables_wrapper
   so all pages share the same font, padding, pagination style.
   Override-free: pages no longer need their own per-table CSS.
   ============================================================ */
.dataTables_wrapper { padding: .4rem .9rem; }
.dataTables_wrapper th,
.dataTables_wrapper td {
  white-space: nowrap;
  padding: .4rem .55rem;
  font-size: .82rem;
  vertical-align: middle;
  color: #1a2a4a;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: .35rem 0;
  font-size: .72rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  margin: 0 1px !important;
  padding: .1rem .42rem !important;
  min-width: 24px;
  font-size: .7rem !important;
  line-height: 1.2;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eef4ff !important;
  border-color: #2d7dd2 !important;
  color: #1a2a4a !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #2d7dd2 !important;
  border-color: #2d7dd2 !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #f9fafb !important;
  color: #d1d5db !important;
  cursor: not-allowed;
  border-color: #f3f4f6 !important;
}
.dataTables_wrapper table.dataTable { margin: 0 !important; }
/* DataTables search/length inputs — match the form-control-sm size used in filter bars */
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_length select {
  font-size: .75rem !important;
  padding: .15rem .5rem !important;
  height: auto !important;
  border-radius: 6px !important;
  border: 1px solid #c7d0e8 !important;
  margin-left: .35rem !important;
}
.dataTables_wrapper .dataTables_filter input[type="search"] { width: 180px; }

/* Freeze header inside any scrollable card table (booking list pattern).
   Force every <th> to be sticky AND opaque white so that the scrolled body
   doesn't bleed through the middle cells (Bootstrap's .table sets a CSS
   variable on cells which leaves them transparent by default). */
.content-card .table-responsive thead tr th,
.sec-card     .table-responsive thead tr th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 -1px 0 #e5e7eb !important;
  --bs-table-bg: #fff;
  --bs-table-accent-bg: #fff;
}

/* Sidebar nested sub-link (for sub-menu items under a parent nav item) */
.codex-sidebar .nav-sublink {
  padding-left: 2.1rem !important;
  font-size: .8rem;
}
.codex-sidebar .nav-sublink i { font-size: .85rem; }

/* Filter bar (used in card headers) — single row, tight gap */
.filter-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: .2rem !important;
  align-items: center;
}

/* Tables inside cards — breathing room from card edges (global) */
.content-card .table-responsive,
.content-card .table-wrap,
.sec-card .table-responsive,
.sec-card .table-wrap {
  padding: 0 .9rem .75rem;
}
.content-card .table,
.sec-card .table { margin-bottom: 0; }

/* ============================================================
   BADGES & STATUS
   ============================================================ */
.status-badge {
  display: inline-block; padding: .2em .65em;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.status-active    { background: #d1fae5; color: #065f46; }
.status-inactive  { background: #f3f4f6; color: #6b7280; }
.status-pending   { background: #fef3c7; color: #92400e; }
.status-completed { background: #d1fae5; color: #065f46; }
.status-billed    { background: #dbeafe; color: #1e40af; }
.status-cancelled { background: #fee2e2; color: #991b1b; }

/* ============================================================
   RESPONSIVE — Tablet & Mobile tweaks
   ============================================================ */
@media (max-width: 767px) {
  .codex-content { padding: 1rem .75rem; }
  .module-tile { min-height: 100px; padding: 1rem .75rem; }
  .module-icon { font-size: 1.5rem; }
  .module-label { font-size: .82rem; }
  .module-sub { display: none; }
}

@media (max-width: 575px) {
  .codex-topbar { padding: 0 .75rem; }
  .topbar-title { font-size: .95rem; }
}

/* ---- Global KPI cards (reusable across all list pages) ---- */
.kpi-card{border-radius:14px;padding:1rem 1.1rem;background:#fff;border:1px solid #e9ecef;display:flex;flex-direction:column;gap:.4rem}
.kpi-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.kpi-value{font-size:1.8rem;font-weight:800;line-height:1}
.kpi-foot{font-size:.7rem}
.kpi-draft    {border-left:4px solid #d1d5db} .kpi-draft .kpi-label{color:#6b7280}    .kpi-draft .kpi-value{color:#374151}
.kpi-confirmed{border-left:4px solid #93c5fd} .kpi-confirmed .kpi-label{color:#1d4ed8} .kpi-confirmed .kpi-value{color:#1d4ed8}
.kpi-pending  {border-left:4px solid #fcd34d} .kpi-pending .kpi-label{color:#b45309}   .kpi-pending .kpi-value{color:#d97706}
.kpi-completed{border-left:4px solid #6ee7b7} .kpi-completed .kpi-label{color:#047857} .kpi-completed .kpi-value{color:#059669}
.kpi-billed   {border-left:4px solid #c4b5fd} .kpi-billed .kpi-label{color:#5b21b6}    .kpi-billed .kpi-value{color:#7c3aed}
.kpi-unbilled {border-left:4px solid #fcd34d} .kpi-unbilled .kpi-label{color:#b45309}   .kpi-unbilled .kpi-value{color:#d97706}
.kpi-partial  {border-left:4px solid #93c5fd} .kpi-partial .kpi-label{color:#1d4ed8}    .kpi-partial .kpi-value{color:#1d4ed8}
.kpi-invoiced {border-left:4px solid #6ee7b7} .kpi-invoiced .kpi-label{color:#047857}   .kpi-invoiced .kpi-value{color:#059669}
.kpi-margin   {border-left:4px solid #c4b5fd} .kpi-margin .kpi-label{color:#5b21b6}     .kpi-margin .kpi-value{color:#7c3aed}

/* ---- Global status badges (reusable across all modules) ---- */
.badge-status-draft     { background: #fef9c3; color: #a16207; }
.badge-status-confirmed { background: #dbeafe; color: #1d4ed8; }
.badge-status-active    { background: #dbeafe; color: #1d4ed8; }
.badge-status-issued    { background: #dbeafe; color: #1d4ed8; }
.badge-status-invoiced  { background: #dcfce7; color: #15803d; }
.badge-status-paid      { background: #dcfce7; color: #15803d; }
.badge-status-partial   { background: #dbeafe; color: #1d4ed8; }
.badge-status-unbilled  { background: #fef9c3; color: #a16207; }
.badge-status-void      { background: #fee2e2; color: #dc2626; }
.badge-status-cancelled { background: #f3f4f6; color: #6b7280; }
.badge-status-delivered { background: #dcfce7; color: #15803d; }
.badge-status-pod       { background: #e0e7ff; color: #4338ca; }
.badge-status-dispatched{ background: #fef3c7; color: #a16207; }
.badge-status-in_transit{ background: #fef3c7; color: #a16207; }
.badge-status-arrived   { background: #dbeafe; color: #1d4ed8; }
.badge-status-completed { background: #dcfce7; color: #15803d; }
.badge-status-booked    { background: #dbeafe; color: #1d4ed8; }
.badge-status-manifested{ background: #dbeafe; color: #1d4ed8; }
.badge-status-sent      { background: #e0e7ff; color: #4338ca; }
.badge-status-accepted  { background: #dcfce7; color: #15803d; }
.badge-status-rejected  { background: #fee2e2; color: #dc2626; }
.badge-status-expired   { background: #f3f4f6; color: #6b7280; }
.badge-status-pending   { background: #fef3c7; color: #a16207; }
.badge-status-planned   { background: #e0e7ff; color: #4338ca; }
.badge-status-assigned  { background: #dbeafe; color: #1d4ed8; }

/* Key reference columns — bold colored links */
.key-ref { font-weight: 600; color: #1d4ed8; text-decoration: none; }
.key-ref:hover { text-decoration: underline; }
.key-ref code, code.key-ref { font-weight: 600; color: #1d4ed8; background: transparent; font-size: inherit; }
/* Source badges */
.badge-src-contract     { background: #dbeafe; color: #1d4ed8; }
.badge-src-tariff       { background: #dcfce7; color: #15803d; }
.badge-src-adhoc        { background: #fef9c3; color: #a16207; }
.badge-src-quotation    { background: #e0e7ff; color: #4338ca; }
/* Type badges */
.badge-type-shipment    { background: #dbeafe; color: #1d4ed8; }
.badge-type-order       { background: #dcfce7; color: #15803d; }
.badge-type-global      { background: #dbeafe; color: #1d4ed8; }
.badge-type-tenant      { background: #dcfce7; color: #15803d; }

/* Hide native number-input spinner that can overlap values */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0 }
input[type=number] { -moz-appearance:textfield }
/* DataTables length picker: cleaner spacing around <select> */
.dataTables_length select { padding-right:1.5rem !important; background-position:right .4rem center !important }