/*
 * mockbill.css — Mockbill Services brand skin.
 *
 * Re-skins the shared Material Dashboard 2 PRO dark theme to match the
 * Mockbill marketing site (crm-deploy/site/styles.css): the palette that
 * aligns with the logo — vivid logo-blue accent, matte neutral-black
 * surfaces, white/silver text, Montserrat display headings — plus a tighter,
 * data-dense layout that stays compact on mobile.
 *
 * Loaded ONLY by the Mockbill binary (linked from this binary's base.html),
 * AFTER /theme/css/theme-overrides.css, so these rules win without touching
 * the shared theme or other customers (e.g. Saamir).
 */

:root {
  /* ── Brand palette (mirrors the marketing site tokens) ───────────────── */
  --mb-black-950: #07090b;
  --mb-black-900: #0b0d10;   /* page */
  --mb-black-850: #11141a;   /* card */
  --mb-black-800: #171b22;   /* raised / hover */
  --mb-black-700: #20252e;

  /* Logo-aligned blue, darkened to sit better on the dark theme (customer
   * request — taken one shade deeper than the first pass). Earlier sets kept
   * for reference:
   *   original: 300 #7fcdf3 · 400 #4ab3e8 · 500 #1e9bdc · 600 #1480bd
   *   1st pass: 300 #5fb4e3 · 400 #2f93cf · 500 #1a7aac · 600 #12597f */
  --mb-blue-300: #4ba0d2;    /* light — links / hover text */
  --mb-blue-400: #2a83b8;    /* accent hover */
  --mb-blue-500: #156690;    /* accent (logo ring, darkened) */
  --mb-blue-600: #0f4d6e;    /* accent active */

  --mb-white:    #f5f7f9;
  --mb-silver-200: #d7dce1;
  --mb-silver-400: #aab2bb;
  --mb-silver-600: #76808c;

  --mb-green-500: #2fbf71;
  --mb-amber-500: #e8a13c;
  --mb-red-500:   #e05252;

  --mb-border-subtle: rgba(245, 247, 249, 0.10);
  --mb-border-strong: rgba(245, 247, 249, 0.22);
}

/* ── Surfaces: matte neutral black, not Material's charcoal ────────────── */
body.dark-version {
  background-color: var(--mb-black-900) !important;
  color: var(--mb-silver-200) !important;
}

.dark-version .card,
.dark-version .dropdown .dropdown-menu {
  background-color: var(--mb-black-850) !important;
  border: 1px solid var(--mb-border-subtle);
  box-shadow: 0 1px 0 rgba(245, 247, 249, .04) inset,
              0 8px 24px rgba(0, 0, 0, .45) !important;
}

.dark-version .sidenav {
  background-color: var(--mb-black-950) !important;
  border: 1px solid var(--mb-border-subtle) !important;
}

/* Table rows / header borders on the deeper surface read better lighter. */
.dark-version .table th,
.dark-version .table td { border-color: var(--mb-border-subtle) !important; }

/* Pagination (list Prev/Next): the theme renders page-links as small circles
   coloured dark-on-light, which is invisible on our dark cards. Give them the
   blue accent on a subtle surface; disabled controls dim to silver. The chevron
   icon fits the circular shape (plain words would overflow it). */
.dark-version .pagination .page-item .page-link {
  background-color: var(--mb-black-800) !important;
  border: 1px solid var(--mb-border-subtle) !important;
  color: var(--mb-blue-300) !important;
}
.dark-version .pagination .page-item .page-link:hover {
  background-color: var(--mb-blue-500) !important;
  border-color: var(--mb-blue-500) !important;
  color: var(--mb-white) !important;
}
.dark-version .pagination .page-item.disabled .page-link {
  background-color: var(--mb-black-850) !important;
  border-color: var(--mb-border-subtle) !important;
  color: var(--mb-silver-600) !important;
}

