/**
 * PracBill Brand Design System — theme conformance layer
 *
 * Re-skins the Axelit (pracbill-26.1) theme to the PracBill brand guide:
 *   - PracBill Blue #1C75BC hero / PracBill Grey #58595B structure & text
 *   - Space Grotesk (display) · Inter (body/UI + tabular money) · Space Mono (data)
 *   - 4px grid, radii 6px inputs / 8px buttons / 12px cards / 16px modals
 *   - Flat-first elevation: 1px grey-200 borders over shadows
 *   - Billing states: paid #1A965A · pending #D68A0C · overdue #D24444
 *
 * MUST load after style.css AND pracbill-modern-forms.css — this file wins by order.
 * Source of truth: .claude/skills/pracbill-design (brand guide + tokens).
 *
 * Part of: PRACBILL-1224
 */

/* ========================================
   1. BRAND TOKENS
   ======================================== */
:root {
    /* primary — blue */
    --pb-blue-50: #EFF5FA;  --pb-blue-100: #DDEAF5; --pb-blue-200: #BBD6EB;
    --pb-blue-300: #8EBADE; --pb-blue-400: #5598CD; --pb-blue-500: #3383C3;
    --pb-blue-600: #1C75BC; --pb-blue-700: #165B94; --pb-blue-800: #114875;
    --pb-blue-900: #0D375B;

    /* neutral — grey (hue-matched to logo grey, a touch cool) */
    --pb-grey-50: #F7F7F8;  --pb-grey-100: #F0F0F1; --pb-grey-200: #E2E2E3;
    --pb-grey-300: #CECED0; --pb-grey-400: #A3A4A6; --pb-grey-500: #78797B;
    --pb-grey-600: #58595B; --pb-grey-700: #444546; --pb-grey-800: #2E2E2F;
    --pb-grey-900: #1C1C1D;

    /* billing states — purpose-built for invoice status */
    --pb-paid: #1A965A;    --pb-paid-bg: #DFF0E8;    --pb-paid-text: #12693F;
    --pb-pending: #D68A0C; --pb-pending-bg: #F9EFDD; --pb-pending-text: #966108;
    --pb-overdue: #D24444; --pb-overdue-bg: #F9E5E5; --pb-overdue-text: #933030;

    /* warm accent — optional seasoning, never a second brand colour */
    --pb-accent: #F26A50; --pb-accent-bg: #FDEAE6;

    /* type */
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* elevation — cool-tinted, subtle */
    --pb-shadow-xs: 0 1px 2px rgba(28, 28, 29, 0.06);
    --pb-shadow-sm: 0 1px 3px rgba(28, 28, 29, 0.08), 0 1px 2px rgba(28, 28, 29, 0.05);
    --pb-shadow-md: 0 4px 12px rgba(28, 28, 29, 0.08), 0 2px 4px rgba(28, 28, 29, 0.05);
    --pb-shadow-lg: 0 12px 28px rgba(28, 28, 29, 0.12), 0 4px 8px rgba(28, 28, 29, 0.06);

    /* focus */
    --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--pb-blue-600);
}

/* ========================================
   2. AXELIT TOKEN REMAP — LIGHT MODE
   The whole theme reads these; remapping them does 80% of the work.
   ======================================== */
