/* ------------------------------------------------------------------
   Courtesy car calendar — the dark/light "neon" design (demo: public/demo/courtesy-car-calendar-neon*.html).

   EVERYTHING here is written under `.cc`, the wrapper templates/fleet/calendar.html.twig puts round the
   page. The HR calendar and the technician schedule render the same wf-calendar-table markup as the
   car grid, so a rule against those shared classes on their own would restyle all three; scoped under
   `.cc` they cannot be reached. Do not "simplify" a selector here by dropping the `.cc`.

   Specificity: app.css (loaded first) styles .fc-cell, .wf-calendar-table and the dark overrides with
   selectors up to (0,3,1). The grid rules below carry `.cc .wf-calendar-scroll` so they sit above those
   without needing !important or source-order luck.

   Theme: light is the default; `[data-bs-theme="dark"]` swaps the tokens. The page backdrop (the
   deep-navy / pale grey field and the top glows) is put on `.shell__main:has(.cc)` so it belongs to
   this page only. Weekend columns are bracketed with an inset box-shadow, never a border-left/right:
   the shared table is border-collapse and the two browsers resolve a collapsed border differently
   (see app.css, the weekend rules).
   ------------------------------------------------------------------ */

.cc {
    --cc-page: #f0f3f7;
    --cc-panel: #ffffff;
    --cc-panel-2: #f6f8fb;
    --cc-line: #dde3ea;
    --cc-line-2: #c9d2dc;
    --cc-grid: rgba(16, 24, 40, 0.07);
    --cc-ink: #101820;
    --cc-ink-2: #374352;
    --cc-muted: #637083;
    --cc-accent: #07895c;
    --cc-green: #00de91;
    --cc-cyan: #02b3fe;
    --cc-wk: #eaf1fa;
    --cc-wk-head: #e1ebf8;
    --cc-today: #1a86ff;
    --cc-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 34px rgba(16, 24, 40, 0.06);
    --cc-tile-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    --cc-btn-bg: #ffffff;
    --cc-btn-hover: #f7f9fb;
    --cc-btn-hover-line: #9fb0c1;

    /* tile colours: fill, border, dot, ink */
    --cc-available-bg: #d7f6e6; --cc-available-bc: #19b36f; --cc-available-dot: #12b866; --cc-available-ink: #06563a;
    --cc-booked-bg: #d9ebff;    --cc-booked-bc: #3a8fe8;    --cc-booked-dot: #1f7cf0;    --cc-booked-ink: #0a3f7a;
    --cc-on_loan-bg: #ffeec9;   --cc-on_loan-bc: #dba21a;   --cc-on_loan-dot: #f0a000;   --cc-on_loan-ink: #6e4600;
    --cc-off_road-bg: #fde1e4;  --cc-off_road-bc: #de4c5a;  --cc-off_road-dot: #e5333f;  --cc-off_road-ink: #7a0f19;
    --cc-red: #e5333f;
    --cc-thumb-bg: #0b1119;

    font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--cc-ink);
    position: relative;
}
[data-bs-theme="dark"] .cc {
    --cc-page: #060a0f;
    --cc-panel: #0a1118;
    --cc-panel-2: #0e1721;
    --cc-line: #1a2631;
    --cc-line-2: #243342;
    --cc-grid: rgba(36, 51, 66, 0.45);
    --cc-ink: #eef3f8;
    --cc-ink-2: #c3cdd8;
    --cc-muted: #8995a5;
    --cc-accent: #00de91;
    --cc-wk: #0c1a2a;
    --cc-wk-head: #0d1b2c;
    --cc-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 20px 50px rgba(0, 0, 0, 0.25);
    --cc-tile-shadow: none;
    --cc-btn-bg: #0b131b;
    --cc-btn-hover: #0e1822;
    --cc-btn-hover-line: #3a5063;

    --cc-available-bg: #0b3a2d; --cc-available-bc: #0e8f60; --cc-available-dot: #22e27a; --cc-available-ink: #e4fbee;
    --cc-booked-bg: #0b2a4d;    --cc-booked-bc: #2077d8;    --cc-booked-dot: #3d9bff;    --cc-booked-ink: #e6f1ff;
    --cc-on_loan-bg: #3a2b0a;   --cc-on_loan-bc: #c98b12;   --cc-on_loan-dot: #ffb020;   --cc-on_loan-ink: #fff1d6;
    --cc-off_road-bg: #3b1016;  --cc-off_road-bc: #cc3a47;  --cc-off_road-dot: #f04452;  --cc-off_road-ink: #ffe3e6;
    --cc-red: #f04452;
}

