/* OneSuite design system - "modern SaaS minimal" pass (Linear/Stripe/Notion
   influenced): flat surfaces with hairline borders instead of heavy
   shadows, one accent color, generous whitespace, tight type scale.
   Layers on top of onesuite-sidebar.css's sidebar and table-header
   tokens; does not redefine them. */

:root {
    /* Bootstrap components (.nav-link and others) set their own font-family
       via var(--bs-body-font-family) directly, not by inheriting the
       computed value from <body> — overriding font-family on body alone
       left those components on Bootstrap's default Roboto. Redefining the
       variable itself fixes it everywhere at once. */
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --surface: #ffffff;
    --surface-2: #f7f8fb;
    --surface-hover: #f2f4f9;
    --border-subtle: #e7eaf2;
    --text-1: #1b2033;
    --text-2: #5c6b8a;
    --text-3: #8b95a8;

    /* Default (Settings) accent — indigo. Each app repaints --accent* via
       body[data-app] below, so sidebar/buttons/badges/focus rings all
       retint automatically without per-component overrides. */
    --accent: #5369f8;
    --accent-hover: #4457e6;
    --accent-subtle: rgba(83, 105, 248, 0.08);

    --danger: #e2434f;
    --danger-subtle: rgba(226, 67, 79, 0.08);
    --success: #1f9d78;
    --success-subtle: rgba(31, 157, 120, 0.1);
    --warning: #c8860a;
    --warning-subtle: rgba(200, 134, 10, 0.1);

    /* Per-app identity hues — used both for the accent retint below and
       directly (via data-tile-color) on app-launcher / dashboard tiles so
       every app is visually recognizable at a glance, Workspace-suite style. */
    --hue-settings: #5369f8;
    --hue-settings-hover: #4457e6;
    --hue-settings-subtle: rgba(83, 105, 248, 0.1);
    --hue-hrm: #0f9d70;
    --hue-hrm-hover: #0c8760;
    --hue-hrm-subtle: rgba(15, 157, 112, 0.1);
    --hue-crm: #e34e83;
    --hue-crm-hover: #cc3d70;
    --hue-crm-subtle: rgba(227, 78, 131, 0.1);
    --hue-inventory: #d97a15;
    --hue-inventory-hover: #bf680d;
    --hue-inventory-subtle: rgba(217, 122, 21, 0.1);
    --hue-sales: #7c5cfc;
    --hue-sales-hover: #6a48ea;
    --hue-sales-subtle: rgba(124, 92, 252, 0.1);
    --hue-finance: #0b8aa6;
    --hue-finance-hover: #08758d;
    --hue-finance-subtle: rgba(11, 138, 166, 0.1);
    --hue-tms: #2f7dd1;
    --hue-tms-hover: #2469b5;
    --hue-tms-subtle: rgba(47, 125, 209, 0.1);

    --radius: 10px;
    --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.04);
}

body[data-app="hrm"] { --accent: var(--hue-hrm); --accent-hover: var(--hue-hrm-hover); --accent-subtle: var(--hue-hrm-subtle); }
body[data-app="crm"] { --accent: var(--hue-crm); --accent-hover: var(--hue-crm-hover); --accent-subtle: var(--hue-crm-subtle); }
body[data-app="inventory"] { --accent: var(--hue-inventory); --accent-hover: var(--hue-inventory-hover); --accent-subtle: var(--hue-inventory-subtle); }
body[data-app="sales"] { --accent: var(--hue-sales); --accent-hover: var(--hue-sales-hover); --accent-subtle: var(--hue-sales-subtle); }
body[data-app="tms"] { --accent: var(--hue-tms); --accent-hover: var(--hue-tms-hover); --accent-subtle: var(--hue-tms-subtle); }

/* App-launcher and dashboard tiles: each app keeps its own hue regardless
   of which app you're currently in, so the switcher reads as a map. */
[data-tile-color="settings"] i, [data-tile-color="settings"] .tile-icon { color: var(--hue-settings) !important; }
[data-tile-color="hrm"] i, [data-tile-color="hrm"] .tile-icon { color: var(--hue-hrm) !important; }
[data-tile-color="crm"] i, [data-tile-color="crm"] .tile-icon { color: var(--hue-crm) !important; }
[data-tile-color="inventory"] i, [data-tile-color="inventory"] .tile-icon { color: var(--hue-inventory) !important; }
[data-tile-color="sales"] i, [data-tile-color="sales"] .tile-icon { color: var(--hue-sales) !important; }
[data-tile-color="finance"] i, [data-tile-color="finance"] .tile-icon { color: var(--hue-finance) !important; }
[data-tile-color="tms"] i, [data-tile-color="tms"] .tile-icon { color: var(--hue-tms) !important; }

.tile-icon[data-tile-color="settings"] { background-color: var(--hue-settings-subtle) !important; }
.tile-icon[data-tile-color="hrm"] { background-color: var(--hue-hrm-subtle) !important; }
.tile-icon[data-tile-color="crm"] { background-color: var(--hue-crm-subtle) !important; }
.tile-icon[data-tile-color="inventory"] { background-color: var(--hue-inventory-subtle) !important; }
.tile-icon[data-tile-color="sales"] { background-color: var(--hue-sales-subtle) !important; }
.tile-icon[data-tile-color="finance"] { background-color: var(--hue-finance-subtle) !important; }
.tile-icon[data-tile-color="tms"] { background-color: var(--hue-tms-subtle) !important; }

body,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* app.min.css has a blanket a{font-family:Roboto,sans-serif} rule — a
   direct declaration on every <a>, which always beats an inherited value
   no matter how much lower its specificity is. Every link in the app
   (nav-links included) was quietly falling back to Roboto because of it. */
a {
    font-family: inherit;
}

body {
    color: var(--text-1);
    letter-spacing: -0.006em;
    /* A flat white canvas made every card blend into the page with nothing
       to separate them — a light grey canvas behind white cards (the
       Linear/Notion/Vercel/Stripe dashboard pattern) gives the layout
       actual depth. Sidebar and topbar stay white/opaque on top of this. */
    background-color: var(--surface-2);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--text-1);
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-hover);
}

/* Thin, unobtrusive scrollbars everywhere (webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-subtle);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Cards: flat surface + hairline border, no heavy shadow ---------- */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.625rem 1rem;
}

.card-header .card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-1);
}

.card-body {
    padding: 0.875rem 1rem;
}

/* Dashboard KPI cards: same flat surface as .card, plus a hover lift —
   these all link through to the underlying list, so the lift gives that
   affordance without touching every plain content .card app-wide. */
.stat-card {
    transition: box-shadow 0.15s ease-out, transform 0.15s ease-out;
}

.stat-card:hover {
    box-shadow: 0 10px 24px rgba(20, 24, 40, 0.08);
    transform: translateY(-2px);
}

/* KPI icon boxes: .bg-soft-* sets a matching dark-on-pale text color on the
   avatar-box itself (e.g. bg-soft-primary => #0b51b7), but the theme's own
   .avatar-title rule hardcodes color:#fafbfb (near-white) on the inner
   <span> — that direct declaration wins over the parent's inherited color
   regardless of !important, since inheritance never overrides a value set
   on the element itself. The result is a near-invisible icon on every
   "soft" avatar box app-wide. Forcing an explicit inherit here restores
   the intended tinted icon. */
.avatar-box[class*="bg-soft-"] .avatar-title {
    color: inherit;
}

/* Compact grid gutters everywhere (filter rows, form layouts) — Bootstrap
   sets these as CSS variables per gutter class, so overriding them here
   applies to every .g-3/.gy-3/.gx-3 in the app without touching each blade
   file's utility classes. */
.g-3, .gy-3 { --bs-gutter-y: 0.75rem; }
.g-3, .gx-3 { --bs-gutter-x: 0.75rem; }

/* ---------- Buttons: flat, confident, no gradient/glow ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    box-shadow: none;
}

/* The base template hardcodes background-color/color with !important on
   these two (an "outline until hover" variant) — must match specificity. */
.btn-de-primary {
    background-color: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent);
}

.btn-de-primary:hover,
.btn-de-primary:focus {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover);
}

.btn-de-danger {
    background-color: var(--danger) !important;
    color: #fff !important;
    border-color: var(--danger);
}

.btn-de-danger:hover,
.btn-de-danger:focus {
    background-color: var(--danger) !important;
    filter: brightness(0.92);
    border-color: var(--danger);
}

.btn-light {
    background-color: var(--surface-2);
    border-color: var(--border-subtle);
    color: var(--text-2);
}

.btn-light:hover {
    background-color: var(--surface-hover);
    color: var(--text-1);
}

.btn-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* ---------- Badges: soft pastel pills ---------- */
.badge {
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.01em;
    border-radius: 999px;
    padding: 0.3125rem 0.625rem;
}

/* The base template's own rule is the compound selector .badge.badge-soft-*
   with !important — must match that specificity to win the cascade. */
.badge.badge-soft-primary { background-color: var(--accent-subtle) !important; color: var(--accent); box-shadow: none !important; }
.badge.badge-soft-success  { background-color: var(--success-subtle) !important; color: var(--success); box-shadow: none !important; }
.badge.badge-soft-warning  { background-color: var(--warning-subtle) !important; color: var(--warning); box-shadow: none !important; }
.badge.badge-soft-danger   { background-color: var(--danger-subtle) !important; color: var(--danger); box-shadow: none !important; }

/* ---------- Forms: subtle border, soft accent focus ring ---------- */
.form-control,
.form-select {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-size: 0.875rem;
    padding: 0.375rem 0.625rem;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Bootstrap reserves the right-hand padding below for its caret background-image;
   the shared rule above collapses it to match .form-control, which has no caret -
   restore it here so the arrow never sits on top of the last letter, especially on
   a width:auto select (the filter dropdowns scattered across TMS overview pages). */
.form-select {
    padding-right: 2.25rem;
}

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

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 0.25rem;
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.input-group-text {
    background-color: var(--surface-2);
    border-color: var(--border-subtle);
    color: var(--text-3);
}

/* ---------- Page title: quieter breadcrumb, bolder heading ---------- */
.page-title-box {
    padding: 0.125rem 0 0.875rem;
}

.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
}

.page-title-box .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
}

.page-title-box .breadcrumb-item,
.page-title-box .breadcrumb-item a {
    color: var(--text-3);
}

.page-title-box .breadcrumb-item.active {
    color: var(--text-2);
}

/* ---------- Topbar: hairline border instead of shadow ---------- */
.navbar-custom {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
}

/* The sidebar sits at z-index 1045 (must clear Bootstrap's own built-in
   components, which top out at 1040 - see onesuite-sidebar.css). Every
   Bootstrap dropdown-menu in the topbar (app launcher, quick actions,
   user menu) is still at Bootstrap's own default (~1000) unless
   overridden, so wherever one visually overlaps the sidebar - the app
   launcher and quick actions both sit right above it - the sidebar
   paints over and clips it instead of the dropdown floating above. One
   rule here covers all of them instead of patching each dropdown class
   individually. */
.navbar-custom .dropdown-menu {
    z-index: 1050;
}

.topbar-nav .nav-link {
    color: var(--text-2);
}

.topbar-nav .nav-link:hover {
    color: var(--text-1);
}

/* ---------- Quick actions: an accent pill toggle + icon-circle dropdown,
   the same visual language as the dashboard's app tiles ---------- */
.quick-actions-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.quick-actions-toggle:hover,
.quick-actions-toggle:focus {
    background-color: var(--accent);
    color: #fff;
    text-decoration: none;
}

.quick-actions-toggle i {
    font-size: 1rem;
}

.quick-actions-toggle::after {
    display: none;
}

.quick-actions-menu {
    min-width: 220px;
    padding: 0.5rem;
}

.quick-actions-title {
    color: var(--text-3);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.25rem 0.625rem 0.5rem;
    margin: 0;
    white-space: nowrap;
}

.quick-actions-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    font-weight: 500;
}

.quick-actions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background-color: var(--accent-subtle);
    color: var(--accent);
    flex-shrink: 0;
}

.quick-actions-icon i {
    font-size: 1.05rem;
}

.quick-actions-item:hover .quick-actions-icon {
    background-color: var(--accent);
    color: #fff;
}

/* ---------- Notifications: bell + unread badge, same dropdown language
   as quick actions/app launcher above ---------- */
.notification-toggle {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background-color: var(--danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notification-menu {
    width: 340px;
    padding: 0;
}

.notification-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border-subtle);
}

.notification-menu-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-1);
}

.notification-mark-all-read {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
}

.notification-mark-all-read:hover {
    text-decoration: underline;
}

.notification-menu-list {
    max-height: 360px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    padding: 0.625rem 0.875rem;
    text-align: left;
    transition: background-color 0.12s ease-out;
}

.notification-item:hover {
    background-color: var(--surface-2);
}

.notification-item.is-unread {
    background-color: var(--accent-subtle);
}

.notification-item.is-unread:hover {
    background-color: var(--accent-subtle);
    filter: brightness(0.97);
}

.notification-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background-color: var(--surface-2);
    color: var(--text-3);
    flex-shrink: 0;
}

.notification-item.is-unread .notification-item-icon {
    background-color: var(--accent);
    color: #fff;
}

.notification-item-icon i {
    font-size: 1.05rem;
}

.notification-item-body {
    min-width: 0;
    flex: 1 1 auto;
}

.notification-item-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: normal;
}

/* Only rendered when the dropdown/list is showing every app's
   notifications together (from Settings - see topbar.blade.php) - marks
   which app each one came from. */
.notification-item-app {
    margin-left: 0.25rem;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: normal;
}

.notification-menu-scope {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: normal;
}

.notification-item-message {
    font-size: 0.75rem;
    color: var(--text-2);
    white-space: normal;
}

.notification-item-time {
    font-size: 0.6875rem;
    color: var(--text-3);
    margin-top: 0.125rem;
}

.notification-menu-footer {
    display: block;
    padding: 0.625rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.notification-menu-footer:hover {
    background-color: var(--surface-2);
    color: var(--accent);
    text-decoration: none;
}

.notification-menu-footer-secondary {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-3);
    font-weight: 500;
}

.notification-menu-footer-secondary:hover {
    color: var(--text-2);
}

/* ---------- Tables: hairline rows, quiet hover, generous cells ---------- */
.table {
    color: var(--text-1);
    font-size: 0.875rem;
}

.table td,
.table th {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-color: var(--border-subtle);
}

.table > tbody > tr > * {
    transition: background-color 0.1s ease-out;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--surface-2);
    color: var(--text-1);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-hover);
}

/* Sort-link hover feedback — quiet until you're actually pointing at it. */
.sortable-th-link:hover {
    color: var(--accent);
}

.sortable-th-link:hover .sort-icon {
    color: var(--accent);
}

/* Empty-state row: every list screen's "no results" row uses a single
   colspan cell with a muted icon above the message — give it real
   presence instead of sitting flush with normal row height. */
.table tbody tr td[colspan] {
    padding: 3rem 1rem;
}

.table tbody tr td[colspan] i {
    /* Several empty-state markups use Bootstrap's .font-24 utility, which
       is !important — must match to actually resize it. */
    font-size: 2rem !important;
    color: var(--text-3);
    opacity: 0.6;
}

/* ---------- Alerts: left-accent toast card, not a solid banner ---------- */
.alert {
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text-1);
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.alert-success { border-left-color: var(--success); }
.alert-danger   { border-left-color: var(--danger); }
.alert-warning  { border-left-color: var(--warning); }

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(20, 24, 40, 0.1);
    background-color: var(--surface);
    padding: 0.375rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-2);
    padding: 0.5rem 0.625rem;
}

.dropdown-item:hover,
.dropdown-item.active {
    background-color: var(--accent-subtle);
    color: var(--accent);
}

/* ---------- Pagination: flat, minimal ---------- */
.pagination .page-link {
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    border-radius: var(--radius-sm);
    margin: 0 2px;
    font-size: 0.8125rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pagination .page-link:hover {
    background-color: var(--surface-hover);
    color: var(--text-1);
}

/* ---------- Employee-profile-style nav pills (family/education/etc tabs) ---------- */
.nav-pills .nav-link {
    color: var(--text-2);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.nav-pills .nav-link:hover {
    background-color: var(--surface-hover);
    color: var(--text-1);
}

.nav-pills .nav-link.active {
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-weight: 500;
    border-radius: var(--radius-sm);
}

/* ---------- Footer ---------- */
.footer {
    color: var(--text-3);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
}

/* ---------- Auth / login page: split brand/form layout ---------- */
body.auth-page {
    background-color: var(--surface);
}

.auth-shell {
    display: flex;
    min-height: 100vh;
}

/* Colored brand half — hidden below the sidebar's own collapse breakpoint
   (991.98px) since there's no room to do it justice next to the form on
   a phone-width screen; the form panel takes the full viewport instead. */
.auth-brand-panel {
    position: relative;
    overflow: hidden;
    flex: 0 0 44%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    background: linear-gradient(160deg, var(--accent) 0%, var(--accent-hover) 50%, #1c2456 100%);
    color: #fff;
}

/* Layered radial "mesh" glow instead of two flat circles — softer, more
   depth without needing an image asset or a blur filter (expensive to
   paint across a full-height panel). */
.auth-brand-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(480px 480px at 85% -5%, rgba(255, 255, 255, 0.16), transparent 60%),
        radial-gradient(420px 420px at -10% 108%, rgba(124, 92, 252, 0.35), transparent 65%),
        radial-gradient(320px 320px at 100% 65%, rgba(255, 255, 255, 0.08), transparent 70%);
}

/* Faint dot-grid texture for a touch of "product" polish over the flat gradient. */
.auth-brand-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.9) 75%, transparent);
    mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.9) 75%, transparent);
}

/* Everything above the decorative mesh/grid layers, which sit at z-index 0. */
.auth-brand-top,
.auth-brand-copy,
.auth-float-card,
.auth-brand-footer {
    position: relative;
    z-index: 1;
}

.auth-brand-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.auth-brand-logo:hover {
    color: #fff;
}

.auth-brand-logo img {
    border-radius: 0.375rem;
}

.auth-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0.3rem 0.7rem 0.3rem 0.6rem;
}

.auth-brand-pill i {
    font-size: 0.8125rem;
}

.auth-brand-copy h1 {
    color: #fff;
    font-size: 2.125rem;
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

.auth-brand-copy p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
    max-width: 32ch;
    margin: 0;
}

/* App showcase — the actual app-launcher registry (config/onesuite_apps.php)
   rendered as a tile grid, so the login screen always lists exactly the
   modules the suite ships (and picks up new ones automatically) instead of
   a hand-written, driftable sentence of app names. */
.auth-app-showcase {
    margin-top: 1.75rem;
}

.auth-app-showcase-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.75rem;
}

.auth-app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.auth-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.75rem 0.375rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.auth-app-tile:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

.auth-app-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.9375rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Per-app identity hue, reusing the same --hue-* tokens the in-app
   launcher/sidebar use — a tile here is colored exactly like its app is
   everywhere else in the product. */
.auth-app-tile[data-app="settings"] .auth-app-tile-icon { background: var(--hue-settings); }
.auth-app-tile[data-app="hrm"] .auth-app-tile-icon { background: var(--hue-hrm); }
.auth-app-tile[data-app="crm"] .auth-app-tile-icon { background: var(--hue-crm); }
.auth-app-tile[data-app="inventory"] .auth-app-tile-icon { background: var(--hue-inventory); }
.auth-app-tile[data-app="sales"] .auth-app-tile-icon { background: var(--hue-sales); }
.auth-app-tile[data-app="finance"] .auth-app-tile-icon { background: var(--hue-finance); }
.auth-app-tile[data-app="tms"] .auth-app-tile-icon { background: var(--hue-tms); }

.auth-app-tile-label {
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.auth-brand-footer {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-form-panel-inner {
    width: 100%;
    max-width: 380px;
}

.auth-form-mobile-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    text-decoration: none;
    margin-bottom: 2rem;
}

.auth-form-mobile-brand img {
    border-radius: 0.375rem;
}

.auth-form-badge {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

.auth-form-head h2 {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.auth-form-head p {
    margin-bottom: 1.75rem;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.auth-alert i {
    margin-top: 0.125rem;
}

/* Icon-adorned inputs: icon absolutely positioned over the input's own
   left padding, pointer-events disabled so clicks pass through to the
   field underneath it. */
.input-icon-group {
    position: relative;
}

.input-icon-group .input-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.15s ease;
}

.input-icon-group .form-control {
    padding-left: 2.25rem;
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-icon-group .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.input-icon-group .form-control:focus ~ .input-icon {
    color: var(--accent);
}

.auth-password-input {
    padding-right: 2.5rem;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-3);
    font-size: 1rem;
    cursor: pointer;
}

.auth-password-toggle:hover {
    color: var(--text-2);
    background: var(--surface-2);
}

.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6875rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    box-shadow: 0 10px 24px -8px var(--accent-subtle), 0 1px 2px rgba(20, 24, 40, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.auth-submit-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -8px var(--accent-subtle), 0 2px 4px rgba(20, 24, 40, 0.08);
    color: #fff;
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-arrow {
    transition: transform 0.15s ease;
}

.auth-submit-btn:hover .auth-submit-arrow {
    transform: translateX(3px);
}

.auth-form-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-3);
    margin: 1.25rem 0 0;
}

@media (max-width: 991.98px) {
    .auth-brand-panel {
        display: none;
    }

    body.auth-page {
        background-color: var(--surface-2);
    }

    .auth-form-panel-inner {
        background-color: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius);
        box-shadow: 0 8px 24px rgba(20, 24, 40, 0.08);
        padding: 2rem 1.75rem;
    }

    .auth-form-badge {
        display: inline-flex;
    }
}

/* ---------- Role permission matrix (Roles & Permissions create/edit) —
   ~250 permissions across ~75 categories doesn't fit as one long flat
   list: groups collapse to a single row by default (auto-expanding only
   ones with an existing selection, or a live search match), and the
   whole list scrolls inside a bounded panel so Save/Cancel never require
   scrolling past dozens of groups to reach. ---------- */
.permission-counter {
    font-weight: 600;
}

.permission-counter[data-total-counter] {
    font-variant-numeric: tabular-nums;
}

.permission-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding: 0.625rem 1rem;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
}

.permission-search-group {
    max-width: 280px;
    flex: 1 1 220px;
}

.permission-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.75rem 1rem;
}

.permission-group {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.permission-group:last-child {
    margin-bottom: 0;
}

.permission-group-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--surface-2);
}

.permission-group-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.125rem 0;
    text-align: left;
    color: var(--text-1);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.permission-group-chevron {
    font-size: 0.875rem;
    color: var(--text-3);
    transition: transform 0.15s ease-out;
    flex-shrink: 0;
}

.permission-group.is-open .permission-group-chevron {
    transform: rotate(90deg);
}

.permission-group-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-group-count {
    flex-shrink: 0;
}

.permission-group-count.is-complete {
    background-color: var(--success-subtle) !important;
    color: var(--success) !important;
}