/* ── Typography: Montserrat display caps + Barlow body ─────────────────── */
body.dark-version {
  font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dark-version h1, .dark-version h2, .dark-version h3,
.dark-version h4, .dark-version h5, .dark-version h6,
.dark-version .h1, .dark-version .h2, .dark-version .h3,
.dark-version .h4, .dark-version .h5, .dark-version .h6 {
  font-family: "Montserrat", "Arial Black", sans-serif;
}
/* Page/section titles get the logo treatment: uppercase, tightly tracked. */
.dark-version .main-content h4.font-weight-bolder,
.dark-version .card-header h6,
.dark-version .navbar .breadcrumb .breadcrumb-item.active {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Text-colour hierarchy → silver scale (denser-looking, less washed out). */
.dark-version .text-white { color: var(--mb-white) !important; }
.dark-version .text-secondary { color: var(--mb-silver-400) !important; }

/* ── Accent: swap the deep #1565C0 brand blue for the vivid logo blue ──── */
.bg-primary,
.badge.bg-primary        { background-color: var(--mb-blue-500) !important; background: var(--mb-blue-500) !important; }
.text-primary            { color: var(--mb-blue-500) !important; }
.border-primary          { border-color: var(--mb-blue-500) !important; }

.bg-gradient-primary,
.btn.bg-gradient-primary {
  background-image: linear-gradient(195deg, var(--mb-blue-400), var(--mb-blue-600)) !important;
}
.btn-primary,
.btn.bg-gradient-primary {
  box-shadow: 0 2px 2px 0 rgba(21, 102, 144, .12),
              0 3px 1px -2px rgba(21, 102, 144, .2),
              0 1px 5px 0 rgba(21, 102, 144, .16);
}
.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: var(--mb-blue-500);
  border-color: var(--mb-blue-500);
  box-shadow: 0 8px 14px -8px rgba(21, 102, 144, .35),
              0 3px 18px 0 rgba(21, 102, 144, .12),
              0 7px 8px -4px rgba(21, 102, 144, .2);
}

.btn-primary {
  --bs-btn-bg: var(--mb-blue-500);
  --bs-btn-border-color: var(--mb-blue-500);
  --bs-btn-hover-bg: var(--mb-blue-600);
  --bs-btn-hover-border-color: var(--mb-blue-600);
  --bs-btn-active-bg: var(--mb-blue-600);
  --bs-btn-active-border-color: var(--mb-blue-600);
  --bs-btn-disabled-bg: var(--mb-blue-500);
  --bs-btn-disabled-border-color: var(--mb-blue-500);
  --bs-btn-focus-shadow-rgb: 21, 102, 144;
}
.btn-outline-primary {
  --bs-btn-color: var(--mb-blue-400);
  --bs-btn-border-color: var(--mb-blue-500);
  --bs-btn-hover-bg: var(--mb-blue-500);
  --bs-btn-hover-border-color: var(--mb-blue-500);
  --bs-btn-active-bg: var(--mb-blue-500);
  --bs-btn-active-border-color: var(--mb-blue-500);
  --bs-btn-disabled-color: var(--mb-blue-400);
  --bs-btn-disabled-border-color: var(--mb-blue-500);
  --bs-btn-focus-shadow-rgb: 21, 102, 144;
}
.btn-link {
  --bs-btn-color: var(--mb-blue-400);
  --bs-btn-hover-color: var(--mb-blue-300);
  --bs-btn-active-color: var(--mb-blue-300);
}
a { color: var(--mb-blue-400); }
a:hover { color: var(--mb-blue-300); }

/* Active sidenav link + scrolled navbar pick up the new blue automatically
 * via .bg-gradient-primary / .blur, but theme-overrides hardcodes the old blue
 * on the scrolled navbar — restate it here. */
.navbar.navbar-main.blur {
  background: var(--mb-blue-500) !important;
  background-image: linear-gradient(195deg, var(--mb-blue-400), var(--mb-blue-600)) !important;
}

/* Focused/filled outline inputs + checkboxes → new blue.
 *
 * NOTE the leading `.input-group` on the is-filled selectors: Material's pink
 * rule is `.input-group.input-group-outline.is-filled …` (specificity 0,5,0).
 * The original override dropped the `.input-group` (0,4,0) so a FILLED outline
 * input — one holding a value — fell through to Material's pink/red while only
 * the actively-focused state went blue. Matching the leading `.input-group`
 * lifts us to 0,5,0 so the brand blue wins in both states. */
.input-group.input-group-outline.is-filled .form-label + .form-control,
.input-group.input-group-outline.is-focused .form-label + .form-control {
  border-color: var(--mb-blue-500) !important;
  /* Leave the TOP edge transparent: the floated label's :before/:after draw
   * that segment with a gap for the label text. A solid top border here would
   * run straight through the label ("e.g. AB12 CDE"). */
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 var(--mb-blue-500), inset -1px 0 var(--mb-blue-500), inset 0 -1px var(--mb-blue-500) !important;
}
.input-group.input-group-outline.is-filled .form-label,
.input-group.input-group-outline.is-focused .form-label { color: var(--mb-blue-400); }
/* The floating label's :before/:after draw the TOP border segments around the
 * label notch. Material colours them pink (#e91e63) and — same missing-
 * `.input-group` specificity gap as above — the shared override loses, so a red
 * sliver shows along the top edge (most visible on first load of a pre-filled
 * field). Re-skin those segments to the brand blue at matching specificity. */
.input-group.input-group-outline.is-filled .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-focused .form-label:before {
  border-top-color: var(--mb-blue-500) !important;
  box-shadow: inset 0 1px var(--mb-blue-500) !important;
}
.form-check-input:checked[type=checkbox],
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: linear-gradient(195deg, var(--mb-blue-400), var(--mb-blue-600));
}
.dark-version .form-control:not(.input-group .form-control):focus,
.dark-version .form-select:not(.input-group .form-select):focus {
  border-color: var(--mb-blue-500) !important;
  box-shadow: 0 0 0 .15rem rgba(21, 102, 144, .35) !important;
}