/* ---------- page backdrop, this page only ---------- */
/* Three layers, top to bottom: the diagonal glow in the bottom-right corner (a thin bright edge over a
   green wash, pinned to the viewport with background-attachment: fixed so it stays put while the page
   scrolls), two soft radial washes, and the flat field. It is a background, not a pseudo-element, on
   purpose: this wrapper contains the page's dialogs, and anything positioned here would trap them in
   its stacking context under the mobile app bar. */
.shell__main:has(.cc) {
    background:
        radial-gradient(900px 420px at 20% -8%, rgba(0, 222, 145, 0.1), transparent 70%),
        radial-gradient(600px 400px at 85% 0, rgba(2, 179, 254, 0.06), transparent 70%),
        #f0f3f7;
}
[data-bs-theme="dark"] .shell__main:has(.cc) {
    background:
        radial-gradient(900px 420px at 20% -8%, rgba(0, 222, 145, 0.07), transparent 70%),
        radial-gradient(600px 400px at 85% 0, rgba(2, 179, 254, 0.04), transparent 70%),
        #060a0f;
}
@media (max-width: 860px) {
    .shell__main:has(.cc), [data-bs-theme="dark"] .shell__main:has(.cc) { background-image: none; }
}

/* ---------- header ---------- */
.cc .cc__head { align-items: flex-start; gap: 1.5rem; margin-bottom: 1.4rem; }
.cc .eyebrow {
    display: flex; align-items: center; gap: 1.05rem;
    font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.26em;
    color: var(--cc-accent);
}
.cc .eyebrow::before {
    content: ''; width: 24px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--cc-cyan), var(--cc-green));
}
[data-bs-theme="dark"] .cc .eyebrow::before { box-shadow: 0 0 10px rgba(0, 222, 145, 0.6); }
.cc .page-title {
    margin: 0.1rem 0 0.3rem; font-family: inherit; font-size: 1.9rem; line-height: 1.2; font-weight: 600; letter-spacing: 0;
    color: var(--cc-ink); display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
}
.cc .bk-month { margin: 0; font-size: 1.12rem; font-weight: 400; letter-spacing: 0; color: var(--cc-muted); }
.cc .cc__subtitle { margin: 0.6rem 0 0; color: var(--cc-muted); font-size: 1.03rem; }
.cc .cc-controls { gap: 0.5rem; flex-wrap: wrap; }
.cc .cc-nav { display: flex; gap: 0.5rem; align-items: center; }