.permission-group-body {
    display: none;
    padding: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.permission-group.is-open .permission-group-body {
    display: block;
}

/* ---------- Roles permission matrix: one card per app the client has
   been given (tinted with that app's --hue-*), one row per module, and
   colour-coded action columns - View blue, Create green, Edit amber,
   Delete red - so a role's shape reads at a glance. Categories carry
   their own icon + tone (App\Support\PermissionGroups::categoryStyle).
   Advanced (legacy) columns hide until toggled. ---------- */

/* Action colours - one per matrix column. */
.perm-col-view { --col: #2f80ed; --col-subtle: rgba(47, 128, 237, 0.1); }
.perm-col-create { --col: var(--success); --col-subtle: var(--success-subtle); }
.perm-col-update { --col: #d97a15; --col-subtle: rgba(217, 122, 21, 0.11); }
.perm-col-delete { --col: var(--danger); --col-subtle: var(--danger-subtle); }
.perm-col-delete_any,
.perm-col-restore,
.perm-col-force_delete,
.perm-col-replicate,
.perm-col-reorder { --col: #7c5cfc; --col-subtle: rgba(124, 92, 252, 0.1); }

/* Category tones. */
.perm-tone-1 { --tone: #5369f8; --tone-subtle: rgba(83, 105, 248, 0.09); }
.perm-tone-2 { --tone: #0ea5a4; --tone-subtle: rgba(14, 165, 164, 0.09); }
.perm-tone-3 { --tone: #7c5cfc; --tone-subtle: rgba(124, 92, 252, 0.09); }
.perm-tone-4 { --tone: #d97a15; --tone-subtle: rgba(217, 122, 21, 0.09); }
.perm-tone-5 { --tone: #e34e83; --tone-subtle: rgba(227, 78, 131, 0.09); }
.perm-tone-6 { --tone: #2f80ed; --tone-subtle: rgba(47, 128, 237, 0.09); }
.perm-tone-7 { --tone: #1f9d78; --tone-subtle: rgba(31, 157, 120, 0.09); }
.perm-tone-8 { --tone: #ef6c3a; --tone-subtle: rgba(239, 108, 58, 0.09); }

.perm-matrix-card {
    overflow: hidden;
}

/* Hero header */
.perm-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.25rem 1.1rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(83, 105, 248, 0.14), transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(15, 157, 112, 0.12), transparent 45%),
        radial-gradient(circle at 60% 120%, rgba(124, 92, 252, 0.1), transparent 50%),
        var(--surface);
    border-bottom: 1px solid var(--border-subtle);
}

.perm-hero-text {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.perm-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #5369f8 0%, #7c5cfc 55%, #e34e83 100%);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 6px 16px rgba(83, 105, 248, 0.28);
    flex-shrink: 0;
}

.perm-hero-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-1);
}

.perm-hero-sub {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-2);
}

.perm-hero-total {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(4px);
}

.perm-hero-total-num {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #5369f8, #7c5cfc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.perm-hero-total-label {
    font-size: 0.75rem;
    color: var(--text-2);
    font-weight: 500;
}

/* App cards (double as tabs) */
.perm-apps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.25rem;
}

.perm-app-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.7rem;
    padding: 0.85rem 1rem;
    text-align: left;
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.perm-app-card:hover {
    border-color: var(--app-hue);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(20, 24, 40, 0.06);
}

.perm-app-card.is-active {
    border-color: var(--app-hue);
    background-color: var(--app-hue-subtle);
    box-shadow: 0 0 0 3px var(--app-hue-subtle), 0 6px 18px rgba(20, 24, 40, 0.06);
}

.perm-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background-color: var(--app-hue);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px var(--app-hue-subtle);
}

.perm-app-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.perm-app-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1);
}

.perm-app-stat {
    font-size: 0.75rem;
    color: var(--text-2);
}

.perm-app-stat strong {
    color: var(--app-hue);
    font-variant-numeric: tabular-nums;
}

.perm-app-percent {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--app-hue);
    font-variant-numeric: tabular-nums;
}

.perm-app-progress {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.perm-app-progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-hue), color-mix(in srgb, var(--app-hue) 55%, #ffffff));
    transition: width 0.3s ease;
}

/* Toolbar: colour legend + search + advanced switch */
.perm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.perm-legend {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.perm-legend-item,
.perm-col-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--col-subtle, var(--surface-2));
    color: var(--col, var(--text-2));
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.perm-legend-item i,
.perm-col-pill i {
    font-size: 0.8125rem;
}

.perm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.perm-search {
    width: 240px;
    max-width: 100%;
}

/* The matrix */
.perm-table-wrap {
    max-height: 62vh;
    overflow: auto;
}

.perm-table {
    font-size: 0.8125rem;
}

.perm-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.7rem 0.75rem;
    white-space: nowrap;
    vertical-align: middle;
}

.perm-table td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
}

.perm-module-col {
    min-width: 220px;
    color: var(--text-1);
    font-weight: 500;
}

.perm-table thead .perm-module-col {
    padding-left: 1.25rem;
    color: var(--text-3);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.perm-cell-col {
    width: 104px;
    text-align: center;
}

.perm-col-head {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    cursor: pointer;
}

.perm-table .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    font-size: 1rem;
    margin: 0;
    float: none;
    cursor: pointer;
    border-color: #cfd5e3;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.perm-table .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--col-subtle, var(--app-hue-subtle));
    border-color: var(--col, var(--app-hue));
}

.perm-table .form-check-input:disabled {
    opacity: 0.35;
}

/* Colour each column's checkboxes (cells + header) with its action colour */
.perm-table [class*="perm-col-"] .form-check-input:checked,
.perm-table [class*="perm-col-"] .form-check-input:indeterminate {
    background-color: var(--col);
    border-color: var(--col);
}

.perm-table td[class*="perm-col-"] .form-check-input:hover:not(:checked) {
    border-color: var(--col);
    background-color: var(--col-subtle);
}

.perm-cell {
    display: inline-flex;
}

.perm-cell-empty {
    color: var(--text-3);
    opacity: 0.45;
}

.perm-all-col {
    border-left: 1px solid var(--border-subtle);
    --col: var(--app-hue);
    --col-subtle: var(--app-hue-subtle);
}

.perm-all-col .form-switch .form-check-input {
    width: 2rem;
    height: 1.1rem;
}

.perm-all-col .form-switch .form-check-input:checked,
.perm-all-col .form-switch .form-check-input:indeterminate {
    background-color: var(--app-hue);
    border-color: var(--app-hue);
}

/* Category heading rows */
.perm-table .perm-category-row td[colspan] {
    /* td[colspan] matches the theme's empty-state rule (3rem padding) -
       restate the padding at higher specificity. */
    padding: 0.55rem 0.75rem 0.55rem 1.25rem;
    text-align: left;
    background: linear-gradient(90deg, var(--tone-subtle), transparent 70%);
    border-left: 3px solid var(--tone);
}

.perm-category-head {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
}

.perm-category-row .form-check-input:checked,
.perm-category-row .form-check-input:indeterminate {
    background-color: var(--tone);
    border-color: var(--tone);
}

.perm-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background-color: var(--tone);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 3px 8px var(--tone-subtle);
}

/* Same empty-state rule also greys out and enlarges (2rem !important)
   any icon inside a td[colspan] - undo it for category icons. */
.perm-table .perm-category-row td[colspan] .perm-cat-icon i {
    color: #fff;
    opacity: 1;
    font-size: 0.95rem !important;
}

.perm-cat-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-1);
}

.perm-cat-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--tone);
    background-color: var(--surface);
    border: 1px solid var(--tone-subtle);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

/* Module rows */
.perm-row td.perm-module-col {
    padding-left: 1.25rem;
    border-left: 3px solid transparent;
}

.perm-module-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.6rem;
    border-radius: 50%;
    background-color: #d5dae6;
    vertical-align: middle;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.perm-row.is-granted .perm-module-dot {
    background-color: var(--tone);
    box-shadow: 0 0 0 3px var(--tone-subtle);
}

.perm-row:hover td {
    background-color: var(--app-hue-subtle);
}

.perm-row:hover td.perm-module-col {
    border-left-color: var(--tone);
}

.perm-matrix-card .perm-advanced {
    display: none;
}

.perm-matrix-card.show-advanced .perm-advanced {
    display: table-cell;
}

/* ---------- Platform > Clients: the client's admin login, so it's clear
   which sign-in belongs to which client. ---------- */
.client-admin {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.client-admin-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.client-admin-meta {
    min-width: 0;
}

.client-admin-email {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--text-1);
}

.client-admin-copy {
    border: 0;
    background: transparent;
    padding: 0 0.15rem;
    color: var(--text-3);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

.client-admin-copy:hover {
    color: var(--accent);
}

.client-users-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.client-users-link:hover {
    background-color: var(--accent);
    color: #fff;
}

/* Platform > Clients > {client} > Users: headline counts above the list. */
.client-users-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.client-users-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.client-users-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.client-users-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.2;
}

.client-users-stat-label {
    font-size: 0.75rem;
    color: var(--text-2);
}

/* ---------- Radio option cards (.limit-option - the client user limit on the
   platform form, and Data access on the role form) + the usage
   meter on Settings > Users. ---------- */
.limit-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.limit-option:hover {
    border-color: var(--accent);
}

.limit-option.is-checked {
    border-color: var(--accent);
    background-color: var(--accent-subtle);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.limit-option > .form-check-input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.limit-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.limit-option.is-checked .limit-option-icon {
    background-color: var(--accent);
    color: #fff;
}

.limit-input {
    width: 110px;
}

.user-limit-meter {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 170px;
    margin-left: 0.5rem;
}

.user-limit-text {
    font-size: 0.75rem;
    color: var(--text-2);
}

.user-limit-text strong {
    color: var(--text-1);
}

.user-limit-bar {
    height: 6px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.user-limit-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.user-limit-success .user-limit-bar > span { background-color: var(--success); }
.user-limit-warning .user-limit-bar > span { background-color: var(--warning); }
.user-limit-danger .user-limit-bar > span { background-color: var(--danger); }
.user-limit-danger .user-limit-text strong { color: var(--danger); }

/* ---------- ERP list view (Odoo / Zoho / Linear pattern) ----------
   One card holds the whole list: status tabs + search/filter/actions
   toolbar, a collapsible advanced-filter drawer, active-filter chips, a
   flush table and a rows-per-page / pagination footer. Generic .list-*
   names so any index screen can adopt it (first used on Settings > Users). */
.list-view {
    overflow: hidden;
}

.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.list-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: -1px;
    overflow-x: auto;
    scrollbar-width: none;
}

.list-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease-out, border-color 0.12s ease-out;
}

.list-tab:hover {
    color: var(--text-1);
}

.list-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.list-tab-count {
    min-width: 1.375rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background-color: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-3);
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.list-tab.active .list-tab-count {
    background-color: var(--accent-subtle);
    border-color: transparent;
    color: var(--accent);
}

.list-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-bottom: 0.75rem;
}

.list-search {
    position: relative;
    width: 240px;
}

.list-search > i {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 0.9375rem;
    pointer-events: none;
}

.list-search .form-control {
    padding-left: 2rem;
    height: 31px;
    background-color: var(--surface-2);
    transition: background-color 0.12s ease-out;
}

.list-search .form-control:focus {
    background-color: var(--surface);
}

.list-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.list-filter-toggle[aria-expanded="true"],
.list-filter-toggle.has-filters {
    color: var(--accent);
    border-color: var(--accent);
    background-color: var(--accent-subtle);
}

.list-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background-color: var(--accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
}

.list-filter-panel {
    padding: 1rem;
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--border-subtle);
}

.list-filter-panel .form-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    font-weight: 600;
}

.list-date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-date-range > span {
    font-size: 0.75rem;
    color: var(--text-3);
}

.list-subbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.list-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.list-clear-all {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-3);
    text-decoration: none;
}

.list-clear-all:hover {
    color: var(--danger);
}

/* Table sits flush inside the card: no card-body gutter, edge cells
   aligned with the toolbar's 1rem padding. */
.list-table > :not(caption) > * > * {
    padding: 0.5rem 0.625rem;
}

.list-table > :not(caption) > * > *:first-child { padding-left: 0.875rem; }
.list-table > :not(caption) > * > *:last-child { padding-right: 0.875rem; }

.list-table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.list-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 220px;
}

.list-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Deterministic per-user initials tones (hash of email) - same fixed
   categorical idea as the vendor .bg-soft-* chips, not accent-tied. */
.list-avatar-indigo { background-color: rgba(83, 105, 248, 0.12); color: #4457e6; }
.list-avatar-teal   { background-color: rgba(15, 157, 112, 0.12); color: #0c8760; }
.list-avatar-pink   { background-color: rgba(227, 78, 131, 0.12); color: #cc3d70; }
.list-avatar-amber  { background-color: rgba(217, 122, 21, 0.12); color: #b8650c; }
.list-avatar-violet { background-color: rgba(124, 92, 252, 0.12); color: #6a48ea; }
.list-avatar-sky    { background-color: rgba(14, 144, 210, 0.12); color: #0b7bb4; }

.list-user-text {
    min-width: 0;
}

.list-user-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
}

.list-user-name a {
    color: inherit;
    text-decoration: none;
}

.list-user-name a:hover {
    color: var(--accent);
}

.list-user-meta {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 0.125rem;
}

.list-meta-sep {
    margin: 0 0.125rem;
}

.list-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    background-color: var(--warning-subtle);
    color: var(--warning);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.list-flag i {
    font-size: 0.75rem;
}

.list-flag-muted {
    background-color: var(--surface-2);
    color: var(--text-3);
    border: 1px solid var(--border-subtle);
}

/* Status as a dot + label (Stripe/Linear) - quieter than a filled pill
   when every row has one. */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-1);
    white-space: nowrap;
}

.status-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--text-3);
}

.status-dot-success::before { background-color: var(--success); box-shadow: 0 0 0 3px var(--success-subtle); }
.status-dot-danger::before  { background-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-subtle); }
.status-dot-warning::before { background-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-subtle); }
.status-dot-muted { color: var(--text-3); }

/* Row actions fade in on hover (pointer devices only - always visible on
   touch, where there is no hover to reveal them). */
.list-row-actions {
    display: inline-flex;
    gap: 0.125rem;
}

@media (hover: hover) {
    .list-table .list-row-actions {
        opacity: 0.35;
        transition: opacity 0.12s ease-out;
    }

    .list-table tr:hover .list-row-actions,
    .list-table .list-row-actions:focus-within {
        opacity: 1;
    }
}

.btn-icon-danger:hover {
    background-color: var(--danger-subtle);
    color: var(--danger);
}

.list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-subtle);
}

.list-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-per-page .dropdown-menu {
    min-width: 4.5rem;
}

.list-footer .pagination-summary {
    padding-top: 0;
}

@media (max-width: 767.98px) {
    .list-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .list-search {
        flex: 1 1 100%;
        width: auto;
    }
}

/* Record codes (employee code, invoice no, SKU) - a quiet mono tag. */
.list-code {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border-radius: 5px;
    background-color: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

/* ---------- ERP record form (create / edit screens) ----------
   Sticky record header (identity + primary actions), sectioned main
   column with icon-chip section heads, and a right sidebar for status /
   access / record meta. Generic .record-* / .form-section-* names so any
   create/edit screen can adopt it (first used on HRM > Employees). */
.record-header {
    position: sticky;
    top: 60px; /* clears the fixed topbar */
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.875rem;
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(20, 24, 40, 0.05);
}

.record-back {
    flex-shrink: 0;
}

.record-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

.record-header-text {
    min-width: 0;
    flex: 1 1 auto;
}

.record-header-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1875rem;
    font-size: 0.75rem;
    color: var(--text-3);
}

.record-header-meta .status-dot {
    font-size: 0.75rem;
}

.record-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.form-section {
    margin-bottom: 0.75rem;
}

.form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.form-section-head-compact {
    padding: 0.5rem 1rem;
}

.form-section-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 1rem;
}

.form-section-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-1);
}

.form-section-sub {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--text-3);
}

.form-section-body {
    padding: 1rem;
}

.form-hint {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-3);
    line-height: 1.45;
}

.form-hint i {
    font-size: 0.875rem;
    margin-top: 0.0625rem;
}

/* Leading icon inside a text input */
.field-icon {
    position: relative;
}

.field-icon > i {
    position: absolute;
    left: 0.75rem;
    top: 0.5625rem;
    color: var(--text-3);
    font-size: 1rem;
    pointer-events: none;
}

.field-icon > .form-control {
    padding-left: 2.25rem;
}

/* Status as selectable option cards (radio group) */
.status-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}

.status-option:hover {
    background-color: var(--surface-hover);
}

.status-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.status-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
}

.status-option-hint {
    padding-left: 0.875rem;
    font-size: 0.6875rem;
    color: var(--text-3);
}

.status-option-check {
    font-size: 1.125rem;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.12s ease-out;
}

.status-option:has(input:checked) {
    border-color: var(--accent);
    background-color: var(--accent-subtle);
}

.status-option:has(input:checked) .status-option-check {
    opacity: 1;
}

.status-option:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.record-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.8125rem;
}

.record-meta dt {
    font-weight: 500;
    color: var(--text-3);
}

.record-meta dd {
    margin: 0;
    color: var(--text-1);
    text-align: right;
}

.record-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: 0.5rem;
}

@media (max-width: 575.98px) {
    .record-header {
        flex-wrap: wrap;
    }

    .record-header-actions {
        width: 100%;
    }

    .record-header-actions > * {
        flex: 1 1 0;
    }
}

/* ==========================================================================
   Colour pass - list / form / profile screens
   A small fixed categorical palette exposed as .tone-* classes that set
   --tone (ink) / --tone-bg (tint) / --tone-border. Components below read
   those vars, so any element picks up a colour just by adding a tone class.
   Like the vendor .bg-soft-* chips these are deliberately NOT accent-tied:
   "Active" stays green and a given department keeps its colour in every app.
   ========================================================================== */
.tone-indigo  { --tone: #4457e6; --tone-bg: rgba(83, 105, 248, 0.1);  --tone-border: rgba(83, 105, 248, 0.28); }
.tone-teal    { --tone: #0c8760; --tone-bg: rgba(15, 157, 112, 0.1);  --tone-border: rgba(15, 157, 112, 0.28); }
.tone-pink    { --tone: #cc3d70; --tone-bg: rgba(227, 78, 131, 0.1);  --tone-border: rgba(227, 78, 131, 0.28); }
.tone-amber   { --tone: #b8650c; --tone-bg: rgba(217, 122, 21, 0.11); --tone-border: rgba(217, 122, 21, 0.3); }
.tone-violet  { --tone: #6a48ea; --tone-bg: rgba(124, 92, 252, 0.1);  --tone-border: rgba(124, 92, 252, 0.28); }
.tone-sky     { --tone: #0b7bb4; --tone-bg: rgba(14, 144, 210, 0.1);  --tone-border: rgba(14, 144, 210, 0.28); }
.tone-rose    { --tone: #d23a3a; --tone-bg: rgba(226, 67, 67, 0.09);  --tone-border: rgba(226, 67, 67, 0.26); }
.tone-lime    { --tone: #4d8a10; --tone-bg: rgba(101, 163, 13, 0.11); --tone-border: rgba(101, 163, 13, 0.3); }
.tone-slate   { --tone: #5c6b8a; --tone-bg: rgba(92, 107, 138, 0.1);  --tone-border: rgba(92, 107, 138, 0.26); }
.tone-success { --tone: var(--success); --tone-bg: var(--success-subtle); --tone-border: rgba(31, 157, 120, 0.3); }
.tone-warning { --tone: var(--warning); --tone-bg: var(--warning-subtle); --tone-border: rgba(200, 134, 10, 0.3); }
.tone-danger  { --tone: var(--danger);  --tone-bg: var(--danger-subtle);  --tone-border: rgba(226, 67, 79, 0.28); }

/* ---------- Tags: tinted label chips (department, type, facts) ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: 6px;
    background-color: var(--tone-bg, var(--surface-2));
    /* !important: a bundled syntax-highlighter (google-code-prettify) in app.min.css also defines a
       generic ".tag { color: #00bcd4 !important }" for XML tag names - without this, every status
       badge's text silently renders the same cyan regardless of its tone. */
    color: var(--tone, var(--text-2)) !important;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.tag i {
    font-size: 0.875rem;
}

.tag-outline {
    background-color: transparent;
    border: 1px solid var(--tone-border, var(--border-subtle));
}

.list-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.list-icon-text i {
    color: var(--text-3);
    font-size: 0.9375rem;
}

/* ---------- KPI strip above a list ---------- */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kpi-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, var(--tone-bg) 0, transparent 60%),
        var(--surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.kpi-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--tone);
}

a.kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--tone-border);
    box-shadow: 0 8px 20px rgba(20, 24, 40, 0.07);
    color: inherit;
}

.kpi-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1.125rem;
}

.kpi-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-card-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-2);
}

.kpi-card-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.kpi-card-hint {
    font-size: 0.6875rem;
    color: var(--tone);
    font-weight: 500;
}

/* ---------- List view colour ---------- */
.list-view {
    border-top: 3px solid var(--accent);
}

.list-toolbar {
    background: linear-gradient(180deg, var(--accent-subtle) 0%, transparent 100%);
}

/* Tabs: each status carries its own colour on its count pill + underline */
.list-tab[class*="tone-"] .list-tab-count {
    background-color: var(--tone-bg);
    border-color: transparent;
    color: var(--tone);
}

.list-tab[class*="tone-"].active {
    color: var(--tone);
    border-bottom-color: var(--tone);
}

.list-tab[class*="tone-"].active .list-tab-count {
    background-color: var(--tone);
    color: #fff;
}

.list-filter-panel {
    background-color: var(--accent-subtle);
    border-bottom: 1px dashed var(--accent);
}

.list-filter-panel .form-label {
    color: var(--accent);
}

.list-filter-toggle.has-filters,
.list-filter-toggle[aria-expanded="true"] {
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* Accent-tinted header row */
.list-table > thead.thead-light th {
    background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
    color: color-mix(in srgb, var(--accent) 70%, var(--text-1));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.list-table.table-hover > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

/* Accent bar on the hovered row's first cell */
.list-table > tbody > tr > td:first-child {
    box-shadow: inset 3px 0 0 transparent;
    transition: box-shadow 0.12s ease-out, background-color 0.1s ease-out;
}

.list-table > tbody > tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Coloured row actions */
.list-table .list-row-actions {
    opacity: 1 !important;
}

.btn-icon-info { color: #0b7bb4; }
.btn-icon-info:hover { background-color: rgba(14, 144, 210, 0.1); color: #0b7bb4; }
.btn-icon-accent { color: var(--accent); }
.btn-icon-accent:hover { background-color: var(--accent-subtle); color: var(--accent-hover); }
.btn-icon-success { color: var(--success); }
.btn-icon-success:hover { background-color: var(--success-subtle); color: var(--success); }
.btn-icon-danger { color: var(--danger); }

.list-footer {
    background-color: var(--surface-2);
}

/* ---------- Record form colour ---------- */
.record-header {
    border-top: 3px solid var(--accent);
    background:
        linear-gradient(90deg, var(--accent-subtle) 0%, transparent 55%),
        var(--surface);
}

.record-header .record-avatar {
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--accent);
}

.form-section[class*="tone-"] {
    border-top: 3px solid var(--tone);
}

.form-section[class*="tone-"] .form-section-head {
    background: linear-gradient(90deg, var(--tone-bg) 0%, transparent 70%);
}

.form-section[class*="tone-"] .form-section-icon {
    background-color: var(--tone);
    color: #fff;
    box-shadow: 0 4px 10px var(--tone-border);
}

.form-section-head-compact {
    align-items: center;
}

.form-section-icon-sm {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 0.9375rem;
}

.form-section .form-control:focus,
.form-section .form-select:focus {
    border-color: var(--tone, var(--accent));
    box-shadow: 0 0 0 3px var(--tone-bg, var(--accent-subtle));
}

.record-footer .btn-de-primary,
.record-header-actions .btn-de-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px var(--accent-subtle);
}

/* ---------- Profile hero (employee view pages) ---------- */
.profile-hero {
    overflow: hidden;
}

.profile-hero-cover {
    height: 96px;
    background:
        radial-gradient(circle at 85% -20%, rgba(255, 255, 255, 0.35) 0, transparent 45%),
        radial-gradient(circle at 10% 120%, rgba(255, 255, 255, 0.2) 0, transparent 40%),
        linear-gradient(120deg, var(--accent) 0%, var(--accent-hover) 45%, #0b7bb4 100%);
}

.profile-hero-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    padding: 0 1.5rem 1.25rem;
}

.profile-hero-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-top: -48px;
    border-radius: 50%;
    border: 4px solid var(--surface);
    background: linear-gradient(135deg, var(--accent-subtle), var(--surface-2));
    background-color: var(--surface);
    color: var(--accent);
    font-size: 1.75rem;
    font-weight: 700;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(20, 24, 40, 0.12);
}

.profile-hero-main {
    flex: 1 1 320px;
    min-width: 0;
    padding-top: 0.75rem;
}

.profile-hero-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.profile-hero-name h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-1);
}

.profile-hero-role {
    margin: 0.125rem 0 0.625rem;
    color: var(--text-2);
    font-size: 0.875rem;
}

.profile-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.profile-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.profile-hero-actions .btn-icon {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-subtle);
}