/* ── Dark-mode nav-tabs ──────────────────────────────────────────────────
 * Used on the quote/job cards (Parts & Labour / To-dos) and any in-card tab
 * group. Bootstrap's default nav-tabs are a light boxed style that vanishes on
 * our dark cards, so render them as underline tabs in the brand palette:
 * inactive = silver, active = white with a blue underline. The `.active` state
 * is driven by CSS (not hardcoded classes) so it follows Bootstrap tab toggles.
 */
.dark-version .nav-tabs {
  border-bottom: 1px solid var(--mb-border-subtle);
}
.dark-version .nav-tabs .nav-link {
  color: var(--mb-silver-400);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  margin-bottom: -1px;
}
.dark-version .nav-tabs .nav-link:hover,
.dark-version .nav-tabs .nav-link:focus {
  color: var(--mb-white);
  border-bottom-color: var(--mb-border-strong);
}
.dark-version .nav-tabs .nav-link.active {
  color: var(--mb-white) !important;
  background: transparent;
  border-bottom: 2px solid var(--mb-blue-400);
}

/* Vehicle to-dos accordion: rotate the chevron when its checklist is open. */
.todo-accordion-toggle .material-symbols-rounded { transition: transform .2s ease; }
.todo-accordion-toggle[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }

/* ── Status colours → site palette (MOT pass / advisory / fail) ────────── */
.dark-version .text-success, .text-success { color: var(--mb-green-500) !important; }
.dark-version .text-warning, .text-warning { color: var(--mb-amber-500) !important; }
.dark-version .text-danger,  .text-danger  { color: var(--mb-red-500)  !important; }
.bg-gradient-success { background-image: linear-gradient(195deg, #4fd896, var(--mb-green-500)) !important; }
.bg-gradient-warning { background-image: linear-gradient(195deg, #f0b863, var(--mb-amber-500)) !important; }
.bg-gradient-danger  { background-image: linear-gradient(195deg, #ea7676, var(--mb-red-500))  !important; }

/* Info alert (announcement banners) → brand blue, not Material's indigo info. */
.alert-info { background-image: linear-gradient(195deg, var(--mb-blue-400), var(--mb-blue-600)) !important; }

/* ──────────────────────────────────────────────────────────────────────────
 * Calendar (FullCalendar 6) toolbar buttons
 *
 * The Day / Week / Month (+ today / prev / next) buttons default to
 * FullCalendar's grey. Map their CSS variables to the Mockbill blue: resting
 * blue, the selected view a darker active blue.
 * ────────────────────────────────────────────────────────────────────────── */
.fc {
  --fc-button-text-color: var(--mb-white);
  --fc-button-bg-color: var(--mb-blue-500);
  --fc-button-border-color: var(--mb-blue-500);
  --fc-button-hover-bg-color: var(--mb-blue-400);
  --fc-button-hover-border-color: var(--mb-blue-400);
  --fc-button-active-bg-color: var(--mb-blue-600);
  --fc-button-active-border-color: var(--mb-blue-600);
}
/* Material Dashboard hardcodes .fc-button-primary to its pink #e91e63 (reads as
 * red next to our blue) directly on background-color, bypassing the variables
 * above. Restate the brand blue on every state.
 *
 * For clear contrast within the readable (white-text) blue range: the inactive
 * buttons (prev/next, unselected views) are a flat DEEP blue, while the
 * selected view gets the app's bright primary gradient so it visibly pops. */
.fc .fc-button-primary,
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled):active:focus {
  background-color: #0a3d57 !important;   /* blue-700 — deep, recedes */
  background-image: none !important;
  border-color: #0a3d57 !important;
}
.fc .fc-button-primary:hover {
  background-color: var(--mb-blue-600) !important;
  background-image: none !important;
  border-color: var(--mb-blue-600) !important;
}
/* The selected view (Day/Week/Month) — bright primary gradient, stands out. */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active:hover,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
  background-color: var(--mb-blue-500) !important;
  background-image: linear-gradient(195deg, var(--mb-blue-400), var(--mb-blue-600)) !important;
  border-color: var(--mb-blue-500) !important;
  box-shadow: 0 3px 5px -1px rgba(21, 102, 144, .3) !important;
}
.fc .fc-button:focus,
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: 0 0 0 .2rem rgba(21, 102, 144, .4) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Compact / data-dense layout
 *
 * This CRM is data-heavy — garages scan long vehicle/job tables. Tighten the
 * generous Material spacing so more rows fit per screen, especially on mobile.
 * ────────────────────────────────────────────────────────────────────────── */

/* Page gutters: trim the .container-fluid py-4 breathing room. */
.main-content .container-fluid.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* Cards: smaller radius (workshop-square) + tighter bodies, less row gap. */
.dark-version .card { border-radius: 8px; }
.card .card-body.p-3 { padding: 1rem !important; }
.row > [class*="col-"].mb-4 { margin-bottom: 1rem !important; }

/* Data tables: compact cells, slimmer type, comfortable but dense rows.
 * Material pads the first/last cells with ps-4 / pe-4 (1.5rem) — halve it. */
.table > :not(caption) > * > * { padding: .5rem .75rem; }
.table td.ps-4, .table th.ps-4 { padding-left: .75rem !important; }
.table td.pe-4, .table th.pe-4 { padding-right: .75rem !important; }
.table .text-sm { font-size: .8125rem; }
.table .text-xs { font-size: .6875rem; }
/* Subtle row hover so a scanned row is easy to keep your eye on. */
.dark-version .table tbody tr:hover { background-color: rgba(21, 102, 144, .06); }

/* Stat tiles: smaller numbers so the four-up KPI row isn't oversized. */
.card-body h4.font-weight-bolder { font-size: 1.5rem; }

/* ──────────────────────────────────────────────────────────────────────────
 * Auth pages (login / register)
 *
 * The shared auth templates style their card header + action buttons with
 * Material's monochrome .bg-gradient-dark / .btn-outline-dark. Give them the
 * Mockbill blue accent instead. Scoped to .main-content-bg (the class unique to
 * the login/register shell) so the dashboard's intentional dark elements — and
 * the page-header photo's .mask.bg-gradient-dark overlay — are left alone.
 * ────────────────────────────────────────────────────────────────────────── */

/* Logo header block (but NOT the background-photo mask). */
.main-content-bg .card-header .bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--mb-blue-400), var(--mb-blue-600)) !important;
}

/* Primary action buttons: Continue / Sign in. */
.main-content-bg .card-body .btn.bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--mb-blue-400), var(--mb-blue-600)) !important;
  box-shadow: 0 3px 3px 0 rgba(21, 102, 144, .15),
              0 3px 1px -2px rgba(21, 102, 144, .2),
              0 1px 5px 0 rgba(21, 102, 144, .16);
}
.main-content-bg .card-body .btn.bg-gradient-dark:hover {
  box-shadow: 0 8px 14px -8px rgba(21, 102, 144, .35),
              0 3px 18px 0 rgba(21, 102, 144, .12),
              0 7px 8px -4px rgba(21, 102, 144, .2);
}

