/* ==========================================================================
   McQuel Healthcare - Application Design System

   Brand: #648da7 blue and #8686b2 purple from the style guide, #e71414
   QueSoft red, set in Poppins with Montserrat for data.

   Two deliberate departures from the printed guide, both for legibility:
   pages are white rather than the #f0efec warm paper, which made every
   screen look dingy; and the status colours are bright rather than muted,
   since green/amber/red are functional signals the guide does not define.
   ========================================================================== */

:root {
    /* Brand Colors, straight from the style guide.
       The brand blue and purple are muted - measured on white they land at
       3.55:1 and 3.46:1, which carries large text, fills and icons but NOT
       body text (AA wants 4.5:1). So each brand hue keeps its true value for
       surfaces, and gains a darker derived shade for text, links and button
       fills. Every -dark/-darker value below is measured, not eyeballed. */
    --mcq-primary: #648da7;         /* brand blue, surfaces and fills */
    --mcq-primary-dark: #4a6d84;    /* 5.51:1 - text, links, buttons */
    --mcq-primary-darker: #3a5568;  /* 7.84:1 - hover, active, headings */
    --mcq-primary-light: #8fb0c4;
    --mcq-primary-bg: #eaf0f4;

    /* Sidebar palette. These are the shipped defaults; an admin can override
       them from Settings > Appearance, which prints a :root block after this
       stylesheet. Measured values for the defaults:
         menu text  #F4F8FA on #527F96  4.07:1  (was 3.57:1 on #628da7)
         on hover   #F4F8FA on #5D8DA3  3.39:1  transient state
         active     #294B5D on #FFFFFF  9.30:1
       Menu text clears the 3:1 bar for UI and large text and improves on
       what it replaced, though it stays under the 4.5:1 AA asks for at
       label size. Deliberate, for brand fidelity.
       The profile panel is a translucent white wash, so it lightens the
       local ground to #7196a9 and menu text on it measures 2.96:1. Tinting
       dark instead (rgba(0,0,0,0.14)) would reach 5.21:1 if that panel
       ever needs to read cleanly. */
    --mcq-secondary: #527F96;           /* sidebar ground */
    --mcq-sidebar-hover: #5D8DA3;       /* hover lift */
    --mcq-sidebar-ink: #F4F8FA;         /* menu text and icons */
    --mcq-sidebar-active-bg: #FFFFFF;   /* the active pill */
    --mcq-sidebar-active-ink: #294B5D;  /* text on the active pill */
    --mcq-sidebar-panel: rgba(255, 255, 255, 0.18);  /* profile panel */

    /* Buttons take the sidebar colour by default, so the two primary pieces
       of brand furniture agree. Admin-overridable from Settings > Appearance,
       which also derives the hover shade and picks the label colour by
       measured contrast. */
    --mcq-btn-bg: var(--mcq-secondary);
    --mcq-btn-hover: #476D81;
    --mcq-btn-ink: #FFFFFF;
    --mcq-accent: #8686b2;          /* brand purple */
    --mcq-accent-dark: #6b6b99;     /* 5.01:1 - text on white */
    --mcq-accent-light: #adadcd;
    --mcq-accent-bg: #eeeef5;

    /* Status Colors, bright and unambiguous. Each has two values because
       one token cannot do both jobs: the vivid hue is what makes the UI
       feel alive, but at badge-text size it fails AA on white (bright green
       #22c55e is only 2.28:1). So the base token is the text-safe value and
       -vivid is the fill used for solid icon chips, where the 3:1 non-text
       threshold applies instead. */
    --mcq-success: #15803d;         /* 5.02:1 - badge text */
    --mcq-success-vivid: #16a34a;   /* icon fills */
    --mcq-success-bg: #dcfce7;
    --mcq-warning: #b45309;         /* 5.02:1 - badge text */
    --mcq-warning-vivid: #d97706;   /* icon fills */
    --mcq-warning-bg: #fef3c7;
    /* The QueSoft red clears AA on white, but not on its own pale badge
       tint (3.81:1), so badge text uses a slightly deeper red and the
       brand red itself stays the fill. */
    --mcq-danger: #c81111;          /* 4.85:1 on the tint - badge text */
    --mcq-danger-vivid: #e71414;    /* QueSoft red - fills and buttons */
    --mcq-danger-bg: #fee2e2;
    --mcq-danger-light: #f38282;    /* decorative only - 2.52:1 */
    --mcq-info: #4f46e5;            /* 6.29:1 - badge text */
    --mcq-info-vivid: #6366f1;      /* icon fills */
    --mcq-info-bg: #e0e7ff;

    /* Tile tints - deliberately more saturated than the *-bg tokens above
       (those stay pale for badges/pills); these carry real color for
       dashboard tiles so they never read as washed-out white cards. */
    --mcq-primary-tile: #cfe2ee;
    --mcq-accent-tile: #dcdcf0;
    --mcq-success-tile: #bbf7d0;
    --mcq-warning-tile: #fde68a;
    --mcq-danger-tile: #fecaca;
    --mcq-info-tile: #c7d2fe;

    /* Neutrals - clean and cool. The warm beige ramp this replaced made
       every screen look dingy; pages are white now, with the greys used
       only for borders, muted text and subtle fills. */
    --mcq-paper: #ffffff;
    --mcq-gray-50: #f7f9fb;
    --mcq-gray-100: #eef2f6;
    --mcq-gray-200: #e0e6ed;
    --mcq-gray-300: #c6d0da;
    --mcq-gray-400: #94a3b3;
    --mcq-gray-500: #64748b;
    --mcq-gray-600: #4b5768;
    --mcq-gray-700: #374151;
    --mcq-gray-800: #1f2937;
    --mcq-gray-900: #111827;

    /* Typography. Poppins carries the interface, Montserrat the data:
       Poppins is the brand voice and matches the logo wordmark, but its
       wide geometric forms slow down reading in dense tables, which this
       app is full of. */
    --font-ui: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-data: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 0px;
    --sidebar-collapsed-rail-width: 84px;
    --topbar-height: 68px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(22, 35, 43, 0.05);
    --shadow-md: 0 4px 10px -2px rgba(22, 35, 43, 0.08), 0 2px 6px -3px rgba(22, 35, 43, 0.06);
    --shadow-lg: 0 12px 24px -6px rgba(22, 35, 43, 0.12), 0 4px 8px -4px rgba(22, 35, 43, 0.06);
    --shadow-xl: 0 24px 48px -12px rgba(22, 35, 43, 0.22), 0 8px 16px -8px rgba(22, 35, 43, 0.1);

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.55rem;
    --radius-lg: 0.85rem;
    --radius-xl: 1.15rem;
}