/* Profile side nav: accent bar on the active item */
.nav-pills .nav-link.active {
    box-shadow: inset 3px 0 0 var(--accent);
}

.nav-pills .nav-link i {
    color: var(--accent);
    opacity: 0.75;
}

/* ---------- Info grid (read-only field display) ---------- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}

.info-item:hover {
    border-color: var(--tone-border, var(--border-subtle));
    background-color: var(--tone-bg, var(--surface-2));
}

.info-item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background-color: var(--tone-bg, var(--surface-2));
    color: var(--tone, var(--text-2));
    font-size: 1.125rem;
}

.info-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.info-item-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
}

.info-item-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.info-item-value.is-empty {
    color: var(--text-3);
    font-weight: 400;
    font-style: italic;
}

/* ---------- Non-person records (positions, assets...) ---------- */
.list-avatar-square {
    border-radius: 10px;
    background-color: var(--tone-bg, var(--accent-subtle));
    color: var(--tone, var(--accent));
}

.list-user-meta i {
    font-size: 0.8125rem;
    vertical-align: -1px;
}

.salary-range {
    font-weight: 600;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.count-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-width: 2.75rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: 999px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.count-pill i {
    font-size: 0.875rem;
}

.input-group-text-tone {
    background-color: var(--tone-bg, var(--surface-2));
    border-color: var(--border-subtle);
    color: var(--tone, var(--text-2));
    font-size: 0.75rem;
    font-weight: 600;
}

/* Numeric stepper: - [ n ] + */
.stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stepper .form-control {
    max-width: 90px;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tone, var(--text-1));
    -moz-appearance: textfield;
}

.stepper .form-control::-webkit-outer-spin-button,
.stepper .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper .btn-icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--tone-border, var(--border-subtle));
    background-color: var(--tone-bg, var(--surface-2));
    color: var(--tone, var(--text-2));
}

.stepper .btn-icon:hover {
    background-color: var(--tone, var(--accent));
    color: #fff;
}

/* ---------- Job board (Recruitment > Open Jobs) ---------- */
.list-toolbar-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
}

.list-toolbar-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1.125rem;
}

.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.job-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem 1.25rem;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--tone);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, var(--tone-bg) 0, transparent 45%),
        var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.job-card:hover {
    transform: translateY(-3px);
    border-color: var(--tone-border);
    border-top-color: var(--tone);
    box-shadow: 0 12px 28px rgba(20, 24, 40, 0.09);
}

.job-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.job-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--tone);
    color: #fff;
    font-size: 1.375rem;
    box-shadow: 0 6px 14px var(--tone-border);
}

.job-card-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.job-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-1);
}

.job-card-title a {
    color: inherit;
    text-decoration: none;
}

.job-card-title a:hover {
    color: var(--tone);
}

.job-card-posted {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--text-3);
}

.job-card-head .status-dot {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--success-subtle);
    color: var(--success);
}

.job-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.job-card-salary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.job-card-salary i {
    font-size: 1.125rem;
    color: var(--success);
}

.job-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.job-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg);
}

.job-card-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tone);
    font-variant-numeric: tabular-nums;
}

.job-card-stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-2);
}

.job-card-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-3);
}

.job-card-progress-label strong {
    color: var(--text-1);
}

.job-card-progress-bar {
    height: 6px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.job-card-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tone), var(--success));
}

.job-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--border-subtle);
}

.job-card-actions .btn-icon {
    width: 31px;
    height: 31px;
    border: 1px solid var(--border-subtle);
}

.job-grid-footer {
    margin-top: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

/* Empty state card */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 18px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1.875rem;
}

.empty-state h5 {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.empty-state p {
    max-width: 360px;
    margin-bottom: 1rem;
    color: var(--text-3);
    font-size: 0.875rem;
}

/* ---------- Candidates: stage track, stage stepper, resume upload ---------- */
.list-flag[class*="tone-"] {
    background-color: var(--tone-bg);
    color: var(--tone);
}

.list-subtext {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.min-w-0 {
    min-width: 0;
}

/* Stage tag + 5-step funnel track under it (red across when rejected) */
.stage-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 96px;
}

.stage-cell .tag {
    align-self: flex-start;
}

.stage-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    width: 96px;
}

.stage-track > span {
    height: 4px;
    border-radius: 999px;
    background-color: var(--border-subtle);
}

.stage-track > span.is-done {
    background-color: var(--tone);
}

.stage-track.is-rejected > span.is-done {
    opacity: 0.45;
}

/* Vertical pipeline stepper (radio group) in the form sidebar */
.stage-stepper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.stage-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}

/* Connector line between the funnel steps */
.stage-step:not(.stage-step-detached):not(:nth-last-child(2))::after {
    content: "";
    position: absolute;
    left: calc(0.625rem + 15px);
    top: calc(0.5rem + 32px);
    height: calc(100% - 26px);
    width: 2px;
    background-color: var(--border-subtle);
}

.stage-step:hover {
    background-color: var(--surface-hover);
}

.stage-step input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stage-step-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--tone-border);
    background-color: var(--surface);
    color: var(--tone);
    font-size: 1rem;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.stage-step-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.stage-step-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
}

.stage-step-hint {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.stage-step-check {
    font-size: 1.125rem;
    color: var(--tone);
    opacity: 0;
}

.stage-step:has(input:checked) {
    border-color: var(--tone-border);
    background-color: var(--tone-bg);
}

.stage-step:has(input:checked) .stage-step-icon {
    border-color: var(--tone);
    background-color: var(--tone);
    color: #fff;
    box-shadow: 0 4px 10px var(--tone-border);
}

.stage-step:has(input:checked) .stage-step-title {
    color: var(--tone);
}

.stage-step:has(input:checked) .stage-step-check {
    opacity: 1;
}

.stage-step:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.stage-step-detached {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding-top: 0.875rem;
}

.stage-step-detached:has(input:checked) {
    border-top-style: solid;
    border-radius: var(--radius-sm);
}

/* Resume: current file row + drag/drop zone */
.file-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--tone-border, var(--border-subtle));
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg, var(--surface-2));
}

.file-current-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background-color: var(--tone, var(--accent));
    color: #fff;
    font-size: 1.125rem;
}

.file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--tone-border, var(--border-subtle));
    border-radius: var(--radius);
    background-color: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}

.file-drop:hover,
.file-drop:focus-within,
.file-drop.has-file {
    border-color: var(--tone, var(--accent));
    background-color: var(--tone-bg, var(--accent-subtle));
}

.file-drop.is-invalid {
    border-color: var(--danger);
}

.file-drop > i {
    font-size: 2rem;
    color: var(--tone, var(--accent));
}

.file-drop-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.file-drop-sub {
    font-size: 0.75rem;
    color: var(--text-3);
}

/* Invisible input stretched over the zone: click and native drag-drop both land on it */
.file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ---------- Kanban board (Recruitment > Hiring Pipeline) ---------- */
.list-inline-select {
    width: auto;
    max-width: 200px;
    height: 31px;
}

.kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 1fr);
    gap: 0.875rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    scroll-snap-type: x proximity;
}

.kanban-col {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    max-height: calc(100vh - 150px);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--tone);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, var(--tone-bg) 0, transparent 140px),
        var(--surface-2);
    scroll-snap-align: start;
}

.kanban-col-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
}

.kanban-col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--tone);
    color: #fff;
    font-size: 0.9375rem;
    box-shadow: 0 4px 10px var(--tone-border);
}

.kanban-col-title {
    flex: 1 1 auto;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
}

.kanban-col-count {
    min-width: 1.625rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: var(--surface);
    border: 1px solid var(--tone-border);
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.kanban-col-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.25rem 0.625rem 0.75rem;
    overflow-y: auto;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.kanban.is-dragging .kanban-col-body {
    box-shadow: inset 0 0 0 2px transparent;
}

.kanban-col-body.is-over {
    background-color: var(--tone-bg);
    box-shadow: inset 0 0 0 2px var(--tone) !important;
}

.kanban-card {
    position: relative;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--tone);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease-out, transform 0.15s ease-out, opacity 0.15s ease-out;
}

.kanban[data-draggable] .kanban-card {
    cursor: grab;
}

.kanban-card:hover {
    box-shadow: 0 8px 20px rgba(20, 24, 40, 0.09);
    transform: translateY(-1px);
}

.kanban-card.is-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.kanban-card.is-saving {
    opacity: 0.7;
}

.kanban-card.is-moved {
    animation: kanban-pop 0.9s ease-out;
}

@keyframes kanban-pop {
    0% { box-shadow: 0 0 0 0 var(--tone-border); }
    40% { box-shadow: 0 0 0 6px var(--tone-bg); }
    100% { box-shadow: var(--shadow-sm); }
}

.kanban-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.kanban-card-top .list-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.6875rem;
}

.kanban-card-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-1);
}

.kanban-card-name a {
    color: inherit;
    text-decoration: none;
}

.kanban-card-name a:hover {
    color: var(--tone);
}

.kanban-card-job {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-card-menu {
    width: 26px;
    height: 26px;
    margin: -0.25rem -0.25rem 0 0;
}

.kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.625rem;
}

.kanban-card-meta:empty {
    display: none;
}

.kanban-card-meta .tag {
    padding: 0.0625rem 0.4375rem;
    font-size: 0.6875rem;
}

.kanban-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.625rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.6875rem;
    color: var(--text-3);
}

.kanban-card-mail {
    color: var(--text-3);
    font-size: 0.9375rem;
}

.kanban-card-mail:hover {
    color: var(--tone);
}

.kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--tone);
}

.kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-height: 140px;
    border: 2px dashed var(--tone-border);
    border-radius: var(--radius-sm);
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.7;
}

.kanban-empty[hidden] {
    display: none;
}

.kanban-empty i {
    font-size: 1.5rem;
}

.kanban-toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1080;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--success);
    border-radius: var(--radius-sm);
    background-color: var(--text-1);
    color: #fff;
    font-size: 0.8125rem;
    box-shadow: 0 12px 28px rgba(20, 24, 40, 0.25);
}

.kanban-toast.is-error {
    border-left-color: var(--danger);
}

/* ---------- Interviews: agenda list, date blocks, join button ---------- */
.tone-info { --tone: #0b7bb4; --tone-bg: rgba(14, 144, 210, 0.1); --tone-border: rgba(14, 144, 210, 0.28); }
.status-dot-info::before { background-color: #0e90d2; box-shadow: 0 0 0 3px rgba(14, 144, 210, 0.12); }

/* Segmented time-window switch under the toolbar */
.list-segment-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 9px;
    background-color: var(--surface-2);
    border: 1px solid var(--border-subtle);
    overflow-x: auto;
}

.segmented-item {
    padding: 0.3125rem 0.875rem;
    border-radius: 7px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.segmented-item:hover {
    color: var(--text-1);
}

.segmented-item.active {
    background-color: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(20, 24, 40, 0.1);
    font-weight: 600;
}

.list-segment-hint {
    font-size: 0.75rem;
    color: var(--text-3);
}

/* Day header rows inside the table */
.list-table > tbody > tr.agenda-day > td {
    padding: 0.5rem 1rem;
    background: linear-gradient(90deg, var(--accent-subtle) 0%, transparent 60%);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: none !important;
}

.list-table > tbody > tr.agenda-day:hover > td {
    background: linear-gradient(90deg, var(--accent-subtle) 0%, transparent 60%);
}

.agenda-day-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.agenda-day-date {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-3);
}

.list-table > tbody > tr.agenda-day.is-today > td {
    background: linear-gradient(90deg, rgba(227, 78, 131, 0.12) 0%, transparent 60%);
    border-bottom-color: rgba(227, 78, 131, 0.3);
}

.agenda-day.is-today .agenda-day-label {
    color: #cc3d70;
}

.agenda-day.is-past .agenda-day-label {
    color: var(--text-3);
}

/* Calendar tear-off date block */
.when-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.when-block {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 42px;
    overflow: hidden;
    border: 1px solid var(--tone-border);
    border-radius: 8px;
    background-color: var(--surface);
    line-height: 1;
}

.when-block-month {
    width: 100%;
    padding: 0.1875rem 0;
    background-color: var(--tone);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.when-block-day {
    padding: 0.25rem 0 0.3125rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
}

.when-time {
    font-weight: 600;
    color: var(--text-1);
}

.list-table > tbody > tr.is-muted-row > td:not(:last-child) {
    opacity: 0.55;
}

.list-table > tbody > tr.is-muted-row .tag,
.list-table > tbody > tr.is-muted-row .when-time {
    text-decoration: line-through;
}

/* Join (meeting link) button */
.join-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #0e90d2, #5369f8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(14, 144, 210, 0.25);
}

.join-btn:hover {
    color: #fff;
    filter: brightness(1.08);
}

.join-btn.is-disabled {
    background: var(--surface-2);
    color: var(--text-2);
    box-shadow: none;
    border: 1px solid var(--border-subtle);
}

/* Form: quick-pick chips + candidate peek */
.quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.quick-chip {
    padding: 0.1875rem 0.625rem;
    border: 1px solid var(--tone-border, var(--border-subtle));
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--tone, var(--text-2));
    font-size: 0.6875rem;
    font-weight: 500;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.quick-chip:hover {
    background-color: var(--tone, var(--accent));
    border-color: var(--tone, var(--accent));
    color: #fff;
}

.candidate-peek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px dashed var(--tone-border, var(--border-subtle));
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg, var(--surface-2));
    font-size: 0.8125rem;
}

.candidate-peek[hidden] {
    display: none;
}

.candidate-peek > i {
    font-size: 1.125rem;
    color: var(--tone, var(--accent));
}

/* ---------- Interview feedback: stars, verdicts, nudges ---------- */
.star-rating {
    display: inline-flex;
    gap: 1px;
    font-size: 0.9375rem;
    color: var(--border-subtle);
}

.star-rating .is-on {
    color: #f5a524;
}

.verdict-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
    border-radius: 999px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.verdict-pill i {
    font-size: 0.9375rem;
}

.comment-cell {
    max-width: 280px;
}

.comment-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--text-2);
    line-height: 1.45;
}

/* "Awaiting feedback" nudge card above the list */
.nudge-card {
    margin-bottom: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--tone-border);
    border-left: 4px solid var(--tone);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, var(--tone-bg) 0%, transparent 70%),
        var(--surface);
}

.nudge-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.nudge-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--tone);
    color: #fff;
    font-size: 1.125rem;
    box-shadow: 0 4px 10px var(--tone-border);
}

.nudge-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.625rem;
}

.nudge-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-size: 0.8125rem;
}

.nudge-item .list-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.6875rem;
}

.nudge-btn {
    flex-shrink: 0;
    padding: 0.1875rem 0.625rem;
    border: 1px solid var(--tone-border);
    border-radius: 999px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 600;
}

.nudge-btn:hover {
    background-color: var(--tone);
    color: #fff;
}

/* Star picker: radios rendered 5..1 inside a row-reverse flex so that
   "hovered/checked star and everything after it in DOM" = it and all lower stars. */
.star-picker {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.25rem;
}

.star-picker input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-picker label {
    cursor: pointer;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--border-subtle);
    transition: color 0.1s ease-out, transform 0.1s ease-out;
}

.star-picker label:hover {
    transform: scale(1.12);
}

/* Checked star + all lower stars are lit... */
.star-picker input:checked ~ label {
    color: #f5a524;
}

/* ...but while hovering, the hover preview replaces the checked state. */
.star-picker:hover input ~ label {
    color: var(--border-subtle);
}

.star-picker input ~ label:hover,
.star-picker input ~ label:hover ~ label {
    color: #f5a524;
}

.star-picker input:focus-visible + label {
    outline: 2px solid var(--tone, var(--accent));
    outline-offset: 2px;
    border-radius: 4px;
}

.star-picker-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.star-picker-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tone, var(--text-1));
}

/* Recommendation choice cards */
.verdict-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.verdict-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}

.verdict-option:hover {
    border-color: var(--tone-border);
}

.verdict-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.verdict-option-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1.25rem;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.verdict-option-body {
    display: flex;
    flex-direction: column;
}

.verdict-option-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
}

.verdict-option-hint {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.verdict-option:has(input:checked) {
    border-color: var(--tone);
    background-color: var(--tone-bg);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.verdict-option:has(input:checked) .verdict-option-icon {
    background-color: var(--tone);
    color: #fff;
}

.verdict-option:has(input:checked) .verdict-option-title {
    color: var(--tone);
}

.verdict-option:has(input:focus-visible) {
    outline: 2px solid var(--tone);
    outline-offset: 2px;
}

.rating-guide {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-2);
}

.rating-guide li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- Offer letters: salary figure, countdown, summary card ---------- */
.salary-figure {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3125rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.salary-currency {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--success);
    letter-spacing: 0.04em;
}

.countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1875rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.6875rem;
    font-weight: 600;
}

.stage-track-3 {
    grid-template-columns: repeat(3, 1fr);
    width: 72px;
}

.input-group-currency {
    flex: 0 0 auto;
    width: 92px;
    background-color: var(--tone-bg, var(--surface-2));
    color: var(--tone, var(--text-1));
    font-weight: 600;
}

/* Live summary card at the top of the form sidebar */
.offer-summary {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.25rem;
    overflow: hidden;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.28) 0, transparent 45%),
        linear-gradient(135deg, #0f9d70 0%, #0b7bb4 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 157, 112, 0.25);
}

.offer-summary::after {
    content: "\ed4d"; /* tabler-icons ti-file-certificate */
    position: absolute;
    right: -0.5rem;
    bottom: -1.25rem;
    font-family: "tabler-icons";
    font-size: 6rem;
    line-height: 1;
    opacity: 0.12;
    pointer-events: none;
}

.offer-summary-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.offer-summary-name {
    margin-top: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.offer-summary-role {
    font-size: 0.8125rem;
    opacity: 0.85;
}

.offer-summary-salary {
    margin: 0.875rem 0 0.625rem;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.offer-summary-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    opacity: 0.92;
}

/* ==========================================================================
   Onboarding module: sub-nav, section hero, progress rings, checklist rows,
   category cards, probation timeline bars.
   ========================================================================== */

/* Section hero: page identity + stats + progress ring */
.section-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--tone-border);
    border-left: 4px solid var(--tone);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, var(--tone-bg) 0, transparent 55%),
        linear-gradient(90deg, var(--tone-bg) 0%, transparent 60%),
        var(--surface);
}

.section-hero-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: var(--tone);
    color: #fff;
    font-size: 1.625rem;
    box-shadow: 0 8px 18px var(--tone-border);
}

.section-hero-text {
    flex: 1 1 260px;
    min-width: 0;
}

.section-hero-text h4 {
    margin: 0 0 0.125rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-1);
}

.section-hero-text p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-2);
}

.section-hero-stats {
    display: flex;
    gap: 0.5rem;
}

.section-hero-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 76px;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

.section-hero-stats strong {
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.section-hero-stats span {
    font-size: 0.6875rem;
    color: var(--text-3);
    white-space: nowrap;
}

.section-hero-stats > div.is-alert {
    border-color: rgba(226, 67, 79, 0.3);
    background-color: var(--danger-subtle);
}

.section-hero-stats > div.is-alert strong {
    color: var(--danger);
}

/* Conic-gradient progress ring: set --value (0-100) inline */
.progress-ring {
    --value: 0;
    --size: 76px;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--tone, var(--accent)) calc(var(--value) * 1%), var(--border-subtle) 0);
}

.progress-ring::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background-color: var(--surface);
}

.progress-ring > span {
    position: relative;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.progress-ring > span small {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-3);
}

.progress-ring-sm {
    --size: 44px;
}

.progress-ring-sm::before {
    inset: 5px;
}

.progress-ring-sm > span {
    font-size: 0.75rem;
}

.progress-ring-sm > span small {
    font-size: 0.5rem;
}

/* Checklist rows */
.check-table > tbody > tr > td.check-cell {
    width: 52px;
    padding-right: 0;
}

.check-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid var(--tone-border);
    border-radius: 50%;
    background-color: var(--surface);
    color: transparent;
    font-size: 0.875rem;
    transition: background-color 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out, transform 0.12s ease-out;
}

button.check-toggle:hover {
    border-color: var(--tone);
    color: var(--tone);
    transform: scale(1.08);
}

.check-row.is-done .check-toggle {
    border-color: var(--success);
    background-color: var(--success);
    color: #fff;
}

.check-row.is-done button.check-toggle:hover {
    filter: brightness(1.08);
}

.check-toggle.is-static {
    cursor: default;
}

.check-title {
    font-weight: 600;
    color: var(--text-1);
}

.check-row.is-done .check-title {
    color: var(--text-3);
    text-decoration: line-through;
    font-weight: 500;
}

.check-row.is-overdue > td:first-child {
    box-shadow: inset 3px 0 0 var(--danger) !important;
}

.check-desc {
    max-width: 480px;
}