/* Secondary action buttons: Use a passkey / Email me a PIN. */
.main-content-bg .btn-outline-dark {
  border-color: var(--mb-blue-500) !important;
  color: var(--mb-blue-400) !important;
}
.main-content-bg .btn-outline-dark:hover {
  background-color: var(--mb-blue-500) !important;
  border-color: var(--mb-blue-500) !important;
  color: var(--mb-white) !important;
}

/* Mobile: go tighter still. Reclaim every pixel on a phone in the workshop. */
@media (max-width: 575.98px) {
  .main-content .container-fluid.py-4 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .main-content .container-fluid { padding-left: .75rem; padding-right: .75rem; }
  .card .card-body.p-3 { padding: .75rem !important; }
  .card .card-header { padding-left: .75rem; padding-right: .75rem; }
  .row > [class*="col-"].mb-4 { margin-bottom: .75rem !important; }
  .table > :not(caption) > * > * { padding: .4rem .5rem; }
  .table td.ps-4, .table th.ps-4 { padding-left: .5rem !important; }
  .table td.pe-4, .table th.pe-4 { padding-right: .5rem !important; }
  .card-body h4.font-weight-bolder { font-size: 1.375rem; }
  /* Section heading scales down so it doesn't dominate the small viewport. */
  .main-content h4.font-weight-bolder { font-size: 1.125rem; }
}

/* ── Customer view mode ────────────────────────────────────────────────────
   "Customer view" (user menu / F2) lets staff show the screen to a customer
   without revealing buy-cost or margin. The `customer-mode` class is set on
   <html> from base.html (sticky in localStorage); cells/columns that should
   disappear in that mode carry `.mb-cust-hide`. On the read-only quote/job
   detail tables this hides both cost and markup; on the editors it hides the
   markup column only (cost stays editable). */
html.customer-mode .mb-cust-hide { display: none !important; }