/* ==========================================================================
   Bootstrap color variable remap - Bootstrap's own utilities (bg-primary,
   text-success, btn-danger, alert-info, badge bg-*-subtle, etc.) read
   these custom properties at render time. Retinting them here means every
   raw-Bootstrap-color usage across the whole app inherits our palette
   automatically, without hunting down every file that used a plain
   Bootstrap utility instead of our own component classes. Solid fills use the
   darker derived shade, since they carry white text and the brand blue alone
   would only reach 3.55:1 against it.
   ========================================================================== */
:root {
    --bs-primary: #4a6d84;
    --bs-primary-rgb: 74, 109, 132;
    --bs-primary-text-emphasis: #3a5568;
    --bs-primary-bg-subtle: #eaf0f4;
    --bs-primary-border-subtle: #b8ccd8;

    --bs-success: #15803d;
    --bs-success-rgb: 21, 128, 61;
    --bs-success-text-emphasis: #14532d;
    --bs-success-bg-subtle: #dcfce7;
    --bs-success-border-subtle: #86efac;

    --bs-warning: #b45309;
    --bs-warning-rgb: 180, 83, 9;
    --bs-warning-text-emphasis: #92400e;
    --bs-warning-bg-subtle: #fef3c7;
    --bs-warning-border-subtle: #fcd34d;

    --bs-danger: #c81111;
    --bs-danger-rgb: 200, 17, 17;
    --bs-danger-text-emphasis: #9c0e0e;
    --bs-danger-bg-subtle: #fee2e2;
    --bs-danger-border-subtle: #f38282;

    --bs-info: #4f46e5;
    --bs-info-rgb: 79, 70, 229;
    --bs-info-text-emphasis: #3730a3;
    --bs-info-bg-subtle: #e0e7ff;
    --bs-info-border-subtle: #c7d2fe;

    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-secondary-text-emphasis: #374151;
    --bs-secondary-bg-subtle: #eef2f6;
    --bs-secondary-border-subtle: #c6d0da;
}

/* Hover states darken each status hue by roughly one step. */
.btn-success  { background: var(--mcq-success); border-color: var(--mcq-success); }
.btn-success:hover { background: #14682f; border-color: #14682f; }
.btn-outline-success { color: var(--mcq-success); border-color: var(--mcq-success); }
.btn-outline-success:hover { background: var(--mcq-success); border-color: var(--mcq-success); }

.btn-danger  { background: var(--mcq-danger-vivid); border-color: var(--mcq-danger-vivid); }
.btn-danger:hover { background: #c81111; border-color: #c81111; }
.btn-outline-danger { color: var(--mcq-danger); border-color: var(--mcq-danger); }
.btn-outline-danger:hover { background: var(--mcq-danger-vivid); border-color: var(--mcq-danger-vivid); }

.btn-warning { background: var(--mcq-warning); border-color: var(--mcq-warning); color: #fff; }
.btn-warning:hover { background: #92400e; border-color: #92400e; color: #fff; }
.btn-outline-warning { color: var(--mcq-warning); border-color: var(--mcq-warning); }
.btn-outline-warning:hover { background: var(--mcq-warning); border-color: var(--mcq-warning); color: #fff; }

.btn-info    { background: var(--mcq-info); border-color: var(--mcq-info); color: #fff; }
.btn-info:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
.btn-outline-info { color: var(--mcq-info); border-color: var(--mcq-info); }
.btn-outline-info:hover { background: var(--mcq-info); border-color: var(--mcq-info); color: #fff; }

/* ==========================================================================
   Base Styles
   ========================================================================== */

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

body {
    font-family: var(--font-ui);
    background-color: var(--mcq-paper);
    color: var(--mcq-gray-800);
    /* Poppins sets a touch larger than Inter at the same value, so the base
       drops slightly to keep dense tables from reflowing. */
    font-size: 0.9125rem;
    line-height: 1.6;
    overflow-x: hidden;
}

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

/* Data type - tables, figures and money. Montserrat is narrower than
   Poppins and stays legible down at table sizes, which matters in an app
   this table-heavy. Tabular figures keep columns of numbers aligned. */
table,
.info-row-value,
.stat-card .stat-value,
.mini-metric .mini-metric-value,
.stock-tier-value,
.chart-donut-total {
    font-family: var(--font-data);
}

.stat-card .stat-value,
.mini-metric .mini-metric-value,
.stock-tier-value,
.chart-donut-total,
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* Display type - page titles and auth headings carry the brand voice, so
   they stay in Poppins. */
.display-serif,
.page-header h1,
.auth-header h1,
.cover-title {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.stat-card .stat-value,
.mini-metric .mini-metric-value,
.chart-donut-total {
    font-weight: 700;
    letter-spacing: -0.02em;
}

::selection { background: var(--mcq-primary-light); color: #fff; }

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--mcq-secondary);
    color: var(--mcq-sidebar-ink);
    /* Light text on a coloured ground renders grey under the default
       subpixel antialiasing. Greyscale smoothing keeps it properly white. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal), width var(--transition-normal);
    box-shadow: var(--shadow-xl);
}

/* The brand sits centred in the header. The mobile close button is taken
   out of the flow so it can never pull the logo off centre. */
.sidebar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--mcq-sidebar-ink);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}

.sidebar-brand:hover {
    color: var(--mcq-sidebar-ink);
}

.brand-logo {
    height: 64px;
    width: auto;
    max-width: 100%;
    border-radius: var(--radius-sm);
}

/* Icon-only mark, shown in place of the wordmark on the collapsed rail. */
.brand-logo-mark {
    display: none;
    height: 44px;
    width: auto;
    border-radius: var(--radius-sm);
}

.sidebar-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    /* Was a mid grey, which measured 1.69:1 on the sidebar ground and was
       effectively invisible. It is a sidebar icon, so it takes the ink. */
    color: var(--mcq-sidebar-ink);
    font-size: 1.25rem;
    padding: 0.25rem;
}

.sidebar-toggle:hover {
    color: var(--mcq-sidebar-ink);
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.15rem 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--mcq-sidebar-ink);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.sidebar-nav .nav-link:hover {
    color: var(--mcq-sidebar-ink);
    background: var(--mcq-sidebar-hover);
}

/* The active item is a white pill carrying deep blue ink, which measures
   9.30:1 and is the strongest contrast anywhere in the sidebar. */
.sidebar-nav .nav-link.active {
    color: var(--mcq-sidebar-active-ink);
    background: var(--mcq-sidebar-active-bg);
    font-weight: 600;
    box-shadow: 0 4px 14px -2px rgba(38, 59, 75, 0.45);
}

.sidebar-nav .nav-link i {
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--mcq-sidebar-ink);
}

.sidebar-nav .nav-link:hover i {
    color: var(--mcq-sidebar-ink);
}

.sidebar-nav .nav-link.active i {
    color: var(--mcq-sidebar-active-ink);
}

.nav-divider {
    padding: 1.4rem 1.6rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mcq-sidebar-ink);
}

.nav-link-toggle .submenu-caret {
    font-size: 0.7rem;
    color: var(--mcq-sidebar-ink);
    transition: transform var(--transition-fast);
}

.nav-link-toggle[aria-expanded="true"] .submenu-caret {
    transform: rotate(180deg);
}

.sidebar-submenu .nav-link {
    padding-left: 2.35rem;
    font-size: 0.8125rem;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 0.9rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--mcq-sidebar-panel);
    border-radius: var(--radius-lg);
    padding: 0.6rem 0.7rem;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--mcq-sidebar-active-ink);
    flex-shrink: 0;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Collapsed Sidebar (desktop rail mode - toggled via #sidebarCollapseToggle,
   state persisted in localStorage, applied to <html> so it's set before
   first paint and never flashes the expanded sidebar on load)
   ========================================================================== */

html.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-rail-width);
}