.checklist-count {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.form-section-head-compact .btn {
    margin-left: 0.25rem;
}

.inline-add-form {
    margin: 0;
    padding: 0.875rem 1.25rem;
    background-color: var(--tone-bg);
    border-bottom: 1px dashed var(--tone-border);
}

.inline-add-form .form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tone);
}

.checklist-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    color: var(--text-3);
    font-size: 0.8125rem;
}

.checklist-empty i {
    color: var(--tone);
    font-size: 1.125rem;
    opacity: 0.7;
}

/* Overview: category cards */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--tone);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, var(--tone-bg) 0, transparent 55%),
        var(--surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 24, 40, 0.08);
    color: inherit;
}

.category-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.category-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background-color: var(--tone);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 6px 14px var(--tone-border);
}

.category-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
}

.category-card-meta {
    font-size: 0.75rem;
    color: var(--text-3);
}

.category-card-bar,
.mini-progress-bar,
.category-bar-track {
    height: 6px;
    border-radius: 999px;
    background-color: var(--border-subtle);
    overflow: hidden;
}

.category-card-bar {
    margin-top: 0.5rem;
}

.category-card-bar > span,
.category-bar-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--tone);
}

/* Overview: per-hire checklist dots + mini progress */
.category-dots {
    display: flex;
    gap: 0.25rem;
}

.category-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.75rem;
}

.category-dot.is-open {
    background-color: var(--tone-bg);
    color: var(--tone);
    box-shadow: inset 0 0 0 1px var(--tone-border);
}

.category-dot.is-done {
    background-color: var(--tone);
    color: #fff;
}

.category-dot.is-none {
    background-color: var(--surface-2);
    color: var(--border-subtle);
}

.mini-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mini-progress-bar {
    flex: 1 1 auto;
}

.mini-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #0e90d2);
}

.mini-progress-bar.is-complete > span {
    background: var(--success);
}

.mini-progress-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

/* Overview side lists (overdue tasks, probation reviews) */
.side-list {
    margin-bottom: 0;
    overflow: hidden;
    border-top: 3px solid var(--tone);
}

.side-list-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(90deg, var(--tone-bg) 0%, transparent 70%);
}

.side-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--tone);
    color: #fff;
    font-size: 0.9375rem;
}

.side-list-count {
    margin-left: auto;
    padding: 0 0.5rem;
    border-radius: 999px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.375rem;
}

.side-list-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.1s ease-out;
}

.side-list-item:last-child {
    border-bottom: 0;
}

.side-list-item:hover {
    background-color: var(--surface-hover);
    color: inherit;
}

.side-list-item .list-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.6875rem;
}

.side-list-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--success);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Employee profile: per-category mini bars in the hero */
.category-bars {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
    max-width: 520px;
}

.category-bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--tone);
    text-decoration: none;
    font-size: 0.9375rem;
}

.category-bar-track {
    flex: 1 1 auto;
}

/* Probation timeline bar */
.period-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background-color: var(--tone-bg);
    box-shadow: inset 0 0 0 1px var(--tone-border);
}

.period-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tone-border), var(--tone));
}

.period-bar-now {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background-color: var(--tone);
    box-shadow: 0 0 0 1px var(--tone-border), 0 2px 6px rgba(20, 24, 40, 0.2);
    transform: translateY(-50%);
}

.period-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .section-hero-stats {
        width: 100%;
    }

    .section-hero-stats > div {
        flex: 1 1 0;
    }

    .category-bars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Attendance module: dashboard charts, daily sheet, monthly heatmap,
   punch logs, request review, reports.
   ========================================================================== */

/* Dashboard: today at a glance */
.today-glance {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.progress-ring-lg {
    --size: 104px;
}

.progress-ring-lg::before {
    inset: 10px;
}

.progress-ring-lg > span {
    font-size: 1.625rem;
}

.stack-bar {
    display: flex;
    gap: 2px;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--surface-2);
}

.stack-bar > span {
    min-width: 6px;
    background-color: var(--tone);
}

.stack-bar > span.is-unmarked,
.legend-dot.is-unmarked {
    background: repeating-linear-gradient(45deg, var(--border-subtle), var(--border-subtle) 3px, var(--surface-2) 3px, var(--surface-2) 6px);
}

.stack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-2);
}

.stack-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.stack-legend strong {
    color: var(--text-1);
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background-color: var(--tone);
}

/* Dashboard: 7-day stacked trend */
.trend-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
    height: 200px;
    align-items: end;
}

.trend-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.trend-bar {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 44px;
    overflow: hidden;
    border-radius: 8px 8px 4px 4px;
    background-color: var(--surface-2);
    transition: filter 0.12s ease-out;
}

.trend-bar > span {
    background-color: var(--tone);
}

.trend-col:hover .trend-bar {
    filter: brightness(1.08);
}

.trend-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-2);
}

.trend-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trend-col.is-today .trend-label {
    color: var(--accent);
}

.trend-col.is-today .trend-bar {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-subtle);
}

.approval-count {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tone);
    font-variant-numeric: tabular-nums;
}

/* Daily: date navigator */
.date-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-nav-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 58px;
    overflow: hidden;
    border: 1px solid var(--tone-border);
    border-radius: 12px;
    background-color: var(--surface);
    box-shadow: 0 6px 14px var(--tone-border);
    line-height: 1;
}

.date-nav-month {
    width: 100%;
    padding: 0.3125rem 0;
    background-color: var(--tone);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.date-nav-day {
    padding: 0.375rem 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-1);
}

.month-nav {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.75rem;
}

.month-nav-label {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 132px;
    justify-content: center;
    font-size: 1rem;
}

/* Daily: bulk bar */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--surface-2);
}

.bulk-select {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
    cursor: pointer;
}

.bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}

.bulk-actions .quick-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background-color: var(--surface);
    color: var(--tone);
    border-color: var(--tone-border);
}

/* Daily: one-click P/A/H/L/W segmented control */
.mark-segment {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background-color: var(--surface-2);
}

.mark-segment-btn {
    min-width: 32px;
    height: 28px;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    font-size: 0.75rem;
    font-weight: 700;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.mark-segment-btn:hover {
    background-color: var(--tone-bg);
    color: var(--tone);
}

.mark-segment-btn.active {
    background-color: var(--tone);
    color: #fff;
    box-shadow: 0 2px 6px var(--tone-border);
}

.list-table > tbody > tr.is-unmarked-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

.list-table > tbody > tr.times-row > td {
    padding: 0 !important;
    box-shadow: none !important;
}

.time-pair {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.hours-figure {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.hours-figure small {
    margin-left: 1px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
}

/* Monthly heatmap */
.heatmap-wrap {
    max-height: 70vh;
}

.heatmap {
    font-size: 0.75rem;
}

.heatmap > :not(caption) > * > * {
    padding: 0.375rem 0.125rem !important;
}

.heatmap .heatmap-name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 210px;
    padding-left: 1rem !important;
    padding-right: 0.75rem !important;
    background-color: var(--surface);
    box-shadow: 1px 0 0 var(--border-subtle);
}

.heatmap thead .heatmap-name {
    z-index: 3;
    background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.heatmap-day {
    min-width: 30px;
    text-align: center;
}

.heatmap thead .heatmap-day {
    font-size: 0.6875rem;
    line-height: 1.1;
}

.heatmap thead .heatmap-day span {
    display: block;
    font-size: 0.5625rem;
    opacity: 0.7;
}

.heatmap .heatmap-day.is-weekend {
    background-color: color-mix(in srgb, var(--text-3) 7%, transparent);
}

.heatmap thead .heatmap-day.is-today {
    color: #fff;
    background-color: var(--accent);
    border-radius: 6px 6px 0 0;
}

.heatmap tbody .heatmap-day.is-today {
    background-color: var(--accent-subtle);
}

.heatmap-total {
    min-width: 38px;
    text-align: center;
    background-color: var(--surface-2);
}

.heat-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.625rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}

a.heat-cell:hover {
    transform: scale(1.18);
    background-color: var(--tone);
    color: #fff;
}

.heat-cell.tone-success {
    background-color: var(--success);
    color: #fff;
}

.heat-cell.tone-danger {
    background-color: var(--danger);
    color: #fff;
}

.heat-cell.is-empty {
    background: repeating-linear-gradient(45deg, var(--border-subtle), var(--border-subtle) 2px, transparent 2px, transparent 5px);
}

.heat-cell.is-future {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.heat-cell-sm {
    width: 20px;
    height: 20px;
    font-size: 0.5625rem;
    vertical-align: middle;
}

.heatmap-count {
    display: inline-block;
    min-width: 1.75rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    color: var(--text-3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.heatmap-count[class*="tone-"] {
    background-color: var(--tone-bg);
    color: var(--tone);
}

/* Punch logs / geo */
.punch-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.punch-time.is-in i { color: var(--success); }
.punch-time.is-out i { color: var(--danger); }

.map-chip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    margin-top: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(15, 157, 112, 0.1);
    color: #0c8760;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
}

.map-chip:hover {
    background-color: #0c8760;
    color: #fff;
}

/* Biometric: format guide */
.format-table {
    font-size: 0.8125rem;
}

.format-table th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
}

.code-sample {
    margin: 0 0 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    background-color: #1b2033;
    color: #cfe3ff;
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Requests: review buttons + reject menu */
.review-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.review-btn.is-approve {
    border: 1px solid rgba(31, 157, 120, 0.35);
    background-color: var(--success-subtle);
    color: var(--success);
}

.review-btn.is-approve:hover {
    background-color: var(--success);
    color: #fff;
}

.review-btn.is-reject {
    border: 1px solid rgba(226, 67, 79, 0.3);
    background-color: var(--danger-subtle);
    color: var(--danger);
}

.review-btn.is-reject:hover,
.review-btn.is-reject[aria-expanded="true"] {
    background-color: var(--danger);
    color: #fff;
}

.reject-menu {
    width: 280px;
}

.list-table > tbody > tr.is-pending-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

/* Reports */
.mini-progress-bar.is-toned > span {
    background: var(--tone);
}

.report-total td {
    padding: 0.75rem !important;
    border-top: 2px solid var(--border-subtle);
    background-color: var(--surface-2);
    font-weight: 700;
    color: var(--text-1);
}

.report-total td:first-child {
    padding-left: 1rem !important;
}

@media (max-width: 767.98px) {
    .trend-chart {
        gap: 0.375rem;
        height: 160px;
    }

    .bulk-actions {
        margin-left: 0;
    }
}

/* ---------- Leave types: policy cards, switch, rule chips, toggle cards ---------- */
.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.policy-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--tone);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, var(--tone-bg) 0, transparent 50%),
        var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out;
}

.policy-grid .policy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 24, 40, 0.08);
}

.policy-card.is-inactive {
    border-top-color: var(--border-subtle);
    background: var(--surface);
}

.policy-card.is-inactive .policy-card-icon,
.policy-card.is-inactive .policy-card-figure,
.policy-card.is-inactive .policy-card-rules,
.policy-card.is-inactive .policy-card-stats {
    filter: grayscale(1);
    opacity: 0.6;
}

.policy-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.policy-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background-color: var(--tone);
    color: #fff;
    font-size: 1.375rem;
    box-shadow: 0 6px 14px var(--tone-border);
}

.policy-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-1);
}

.policy-card-title a {
    color: inherit;
    text-decoration: none;
}

.policy-card-title a:hover {
    color: var(--tone);
}

.policy-card-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.policy-preview-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tone);
}

.policy-card-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.policy-card-days {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tone);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.policy-card-unit {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
}

.policy-card-accrual {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--text-3);
}

.policy-card-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.rule-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rule-chip.is-yes {
    background-color: var(--tone-bg);
    color: var(--tone);
}

.rule-chip.is-no {
    border: 1px dashed var(--border-subtle);
    color: var(--text-3);
}

.policy-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.policy-card-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
}

.policy-card-stats strong {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.policy-card-stats span {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-3);
    text-align: center;
}

.policy-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-subtle);
}

/* iOS-style switch (a <button> with .is-on, or driven by a sibling checkbox) */
.switch-btn {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: 38px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--border-subtle);
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}

.switch-btn::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(20, 24, 40, 0.25);
    transition: transform 0.15s ease-out;
}

.switch-btn.is-on,
input:checked ~ .switch-btn {
    background-color: var(--success);
}

.switch-btn.is-on::after,
input:checked ~ .switch-btn::after {
    transform: translateX(16px);
}

/* Toggle cards: a whole card acting as a checkbox */
.toggle-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.toggle-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}

.toggle-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1.125rem;
}

.toggle-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.toggle-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
}

.toggle-card-hint {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.toggle-card:has(input:checked) {
    border-color: var(--tone-border);
    background-color: var(--tone-bg);
}

.toggle-card:has(input:checked) .toggle-card-icon {
    background-color: var(--tone);
    color: #fff;
}

.toggle-card:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.carry-limit {
    margin-top: 0.875rem;
    padding: 0.875rem;
    border: 1px dashed var(--tone-border, var(--border-subtle));
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
}

.carry-limit[hidden] {
    display: none;
}

/* ---------- Leave apply: type picker, live summary ---------- */
.leave-type-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.5rem;
}

.leave-type-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.leave-type-option[hidden] {
    display: none;
}

.leave-type-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.leave-type-option:hover {
    border-color: var(--tone-border);
}

.leave-type-option-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1.0625rem;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.leave-type-option-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.leave-type-option-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
}

.leave-type-option-balance {
    font-size: 0.6875rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.leave-type-option:has(input:checked) {
    border-color: var(--tone);
    background-color: var(--tone-bg);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.leave-type-option:has(input:checked) .leave-type-option-icon {
    background-color: var(--tone);
    color: #fff;
}

.leave-type-option:has(input:checked) .leave-type-option-balance {
    color: var(--tone);
    font-weight: 600;
}

.leave-type-option:has(input:focus-visible) {
    outline: 2px solid var(--tone);
    outline-offset: 2px;
}

.leave-type-option.is-empty .leave-type-option-balance {
    color: var(--danger);
}

/* Live summary panel (retints to the chosen leave type) */
.leave-summary {
    --tone: #5369f8;
    --tone-border: rgba(83, 105, 248, 0.35);
    position: sticky;
    top: 76px;
    padding: 1.25rem;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.26) 0, transparent 45%),
        linear-gradient(145deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 70%, #1b2033) 100%);
    color: #fff;
    box-shadow: 0 12px 26px var(--tone-border);
    transition: background 0.2s ease-out;
}

.leave-summary-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.leave-summary-who {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.leave-summary-type {
    font-size: 0.8125rem;
    opacity: 0.88;
}

.leave-summary-days {
    margin-top: 0.875rem;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.leave-summary-days small {
    font-size: 0.9375rem;
    font-weight: 600;
    opacity: 0.85;
}

.leave-summary-dates {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    opacity: 0.9;
}

.leave-balance {
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.14);
}

.leave-balance-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.leave-balance-row + .leave-balance-row {
    margin-top: 0.25rem;
}

.leave-balance-row.is-total {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 700;
}

.leave-balance-row .text-danger {
    color: #ffd2d6 !important;
}

.leave-alert {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.leave-alert.is-warning {
    background-color: #fff4dc;
    color: #8a5a00;
}

.leave-alert.is-danger {
    background-color: #ffe3e6;
    color: #b0232f;
}

.leave-summary .btn-light {
    color: var(--tone);
}

.leave-summary-note {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    text-align: center;
    opacity: 0.75;
}

.date-range-cell {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ---------- Leave balance matrix ---------- */
.balance-wrap {
    max-height: 72vh;
}

.balance-matrix .balance-name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 220px;
    background-color: var(--surface);
    box-shadow: 1px 0 0 var(--border-subtle);
}

.balance-matrix thead .balance-name {
    z-index: 3;
    background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.balance-col {
    min-width: 150px;
}

.balance-col-head {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--tone);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
}

.balance-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    width: 100%;
    min-width: 120px;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    text-align: left;
    transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out, transform 0.12s ease-out;
}

.balance-cell:not(:disabled):hover,
.balance-cell[aria-expanded="true"] {
    border-color: var(--tone);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.balance-cell:disabled {
    cursor: default;
    opacity: 1;
}

.balance-cell-value {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.balance-cell-value small {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
}

.balance-cell-bar {
    height: 5px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.balance-cell-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--success);
}

.balance-cell.is-amber .balance-cell-bar > span { background-color: var(--warning); }
.balance-cell.is-amber .balance-cell-value { color: var(--warning); }
.balance-cell.is-danger .balance-cell-bar > span { background-color: var(--danger); }
.balance-cell.is-danger .balance-cell-value { color: var(--danger); }

.balance-cell.is-none {
    border-style: dashed;
    background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--surface-2) 5px, var(--surface-2) 10px);
}

.balance-cell-empty {
    padding: 0.25rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tone);
}

.balance-cell:disabled .balance-cell-empty {
    color: var(--text-3);
}

.balance-na {
    display: block;
    color: var(--border-subtle);
    text-align: center;
}

.balance-editor {
    width: 300px;
}

.balance-editor-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.balance-editor-head .policy-card-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    border-radius: 10px;
}

.balance-editor .font-11 {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 0.125rem;
}

.balance-editor-math {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.125rem 0.5rem;
    margin: 0.75rem 0;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.balance-editor-math dt {
    font-weight: 500;
    color: var(--text-3);
}

.balance-editor-math dd {
    margin: 0;
    text-align: right;
    color: var(--text-2);
}

.balance-editor-math .is-total {
    padding-top: 0.25rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
}

/* ---------- Leave approval inbox ---------- */
.approval-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.approval-card {
    display: grid;
    grid-template-columns: auto minmax(180px, 1.1fr) minmax(210px, 1.2fr) minmax(240px, 2fr) 140px;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--tone);
    border-radius: var(--radius);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.approval-card:hover {
    box-shadow: 0 10px 24px rgba(20, 24, 40, 0.07);
}

.approval-card.is-urgent {
    background: linear-gradient(90deg, rgba(226, 67, 79, 0.04) 0%, transparent 40%), var(--surface);
}

.approval-card.is-selected {
    border-color: var(--success);
    border-left-color: var(--success);
    background-color: var(--success-subtle);
}

.approval-card:not(:has(.approval-select)) {
    grid-template-columns: minmax(180px, 1.1fr) minmax(210px, 1.2fr) minmax(240px, 2fr) 140px;
}

.approval-select {
    width: 18px;
    height: 18px;
    margin: 0;
}

.approval-who {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

.approval-leave {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.approval-dates {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.approval-days {
    margin-left: 0.375rem;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tone);
    font-variant-numeric: tabular-nums;
}

.approval-days small {
    margin-left: 0.1875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
}

.approval-context {
    min-width: 0;
}

.approval-reason {
    margin: 0 0 0.5rem;
    padding: 0.375rem 0.625rem;
    border-left: 3px solid var(--tone-border);
    border-radius: 0 6px 6px 0;
    background-color: var(--surface-2);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.approval-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.approval-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: 999px;
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.6875rem;
    font-weight: 500;
}

.approval-fact strong {
    color: var(--text-1);
}

.approval-fact em {
    font-style: normal;
    font-weight: 700;
}

.approval-fact.is-good {
    background-color: var(--success-subtle);
    color: var(--success);
}

.approval-fact.is-warn {
    background-color: var(--warning-subtle);
    color: var(--warning);
}

.approval-fact.is-bad,
.approval-fact.is-bad strong {
    background-color: var(--danger-subtle);
    color: var(--danger);
}

.approval-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.approval-actions .review-btn {
    justify-content: center;
    padding: 0.375rem 0.75rem;
}

@media (max-width: 1199.98px) {
    .approval-card,
    .approval-card:not(:has(.approval-select)) {
        grid-template-columns: auto 1fr 1fr;
    }

    .approval-context {
        grid-column: 2 / -1;
    }

    .approval-actions {
        grid-column: 2 / -1;
        flex-direction: row;
    }

    .approval-actions > * {
        flex: 1 1 0;
    }
}

@media (max-width: 575.98px) {
    .approval-card,
    .approval-card:not(:has(.approval-select)) {
        grid-template-columns: auto 1fr;
    }

    .approval-leave,
    .approval-context,
    .approval-actions {
        grid-column: 1 / -1;
    }
}

/* ---------- Leave calendar: month grid, chips, timeline ---------- */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--border-subtle);
}

.cal-dow {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--accent) 70%, var(--text-1));
}

.cal-dow.is-weekend {
    color: var(--text-3);
}

.cal-day {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 118px;
    min-width: 0;
    padding: 0.375rem 0.375rem 0.5rem;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--surface);
}

.cal-day:nth-child(7n) {
    border-right: 0;
}

.cal-day.is-weekend {
    background-color: color-mix(in srgb, var(--text-3) 5%, var(--surface));
}

.cal-day.is-outside {
    background-color: var(--surface-2);
}

.cal-day.is-outside .cal-day-num {
    color: var(--border-subtle);
}

.cal-day.is-holiday {
    background: linear-gradient(180deg, rgba(227, 78, 131, 0.07) 0%, transparent 70%), var(--surface);
}

.cal-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-2);
}

.cal-day.is-today .cal-day-num {
    background-color: var(--accent);
    color: #fff;
    box-shadow: 0 3px 8px var(--accent-subtle);
}

.cal-day-count {
    min-width: 1.25rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
}

.cal-holiday {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 5px;
    background-color: rgba(227, 78, 131, 0.12);
    color: #cc3d70;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-chip {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    min-width: 0;
    padding: 0.125rem 0.375rem 0.125rem 0.125rem;
    border-radius: 999px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.6875rem;
    font-weight: 600;
}

.cal-chip.is-pending {
    background-color: transparent;
    border: 1px dashed var(--tone-border);
}

.cal-chip-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--tone);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
}

.cal-chip.is-pending .cal-chip-avatar {
    background-color: var(--surface);
    color: var(--tone);
    box-shadow: inset 0 0 0 1px var(--tone-border);
}

.cal-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-chip-swatch {
    justify-content: center;
    width: 26px;
    height: 20px;
    padding: 0;
    flex-shrink: 0;
}

.cal-more {
    padding: 0 0.375rem;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 0.6875rem;
    font-weight: 700;
}

.cal-more-menu {
    width: 240px;
}

/* Timeline view: continuous bars across day cells */
.timeline > tbody > tr > td.heatmap-day {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.timeline-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 22px;
    padding-left: 0.3125rem;
    background-color: var(--tone);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: visible;
}

.timeline-bar.is-start {
    margin-left: 3px;
    border-radius: 6px 0 0 6px;
}

.timeline-bar.is-end {
    margin-right: 3px;
    border-radius: 0 6px 6px 0;
}

.timeline-bar.is-start.is-end {
    border-radius: 6px;
}

.timeline-bar.is-pending {
    background: repeating-linear-gradient(45deg, var(--tone-bg), var(--tone-bg) 4px, transparent 4px, transparent 8px);
    color: var(--tone);
    box-shadow: inset 0 0 0 1px var(--tone-border);
}

.heatmap thead .heatmap-day.is-holiday {
    background-color: rgba(227, 78, 131, 0.14);
    color: #cc3d70;
}

@media (max-width: 767.98px) {
    .cal-day {
        min-height: 86px;
        padding: 0.25rem;
    }

    .cal-chip-name {
        display: none;
    }
}

