/* 
 * RideFlow Design System 
 * Level 12 Engineering Standard - Premium UI
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Headings get their own face. Inter is a fine text font but its bold
       is quiet, and every title in the app was drawn in it — nothing sat
       above anything else. Plus Jakarta Sans has a wider, more deliberate
       bold that holds up at a glance and in capitals. */
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Color Palette — Dark Mode.
       Body now sits well below surface, so a panel reads as raised on its own
       instead of leaning on a 1px border to say so: #0f172a and #1e293b were
       barely two steps apart and every card edge vanished at a glance. */
    --bg-body: #0a0f1c;
    --bg-surface: #151d2e;
    --bg-surface-hover: #1f2a40;
    --bg-sunken: #070b15;
    --border-color: #26314a;
    --border-strong: #35425f;

    /* Typography */
    --text-primary: #f4f7fb;
    --text-secondary: #97a3b8;
    /* 4.6:1 on surface. The old #64748b measured 3.7:1, and every uppercase
       micro-label in the app is drawn in this colour. */
    --text-tertiary: #7c8799;

    /* Brand Colors.
       --primary is the brand indigo and stays as it is, but white on it
       measures 4.47:1 — just under the 4.5:1 that small text needs, and that
       is exactly what the old solid-indigo nav pill did. --primary-strong is
       the fill that may carry white text; --primary-bright is the ink for a
       tinted background, which is how selection is drawn now: 7.3:1 in dark,
       6.8:1 in light. */
    --primary: #6366f1;
    /* Indigo 500 */
    --primary-hover: #818cf8;
    --primary-strong: #4f46e5;
    --primary-bright: #a5b4fc;
    --primary-soft: rgba(99, 102, 241, 0.16);
    --primary-glow: rgba(99, 102, 241, 0.5);

    /* The ink on a selected tab, once it is filled solid with its own colour.
       Dark theme tab colours are light, so the label goes dark on them. */
    --nav-ink: #0a0f1c;

    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;

    /* Spacing & Layout */
    --header-height: 64px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);

    /* Transitions */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
    /* Color Palette — Light Mode */
    --bg-body: #f5f6fa;
    --bg-surface: #ffffff;
    --bg-surface-hover: #eff1f6;
    --bg-sunken: #eaecf3;
    --border-color: #e2e6ee;
    --border-strong: #cdd4e1;

    /* Typography */
    --text-primary: #101728;
    --text-secondary: #5b6779;
    --text-tertiary: #697485;

    /* The tint is lighter and the ink far darker than in dark mode, so the
       selected tab holds about 7:1 either way round. */
    --primary-bright: #4338ca;
    --primary-soft: rgba(99, 102, 241, 0.12);

    /* Light theme tab colours are dark, so the label goes white on them. */
    --nav-ink: #ffffff;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;

    /* Inter is drawn for screens and looks heavy-set without this; the
       difference is most visible in the 0.8rem labels the app is full of. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* A single soft wash behind everything, so the page is not a flat slab of
       one colour. Fixed, so it does not slide as content scrolls. */
    background-image:
        radial-gradient(900px 420px at 12% -12%, rgba(99, 102, 241, 0.10), transparent 65%),
        radial-gradient(760px 380px at 92% -6%, rgba(14, 165, 233, 0.07), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Headings tighten as they grow — at display sizes the default tracking reads
   as gappy, while small text needs every bit of its spacing to stay legible. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,
.section-title, .page-title, .card-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.22;
}

/* Capitals need room, not less of it. Every small uppercase label in the app
   was 0.7rem with tight tracking, which is where "the headings are not clear"
   came from — the letters ran together at the size they are actually read at.
   One rule, so they cannot drift apart again. */