html.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* On the narrow rail the wordmark has nowhere to go, so swap to the icon. */
html.sidebar-collapsed .brand-logo {
    display: none;
}

html.sidebar-collapsed .brand-logo-mark {
    display: block;
}

html.sidebar-collapsed .sidebar-nav .nav-link {
    justify-content: center;
    margin: 0.15rem 0.5rem;
    padding: 0.65rem;
}

html.sidebar-collapsed .sidebar-nav .nav-link span,
html.sidebar-collapsed .sidebar-nav .nav-link .badge,
html.sidebar-collapsed .sidebar-nav .nav-link .submenu-caret,
html.sidebar-collapsed .nav-divider span,
html.sidebar-collapsed .sidebar-submenu,
html.sidebar-collapsed .user-details {
    display: none;
}

html.sidebar-collapsed .user-info {
    justify-content: center;
    padding: 0.6rem;
}

html.sidebar-collapsed .user-info .btn {
    display: none;
}

html.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-rail-width);
}

/* ==========================================================================
   Main Content
   ========================================================================== */

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--transition-normal);
}

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    height: var(--topbar-height);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--mcq-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    z-index: 1040;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar-icon {
    color: var(--mcq-gray-500);
    font-size: 1.25rem;
    padding: 0.375rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.topbar-icon:hover {
    color: var(--mcq-primary);
    background: var(--mcq-primary-bg);
}

.topbar-icon-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--mcq-danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.topbar-divider {
    width: 1px;
    height: 26px;
    background: var(--mcq-gray-200);
    margin: 0 0.35rem;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem 0.3rem 0.3rem;
    border-radius: 999px;
    cursor: default;
}

.topbar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mcq-primary-light) 0%, var(--mcq-primary) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Topbar search - quick client lookup */
.topbar-search {
    flex: 1;
    align-items: center;
    gap: 0.6rem;
    max-width: 380px;
    margin: 0 1.5rem;
    background: var(--mcq-gray-100);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    transition: all var(--transition-fast);
}

.topbar-search:focus-within {
    background: #fff;
    border-color: var(--mcq-primary);
    box-shadow: 0 0 0 3px var(--mcq-primary-bg);
}

.topbar-search i {
    color: var(--mcq-gray-400);
    font-size: 0.9rem;
}

.topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    width: 100%;
    color: var(--mcq-gray-800);
}

.topbar-search input::placeholder {
    color: var(--mcq-gray-400);
}

/* Account icon button - opens the dropdown, replaces the old name/role
   chip (that info already lives in the sidebar footer, no need twice). */
.topbar-account-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
}

.topbar-account-btn:hover,
.topbar-account-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--mcq-primary-bg);
}

.topbar-account-btn::after {
    display: none;
}

.topbar-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.topbar-user-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mcq-gray-800);
}

.topbar-user-role {
    display: block;
    font-size: 0.7rem;
    color: var(--mcq-gray-500);
}

.breadcrumb {
    font-size: 0.8125rem;
}

.breadcrumb-item a {
    color: var(--mcq-gray-500);
}

.breadcrumb-item a:hover {
    color: var(--mcq-primary);
}

.breadcrumb-item.active {
    color: var(--mcq-gray-700);
    font-weight: 500;
}

/* Content Wrapper */
.content-wrapper {
    padding: 1.75rem;
}

/* Sticky form sidebar - keeps settings/submit visible while a longer form
   scrolls (referrals/orders/clients "new" pages). */
.form-sticky-panel {
    position: sticky;
    top: calc(var(--topbar-height) + 1.25rem);
}

@media (max-width: 991.98px) {
    .form-sticky-panel {
        position: static;
    }
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 {
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--mcq-gray-900);
    letter-spacing: -0.02em;
    margin: 0;
}

.page-header .page-subtitle {
    font-size: 0.875rem;
    color: var(--mcq-gray-500);
    margin-top: 0.2rem;
}

/* Profile-style page header (e.g. a client's own page) - an identity
   avatar next to the name/badges, instead of just bare text. */
.page-header-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mcq-primary-light) 0%, var(--mcq-primary) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* Funding source badge - same pill shape as .badge-status, one colour
   per funding type so it reads at a glance next to the status badge. */
.badge-funding {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}

.badge-funding-ndis { background: var(--mcq-primary-bg); color: var(--mcq-primary); }
.badge-funding-aged_care { background: var(--mcq-accent-bg); color: var(--mcq-accent); }
.badge-funding-support_at_home { background: var(--mcq-info-bg); color: var(--mcq-info); }
.badge-funding-private { background: var(--mcq-gray-100); color: var(--mcq-gray-600); }
.badge-funding-other { background: var(--mcq-gray-100); color: var(--mcq-gray-600); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background: #fff;
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mcq-gray-100);
    padding: 1.05rem 1.35rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
}

.card-body {
    padding: 1.35rem;
}

/* Stats Cards */
.stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-xl);
}

.stat-card .card-body {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.4rem;
}

.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
}

.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-card .stat-label {
    font-size: 0.8125rem;
    color: var(--mcq-gray-500);
    margin-top: 0.3rem;
    font-weight: 500;
}

.stat-card .stat-change {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-card .stat-change.positive {
    color: var(--mcq-success);
}

.stat-card .stat-change.negative {
    color: var(--mcq-danger);
}

.stat-card .stat-context {
    font-size: 0.72rem;
    color: var(--mcq-gray-400);
    margin-top: 0.35rem;
    font-weight: 500;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    opacity: 0.06;
    background: currentColor;
}

/* Mini-metric - compact card built on the same .card base as .stat-card,
   used for the dashboard's "Needs Attention" row. Built on .card (not a
   standalone class) so it always inherits a visible border/background/
   shadow even in a worst-case CSS load. */
.mini-metric.card {
    height: 100%;
    border-radius: var(--radius-lg);
    border-color: transparent;
}

.mini-metric .card-body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 1.15rem;
}

