/* IC 2026 – TED Monitoring System · app.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    --sidebar-w:   260px;
    --topnav-h:    70px;
    --bg-1:        #070d1a;
    --bg-2:        #0d1a2e;
    --bg-3:        #112040;
    --glass:       rgba(255,255,255,0.055);
    --glass-hover: rgba(255,255,255,0.09);
    --border:      rgba(255,255,255,0.10);
    --text:        #e8edf5;
    --muted:       #7a8ba0;
    --accent:      #3b9eff;
    --intransit:   #3b82f6;
    --staging:     #f59e0b;
    --unloading:   #ea580c;
    --finish:      #22c55e;
    --delayed:     #ef4444;
    --radius-card: 18px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;min-height:100vh;
    background:var(--bg-1);
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 0%,rgba(59,158,255,.12) 0%,transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 100%,rgba(139,92,246,.10) 0%,transparent 60%);
    color:var(--text);
    font-family:'DM Sans','Segoe UI',sans-serif;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
}

/* ── Layout ────────────────────────────────────────────── */
.app-layout{display:flex;min-height:100vh;}
.sidebar-spacer{width:var(--sidebar-w);flex-shrink:0;transition:width .3s ease;}
.app-layout.sidebar-collapsed .sidebar-spacer{width:0;}
.app-layout.sidebar-collapsed .sidebar-persistent{transform:translateX(-100%);}

.main-column{flex:1;min-width:0;padding:20px 24px 40px;}

/* ── Persistent sidebar (desktop) ──────────────────────── */
.sidebar-persistent{
    position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;
    background:var(--bg-2);border-right:1px solid var(--border);
    overflow:hidden;z-index:1040;transition:transform .3s ease;
}
.sidebar-top{overflow-y:auto;overflow-x:hidden;}

/* ── Offcanvas sidebar (mobile) ─────────────────────────── */
.sidebar-offcanvas{
    width:var(--sidebar-w)!important;
    background:var(--bg-2)!important;
    border-right:1px solid var(--border)!important;
}

/* ── Brand ──────────────────────────────────────────────── */
.brand-title{font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:.03em;}
.brand-subtitle{font-size:.72rem;color:var(--muted);}