/* Comp off: evidence chips */
.evidence {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Leave reports */
.trend-chart.trend-chart-12 {
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
}

.stack-bar > span.is-hatched {
    background: repeating-linear-gradient(45deg, var(--tone), var(--tone) 3px, var(--tone-bg) 3px, var(--tone-bg) 6px);
}

.type-usage-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.type-usage-pct {
    margin-left: auto;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--tone);
    font-variant-numeric: tabular-nums;
}

.type-usage-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    color: var(--text-3);
}

.type-usage-foot strong {
    color: var(--text-1);
}

/* ---------- Shift master: 24h tracks, coverage chart, time blocks ---------- */
.shift-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background-color: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
    overflow: hidden;
}

.shift-track-card {
    height: 18px;
    margin-top: 0.25rem;
}

.shift-track-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 75%, #fff));
}

.shift-track-grace {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55) 2px, transparent 2px, transparent 5px);
    border-radius: 999px 0 0 999px;
}

.shift-track-break {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(20, 24, 40, 0.08);
}

.shift-track-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--border-subtle);
}

.shift-track-now {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(226, 67, 79, 0.18);
}

.shift-track-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.1875rem;
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
}

/* Coverage chart (all shifts over one day) */
.coverage {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.coverage-axis,
.coverage-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 0.75rem;
}

.coverage-scale {
    position: relative;
    height: 14px;
}

.coverage-scale span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-3);
}

.coverage-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-2);
}

/* Card time block */
.shift-times {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.shift-times > div {
    display: flex;
    flex-direction: column;
}

.shift-time-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
}

.shift-time {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.shift-time.tone-text {
    font-size: 1.375rem;
    color: var(--tone);
}

.shift-time small {
    margin-left: 1px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
}

/* Form preview */
.shift-preview {
    padding: 0.875rem 1rem;
    border: 1px dashed var(--tone-border, var(--border-subtle));
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
}

.shift-preview-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-2);
}

.shift-preview-facts strong {
    color: var(--text-1);
}

/* ---------- Roster planning board ---------- */
.roster-wrap {
    max-height: 72vh;
}

.roster-board .roster-name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 230px;
    max-width: 260px;
    background-color: var(--surface);
    box-shadow: 1px 0 0 var(--border-subtle);
}

.roster-board thead .roster-name,
.roster-board tfoot .roster-name {
    z-index: 3;
    background-color: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.roster-board .roster-day {
    min-width: 118px;
    padding: 0.375rem !important;
    vertical-align: top;
}

.roster-board thead .roster-day {
    vertical-align: middle;
}

.roster-board .roster-day.is-weekend {
    background-color: color-mix(in srgb, var(--text-3) 5%, var(--surface));
}

.roster-board thead .roster-day.is-today {
    background-color: var(--accent);
    color: #fff;
}

.roster-board tbody .roster-day.is-today,
.roster-board tfoot .roster-day.is-today {
    background-color: var(--accent-subtle);
}

.roster-day-head {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.roster-dow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.roster-date {
    font-size: 1rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}

.roster-day.is-today .roster-menu-btn {
    color: #fff;
}

.roster-menu-btn {
    width: 22px;
    height: 22px;
    font-size: 0.875rem;
}

.roster-holiday {
    margin-top: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    background-color: rgba(227, 78, 131, 0.14);
    color: #cc3d70;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roster-total {
    min-width: 72px;
    text-align: center;
}

/* Cells */
.roster-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.0625rem;
    width: 100%;
    min-height: 48px;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: left;
    transition: transform 0.1s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}

.roster-cell.has-shift {
    border-left: 3px solid var(--tone);
    background-color: var(--tone-bg);
}

.roster-cell.is-off {
    border: 1px dashed var(--border-subtle);
    background-color: transparent;
}

.roster-cell:not(:disabled):hover,
.roster-cell[aria-expanded="true"] {
    box-shadow: 0 0 0 3px var(--tone-bg, var(--accent-subtle));
    border-color: var(--tone, var(--accent));
}

.roster-cell:disabled {
    cursor: default;
    opacity: 1;
}

.roster-cell.is-saving {
    opacity: 0.55;
}

.roster-cell.is-moved {
    animation: kanban-pop 0.7s ease-out;
}

.roster-cell-code {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--tone, var(--text-3));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.roster-cell.is-off .roster-cell-code {
    font-family: inherit;
    font-weight: 500;
    color: var(--text-3);
}

.roster-cell-time {
    font-size: 0.625rem;
    color: var(--text-3);
    white-space: nowrap;
}

.roster-cell.has-leave {
    background-image: repeating-linear-gradient(45deg, rgba(124, 92, 252, 0.08), rgba(124, 92, 252, 0.08) 4px, transparent 4px, transparent 8px);
}

.roster-cell-leave {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0 0.3125rem;
    border-radius: 4px;
    background-color: #7c5cfc;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
}

/* Picker */
.roster-picker {
    width: 250px;
}

.roster-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    margin-bottom: 0.25rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    transition: background-color 0.1s ease-out;
}

.roster-option:hover {
    background-color: var(--tone-bg, var(--surface-2));
}

.roster-option.is-current {
    border-color: var(--tone-border, var(--border-subtle));
    background-color: var(--tone-bg, var(--surface-2));
}

.roster-option-code {
    flex-shrink: 0;
    min-width: 42px;
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    background-color: var(--tone, var(--surface-2));
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 800;
    text-align: center;
}

.roster-option.is-off-option .roster-option-code {
    background-color: var(--surface-2);
    color: var(--text-3);
    border: 1px dashed var(--border-subtle);
}

.roster-option-name {
    display: flex;
    flex-direction: column;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.2;
}

.roster-option-name small {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-3);
}

.roster-option i {
    color: var(--tone, var(--text-2));
}

/* Coverage footer */
.roster-coverage td {
    background-color: var(--surface-2);
    border-top: 2px solid var(--border-subtle);
}

.roster-coverage-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.roster-coverage-cell .tag {
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
}

/* ---------- Assign shift: people picker, shift cards, weekday pills ---------- */
.assign-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.assign-toolbar .list-search {
    min-width: 200px;
}

.assign-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.125rem;
}

.assign-person {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}

.assign-person[hidden] {
    display: none;
}

.assign-person > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.assign-person:hover {
    border-color: var(--tone-border, var(--border-subtle));
}

.assign-person-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.assign-person-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assign-person-meta {
    font-size: 0.6875rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assign-person-check {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--border-subtle);
    transition: color 0.12s ease-out;
}

.assign-person:has(input:checked) {
    border-color: var(--tone);
    background-color: var(--tone-bg);
}

.assign-person:has(input:checked) .assign-person-check {
    color: var(--tone);
}

.assign-person:has(input:focus-visible) {
    outline: 2px solid var(--tone);
    outline-offset: 2px;
}

.assign-shifts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.625rem;
}

.assign-shift {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--tone);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.assign-shift > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.assign-shift:hover {
    border-color: var(--tone-border);
    border-top-color: var(--tone);
}

.assign-shift-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assign-shift-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assign-shift-icon {
    color: var(--tone);
    font-size: 1.125rem;
}

.assign-shift-time {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.assign-shift-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.6875rem;
    color: var(--text-3);
}

.assign-shift-facts i {
    color: var(--tone);
}

.assign-shift:has(input:checked) {
    border-color: var(--tone);
    background-color: var(--tone-bg);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.assign-shift:has(input:focus-visible) {
    outline: 2px solid var(--tone);
    outline-offset: 2px;
}

.weekday-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.weekday-pill {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.weekday-pill > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.weekday-pill > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 36px;
    padding: 0 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background-color: var(--surface);
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.12s ease-out;
}

.weekday-pill.is-weekend > span {
    background-color: var(--surface-2);
}

.weekday-pill > input:checked + span {
    border-color: var(--tone);
    background-color: var(--tone);
    color: #fff;
}

.weekday-pill > input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.weekday-presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-left: 0.5rem;
}

.weekday-presets .quick-chip {
    margin: 0;
}

#assign-submit:disabled {
    opacity: 0.6;
}

.assign-shift .shift-track {
    display: block;
    height: 10px;
}

/* ---------- Weekly schedule: read-only grid + by-day agenda ---------- */
.week-grid .roster-cell {
    cursor: default;
}

.week-grid .roster-cell-code .ti {
    font-size: 0.75rem;
}

.week-hours-col {
    min-width: 110px;
}

.week-hours {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.week-hours-bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.week-hours-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #0e90d2);
}

.week-hours.is-over .week-hours-bar > span {
    background: var(--danger);
}

.week-hours-flag {
    align-self: flex-start;
    padding: 0 0.375rem;
    border-radius: 4px;
    background-color: rgba(239, 77, 86, 0.12);
    color: var(--danger);
    font-size: 0.625rem;
    font-weight: 700;
}

.week-foot {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.week-foot span {
    color: var(--text-3);
    font-size: 0.75rem;
}

.week-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    overflow-x: auto;
}

.week-day {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

.week-day.is-weekend {
    background-color: color-mix(in srgb, var(--text-3) 4%, var(--surface));
}

.week-day.is-today {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.week-day-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.625rem;
}

.week-day-dow {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
}

.week-day-date {
    font-size: 0.75rem;
    color: var(--text-3);
}

.week-shift {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-left: 3px solid var(--tone);
    border-radius: 8px;
    background-color: var(--tone-bg);
}

.week-shift-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.week-shift-head .roster-option-code {
    min-width: 0;
}

.week-shift-time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
}

.week-shift-count {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--tone);
}

.week-people {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.week-people li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-1);
}

.week-people .list-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    font-size: 0.5625rem;
}

.week-day-empty {
    padding: 1rem 0.5rem;
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    color: var(--text-3);
    font-size: 0.75rem;
    text-align: center;
}

.week-day-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.week-day-foot .tag {
    font-size: 0.625rem;
}

/* ---------- Night shift report ---------- */
.night-track-col {
    min-width: 190px;
}

.night-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.list-table tbody tr.is-today-row > td {
    background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.list-chips .quick-chip.is-active {
    border-color: var(--accent);
    background-color: var(--accent);
    color: #fff;
}

.heat-cell.tone-violet {
    background-color: #7c5cfc;
    color: #fff;
}

.heat-cell.is-clash {
    box-shadow: inset 0 0 0 2px #e34e83;
}

/* ---------- Flexible shift: check-in window tracking ---------- */
.flex-shift-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.flex-shift-card {
    padding: 0.75rem;
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--tone-bg) 60%, var(--surface));
}

.flex-shift-card.is-inactive {
    opacity: 0.6;
}

.flex-shift-card .roster-option-code {
    background-color: var(--tone);
}

.shift-track-bar.is-soft {
    background: color-mix(in srgb, var(--tone) 28%, transparent);
}

.flex-window {
    position: absolute;
    top: -2px;
    bottom: -2px;
    min-width: 3px;
    border-radius: 4px;
    background-color: var(--tone, #14b8a6);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.flex-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background-color: var(--tone);
    box-shadow: 0 0 0 2px var(--surface);
    z-index: 1;
}

.flex-track-col {
    min-width: 200px;
}

.flex-track-col .shift-track {
    overflow: visible;
}

.flex-hours-col {
    min-width: 120px;
}

/* ---------- Shift swaps: request form, preview, swap pair ---------- */
.swap-people {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 0.75rem;
}

.swap-flip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--tone-border, var(--border-subtle));
    border-radius: 50%;
    background-color: var(--tone-bg, var(--surface-2));
    color: var(--tone, var(--accent));
    font-size: 1.125rem;
    transition: transform 0.2s ease-out;
}

.swap-flip:hover {
    transform: rotate(180deg);
}

.swap-preview {
    position: sticky;
    top: 76px;
    height: 100%;
    padding: 1.25rem;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.26) 0, transparent 45%),
        linear-gradient(145deg, #5369f8 0%, #7c5cfc 100%);
    color: #fff;
    box-shadow: 0 12px 26px rgba(83, 105, 248, 0.3);
}

.swap-preview.has-problem {
    background: linear-gradient(145deg, #7a8199 0%, #4b5068 100%);
    box-shadow: none;
}

.swap-preview-date {
    margin-top: 0.375rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.swap-preview-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
}

.swap-preview-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 0;
    text-align: center;
}

.swap-preview-name {
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swap-preview-after {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.swap-preview-icon {
    font-size: 1.25rem;
    opacity: 0.9;
}

.swap-chip {
    padding: 0.3125rem 0.375rem;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--tone, var(--text-2));
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swap-chip small {
    display: block;
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
}

.swap-chip.is-off {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 500;
}

.swap-preview .btn-light {
    color: #5369f8;
}

.swap-pair {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    gap: 0.625rem;
}

.swap-pair-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--accent-subtle);
    color: var(--accent);
}

.swap-mini {
    display: inline-block;
    margin-top: 0.125rem;
    padding: 0 0.375rem;
    border-radius: 4px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.swap-mini.is-off {
    background-color: var(--surface-2);
    color: var(--text-3);
    font-weight: 500;
}

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

    .swap-flip {
        justify-self: center;
        transform: rotate(90deg);
    }
}

/* ---------- Overtime rules ---------- */
.ot-coverage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 0;
}

.ot-coverage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
}

.ot-coverage-row.is-gap {
    background-color: color-mix(in srgb, #f59e0b 6%, var(--surface));
}

.ot-coverage-shift {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.ot-coverage-rule {
    min-width: 0;
}

.ot-coverage-warn {
    margin-top: 0.125rem;
    color: #b45309;
    font-size: 0.6875rem;
    font-weight: 600;
}

.ot-figures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.625rem;
}

.ot-figure {
    display: block;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.ot-figure small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0;
}

.ot-figure.tone-text {
    color: var(--tone);
}

.ot-figure.tone-text small {
    color: inherit;
}

.ot-day,
.ot-preview-day {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.ot-day-regular {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #14b8a6, #0e90d2);
}

.ot-day-overtime {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: repeating-linear-gradient(45deg, var(--tone, #f59e0b), var(--tone, #f59e0b) 4px, color-mix(in srgb, var(--tone, #f59e0b) 65%, #fff) 4px, color-mix(in srgb, var(--tone, #f59e0b) 65%, #fff) 8px);
}

.ot-day-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.5625rem;
    color: var(--text-3);
}

.ot-day-scale.is-light {
    color: rgba(255, 255, 255, 0.75);
}

.ot-example {
    margin-top: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.75rem;
}

.ot-example i {
    color: var(--tone);
}

/* Form */
.ot-shift-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.5rem;
}

.ot-shift-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.ot-shift-option.is-inactive {
    opacity: 0.65;
}

.ot-shift-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ot-shift-option:hover {
    border-color: var(--tone-border);
}

.ot-shift-option-code {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 34px;
    padding: 0 0.375rem;
    border-radius: 10px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 800;
}

.ot-shift-option-code .ti {
    font-size: 1.125rem;
}

.ot-shift-option-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ot-shift-option-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
}

.ot-shift-option-meta {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.ot-shift-option-taken {
    font-size: 0.625rem;
    font-weight: 600;
    color: #b45309;
}

.ot-shift-option:has(input:checked) {
    border-color: var(--tone);
    background-color: var(--tone-bg);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.ot-shift-option:has(input:checked) .ot-shift-option-code {
    background-color: var(--tone);
    color: #fff;
}

.ot-shift-option:has(input:focus-visible) {
    outline: 2px solid var(--tone);
    outline-offset: 2px;
}

.ot-rates {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.ot-rate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 108px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    text-align: left;
    transition: all 0.12s ease-out;
}

.ot-rate strong {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-1);
}

.ot-rate span {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.ot-rate:hover {
    border-color: var(--tone-border);
}

.ot-rate.is-active {
    border-color: var(--tone);
    background-color: var(--tone);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.ot-rate.is-active strong,
.ot-rate.is-active span {
    color: #fff;
}

.ot-rate-custom {
    width: 120px;
}

.ot-preview-day {
    margin-top: 1rem;
    overflow: visible;
    background-color: rgba(255, 255, 255, 0.2);
}

.ot-preview-day .ot-day-regular {
    border-radius: 999px 0 0 999px;
    background: rgba(255, 255, 255, 0.85);
}

.ot-preview-day .ot-day-overtime {
    border-radius: 0 999px 999px 0;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 4px, transparent 4px, transparent 8px);
}

.ot-preview-worked {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background-color: #1b2033;
    box-shadow: 0 0 0 2px #fff;
    transition: left 0.1s ease-out;
}

.ot-range {
    height: 1rem;
}

.ot-rate-input {
    width: 70px;
    margin-left: 0.25rem;
    padding: 0 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.75rem;
}

.ot-rate-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

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

    .ot-coverage-row {
        grid-template-columns: 1fr;
    }

    .ot-coverage-row > .ti-arrow-right {
        display: none;
    }
}

/* ---------- Overtime requests ---------- */
.ot-leaders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.25rem 1rem;
    padding: 0.5rem 1rem 0.875rem;
}

.ot-leader {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.12s ease-out;
}

.ot-leader:hover {
    background-color: var(--surface-2);
}

.ot-leader-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ot-leader-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ot-leader .week-hours-bar > span {
    background: linear-gradient(90deg, #e34e83, #f59e0b);
}

.ot-summary {
    --tone: #e34e83;
    --tone-border: rgba(227, 78, 131, 0.35);
}

.leave-summary.has-problem {
    background: linear-gradient(145deg, #7a8199 0%, #4b5068 100%);
    box-shadow: none;
}

.list-table tbody tr.is-selected > td {
    background-color: color-mix(in srgb, var(--success) 8%, var(--surface));
}

/* ---------- Attendance rules ---------- */
.rule-timeline {
    margin-top: 1rem;
}

.rule-timeline-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.rule-timeline-ontime {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: var(--success);
}

.rule-timeline-grace {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: repeating-linear-gradient(45deg, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.35) 4px, rgba(34, 197, 94, 0.18) 4px, rgba(34, 197, 94, 0.18) 8px);
    transition: width 0.15s ease-out;
}

.rule-timeline-late {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(239, 77, 86, 0.35), rgba(239, 77, 86, 0.75));
    transition: left 0.15s ease-out;
}

.rule-timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-2);
}

.day-scale {
    position: relative;
    height: 30px;
    border-radius: 8px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.day-scale > span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: left 0.15s ease-out, width 0.15s ease-out;
}

.day-scale-short {
    left: 0;
    background-color: #ef4d56;
}

.day-scale-half {
    background-color: #f59e0b;
}

.day-scale-full {
    right: 0;
    background-color: #22c55e;
}

.rules-impact {
    --tone: #0e9f92;
    --tone-border: rgba(14, 159, 146, 0.35);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.26) 0, transparent 45%),
        linear-gradient(145deg, #14b8a6 0%, #0e7490 100%);
}

.impact-group {
    margin-top: 1rem;
}

.impact-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.impact-head span:last-child {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.85;
}

.impact-bar {
    display: flex;
    height: 12px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.impact-part {
    height: 100%;
    transition: width 0.2s ease-out;
}

.impact-part.is-good,
.impact-dot.is-good {
    background-color: #bbf7d0;
}

.impact-part.is-warn,
.impact-dot.is-warn {
    background-color: #fde68a;
}

.impact-part.is-bad,
.impact-dot.is-bad {
    background-color: #fecaca;
}

.impact-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
}

.impact-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.25rem;
    border-radius: 50%;
}

.ot-rate-sm {
    min-width: 88px;
    padding: 0.375rem 0.625rem;
}

.ot-rate-sm strong {
    font-size: 1rem;
}

fieldset:disabled .stepper .btn-icon,
fieldset:disabled .quick-chip,
fieldset:disabled .ot-rate,
fieldset:disabled .toggle-card {
    pointer-events: none;
    opacity: 0.7;
}

/* ---------- Holiday calendar ---------- */
.list-table tbody tr.is-past-row > td {
    opacity: 0.6;
}

.year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.875rem;
    padding: 1rem;
}

.year-month {
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--tone);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

.year-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
}

.year-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.year-dow {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--text-3);
}

.year-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 6px;
    color: var(--text-2);
    font-size: 0.6875rem;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

a.year-day:hover {
    background-color: var(--accent-subtle);
    color: var(--accent);
}

.year-day.is-weekend {
    color: var(--text-3);
    background-color: color-mix(in srgb, var(--text-3) 6%, transparent);
}

.year-day.is-today {
    box-shadow: inset 0 0 0 2px var(--accent);
    font-weight: 700;
}

.year-day.is-holiday {
    background-color: #e34e83;
    color: #fff;
    font-weight: 700;
    cursor: help;
}

.year-month-list {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0 0;
    border-top: 1px dashed var(--border-subtle);
    list-style: none;
    font-size: 0.6875rem;
    color: var(--text-2);
}

.year-month-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.year-month-list strong {
    display: inline-block;
    min-width: 1.25rem;
    color: #e34e83;
}

.holiday-weekday {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.875rem;
    font-weight: 600;
}

.holiday-card {
    position: sticky;
    top: 76px;
    padding: 1.25rem;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.28) 0, transparent 45%),
        linear-gradient(145deg, #e34e83 0%, #7c5cfc 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 26px rgba(227, 78, 131, 0.3);
}

.holiday-card-month {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.holiday-card-day {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.holiday-card-name {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    word-break: break-word;
}

.holiday-card-when {
    font-size: 0.8125rem;
    opacity: 0.9;
}

.holiday-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.holiday-card-tags .tag {
    background-color: rgba(255, 255, 255, 0.9);
}

.holiday-card-next {
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.14);
    text-align: left;
}

.holiday-card-next ul {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
    font-size: 0.8125rem;
}

.holiday-card .leave-alert {
    text-align: left;
}

/* ---------- Leave policy ---------- */
.toggle-card.is-muted {
    opacity: 0.55;
}

.sandwich-demo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.sandwich-demo > span:not(.sandwich-demo-result) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 0.125rem 0.25rem;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 700;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.sandwich-demo .is-leave,
.sandwich-demo .is-off.is-counted {
    background-color: #5369f8;
    color: #fff;
}

.sandwich-demo .is-off {
    background-color: var(--surface-2);
    color: var(--text-3);
    border: 1px dashed var(--border-subtle);
}

.sandwich-demo-result {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tone);
}

.policy-limit {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) 1.6fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--border-subtle);
}

.policy-limit:first-child {
    padding-top: 0;
}

.policy-limit:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.policy-limit-label {
    display: flex;
    flex-direction: column;
}

.policy-limit-label strong {
    font-size: 0.875rem;
    color: var(--text-1);
}

.policy-limit-label span {
    font-size: 0.75rem;
    color: var(--text-3);
}

.policy-limit-input {
    width: 90px;
}

.policy-try {
    --tone: #7c5cfc;
    --tone-border: rgba(124, 92, 252, 0.35);
}

.policy-try-dates {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
}

.policy-try-dates .form-control {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.375rem;
    padding-right: 0.25rem;
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.95);
}

.policy-try-half {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
}

.policy-try-half[hidden] {
    display: none;
}

.policy-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 0.625rem;
}

.policy-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 700;
}