.mini-metric:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mini-metric .mini-metric-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #fff;
}

.mini-metric.tone-info    { background: var(--mcq-info-tile); }
.mini-metric.tone-warning { background: var(--mcq-warning-tile); }
.mini-metric.tone-primary { background: var(--mcq-primary-tile); }
.mini-metric.tone-danger  { background: var(--mcq-danger-tile); }
.mini-metric.tone-success { background: var(--mcq-success-tile); }

.mini-metric.tone-info    .mini-metric-icon { background: var(--mcq-info-vivid); }
.mini-metric.tone-warning .mini-metric-icon { background: var(--mcq-warning-vivid); }
.mini-metric.tone-primary .mini-metric-icon { background: var(--mcq-primary); }
.mini-metric.tone-danger  .mini-metric-icon { background: var(--mcq-danger-vivid); }
.mini-metric.tone-success .mini-metric-icon { background: var(--mcq-success-vivid); }

.mini-metric .mini-metric-value {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mcq-gray-900);
}

.mini-metric .mini-metric-label {
    font-size: 0.76rem;
    color: var(--mcq-gray-500);
    font-weight: 500;
    margin-top: 0.2rem;
}

/* Donut chart - fixed-height frame so Chart.js can never balloon past its
   card, with an optional centered total readout. */
.chart-donut-wrap {
    position: relative;
    height: 230px;
    max-width: 300px;
    margin: 0 auto;
}

.chart-donut-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.chart-donut-total {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mcq-gray-900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.chart-donut-label {
    font-size: 0.7rem;
    color: var(--mcq-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.3rem;
}

/* Status breakdown list - pairs with the donut chart so the card reads as
   a complete widget rather than a small ring floating in empty space. */
.status-breakdown { display: flex; flex-direction: column; gap: 0.65rem; justify-content: center; height: 100%; }

.status-breakdown-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; }

.status-breakdown-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.status-breakdown-name { flex: 1; color: var(--mcq-gray-700); font-weight: 500; white-space: nowrap; }

.status-breakdown-bar-track { flex: 1; height: 5px; border-radius: 999px; background: var(--mcq-gray-100); overflow: hidden; min-width: 40px; }

.status-breakdown-bar-fill { height: 100%; border-radius: 999px; }

.status-breakdown-count { width: 1.75rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mcq-gray-900); }

/* Utilisation bar - used on budget-warning rows */
.util-bar-track { height: 6px; border-radius: 999px; background: var(--mcq-gray-100); overflow: hidden; margin-top: 0.4rem; }

.util-bar-fill { height: 100%; border-radius: 999px; }

/* Filter chip - pill-shaped status/category filter, colored via
   --chip-bg/--chip-color set inline per item so one component covers any
   number of tones without a class per color. Replaces raw Bootstrap
   btn-info/btn-warning soup on list-page status tabs. */
.filter-chip {
    --chip-bg: var(--mcq-gray-100);
    --chip-color: var(--mcq-gray-600);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--chip-bg);
    color: var(--chip-color);
    transition: all var(--transition-fast);
    border: 1.5px solid transparent;
}

.filter-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    color: var(--chip-color);
}

.filter-chip.active {
    background: var(--chip-color);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.filter-chip .chip-count {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.42rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
}

.filter-chip.active .chip-count {
    background: rgba(255, 255, 255, 0.3);
}

/* Quick Action tile - bordered card with a colored icon square, used in
   place of plain outline buttons so the dashboard's action grid reads as
   a set of tiles rather than a form. */
.quick-action-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1.5px solid var(--mcq-gray-200);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    background: #fff;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.quick-action-tile:hover {
    border-color: var(--mcq-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.quick-action-tile .qa-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #fff;
}

.quick-action-tile.tone-primary { border-color: var(--mcq-primary-tile); }
.quick-action-tile.tone-primary .qa-icon { background: var(--mcq-primary); }

.quick-action-tile.tone-neutral .qa-icon { background: var(--mcq-gray-800); }

.quick-action-tile .qa-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--mcq-gray-800);
}

/* Hero banner - dashboard welcome card */
.hero-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, var(--mcq-primary-bg) 0%, var(--mcq-paper) 55%, #FFFFFF 100%);
    border: 1px solid var(--mcq-primary-tile);
    padding: 1.6rem 1.9rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}

.hero-banner-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    color: var(--mcq-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.hero-banner h1 {
    font-size: 1.6rem;
    margin: 0;
}

.hero-banner p {
    font-size: 0.88rem;
    color: var(--mcq-gray-600);
    margin-top: 0.2rem;
}

.hero-banner::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mcq-primary-light) 0%, transparent 70%);
    opacity: 0.18;
    pointer-events: none;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrapper {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--mcq-gray-200);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.35rem;
    border-bottom: 1px solid var(--mcq-gray-100);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.table-toolbar .search-box {
    position: relative;
    max-width: 320px;
    flex: 1;
}

.table-toolbar .search-box input {
    padding-left: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--mcq-gray-200);
    font-size: 0.875rem;
}

.table-toolbar .search-box i {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mcq-gray-400);
}

.table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.table thead th {
    background: var(--mcq-gray-50);
    border-bottom: 2px solid var(--mcq-gray-200);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mcq-gray-600);
    padding: 0.8rem 1.1rem;
    white-space: nowrap;
}

.table tbody td {
    padding: 0.8rem 1.1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--mcq-gray-100);
    font-variant-numeric: tabular-nums;
}

.table tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background-color: var(--mcq-gray-50);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}

.badge-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-active { background: var(--mcq-success-bg); color: var(--mcq-success); }
.badge-active::before { background: var(--mcq-success); }

.badge-inactive { background: var(--mcq-gray-100); color: var(--mcq-gray-600); }
.badge-inactive::before { background: var(--mcq-gray-400); }

.badge-on-hold, .badge-on_hold { background: var(--mcq-warning-bg); color: var(--mcq-warning); }
.badge-on-hold::before, .badge-on_hold::before { background: var(--mcq-warning); }

.badge-ceased { background: var(--mcq-danger-bg); color: var(--mcq-danger); }
.badge-ceased::before { background: var(--mcq-danger); }

.badge-new { background: var(--mcq-info-bg); color: var(--mcq-info); }
.badge-new::before { background: var(--mcq-info); }

.badge-under-review, .badge-under_review { background: var(--mcq-accent-bg); color: var(--mcq-accent); }
.badge-under-review::before, .badge-under_review::before { background: var(--mcq-accent); }

