/**
 * Mauzo components (docs/FACELIFT_PLAN.md §4): Tabler's components restyled to the design
 * system. Colours come from mauzo-tokens.css only.
 */

/* ------------------------------------------------------------------ base & type */
html, body { background: var(--bg); }
body { color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink-strong); }
.page-title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink-strong); }
.card-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink-strong); }
.subheader, .overline { font-size: 10px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
small, .small, .text-secondary.small { font-size: 12px; line-height: 16px; }
code, .font-monospace, kbd { font-family: var(--font-mono); font-size: 13px; }
code { color: var(--ink-strong); background: var(--surface-3); padding: 1px 4px; border-radius: var(--radius-sm); }
.text-secondary, .text-muted { color: var(--muted) !important; }
a { color: var(--ink-strong); text-underline-offset: 2px; }
a:hover { color: var(--ink-strong); }
.h1, .h2, .h3, .kpi, td, th, .card .h1, .card .h2 { font-variant-numeric: tabular-nums; }
.kpi { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink-strong); }
.kpi-lg { font-size: 32px; line-height: 40px; font-weight: 600; color: var(--ink-strong); }

/* Icons: outline, stroke 1.75, muted at rest. */
.icon { stroke-width: 1.75; }
.nav-link .icon, .dropdown-item-icon { color: var(--muted); }
.nav-link.active .icon, .nav-item.active > .nav-link .icon { color: var(--ink-strong); }

/* Focus: strong border plus a soft ring, everywhere. */
:focus-visible { outline: none; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, a:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
    border-color: var(--ink-strong) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; outline: none;
}

/* ------------------------------------------------------------------ buttons */
.btn { --tblr-btn-font-weight: 500; min-height: 36px; border-radius: var(--radius-md); font-weight: 500;
    --tblr-btn-bg: var(--surface); --tblr-btn-border-color: var(--border); --tblr-btn-color: var(--ink-strong);
    --tblr-btn-hover-bg: var(--surface-2); --tblr-btn-hover-border-color: var(--border-strong); --tblr-btn-hover-color: var(--ink-strong);
    --tblr-btn-active-bg: var(--surface-3); --tblr-btn-active-border-color: var(--border-strong); --tblr-btn-active-color: var(--ink-strong);
    box-shadow: none; }
.btn-sm, .btn-group-sm > .btn { min-height: 28px; }
.btn-lg, .btn-group-lg > .btn { min-height: 44px; }
.btn-icon { min-width: 36px; }

