/* ═══════════════════════════════════════════════════════════
   FreightIQ Terminal · Dark Mode Design System
   Complementa Tailwind CDN. Cubre clases PHP-helper y custom.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --bg:      #060d1f;
  --s1:      #0d1630;
  --s2:      #111d38;
  --s3:      #1a2844;
  --b1:      #1e2d45;
  --b2:      #243352;
  --t1:      #e2e8f0;
  --t2:      #94a3b8;
  --t3:      #64748b;
  --t4:      #3a4a5c;
  --blue:    #3b82f6;
  --blue2:   #60a5fa;
  --green:   #22c55e;
  --amber:   #f59e0b;
  --red:     #ef4444;
  --cyan:    #06b6d4;
  --purple:  #a78bfa;
  --r:       5px;
  --rl:      8px;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
       background: var(--bg); color: var(--t1); line-height: 1.5; }
a { color: var(--blue2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.4); }

/* ── Layout (PHP helper injects these class names) ────────── */
.app-layout { display: flex; height: 100vh; overflow: hidden; background: var(--bg); }
.main-content { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar { width: 220px; background: #080d1a; border-right: 1px solid var(--b1);
           display: flex; flex-direction: column; flex-shrink: 0; z-index: 50; }
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
                border-bottom: 1px solid var(--b1); }
.sidebar-logo .logo-icon { width: 28px; height: 28px; background: var(--blue);
                            border-radius: 6px; display: flex; align-items: center;
                            justify-content: center; flex-shrink: 0; }
.sidebar-logo .logo-icon i { font-size: 14px; color: #fff; }
.sidebar-logo .logo-name { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.sidebar-logo .logo-sub  { font-size: 9px; color: var(--t4); margin-top: 1px; }
.sidebar-nav { flex: 1; padding: 6px 0; overflow-y: auto; }
.nav-section-label { font-size: 9px; font-weight: 700; color: var(--t4); letter-spacing: .1em;
                     text-transform: uppercase; padding: 14px 16px 5px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 16px;
            color: var(--t3); font-size: 12.5px; font-weight: 500; cursor: pointer;
            text-decoration: none; transition: all .12s; border-left: 2px solid transparent; }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--t2); text-decoration: none; }
.nav-item.active { background: rgba(59,130,246,.1); color: #fff; border-left-color: var(--blue); }
.nav-item i { font-size: 15px; width: 17px; text-align: center; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 9px;
             font-weight: 700; padding: 1px 5px; border-radius: 8px; }
.sidebar-user { border-top: 1px solid var(--b1); padding: 12px 14px;
                display: flex; align-items: center; gap: 9px; }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--blue);
               display: flex; align-items: center; justify-content: center;
               font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-name  { font-size: 11px; font-weight: 600; color: #fff; }
.user-role  { font-size: 9px; color: var(--t4); }
.logout-btn { color: var(--t4); background: none; border: none; cursor: pointer;
              font-size: 15px; margin-left: auto; padding: 3px; transition: color .12s; }
.logout-btn:hover { color: var(--red); }

/* ── Page header ──────────────────────────────────────────── */
.page-header { background: #080d1a; border-bottom: 1px solid var(--b1);
               padding: 0 20px; height: 44px; display: flex; align-items: center;
               gap: 10px; position: sticky; top: 0; z-index: 30; flex-shrink: 0; }
.page-title { font-size: 13px; font-weight: 600; color: var(--t1); }
.page-sub   { font-size: 11px; color: var(--t3); }
.page-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ── Page content ─────────────────────────────────────────── */
.page-content { padding: 16px 20px; flex: 1; }

/* ── Cards ────────────────────────────────────────────────── */
.card { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--rl); }
.card-header { padding: 10px 14px; border-bottom: 1px solid var(--b1);
               display: flex; align-items: center; gap: 8px; background: var(--s2); border-radius: var(--rl) var(--rl) 0 0; }