.badge-approved { background: var(--mcq-success-bg); color: var(--mcq-success); }
.badge-approved::before { background: var(--mcq-success); }

.badge-declined { background: var(--mcq-danger-bg); color: var(--mcq-danger); }
.badge-declined::before { background: var(--mcq-danger); }

.badge-converted { background: var(--mcq-info-bg); color: var(--mcq-info); }
.badge-converted::before { background: var(--mcq-info); }

.badge-closed { background: var(--mcq-gray-100); color: var(--mcq-gray-600); }
.badge-closed::before { background: var(--mcq-gray-400); }

/* Order statuses */
.badge-order_placed { background: var(--mcq-info-bg); color: var(--mcq-info); }
.badge-order_placed::before { background: var(--mcq-info); }

.badge-confirmed { background: var(--mcq-accent-bg); color: var(--mcq-accent); }
.badge-confirmed::before { background: var(--mcq-accent); }

.badge-processing { background: var(--mcq-warning-bg); color: var(--mcq-warning); }
.badge-processing::before { background: var(--mcq-warning); }

.badge-en_route, .badge-en-route { background: var(--mcq-primary-bg); color: var(--mcq-primary); }
.badge-en_route::before, .badge-en-route::before { background: var(--mcq-primary); }

.badge-delivered { background: var(--mcq-success-bg); color: var(--mcq-success); }
.badge-delivered::before { background: var(--mcq-success); }

.badge-cancelled { background: var(--mcq-danger-bg); color: var(--mcq-danger); }
.badge-cancelled::before { background: var(--mcq-danger); }

.badge-returned { background: var(--mcq-warning-bg); color: var(--mcq-warning); }
.badge-returned::before { background: var(--mcq-warning); }

.badge-failed_delivery, .badge-failed-delivery { background: var(--mcq-danger-bg); color: var(--mcq-danger); }
.badge-failed_delivery::before, .badge-failed-delivery::before { background: var(--mcq-danger); }

/* Purchase order statuses */
.badge-draft { background: var(--mcq-gray-100); color: var(--mcq-gray-600); }
.badge-draft::before { background: var(--mcq-gray-400); }

.badge-submitted { background: var(--mcq-info-bg); color: var(--mcq-info); }
.badge-submitted::before { background: var(--mcq-info); }

.badge-partially_received { background: var(--mcq-warning-bg); color: var(--mcq-warning); }
.badge-partially_received::before { background: var(--mcq-warning); }

.badge-fully_received { background: var(--mcq-success-bg); color: var(--mcq-success); }
.badge-fully_received::before { background: var(--mcq-success); }

.badge-backordered { background: var(--mcq-danger-bg); color: var(--mcq-danger); }
.badge-backordered::before { background: var(--mcq-danger); }

/* Appointment statuses */
.badge-requested { background: var(--mcq-info-bg); color: var(--mcq-info); }
.badge-requested::before { background: var(--mcq-info); }

.badge-scheduled { background: var(--mcq-accent-bg); color: var(--mcq-accent); }
.badge-scheduled::before { background: var(--mcq-accent); }

.badge-completed { background: var(--mcq-success-bg); color: var(--mcq-success); }
.badge-completed::before { background: var(--mcq-success); }

.badge-no_show, .badge-no-show { background: var(--mcq-danger-bg); color: var(--mcq-danger); }
.badge-no_show::before, .badge-no-show::before { background: var(--mcq-danger); }

/* A shift sitting with a clinician, waiting for them to accept or decline. */
.badge-offered { background: var(--mcq-warning-bg); color: var(--mcq-warning); }
.badge-offered::before { background: var(--mcq-warning); }

.badge-declined { background: var(--mcq-danger-bg); color: var(--mcq-danger); }
.badge-declined::before { background: var(--mcq-danger); }

/* ==========================================================================
   Client / Provider Portals - the two external realms. They share this
   stylesheet with the staff area so clients and provider partners see the
   same brand, but they have no sidebar, so the header carries the mark.
   ========================================================================== */

.portal-body {
    background: var(--mcq-paper);
    font-family: var(--font-ui);
    color: var(--mcq-gray-800);
}

.portal-navbar {
    background: var(--mcq-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0.85rem 0;
    box-shadow: var(--shadow-md);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--mcq-sidebar-ink);
    font-weight: 600;
    text-decoration: none;
}

.portal-brand:hover {
    color: var(--mcq-sidebar-ink);
}

.portal-brand img {
    height: 42px;
    width: auto;
    border-radius: var(--radius-sm);
}

.portal-brand span {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* Full bleed: the bar spans the viewport rather than being boxed into a
   centred container, so the brand sits hard left and the menu hard right. */
.portal-navbar-container {
    width: 100%;
    padding: 0 1.5rem;
}

.portal-navbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Layout is kept off the .collapse selector because Bootstrap swaps that
   class for .collapsing mid-transition; anything bound to .collapse alone
   would drop out for the duration and make the drawer jump. */
.portal-navbar .portal-collapse {
    flex: 1;
    align-items: center;
    gap: 1rem;
}

/* Bootstrap ships ".collapse:not(.show){display:none}" at specificity (0,2,0),
   which beats a bare ".portal-collapse" no matter what order the files load
   in. The desktop bar has to out-specify it, or the whole menu stays hidden. */
.portal-navbar .portal-collapse.collapse {
    display: flex;
}

.portal-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    list-style: none;
    margin: 0 auto 0 0;
    padding: 0;
    flex-wrap: wrap;
}

/* Pill treatment, matching the sidebar: a translucent wash on hover and a
   solid light pill for the current page. The old rule turned links dark navy
   on hover, which on this dark navy bar made them momentarily invisible. */
.portal-navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--mcq-sidebar-ink);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.portal-navbar .nav-link i {
    font-size: 1rem;
    opacity: 0.95;
}

.portal-navbar .nav-link:hover,
.portal-navbar .nav-link:focus-visible {
    color: var(--mcq-sidebar-ink);
    background: rgba(255, 255, 255, 0.16);
}

.portal-navbar .nav-link.active {
    background: var(--mcq-sidebar-active-bg);
    color: var(--mcq-sidebar-active-ink);
}

.portal-navbar .nav-link.active i {
    color: var(--mcq-sidebar-active-ink);
    opacity: 1;
}

/* Identity and sign-out, kept apart from the navigation so Logout is not
   just another destination in the row. */
.portal-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

/* Notification bell. The count sits on the icon rather than beside it so the
   account group keeps its width whether or not anything is waiting. */
.portal-bell-wrap {
    position: relative;
    flex-shrink: 0;
}

.portal-bell {
    position: relative;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
    color: var(--mcq-sidebar-ink);
    font-size: 1rem;
    line-height: 1;
    padding: 0.45rem 0.6rem;
}