/* ── TED legend pills ───────────────────────────────────── */
.ted-legend-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ted-pill{
    display:inline-flex;align-items:center;padding:4px 10px;
    border-radius:999px;font-size:.76rem;font-weight:600;
}
.intransit-bg{background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.35);color:#93c5fd;}
.staging-bg  {background:rgba(245,158,11,.2);border:1px solid rgba(245,158,11,.35);color:#fcd34d;}
.unloading-bg{background:rgba(234,88,12,.2);border:1px solid rgba(234,88,12,.35);color:#fdba74;}
.finish-bg   {background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.35);color:#86efac;}
.delayed-bg  {background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.35);color:#fca5a5;}

/* ── Nav items ──────────────────────────────────────────── */
.nav-item-link{
    display:flex;align-items:center;padding:9px 12px;border-radius:10px;
    color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;
    transition:background .15s,color .15s;
}
.nav-item-link:hover{background:var(--glass-hover);color:#fff;}
.nav-item-link.active{background:var(--accent);color:#fff;}

/* ── User avatar ────────────────────────────────────────── */
.user-avatar{
    width:34px;height:34px;border-radius:50%;
    background:rgba(59,158,255,.2);border:1px solid rgba(59,158,255,.35);
    display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;
}

/* ── Topnav ─────────────────────────────────────────────── */
.topnav{
    background:var(--bg-2);border:1px solid var(--border);
    border-radius:16px;padding:12px 20px;
}
.page-heading{font-size:1.4rem;font-weight:700;color:#fff;}

/* ── Cards ──────────────────────────────────────────────── */
.card{
    background:var(--bg-2);border:1px solid var(--border);
    border-radius:var(--radius-card);color:var(--text);
}
.card-header{
    background:rgba(255,255,255,.04);border-bottom:1px solid var(--border);
    border-radius:var(--radius-card) var(--radius-card) 0 0!important;
    padding:14px 20px;font-weight:600;color:#fff;
}
.card-body{padding:20px;}

/* ── Stat cards ─────────────────────────────────────────── */
.stat-card{
    background:var(--glass);border:1px solid var(--border);
    border-radius:16px;padding:20px;
}
.stat-value{font-size:2.4rem;font-weight:700;line-height:1;}
.stat-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}

/* ── Table ──────────────────────────────────────────────── */
.table-responsive{border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-dark-custom{color:var(--text);border-color:var(--border);margin:0;}
.table-dark-custom thead tr th{
    background:rgba(255,255,255,.06);color:var(--muted);
    font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    padding:12px 16px;border-bottom:1px solid var(--border);border-top:none;
}
.table-dark-custom tbody tr td{
    padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;
}
.table-dark-custom tbody tr:hover td{background:var(--glass-hover);}
.table-dark-custom tbody tr:last-child td{border-bottom:none;}

/* ── Badges ─────────────────────────────────────────────── */
.badge{font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:999px;}
.badge-intransit{background:var(--intransit)!important;color:#fff!important;}
.badge-staging  {background:var(--staging)!important;color:#000!important;}
.badge-unloading{background:var(--unloading)!important;color:#fff!important;}
.badge-finish   {background:var(--finish)!important;color:#fff!important;}
.badge-delayed  {background:var(--delayed)!important;color:#fff!important;}

/* ── Buttons ────────────────────────────────────────────── */
.btn{border-radius:10px;font-weight:500;transition:all .15s;}
.btn-primary{background:var(--accent);border-color:var(--accent);}
.btn-primary:hover{background:#1d87f0;border-color:#1d87f0;}
.btn-xs{font-size:.72rem;padding:2px 8px;border-radius:6px;}

/* ── Forms ──────────────────────────────────────────────── */
.form-control,.form-select{
    background:rgba(255,255,255,.06);border:1px solid var(--border);
    color:var(--text);border-radius:10px;
}
.form-control:focus,.form-select:focus{
    background:rgba(255,255,255,.09);border-color:var(--accent);
    color:var(--text);box-shadow:0 0 0 3px rgba(59,158,255,.2);
}
.form-control::placeholder{color:var(--muted);}
.form-label{font-size:.85rem;font-weight:500;color:var(--muted);margin-bottom:4px;}
.form-select option{background:var(--bg-2);color:var(--text);}

/* ── Modal ──────────────────────────────────────────────── */
.modal-dialog-scrollable{max-height:calc(100dvh - 56px)!important;height:calc(100dvh - 56px)!important;}
.modal-dialog-scrollable>.modal-content{max-height:calc(100dvh - 56px)!important;height:100%!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
.modal-dialog-scrollable>.modal-content>.modal-body,
.modal-dialog-scrollable>.modal-content>form>.modal-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;}
.modal-dialog-scrollable>.modal-content>.modal-header,
.modal-dialog-scrollable>.modal-content>.modal-footer,
.modal-dialog-scrollable>.modal-content>form>.modal-header,
.modal-dialog-scrollable>.modal-content>form>.modal-footer{flex-shrink:0!important;}
.modal-dialog-scrollable>.modal-content>form{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;}

.modal-ted{background:#0d1a2e;border:1px solid rgba(255,255,255,.12);border-radius:18px;color:var(--text);}
.modal-ted .modal-header,.modal-ted .modal-footer{background:transparent;border-color:var(--border);}
.modal-ted .modal-title{font-size:1rem;font-weight:700;color:#fff;}
.modal-backdrop{background-color:rgba(0,0,0,.65)!important;}

/* ── Alerts ─────────────────────────────────────────────── */
.alert{border-radius:12px;font-size:.88rem;border:none;}
.alert-success{background:rgba(34,197,94,.15);color:#86efac;}
.alert-danger {background:rgba(239,68,68,.15);color:#fca5a5;}
.alert-warning{background:rgba(245,158,11,.15);color:#fcd34d;}
.alert-info   {background:rgba(59,158,255,.15);color:#93c5fd;}
.btn-close-white{filter:invert(1) grayscale(1) brightness(2);}

/* ── Dropzone ───────────────────────────────────────────── */
#dropZone:hover{background:rgba(255,255,255,.06);}
.border-dashed{border-style:dashed!important;}

/* ── FullCalendar overrides ─────────────────────────────── */
.fc{color:var(--text);}
.fc .fc-toolbar-title{color:#fff;font-size:1.1rem;font-weight:700;}
.fc-theme-standard td,.fc-theme-standard th,.fc-theme-standard .fc-scrollgrid{border-color:var(--border);}
.fc .fc-daygrid-day-number,.fc .fc-col-header-cell-cushion{color:var(--text);text-decoration:none;}
.fc .fc-button-primary{background:var(--accent);border-color:var(--accent);font-size:.82rem;border-radius:8px;}
.fc .fc-button-primary:hover,.fc .fc-button-primary:not(:disabled):active{background:#1d87f0;border-color:#1d87f0;}
.fc .fc-daygrid-day.fc-day-today{background:rgba(59,158,255,.08);}

/* ── Login page ─────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;}
.login-card{max-width:440px;width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:22px;padding:36px;}

/* ── Utilities ──────────────────────────────────────────── */
.text-light-emphasis{color:var(--muted)!important;}
.fw-mono{font-family:'JetBrains Mono',monospace;}

/* ── Mobile tweaks ──────────────────────────────────────── */
@media(max-width:575px){
    .main-column{padding:12px 14px 20px;}
    .page-heading{font-size:1.2rem;}
    .topnav{padding:10px 14px;border-radius:14px;}
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);}

/* ── DataTables dark theme overrides ──────────────────────── */
.dataTables_filter { display: none !important; }

.dataTables_length label { color:var(--muted); font-size:.82rem; display:flex; align-items:center; gap:8px; }
.dataTables_length select { background:var(--glass)!important; color:var(--text)!important; border:1px solid var(--border)!important; border-radius:8px!important; padding:4px 10px!important; font-size:.82rem!important; }

.dataTables_info { color:var(--muted); font-size:.80rem; padding-top:4px; }

.dataTables_paginate .pagination { margin:0; gap:3px; }
.dataTables_paginate .page-link { background:var(--glass)!important; border:1px solid var(--border)!important; color:var(--text)!important; border-radius:8px!important; padding:5px 11px!important; font-size:.82rem!important; transition:background .15s!important; }
.dataTables_paginate .page-link:hover { background:var(--glass-hover)!important; color:#fff!important; }
.dataTables_paginate .page-item.active .page-link { background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; }
.dataTables_paginate .page-item.disabled .page-link { opacity:.35!important; }

table.dataTable thead th.sorting::after      { content:' ⇅'; opacity:.4; font-size:.7rem; margin-left:4px; }
table.dataTable thead th.sorting_asc::after  { content:' ▲'; opacity:1; color:var(--accent); font-size:.7rem; margin-left:4px; }
table.dataTable thead th.sorting_desc::after { content:' ▼'; opacity:1; color:var(--accent); font-size:.7rem; margin-left:4px; }

.dt-top-bar, .dt-bottom-bar { padding:6px 16px; }

/* ── Table cell text — grey at rest, white on hover ─────────────────────── */

/* Normal state — black text */
.table-dark-custom tbody tr td,
.table-dark-custom tbody tr td div,
.table-dark-custom tbody tr td a {
    color: #000000 !important;
}
.table-dark-custom tbody tr td .text-light-emphasis,
.table-dark-custom tbody tr td .small.text-light-emphasis {
    color: #374151 !important;
}
.table-dark-custom tbody tr td .fw-semibold,
.table-dark-custom tbody tr td .fw-mono {
    color: #000000 !important;
}

/* Hover state — bump to white */
.table-dark-custom tbody tr:hover td,
.table-dark-custom tbody tr:hover td div,
.table-dark-custom tbody tr:hover td a {
    color: #ffffff !important;
}
.table-dark-custom tbody tr:hover td .text-light-emphasis {
    color: #94a3b8 !important;
}

/* Keep tag-select colors driven by inline style= from JS */
.table-dark-custom tbody tr td select.tag-select,
.table-dark-custom tbody tr td select.tag-select-dt {
    color: inherit !important;
}