.card-title { font-size: 12px; font-weight: 600; color: var(--t1); }
.card-sub   { font-size: 11px; color: var(--t3); }
.card-body  { padding: 14px; }

/* ── Alerts (showFlash() PHP output) ─────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
         border-radius: var(--r); font-size: 12px; margin-bottom: 10px; border: 1px solid; }
.alert i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: rgba(34,197,94,.07);  border-color: rgba(34,197,94,.2);  color: #4ade80; }
.alert-danger  { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.2);  color: #f87171; }
.alert-warning { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.2); color: #fbbf24; }
.alert-info    { background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.2); color: var(--blue2); }

/* ── Badges (PHP helper output) ──────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px;
         border-radius: 3px; font-size: 10px; font-weight: 600; }
.badge-success { background: rgba(34,197,94,.1);  color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.badge-warning { background: rgba(245,158,11,.1); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.badge-danger  { background: rgba(239,68,68,.1);  color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.badge-info    { background: rgba(59,130,246,.1); color: var(--blue2); border: 1px solid rgba(59,130,246,.25); }
.badge-neutral { background: rgba(100,116,139,.1); color: var(--t2); border: 1px solid var(--b1); }
.role-superadmin { background: rgba(168,85,247,.1); color: #c084fc; border: 1px solid rgba(168,85,247,.25); }
.role-admin      { background: rgba(59,130,246,.1);  color: var(--blue2); border: 1px solid rgba(59,130,246,.25); }
.role-operador   { background: rgba(34,197,94,.1);   color: #4ade80;  border: 1px solid rgba(34,197,94,.25); }
.role-viewer     { background: rgba(100,116,139,.1); color: var(--t2); border: 1px solid var(--b1); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
       border-radius: var(--r); font-size: 12px; font-weight: 600; cursor: pointer;
       border: 1px solid transparent; transition: all .12s; text-decoration: none; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn i { font-size: 14px; }
.btn-primary   { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-secondary { background: var(--s2); color: var(--t2); border-color: var(--b1); }
.btn-secondary:hover { background: var(--s3); color: var(--t1); }
.btn-success { background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(34,197,94,.3); }
.btn-success:hover { background: rgba(34,197,94,.25); }
.btn-danger  { background: rgba(239,68,68,.1);  color: #f87171; border-color: rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.2); }
.btn-sm   { padding: 4px 9px; font-size: 11px; }
.btn-icon { padding: 5px; width: 26px; height: 26px; justify-content: center; }
.ml-auto { margin-left: auto; }

/* ── Forms ────────────────────────────────────────────────── */
.form-grid   { display: grid; gap: 12px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: repeat(3,1fr); }
.form-grid-4 { grid-template-columns: repeat(4,1fr); }
.form-grid-5 { grid-template-columns: repeat(5,1fr); }
.form-group  { display: flex; flex-direction: column; gap: 4px; }
.form-label  { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; }
.form-label.required::after { content: ' *'; color: var(--red); }
.form-control { background: rgba(6,13,31,.8); border: 1px solid var(--b1); color: var(--t1);
                border-radius: var(--r); padding: 7px 10px; font-size: 12px;
                width: 100%; outline: none; transition: border-color .15s, box-shadow .15s;
                font-family: inherit; }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.form-control::placeholder { color: var(--t4); }
select.form-control { cursor: pointer; }
select.form-control option { background: var(--s2); color: var(--t1); }
.form-section { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--rl); margin-bottom: 12px; }
.form-section-title { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase;
                      letter-spacing: .07em; padding: 9px 14px; background: var(--s2);
                      border-bottom: 1px solid var(--b1); border-radius: var(--rl) var(--rl) 0 0; }
.form-section-body { padding: 14px; }
.allin-preview { display: flex; justify-content: space-between; align-items: center;
                 padding: 10px 12px; background: rgba(59,130,246,.08);
                 border: 1px solid rgba(59,130,246,.2); border-radius: var(--r); margin-top: 10px; }