.portal-bell:hover,
.portal-bell[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
    color: var(--mcq-sidebar-ink);
}

.portal-bell-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--mcq-danger-vivid);
    color: #ffffff;
    font-family: var(--font-data);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.portal-bell-menu {
    width: min(22rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.portal-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--mcq-gray-200);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mcq-gray-900);
}

.portal-bell-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.portal-bell-clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mcq-primary-dark);
}

.portal-bell-clear:hover {
    color: var(--mcq-primary-darker);
    text-decoration: underline;
}

/* Opens the full history. Present whether or not anything is waiting, since
   the dropdown only ever shows the most recent handful. */
.portal-bell-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-sm);
    color: var(--mcq-primary-dark);
    background: var(--mcq-primary-bg);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.portal-bell-all:hover {
    background: var(--mcq-primary-dark);
    color: #ffffff;
}

/* Full notification history, shared by both portals. */
.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--mcq-gray-100);
}

.notification-list li:last-child {
    border-bottom: none;
}

.notification-list li.is-unread {
    border-left: 3px solid var(--mcq-primary-dark);
    background: var(--mcq-primary-bg);
}

.notification-main {
    min-width: 0;
}

.notification-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mcq-gray-900);
}

.notification-body {
    font-size: 0.8125rem;
    color: var(--mcq-gray-600);
    margin-top: 0.15rem;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--mcq-gray-500);
    margin-top: 0.3rem;
}

.portal-bell-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
}

.portal-bell-list li {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--mcq-gray-100);
}

.portal-bell-list li:last-child {
    border-bottom: none;
}

/* Unread is marked with an edge rather than a background wash, so a long
   list does not turn into a block of colour. */
.portal-bell-list li.is-unread {
    border-left: 3px solid var(--mcq-primary-dark);
    background: var(--mcq-primary-bg);
}

.portal-bell-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mcq-gray-900);
}

.portal-bell-body {
    font-size: 0.75rem;
    color: var(--mcq-gray-600);
    margin-top: 0.1rem;
}

.portal-bell-time {
    font-size: 0.6875rem;
    color: var(--mcq-gray-500);
    margin-top: 0.25rem;
}

.portal-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.6rem 1rem;
    color: var(--mcq-gray-500);
    font-size: 0.8125rem;
}

.portal-bell-empty i {
    font-size: 1.4rem;
}

.portal-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--mcq-sidebar-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.portal-logout:hover {
    background: var(--mcq-sidebar-active-bg);
    color: var(--mcq-sidebar-active-ink);
    border-color: var(--mcq-sidebar-active-bg);
}

.portal-toggler {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
    color: var(--mcq-sidebar-ink);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.3rem 0.6rem;
}

.portal-toggler:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Below lg the links stack into a drawer instead of wrapping into an
   unreadable block, which is what the previous font-size reduction produced
   once there were seven of them. */
@media (max-width: 991.98px) {
    .portal-toggler {
        display: block;
    }
    /* The desktop rule above forces this open, so the collapsed state has to
       be restored here at higher specificity or the drawer would sit
       permanently open on small screens. */
    .portal-navbar .portal-collapse {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-top: 0.85rem;
    }
    .portal-navbar .portal-collapse.collapse:not(.show) {
        display: none;
    }
    .portal-navbar .portal-collapse.collapsing {
        display: flex;
        overflow: hidden;
    }
    .portal-navbar-inner {
        flex-wrap: wrap;
    }
    .portal-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        margin: 0;
    }
    .portal-navbar .nav-link {
        padding: 0.65rem 0.8rem;
    }
    .portal-account {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        padding: 0.75rem 0 0;
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .portal-brand span {
        display: none;
    }
    .portal-brand img {
        height: 34px;
    }
}

/* ==========================================================================
   Stock Tiers - the same stock counted in each way it is packed, e.g.
   9,800 Each / 700 Single Pack / 116 Carton. Every figure is derived from
   the one base quantity, so these are views of one number, not four.
   ========================================================================== */

.stock-warehouse {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--mcq-gray-100);
}

.stock-warehouse:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stock-total {
    padding: 0.85rem 1rem;
    background: var(--mcq-gray-50);
    border-radius: var(--radius-md);
}

.stock-tier-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.stock-tier {
    flex: 1 1 0;
    min-width: 92px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-md);
    background: #fff;
}

.stock-tier.is-empty {
    background: var(--mcq-gray-50);
    border-style: dashed;
}

.stock-tier.is-empty .stock-tier-value {
    color: var(--mcq-gray-400);
}

.stock-tier-value {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--mcq-gray-900);
}

.stock-tier-label {
    font-size: 0.75rem;
    color: var(--mcq-gray-600);
    margin-top: 0.1rem;
}

.stock-tier-meta {
    font-size: 0.68rem;
    color: var(--mcq-gray-400);
    margin-top: 0.1rem;
}

/* ==========================================================================
   Info Rows - icon + label + value, for read-only detail/profile cards
   (e.g. a client's Overview tab). .info-grid arranges rows two-up on wider
   screens; a bare .info-row stacks normally with no wrapper needed.
   ========================================================================== */

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.5rem;
}

@media (max-width: 575.98px) {
    .info-grid { grid-template-columns: 1fr; }
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--mcq-gray-100);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--mcq-gray-50);
    color: var(--mcq-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.info-row-body {
    min-width: 0;
}

.info-row-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mcq-gray-400);
    margin-bottom: 0.15rem;
}

.info-row-value {
    font-size: 0.875rem;
    color: var(--mcq-gray-800);
    font-weight: 500;
    word-break: break-word;
}

.info-row-value a {
    color: var(--mcq-primary);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--mcq-gray-700);
    margin-bottom: 0.375rem;
}

.form-control, .form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--mcq-gray-300);
    font-size: 0.875rem;
    padding: 0.55rem 0.8rem;
    transition: all var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    border-color: var(--mcq-primary);
    box-shadow: 0 0 0 3px var(--mcq-primary-bg);
}

.form-control.is-invalid {
    border-color: var(--mcq-danger);
}

.invalid-feedback {
    font-size: 0.75rem;
}

/* Numbered step badge for multi-card intake forms (e.g. New/Edit Client) */
.form-step-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.form-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mcq-primary-bg);
    color: var(--mcq-primary);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Nested panel that reveals conditionally-relevant fields (e.g. a funding
   type's specific number/managed-by/contact fields) - visually set apart
   from its parent card so it reads as "extra detail for what you just
   picked", not as another top-level section. */
.form-subpanel {
    background: var(--mcq-gray-50);
    border: 1px solid var(--mcq-gray-200);
    border-left: 3px solid var(--mcq-primary-light);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-top: 0.9rem;
}

.form-subpanel-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mcq-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.85rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: 0.55rem 1.05rem;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--mcq-btn-bg);
    border-color: var(--mcq-btn-bg);
    color: var(--mcq-btn-ink);
}