:root {
    /* semantic RGB triplets (Axelit pattern: rgba(var(--x), a)) */
    --primary: 28, 117, 188;        /* blue-600 */
    --primary-dark: 22, 91, 148;    /* blue-700 (hover) */
    --secondary: 88, 89, 91;        /* grey-600 */
    --secondary-dark: 68, 69, 70;   /* grey-700 */
    --success: 26, 150, 90;         /* paid */
    --success-dark: 18, 105, 63;    /* paid text */
    --danger: 210, 68, 68;          /* overdue */
    --danger-dark: 147, 48, 48;     /* overdue text */
    --warning: 214, 138, 12;        /* pending */
    --warning-dark: 150, 97, 8;     /* pending text */
    --info: 51, 131, 195;           /* blue-500 */
    --info-dark: 17, 72, 117;       /* blue-800 */
    --light: 240, 240, 241;         /* grey-100 */
    --dark: 68, 69, 70;             /* grey-700 — Axelit's foreground/link token */
    --dark-dark: 46, 46, 47;        /* grey-800 */
    --dark-light: 120, 121, 123;    /* grey-500 */

    /* text — PracBill Grey carries the text work; softened per user preference
       (grey-900 read too harsh on screen) */
    --font-color: #58595B;              /* grey-600 body text — the brand grey */
    --font-title-color: #444546;        /* grey-700 headings */
    --font-secondary-color: #444546;    /* grey-700 */
    --font-light-color: #78797B;        /* grey-500 muted */
    --theme-body-font-color: #58595B;
    --theme-body-sub-title-color: rgba(88, 89, 91, 0.8);
    --link-color: var(--pb-blue-600);

    /* surfaces — white does the work, grey-50 is the canvas */
    --body-color: #F7F7F8;
    --bodybg-color: #F7F7F8;            /* grey-50 */
    --border_color: #E2E2E3;            /* grey-200 hairline */
    --bs-border-color: #E2E2E3;
    --light-gray: #F0F0F1;              /* grey-100 */
    --light-gray-bg: #F7F7F8;
    --grid_color: rgba(28, 117, 188, 0.08);
    --bs-danger: #D24444;
    --bs-danger-rgb: 210, 68, 68;

    /* radii — each has a job: 6 inputs, 8 buttons, 12 cards, 16 modals */
    --app-border-radius: 12px;
    --bs-border-radius: 8px;
    --bs-accordion-inner-border-radius: 8px;

    /* flat-first elevation */
    --box-shadow: var(--pb-shadow-sm);
    --hover-shadow: var(--pb-shadow-md);
    --bottom-shadow: none;

    /* type — Axelit funnels every font through this one variable */
    --font-Montserrat: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* action colours follow the semantic remap */
    --pb-action-view: var(--info);
    --pb-action-edit: var(--primary);
    --pb-action-delete: var(--danger);
    --pb-action-add: var(--success);
}

/* ========================================
   3. AXELIT TOKEN REMAP — DARK MODE
   Cool grey-900/800, hue-matched to the brand grey (no Axelit navy).
   ======================================== */
body.dark,
body[class*="dark"],
nav.dark-sidebar {
    --white: 46, 46, 47;                /* grey-800 surfaces */
    --black: #F0F0F1;
    --body-color: #1C1C1D;
    --bodybg-color: #1C1C1D;            /* grey-900 canvas */
    --bs-body-bg: #1C1C1D;
    --font-color: #F0F0F1;
    --font-title-color: #F7F7F8;
    --font-secondary-color: #CECED0;
    --font-light-color: #A3A4A6;
    --link-color: #8EBADE;              /* blue-300 */
    --border_color: #444546;            /* grey-700 hairline */
    --bs-border-color: #444546;
    --bs-card-border-color: #444546;
    --bs-form-control-bg: #242425;
    --bs-body-color: #F0F0F1;
    --bs-secondary-color: #CECED0;
    --bs-list-group-color: #F0F0F1;
    --bs-body-color-rgb: 240, 240, 241;
    --bs-tertiary-bg: #242425;
    --bs-card-color: #F0F0F1;
    --light-gray: #2E2E2F;
    --light: 68, 69, 70;                /* grey-700 */
    --dark: 226, 226, 227;              /* grey-200 — foreground token flips */
    --dark-dark: 240, 240, 241;
    --dark-light: 163, 164, 166;
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* semantic colours — lifted for dark surfaces */
    --primary: 85, 152, 205;            /* blue-400 */
    --primary-dark: 142, 186, 222;      /* blue-300 */
    --secondary: 163, 164, 166;         /* grey-400 */
    --secondary-dark: 206, 206, 208;    /* grey-300 */
    --success: 47, 179, 116;
    --success-dark: 120, 208, 166;
    --danger: 224, 102, 102;
    --danger-dark: 235, 153, 153;
    --warning: 232, 162, 61;
    --warning-dark: 240, 193, 128;
    --info: 85, 152, 205;
    --info-dark: 142, 186, 222;
    --bs-danger: rgb(224, 102, 102);
    --bs-danger-rgb: 224, 102, 102;

    --focus-ring: 0 0 0 2px #1C1C1D, 0 0 0 4px var(--pb-blue-400);
}