/* Primary is inverted; the coloured "do it" buttons the app used before become primary. */
.btn-primary, .btn-success, .btn-green, .btn-info, .btn-azure, .btn-blue, .btn-teal, .btn-cyan, .btn-indigo, .btn-purple, .btn-dark {
    --tblr-btn-bg: var(--primary); --tblr-btn-border-color: var(--primary); --tblr-btn-color: var(--primary-ink);
    --tblr-btn-hover-bg: var(--primary-hover); --tblr-btn-hover-border-color: var(--primary-hover); --tblr-btn-hover-color: var(--primary-ink);
    --tblr-btn-active-bg: var(--primary-hover); --tblr-btn-active-border-color: var(--primary-hover); --tblr-btn-active-color: var(--primary-ink);
    --tblr-btn-disabled-bg: var(--primary); --tblr-btn-disabled-border-color: var(--primary); --tblr-btn-disabled-color: var(--primary-ink);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-dark, .btn-outline-azure, .btn-outline-green, .btn-outline-blue, .btn-white, .btn-light, .btn-secondary {
    --tblr-btn-bg: var(--surface); --tblr-btn-border-color: var(--border); --tblr-btn-color: var(--ink-strong);
    --tblr-btn-hover-bg: var(--surface-2); --tblr-btn-hover-border-color: var(--border-strong); --tblr-btn-hover-color: var(--ink-strong);
    --tblr-btn-active-bg: var(--surface-3); --tblr-btn-active-color: var(--ink-strong);
}
.btn-ghost-primary, .btn-ghost-secondary, .btn-link, .btn-ghost-dark {
    --tblr-btn-bg: transparent; --tblr-btn-border-color: transparent; --tblr-btn-color: var(--ink-strong);
    --tblr-btn-hover-bg: var(--surface-3); --tblr-btn-hover-border-color: transparent; --tblr-btn-hover-color: var(--ink-strong);
}
/* Danger: outlined; solid only inside a confirmation dialog. */
.btn-danger, .btn-outline-danger, .btn-red, .btn-ghost-danger, .btn-warning, .btn-orange, .btn-yellow {
    --tblr-btn-bg: var(--surface); --tblr-btn-border-color: var(--danger); --tblr-btn-color: var(--danger);
    --tblr-btn-hover-bg: var(--danger-soft); --tblr-btn-hover-border-color: var(--danger); --tblr-btn-hover-color: var(--danger);
    --tblr-btn-active-bg: var(--danger-soft); --tblr-btn-active-color: var(--danger);
}
.btn-warning, .btn-orange, .btn-yellow { --tblr-btn-border-color: var(--warning); --tblr-btn-color: var(--warning); --tblr-btn-hover-bg: var(--warning-soft); --tblr-btn-hover-border-color: var(--warning); --tblr-btn-hover-color: var(--warning); }
.btn-ghost-danger { --tblr-btn-border-color: transparent; }
.modal .btn-danger { --tblr-btn-bg: var(--danger); --tblr-btn-color: #fff; --tblr-btn-hover-bg: var(--danger); --tblr-btn-hover-color: #fff; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); background: transparent; }
.card-body { padding: 20px; }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--border); }
.card-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.card.bg-dark, .card.bg-primary { background: var(--primary) !important; color: var(--primary-ink) !important; border-color: var(--primary); }
.card.bg-dark .subheader, .card.bg-primary .subheader, .card.bg-dark .text-white-50 { color: color-mix(in srgb, var(--primary-ink) 65%, transparent) !important; }
.card.bg-dark .h1, .card.bg-dark .h2, .card.bg-primary .h1 { color: var(--primary-ink); }
.card-status-top, .card-status-start { background: var(--primary); }

/* ------------------------------------------------------------------ badges */
.badge { height: 20px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; }
.badge:empty { height: 8px; width: 8px; padding: 0; border-radius: 50%; }
/* Status colours are soft fills with strong text. */
.badge.bg-green-lt, .badge.bg-success-lt, .badge.bg-green, .badge.bg-success { background: var(--success-soft) !important; color: var(--success) !important; }
.badge.bg-yellow-lt, .badge.bg-warning-lt, .badge.bg-orange-lt, .badge.bg-yellow, .badge.bg-warning, .badge.bg-orange { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.bg-red-lt, .badge.bg-danger-lt, .badge.bg-red, .badge.bg-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.bg-azure-lt, .badge.bg-info-lt, .badge.bg-blue-lt, .badge.bg-azure, .badge.bg-info, .badge.bg-cyan-lt { background: var(--info-soft) !important; color: var(--info) !important; }
.badge.bg-secondary-lt, .badge.bg-secondary, .badge.bg-light, .badge.bg-dark-lt, .badge.bg-muted-lt { background: var(--surface-3) !important; color: var(--ink) !important; }
.badge.bg-purple-lt, .badge.bg-purple, .badge.bg-indigo-lt, .badge.bg-pink-lt, .badge.bg-teal-lt, .badge.bg-lime-lt { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge.bg-primary, .badge.bg-dark { background: var(--primary) !important; color: var(--primary-ink) !important; }
.badge.text-white, .badge.text-white-fg { color: inherit; }
/* Status dots (a badge used as a dot keeps its colour). */
.badge:empty.bg-green, .badge.p-1.bg-green { background: var(--success) !important; }
.badge:empty.bg-red, .badge.p-1.bg-red { background: var(--danger) !important; }
.badge:empty.bg-yellow, .badge.p-1.bg-yellow { background: var(--warning) !important; }
.badge:empty.bg-azure, .badge.p-1.bg-azure { background: var(--info) !important; }
.badge:empty.bg-secondary, .badge.p-1.bg-secondary { background: var(--faint) !important; }
.badge:empty.bg-purple, .badge.p-1.bg-purple { background: var(--vendor-purple) !important; }

/* ------------------------------------------------------------------ avatars */
.avatar { background-color: var(--surface-3); color: var(--ink-strong); font-weight: 600; box-shadow: none; }
.avatar[class*="bg-"][class*="-lt"] { background: var(--surface-3) !important; color: var(--ink-strong) !important; }

/* ------------------------------------------------------------------ tables */
.table { --tblr-table-bg: transparent; --tblr-table-hover-bg: var(--surface-2); color: var(--ink); }
.table thead th, .table > :not(caption) > * > th { background: var(--surface-2); color: var(--muted); font-size: 10px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table > :not(caption) > * > td { border-bottom-color: var(--border); }
.table tbody tr:hover > td { background: var(--surface-2); }
.card-table td, .card-table th { vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --tblr-table-accent-bg: transparent; }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ forms */
.form-control, .form-select { min-height: 36px; border-color: var(--border); border-radius: var(--radius-md); background-color: var(--surface); color: var(--ink-strong); box-shadow: none; }
.form-control-sm, .form-select-sm { min-height: 28px; }
.form-control::placeholder { color: var(--faint); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger); }
.invalid-feedback { color: var(--danger); }
.form-label { font-weight: 500; color: var(--ink-strong); }
.form-hint { color: var(--muted); font-size: 12px; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-switch .form-check-input:checked { background-color: var(--primary); }
.input-group-text { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.form-selectgroup-input:checked + .form-selectgroup-label { border-color: var(--ink-strong); color: var(--ink-strong); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-strong); }
.form-selectgroup-label { border-color: var(--border); background: var(--surface); }

/* ------------------------------------------------------------------ tabs, pills, segmented */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ink-strong); border-bottom-color: var(--primary); background: transparent; }
.nav-pills .nav-link { color: var(--muted); }
.nav-pills .nav-link.active { background: var(--primary); color: var(--primary-ink); }
.btn-group > .btn-check:checked + .btn, .btn-group > .btn.active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.mz-segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-3); border-radius: var(--radius-md); }
.mz-segmented > button, .mz-segmented > a, .mz-segmented > label { border: 0; background: transparent; color: var(--muted); padding: 4px 12px; border-radius: calc(var(--radius-md) - 2px); font-weight: 500; font-size: 13px; text-decoration: none; cursor: pointer; }
.mz-segmented > .active, .mz-segmented > [aria-pressed="true"], .mz-segmented > input:checked + label { background: var(--surface); color: var(--ink-strong); box-shadow: var(--shadow-sm); }