.cc .cc-pill {
    display: inline-flex; align-items: center; gap: 0.56rem; height: 52px; padding: 0 0.875rem;
    border-radius: 10px; border: 1px solid var(--cc-line-2); background: var(--cc-btn-bg); color: var(--cc-ink);
    font: inherit; font-size: 0.84rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
    box-shadow: var(--cc-tile-shadow);
}
.cc a.cc-pill:hover { border-color: var(--cc-btn-hover-line); background: var(--cc-btn-hover); }
.cc .cc-pill svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cc .cc-pill .cc-pill__chev { width: 14px; height: 14px; stroke-width: 2.2; }
.cc .cc-pill:focus-visible { outline: 2px solid var(--cc-cyan); outline-offset: 2px; }
.cc .cc-pill--accent {
    border-color: #12b07a; color: #064a33;
    background: linear-gradient(180deg, rgba(0, 222, 145, 0.16), rgba(0, 222, 145, 0.07));
    box-shadow: var(--cc-tile-shadow), 0 0 18px rgba(0, 222, 145, 0.14);
}
.cc a.cc-pill--accent:hover { border-color: #00b97c; background: rgba(0, 222, 145, 0.18); }
.cc .cc-pill--accent svg { color: #079a68; }
[data-bs-theme="dark"] .cc .cc-pill--accent {
    border-color: #0f8f62; color: #d9fbe9;
    background: linear-gradient(180deg, rgba(0, 222, 145, 0.13), rgba(0, 222, 145, 0.06));
    box-shadow: 0 0 22px rgba(0, 222, 145, 0.16), inset 0 0 0 1px rgba(0, 222, 145, 0.1);
}
[data-bs-theme="dark"] .cc a.cc-pill--accent:hover { border-color: var(--cc-green); background: rgba(0, 222, 145, 0.16); }
[data-bs-theme="dark"] .cc .cc-pill--accent svg { color: var(--cc-green); }
.cc .cc-pill--static { background: var(--cc-panel-2); cursor: default; }
.cc .cc-pill--static svg { color: var(--cc-ink-2); }

/* ---------- panels ---------- */
.cc .cc-panel {
    margin-bottom: 1.4rem; padding: 0 0 0.75rem; border: 1px solid var(--cc-line); border-radius: 12px;
    background: var(--cc-panel); box-shadow: var(--cc-shadow);
}
[data-bs-theme="dark"] .cc .cc-panel { background: linear-gradient(180deg, #0b131b, #091017); }
.cc .cc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 1.4rem 0; }
.cc .cc-heading { margin: 0; display: flex; align-items: center; gap: 0.85rem; font-family: inherit; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.005em; color: var(--cc-ink); }
.cc .cc-heading::before { content: ''; width: 4px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, var(--cc-cyan), var(--cc-green)); }
[data-bs-theme="dark"] .cc .cc-heading::before { box-shadow: 0 0 10px rgba(2, 179, 254, 0.5); }
.cc .cc-heading--red::before { background: var(--cc-red); }
[data-bs-theme="dark"] .cc .cc-heading--red::before { box-shadow: 0 0 10px rgba(240, 68, 82, 0.6); }
.cc .cc__today { margin: 0; color: var(--cc-muted); font-size: 0.85rem; }
.cc .cc__today b { color: var(--cc-ink); font-weight: 600; }

/* ---------- legend ---------- */
.cc .cc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 1.4rem; padding: 0; }
.cc .cc-legend__chip {
    display: inline-flex; align-items: center; gap: 0.75rem; height: 42px; padding: 0 1.4rem 0 1rem;
    border-radius: 8px; border: 1px solid var(--cc-line-2); background: var(--cc-panel-2);
    font-size: 0.82rem; font-weight: 600; color: var(--cc-ink-2);
}
[data-bs-theme="dark"] .cc .cc-legend__chip { background: #0b131b; }
/* Each chip is tinted in its own state's colour, the way Available's always was: a wash of the colour
   over the chip and a border a few steps stronger than the wash. */
.cc .cc-legend__chip--available { background: rgba(0, 222, 145, 0.12); border-color: #7fdcb9; }
.cc .cc-legend__chip--booked { background: rgba(31, 139, 255, 0.12); border-color: #8fc0f5; }
.cc .cc-legend__chip--on_loan { background: rgba(255, 176, 32, 0.16); border-color: #ecc56a; }
.cc .cc-legend__chip--off_road { background: rgba(240, 68, 82, 0.12); border-color: #f0a3aa; }
[data-bs-theme="dark"] .cc .cc-legend__chip--available { background: rgba(0, 222, 145, 0.09); border-color: #0e6a49; }
[data-bs-theme="dark"] .cc .cc-legend__chip--booked { background: rgba(31, 139, 255, 0.10); border-color: #1f5fa8; }
[data-bs-theme="dark"] .cc .cc-legend__chip--on_loan { background: rgba(255, 176, 32, 0.09); border-color: #8a6410; }
[data-bs-theme="dark"] .cc .cc-legend__chip--off_road { background: rgba(240, 68, 82, 0.10); border-color: #8f2a33; }
.cc .cc-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); flex: none; }
[data-bs-theme="dark"] .cc .cc-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
.cc .cc-dot--available { --c: var(--cc-available-dot); }
.cc .cc-dot--booked { --c: var(--cc-booked-dot); }
.cc .cc-dot--on_loan { --c: var(--cc-on_loan-dot); }
.cc .cc-dot--off_road { --c: var(--cc-off_road-dot); }

/* ---------- the grid ---------- */
.cc .wf-calendar-scroll {
    margin: 0 1rem; border: 1px solid var(--cc-line); border-radius: 10px; background: var(--cc-panel);
    scrollbar-width: thin; scrollbar-color: var(--cc-line-2) transparent;
}
[data-bs-theme="dark"] .cc .wf-calendar-scroll { background: #09111a; }
.cc .wf-calendar-scroll .wf-calendar-table { border-collapse: separate; border-spacing: 0; }
.cc .wf-calendar-scroll .wf-calendar-table th,
.cc .wf-calendar-scroll .wf-calendar-table td {
    padding: 0; border-right: 0; border-left: 1px solid var(--cc-grid); border-bottom: 1px solid var(--cc-line);
    vertical-align: middle;
}
.cc .wf-calendar-scroll .wf-calendar-table thead th {
    height: 60px; background: var(--cc-panel-2); font-family: inherit; font-weight: 400; color: var(--cc-muted);
}
[data-bs-theme="dark"] .cc .wf-calendar-scroll .wf-calendar-table thead th { background: #0a131c; }
.cc .wf-calendar-scroll .wf-calendar-table tbody tr:last-child > * { border-bottom: 0; }
.cc .wf-calendar-scroll .wf-calendar-table tbody td { height: 66px; min-width: 48px; }
.cc .wf-calendar-scroll .wf-calendar-table th.is-weekend,
.cc .wf-calendar-scroll .wf-calendar-table td.is-weekend { background: var(--cc-wk); }
.cc .wf-calendar-scroll .wf-calendar-table thead th.is-weekend { background: var(--cc-wk-head); }
.cc .wf-calendar-scroll .wf-calendar-table td.is-today { background-image: none; }
.cc .wf-calendar__daynum { font-size: 0.94rem; font-weight: 600; line-height: 1.2; color: var(--cc-ink); }
.cc .wf-calendar__dow { margin-top: 2px; font-size: 0.78rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cc-muted); }
.cc .wf-calendar-scroll .wf-calendar-table thead th.is-today .wf-calendar__daynum {
    display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px;
    background: var(--cc-today); color: #fff; box-shadow: 0 0 0 3px rgba(26, 134, 255, 0.22), 0 2px 8px rgba(26, 134, 255, 0.45);
}
[data-bs-theme="dark"] .cc .wf-calendar-scroll .wf-calendar-table thead th.is-today .wf-calendar__daynum { box-shadow: 0 0 0 3px rgba(26, 134, 255, 0.22), 0 0 18px rgba(26, 134, 255, 0.8); }
.cc .wf-calendar-scroll .wf-calendar-table thead th.is-today .wf-calendar__dow { color: #1766c9; font-weight: 600; }
[data-bs-theme="dark"] .cc .wf-calendar-scroll .wf-calendar-table thead th.is-today .wf-calendar__dow { color: #cfe3ff; }

/* the sticky car column */
.cc .wf-calendar-scroll .wf-calendar-table .wf-calendar__name {
    min-width: 184px; width: 184px; max-width: 184px; padding: 0 0.5rem 0 0.65rem; background: var(--cc-panel);
    border-left: 0; border-right: 1px solid var(--cc-line); box-shadow: none; font-size: 0.85rem;
}
.cc .wf-calendar-scroll .wf-calendar-table thead th.wf-calendar__name { background: var(--cc-panel-2); padding-left: 1rem; color: var(--cc-ink-2); font-weight: 400; }
[data-bs-theme="dark"] .cc .wf-calendar-scroll .wf-calendar-table tbody .wf-calendar__name { background: #0a131c; }
[data-bs-theme="dark"] .cc .wf-calendar-scroll .wf-calendar-table thead th.wf-calendar__name { background: #0a131c; }
.cc .cc-car { display: flex; align-items: center; gap: 0.62rem; }
.cc .cc-car__thumb {
    width: 62px; height: 36px; flex: none; display: grid; place-items: center; overflow: hidden;
    border-radius: 8px; background: var(--cc-thumb-bg); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
}
.cc .cc-car__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc .cc-car__thumb--none { background: var(--cc-panel-2); box-shadow: none; border: 1px solid var(--cc-line); }
.cc .cc-car__thumb--none svg { width: 26px; height: 26px; stroke: var(--cc-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cc .cc-car__text { display: block; min-width: 0; }
.cc .cc-car__name { display: block; font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--cc-ink); }
.cc .cc-car__reg { display: block; margin-top: 1px; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--cc-muted); font-weight: 400; }

/* the status tiles: a dot over the marker letter */
.cc .fc-cell {
    width: 40px; min-width: 0; height: 48px; margin: 0 auto; padding: 0; gap: 6px; flex-direction: column;
    border-radius: 8px; border: 1.5px solid var(--bc); background: var(--bg); color: var(--ink); box-shadow: var(--cc-tile-shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cc .fc-cell.fc-cell--available { --bg: var(--cc-available-bg); --bc: var(--cc-available-bc); --dc: var(--cc-available-dot); --ink: var(--cc-available-ink); }
.cc .fc-cell.fc-cell--booked { --bg: var(--cc-booked-bg); --bc: var(--cc-booked-bc); --dc: var(--cc-booked-dot); --ink: var(--cc-booked-ink); }
.cc .fc-cell.fc-cell--on_loan { --bg: var(--cc-on_loan-bg); --bc: var(--cc-on_loan-bc); --dc: var(--cc-on_loan-dot); --ink: var(--cc-on_loan-ink); }
.cc .fc-cell.fc-cell--off_road { --bg: var(--cc-off_road-bg); --bc: var(--cc-off_road-bc); --dc: var(--cc-off_road-dot); --ink: var(--cc-off_road-ink); cursor: default; }
.cc .fc-cell .fc-cell__dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--dc); }
.cc .fc-cell .fc-cell__marker { font-family: inherit; font-size: 0.9rem; font-weight: 400; line-height: 1; color: var(--ink); letter-spacing: 0; }
[data-bs-theme="dark"] .cc .fc-cell .fc-cell__dot { box-shadow: 0 0 10px var(--dc); }
[data-bs-theme="dark"] .cc .fc-cell.fc-cell--available { box-shadow: 0 0 14px rgba(0, 222, 145, 0.1), inset 0 0 12px rgba(0, 222, 145, 0.1); }
[data-bs-theme="dark"] .cc .fc-cell.fc-cell--booked { box-shadow: 0 0 14px rgba(31, 139, 255, 0.14), inset 0 0 12px rgba(31, 139, 255, 0.14); }
[data-bs-theme="dark"] .cc .fc-cell.fc-cell--on_loan { box-shadow: 0 0 14px rgba(255, 176, 32, 0.13), inset 0 0 12px rgba(255, 176, 32, 0.13); }
[data-bs-theme="dark"] .cc .fc-cell.fc-cell--off_road { box-shadow: 0 0 14px rgba(240, 68, 82, 0.14), inset 0 0 12px rgba(240, 68, 82, 0.14); }
.cc button.fc-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.14); outline: 0; }
[data-bs-theme="dark"] .cc button.fc-cell:hover { box-shadow: 0 0 20px var(--dc), inset 0 0 14px rgba(255, 255, 255, 0.04); }
.cc button.fc-cell:focus-visible { outline: 2px solid var(--cc-cyan); outline-offset: 2px; }
.cc .wf-calendar-scroll .wf-calendar-table td.is-today .fc-cell { border-color: #1f7ff5; box-shadow: 0 0 0 2px rgba(31, 127, 245, 0.28), 0 2px 8px rgba(31, 127, 245, 0.3); }
[data-bs-theme="dark"] .cc .wf-calendar-scroll .wf-calendar-table td.is-today .fc-cell { border-color: #2f95ff; box-shadow: 0 0 0 2px rgba(47, 149, 255, 0.35), 0 0 18px rgba(47, 149, 255, 0.55); }
.cc .wf-calendar__empty, .cc .empty-state { color: var(--cc-muted); }

/* ---------- off road ---------- */
.cc .cc-empty { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.15rem 1.4rem 1.5rem; }
.cc .cc-empty__icon { position: relative; width: 80px; height: 80px; border-radius: 50%; background: var(--cc-panel-2); display: grid; place-items: center; flex: none; }
[data-bs-theme="dark"] .cc .cc-empty__icon { background: #111b26; }
.cc .cc-empty__car { width: 40px; height: 40px; stroke: var(--cc-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cc .cc-empty__tick { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: #1fd673; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--cc-panel); }
.cc .cc-empty__tick svg { width: 15px; height: 15px; stroke: #04281a; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cc .cc-empty__text { flex: 1; min-width: 240px; }
.cc .cc-empty__title { display: block; font-size: 1.19rem; font-weight: 600; letter-spacing: -0.005em; color: var(--cc-ink); }
.cc .cc-empty__text span { display: block; margin-top: 0.4rem; font-size: 0.94rem; color: var(--cc-muted); }

.cc .cc-btn {
    display: inline-flex; align-items: center; gap: 0.6rem; height: 38px; padding: 0 1rem; border-radius: 9px;
    border: 1px solid var(--cc-line-2); background: var(--cc-btn-bg); color: var(--cc-ink); font: inherit; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; box-shadow: var(--cc-tile-shadow);
}
.cc .cc-btn:hover { border-color: var(--cc-btn-hover-line); background: var(--cc-btn-hover); }
.cc .cc-btn:focus-visible { outline: 2px solid var(--cc-cyan); outline-offset: 2px; }
.cc .cc-btn--lg { height: 54px; padding: 0 1.75rem 0 1.5rem; border-radius: 10px; font-size: 0.9rem; gap: 0.85rem; }
.cc .cc-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.cc .table-scroll { padding-top: 0.9rem; }
.cc .data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; color: var(--cc-ink); }
.cc .data-table th { padding: 0.65rem 1.4rem; text-align: left; font-size: 0.78rem; font-weight: 400; color: var(--cc-muted); border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); background: transparent; }
.cc .data-table td { padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--cc-line); vertical-align: middle; color: var(--cc-ink); }
.cc .data-table tbody tr:last-child td { border-bottom: 0; }
.cc .data-table__actions { text-align: right; }
.cc .cc-offmark {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
    background: var(--cc-off_road-bg); border: 1.5px solid var(--cc-off_road-bc); color: var(--cc-off_road-ink); font-weight: 600;
}

/* ---------- dialogs (book a car, edit a loan, mark off road) ---------- */
.cc div.dialog-modal { background: rgba(16, 24, 40, 0.45); }
[data-bs-theme="dark"] .cc div.dialog-modal { background: rgba(2, 5, 8, 0.72); backdrop-filter: blur(2px); }
.cc .dialog-modal__card {
    background: var(--cc-panel); color: var(--cc-ink); border: 1px solid var(--cc-line-2); border-radius: 14px; font-family: inherit;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.3);
}
[data-bs-theme="dark"] .cc .dialog-modal__card { background: #0b131b; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 222, 145, 0.06); }
.cc .dialog-modal__title { font-size: 1.12rem; font-weight: 700; color: var(--cc-ink); }
.cc .dialog-modal__card .clock-panel__label { font-size: 0.78rem; font-weight: 600; color: var(--cc-ink-2); }
.cc .dialog-modal__card input, .cc .dialog-modal__card select, .cc .dialog-modal__card textarea {
    background: var(--cc-panel); color: var(--cc-ink); border: 1px solid var(--cc-line-2); border-radius: 9px; font-family: inherit;
}
[data-bs-theme="dark"] .cc .dialog-modal__card input, [data-bs-theme="dark"] .cc .dialog-modal__card select, [data-bs-theme="dark"] .cc .dialog-modal__card textarea { background: #0a1118; color-scheme: dark; }
.cc .dialog-modal__card input:focus, .cc .dialog-modal__card select:focus, .cc .dialog-modal__card textarea:focus { outline: 0; border-color: var(--cc-cyan); box-shadow: 0 0 0 3px rgba(2, 179, 254, 0.15); }
.cc .dialog-modal__card .btn--primary { background: var(--cc-green); border-color: var(--cc-green); color: #03281a; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 222, 145, 0.3); }
.cc .dialog-modal__card .btn--primary:hover { background: #12f0a2; border-color: #12f0a2; }
.cc .dialog-modal__card .btn--ghost { background: var(--cc-btn-bg); color: var(--cc-ink); border-color: var(--cc-line-2); }
.cc .dialog-modal__card .btn--ghost:hover { border-color: var(--cc-btn-hover-line); }

/* ---------- small screens ---------- */
@media (max-width: 1100px) { .cc .bk-month { font-size: 1rem; } }
@media (max-width: 860px) {
    .cc .cc__head { gap: 1rem; }
    .cc .cc-controls { width: 100%; justify-content: flex-start; }
    .cc .cc-nav { flex-wrap: wrap; }
    .cc .cc-pill { height: 44px; padding-inline: 0.75rem; }
    .cc .cc-panel__head { padding: 1.1rem 1rem 0; }
    .cc .cc-legend { margin-inline: 1rem; }
    .cc .wf-calendar-scroll { margin-inline: 0.5rem; }
    .cc .wf-calendar-scroll .wf-calendar-table .wf-calendar__name { min-width: 8.5rem; width: 8.5rem; max-width: 8.5rem; }
    .cc .cc-car__thumb { display: none; }
    .cc .cc-empty { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .cc .fc-cell { transition: none; } }