/* Re-anchor the hardcoded Axelit-navy dark rules from pracbill-modern-forms.css */
body.dark .header-main,
body[class*="dark"] .header-main {
    background: rgba(var(--white), 1);
    border-bottom: 1px solid var(--border_color);
}
body.dark .header-main::before,
body[class*="dark"] .header-main::before {
    background: rgba(var(--white), 1);
}
body.dark .header-main .form-control,
body[class*="dark"] .header-main .form-control {
    background: var(--bs-form-control-bg);
    color: var(--font-color);
    border-color: var(--border_color);
}
body.dark nav,
body[class*="dark"] nav {
    background-color: rgba(var(--white), 1);
    border-right: 1px solid var(--border_color);
}
body.dark .disabled > .page-link,
body.dark .page-link.disabled,
body[class*="dark"] .disabled > .page-link,
body[class*="dark"] .page-link.disabled {
    color: var(--font-light-color);
    background-color: #242425;
    border-color: var(--border_color);
}

/* ========================================
   4. TYPOGRAPHY
   Space Grotesk for headings; Inter everywhere you read;
   Space Mono for data/code; tabular numerals for money.
   Sentence case — no auto-capitalisation.
   ======================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.main-title {
    font-family: var(--font-display);
    color: var(--font-title-color);
}

/* Guide weights: display/headings 700/600, tracking tight on large sizes */
h1, .h1 { font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-weight: 600; letter-spacing: -0.01em; }

.main-title {
    font-weight: 600;
    text-transform: none; /* sentence case, not Capitalised Case */
    letter-spacing: -0.01em;
}

code, pre, kbd, samp, .font-monospace {
    font-family: var(--font-mono);
}
code {
    color: var(--pb-blue-700);
    background-color: var(--pb-blue-50);
}
body.dark code,
body[class*="dark"] code {
    color: var(--pb-blue-300);
    background-color: rgba(85, 152, 205, 0.12);
}

/* Money & metrics read in columns — tabular numerals everywhere data lives */
.tabular { font-variant-numeric: tabular-nums; }
.table, table.dataTable {
    font-variant-numeric: tabular-nums;
}

/* Overline-style section labels (sidebar menu title) */
nav .app-nav .main-nav > li.menu-title span {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--font-light-color);
}

/* ========================================
   5. BUTTONS — 8px radius, brand hover, visible focus
   ======================================== */
.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* Axelit rounds modal buttons up to the card radius — keep them buttons */
.modal-content .btn {
    border-radius: 8px;
}
.btn.rounded-pill { border-radius: 999px; }

/* Secondary buttons per guide: white, grey-300 hairline; hover grey-50 fill */
.btn-secondary,
.btn-default {
    background-color: #fff;
    border: 1px solid var(--pb-grey-300);
    color: var(--pb-grey-700);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.active,
.btn-default:hover, .btn-default:focus, .btn-default.active {
    background-color: var(--pb-grey-50);
    border-color: var(--pb-grey-300);
    color: var(--pb-grey-800);
}
body.dark .btn-secondary, body.dark .btn-default,
body[class*="dark"] .btn-secondary, body[class*="dark"] .btn-default {
    background-color: rgba(var(--white), 1);
    border: 1px solid var(--border_color);
    color: var(--font-secondary-color);
}
body.dark .btn-secondary:hover, body.dark .btn-secondary:focus,
body.dark .btn-default:hover, body.dark .btn-default:focus,
body[class*="dark"] .btn-secondary:hover, body[class*="dark"] .btn-secondary:focus,
body[class*="dark"] .btn-default:hover, body[class*="dark"] .btn-default:focus {
    background-color: #3A3A3C;
    border-color: var(--border_color);
    color: var(--font-color);
}

/* Timeline note-bar actions — quiet ghost buttons so the note header
   doesn't shout; colour only carries state (public/private) and danger */
.timeline-content .navbar-nav > li > .btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--pb-grey-600);
    box-shadow: none;
}
.timeline-content .navbar-nav > li > .btn:hover,
.timeline-content .navbar-nav > li > .btn:focus {
    background: var(--pb-grey-100);
    border-color: transparent;
    color: var(--pb-grey-800);
}
.timeline-content .navbar-nav > li > .btn.btn-danger {
    background: transparent;
    color: var(--pb-overdue-text);
}
.timeline-content .navbar-nav > li > .btn.btn-danger:hover,
.timeline-content .navbar-nav > li > .btn.btn-danger:focus {
    background: var(--pb-overdue-bg);
    color: var(--pb-overdue-text);
}
.timeline-content .navbar-nav > li > .btn.btn-success {
    background: var(--pb-paid-bg);
    color: var(--pb-paid-text);
}
.timeline-content .navbar-nav > li > .btn.btn-success:hover,
.timeline-content .navbar-nav > li > .btn.btn-success:focus {
    background: var(--pb-paid-bg);
    color: var(--pb-paid-text);
}
body.dark .timeline-content .navbar-nav > li > .btn,
body[class*="dark"] .timeline-content .navbar-nav > li > .btn {
    color: var(--font-secondary-color);
}
body.dark .timeline-content .navbar-nav > li > .btn:hover,
body.dark .timeline-content .navbar-nav > li > .btn:focus,
body[class*="dark"] .timeline-content .navbar-nav > li > .btn:hover,
body[class*="dark"] .timeline-content .navbar-nav > li > .btn:focus {
    background: #3A3A3C;
    color: var(--font-color);
}
body.dark .timeline-content .navbar-nav > li > .btn.btn-danger,
body[class*="dark"] .timeline-content .navbar-nav > li > .btn.btn-danger {
    background: transparent;
    color: #EB9999;
}
body.dark .timeline-content .navbar-nav > li > .btn.btn-danger:hover,
body[class*="dark"] .timeline-content .navbar-nav > li > .btn.btn-danger:hover {
    background: rgba(224, 102, 102, 0.18);
    color: #EB9999;
}
body.dark .timeline-content .navbar-nav > li > .btn.btn-success,
body[class*="dark"] .timeline-content .navbar-nav > li > .btn.btn-success {
    background: rgba(47, 179, 116, 0.18);
    color: #78D0A6;
}