.policy-day.is-work {
    background-color: #fff;
    color: #5b3fd6;
}

.policy-day.is-sandwich {
    background-color: #fde68a;
    color: #8a5a00;
}

.policy-day.is-weekend {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    border: 1px dashed rgba(255, 255, 255, 0.45);
}

.policy-day.is-holiday {
    background-color: #fbcfe8;
    color: #9d174d;
    text-decoration: line-through;
}

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

/* ---------- Working hours ---------- */
.wh-days {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.wh-day {
    display: grid;
    grid-template-columns: 150px 230px minmax(80px, 1fr) 56px 32px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}

.wh-day.is-working {
    border-left: 3px solid var(--tone, #5369f8);
}

.wh-day.is-off {
    background-color: var(--surface-2);
}

.wh-day.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 77, 86, 0.12);
}

.wh-day-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    cursor: pointer;
}

.wh-day-toggle > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wh-day-toggle:has(input:focus-visible) .switch-btn {
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.wh-day-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
}

.wh-day-name.is-weekend {
    color: #cc3d70;
}

.wh-day-times {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.wh-day-times .form-control {
    min-width: 0;
}

.wh-day-hours {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wh-day-off {
    display: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
}

.wh-day.is-off .wh-day-times,
.wh-day.is-off .wh-day-track,
.wh-day.is-off .wh-day-hours,
.wh-day.is-off .wh-day-copy {
    display: none;
}

.wh-day.is-off .wh-day-off {
    display: block;
    grid-column: 2 / -1;
}

.wh-scale {
    margin-left: calc(150px + 230px + 1.5rem + 0.75rem);
    margin-right: calc(56px + 32px + 1.5rem + 0.75rem);
}

.wh-summary {
    --tone: #5369f8;
}

.wh-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.375rem;
    margin-top: 1rem;
}

.wh-week-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.wh-week-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 72px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.wh-week-bar > span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.9);
    transition: height 0.2s ease-out;
}

.wh-week-col.is-off .wh-week-bar {
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12) 4px, transparent 4px, transparent 8px);
}

.wh-week-label {
    font-size: 0.6875rem;
    font-weight: 700;
    opacity: 0.85;
}

@media (max-width: 991.98px) {
    .wh-day {
        grid-template-columns: 1fr auto;
    }

    .wh-day-times {
        grid-column: 1 / -1;
    }

    .wh-day-track,
    .wh-scale {
        display: none;
    }
}

/* ---------- Salary components ---------- */
.comp-code {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 34px;
    padding: 0 0.5rem;
    border-radius: 10px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.comp-types {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.comp-share-col {
    min-width: 170px;
}

.comp-share {
    margin-top: 0.25rem;
    max-width: 160px;
}

.comp-share > span {
    background: linear-gradient(90deg, #22c55e, #14b8a6);
}

.comp-edit-menu {
    width: 300px;
}

.list-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
}

/* ---------- HRM dashboard ---------- */
.dash-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}

.dash-section-title .ti {
    font-size: 0.9375rem;
    color: var(--text-3);
}

.dash-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--border-subtle);
}

/* Hero: clickable stat boxes + highlight chips */
.hrm-hero .section-hero-stats > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.hrm-hero .section-hero-stats > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(20, 24, 40, 0.08);
}

.hrm-hero .section-hero-stats > a.is-alert {
    border-color: rgba(226, 67, 79, 0.3);
    background-color: var(--danger-subtle);
}

.hrm-hero .section-hero-stats > a.is-alert strong {
    color: var(--danger);
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.highlight-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--tone-border, var(--border-subtle));
    border-radius: 999px;
    background-color: var(--tone-bg, var(--surface-2));
    color: var(--tone, var(--text-2));
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.12s ease-out;
}

a.highlight-chip:hover {
    transform: translateY(-1px);
    color: var(--tone, var(--text-1));
}

.highlight-chip.is-banner {
    display: flex;
    width: 100%;
    border-radius: var(--radius-sm);
}

.my-team-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.25rem 0 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.8125rem;
    text-decoration: none;
}

.my-team-strip:hover {
    color: var(--text-1);
}

/* Lists */
.side-list-subhead {
    padding: 0.5rem 1rem 0.25rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.side-list-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1rem;
    margin-top: auto;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    color: var(--text-2);
    text-decoration: none;
}

.side-list-foot a {
    text-decoration: none;
}

.side-list-empty.is-neutral {
    color: var(--text-3);
    background-color: var(--surface-2);
    text-decoration: none;
}

.side-list.h-100 {
    display: flex;
    flex-direction: column;
}

.side-list.h-100 > .card-body {
    flex-grow: 0;
}

.attention-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1rem;
}

.attention-row {
    position: relative;
}

.attention-row::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: transparent;
}

.attention-row.is-danger::before {
    background-color: var(--danger);
}

.attention-row.is-warning::before {
    background-color: var(--warning, #f59e0b);
}

.attention-row-meta {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.attention-row-children {
    padding: 0.25rem 0 0.375rem;
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--border-subtle);
}

.attention-child {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem 0.5rem 3.25rem;
}

.attention-child .review-btn {
    padding: 0.25rem 0.5rem;
}

.attention-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.attention-tags .tag {
    font-size: 0.625rem;
}

/* Who's around */
.stack-bar-lg {
    height: 12px;
}

.stack-bar.is-all-unmarked > .is-unmarked {
    background: repeating-linear-gradient(45deg, var(--border-subtle), var(--border-subtle) 4px, transparent 4px, transparent 8px);
}

.stack-legend a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-2);
    text-decoration: none;
}

.stack-legend a:hover {
    color: var(--text-1);
}

.off-day-banner {
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    background-color: rgba(227, 78, 131, 0.1);
    color: #b0306a;
    font-size: 0.8125rem;
    font-weight: 600;
}

.presence-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-subtle);
}

.face-stack {
    display: inline-flex;
    align-items: center;
    padding-left: 8px;
}

.face-stack > .list-avatar {
    width: 28px;
    height: 28px;
    margin-left: -8px;
    border: 2px solid var(--surface);
    font-size: 0.625rem;
}

.face-stack > .list-avatar.is-pending {
    opacity: 0.55;
    border-style: dashed;
    border-color: var(--text-3);
}

.face-stack-sm > .list-avatar {
    width: 22px;
    height: 22px;
    font-size: 0.5625rem;
}

.face-stack-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: -6px;
    padding: 0 0.25rem;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.5625rem;
    font-weight: 700;
}

/* Week planner */
.week-days-compact {
    grid-template-columns: repeat(7, minmax(68px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem;
}

.week-days-compact .week-day {
    gap: 0.25rem;
    padding: 0.5rem;
    min-height: 120px;
}

.week-days-compact .week-day-head {
    margin-bottom: 0.25rem;
}

.week-day-holiday {
    display: block;
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    background-color: rgba(227, 78, 131, 0.14);
    color: #cc3d70;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-day-meta {
    font-size: 0.6875rem;
    color: var(--text-2);
    text-decoration: none;
}

a.week-day-meta:hover {
    color: var(--accent);
}

.week-day-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.week-flag {
    align-self: flex-start;
    padding: 0 0.375rem;
    border-radius: 4px;
    background-color: var(--danger-subtle);
    color: var(--danger);
    font-size: 0.5625rem;
    font-weight: 700;
}

.tone-text-pink { color: #cc3d70; }
.tone-text-amber { color: #b45309; }
.tone-text-teal { color: #0d9488; }
.tone-text-rose { color: #e11d48; }
.tone-text-violet { color: #7c5cfc; }

/* Month close */
.pay-state {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.8125rem;
    font-weight: 700;
}

.health-row .status-dot {
    flex-shrink: 0;
}

.holiday-card.is-static,
.leave-summary.is-static {
    position: static;
    top: auto;
}

.holiday-card-compact {
    padding: 1rem;
}

.holiday-card-compact .holiday-card-day {
    font-size: 2.75rem;
}

/* Trends */
.chart-box {
    position: relative;
    min-height: 260px;
}

.mix-row + .mix-row {
    margin-top: 1rem;
}

.mix-row-title {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-1);
}

.dept-bars {
    padding-top: 0.75rem;
    grid-template-columns: 1fr;
}

/* Manager + employee dashboards */
.team-week {
    table-layout: fixed;
}

.team-week th:first-child,
.team-week td:first-child {
    width: 190px;
}

.team-week th:not(:first-child),
.team-week td:not(:first-child) {
    text-align: center;
}

.team-week th.is-holiday,
.team-week td.is-holiday {
    background-color: rgba(227, 78, 131, 0.07);
}

.team-week td.is-weekend {
    background-color: var(--surface-2);
}

.team-week th.is-today {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.team-week .roster-cell {
    min-height: 36px;
    align-items: center;
    padding: 0.25rem;
}

.profile-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(83, 105, 248, 0.12) 0, transparent 50%),
        var(--surface);
}

.profile-hero .list-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
}

.profile-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-2);
}

.type-usage + .type-usage {
    margin-top: 0.875rem;
}

.heatmap-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    gap: 4px;
}

.heatmap-strip .heat-cell {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
}

.heatmap-strip .heat-cell.is-today {
    box-shadow: 0 0 0 2px var(--accent);
}

@media (max-width: 767.98px) {
    .hrm-hero .section-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .presence-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
    }

    .presence-row .face-stack {
        display: none;
    }

    .attention-child {
        padding-left: 1rem;
        flex-wrap: wrap;
    }
}

/* ---------- Salary structures ---------- */
.struct-amount-col {
    min-width: 200px;
}

.struct-bar {
    margin-top: 0.25rem;
    max-width: 180px;
}

.struct-bar > span {
    background: linear-gradient(90deg, #22c55e, #14b8a6);
}

.struct-mix {
    height: 8px;
    min-width: 160px;
    max-width: 260px;
}

.struct-mix-text {
    max-width: 260px;
}

.struct-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px dashed var(--tone-border, var(--border-subtle));
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
}

.struct-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.struct-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 44px 150px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--tone);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    transition: opacity 0.12s ease-out;
}

.struct-row.is-empty {
    border-left-color: var(--border-subtle);
}

.struct-row.is-empty .comp-code {
    opacity: 0.55;
}

.struct-row-name {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.struct-row-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.struct-row-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--tone);
    transition: width 0.15s ease-out;
}

.struct-row-share {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.struct-row-input {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.struct-summary {
    --tone: #0d9488;
    --tone-border: rgba(13, 148, 136, 0.35);
}

.struct-summary .stack-bar {
    background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 575.98px) {
    .struct-row {
        grid-template-columns: auto minmax(0, 1fr) 110px;
    }

    .struct-row-share {
        display: none;
    }
}

/* ---------- Payroll runs ---------- */
.run-periods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 0.5rem;
}

.run-period {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.run-period:hover {
    border-color: var(--tone-border, var(--accent));
    color: inherit;
}

.run-period.is-active {
    border-color: var(--tone, var(--accent));
    background-color: var(--tone-bg, var(--accent-subtle));
    box-shadow: 0 0 0 3px var(--tone-bg, var(--accent-subtle));
}

.run-period-month {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.1;
}

.run-period-year {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.run-period-state {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
}

.run-period.is-done .run-period-state {
    color: var(--success);
}

.run-note {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg);
    color: var(--text-1);
    font-size: 0.8125rem;
}

.run-note > .ti {
    font-size: 1.125rem;
    color: var(--tone);
}

.run-lines {
    margin-top: 0.75rem;
    border-top: 1px dashed var(--border-subtle);
}

.run-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0;
    border-bottom: 1px dashed var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-2);
}

.run-lines strong {
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.run-lines em {
    font-style: normal;
    color: var(--text-3);
}

/* ---------- Payslips ---------- */
.payslip-parts {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: var(--text-3);
    white-space: nowrap;
}

.side-list-item.is-current {
    background-color: var(--tone-bg, var(--accent-subtle));
}

.payslip-doc {
    padding: 1.75rem;
    margin-bottom: 0;
    border-top: 3px solid var(--accent);
}

.payslip-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.payslip-company {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.25;
}

.payslip-company-meta {
    font-size: 0.75rem;
    color: var(--text-3);
}

.payslip-head-side {
    text-align: right;
    flex-shrink: 0;
}

.payslip-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.payslip-period {
    margin-bottom: 0.375rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.2;
}

.payslip-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.payslip-person-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
}

.payslip-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 1rem 0 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
}

.payslip-meta dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.payslip-meta dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
}

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

.payslip-block {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.payslip-block-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payslip-block-head span {
    margin-left: auto;
    font-weight: 600;
    opacity: 0.8;
}

.payslip-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.875rem;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-2);
}

.payslip-block-head + .payslip-line {
    border-top: 0;
}

.payslip-line strong {
    font-weight: 600;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.payslip-line.is-empty {
    color: var(--text-3);
}

.payslip-line.is-total {
    margin-top: auto;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--surface-2);
    font-weight: 700;
    color: var(--text-1);
}

.payslip-line.is-total strong {
    font-weight: 800;
}

.payslip-net {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg);
}

.payslip-net-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tone);
}

.payslip-net-words {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
}

.payslip-net-formula {
    font-size: 0.75rem;
    color: var(--text-3);
}

.payslip-net-amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--tone);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.1;
}

.payslip-net-amount small {
    font-size: 0.8125rem;
    font-weight: 700;
    opacity: 0.75;
}

.payslip-employer {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-3);
}

.payslip-employer > .ti {
    font-size: 1rem;
}

.payslip-employer strong {
    display: block;
    color: var(--text-2);
}

.payslip-foot {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.6875rem;
    color: var(--text-3);
    text-align: center;
}

@media (max-width: 575.98px) {
    .payslip-doc { padding: 1rem; }
    .payslip-head { flex-direction: column; gap: 0.75rem; }
    .payslip-head-side { text-align: left; }
    .payslip-cols { grid-template-columns: 1fr; }
    .payslip-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payslip-net { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* Printing a page that holds a payslip prints the payslip only - no sidebar, top bar or side panels. */
@media print {
    body:has(.payslip-doc) .leftbar-tab-menu,
    body:has(.payslip-doc) .topbar,
    body:has(.payslip-doc) .footer,
    body:has(.payslip-doc) .no-print {
        display: none !important;
    }

    body:has(.payslip-doc),
    body:has(.payslip-doc) .page-wrapper,
    body:has(.payslip-doc) .page-content-tab,
    body:has(.payslip-doc) .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body:has(.payslip-doc) .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .payslip-doc {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .payslip-doc,
    .payslip-doc * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .payslip-block,
    .payslip-net {
        break-inside: avoid;
    }
}

/* ---------- Salary revisions ---------- */
.rev-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.rev-compare > div {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    min-width: 0;
}

.rev-compare > div:last-child {
    border-color: var(--tone-border);
    background-color: var(--tone-bg);
}

.rev-compare > .ti {
    font-size: 1.125rem;
    color: var(--text-3);
}

.rev-compare-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.rev-compare-value {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rev-compare-meta {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.rev-notes {
    max-width: 240px;
    font-size: 0.8125rem;
    color: var(--text-2);
}

/* ---------- Pick list: choose several people in a form ---------- */
.pick-list {
    max-height: 232px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
}

.pick-list.is-invalid {
    border-color: var(--danger);
}

.pick-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}

.pick-item:last-child {
    border-bottom: 0;
}

.pick-item:hover {
    background-color: var(--surface-2);
}

.pick-item:has(input:checked) {
    background-color: var(--accent-subtle);
}

.pick-item .form-check-input {
    flex-shrink: 0;
    margin: 0;
}

.pick-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

.pick-item-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
}

.pick-item-meta {
    font-size: 0.6875rem;
    color: var(--text-3);
}

/* ---------- Payroll reports ---------- */
.report-mini th {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.report-mini td {
    padding: 0.5rem;
    border-bottom: 1px dashed var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.report-mini tr:last-child td {
    border-bottom: 0;
}

.report-mini td:first-child,
.report-mini th:first-child {
    padding-left: 0;
}

.report-mini td:last-child,
.report-mini th:last-child {
    padding-right: 0;
    color: var(--text-1);
}

/* ---------- Tax slabs ---------- */
.slab-bar > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.slab-bar {
    height: 22px;
}

.slab-table td {
    vertical-align: middle;
}

.slab-add {
    display: grid;
    grid-template-columns: 1fr 1fr 0.6fr auto;
    align-items: end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--border-subtle);
}

.slab-add .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
}

.calc-result {
    height: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-sm);
    background-color: var(--tone-bg);
}

.calc-result .rev-compare-value {
    display: block;
    color: var(--tone);
}

.calc-result .run-lines > div {
    font-size: 0.75rem;
}

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

/* ---------- Breadcrumb: a pill trail beside the page title ---------- */
.page-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.page-title-box .page-title {
    min-width: 0;
}

.crumb-trail {
    max-width: 100%;
}

.page-title-box .crumb-trail .breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
    margin: 0;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background-color: var(--surface);
    font-size: 0.75rem;
    line-height: 1.2;
}

.page-title-box .crumb-trail .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    color: var(--text-3);
}

/* Chevron between steps instead of Bootstrap's slash. */
.page-title-box .crumb-trail .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    float: none;
    padding: 0 0.125rem;
    color: var(--text-3);
    font-size: 0.9375rem;
    line-height: 1;
    opacity: 0.7;
}

.page-title-box .crumb-trail .breadcrumb-item > a,
.page-title-box .crumb-trail .breadcrumb-item > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: var(--text-2);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.page-title-box .crumb-trail .breadcrumb-item > a:hover,
.page-title-box .crumb-trail .breadcrumb-item > a:focus-visible {
    background-color: var(--accent-subtle);
    color: var(--accent);
}

.page-title-box .crumb-trail .crumb-home .ti {
    font-size: 0.875rem;
}

/* The page you are on: a tinted pill, not a link. */
.page-title-box .crumb-trail .breadcrumb-item > .crumb-current {
    display: inline-block;
    max-width: 260px;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    /* On phones keep only the trail's essentials: home icon, parents, current page. */
    .page-title-box .crumb-trail .crumb-home span {
        display: none;
    }

    .page-title-box .crumb-trail .breadcrumb-item > .crumb-current {
        max-width: 160px;
    }
}

@media print {
    .crumb-trail {
        display: none;
    }
}

/* ---------- Goals ---------- */
.goal-cell {
    min-width: 220px;
    max-width: 380px;
}

/* The unallocated part of a weight budget bar. */
.goal-bar-rest {
    background-color: var(--border-subtle) !important;
}

/* ---------- KPIs ---------- */
.kpi-lib-item.is-off .fw-semibold {
    color: var(--text-3);
}

.kpi-add {
    margin-top: auto;
    padding: 0.875rem 1rem;
    border-top: 1px dashed var(--border-subtle);
    background-color: var(--surface-2);
}

/* The "actual" figure is typed straight into the scorecard row. */
.kpi-actual {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.kpi-actual .form-control {
    width: 96px;
}

/* ---------- Appraisals: three-step stage tracker ---------- */
.appr-track {
    display: flex;
    align-items: flex-start;
}

.appr-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 72px;
    text-align: center;
}

/* The line joining one step to the next. */
.appr-step + .appr-step::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--border-subtle);
}

.appr-step.is-done + .appr-step.is-done::before {
    background-color: var(--success);
}

.appr-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-subtle);
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--text-3);
    font-size: 0.75rem;
}

.appr-step.is-done .appr-dot {
    border-color: var(--success);
    background-color: var(--success);
    color: #fff;
}

.appr-label {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-2);
}

.appr-step.is-done .appr-label {
    color: var(--text-1);
}

.appr-meta {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.rating-stars {
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    color: #e0a100;
    line-height: 1.1;
}

.pick-item:has(input:disabled) {
    cursor: default;
    opacity: 0.7;
}

/* ---------- 360 feedback ---------- */
/* Star rating: radios laid out right-to-left so a star and every one before it light up together. */
.star-pick {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.125rem;
    padding: 0.125rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.star-pick.is-invalid {
    border-color: var(--danger);
}

.star-pick > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-pick > label {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--border-subtle);
    cursor: pointer;
    transition: color 0.1s ease-out, transform 0.1s ease-out;
}

.star-pick > input:checked ~ label,
.star-pick > label:hover,
.star-pick > label:hover ~ label {
    color: #e0a100;
}

.star-pick > label:hover {
    transform: scale(1.12);
}

.star-pick > input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Relationship picker: four small cards. */
.rel-pick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.rel-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}

.rel-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rel-option > .ti {
    font-size: 1.125rem;
    color: var(--tone);
}

.rel-option-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-1);
}

.rel-option-hint {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.rel-option:hover {
    border-color: var(--tone-border);
}

.rel-option:has(input:checked) {
    border-color: var(--tone);
    background-color: var(--tone-bg);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.rel-option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fb-comment {
    max-width: 360px;
    white-space: normal;
}

@media (max-width: 575.98px) {
    .rel-pick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Manager / self review ---------- */
.review-cell {
    min-width: 170px;
    max-width: 300px;
}

.review-context {
    height: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
}

/* ---------- Promotions ---------- */
/* Job titles are words, not figures: smaller than the money values this card usually holds. */
.rev-compare-value.promo-title {
    font-size: 1rem;
    line-height: 1.3;
}

.promo-move {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ---------- Performance reports ---------- */
.rating-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.3125rem 0;
}

.rating-row-label {
    flex: 0 0 34px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
}

.rating-row .mini-progress-bar {
    height: 10px;
}

.rating-row-count {
    flex: 0 0 22px;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.rank-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.6875rem;
    font-weight: 800;
}

.rank-badge.rank-1 {
    background-color: #f5c84c;
    color: #5b4300;
}

.rank-badge.rank-2 {
    background-color: #d5dae3;
    color: #3b4558;
}

.rank-badge.rank-3 {
    background-color: #e3b28a;
    color: #5a3210;
}

/* ---------- Courses: catalogue cards ---------- */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.course-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--tone, var(--accent));
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    transition: box-shadow 0.12s ease-out, border-color 0.12s ease-out;
}

.course-card:hover {
    border-color: var(--tone-border, var(--border-subtle));
    border-top-color: var(--tone, var(--accent));
    box-shadow: 0 4px 14px rgba(27, 32, 51, 0.06);
}

.course-card.is-off {
    border-top-color: var(--border-subtle);
    background-color: var(--surface-2);
}

.course-card.is-off .course-card-title,
.course-card.is-off .course-card-text {
    color: var(--text-3);
}

.course-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.course-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: var(--tone-bg, var(--accent-subtle));
    color: var(--tone, var(--accent));
    font-size: 1.125rem;
}

.course-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.course-card-tags a.tag {
    text-decoration: none;
}

.course-card-text {
    flex-grow: 1;
    margin: 0.75rem 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-2);
}

.course-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.5rem 0;
    border-top: 1px dashed var(--border-subtle);
    border-bottom: 1px dashed var(--border-subtle);
    text-align: center;
}

.course-card-stats strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.course-card-stats span {
    font-size: 0.6875rem;
    color: var(--text-3);
}

.course-card-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    min-height: 30px;
}

/* Three delivery options instead of the four relationship cards this picker was made for. */
.rel-pick.mode-pick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

    .rel-pick.mode-pick {
        grid-template-columns: 1fr;
    }
}