.btn-primary:hover {
    background: var(--mcq-btn-hover);
    border-color: var(--mcq-btn-hover);
    color: var(--mcq-btn-ink);
    transform: translateY(-1px);
    /* Neutral rather than tinted, so the lift still reads correctly when the
       button colour is changed to something outside the blue family. */
    box-shadow: 0 6px 16px rgba(15, 32, 41, 0.28);
}

.btn-outline-primary {
    color: var(--mcq-btn-bg);
    border-color: var(--mcq-btn-bg);
}

.btn-outline-primary:hover {
    background: var(--mcq-btn-bg);
    border-color: var(--mcq-btn-bg);
    color: var(--mcq-btn-ink);
    transform: translateY(-1px);
}

/* Premium accent button - for standout CTAs (Connect, Invite) */
.btn-accent {
    background: var(--mcq-accent);
    border-color: var(--mcq-accent);
    color: #fff;
}

.btn-accent:hover {
    background: var(--mcq-accent-dark);
    border-color: var(--mcq-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(134, 134, 178, 0.32);
}

.btn-sm {
    font-size: 0.8125rem;
    padding: 0.3rem 0.7rem;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 3.25rem 1.5rem;
    color: var(--mcq-gray-500);
}

.empty-state i {
    font-size: 2.75rem;
    color: var(--mcq-gray-300);
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mcq-gray-700);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.875rem;
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    margin: 0;
}

.page-link {
    font-size: 0.8125rem;
    border-radius: var(--radius-md) !important;
    margin: 0 2px;
    border: 1px solid var(--mcq-gray-200);
    color: var(--mcq-gray-600);
    padding: 0.375rem 0.75rem;
}

.page-link:hover {
    background: var(--mcq-primary-bg);
    border-color: var(--mcq-primary);
    color: var(--mcq-primary);
}

.page-item.active .page-link {
    background: var(--mcq-primary);
    border-color: var(--mcq-primary);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.nav-tabs {
    border-bottom: 2px solid var(--mcq-gray-200);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--mcq-gray-500);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem;
    transition: all var(--transition-fast);
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--mcq-gray-300);
    color: var(--mcq-gray-700);
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--mcq-primary);
    color: var(--mcq-primary);
    font-weight: 600;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    border: none;
}

.alert-success {
    background: var(--mcq-success-bg);
    color: var(--mcq-success);
}

.alert-danger {
    background: var(--mcq-danger-bg);
    color: var(--mcq-danger);
}

.alert-warning {
    background: var(--mcq-warning-bg);
    color: var(--mcq-warning);
}

.alert-info {
    background: var(--mcq-info-bg);
    color: var(--mcq-info);
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--mcq-gray-100);
    padding: 1.25rem 1.5rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1.125rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--mcq-gray-100);
    padding: 1rem 1.5rem;
}

/* ==========================================================================
   Auth Pages
   ========================================================================== */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 900px 500px at 20% 0%, rgba(100, 141, 167, 0.28), transparent 60%),
        linear-gradient(135deg, var(--mcq-secondary) 0%, #4a6d84 55%, #3a5568 100%);
    padding: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.auth-header {
    text-align: center;
    padding: 2.25rem 2rem 1rem;
}

.auth-header .auth-logo {
    margin-bottom: 0.75rem;
}

.auth-header .auth-logo img {
    max-width: 240px;
    width: 100%;
    height: auto;
}

.auth-header h1 {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--mcq-gray-900);
    margin-bottom: 0.25rem;
}

.auth-header p {
    font-size: 0.875rem;
    color: var(--mcq-gray-500);
}

.auth-body {
    padding: 1.5rem 2rem 2rem;
}

.auth-footer {
    text-align: center;
    padding: 1.5rem 2rem;
    background: var(--mcq-gray-50);
    border-top: 1px solid var(--mcq-gray-100);
    font-size: 0.8125rem;
    color: var(--mcq-gray-500);
}

/* ==========================================================================
   Integrations - connect cards & provider pages
   ========================================================================== */

.provider-card {
    background: #fff;
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.provider-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.provider-card .provider-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: var(--mcq-primary-bg);
    color: var(--mcq-primary);
}

.provider-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mcq-gray-900);
}

.provider-card p.desc {
    color: var(--mcq-gray-500);
    font-size: 0.88rem;
    margin: 0;
    flex-grow: 1;
}

.copy-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--mcq-gray-50);
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
}

.copy-field code {
    flex: 1;
    font-size: 0.78rem;
    color: var(--mcq-gray-700);
    overflow-x: auto;
    white-space: nowrap;
}

.copy-field button {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--mcq-primary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}

.step-list {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-list li {
    counter-increment: step;
    position: relative;
    padding-left: 2.35rem;
    margin-bottom: 1.1rem;
    font-size: 0.9rem;
    color: var(--mcq-gray-700);
}

.step-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -0.05rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--mcq-primary-bg);
    color: var(--mcq-primary);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    /* Rail-collapse is a desktop concept only - a leftover collapsed state
       from a previous desktop session must never carry into the mobile
       off-canvas drawer, so undo every collapsed-mode override here. */
    html.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
    }
    html.sidebar-collapsed .sidebar-header {
        justify-content: center;
    }
    /* The drawer is full width here, so the wordmark fits again. */
    html.sidebar-collapsed .brand-logo {
        display: block;
    }
    html.sidebar-collapsed .brand-logo-mark {
        display: none;
    }
    html.sidebar-collapsed .sidebar-nav .nav-link {
        justify-content: flex-start;
    }
    html.sidebar-collapsed .sidebar-nav .nav-link span,
    html.sidebar-collapsed .sidebar-nav .nav-link .badge,
    html.sidebar-collapsed .sidebar-nav .nav-link .submenu-caret,
    html.sidebar-collapsed .nav-divider span,
    html.sidebar-collapsed .sidebar-submenu,
    html.sidebar-collapsed .user-details {
        display: revert;
    }
    html.sidebar-collapsed .user-info {
        justify-content: flex-start;
    }
    html.sidebar-collapsed .user-info .btn {
        display: inline-flex;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1049;
        backdrop-filter: blur(4px);
    }

    .sidebar-overlay.show {
        display: block;
    }
}