/* ========================================
   6. CARDS & SURFACES — flat-first: hairline border, no resting shadow
   ======================================== */
.card {
    background: rgba(var(--white), 1);
    border: 1px solid var(--border_color);
    border-radius: 12px;
    box-shadow: none;
}
.card:hover {
    box-shadow: none; /* resting cards stay flat */
}
.card.hover-effect:hover {
    box-shadow: var(--hover-shadow); /* things that float may float */
}
.card .card-header {
    border-bottom: 1px solid var(--border_color);
    border-radius: 12px 12px 0 0;
}
.card .card-footer {
    border-top: 1px solid var(--border_color);
}

/* ========================================
   7. FORMS — 6px radius, grey-300 rest / grey-400 hover /
   blue-600 focus + 3px blue-100 ring
   ======================================== */
.form-control,
.form-select {
    border-radius: 6px;
    border-color: var(--pb-grey-300);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--pb-grey-400);
}
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: 0 0 0 3px var(--pb-blue-100);
}
body.dark .form-control,
body.dark .form-select,
body[class*="dark"] .form-control,
body[class*="dark"] .form-select {
    border-color: var(--border_color);
}
body.dark .form-control:focus,
body.dark .form-select:focus,
body[class*="dark"] .form-control:focus,
body[class*="dark"] .form-select:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: 0 0 0 3px rgba(85, 152, 205, 0.25);
}

/* .app-form scope (login + app forms) out-ranks the generic rules above */
.app-form .form-control,
.app-form .form-select,
.app-form.rounded-control .form-control,
.app-form.rounded-control .form-select {
    border-radius: 6px;
    border: 1px solid var(--pb-grey-300);
}
.app-form .form-control:hover:not(:focus):not(:disabled),
.app-form .form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--pb-grey-400);
}
.app-form .form-control:focus,
.app-form .form-select:focus {
    border: 1px solid rgba(var(--primary), 1);
    box-shadow: 0 0 0 3px var(--pb-blue-100);
    padding-left: 0.75rem; /* no focus padding jump — motion stays restrained */
}
.app-form.rounded-control .btn {
    border-radius: 8px;
}
.app-form .input-group-text {
    border-radius: 6px;
}
body.dark .app-form .form-control,
body.dark .app-form .form-select,
body[class*="dark"] .app-form .form-control,
body[class*="dark"] .app-form .form-select {
    border-color: var(--border_color);
}
body.dark .app-form .form-control:focus,
body.dark .app-form .form-select:focus,
body[class*="dark"] .app-form .form-control:focus,
body[class*="dark"] .app-form .form-select:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: 0 0 0 3px rgba(85, 152, 205, 0.25);
}

/* Checkboxes, radios, switches — checked = brand blue */
.form-check-input:checked {
    background-color: rgba(var(--primary), 1);
    border-color: rgba(var(--primary), 1);
}
.form-check-input:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: 0 0 0 3px var(--pb-blue-100);
}
body.dark .form-check-input:focus,
body[class*="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(85, 152, 205, 0.25);
}