/* ---------- Training calendar: a session shown in a day cell (the grid itself is the leave calendar's) ---------- */
.cal-event {
    display: block;
    padding: 0.1875rem 0.375rem;
    border-left: 3px solid var(--tone);
    border-radius: 4px;
    background-color: var(--tone-bg);
    color: var(--text-1);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-event:hover {
    color: var(--tone);
}

.cal-event.is-cancelled {
    text-decoration: line-through;
    color: var(--text-3);
}

/* The row a calendar entry jumps to. */
.list-table tr:target > td {
    background-color: var(--accent-subtle);
}

/* ---------- Org chart (HRM > Employees > Org Chart): the reporting structure
   as a top-down tree of person cards. Connectors are drawn with borders on
   the list items; a card can be dragged onto another to change who that
   person reports to. ---------- */
.org-card {
    overflow: hidden;
}

.org-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.org-search {
    width: 300px;
    max-width: 100%;
}

.org-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.org-hint {
    margin: 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.75rem;
    color: var(--text-2);
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--border-subtle);
}

.org-top-drop {
    display: none;
    margin: 0.75rem 1.25rem 0;
    padding: 0.6rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
    border: 1.5px dashed var(--border-subtle);
    border-radius: var(--radius);
}

.org-top-drop.is-visible {
    display: block;
}

.org-top-drop.is-drop-target {
    color: var(--accent);
    border-color: var(--accent);
    background-color: var(--accent-subtle);
}

.org-canvas {
    overflow: auto;
    max-height: 72vh;
    padding: 1.5rem 1.25rem 2rem;
    background:
        radial-gradient(circle, rgba(92, 107, 138, 0.14) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--surface);
}

.org-tree {
    display: inline-block;
    min-width: 100%;
    --org-line: #cfd5e3;
}

.org-tree ul {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 22px 0 0;
    list-style: none;
}

.org-tree .org-roots {
    padding-top: 0;
    gap: 1.25rem;
    align-items: flex-start;
}

.org-item {
    position: relative;
    padding: 22px 8px 0;
    text-align: center;
}

.org-roots > .org-item {
    padding-top: 0;
}

/* Horizontal rail across siblings + the drop down into each one. */
.org-item::before,
.org-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 22px;
    border-top: 1.5px solid var(--org-line);
}

.org-item::after {
    right: auto;
    left: 50%;
    border-left: 1.5px solid var(--org-line);
}

.org-item:only-child::before,
.org-item:only-child::after,
.org-roots > .org-item::before,
.org-roots > .org-item::after {
    display: none;
}

.org-item:only-child {
    padding-top: 0;
}

.org-item:first-child::before,
.org-item:last-child::after {
    border: 0 none;
}

.org-item:last-child::before {
    border-right: 1.5px solid var(--org-line);
    border-radius: 0 8px 0 0;
}

.org-item:first-child::after {
    border-radius: 8px 0 0 0;
}

/* The line from a manager down to the rail of their team. */
.org-item > ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 22px;
    border-left: 1.5px solid var(--org-line);
}

.org-item.is-collapsed > ul {
    display: none;
}

.org-node {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 186px;
    padding: 0.85rem 0.75rem 0.6rem;
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(20, 24, 40, 0.05);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.org-node:hover {
    box-shadow: 0 8px 20px rgba(20, 24, 40, 0.1);
}

.org-node[draggable="true"] {
    cursor: grab;
}

.org-node.is-dragging {
    opacity: 0.45;
}

.org-node.is-drop-target {
    border-color: var(--accent);
    background-color: var(--accent-subtle);
    box-shadow: 0 0 0 3px var(--accent-subtle);
    transform: scale(1.03);
}

.org-node.needs-attention {
    border-top-color: var(--warning);
}

.org-node.is-moved {
    animation: org-moved 2.4s ease-out 1;
}

@keyframes org-moved {
    0%, 60% { box-shadow: 0 0 0 4px var(--success-subtle), 0 8px 20px rgba(31, 157, 120, 0.25); border-color: var(--success); }
    100% { box-shadow: 0 2px 6px rgba(20, 24, 40, 0.05); }
}

.org-tree.is-searching .org-node:not(.is-match) {
    opacity: 0.35;
}

.org-node.is-match {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.org-node-avatar.list-avatar {
    width: 46px;
    height: 46px;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.org-node-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.25;
    text-decoration: none;
}

.org-node-name:hover {
    color: var(--accent);
}

.org-node-role {
    font-size: 0.6875rem;
    color: var(--text-2);
    line-height: 1.3;
}

.org-node-chip {
    margin-top: 0.2rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.625rem;
    font-weight: 600;
}

.org-node-chip-leave {
    background-color: var(--warning-subtle);
    color: var(--warning);
}

.org-node-flag {
    margin-top: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--warning);
    line-height: 1.3;
}

.org-node-flag.is-info {
    color: var(--text-3);
}

.org-node-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border-subtle);
}

.org-node-toggle,
.org-node-move {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
}

.org-node-move {
    margin-left: auto;
    background-color: var(--surface-2);
    color: var(--text-2);
}

.org-node-move:hover,
.org-node-toggle:hover {
    background-color: var(--accent);
    color: #fff;
}

.org-node-chevron {
    transition: transform 0.15s ease;
}

.org-item.is-collapsed > .org-node .org-node-chevron {
    transform: rotate(180deg);
}

.org-node-solo {
    font-size: 0.625rem;
    color: var(--text-3);
}

/* The list of possible managers in the change-manager dialog. */
.org-pick-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 46vh;
    overflow-y: auto;
}

.org-pick {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.org-pick:hover {
    background-color: var(--surface-2);
}

.org-pick.is-chosen {
    border-color: var(--accent);
    background-color: var(--accent-subtle);
}

.org-pick input {
    flex-shrink: 0;
}

.org-pick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--surface-2);
    color: var(--text-2);
}

.org-pick-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-1);
}

.org-pick-text small {
    font-size: 0.6875rem;
    color: var(--text-2);
}

/* Reporting line on an employee profile. */
.report-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.report-line-person {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-1);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

a.report-line-person:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.report-line-person.is-current {
    border-color: var(--accent);
    background-color: var(--accent-subtle);
}

.report-line-person small {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-2);
}

.report-line-arrow {
    color: var(--text-3);
}

/* ---------- HRM > Settings > Approval Levels: one row per request type
   with a 1 / 2 / 3 levels choice. ---------- */
.approval-levels {
    display: flex;
    flex-direction: column;
}

.approval-level-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.approval-level-row:last-child {
    border-bottom: 0;
}

.approval-level-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.approval-level-name {
    flex: 1 1 200px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
}

.approval-level-choice {
    display: inline-flex;
    gap: 0.35rem;
}

.approval-level-choice .btn-check:checked + .btn {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- Import / export panel (CRM leads and similar bulk tools) ---------- */
.import-export-pane {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    height: 100%;
    padding: 0.875rem;
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.import-export-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1.1rem;
}

/* ---------- Account hierarchy tree (CRM) ---------- */
.hierarchy-node {
    padding: 0.375rem 0;
}

.hierarchy-node-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background-color: var(--surface);
}

.hierarchy-node-icon {
    color: var(--text-3);
    font-size: 1rem;
}

.hierarchy-children {
    border-left: 2px solid var(--border-subtle);
    margin-left: 0.75rem;
}

/* ---------- Inventory: movement trend, stock locations ---------- */
.inv-trend {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
    height: 180px;
}

.inv-trend-day {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.inv-trend-bars {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    border-bottom: 1px solid var(--border-subtle);
}

.inv-trend-bars > span {
    width: 40%;
    max-width: 14px;
    min-height: 0;
    border-radius: 3px 3px 0 0;
}

.inv-trend-in,
.inv-legend-in::before {
    background-color: var(--success);
}

.inv-trend-out,
.inv-legend-out::before {
    background-color: var(--warning);
}

.inv-trend-label {
    margin-top: 0.25rem;
    color: var(--text-3);
    font-size: 0.6875rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.inv-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.75rem;
}

.inv-legend::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.inv-places {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.inv-place {
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.6875rem;
    line-height: 1.5;
    text-decoration: none;
}

.inv-place:hover {
    background-color: var(--accent-subtle);
    color: var(--accent);
}

.inv-place strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Checkbox shown as a toggleable chip (variant value picker) */
.inv-chip-check {
    position: relative;
    cursor: pointer;
}

.inv-chip-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inv-chip-check span {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-2);
    font-size: 0.8125rem;
    transition: background-color 0.1s ease-out, border-color 0.1s ease-out;
}

.inv-chip-check:hover span {
    border-color: var(--accent);
}

.inv-chip-check input:checked + span {
    border-color: var(--accent);
    background-color: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

.inv-chip-check input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Inventory planning & valuation screens ----------
   Reorder, forecast, valuation, ageing, expiry, ABC/XYZ, availability and
   the planning workbench. Everything reads the shared tone variables
   (--tone / --tone-bg) so a status keeps its colour on every screen. */
.inv-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sparkline (x-inv-sparkline) */
.inv-spark {
    display: block;
    overflow: visible;
}

.inv-spark-line {
    fill: none;
    stroke: var(--tone, var(--accent));
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.inv-spark-area {
    fill: var(--tone-bg, var(--accent-subtle));
}

.inv-spark-dot {
    fill: var(--tone, var(--accent));
}

.inv-spark-flat {
    stroke: var(--border-subtle);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}

/* Coverage bar: fill = stock vs target, optional tick = reorder point. */
.inv-cover {
    position: relative;
    min-width: 110px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--border-subtle);
}

.inv-cover > span {
    display: block;
    width: var(--fill, 0%);
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--tone, var(--accent));
}

.inv-cover > i {
    position: absolute;
    top: -3px;
    left: var(--mark, 0%);
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background-color: var(--text-2);
}

.inv-cover-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--text-3);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

/* Up / down change */
.inv-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inv-delta.is-up { color: var(--success); }
.inv-delta.is-down { color: var(--danger); }
.inv-delta.is-flat { color: var(--text-3); }

/* Stacked share bar (ageing buckets, expiry buckets, costing methods) */
.inv-stack {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--border-subtle);
}

.inv-stack > span {
    height: 100%;
    background-color: var(--tone);
}

.inv-stack > span + span {
    border-left: 2px solid var(--surface);
}

.inv-stack-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.875rem;
}

.inv-stack-legend a,
.inv-stack-legend > div {
    display: block;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}

.inv-stack-legend a:hover,
.inv-stack-legend a.is-active {
    border-color: var(--tone-border, var(--accent));
    background-color: var(--tone-bg, var(--accent-subtle));
}

.inv-stack-legend .inv-stack-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-2);
    font-size: 0.75rem;
}

.inv-stack-legend .inv-stack-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--tone);
}

.inv-stack-legend .inv-stack-value {
    display: block;
    margin-top: 0.125rem;
    color: var(--text-1);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inv-stack-legend .inv-stack-sub {
    color: var(--text-3);
    font-size: 0.6875rem;
}

/* ABC / XYZ matrix */
.inv-matrix {
    display: grid;
    grid-template-columns: 2.25rem repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
}

.inv-matrix-head {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.inv-matrix-cell {
    display: block;
    min-height: 74px;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--tone-border, var(--border-subtle));
    border-radius: var(--radius);
    background-color: var(--tone-bg, var(--surface-2));
    color: var(--text-1);
    text-decoration: none;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.inv-matrix-cell:hover {
    color: var(--text-1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.inv-matrix-cell.is-active {
    outline: 2px solid var(--tone, var(--accent));
    outline-offset: 1px;
}

.inv-matrix-cell.is-empty {
    opacity: 0.55;
}

.inv-matrix-code {
    color: var(--tone, var(--text-1));
    font-size: 0.8125rem;
    font-weight: 700;
}

.inv-matrix-count {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inv-matrix-sub {
    display: block;
    color: var(--text-2);
    font-size: 0.6875rem;
    line-height: 1.3;
}

/* Pareto chart (value share bars + cumulative line) */
.inv-pareto {
    display: block;
    width: 100%;
    height: 180px;
}

.inv-pareto .inv-pareto-bar { fill: var(--accent-subtle); }
.inv-pareto .inv-pareto-bar.is-a { fill: rgba(31, 157, 120, 0.35); }
.inv-pareto .inv-pareto-bar.is-b { fill: rgba(200, 134, 10, 0.35); }
.inv-pareto .inv-pareto-bar.is-c { fill: rgba(92, 107, 138, 0.3); }

.inv-pareto .inv-pareto-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
}

.inv-pareto .inv-pareto-cut {
    stroke: var(--text-3);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.inv-pareto text {
    fill: var(--text-3);
    font-size: 10px;
}

/* Availability checker result */
.inv-check-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--tone-border);
    border-radius: var(--radius);
    background-color: var(--tone-bg);
}

.inv-check-result > i {
    color: var(--tone);
    font-size: 1.5rem;
    line-height: 1;
}

.inv-check-title {
    color: var(--tone);
    font-weight: 600;
}

/* Bulk action bar: appears once rows are ticked. */
.inv-bulkbar {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--accent-subtle);
    font-size: 0.8125rem;
}

.inv-bulkbar.is-visible {
    display: flex;
}

.inv-bulkbar .inv-bulkbar-count {
    font-weight: 600;
}

/* Small "how it works" line under a card title */
.inv-howto {
    color: var(--text-3);
    font-size: 0.75rem;
}

/* Inline numeric input inside a table row */
.inv-qty-input {
    width: 92px;
    text-align: right;
}

/* Settings strip above a list (thresholds, methods, cutoffs) */
.inv-params {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--surface-2);
}

.inv-params .form-label {
    margin-bottom: 0.125rem;
    color: var(--text-3);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.inv-params .form-control,
.inv-params .form-select {
    min-width: 110px;
}

/* Period bar chart (demand history + dashed forecast bar), on the .inv-trend grid. */
.inv-trend-bars > span.inv-bar-history,
.inv-trend-bars > span.inv-bar-forecast {
    position: relative;
    width: 58%;
    max-width: 36px;
    border-radius: 4px 4px 0 0;
}

.inv-trend-bars > span.inv-bar-history {
    background-color: var(--accent);
    opacity: 0.85;
}

.inv-trend-bars > span.inv-bar-forecast {
    border: 1.5px dashed var(--accent);
    border-bottom: 0;
    background: repeating-linear-gradient(135deg, var(--accent-subtle) 0 6px, transparent 6px 12px);
}

.inv-bar-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 2px;
    color: var(--text-2);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* ==========================================================================
   Settings home (admin/settings/dashboard.blade.php): hero with setup
   progress, setup checklist, settings grouped by section, apps list.
   Section cards read --tone / --tone-bg / --tone-border from a .tone-* class.
   ========================================================================== */
.min-w-0 { min-width: 0; }

.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 100% 0%, var(--accent-subtle) 0%, transparent 55%),
        linear-gradient(135deg, var(--accent-subtle) 0%, transparent 60%),
        #fff;
}

.settings-hero-brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }

.settings-hero-logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border-subtle);
}

.settings-hero-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent)));
    box-shadow: 0 6px 16px var(--accent-subtle);
}

.settings-hero-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.settings-hero-title { font-weight: 700; letter-spacing: -0.01em; }
.settings-hero-sub { font-size: 0.8125rem; color: var(--text-2, #6b7280); }

.settings-hero-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.5rem 0.875rem 0.5rem 0.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border-subtle);
}

.settings-ring { width: 56px; height: 56px; transform: rotate(-90deg); }
.settings-ring circle { fill: none; stroke-width: 7; }
.settings-ring-track { stroke: var(--border-subtle); }
.settings-ring-value { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.6s ease-out; }
.settings-hero-percent { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }

/* Setup checklist */
.settings-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.75rem 0.75rem;
}

.settings-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.625rem;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease-out;
}

.settings-check:hover { background-color: var(--accent-subtle); color: inherit; text-decoration: none; }

.settings-check-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px dashed var(--border-subtle);
    color: var(--sidebar-menu-title, #8b95a8);
    font-size: 0.875rem;
}

.settings-check.is-done .settings-check-mark { border: 0; background: var(--success); color: #fff; }
.settings-check-label { display: block; font-size: 0.8125rem; font-weight: 600; }
.settings-check.is-done .settings-check-label { color: var(--text-2, #6b7280); text-decoration: line-through; text-decoration-color: rgba(107, 114, 128, 0.5); }
.settings-check-hint { display: block; font-size: 0.75rem; color: var(--text-2, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-check-go { margin-left: auto; color: var(--accent); opacity: 0; transition: opacity 0.15s ease-out, transform 0.15s ease-out; }
.settings-check:hover .settings-check-go { opacity: 1; transform: translateX(2px); }

/* Search */
.settings-search { position: relative; width: 240px; max-width: 100%; }
.settings-search i { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--sidebar-menu-title, #8b95a8); pointer-events: none; }
.settings-search .form-control { padding-left: 2rem; border-radius: 999px; }

/* Section cards */
.settings-section { border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; margin-bottom: 0; }

.settings-section-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(90deg, var(--tone-bg), transparent 85%);
    border-bottom: 1px solid var(--border-subtle);
}

.settings-section-icon,
.settings-link-icon,
.settings-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
}

.settings-section-icon { width: 34px; height: 34px; background: var(--tone); color: #fff; font-size: 1.125rem; box-shadow: 0 4px 10px var(--tone-border); }
.settings-section-links { padding: 0.375rem; }

.settings-link,
.settings-app {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5625rem 0.625rem;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease-out;
}

.settings-link:hover { background-color: var(--tone-bg); color: inherit; text-decoration: none; }
.settings-link-icon { width: 32px; height: 32px; background: var(--tone-bg); color: var(--tone); font-size: 1.0625rem; transition: background-color 0.15s ease-out, color 0.15s ease-out; }
.settings-link:hover .settings-link-icon { background: var(--tone); color: #fff; }
.settings-link-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--sidebar-link-hover-text, #1f2937); }
.settings-link-desc { display: block; font-size: 0.75rem; line-height: 1.35; color: var(--text-2, #6b7280); }
.settings-link-go { margin-left: auto; color: var(--tone); opacity: 0.35; transition: opacity 0.15s ease-out, transform 0.15s ease-out; }
.settings-link:hover .settings-link-go { opacity: 1; transform: translateX(2px); }

/* Apps list and avatars */
.settings-app:hover { background-color: var(--tile-hue-subtle); color: inherit; text-decoration: none; }
.settings-app-icon { width: 36px; height: 36px; background: var(--tile-hue-subtle); color: var(--tile-hue); font-size: 1.125rem; }
.settings-app-icon i { color: inherit; }

.settings-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-subtle);
}

@media (max-width: 767.98px) {
    .settings-hero { flex-direction: column; align-items: stretch; padding: 1rem; }
    .settings-hero-progress { align-self: flex-start; }
    .settings-checklist { grid-template-columns: minmax(0, 1fr); }
    .settings-search { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .settings-ring-value, .settings-check-go, .settings-link-go { transition: none; }
}

/* ==========================================================================
   Settings spreadsheet import (admin/settings/import/*): numbered steps,
   drop zone, and highlighted problem rows in the preview.
   ========================================================================== */
.import-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.import-steps li { display: flex; gap: 0.875rem; align-items: flex-start; }

.import-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-subtle);
}

.import-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.import-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.import-drop i { font-size: 1.75rem; color: var(--accent); }
.import-drop:hover, .import-drop.is-over { border-color: var(--accent); background: var(--accent-subtle); }
.import-drop.has-file { border-style: solid; border-color: var(--success); background: var(--success-subtle); }
.import-drop.has-file i { color: var(--success); }

.import-row-bad td { background-color: rgba(226, 67, 79, 0.04); }

/* Invoice groups (admin/finance/invoice-groups/*) */
.group-number-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px dashed var(--tone-border, var(--border-subtle));
    background: var(--tone-bg, var(--surface-2));
}

.group-number-preview .font-monospace { font-size: 1.0625rem; color: var(--tone, var(--accent)); }
.group-roles { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 0.25rem; }
[data-token] { cursor: pointer; }
[data-token]:hover { background-color: var(--tone-border); }

/* ==========================================================================
   CRM campaigns (admin/crm/campaigns/*): channel chips and cards, progress
   bars, live message preview. Tones come from the shared .tone-* tokens.
   ========================================================================== */
.campaign-type-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--tone-bg);
    color: var(--tone);
    font-size: 1.0625rem;
}

.campaign-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.campaign-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.3s ease-out; }
.campaign-bar.is-over > span { background: var(--danger); }

.campaign-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }

.campaign-starter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 110px;
    padding: 0.875rem 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: var(--tone);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.15s ease-out;
}

.campaign-starter i { font-size: 1.5rem; }
.campaign-starter:hover { background: var(--tone-bg); border-color: var(--tone-border); color: var(--tone); transform: translateY(-2px); text-decoration: none; }

/* Channel picker */
.campaign-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625rem; }

.campaign-type {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem 0.75rem;
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.campaign-type input { position: absolute; opacity: 0; pointer-events: none; }
.campaign-type:hover { border-color: var(--tone-border); }
.campaign-type:has(input:checked) { border-color: var(--tone); background: var(--tone-bg); box-shadow: 0 0 0 3px var(--tone-bg); }
.campaign-type:has(input:focus-visible) { outline: 2px solid var(--tone); outline-offset: 2px; }

.campaign-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tone-bg);
    color: var(--tone);
    font-size: 1.125rem;
}

.campaign-type:has(input:checked) .campaign-type-icon { background: var(--tone); color: #fff; }
.campaign-type-name { font-size: 0.875rem; font-weight: 600; }
.campaign-type-hint { font-size: 0.6875rem; line-height: 1.35; color: var(--text-2); }

/* Preview */
.campaign-preview-sticky { position: sticky; top: 80px; }

.campaign-preview {
    padding: 0.875rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: #fff;
}

.campaign-preview-from { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border-subtle); }

.campaign-preview-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
}

.campaign-preview-body { margin-top: 0.5rem; white-space: normal; word-wrap: break-word; max-height: 360px; overflow: auto; }

/* SMS / WhatsApp read as a chat bubble. */
.campaign-preview[data-type="sms"] .campaign-preview-body,
.campaign-preview[data-type="whatsapp"] .campaign-preview-body {
    display: inline-block;
    max-width: 92%;
    padding: 0.625rem 0.75rem;
    border-radius: 14px 14px 14px 4px;
    background: var(--surface-2);
}

.campaign-preview[data-type="whatsapp"] { background: #efeae2; }
.campaign-preview[data-type="whatsapp"] .campaign-preview-body { background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }

@media (max-width: 991.98px) {
    .campaign-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .campaign-preview-sticky { position: static; }
}

@media (max-width: 575.98px) {
    .campaign-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Campaign members (admin/crm/campaign-members): slim campaign header with
   reach figures, the add-people dialog (tabs, server-search picker with
   chips), and coloured status pills.
   ========================================================================== */
.members-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-subtle) 0%, transparent 60%), #fff;
}

.members-head-main { display: flex; align-items: center; gap: 0.875rem; min-width: 0; flex: 1 1 260px; }