@media (max-width: 575.98px) {
    .content-wrapper {
        padding: 1rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-toolbar {
        flex-direction: column;
    }

    .table-toolbar .search-box {
        max-width: 100%;
    }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: all var(--transition-normal);
}

/* Animation for page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .animate-in { animation: none; }
    * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Address Autocomplete - suggestions under any field carrying
   data-address-autocomplete. Falls back to a plain text box when Mapbox is
   not configured, so these rules simply never appear in that case.
   ========================================================================== */

.address-autocomplete {
    position: relative;
}

.address-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--mcq-paper);
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.address-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.6rem;
    font-size: 0.8125rem;
    color: var(--mcq-gray-800);
    line-height: 1.35;
}

.address-suggestion:hover,
.address-suggestion.is-active {
    background: var(--mcq-primary-bg);
    color: var(--mcq-primary-darker);
}

/* ==========================================================================
   Provider Profile - summary tiles and the bulk catalogue editor
   ========================================================================== */

.provider-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    background: var(--mcq-paper);
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.provider-tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.provider-tile-icon {
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}

.provider-tile-value {
    font-family: var(--font-data);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mcq-gray-900);
}

.provider-tile-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mcq-gray-500);
    margin-top: 0.2rem;
}

/* A ticked row is tinted so the selected set reads at a glance down a long
   product list, rather than having to scan the checkbox column. */
#catalogTable tbody tr.is-selected {
    background: var(--mcq-primary-bg);
}

#catalogTable tbody tr.is-selected td {
    background: transparent;
}

/* Order form: a row with a quantity is tinted, and the submit bar sticks so
   the total stays in view while scrolling a long catalogue. */
#orderTable tbody tr.is-selected { background: var(--mcq-primary-bg); }
#orderTable tbody tr.is-selected td { background: transparent; }

.order-submit-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--mcq-paper);
    border-top: 1px solid var(--mcq-gray-200);
    padding: 0.9rem 0;
    margin-bottom: 1rem;
}

/* Client match on the provider order form. Same shape as the address
   suggestions, but each row carries a second line naming where the client
   came from, so a linked client and one the provider added are told apart. */
.client-match { position: relative; }

.client-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--mcq-paper);
    border: 1px solid var(--mcq-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.client-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.6rem;
    line-height: 1.3;
}

.client-suggestion:hover,
.client-suggestion.is-active {
    background: var(--mcq-primary-bg);
}

.client-suggestion-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mcq-gray-800);
}

.client-suggestion-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--mcq-gray-500);
}

/* ==========================================================================
   Pending Badges - a count that keeps drawing attention until the work is
   cleared. The pulse is slow and opacity-only, so it reads as "still
   waiting" rather than flashing, and it stops entirely for anyone who has
   asked their system to reduce motion.
   ========================================================================== */

.nav-badge {
    margin-left: auto;
    min-width: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--mcq-danger-vivid);
    color: #ffffff;
    font-family: var(--font-data);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
    flex-shrink: 0;
}

.nav-badge.is-pending,
.topbar-icon-badge.is-pending {
    animation: mcq-pending-pulse 1.6s ease-in-out infinite;
}

@keyframes mcq-pending-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-badge.is-pending,
    .topbar-icon-badge.is-pending {
        animation: none;
    }
}

/* The collapsed rail has no room for a count beside the label, so it shows a
   dot on the icon instead of hiding the signal altogether. */
.sidebar-collapsed .sidebar .nav-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    min-width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.sidebar-collapsed .sidebar .nav-link {
    position: relative;
}

/* A headline figure that still needs action pulses in step with the sidebar
   badge, so the dashboard and the menu tell the same story. */
.stat-value.is-pending {
    animation: mcq-pending-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .stat-value.is-pending { animation: none; }
}

/* The tiles are links now; keep them looking like cards, not link text. */
a.stat-card:hover { text-decoration: none; }

/* ==========================================================================
   Order Delivery Steps - the journey an order takes, shown on the page
   rather than hidden behind a dialog.
   ========================================================================== */

.order-steps {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.order-steps li {
    position: relative;
    flex: 1;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--mcq-gray-500);
}

/* The connecting line sits behind the dots and stops at the last step. */
.order-steps li::before {
    content: '';
    position: absolute;
    top: 0.9rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--mcq-gray-200);
    z-index: 0;
}

.order-steps li:first-child::before { display: none; }

.order-step-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 auto 0.35rem;
    border-radius: 50%;
    background: var(--mcq-gray-100);
    border: 2px solid var(--mcq-gray-200);
    color: var(--mcq-gray-500);
    font-size: 0.8rem;
}

.order-steps li.is-done .order-step-dot {
    background: var(--mcq-success-bg);
    border-color: var(--mcq-success);
    color: var(--mcq-success);
}

.order-steps li.is-done::before { background: var(--mcq-success); }

.order-steps li.is-current .order-step-dot {
    background: var(--mcq-primary-dark);
    border-color: var(--mcq-primary-dark);
    color: #ffffff;
}

.order-steps li.is-current .order-step-label {
    color: var(--mcq-primary-darker);
    font-weight: 600;
}

/* An order on hold, cancelled or returned is not progressing, so the whole
   run is dimmed rather than implying it is still on its way. */
.order-steps.is-stalled { opacity: 0.55; }

.order-step-label { display: block; }

/* Provider portal hero: the greeting and the two things a provider comes here
   to do, side by side rather than stacked down the page. */
.portal-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--mcq-primary-bg);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}

.portal-hero h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: var(--mcq-primary-darker);
}

.portal-hero p {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--mcq-gray-600);
}


/* ==========================================================================
   Dotted Date Fields - 15.09.2026 rather than 15/09/2026.

   A native date input takes its separator from the browser locale and cannot
   be restyled, so date-format.js puts a text box in front of each one. The
   native input stays in the page, invisible but rendered, because a picker
   cannot be opened from a display:none field.
   ========================================================================== */

.dotted-date {
    position: relative;
    display: block;
}

/* Inside an input-group the wrapper must not exist as far as layout goes, so
   the text box and the calendar button stay direct children of the group. */
.dotted-date.is-grouped {
    display: contents;
}

.dotted-date-native {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* The group is position:relative already, so the hidden native input anchors
   its picker near the bottom of the field either way. */
.dotted-date-picker {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.15rem 0.25rem;
    line-height: 1;
    color: var(--mcq-gray-500);
    border-radius: var(--radius-sm);
}

.dotted-date-picker:hover {
    color: var(--mcq-primary-dark);
    background: var(--mcq-primary-bg);
}

/* Leave room for the button so a long date never runs under it. */
.dotted-date > input.form-control {
    padding-right: 2rem;
}

/* In a group the button is a normal input-group button, not an overlay. */
.dotted-date.is-grouped .dotted-date-picker {
    position: static;
    transform: none;
    padding: 0.375rem 0.75rem;
}

.dotted-date.is-grouped > input.form-control {
    padding-right: 0.75rem;
}