.eyebrow, .settings-rail-title, .table thead th, .kpi-label, .stat-label {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Figures line up in columns and stop jittering as they tick over. Applied
   where numbers are read as numbers rather than as prose. */
table, .kpi-val, .stat-value, .calc-row, .calc-total, .fin-wrap td, .badge {
    font-variant-numeric: tabular-nums;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* -------------------------------------------------------------------------- */
/*                                 Typography                                 */
/* -------------------------------------------------------------------------- */
.h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.text-gray-800 {
    color: var(--text-primary) !important;
}

/* Override for dark mode */
.text-gray-600 {
    color: var(--text-secondary) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-success {
    color: var(--success) !important;
}

.fw-medium {
    font-weight: 500;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: right;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.p-0 {
    padding: 0 !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

/* -------------------------------------------------------------------------- */
/*                                    Flexbox                                 */
/* -------------------------------------------------------------------------- */
.d-flex {
    display: flex !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-center {
    justify-content: center !important;
}

.align-items-center {
    align-items: center !important;
}

.g-3 {
    gap: 1rem;
}

/* -------------------------------------------------------------------------- */
/*                                     Grid                                   */
/* -------------------------------------------------------------------------- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.col-md-2,
.col-md-4,
.col-md-6,
.col-md-8,
.col-lg-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
}

@media (min-width: 768px) {
    .col-md-2 {
        width: 16.666667%;
    }

    .col-md-4 {
        width: 33.333333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-8 {
        width: 66.666667%;
    }
}

@media (min-width: 992px) {
    .col-lg-6 {
        width: 50%;
    }
}

/* -------------------------------------------------------------------------- */
/*                                  Components                                */
/* -------------------------------------------------------------------------- */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px var(--primary-glow);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: #475569;
}

.btn-light {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.btn-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.rounded-circle {
    border-radius: 50% !important;
}

.w-100 {
    width: 100% !important;
}

/* Cards */
.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
    /* For table rounded corners */
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

/* Inputs */
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-body);
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    background-color: var(--bg-surface);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--text-tertiary);
    /* Slightly lighter border on hover */
}

.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--bg-surface-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: var(--text-secondary);
}

.input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-label {
    margin-bottom: 0.5rem;
    display: inline-block;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.d-grid {
    display: grid;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary);
}

.table th,
.table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.table thead th {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.align-middle {
    vertical-align: middle !important;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    gap: 0.25rem;
}

.rounded-pill {
    border-radius: 50rem !important;
}

.bg-info-subtle {
    background-color: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
}

.bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.bg-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* App Shell (Header/Sidebar) overrides */
.app-header {
    height: var(--header-height);
    /* Translucent over the blur, so content passing underneath is felt rather
       than seen — the header stops looking like a separate stuck-on strip. */
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px -18px rgba(0, 0, 0, 0.8);

    /* Three tracks, and the outer two are equal — that is what puts the tab bar
       on the centre line of the page rather than merely between the logo and
       the avatar, which are nothing like the same width. minmax(0, auto) lets
       the middle track shrink and scroll instead of pushing the ends apart. */
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Browsers without color-mix get the solid surface rather than a transparent
   header with text scrolling through it. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .app-header { background: var(--bg-surface); }
}

[data-theme="light"] .app-header {
    box-shadow: 0 1px 2px rgba(16, 23, 40, 0.04), 0 8px 24px -20px rgba(16, 23, 40, 0.35);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    white-space: nowrap;
}

.logo-accent {
    color: var(--primary-hover);
}

/* The tabs sit in their own sunken rail rather than floating on the header.
   It gives the group an edge, so it reads as one control centred on the page
   instead of nine links that happen to be near each other. */
/* No container of its own: each tab carries its own box, so the gap between
   them is the header showing through and the nine read as nine. */
.nav-menu {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* overflow-x:auto also clips vertically, and the selected tab's bar hangs
       6px below its box. This is the room it needs to survive. */
    padding: 4px 0 10px;
}

/* The bar scrolls when the window is narrow, but a scrollbar sitting inside
   the header would cut the row in half. */
.nav-menu::-webkit-scrollbar { display: none; }

/* -------------------------------------------------------------------------- */
/*                          Tab colours, one per page                         */
/* -------------------------------------------------------------------------- */
/* Each destination owns a hue, so the bar is read by colour and position
   before the words are — which is what actually happens when the same person
   hits the same tab two hundred times a day.
   Two sets, because a colour legible on near-black is washed out on white and
   vice versa. Each value is measured against its own box at rest and selected,
   in both themes — four readings apiece, and the worst of the forty is
   Customers in light mode at 4.69:1, clear of the 4.5:1 line.
   --tab is the single knob every rule underneath reads. */
.nav-item[data-nav="dashboard"]      { --tab: #a5b4fc; }
.nav-item[data-nav="dispatch"]       { --tab: #7dd3fc; }
.nav-item[data-nav="trips"]          { --tab: #6ee7b7; }
.nav-item[data-nav="drivers"]        { --tab: #fcd34d; }
.nav-item[data-nav="customers"]      { --tab: #f0abfc; }
.nav-item[data-nav="calls"]          { --tab: #5eead4; }
.nav-item[data-nav="communications"] { --tab: #93c5fd; }
.nav-item[data-nav="disputes"]       { --tab: #fca5a5; }
.nav-item[data-nav="support"]        { --tab: #d8b4fe; }
/* Settings is the one deliberately without a hue: it sits on the other side of
   the bar and should not compete with the nine destinations. */
.nav-item[data-nav="settings"]       { --tab: #cbd5e1; }

[data-theme="light"] .nav-item[data-nav="dashboard"]      { --tab: #3730a3; }
[data-theme="light"] .nav-item[data-nav="dispatch"]       { --tab: #075985; }
[data-theme="light"] .nav-item[data-nav="trips"]          { --tab: #065f46; }
[data-theme="light"] .nav-item[data-nav="drivers"]        { --tab: #854d0e; }
[data-theme="light"] .nav-item[data-nav="customers"]      { --tab: #a21caf; }
[data-theme="light"] .nav-item[data-nav="calls"]          { --tab: #115e59; }
[data-theme="light"] .nav-item[data-nav="communications"] { --tab: #1e40af; }
[data-theme="light"] .nav-item[data-nav="disputes"]       { --tab: #b91c1c; }
[data-theme="light"] .nav-item[data-nav="support"]        { --tab: #7e22ce; }
[data-theme="light"] .nav-item[data-nav="settings"]       { --tab: #475569; }

/* Every tab is its own box, filled and outlined in its own hue. The three
   states are three strengths of the same colour, so nothing has to be learned
   twice: 10% at rest, 14% under the cursor, 16% when selected.
   Those percentages are not free choices — the label is the same hue as its
   box, so the stronger the fill the less contrast is left. 16% is where the
   weakest pair (Customers in light mode) still measures 4.69:1, above the
   4.5:1 this size needs. A heavier fill fails; the selected state carries the
   extra weight in its border, its type and its underline instead. */
.nav-item {
    font-family: var(--font-display);

    /* Anything without a hue of its own falls back to secondary text. */
    --tab: var(--text-secondary);

    position: relative;
    display: flex;
    align-items: center;
    padding: 0.42rem 0.75rem;
    color: var(--tab);
    background: color-mix(in srgb, var(--tab) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tab) 26%, transparent);
    border-radius: 10px;
    font-size: 0.855rem;
    font-weight: 600;
    letter-spacing: -0.006em;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-item:hover {
    background: color-mix(in srgb, var(--tab) 14%, transparent);
    border-color: color-mix(in srgb, var(--tab) 44%, transparent);
}

/* The page you are on is a solid block of its colour among outlined ones —
   the one state that cannot be mistaken for the other nine.
   Filling it solid also buys contrast rather than spending it: the label flips
   to --nav-ink instead of staying the same hue as its background, so the worst
   pair measures 6.32:1 against the 4.69:1 the old tinted version managed. */
.nav-item.active {
    background: var(--tab);
    border-color: var(--tab);
    color: var(--nav-ink);
    font-weight: 700;
    box-shadow: 0 3px 14px -3px color-mix(in srgb, var(--tab) 60%, transparent),
                0 1px 3px rgba(0, 0, 0, 0.28);
}

/* Icons are drawn with currentColor, so they flip with the label. */
.nav-item.active .nav-icon { color: var(--nav-ink); }

[data-theme="light"] .nav-item.active {
    box-shadow: 0 3px 14px -3px color-mix(in srgb, var(--tab) 55%, transparent),
                0 1px 3px rgba(16, 23, 40, 0.16);
}

/* Without color-mix the boxes would be invisible, so fall back to the flat
   surface colours rather than to nothing. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .nav-item        { background: var(--bg-surface); border-color: var(--border-color); }
    .nav-item:hover  { background: var(--bg-surface-hover); }
    /* The solid fill needs no mixing, so the selected tab is intact here —
       only its glow is dropped. */
    .nav-item.active { background: var(--tab); border-color: var(--tab); box-shadow: none; }
}

/* And a bar underneath the box, outside it, in the tab's own colour. Belt and
   braces on purpose: the fill alone is a colour cue, and colour alone is not
   something to hang "which page am I on" on. The bar is position, which reads
   even to someone who cannot separate the hues at all.
   var(--tab) rather than currentColor, because currentColor is now the flipped
   ink of the solid fill. */
.nav-item.active::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -6px;
    height: 3px;
    border-radius: 3px;
    background: var(--tab);
}

.nav-icon {
    width: 17px;
    height: 17px;
    margin-right: 0.45rem;
    flex-shrink: 0;
}

/* Narrow windows drop to icons only. The colours are what make that readable
   — nine grey glyphs would be a guessing game, nine coloured ones are not. */
@media (max-width: 1180px) {
    .app-header { padding: 0 1rem; gap: 0.5rem; }
    .nav-label { display: none; }
    .nav-icon { margin-right: 0; }
    .nav-item { padding: 0.45rem 0.55rem; }
}

.main-content {
    flex: 1;
}

/* -------------------------------------------------------------------------- */
/*                        Settings shell (shared)                             */
/* -------------------------------------------------------------------------- */
/* Used by Settings itself and by the two pages that now live under it,
   Financials and Pricing, so all three read as one area of the app rather
   than three unrelated screens. */
.settings-shell {
    display: flex;
    gap: 1.75rem;
    padding: 1.75rem 2rem;
    align-items: flex-start;
}

.settings-rail {
    width: 232px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height) + 1.25rem);
}

.settings-rail-title {
    color: var(--text-tertiary);
    padding: 0 0.75rem;
    margin-bottom: 0.6rem;
}

.settings-rail-title + .settings-rail-title { margin-top: 1.5rem; }

.set-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 2px;
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.set-nav:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

.set-nav.active {
    background: var(--primary-soft);
    color: var(--primary-bright);
    font-weight: 700;
}

.set-nav svg { width: 17px; height: 17px; flex-shrink: 0; }

.settings-panel {
    flex: 1;
    min-width: 0;
}

/* Settings' own forms want a reading measure; the two dashboards do not. */
.settings-panel.is-form {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.75rem 2rem;
    max-width: 820px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

@media (max-width: 900px) {
    .settings-shell { flex-direction: column; padding: 1rem; gap: 1rem; }
    .settings-rail { width: 100%; position: static; display: flex; gap: 4px; overflow-x: auto; }
    .settings-rail-title { display: none; }
    .set-nav { margin-bottom: 0; white-space: nowrap; }
}

    /* -------------------------------------------------------------------------- */
    /*                              Call & Panel UI                               */
    /* -------------------------------------------------------------------------- */
    .col-panel {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .panel-header {
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--text-primary);
    }

    .panel-body {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
    }

    .call-card {
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--primary);
        border-radius: var(--radius-sm);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        position: relative;
        color: var(--text-primary);
    }

    .call-card.active {
        border-left-color: var(--primary);
    }

    .call-card.hold {
        border-left-color: var(--warning);
    }

    .call-card.ring {
        border-left-color: var(--success);
    }