/* ========================================
   8. BADGES — status chips: soft background + accessible text
   ======================================== */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge.text-bg-success, .badge.bg-success {
    background-color: var(--pb-paid-bg) !important;
    color: var(--pb-paid-text) !important;
}
.badge.text-bg-warning, .badge.bg-warning {
    background-color: var(--pb-pending-bg) !important;
    color: var(--pb-pending-text) !important;
}
.badge.text-bg-danger, .badge.bg-danger {
    background-color: var(--pb-overdue-bg) !important;
    color: var(--pb-overdue-text) !important;
}
body.dark .badge.text-bg-success, body.dark .badge.bg-success,
body[class*="dark"] .badge.text-bg-success, body[class*="dark"] .badge.bg-success {
    background-color: rgba(47, 179, 116, 0.18) !important;
    color: #78D0A6 !important;
}
body.dark .badge.text-bg-warning, body.dark .badge.bg-warning,
body[class*="dark"] .badge.text-bg-warning, body[class*="dark"] .badge.bg-warning {
    background-color: rgba(232, 162, 61, 0.18) !important;
    color: #F0C180 !important;
}
body.dark .badge.text-bg-danger, body.dark .badge.bg-danger,
body[class*="dark"] .badge.text-bg-danger, body[class*="dark"] .badge.bg-danger {
    background-color: rgba(224, 102, 102, 0.18) !important;
    color: #EB9999 !important;
}

/* Legacy Bootstrap-3 .label chips (bridged in pracbill-modern-forms.css) */
.label {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.3em 0.75em;
}
.label-success {
    background-color: var(--pb-paid-bg);
    color: var(--pb-paid-text);
}
.label-warning {
    background-color: var(--pb-pending-bg);
    color: var(--pb-pending-text);
}
.label-danger {
    background-color: var(--pb-overdue-bg);
    color: var(--pb-overdue-text);
}
.label-info, .label-primary {
    background-color: var(--pb-blue-100);
    color: var(--pb-blue-800);
}
body.dark .label-success, body[class*="dark"] .label-success {
    background-color: rgba(47, 179, 116, 0.18);
    color: #78D0A6;
}
body.dark .label-warning, body[class*="dark"] .label-warning {
    background-color: rgba(232, 162, 61, 0.18);
    color: #F0C180;
}
body.dark .label-danger, body[class*="dark"] .label-danger {
    background-color: rgba(224, 102, 102, 0.18);
    color: #EB9999;
}
body.dark .label-info, body.dark .label-primary,
body[class*="dark"] .label-info, body[class*="dark"] .label-primary {
    background-color: rgba(85, 152, 205, 0.18);
    color: #8EBADE;
}

/* ========================================
   9. ALERTS — soft state background, hairline border, 12px radius
   ======================================== */
.alert {
    border-radius: 12px;
    border: 1px solid transparent;
}
.alert-success {
    background-color: var(--pb-paid-bg);
    color: var(--pb-paid-text);
    border-color: rgba(26, 150, 90, 0.3);
}
.alert-warning {
    background-color: var(--pb-pending-bg);
    color: var(--pb-pending-text);
    border-color: rgba(214, 138, 12, 0.3);
}
.alert-danger {
    background-color: var(--pb-overdue-bg);
    color: var(--pb-overdue-text);
    border-color: rgba(210, 68, 68, 0.3);
}
.alert-primary, .alert-info {
    background-color: var(--pb-blue-50);
    color: var(--pb-blue-800);
    border-color: var(--pb-blue-200);
}
body.dark .alert-success, body[class*="dark"] .alert-success {
    background-color: rgba(47, 179, 116, 0.12);
    color: #78D0A6;
    border-color: rgba(47, 179, 116, 0.35);
}
body.dark .alert-warning, body[class*="dark"] .alert-warning {
    background-color: rgba(232, 162, 61, 0.12);
    color: #F0C180;
    border-color: rgba(232, 162, 61, 0.35);
}
body.dark .alert-danger, body[class*="dark"] .alert-danger {
    background-color: rgba(224, 102, 102, 0.12);
    color: #EB9999;
    border-color: rgba(224, 102, 102, 0.35);
}
body.dark .alert-primary, body.dark .alert-info,
body[class*="dark"] .alert-primary, body[class*="dark"] .alert-info {
    background-color: rgba(85, 152, 205, 0.12);
    color: #8EBADE;
    border-color: rgba(85, 152, 205, 0.35);
}

