:root {
    --brand: #104205;
    --brand-dark: #0c3303;
    --bg: #f4f7f6;
    --border: #dee2e6;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; max-width: 100%; }
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg);
    margin: 0;
    color: #1f2937;
    overflow-x: hidden;
    max-width: 100%;
}
a { color: inherit; }

/* ---------- Login ---------- */
.login-wrap { max-width: 420px; margin: 80px auto; width: 100%; padding: 0 10px; }
.login-panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; font-size: .88em; font-weight: 600; margin-bottom: 8px; color: #444; }
.form-control, input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea {
    width: 100%; padding: 10px 12px; height: 42px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: .95em; background: #fff; color: #333; margin-bottom: 15px;
}
textarea { height: auto; padding: 10px 12px; }
.btn-submit, .btn, .btn-success, button[type=submit] {
    background: var(--brand); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 1em; cursor: pointer; padding: 10px 20px; height: 46px;
}
.btn-submit:hover, .btn-success:hover, button[type=submit]:hover { background: var(--brand-dark); }
.alert-msg { background: #ffebee; color: #c62828; padding: 12px; border-radius: 6px; margin-bottom: 20px; font-weight: 600; font-size: .9em; text-align: center; border: 1px solid #ffcdd2; }
.success-msg { background: #e8f5e9; color: #2e7d32; padding: 12px; border-radius: 6px; margin-bottom: 20px; font-weight: 600; font-size: .9em; text-align: center; border: 1px solid #c8e6c9; }

/* ---------- Admin / Dashboard shell ---------- */
.dashboard-container { max-width: 1400px; margin: 0 auto; padding: 20px; }
.admin-container { max-width: 100%; margin: 0; padding: 20px 30px; }
.admin-header {
    background: var(--brand); color: #fff; padding: 18px 24px; border-radius: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.tab-nav-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.tab-btn { background: #fff; border: 1px solid var(--border); padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit; font-size: .9em; color: #475569; }
.tab-btn.active-tab { background: var(--brand); color: #fff; border-color: var(--brand); }
.tab-window-content { display: none; }
.tab-window-content.active-window { display: block; }

.panel { background: #fff; border: 1px solid #eef2f5; border-radius: 12px; padding: 22px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.03); }
#fs-filter-box-1, #fs-filter-box-2, #th-status-filter-box { padding: 14px 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: none; }
.panel h3 { margin-top: 0; color: var(--brand); }
.form-grid { display: flex; gap: 15px; flex-wrap: wrap; }
.form-grid > div { flex: 1; min-width: 180px; }

table { width: 100%; border-collapse: collapse; margin: 15px 0 5px; background: #fff; border: 1px solid #eef2f5; border-radius: 8px; overflow: hidden; font-size: .92em; }
th { background: #f1f5f9; color: #475569; font-weight: 600; text-align: left; padding: 7px 14px; text-transform: uppercase; font-size: .78em; letter-spacing: .4px; }
td { padding: 7px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
tr:hover td { background: #f8fafc; }
.table-responsive-container { overflow-x: auto; overflow-y: visible; max-width: 100%; -webkit-overflow-scrolling: touch; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: .78em; font-weight: 700; background: #f1f3f5; color: #37474f; }
.ts-tooltip { border-bottom: 1px dotted #94a3b8; cursor: help; white-space: nowrap; }
.badge-active { background: #e8f5e9; color: #2e7d32; }
.badge-paused { background: #fff3e0; color: #e65100; }
/* Trip timeline status colors - in-progress statuses move through cool
   tones as the trip advances, amber marks POB specifically since that's
   the "actively happening right now" moment worth drawing the eye to,
   Completed reuses the existing success green, and each cancellation type
   gets its own distinguishable red-family shade so you can tell which kind
   of bad ending it was without reading the text. */
.status-created { background: #f1f3f5; color: #495057; }
.status-dispatching { background: #e3f2fd; color: #1565c0; }
.status-accepted { background: #e0f7fa; color: #00838f; }
.status-arrived { background: #f3e5f5; color: #7b1fa2; }
.status-pob { background: #fff3e0; color: #e65100; }
.status-completed { background: #e8f5e9; color: #2e7d32; }
.status-dispatch-cancelled { background: #ffebee; color: #c62828; }
.status-customer-cancelled { background: #fce4ec; color: #ad1457; }
.status-no-show { background: #efebe9; color: #4e342e; }
.source-dispatch { background: #ede7f6; color: #4527a0; }
.source-app { background: #e0f2f1; color: #00695c; }
.source-ivr { background: #fff8e1; color: #ff8f00; }
.source-web { background: #e1f5fe; color: #0277bd; }
.source-hail { background: #fce4ec; color: #c2185b; }
.source-other { background: #f1f3f5; color: #495057; }
.source-taxibutler { background: #e8f5e9; color: #2e7d32; }
.fs-toggle-btn { background:#f3e5f5; border:1px solid #e1bee7; color:#4a148c; font-weight:600; cursor:pointer; user-select:none; width:auto; height:43px; display:flex; align-items:center; padding:0 20px; border-radius:6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary { background: #334155; }
.btn-warning { background: #ffe0b2; color: #e65100; border: 1px solid #ffb74d; }
.btn-danger { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.inline-action { display: inline; margin: 0; } .inline-action button { font-family: inherit; }

.system-alert-banner-item { position: fixed; top: 25px; right: 25px; z-index: 99999; max-width: 420px; padding: 16px 24px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,.15); font-weight: 500; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99999; justify-content: center; align-items: center; }
.modal-overlay.active-modal { display: flex; }
.modal-content { background: #fff; width: 100%; max-width: 550px; padding: 30px; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,.2); position: relative; max-height: 90vh; overflow-y: auto; }
.modal-content.modal-wide { max-width: 900px; }

/* ---------- Driver Shift email body rich-text editor ---------- */
.ds-placeholder-chip { cursor: grab; user-select: none; background: #e2e8f0; padding: 2px 6px; border-radius: 4px; }
.ds-placeholder-chip:active { cursor: grabbing; }
.ds-editor-toolbar { display: flex; gap: 4px; margin-top: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.ds-editor-toolbar button { width: 30px; height: 30px; border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; cursor: pointer; font-size: .9em; }
.ds-editor-toolbar button:hover { background: #f1f5f9; }
.ds-editor-toolbar select { border: 1px solid #cbd5e1; border-radius: 4px; font-size: .82em; padding: 0 4px; }
.ds-editor-body { min-height: 140px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; font-size: .9em; overflow-y: auto; }
.ds-editor-body:empty:before { content: attr(data-placeholder); color: #94a3b8; }
.ds-drop-target.ds-drag-over { outline: 2px dashed #104205; outline-offset: 2px; }
.modal-content h3 { margin-top: 0; color: var(--brand); border-bottom: 1px solid #eef2f5; padding-bottom: 12px; }
.modal-close-x-btn { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 1.6em; color: #94a3b8; cursor: pointer; }

code, pre { font-family: 'Courier New', monospace; background: #f8fafc; border: 1px solid #e2e2f0; padding: 4px 8px; border-radius: 4px; font-size: .88em; }

/* ---------- Dashboard bookings ---------- */
.status-summary-card { flex: 1; min-width: 90px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.02); transition: all .2s ease-in-out; box-sizing: border-box; }
.status-summary-card:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.04); border-color: #104205; }
.summary-count { font-size: 1.4em; font-weight: 700; color: var(--brand); line-height: 1.1; }
.summary-label { font-size: .72em; color: #64748b; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
#icabbi-matrix-status-telemetry-summary-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.collapsible-log-trigger { background: #fff; border: 1px solid #eef2f5; border-radius: 8px; padding: 14px 18px; display: flex; justify-content: space-between; cursor: pointer; margin-bottom: 6px; align-items: center; }
.log-title-text { font-weight: 600; margin-right: 10px; }
.log-body-accordion-wrapper { display: none; margin-bottom: 18px; }
.log-body-accordion-wrapper.open { display: block; }

/* ---------- Delay tracker badges (dashboard) ---------- */
.timer-green { background-color: #2e7d32; }
.timer-amber { background-color: #f57c00; }
.timer-red { background-color: #d32f2f; animation: flash-bg 1.2s infinite; }
.timer-red-static { background-color: #d32f2f; }
.timer-neutral { background-color: #78909c; }
@keyframes flash-bg {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.live-dot-pulse {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2e7d32;
    animation: pulse-dot 1.4s infinite;
}
@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(46,125,50,.55); }
    70% { box-shadow: 0 0 0 7px rgba(46,125,50,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
}

/* ---------- System-admin company-override bar (dashboard) ---------- */
.system-admin-bar {
    background: #311b92;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .9em;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    flex-wrap: wrap;
    gap: 10px;
}
#system-company-switcher {
    padding: 8px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 600;
    font-size: .9em;
    color: #311b92;
    background: #fff;
    border: none;
    cursor: pointer;
    min-width: 240px;
}

/* ---------- Dashboard sortable table ---------- */
.icabbi-table th[data-sort] { cursor: pointer; user-select: none; }
.icabbi-table th[data-sort]:hover { background: #eef2f5 !important; }
.icabbi-manual-sync-trigger { cursor: pointer; }

/* ---------- Admin sidebar layout ---------- */
.admin-layout-wrapper { display: flex; gap: 20px; align-items: flex-start; }
.admin-sidebar { width: 240px; flex-shrink: 0; background: #fff; border-radius: 12px; border: 1px solid #eef2f5; padding: 16px 12px; position: sticky; top: 16px; }
.admin-sidebar-company-selector { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #eef2f5; }
.admin-sidebar-company-selector label { display: block; font-size: .78em; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 4px; }
.admin-sidebar-company-selector select { width: 100%; }
.admin-sidebar-company-selector small { display: block; margin-top: 6px; color: #94a3b8; font-size: .74em; line-height: 1.3; }
.admin-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar-nav .tab-btn { text-align: left; width: 100%; padding: 9px 12px; border-radius: 8px; background: transparent; border: none; font-size: .9em; color: #334155; cursor: pointer; }
.admin-sidebar-nav .tab-btn:hover { background: #f1f5f9; }
.admin-sidebar-nav .tab-btn.active-tab { background: #104205; color: #fff; font-weight: 600; }
.admin-sidebar-divider { font-size: .74em; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin: 14px 4px 6px; }
.admin-sidebar-nav-global .tab-btn.active-tab { background: #334155; }
.admin-main-content { flex: 1; min-width: 0; }
.admin-sidebar-toggle-btn { display: none; width: 100%; align-items: center; justify-content: space-between; background: #f8fafc; border: 1px solid #eef2f5; border-radius: 8px; padding: 10px 14px; font-weight: 600; color: #104205; cursor: pointer; font-family: inherit; font-size: .92em; }
.admin-sidebar-toggle-btn .chevron { transition: transform .15s ease; }
.admin-sidebar-toggle-btn.open .chevron { transform: rotate(180deg); }
@media (max-width: 900px) {
    .admin-layout-wrapper { flex-direction: column; }
    .admin-sidebar { width: 100%; position: static; padding: 10px 12px; }
    .admin-sidebar-toggle-btn { display: flex; }
    .admin-sidebar-nav-wrapper { display: none; }
    .admin-sidebar-nav-wrapper.mobile-nav-open { display: block; margin-top: 12px; }
    .admin-sidebar-nav .tab-btn { padding: 11px 12px; font-size: .95em; }
}

/* ---------- Feature Settings tile grid ---------- */
.feature-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 900px) {
    .feature-tiles-grid { grid-template-columns: 1fr; }
}
.feature-tile { background: #fff; border: 1px solid #eef2f5; border-radius: 12px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.feature-tile h4 { margin: 0 0 10px 0; color: #104205; font-size: 1.02em; }
.feature-tile label.toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .88em; margin-bottom: 8px; }
.feature-tile label.toggle-row input { width: 17px; height: 17px; margin: 0; }
.feature-tile .tile-feedback { margin-top: 8px; font-weight: 600; font-size: .82em; }

/* ---------- Dashboard compact controls ---------- */
/* The global `.form-control, input, select { width:100%; height:42px; }` rule
   above was written for the admin portal's roomy forms - it was bleeding
   through onto the dashboard's intentionally small, inline controls (the
   threshold dropdowns and the company switcher), stretching them to full
   width and 42px tall despite their own inline padding, which is why the
   threshold row wrapped onto two lines and the switcher spanned the whole
   purple bar. These overrides restore the original's compact, single-row
   sizing for just those specific controls. */
#threshold-amber, #threshold-red, #threshold-hours {
    width: auto !important;
    height: auto !important;
    padding: 2px 4px !important;
    display: inline-block !important;
    margin-bottom: 0 !important;
}
#system-company-switcher {
    width: auto !important;
    height: auto !important;
    min-width: 240px;
    padding: 8px 12px !important;
    margin-bottom: 0 !important;
}
#icabbi-search, #icabbi-veh-dr-search, #icabbi-account-filter {
    height: 38px !important;
    padding: 8px 12px !important;
}

/* ---------- Dashboard fullscreen mode ---------- */
/* Matches the legacy dashboard.php ".fullscreen-active-matrix" engine:
   the wrapper fills the viewport, all filter/threshold/system-admin chrome
   is hidden, a compact top bar (clock + company + sync + minimize) takes
   its place, and only the live bookings table scrolls. */
.fullscreen-active-matrix {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.fullscreen-active-matrix .fullscreen-top-bar {
    display: flex !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    border-bottom: 2px solid #104205 !important;
    padding: 6px 20px !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
    box-sizing: border-box !important;
}
/* The sync block defaults to matching "Fullscreen Mode" (.fs-toggle-btn),
   its neighbor on the normal screen - but inside fullscreen mode, its
   actual neighbor is the much more compact "Minimize View" button, so it
   shrinks to match that context instead. !important is required since the
   default size is set via an inline style (JS-generated), which otherwise
   always wins over any external stylesheet rule regardless of selector
   specificity. */
.fullscreen-active-matrix #refresh-status-block {
    height: 29px !important;
    padding: 0 12px !important;
    font-size: .8em !important;
    border-radius: 5px !important;
}
.fullscreen-active-matrix #icabbi-matrix-status-telemetry-summary-bar {
    flex-shrink: 0 !important;
    background: #f1f5f9 !important;
    padding: 8px 20px !important;
    margin: 0 !important;
    box-shadow: none !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}
.fullscreen-active-matrix .status-summary-card { padding: 4px 8px !important; border-radius: 4px !important; }
.fullscreen-active-matrix .summary-count { font-size: 1.3em !important; }
/* The critical missing piece: #icabbi-data-container's flex:1/overflow-y:auto
   rules below have never actually worked, because its real parent in the
   DOM is #tab-active-trips-view - a plain block div, not a flex container.
   "flex" properties are silently ignored by the browser when the parent
   isn't display:flex, so #icabbi-data-container never received a
   constrained height to scroll within - it just grew to fit its content,
   and the outer wrapper's overflow:hidden clipped whatever didn't fit
   instead of ever letting internal scrolling engage. This makes the
   intermediate wrapper itself part of the flex chain so the constraint
   correctly reaches all the way down to the actual scrollable container. */
.fullscreen-active-matrix #tab-active-trips-view {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
/* Active Trips only - fullscreen was previously extended to Trip History
   and Meter Flash too, but that's been scoped back to Active Trips alone
   per request. */
.fullscreen-active-matrix #icabbi-data-container {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 20px 20px 20px !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
}
.fullscreen-active-matrix #icabbi-data-container table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}
.fullscreen-active-matrix .admin-header,
.fullscreen-active-matrix .system-admin-bar,
.fullscreen-active-matrix .tracker-and-fs-wrapper,
.fullscreen-active-matrix #fs-filter-box-1,
.fullscreen-active-matrix #fs-filter-box-2,
.fullscreen-active-matrix #dashboard-view-tabs,
.fullscreen-active-matrix #top-header-clock-container {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- General mobile responsiveness (admin + dashboard) ---------- */
@media (max-width: 768px) {
    /* Universal containment - overflow-x:hidden on body/html only stops the
       OUTERMOST page from scrolling/zooming; it does nothing to stop an
       individual element (a panel, a paragraph, a read-only field) from
       rendering wider than the viewport in the first place. Without this,
       that excess content just becomes invisible and unreachable rather
       than clipped cleanly - exactly what "text cut off with no way to
       scroll to it" looks like. This is the actual fix, applied once
       broadly rather than hunted down element-by-element per tab. */
    * { max-width: 100%; }
    .admin-container { padding: 12px; }
    .dashboard-container { padding: 8px; }
    .panel { padding: 14px !important; }
    .modal-content { padding: 18px; max-width: 100% !important; width: calc(100% - 20px); }
    .modal-overlay { padding: 10px; }
    .ds-two-col-grid { grid-template-columns: 1fr !important; }
    .admin-header h2 { font-size: 1.15em !important; }
    .admin-header p { display: none; } /* subtitle - not essential on a narrow screen, cuts clutter */
    table { font-size: .85em; }
    .form-control, select, input[type="text"], input[type="email"], input[type="number"], input[type="password"] { font-size: 16px; } /* prevents iOS auto-zoom on focus */
    .form-grid { flex-direction: column; }
    .form-grid > div { min-width: 100% !important; width: 100%; }
    /* table-responsive-container is the one deliberate exception - it needs
       to scroll internally on a genuinely wide table, not be squeezed to
       100% and forced to wrap/break its own content. */
    .table-responsive-container, .table-responsive-container table { max-width: none; }
}
@media (max-width: 480px) {
    .feature-tile { padding: 14px; }
    .btn, button { font-size: .88em; }
}