.members-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--accent);
    font-size: 1.25rem;
    box-shadow: 0 6px 14px var(--accent-subtle);
}

.members-head-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

.members-head-select {
    max-width: 100%;
    padding: 0 1.75rem 0 0;
    border: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235c6b8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right center / 14px;
    appearance: none;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sidebar-link-hover-text, #1f2937);
    cursor: pointer;
}

.members-head-select:focus { outline: 2px solid var(--accent-subtle); border-radius: 6px; }
.members-head-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.members-head-stats > div { font-size: 0.75rem; color: var(--text-2); line-height: 1.2; }
.members-head-stats span { display: block; font-size: 1.125rem; font-weight: 700; color: var(--sidebar-link-hover-text, #1f2937); }
.members-head-actions { display: flex; gap: 0.5rem; margin-left: auto; }

/* Status pill (a select styled to its tone) */
.member-status {
    padding: 0.1875rem 1.5rem 0.1875rem 0.625rem;
    border: 1px solid var(--tone-border);
    border-radius: 999px;
    background: var(--tone-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235c6b8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.5rem center / 10px;
    appearance: none;
    color: var(--tone);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

/* Dialog tabs */
.members-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; margin-bottom: 1rem; border-radius: 10px; background: var(--surface-2); }

.members-tab {
    flex: 1 1 0;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.members-tab:hover { color: var(--sidebar-link-hover-text, #1f2937); }
.members-tab.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(20, 24, 40, 0.1); }

/* Picker */
.picker { position: relative; }
.picker-input { position: relative; }
.picker-input i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.picker-input .form-control { padding-left: 2.25rem; }

.picker-results {
    /* In the flow (not floating), so it pushes the chips and the dialog's buttons down instead of covering them. */
    max-height: 280px;
    margin-top: 0.25rem;
    overflow: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(20, 24, 40, 0.12);
}

.picker-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: #fff;
    font-size: 0.8125rem;
    text-align: left;
}

.picker-row:last-child { border-bottom: 0; }
.picker-row:hover:not(:disabled) { background: var(--accent-subtle); }
.picker-row.is-picked { background: var(--accent-subtle); }
.picker-row.is-picked .ti-check { color: var(--accent); }
.picker-row:disabled { opacity: 0.6; cursor: default; }
.picker-empty { padding: 0.75rem; font-size: 0.8125rem; color: var(--text-2); }
.picker-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.picker-chips:empty { display: none; }

.picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
}

.picker-chip button { border: 0; background: transparent; color: inherit; font-size: 1rem; line-height: 1; padding: 0 0.25rem; }

@media (max-width: 575.98px) {
    .members-tab { font-size: 0.75rem; padding: 0.5rem 0.25rem; }
    .members-tab i { display: none; }
    .members-head-actions { margin-left: 0; width: 100%; }
}

/* Campaign form: numbered steps, delivery rows, choice pills, day chips, advanced options, delivery plan. */
.campaign-step { font-size: 1rem; font-weight: 700; line-height: 1; }

.delivery-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.delivery-row:first-of-type { padding-top: 0.25rem; }
.delivery-label { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.875rem; }

.choice-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

.choice-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: #fff;
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
}

.choice-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.choice-pill:hover { border-color: var(--tone-border, var(--accent)); }
.choice-pill.active, .choice-pill:has(input:checked) { border-color: var(--tone, var(--accent)); background: var(--tone-bg, var(--accent-subtle)); color: var(--tone, var(--accent)); }
.choice-pill:has(input:focus-visible) { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }
#c-window.is-off { opacity: 0.45; }

.day-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.day-chip { position: relative; margin: 0; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }

.day-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-2);
    transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

.day-chip input:checked + span { border-color: var(--tone, var(--accent)); background: var(--tone, var(--accent)); color: #fff; }
.day-chip input:focus-visible + span { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }

.advanced { margin-top: 0.875rem; }
.advanced > summary { list-style: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--tone, var(--accent)); }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::after { content: '\25BE'; margin-left: 0.375rem; font-size: 0.75rem; }
.advanced[open] > summary::after { content: '\25B4'; }

.delivery-plan { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.delivery-plan li { display: flex; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.4; }
.delivery-plan i { color: var(--tone, var(--accent)); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* Cold / warm email choice */
.email-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.email-kind { position: relative; margin: 0; cursor: pointer; }
.email-kind input { position: absolute; opacity: 0; pointer-events: none; }
.email-kind > span { display: block; height: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: 0.5rem; font-size: 0.8125rem; transition: background-color 0.15s ease-out, border-color 0.15s ease-out; }
.email-kind small { display: block; margin-top: 0.125rem; color: var(--text-2); font-size: 0.75rem; line-height: 1.35; }
.email-kind:hover > span { border-color: var(--tone-border, var(--accent)); }
.email-kind input:checked + span { border-color: var(--tone, var(--accent)); background: var(--tone-bg, var(--accent-subtle)); }
.email-kind input:focus-visible + span { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }
@media (max-width: 575.98px) { .email-kinds { grid-template-columns: minmax(0, 1fr); } }

/* Mail Setup: one row per connected mailbox */
.mailbox-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); }
.mailbox-row:first-child { padding-top: 0; }
.mailbox-row:last-of-type { border-bottom: 0; }

/* SMS / WhatsApp template variables: one row per placeholder */
.template-vars { padding: 0.75rem 0.875rem; border: 1px dashed var(--tone-border, var(--border-subtle)); border-radius: 0.5rem; background: var(--tone-bg, transparent); }
.template-var { display: grid; grid-template-columns: 5.5rem minmax(0, 11rem) minmax(0, 1fr); gap: 0.5rem; align-items: center; margin-top: 0.375rem; }
.template-var code { font-size: 0.8125rem; color: var(--tone, var(--accent)); }
@media (max-width: 575.98px) {
    .template-var { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .template-var input { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .delivery-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Finance invoices: list insights, form, detail page ---------- */
.fi-table .list-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.6875rem;
    flex: 0 0 auto;
}

.fi-progress {
    height: 5px;
    margin-top: 0.25rem;
    border-radius: 999px;
    background-color: var(--border-subtle);
    overflow: hidden;
}

.fi-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--accent);
    transition: width 0.3s ease-out;
}

.fi-progress > span.is-done {
    background-color: var(--success);
}

.fi-progress-lg {
    height: 8px;
    margin: 0.75rem 0;
}

.fi-signals {
    margin-left: 0.25rem;
    color: var(--text-3);
    font-size: 0.8125rem;
}

.fi-signals i + i {
    margin-left: 0.125rem;
}

.fi-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background-color: var(--tone);
}

.fi-dot-billed { background-color: var(--accent); }
.fi-dot-collected { background-color: var(--success); }

.fi-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.75rem;
}

.fi-age-bar {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background-color: var(--border-subtle);
}

.fi-age-bar > span {
    background-color: var(--tone);
}

.fi-age-legend {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin-top: 0.875rem;
}

.fi-age-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.4rem;
    min-width: 0;
    font-size: 0.75rem;
}

.fi-age-label {
    color: var(--text-2);
    white-space: nowrap;
}

.fi-age-value {
    flex: 1 1 100%;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fi-age-count {
    display: none;
}

.fi-trend {
    display: flex;
    gap: 0.75rem;
    height: 120px;
}

.fi-trend-month {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.fi-trend-bars {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    border-bottom: 1px solid var(--border-subtle);
}

.fi-trend-bars > span {
    width: 34%;
    max-width: 20px;
    border-radius: 3px 3px 0 0;
}

.fi-bar-billed { background-color: var(--accent); }
.fi-bar-collected { background-color: var(--success); }

.fi-trend-label {
    margin-top: 0.25rem;
    color: var(--text-3);
    font-size: 0.6875rem;
    text-align: center;
}

/* Invoice form */
.fi-customer-card {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: 0.75rem;
    line-height: 1.5;
}

.fi-lines-head,
.fi-line {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 80px 110px 72px 72px 110px 34px;
    gap: 0.5rem;
    align-items: start;
    padding: 0.625rem 1rem;
}

.fi-lines-head {
    padding-block: 0.5rem;
    background-color: var(--surface-2);
    border-block: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fi-line {
    border-bottom: 1px solid var(--border-subtle);
}

.fi-line:last-child {
    border-bottom: 0;
}

.fi-line-meta {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.fi-line-meta input {
    flex: 0 0 96px;
    width: 96px;
}

.fi-line-meta .form-control,
.fi-line-meta .form-select {
    color: var(--text-2);
    font-size: 0.75rem;
}

.fi-c-amount.ln-amount {
    padding-top: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fi-lines-foot {
    margin: 0;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
}

.fi-lines-foot > div {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
}

.fi-lines-foot dt {
    color: var(--text-2);
    font-weight: 400;
}

.fi-lines-foot dd {
    min-width: 100px;
    margin: 0;
    text-align: right;
}

.fi-lines-foot .is-total dt,
.fi-lines-foot .is-total dd {
    color: var(--text-1);
    font-weight: 700;
}

.fi-summary {
    position: sticky;
    top: 76px;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

.fi-summary-head {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.875rem;
}

.fi-summary-label {
    color: var(--text-3);
    font-size: 0.6875rem;
}

.fi-summary-rows {
    margin: 0;
    font-size: 0.8125rem;
}

.fi-summary-rows > div {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
}

.fi-summary-rows > div[hidden] {
    display: none;
}

.fi-summary-rows dt {
    color: var(--text-2);
    font-weight: 400;
}

.fi-summary-rows dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.fi-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border-subtle);
    font-weight: 600;
}

.fi-summary-total strong {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.fi-summary-note {
    margin: 0.375rem 0 0.875rem;
    color: var(--text-3);
    font-size: 0.6875rem;
}

.fi-summary .d-grid {
    margin-top: 0.875rem;
}

/* Invoice detail */
.fi-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
}

.fi-hero-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.fi-hero-title .tag {
    font-family: var(--bs-body-font-family);
    font-size: 0.75rem;
}

.fi-hero-sub {
    margin-top: 0.125rem;
    color: var(--text-2);
    font-size: 0.8125rem;
}

.fi-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

.fi-steps {
    display: flex;
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--border-subtle);
    list-style: none;
}

.fi-steps li {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    color: var(--text-3);
    font-size: 0.75rem;
    text-align: center;
}

.fi-steps li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: var(--border-subtle);
}

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

.fi-steps li.is-done {
    color: var(--text-1);
}

.fi-steps li.is-done::before {
    background-color: var(--accent);
}

.fi-step-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-subtle);
    border-radius: 50%;
    background-color: var(--surface);
    color: transparent;
    font-size: 0.75rem;
}

.is-done > .fi-step-dot {
    border-color: var(--accent);
    background-color: var(--accent);
    color: #fff;
}

.fi-step-label {
    font-weight: 600;
}

.fi-step-date {
    color: var(--text-3);
    font-size: 0.6875rem;
}

.fi-paper-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
}

.fi-paper-meta span,
.fi-paper-notes span {
    display: block;
    color: var(--text-3);
    font-size: 0.6875rem;
}

.fi-paper-table {
    font-size: 0.8125rem;
}

.fi-paper-table th {
    padding: 0.5rem 1rem;
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fi-paper-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    font-variant-numeric: tabular-nums;
}

.fi-paper-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 1rem 1.25rem;
}

.fi-paper-notes {
    flex: 1 1 240px;
    font-size: 0.8125rem;
}

.fi-paper-notes > div + div {
    margin-top: 0.5rem;
}

.fi-paper-totals {
    flex: 0 1 280px;
    width: 100%;
    margin: 0 0 0 auto;
    font-size: 0.8125rem;
}

.fi-paper-totals > div,
.fi-balance-rows > div {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
}

.fi-paper-totals dt,
.fi-balance-rows dt {
    color: var(--text-2);
    font-weight: 400;
}

.fi-paper-totals dd,
.fi-balance-rows dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.fi-paper-totals .is-total {
    margin-top: 0.375rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 1rem;
    font-weight: 700;
}

.fi-paper-totals .is-total dt {
    color: var(--text-1);
    font-weight: 700;
}

.fi-balance {
    padding: 1rem 1.25rem;
    border-top: 3px solid var(--accent);
}

.fi-balance.is-late {
    border-top-color: var(--danger);
}

.fi-balance-label {
    display: block;
    color: var(--text-2);
    font-size: 0.75rem;
}

.fi-balance-amount {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.fi-balance.is-late .fi-balance-amount {
    color: var(--danger);
}

.fi-balance-rows {
    margin: 0;
    font-size: 0.8125rem;
}

.fi-side-title {
    margin-bottom: 0.375rem;
    color: var(--text-3);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fi-timeline {
    margin: 0;
    padding: 0.875rem 1.25rem;
    list-style: none;
}

.fi-timeline li {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.875rem;
}

.fi-timeline li:last-child {
    padding-bottom: 0;
}

.fi-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 0;
    left: 13px;
    width: 2px;
    background-color: var(--border-subtle);
}

.fi-timeline-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.875rem;
}

.fi-journal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 991.98px) {
    .fi-hero {
        grid-template-columns: 1fr;
    }

    .fi-hero-actions {
        justify-content: flex-start;
    }

    .fi-summary {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .fi-age-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fi-lines-head {
        display: none;
    }

    .fi-line {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .fi-line .fi-c-desc {
        grid-column: 1 / -1;
    }

    .fi-line .fi-c-amount {
        grid-column: 1 / 3;
        text-align: left;
    }

    .fi-step-date {
        display: none;
    }
}


/* ---------- Attendance punch card ---------- */
.punch-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--tone);
}

.punch-clock {
    padding-right: 1.5rem;
    border-right: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.punch-time {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.punch-date {
    color: var(--text-2);
    font-size: 0.8125rem;
}

.punch-headline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.punch-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--tone);
    box-shadow: 0 0 0 3px var(--tone-bg);
}

.punch-sub {
    color: var(--text-2);
    font-size: 0.75rem;
}

.punch-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
    margin: 0.5rem 0 0;
}

.punch-facts dt {
    color: var(--text-3);
    font-size: 0.6875rem;
    font-weight: 400;
}

.punch-facts dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.punch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 150px;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border: 0;
    border-radius: var(--radius);
    color: #fff;
    font-weight: 600;
}

.punch-btn:hover,
.punch-btn:focus-visible {
    color: #fff;
    filter: brightness(0.94);
}

.punch-btn:disabled {
    color: #fff;
    opacity: 0.65;
}

.punch-btn.is-in { background-color: var(--success); }
.punch-btn.is-out { background-color: var(--danger); }

.punch-btn i {
    font-size: 1.125rem;
}

.punch-fix {
    color: var(--text-2);
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .punch-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .punch-clock {
        padding: 0 0 0.75rem;
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .punch-btn {
        width: 100%;
    }
}

/* ---------- Transportation overviews (admin/tms/overview/*) ---------- */
.tms-bars {
    display: grid;
    gap: 0.625rem;
    padding: 1rem;
}

.tms-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text-2);
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.tms-bar-head strong {
    color: var(--text-1);
    font-weight: 600;
    white-space: nowrap;
}

.tms-bar-track {
    height: 6px;
    border-radius: 3px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.tms-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background-color: var(--accent);
}

.tms-chart {
    min-height: 240px;
    padding: 0.75rem 1rem 0.25rem;
}

/* ---------- Transportation maps (admin/tms/tracking/*) ---------- */
.tms-map {
    height: 460px;
    background-color: var(--surface-2);
}

.tms-map-tall {
    height: 620px;
}

.tms-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.tms-live-list {
    max-height: 620px;
    overflow-y: auto;
    border-left: 1px solid var(--border-subtle);
}

.tms-live-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    color: inherit;
    text-align: left;
}

.tms-live-row:hover {
    background-color: var(--accent-subtle);
}

.tms-state-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.tms-route-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    font-size: 0.75rem;
}

.tms-route-swatch {
    display: inline-block;
    width: 18px;
    height: 3px;
    margin-right: 0.3rem;
    vertical-align: middle;
    border-radius: 2px;
}

.tms-route-swatch-planned {
    background: repeating-linear-gradient(90deg, #2f7dd1 0 4px, transparent 4px 8px);
}

.tms-route-swatch-actual {
    background: #0f9d70;
}

/* Live tracking: vehicle marker (a little truck badge, not a bare dot) */
.tms-vmarker-wrap {
    background: transparent;
    border: none;
}

.tms-vmarker {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vm-state);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35), 0 0 0 2.5px var(--vm-color);
    color: #fff;
    font-size: 14px;
    transition: transform 0.4s linear;
}

.tms-vmarker-heading {
    position: absolute;
    top: -9px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-bottom: 7px solid var(--vm-color);
    transform: translateX(-50%) rotate(var(--vm-heading, 0deg));
    transform-origin: 50% 19px;
}

/* A route's destination pin, in the vehicle's own color - paired with a plain filled circle for the
   source, so every TMS map (Live Operations, GPS Live Tracking) marks a route's two ends the same way. */
.tms-route-flag {
    color: var(--vm-color, #2f7dd1);
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Live tracking: popup card */
.tms-vpopup {
    min-width: 200px;
}

.tms-vpopup-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.75rem -0.9rem 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.3rem 0.3rem 0 0;
    background: var(--vm-color, var(--accent));
    color: #fff;
}

.tms-vpopup-head .tms-vpopup-reg {
    font-weight: 700;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
}

.tms-vpopup-row {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.tms-vpopup-row a {
    color: inherit;
    text-decoration: underline;
}

/* Live tracking: list row's own-color swatch, separate from the state dot */
.tms-route-swatch-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.2rem;
}

.tms-live-row.is-selected {
    background-color: var(--accent-subtle);
}

.tms-replay-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-subtle);
}

.tms-code {
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface-2);
    color: var(--text-1);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 991.98px) {
    .tms-live {
        grid-template-columns: minmax(0, 1fr);
    }

    .tms-live-list {
        max-height: 320px;
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
    }

    .tms-map-tall {
        height: 420px;
    }
}

/* ---------- Transportation trip planning (admin/tms/trip-planning/*) ---------- */
.tms-picker {
    position: relative;
}

.tms-picker-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

.tms-picker-menu button {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    border: 0;
    background: transparent;
    color: var(--text-1);
    font-size: 0.8125rem;
    text-align: left;
}

.tms-picker-menu button:hover {
    background-color: var(--accent-subtle);
}

.tms-picker-menu small {
    color: var(--text-3);
    white-space: nowrap;
}

.tms-calendar-scroll {
    overflow-x: auto;
}

.tms-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    min-width: 860px;
}

.tms-calendar-head {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.tms-calendar-day {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 118px;
    padding: 0.375rem;
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.tms-calendar-day.is-other {
    background-color: var(--surface-2);
}

.tms-calendar-day.is-today .tms-calendar-date {
    color: var(--accent);
    font-weight: 700;
}

.tms-calendar-date {
    color: var(--text-2);
    font-size: 0.75rem;
}

.tms-calendar-chip {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tms-board th:not(:first-child),
.tms-board td:not(:first-child) {
    min-width: 112px;
}

.tms-board .is-today {
    background-color: var(--accent-subtle);
}

/* ---------- Transportation dispatch board (admin/tms/dispatch/board) ---------- */
.tms-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    gap: 0.75rem;
    overflow-x: auto;
}

.tms-kanban-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background-color: var(--surface-2);
}

.tms-kanban-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tms-kanban-card {
    display: block;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text-1);
}

.tms-kanban-card:hover {
    border-color: var(--accent);
    color: var(--text-1);
}


/* Trip Timeline: a dated line of what happened. */
.tms-timeline {
    list-style: none;
    margin: 0;
    padding: 16px 20px;
}

.tms-timeline-item {
    position: relative;
    padding: 0 0 18px 24px;
    border-left: 2px solid var(--border-subtle);
    margin-left: 5px;
}

.tms-timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.tms-timeline-dot {
    position: absolute;
    left: -7px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--text-3);
}

.tms-timeline-dot.tone-danger { background: var(--danger); }
.tms-timeline-dot.tone-amber { background: var(--warning); }
.tms-timeline-dot.tone-success { background: var(--success); }
.tms-timeline-dot.tone-sky { background: var(--accent); }
.tms-timeline-dot.tone-indigo { background: var(--accent); }

/* ---------- TMS Executive Dashboard: greeting hero + alert icons ---------- */

/* Clickable stat boxes in the hero - same look the HRM dashboard hero uses. */
.tms-hero .section-hero-stats > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.tms-hero .section-hero-stats > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(20, 24, 40, 0.08);
}

.tms-hero .section-hero-stats > a.is-alert {
    border-color: rgba(226, 67, 79, 0.3);
    background-color: var(--danger-subtle);
}

.tms-hero .section-hero-stats > a.is-alert strong {
    color: var(--danger);
}

.section-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Small round severity icon in front of each dashboard alert row. */
.dash-alert-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 0.8125rem;
    margin-top: 0.0625rem;
}

@media (max-width: 575.98px) {
    .section-hero-actions {
        flex-direction: row;
        width: 100%;
    }

    .section-hero-actions .btn {
        flex: 1;
    }
}

/* ---------- TMS overview pages: lightweight page hero (icon + title + period context) ---------- */
.tms-page-hero {
    padding: 0.875rem 1.125rem;
    margin-bottom: 1rem !important;
}

.tms-page-hero .section-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.375rem;
}

.tms-page-hero .section-hero-text h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
}

.tms-page-hero-chips {
    margin-top: 0;
}

.tms-page-hero-actions {
    margin-left: auto;
}

/* Pulsing "live" indicator next to a page title. */
.tms-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(31, 157, 120, 0.55);
    animation: tms-live-pulse 1.8s infinite;
}

.tms-live-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--success);
}

@keyframes tms-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(31, 157, 120, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(31, 157, 120, 0); }
    100% { box-shadow: 0 0 0 0 rgba(31, 157, 120, 0); }
}

@media (max-width: 767.98px) {
    .tms-page-hero-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ---------- TMS: denser dashboard/overview layout - more on screen, less scrolling ---------- */
body[data-app="tms"] .tms-page-hero,
body[data-app="tms"] .section-hero.tms-hero {
    padding: 0.75rem 1rem;
}

body[data-app="tms"] .section-hero-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 11px;
}

body[data-app="tms"] .kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 0.625rem;
    margin-bottom: 0.625rem !important;
}

body[data-app="tms"] .kpi-card {
    padding: 0.625rem 0.75rem;
    gap: 0.625rem;
}

body[data-app="tms"] .kpi-card-icon {
    width: 30px;
    height: 30px;
    font-size: 0.9375rem;
    border-radius: 8px;
}

body[data-app="tms"] .kpi-card-value {
    font-size: 1.0625rem;
}

body[data-app="tms"] .kpi-card-label {
    font-size: 0.6875rem;
}

body[data-app="tms"] .kpi-card-hint {
    font-size: 0.625rem;
}

body[data-app="tms"] .row.g-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

body[data-app="tms"] .list-toolbar {
    padding: 0.625rem 0.875rem 0;
    min-height: auto;
}

body[data-app="tms"] .card.form-section .form-section-body {
    padding: 0.875rem 1rem;
}