/* ------------------------------------------------------------------ steps */
.steps { --tblr-steps-color: var(--primary); }
.step-item.active::before, .steps-counter .step-item.active::before { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-ink) !important; }
.step-item::after { background: var(--border) !important; }

/* ------------------------------------------------------------------ progress */
.progress { background: var(--surface-3); }
.progress-bar.bg-primary, .progress-bar:not([class*="bg-"]) { background: var(--primary) !important; }

/* ------------------------------------------------------------------ alerts, toasts */
.alert { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--ink); box-shadow: var(--shadow-card); }
.alert-success { border-left: 3px solid var(--success); }
.alert-success .alert-icon, .alert-success strong { color: var(--success); }
.alert-info { border-left: 3px solid var(--info); }
.alert-warning { border-left: 3px solid var(--warning); }
.alert-warning .alert-icon { color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--ink-strong); }
.alert-danger .alert-icon { color: var(--danger); }
.toast { border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); border: 1px solid var(--border); }

/* ------------------------------------------------------------------ menus, modals */
.dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 4px; }
.dropdown-item { min-height: 36px; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); color: var(--ink-strong); padding: 6px 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-3); color: var(--ink-strong); }
.dropdown-item.active, .dropdown-item:active { background: var(--surface-3); color: var(--ink-strong); font-weight: 600; }
.dropdown-header { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.dropdown-divider { border-color: var(--border); margin: 4px 0; }
.modal-content { border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); }
.modal-footer { background: var(--surface-2); border-top: 1px solid var(--border); }
.modal-backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.modal-backdrop.show { opacity: 1; }

/* ------------------------------------------------------------------ pagination */
.page-link { color: var(--ink); border-color: var(--border); border-radius: var(--radius-md); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }

/* ------------------------------------------------------------------ list groups */
.list-group-item { border-color: var(--border); background: var(--surface); color: var(--ink); }
.list-group-item-action:hover { background: var(--surface-2); }