.allin-label { font-size: 12px; color: var(--blue2); font-weight: 600; }
.allin-value { font-size: 20px; font-weight: 800; color: var(--blue2); font-variant-numeric: tabular-nums; font-family: 'SF Mono',monospace; }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th { padding: 7px 12px; text-align: left; font-size: 10px; font-weight: 700;
           color: var(--t3); text-transform: uppercase; letter-spacing: .06em;
           border-bottom: 1px solid var(--b1); background: var(--s2); white-space: nowrap; }
tbody td { padding: 8px 12px; border-bottom: 1px solid rgba(30,45,69,.5); color: var(--t2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(30,45,69,.4); }
.td-muted { color: var(--t3); font-size: 11px; }
.td-mono  { font-family: 'SF Mono','Fira Code',monospace; font-size: 11px; }
.font-mono { font-family: 'SF Mono','Fira Code',monospace; }

/* ── Filters bar ──────────────────────────────────────────── */
.filters-bar { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--rl);
               padding: 10px 14px; display: flex; gap: 8px; flex-wrap: wrap;
               align-items: flex-end; margin-bottom: 14px; }
.filter-group { display: flex; flex-direction: column; gap: 3px; }
.filter-label { font-size: 9px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: .06em; }
.filter-group .form-control { min-width: 120px; font-size: 11px; padding: 5px 8px; }

/* ── Semaphore ────────────────────────────────────────────── */
@keyframes pulse-g { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.25)} 50%{box-shadow:0 0 0 12px rgba(34,197,94,0)} }
@keyframes pulse-a { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.25)} 50%{box-shadow:0 0 0 12px rgba(245,158,11,0)} }
@keyframes pulse-r { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.25)} 50%{box-shadow:0 0 0 12px rgba(239,68,68,0)} }
.sem-pulse-buy  { animation: pulse-g 3s ease-in-out infinite; }
.sem-pulse-wait { animation: pulse-a 3s ease-in-out infinite; }
.sem-pulse-avoid{ animation: pulse-r 3s ease-in-out infinite; }
.score-bar-fill { height: 100%; border-radius: 2px; transition: width 1s cubic-bezier(.4,0,.2,1); }

/* ── Chat ─────────────────────────────────────────────────── */
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 44px - 32px); }
.chat-messages { flex: 1; overflow-y: auto; background: var(--s1); border: 1px solid var(--b1);
                 border-radius: var(--rl); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-message { display: flex; }
.chat-message.user { justify-content: flex-end; }
.chat-bubble { max-width: 78%; padding: 9px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; }
.chat-message.user .chat-bubble { background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.25); color: var(--blue2); }
.chat-message.assistant .chat-bubble { background: var(--s2); border: 1px solid var(--b1); color: var(--t1); }
.chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-input-row .form-control { flex: 1; }
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
              height: 100%; text-align: center; color: var(--t3); }
.chat-empty i { font-size: 36px; margin-bottom: 12px; color: var(--t4); }
.chat-suggestion { padding: 7px 12px; font-size: 11px; text-align: left; background: var(--s2);
                   border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
                   color: var(--t3); transition: all .12s; width: 100%; }
.chat-suggestion:hover { background: var(--s3); border-color: var(--b2); color: var(--t1); }

/* ── Route selector ───────────────────────────────────────── */
.route-selector { display: flex; align-items: center; gap: 6px; background: var(--s2);
                  border: 1px solid var(--b1); border-radius: var(--r); padding: 5px 10px; }
.route-selector select { border: none; outline: none; background: transparent;
                         cursor: pointer; font-size: 12px; color: var(--t1); font-family: inherit; }
.route-arrow { color: var(--t4); font-size: 14px; }
.eq-tabs { display: flex; gap: 1px; background: var(--s2); border: 1px solid var(--b1);
           border-radius: var(--r); padding: 2px; }
.eq-tab { padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 500;
          color: var(--t3); cursor: pointer; border: none; background: transparent; transition: all .12s; }