/* ========================================
   10. TABLES — grey-50 header band, hairline rows, blue-50 hover
   ======================================== */
.table thead tr th {
    background-color: var(--pb-grey-50);
    color: var(--pb-grey-600);
    font-weight: 600;
    border-bottom: 1px solid var(--border_color);
}
.table tbody tr td {
    border-bottom: 1px solid var(--border_color);
}
.table-hover > tbody > tr:hover > *,
table.dataTable tbody tr:hover {
    background-color: var(--pb-blue-50);
    --bs-table-bg-state: var(--pb-blue-50);
}
body.dark .table thead tr th,
body[class*="dark"] .table thead tr th {
    background-color: #242425;
    color: var(--font-secondary-color);
}
body.dark .table-hover > tbody > tr:hover > *,
body.dark table.dataTable tbody tr:hover,
body[class*="dark"] .table-hover > tbody > tr:hover > *,
body[class*="dark"] table.dataTable tbody tr:hover {
    background-color: rgba(85, 152, 205, 0.08);
    --bs-table-bg-state: rgba(85, 152, 205, 0.08);
}

/* ========================================
   11. MODALS — 16px radius, lg shadow (modals genuinely float)
   ======================================== */
.modal-content {
    border-radius: 16px;
    border: 1px solid var(--border_color);
    box-shadow: var(--pb-shadow-lg);
}
.modal-backdrop {
    background-color: var(--pb-grey-900);
}
.modal-backdrop.show {
    opacity: 0.45;
}

/* ========================================
   12. BREADCRUMBS — muted grey, active grey-900, hover blue
   ======================================== */
.app-line-breadcrumbs li a {
    color: var(--font-light-color);
}
.app-line-breadcrumbs li a:hover {
    color: rgba(var(--primary), 1);
}
.app-line-breadcrumbs li.active a {
    color: var(--font-title-color);
}

/* ========================================
   13. SIDEBAR — white surface, hairline edge, calm active states
   ======================================== */
nav {
    border-right: 1px solid var(--border_color);
}
nav .app-nav .main-nav > li:not(.menu-title) > a {
    border-radius: 8px;
    text-transform: none; /* sentence case */
    font-size: 15px;
}
nav .app-nav .main-nav > li:not(.menu-title) > a[aria-expanded=true] {
    background: rgba(var(--primary), 0.1);
    color: var(--pb-blue-700);
}
body.dark nav .app-nav .main-nav > li:not(.menu-title) > a[aria-expanded=true],
body[class*="dark"] nav .app-nav .main-nav > li:not(.menu-title) > a[aria-expanded=true] {
    color: var(--pb-blue-300);
}

/* ========================================
   14. HEADER — canvas-coloured with a hairline bottom edge
   ======================================== */
header.header-main {
    border-bottom: 1px solid var(--border_color);
}
header.header-main .form-control {
    background-color: rgba(var(--white), 1);
}

/* ========================================
   15. FOCUS VISIBILITY — 2px surface + 4px blue ring
   ======================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* ========================================
   16. LOGIN — soft blue-50→white backdrop, flat card, solid blue primary
   ======================================== */
.sign-in-bg {
    background: linear-gradient(180deg, var(--pb-blue-50) 0%, #fff 100%);
}
.sign-in-bg .sign-in-content-bg {
    border: 1px solid var(--border_color);
    border-radius: 16px;
    box-shadow: var(--pb-shadow-md);
}
.sign-in-bg .image-contentbox {
    background-color: var(--pb-blue-50);
}
/* Primary action = solid brand blue (guide: hover darkens to blue-700) */
.sign-in-bg .btn-light-primary {
    background-color: rgba(var(--primary), 1);
    color: #fff;
    border-color: transparent;
}
.sign-in-bg .btn-light-primary:hover,
.sign-in-bg .btn-light-primary:focus,
.sign-in-bg .btn-light-primary:focus-visible,
.sign-in-bg .btn-light-primary.active {
    background-color: rgba(var(--primary-dark), 1);
    color: #fff;
    border-color: transparent;
}
.sign-in-bg .form-contentbox h2 {
    color: var(--pb-blue-700);
}

/* ========================================
   17. MOTION — restrained; respect reduced motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}