/* ------------------------------------------------------------------ empty state */
.empty-img img, .empty-icon { opacity: .9; }
.empty-title { color: var(--ink-strong); font-size: 16px; font-weight: 600; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ================================================================== app shell */
/* Sidebar: on the surface, a hairline border; floating = inset, rounded, lifted. */
.mz-sidebar { background: var(--surface) !important; color: var(--ink); border-right: 1px solid var(--border); box-shadow: none; scrollbar-width: thin; }
.mz-sidebar .navbar-brand { padding: 14px 16px !important; justify-content: flex-start !important; }
.mz-sidebar .brand-text { font-size: 18px; }
.mz-sidebar .navbar-nav { padding: 0 8px; }
.mz-sidebar .nav-link { color: var(--ink); border-radius: var(--radius-md); min-height: 36px; padding: 6px 10px !important; font-weight: 500; }
.mz-sidebar .nav-link:hover { background: var(--surface-3); color: var(--ink-strong); }
.mz-sidebar .nav-item.active > .nav-link, .mz-sidebar .nav-link.active { background: var(--surface-3); color: var(--ink-strong); font-weight: 600; }
.mz-sidebar .nav-item.active > .nav-link::after { display: none; }
.mz-sidebar .nav-link-icon { color: var(--muted); width: 20px; margin-right: 8px; }
.mz-sidebar .nav-link-icon .icon { width: 18px; height: 18px; }
.mz-sidebar .nav-item.active .nav-link-icon { color: var(--ink-strong); }
.mz-sidebar .dropdown-menu { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 4px 28px !important; position: static; }
.mz-sidebar .dropdown-item { color: var(--muted); min-height: 32px; padding: 4px 10px; font-weight: 500; }
.mz-sidebar .dropdown-item:hover { color: var(--ink-strong); background: var(--surface-3); }
.mz-sidebar .dropdown-item.active { color: var(--ink-strong); background: transparent; font-weight: 600; box-shadow: inset 2px 0 0 var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.mz-sidebar .dropdown-divider { margin: 4px 10px; }
.mz-sidebar .dropdown-toggle::after { border-color: var(--faint); }
.mz-sidebar .badge { margin-left: auto; }
.mz-nav-section { list-style: none; font-size: 10px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--muted); padding: 14px 10px 4px; }
.mz-sidebar .nav-link.bg-success { background: var(--primary) !important; color: var(--primary-ink) !important; animation: none !important; }
.mz-sidebar .nav-link.bg-success .icon, .mz-sidebar .nav-link.bg-success .nav-link-icon { color: var(--primary-ink) !important; }
.mz-sidebar .nav-link.bg-success .badge { background: var(--primary-ink) !important; color: var(--primary) !important; }

/* Top bar */
.mz-topbar { height: var(--navbar-height); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1020; }
.mz-search { position: relative; flex: 1 1 auto; max-width: 420px; display: flex; align-items: center; }
.mz-search > .icon { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.mz-search input { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-strong); padding: 0 44px 0 34px; font-size: 14px; }
.mz-search input:focus { outline: none; border-color: var(--ink-strong); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface); }
.mz-search kbd { position: absolute; right: 8px; background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11px; padding: 0 5px; box-shadow: none; }
.mz-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mz-icon-btn, .mz-business-btn, .mz-avatar-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-md); padding: 0; cursor: pointer; }
.mz-icon-btn:hover, .mz-business-btn:hover, .mz-avatar-btn:hover { background: var(--surface-3); color: var(--ink-strong); }
.mz-icon-btn .icon { width: 18px; height: 18px; }
.mz-square-avatar { width: 24px; height: 24px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex: 0 0 auto; }
.mz-square-avatar-sm { width: 20px; height: 20px; font-size: 9px; }
.mz-menu .dropdown-item .icon { color: var(--muted); width: 18px; height: 18px; flex: 0 0 auto; }
.mz-menu .dropdown-item[aria-current="true"] { font-weight: 600; }
.mz-hint { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.mz-profile-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.mz-profile-head .avatar { width: 32px; height: 32px; }

/* Floating (default): sidebar and top bar inset from the edges, rounded, lifted. */
@media (min-width: 992px) {
    [data-nav="floating"] .mz-sidebar { top: var(--float-gap); left: var(--float-gap); bottom: var(--float-gap); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); height: auto; }
    [data-nav="floating"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: calc(var(--sidebar-width) + var(--float-gap) * 2); }
    [data-nav="floating"] .mz-topbar { margin: var(--float-gap) var(--float-gap) 0 0; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); top: var(--float-gap); }
    [data-nav="attached"] .mz-sidebar { border-radius: 0; box-shadow: none; }

    /* Folded: an icon rail. Folded · hover: the rail opens over the page on hover (no reflow). */
    [data-sidebar="folded"] .mz-sidebar, [data-sidebar="hover"] .mz-sidebar { width: var(--sidebar-folded); overflow-x: hidden; transition: width .16s ease; }
    [data-sidebar="folded"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper, [data-sidebar="hover"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: var(--sidebar-folded); }
    [data-nav="floating"][data-sidebar="folded"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper, [data-nav="floating"][data-sidebar="hover"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: calc(var(--sidebar-folded) + var(--float-gap) * 2); }
    [data-sidebar="folded"] .mz-sidebar .nav-link-title, [data-sidebar="folded"] .mz-sidebar .mz-nav-section, [data-sidebar="folded"] .mz-sidebar .dropdown-menu, [data-sidebar="folded"] .mz-sidebar .brand-text, [data-sidebar="folded"] .mz-sidebar .dropdown-toggle::after, [data-sidebar="folded"] .mz-sidebar .badge,
    [data-sidebar="hover"] .mz-sidebar:not(:hover) .nav-link-title, [data-sidebar="hover"] .mz-sidebar:not(:hover) .mz-nav-section, [data-sidebar="hover"] .mz-sidebar:not(:hover) .dropdown-menu, [data-sidebar="hover"] .mz-sidebar:not(:hover) .brand-text, [data-sidebar="hover"] .mz-sidebar:not(:hover) .dropdown-toggle::after, [data-sidebar="hover"] .mz-sidebar:not(:hover) .badge { display: none !important; }
    [data-sidebar="folded"] .mz-sidebar .nav-link-icon, [data-sidebar="hover"] .mz-sidebar:not(:hover) .nav-link-icon { margin-right: 0; }
    [data-sidebar="hover"] .mz-sidebar:hover { width: var(--sidebar-width); box-shadow: var(--shadow-pop); }
}

/* Width */
[data-width="default"] .page-wrapper .container-xl { max-width: var(--container-default); }
[data-width="fluid"] .page-wrapper .container-xl { max-width: none; }
.page-body { margin-top: var(--space-4); }
.page-header { margin-top: var(--space-4); }

/* Phones: the sidebar is a drawer under the top bar. */
@media (max-width: 991.98px) {
    .mz-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
    .mz-topbar { padding: 0 8px; }
}

/* Settings */
.mz-settings-nav .mz-nav-section { padding-left: 8px; }
.mz-settings-link { display: block; padding: 7px 10px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 500; }
.mz-settings-link:hover { background: var(--surface-3); color: var(--ink-strong); text-decoration: none; }
.mz-settings-link.active { background: var(--surface-3); color: var(--ink-strong); font-weight: 600; }

/* Ticks and switches stay visible on the inverted (white) primary in dark mode. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l3 3l5-6'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23111827'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23111827'/%3e%3c/svg%3e"); }

/* Show/hide by theme, with the theme on <html> (Tabler looked at <body>). */
[data-bs-theme="dark"] .hide-theme-dark, [data-bs-theme="light"] .hide-theme-light { display: none !important; }
[data-bs-theme="dark"] .hide-theme-light, [data-bs-theme="light"] .hide-theme-dark { display: inline-flex; }

/* Sidebar active state: no Tabler accent bar, no filled sub-item. */
.mz-sidebar .nav-item.active, .mz-sidebar .nav-item.active > .nav-link { border: 0 !important; }
.mz-sidebar .nav-item::after, .mz-sidebar .nav-item.active::after, .mz-sidebar .nav-item.active > .nav-link::before { display: none !important; content: none !important; }
.mz-sidebar .navbar-nav .nav-item { border-left: 0 !important; }
.mz-sidebar .dropdown-menu .dropdown-item.active, .mz-sidebar .dropdown-menu .dropdown-item:active { background: transparent !important; }
.mz-sidebar .dropdown-menu .dropdown-divider { display: none; }
html[data-bs-theme="dark"] body .hide-theme-light, html[data-bs-theme="light"] body .hide-theme-dark { display: inline-flex !important; }
html[data-bs-theme="dark"] body .hide-theme-dark, html[data-bs-theme="light"] body .hide-theme-light { display: none !important; }

/* Numbers are ink; only gain (success) and loss (danger) keep a colour. */
.h1[class*="text-"]:not(.text-green):not(.text-success):not(.text-red):not(.text-danger):not(.text-white),
.h2[class*="text-"]:not(.text-green):not(.text-success):not(.text-red):not(.text-danger):not(.text-white),
.h3[class*="text-"]:not(.text-green):not(.text-success):not(.text-red):not(.text-danger):not(.text-white),
.h4[class*="text-"]:not(.text-green):not(.text-success):not(.text-red):not(.text-danger):not(.text-white),
.card-title[class*="text-"]:not(.text-green):not(.text-red),
.kpi[class*="text-"] { color: var(--ink-strong) !important; }
.text-blue, .text-azure, .text-cyan, .text-indigo, .text-purple, .text-teal, .text-primary { color: var(--ink-strong) !important; }
.text-yellow, .text-orange, .text-warning { color: var(--warning) !important; }

/* Attribute badges (type, channel, one-time) are outlines. */
.badge.bg-blue, .badge.bg-cyan, .badge.bg-teal, .badge.bg-indigo, .badge.bg-pink, .badge.bg-lime, .badge.bg-blue-lt { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Sidebar open / close button: top right of the sidebar; centred on the folded rail. */
.mz-sidebar > .container-fluid { position: relative; }
.mz-sidebar-toggle { position: absolute; top: 12px; right: 10px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted); align-items: center; justify-content: center; cursor: pointer; }
.mz-sidebar-toggle:hover { background: var(--surface-3); color: var(--ink-strong); }
.mz-sidebar-toggle .mz-chev { transition: transform .16s ease; transform-origin: 14px 12px; }
@media (min-width: 992px) {
    [data-sidebar="folded"] .mz-sidebar-toggle, [data-sidebar="hover"] .mz-sidebar:not(:hover) .mz-sidebar-toggle { position: static; display: flex !important; margin: 12px auto 4px; }
    [data-sidebar="folded"] .mz-sidebar-toggle .mz-chev, [data-sidebar="hover"] .mz-sidebar:not(:hover) .mz-sidebar-toggle .mz-chev { transform: scaleX(-1); }
    /* Closed: the brand stays as its mark (the upward trend), above the open button. */
    [data-sidebar="folded"] .mz-sidebar .navbar-brand, [data-sidebar="hover"] .mz-sidebar:not(:hover) .navbar-brand { order: -1; justify-content: center !important; padding: 14px 0 2px !important; margin: 0; }
    [data-sidebar="folded"] .mz-sidebar .navbar-brand .brand-text, [data-sidebar="hover"] .mz-sidebar:not(:hover) .navbar-brand .brand-text { display: none !important; }
    [data-sidebar="folded"] .mz-sidebar .navbar-brand .brand-icon, [data-sidebar="hover"] .mz-sidebar:not(:hover) .navbar-brand .brand-icon { margin: 0 !important; }
    [data-sidebar="folded"] .mz-sidebar .nav-link, [data-sidebar="hover"] .mz-sidebar:not(:hover) .nav-link { justify-content: center; }
    [data-sidebar="folded"] .mz-sidebar .navbar-nav, [data-sidebar="hover"] .mz-sidebar:not(:hover) .navbar-nav { padding: 0 6px; }
    .mz-sidebar .navbar-brand { padding-right: 48px !important; }
}

/* Fixed-colour utilities follow the theme (views use bg-white / bg-light / text-dark). */
[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-black, [data-bs-theme="dark"] .link-dark { color: var(--ink-strong) !important; }
[data-bs-theme="dark"] .border-white { border-color: var(--border) !important; }
.auth-brand-text, .navbar-brand .brand-text { color: var(--ink-strong) !important; }
/* Sub-items are words only, aligned (one had an icon). */
.mz-sidebar .dropdown-menu .dropdown-item > .icon { display: none; }
@media (max-width: 991.98px) {
    .mz-sidebar > .container-fluid { justify-content: flex-start; gap: 8px; }
    .mz-sidebar .navbar-brand { padding: 10px 0 !important; }
}

/* Sidebar footer: Ecosystem sits at the bottom, under a hairline. */
.mz-sidebar .mz-sidebar-foot { flex: 0 0 auto !important; margin-top: auto; padding: 8px 8px 12px; border-top: 1px solid var(--border); }
.mz-sidebar .mz-foot-sub { font-size: 11px; line-height: 14px; }
@media (min-width: 992px) {
    .mz-sidebar > .container-fluid { min-height: 100%; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .mz-sidebar #sidebar-menu { display: flex !important; flex-direction: column; flex: 1 1 auto; }
    [data-sidebar="folded"] .mz-sidebar .mz-sidebar-foot, [data-sidebar="hover"] .mz-sidebar:not(:hover) .mz-sidebar-foot { padding: 8px 6px 12px; }
}

/* Light/dark switch icons. Own class names: Tabler's .hide-theme-* rules are scoped to body
   and outrank anything keyed on <html>, which hid the sun in dark mode. */
.mz-when-dark { display: none !important; }
.mz-when-light { display: inline-flex !important; }
html[data-bs-theme="dark"] .mz-when-dark { display: inline-flex !important; }
html[data-bs-theme="dark"] .mz-when-light { display: none !important; }
.mz-topbar-products { gap: 2px; align-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--ink-strong); font-weight: 500; }
.mz-topbar-products:hover { background: var(--surface-3); color: var(--ink-strong); }

/* Dark mode: a highlighted card or card header (bg-primary) is a raised surface, not a white
   slab; primary is near-white in dark. */
[data-bs-theme="dark"] .card.bg-primary, [data-bs-theme="dark"] .card-header.bg-primary { background-color: var(--surface-3) !important; color: var(--ink-strong) !important; }
[data-bs-theme="dark"] .card.bg-primary .text-primary-fg, [data-bs-theme="dark"] .card-header.bg-primary.text-white, [data-bs-theme="dark"] .card-header.bg-primary .card-title { color: var(--ink-strong) !important; }

/* Select2 (searchable pickers) on the theme. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { background-color: var(--surface); border-color: var(--border-strong); color: var(--ink-strong); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink-strong); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-dropdown { background-color: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--surface-2); border-color: var(--border); color: var(--ink-strong); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--surface-3); color: var(--ink-strong); }
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected { background-color: var(--surface-2); color: var(--ink-strong); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--surface-3); border-color: var(--border); color: var(--ink-strong); }

/* Sidebar sub-items line up with their parent's label (icon 20px + 8px gap + 10px padding),
   not pushed further right by Tabler's nested-menu padding. */
.mz-sidebar .dropdown-menu { padding-left: 0 !important; }
.mz-sidebar .navbar-nav .dropdown-menu .dropdown-item { padding-left: 38px !important; min-width: 0; }
.mz-sidebar .dropdown-item.active { box-shadow: inset 2px 0 0 var(--brand); }
.mz-sidebar .mz-sidebar-foot .nav-link { cursor: pointer; }

/* Settings menu beside settings pages: stays in view while the page scrolls. */
.mz-settings-rail { position: sticky; top: calc(var(--navbar-height) + 1.5rem); }
.mz-settings-home { display: block; padding: 6px 10px 2px; font-weight: 600; color: var(--ink-strong); text-decoration: none; }
@media (max-width: 767.98px) { .mz-settings-rail { position: static; } .mz-settings-home { display: none; } }

/* Customer avatars: initials on the customer's identity colour. */
.mz-vendor-blue { background: color-mix(in srgb, var(--vendor-blue) 18%, transparent); color: var(--vendor-blue); }
.mz-vendor-purple { background: color-mix(in srgb, var(--vendor-purple) 18%, transparent); color: var(--vendor-purple); }
.mz-vendor-orange { background: color-mix(in srgb, var(--vendor-orange) 18%, transparent); color: var(--vendor-orange); }
.mz-vendor-teal { background: color-mix(in srgb, var(--vendor-teal) 18%, transparent); color: var(--vendor-teal); }
.mz-vendor-pink { background: color-mix(in srgb, var(--vendor-pink) 18%, transparent); color: var(--vendor-pink); }
.mz-vendor-lime { background: color-mix(in srgb, var(--vendor-lime) 18%, transparent); color: var(--vendor-lime); }
.mz-profile-card .avatar-xl { font-weight: 600; font-size: 1.5rem; }

/* Steps: every step reads clearly. Done and current steps are solid; steps ahead are an
   outlined circle with a muted number and label (Tabler's default washed them out). */
.steps .step-item { color: var(--muted); }
.steps-counter .step-item::before { background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--muted) !important; box-shadow: none !important; }
.steps-counter .step-item.active ~ .step-item { color: var(--muted); }
.steps .step-item:has(~ .step-item.active), .steps .step-item.active { color: var(--ink-strong); }
.steps-counter .step-item:has(~ .step-item.active)::before { background: var(--ink-strong) !important; border-color: var(--ink-strong) !important; color: var(--primary-ink) !important; }
.steps .step-item.active::after, .steps .step-item:has(~ .step-item.active)::after { background: var(--ink-strong) !important; }

/* Decorative stamps behind card figures are left out: they carried no information. */
.card-stamp { display: none !important; }

/* A message thread: the sequence down a line. */
.mz-thread { list-style: none; padding-left: 14px; border-left: 2px solid var(--border); }
.mz-thread li { position: relative; padding: 0 0 10px 12px; }
.mz-thread li::before { content: ''; position: absolute; left: -19px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.mz-thread li:last-child { padding-bottom: 0; }

/* The HD logo (views/layouts/_logo.php): wordmark in the text colour, mark in brand red. */
.mz-logo { display: block; color: var(--ink-strong); flex: 0 0 auto; }
.mz-sidebar .mz-brand-link .brand-icon { display: none; }
@media (min-width: 992px) {
    [data-sidebar="folded"] .mz-sidebar .mz-brand-link .brand-icon, [data-sidebar="hover"] .mz-sidebar:not(:hover) .mz-brand-link .brand-icon { display: block !important; }
}
.mz-logo, .mz-logo * { stroke: none !important; }

/* Sidebar open: the logo already carries the mark, so the close button stays out of sight
   until the pointer is over the sidebar (or it has keyboard focus). Closed: always shown. */
@media (min-width: 992px) {
    html[data-sidebar="expanded"] .mz-sidebar-toggle { opacity: 0; transition: opacity .15s ease; }
    html[data-sidebar="expanded"] .mz-sidebar:hover .mz-sidebar-toggle,
    html[data-sidebar="expanded"] .mz-sidebar-toggle:focus-visible { opacity: 1; }
}

/* Brand accents, as on the landing page: red marks what matters (the lead number, money out,
   people, the active place), never whole surfaces. Light and dark read from the same tokens. */
.card { --tblr-card-border-radius: var(--radius-xl); --tblr-card-inner-border-radius: calc(var(--radius-xl) - 1px); border-radius: var(--radius-xl); }
/* Number cards lift to a red-tinted edge on hover; the first in each row carries the soft red
   glow of the landing's featured card. */
.row-cards .card:has(.subheader) { transition: border-color .15s ease; }
.row-cards .card:has(.subheader):hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.row-cards:not(.row-cards ~ .row-cards) > [class*="col"]:first-child > .card:has(.subheader) { background: radial-gradient(120% 100% at 100% 0%, var(--brand-soft), transparent 60%), var(--surface); }
/* People (initials) and money-out chips in the brand red; money in stays green. */
.card .avatar:not([class*="bg-"]):not(:has(img)), .avatar[class*="-lt"]:is(.bg-primary-lt, .bg-red-lt, .bg-danger-lt) { background: var(--brand-soft) !important; color: var(--brand) !important; }
.avatar[class*="-lt"]:is(.bg-green-lt, .bg-success-lt) { background: var(--success-soft) !important; color: var(--success) !important; }
/* Tables: a faint red wash on the row under the pointer; links turn red on hover. */
.table tbody tr:hover > td { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.table tbody a:not(.btn):hover { color: var(--brand); }
/* Active tab and progress use the brand red, as the landing's active tab does. */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { border-bottom-color: var(--brand); }
.progress-bar.bg-primary, .progress-bar:not([class*="bg-"]) { background: var(--brand) !important; }
/* Upsell banner: the landing's featured-plan look. */
.mz-upsell { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: radial-gradient(120% 140% at 100% 0%, var(--brand-soft), transparent 55%), var(--surface); }
.mz-upsell .btn { border-radius: var(--radius-pill); }