.eq-tab.active { background: var(--blue); color: #fff; }
.eq-tab:hover:not(.active) { color: var(--t1); background: var(--s3); }

/* ── Login ────────────────────────────────────────────────── */
.login-bg { min-height: 100vh; background: var(--bg); display: flex; align-items: center;
            justify-content: center; padding: 24px;
            background-image: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,.04) 0%, transparent 60%),
                              radial-gradient(ellipse at 80% 20%, rgba(6,182,212,.03) 0%, transparent 60%); }
.login-card { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--rl);
              width: 100%; max-width: 380px; overflow: hidden;
              box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.05); }
.login-header { background: var(--s2); padding: 24px 28px; text-align: center; border-bottom: 1px solid var(--b1); }
.login-body { padding: 24px 28px; }
.login-footer { padding: 10px 28px; border-top: 1px solid var(--b1); text-align: center;
                font-size: 10px; color: var(--t4); background: rgba(6,13,31,.4); }

/* ── KPI cards ────────────────────────────────────────────── */
.kpi-card { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--rl);
            padding: 12px 14px; position: relative; overflow: hidden; }
.kpi-label { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.kpi-value { font-size: 21px; font-weight: 800; color: var(--t1); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: 11px; font-weight: 600; margin-top: 3px; }
.kpi-delta.up   { color: var(--red); }
.kpi-delta.down { color: var(--green); }
.kpi-delta.neutral { color: var(--amber); }
.metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 10px; margin-bottom: 14px; }

/* ── Carrier rank ─────────────────────────────────────────── */
.carrier-rank-card { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--rl); margin-bottom: 10px; overflow: hidden; }
.carrier-rank-card.rank-1 { border-color: rgba(34,197,94,.3); }
.carrier-rank-header { padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--b1); }
.rank-number { width: 24px; height: 24px; border-radius: 50%; background: var(--s2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--t3); flex-shrink: 0; }
.rank-number.first { background: rgba(34,197,94,.1); color: var(--green); border: 1px solid rgba(34,197,94,.3); }
.carrier-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.carrier-meta { font-size: 11px; color: var(--t3); }
.carrier-best-ai { margin-left: auto; text-align: right; }
.carrier-best-ai .label { font-size: 10px; color: var(--t3); }
.carrier-best-ai .value { font-size: 17px; font-weight: 800; color: var(--blue2); font-family: 'SF Mono',monospace; }
.carrier-rank-body { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carrier-stat { font-size: 11px; color: var(--t3); }
.carrier-stat strong { display: block; font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 1px; }

/* ── Utility ──────────────────────────────────────────────── */
.text-success { color: var(--green); }
.text-warning { color: var(--amber); }
.text-danger  { color: var(--red); }
.text-info    { color: var(--blue2); }
.text-muted   { color: var(--t3); }
.text-right   { text-align: right; }
.font-bold    { font-weight: 700; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mb-4{margin-bottom:4px} .mb-8{margin-bottom:8px} .mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px} .mb-16{margin-bottom:16px} .mb-20{margin-bottom:20px}
.mt-auto { margin-top: auto; }
.w-100 { width: 100%; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center;
               padding: 48px 24px; text-align: center; color: var(--t3); }
.empty-state i { font-size: 40px; color: var(--t4); margin-bottom: 12px; }
.empty-state h3 { font-size: 14px; color: var(--t2); margin-bottom: 6px; }
.empty-state p  { font-size: 12px; margin-bottom: 16px; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%);
             transition: transform .25s ease; z-index: 100; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0 !important; }
  .form-grid-4,.form-grid-5 { grid-template-columns: 1fr 1fr; }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .page-content { padding: 12px 14px; }
}

/* ── Flash fade ───────────────────────────────────────────── */
.flash-fade { animation: fl-out .4s ease 5s forwards; }
@keyframes fl-out { to { opacity:0; max-height:0; padding:0; margin:0; } }

/* ── Chart.js overrides via CSS (dark mode) ───────────────── */
canvas { display: block; }