/* ============================================================
   SHAML ERP — Helpdesk admin theme
   Layout & interaction language: Materio (Vuetify)
   Colour identity: SHAML (blue → teal gradient, navy, mint)
   Light + Dark · RTL + LTR · built on Bootstrap 5.2
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */
:root {
    /* Sovereign Industrial — Industrial Indigo primary, Champagne Gold accent */
    --brand-blue: #1b37b8;
    --brand-blue-rgb: 27,55,184;
    --brand-teal: #3a52d0;          /* primary-container: the lighter indigo */
    --brand-teal-rgb: 58,82,208;
    --brand-gold: #6b5d3f;
    --brand-gold-rgb: 107,93,63;
    --brand-champagne: #f1deb7;     /* secondary-container */
    --brand-navy: #181c21;          /* on-surface / obsidian */
    --brand-mint: #dee0ff;          /* primary-fixed */
    --brand-gradient: linear-gradient(135deg, #1b37b8 0%, #3a52d0 100%);
    --brand-gradient-rtl: linear-gradient(135deg, #1b37b8 0%, #3a52d0 100%);

    /* Semantic palette */
    --primary: #1b37b8;
    --primary-rgb: 27,55,184;
    --primary-darken: #00105b;      /* on-primary-fixed */
    --secondary: #6b5d3f;
    --secondary-rgb: 107,93,63;
    --success: #2f6b4f;
    --success-rgb: 47,107,79;
    --danger: #ba1a1a;              /* error */
    --danger-rgb: 186,26,26;
    --warning: #8a6d1f;
    --warning-rgb: 138,109,31;
    --info: #3a52d0;
    --info-rgb: 58,82,208;

    /* Surfaces — porcelain, tiered by elevation */
    --bg: #f7f9ff;                  /* surface / background */
    --card: #ffffff;                /* surface-container-lowest */
    --surface-rgb: 255,255,255;
    --sidebar-bg: #ffffff;          /* the menu is a surface, like the cards */
    --topbar-bg: #ffffff;
    --track-bg: #ebeef5;            /* surface-container */
    --table-header-bg: #e5e8ef;     /* surface-container-high */
    --surface-low: #f1f4fb;
    --surface-high: #e5e8ef;
    --surface-highest: #dfe2e9;

    /* Foreground */
    --on-surface-rgb: 24,28,33;
    --text: #181c21;
    --text-strong: #181c21;
    --muted: #444654;               /* on-surface-variant */
    --disabled: rgba(24,28,33,.38);
    --border: #c5c5d6;              /* outline-variant */
    --border-strong: #757685;       /* outline */
    --hover: rgba(24,28,33,.04);
    --selected: rgba(27,55,184,.08);
    --input-bg: #ffffff;

    /* Elevation — industrial shadow, tinted with the primary indigo */
    --shadow-umbra: 58,82,208;
    --shadow-xs: 0 1px 2px rgba(58,82,208,.08);
    --shadow-sm: 0 2px 4px rgba(58,82,208,.10);
    --shadow-md: 0 4px 12px rgba(58,82,208,.12);
    --shadow-lg: 0 12px 28px rgba(58,82,208,.16);
    --shadow-card: 0 1px 3px rgba(24,28,33,.06);
    --shadow-primary: 0 2px 8px rgba(27,55,184,.32);

    /* Shapes — soft 4px on controls, 8px on containers */
    --radius: 4px;
    --radius-lg: 8px;
    --sidebar-w: 260px;
    /* The reading cap. Lifted while the sidebar is collapsed so the freed
       width becomes content rather than gutter. */
    --content-max: 1440px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 64px;

    /* Bootstrap bridge */
    --bs-body-font-family: "Hanken Grotesk", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
    --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --bs-body-font-size: .875rem;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: 12px;
    --bs-primary: #1b37b8;
    --bs-primary-rgb: 27,55,184;
    --bs-secondary: #6b5d3f;
    --bs-secondary-rgb: 107,93,63;
    --bs-success: #2f6b4f;
    --bs-success-rgb: 47,107,79;
    --bs-danger: #ba1a1a;
    --bs-danger-rgb: 186,26,26;
    --bs-warning: #8a6d1f;
    --bs-warning-rgb: 138,109,31;
    --bs-info: #3a52d0;
    --bs-info-rgb: 58,82,208;
    --bs-link-color: #1b37b8;
    --bs-link-hover-color: #00105b;

    /* Solid button fills. Kept apart from the semantic tokens because those
       invert for dark text, while a filled button always needs a mid tone. */
    --fill-primary: #1b37b8;   --fill-primary-hover: #3a52d0;
    --fill-secondary: #6b5d3f; --fill-secondary-hover: #7d6e4d;
    --fill-success: #2f6b4f;   --fill-success-hover: #3b7f5e;
    --fill-danger: #ba1a1a;    --fill-danger-hover: #d02525;
    --fill-warning: #8a6d1f;   --fill-warning-hover: #a0802a;
    --fill-info: #3a52d0;      --fill-info-hover: #4a63e0;
    --fill-ink: #ffffff;
    --bs-emphasis-color: var(--text-strong);
}

:root[data-theme="dark"] {
    /* Obsidian side of the porcelain-and-obsidian scale */
    --bg: #111318;
    --card: #1b1e24;
    --surface-rgb: 27,30,36;
    --sidebar-bg: #14161b;
    --topbar-bg: #1b1e24;
    --track-bg: #262a31;
    --table-header-bg: #22262d;
    --surface-low: #191c22;
    --surface-high: #2b2f37;
    --surface-highest: #31353e;

    --primary: #bac3ff;             /* inverse-primary reads on dark */
    --primary-rgb: 186,195,255;
    --primary-darken: #dee0ff;
    --info: #bac3ff;
    --info-rgb: 186,195,255;
    --secondary: #d7c49f;           /* secondary-fixed-dim */
    --secondary-rgb: 215,196,159;
    --danger: #ffb4ab;
    --danger-rgb: 255,180,171;
    --warning: #e3c46a;
    --warning-rgb: 227,196,106;
    --success: #7fd7a6;
    --success-rgb: 127,215,166;

    --on-surface-rgb: 238,241,248;
    --text: #eef1f8;                /* inverse-on-surface */
    --text-strong: #eef1f8;
    --muted: rgba(238,241,248,.72);
    --disabled: rgba(238,241,248,.38);
    --border: rgba(238,241,248,.16);
    --border-strong: rgba(238,241,248,.30);
    --hover: rgba(238,241,248,.05);
    --selected: rgba(186,195,255,.12);
    --input-bg: #22262d;

    --brand-gradient: linear-gradient(135deg, #3a52d0 0%, #6478e6 100%);
    --brand-gradient-rtl: linear-gradient(135deg, #3a52d0 0%, #6478e6 100%);

    --shadow-umbra: 5,8,14;
    --shadow-xs: 0 1px 2px rgba(5,8,14,.30);
    --shadow-sm: 0 2px 4px rgba(5,8,14,.34);
    --shadow-md: 0 4px 12px rgba(5,8,14,.38);
    --shadow-lg: 0 12px 28px rgba(5,8,14,.44);
    --shadow-card: 0 1px 3px rgba(5,8,14,.34);

    --bs-primary: #bac3ff;
    --bs-primary-rgb: 186,195,255;
    --bs-link-color: #bac3ff;
    --bs-link-hover-color: #dee0ff;

    /* Lifted a step on dark so the fill separates from the surface. */
    --fill-primary: #3a52d0;   --fill-primary-hover: #4f66e2;
    --fill-secondary: #7d6e4d; --fill-secondary-hover: #8f7f5b;
    --fill-success: #35785a;   --fill-success-hover: #408b69;
    --fill-danger: #c33a32;    --fill-danger-hover: #d44a41;
    --fill-warning: #9a7c2b;   --fill-warning-hover: #ad8c36;
    --fill-info: #4a63e0;      --fill-info-hover: #5c74ec;
    --fill-ink: #ffffff;
}
* { box-sizing: border-box; }

/* While the theme flips, kill transitions: properties that animate colour would
   otherwise keep painting the previous theme's value after the token changes. */
html.hd-theme-switching *,
html.hd-theme-switching *::before,
html.hd-theme-switching *::after {
    transition: none !important;
}

/* ------------------------------------------------------------
   2. Base typography (Hanken Grotesk, JetBrains Mono for figures)
   ------------------------------------------------------------ */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--bs-body-font-family);
    font-size: 1rem;          /* body-lg 16 / 24 */
    line-height: 1.5rem;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1, .h1 { font-size: 3rem;    line-height: 3.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: 2rem;    line-height: 2.5rem; }
h3, .h3 { font-size: 1.5rem;  line-height: 2rem; }
h4, .h4 { font-size: 1.375rem; line-height: 1.875rem; }
h5, .h5 { font-size: 1.125rem; line-height: 1.625rem; }
h6, .h6 { font-size: 1rem;    line-height: 1.5rem; }

/* display-lg steps down on small screens so it never forces a sideways scroll */
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 2rem; line-height: 2.5rem; }
}

/* Figures line up in columns: tabular JetBrains Mono for anything numeric. */
.stat-value,
.hd-punch-stats .val,
.table td.num, .table th.num,
code, kbd, pre, samp {
    font-family: var(--bs-font-monospace);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* label-sm: the small uppercase captions */
.form-label, .stat-label, .hd-info-item .lbl, .hd-lookup-group {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-strong);
    font-weight: 500;
    letter-spacing: normal;
}

small, .small { font-size: .875rem; line-height: 1.25rem; }   /* body-md */
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-darken); }
.text-muted { color: var(--muted) !important; }
.text-disabled { color: var(--disabled) !important; }
.text-primary { color: var(--primary) !important; }
hr, .dropdown-divider { border-color: var(--border); opacity: 1; }
code {
    color: var(--primary); background: rgba(var(--primary-rgb), .08);
    padding: .1rem .4rem; border-radius: 4px; font-size: .85em;
}
::selection { background: rgba(var(--primary-rgb), .2); }

/* Scrollbars */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--on-surface-rgb), .22); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--on-surface-rgb), .35); }

/* ------------------------------------------------------------
   3. Layout shell
   ------------------------------------------------------------ */
.hd-wrapper { display: flex; min-height: 100vh; }

.hd-sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--text);
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    display: flex; flex-direction: column;
    z-index: 1040;
    box-shadow: var(--shadow-md);
    transition: width .25s ease-in-out, transform .25s ease-in-out;
    will-change: width, transform;
}

/* --- nav header (logo + collapse pin) --- */
.hd-sidebar .hd-brand {
    display: flex; align-items: center; gap: .75rem;
    padding-block: 1.375rem .5rem;
    padding-inline: 1.375rem 1.25rem;
    color: var(--text-strong);
    min-height: 64px; flex: none;
}
.hd-sidebar .hd-brand .hd-brand-title {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0; gap: .125rem;
    transition: opacity .15s;
}
.hd-sidebar .hd-brand .hd-brand-name {
    font-size: 1.0625rem; font-weight: 600; line-height: 1.25rem;
    letter-spacing: .2em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The descriptor carries the champagne accent; --secondary is the one gold
   step that clears 4.5:1 on the white sidebar as well as on the obsidian one. */
.hd-sidebar .hd-brand .hd-brand-sub {
    font-size: .625rem; font-weight: 600; line-height: .875rem;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-brand-logo {
    max-height: 32px; max-width: 34px; object-fit: contain; flex: none;
    /* The mark carries its own finish; a plate behind it only muddies it. */
    background: none; border-radius: 0; box-shadow: none; padding: 0;
}
.hd-nav-pin {
    margin-inline-start: auto; background: none; border: 0; padding: 0;
    color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.hd-nav-pin:hover { background: var(--hover); color: var(--primary); }

/* --- nav items --- */
.hd-nav-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding-block-end: 1.25rem; }
.hd-nav { list-style: none; padding: 0; margin: 0; }

.hd-nav .hd-section {
    display: flex; align-items: center; gap: .625rem;
    height: 2rem;
    padding-block: .4375rem; padding-inline: 1.4375rem 1rem;
    margin-inline-end: 1rem; margin-block-end: .5rem;
    font-size: .8125rem; line-height: 1.125rem;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--disabled); white-space: nowrap;
}
.hd-nav .hd-section:not(:first-child) { margin-block-start: 1.25rem; }
.hd-nav .hd-section::before {
    content: ""; flex: 0 1 .8125rem; margin-inline-start: -1.4375rem;
    border-block-end: 1px solid var(--border);
}
.hd-nav .hd-section::after { content: ""; flex: 1 1 auto; border-block-end: 1px solid var(--border); }

.hd-nav a,
.hd-nav .hd-nav-toggle {
    display: flex; align-items: center; gap: .5rem;
    height: 2.75rem;
    padding-block: .4375rem; padding-inline: 1.4375rem 1rem;
    margin-inline-end: 1rem; margin-block-end: .375rem;
    color: var(--text);
    border-radius: .4rem;
    font-size: .9375rem; font-weight: 400; line-height: 1.375rem;
    white-space: nowrap; overflow: hidden;
    transition: background .15s, color .15s, box-shadow .15s;
}
.hd-nav a > span,
.hd-nav .hd-nav-toggle > span { overflow: hidden; text-overflow: ellipsis; }
.hd-nav a:hover,
.hd-nav .hd-nav-toggle:hover { background: var(--hover); color: var(--text-strong); }
.hd-nav a i {
    width: 1.375rem; font-size: 1.05rem; text-align: center; flex: none;
    opacity: .95;
}
.hd-nav a.active {
    background: var(--brand-gradient);
    color: #fff; font-weight: 500;
    box-shadow: var(--shadow-primary);
}
html[dir="rtl"] .hd-nav a.active {
    background: var(--brand-gradient-rtl);
}
.hd-nav a.active i { color: #fff; opacity: 1; }

/* --- collapsed (desktop) --- */
@media (min-width: 992px) {
    body.hd-collapsed .hd-sidebar { width: var(--sidebar-w-collapsed); }
    body.hd-collapsed .hd-sidebar:hover { width: var(--sidebar-w); box-shadow: var(--shadow-lg); }
    body.hd-collapsed .hd-main { margin-inline-start: var(--sidebar-w-collapsed); }
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-brand-title,
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav a > span,
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav-toggle > span,
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav-caret,
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav-pin { opacity: 0; pointer-events: none; }
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav .hd-section { color: transparent; }
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav .hd-section::before { margin-inline-start: 0; flex: 0 1 .4rem; }

    /* Every row sits on the same icon column, whatever its depth, so the rail
       reads as one line of icons instead of a staircase. */
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav a,
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav .hd-nav-toggle {
        padding-inline: 1.35rem 1rem !important;
    }
    /* A folder's children would otherwise hang below the rail with no label. */
    body.hd-collapsed .hd-sidebar:not(:hover) .hd-nav-sub { display: none; }
}

.hd-main {
    flex: 1; margin-inline-start: var(--sidebar-w);
    min-width: 0; display: flex; flex-direction: column;
    transition: margin .25s ease-in-out;
}

/* --- navbar --- */
.hd-topbar {
    position: sticky; top: 0; z-index: 1030;
    padding-inline: 1.5rem;
    background: transparent;
    max-width: var(--content-max); width: 100%; margin-inline: auto;
    transition: max-width .25s ease-in-out;
}
.hd-topbar-inner {
    height: var(--topbar-h);
    display: flex; align-items: center; gap: .5rem;
    border-end-start-radius: 6px; border-end-end-radius: 6px;
    transition: background .2s ease, box-shadow .2s ease, padding .2s ease, backdrop-filter .2s ease;
}
body.hd-scrolled .hd-topbar-inner {
    background: rgba(var(--surface-rgb), .88);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 4px 8px -4px rgba(var(--shadow-umbra), .42);
    padding-inline: 1rem; margin-inline: -1rem;
}

.hd-content {
    padding: 1.5rem; flex: 1;
    max-width: var(--content-max); width: 100%; margin-inline: auto;
    transition: max-width .25s ease-in-out;
}

/* With the rail collapsed the reading cap would only turn the freed width into
   side gutters, so the cap comes off and the screen actually fills. */
body.hd-collapsed .hd-content,
body.hd-collapsed .hd-topbar { --content-max: none; }

.hd-sidebar-toggle {
    background: none; border: none; font-size: 1.35rem; color: var(--text);
    cursor: pointer; padding: .25rem .4rem; line-height: 1; border-radius: 50%;
    transition: background .15s, color .15s;
}
.hd-sidebar-toggle:hover { color: var(--primary); background: var(--hover); }

/* topbar icon buttons — Materio uses borderless round icon buttons */
.hd-icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--text);
    font-size: 1.1rem; text-decoration: none;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.hd-icon-btn:hover { background: var(--hover); color: var(--primary); }
.hd-icon-btn.show, .hd-icon-btn:focus { background: var(--hover); color: var(--primary); }

/* topbar search */
.hd-search {
    display: flex; align-items: center; gap: .5rem;
    color: var(--muted); cursor: text;
    padding: .35rem .25rem; border-radius: 6px; min-width: 220px;
    background: transparent; border: 0;
}
.hd-search input {
    border: 0; background: transparent; outline: none; color: var(--text);
    font-size: .9375rem; width: 100%; padding: 0;
}
.hd-search input::placeholder { color: var(--disabled); }
.hd-search:focus-within { background: var(--hover); padding-inline: .65rem; }

.hd-page-title { font-size: 1.125rem; font-weight: 500; color: var(--text-strong); line-height: 1.75rem; }

/* avatar with presence dot */
.hd-avatar-wrap { position: relative; display: inline-flex; }
.hd-avatar-wrap::after {
    content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--success); border: 2px solid var(--card);
}
.hd-avatar-fallback {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--primary-rgb), .16); color: var(--primary);
    font-weight: 500;
}

/* backdrop */
.hd-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(var(--shadow-umbra), .5); z-index: 1035;
}
.hd-backdrop.show { display: block; }

@media (max-width: 991.98px) {
    .hd-sidebar { transform: translateX(-100%); }
    html[dir="rtl"] .hd-sidebar { transform: translateX(100%); }
    .hd-sidebar.show { transform: translateX(0); }
    .hd-main { margin-inline-start: 0; }
    .hd-content { padding: 1.25rem; }
    .hd-topbar { padding-inline: 1.25rem; }
}

/* ------------------------------------------------------------
   4. Cards
   ------------------------------------------------------------ */
.card {
    background: var(--card);
    border: 0;
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.card-header {
    background: transparent; border-bottom: 0;
    color: var(--text-strong); font-weight: 500; font-size: 1.125rem; line-height: 1.75rem;
    padding: 1.25rem 1.25rem .5rem;
}
.card-header + .card-body { padding-top: .75rem; }
.card-body { padding: 1.25rem; color: var(--text); }
.card-footer { background: transparent; border-top: 1px solid var(--border); padding: 1rem 1.25rem; }
.card-title { font-size: 1.125rem; font-weight: 500; color: var(--text-strong); margin-bottom: .25rem; }
.card-subtitle, .card-text.text-muted { color: var(--muted); font-size: .8125rem; }
.card.border, .card.border-0 { border: 0 !important; }

/* stat cards (Materio dashboard style) */
.stat-card { transition: box-shadow .25s, transform .25s; }
.stat-card:hover { box-shadow: var(--shadow-lg); }
.stat-card .stat-icon-box {
    width: 42px; height: 42px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.stat-card .stat-value {
    font-size: 1.5rem; font-weight: 500; color: var(--text-strong);
    line-height: 2.375rem; letter-spacing: normal;
}
.stat-card .stat-label { color: var(--text); font-size: .9375rem; font-weight: 400; }
.stat-card .stat-trend { font-size: .8125rem; font-weight: 500; }

/* tonal surfaces */
.tint-primary   { background: rgba(var(--primary-rgb), .16);   color: var(--primary) !important; }
.tint-success   { background: rgba(var(--success-rgb), .16);   color: var(--success) !important; }
.tint-warning   { background: rgba(var(--warning-rgb), .16);   color: var(--warning) !important; }
.tint-danger    { background: rgba(var(--danger-rgb), .16);    color: var(--danger)  !important; }
.tint-info      { background: rgba(var(--info-rgb), .16);      color: var(--info)    !important; }
.tint-secondary { background: rgba(var(--secondary-rgb), .16); color: var(--secondary) !important; }
.tint-dark      { background: rgba(var(--on-surface-rgb), .08); color: var(--text-strong) !important; }

/* welcome / greeting card */
.hd-welcome-card {
    position: relative; overflow: hidden;
    background: var(--card);
}
.hd-welcome-card::before,
.hd-welcome-card::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hd-welcome-card::after {
    inset-block-start: -45%; inset-inline-end: -8%;
    width: 280px; height: 280px;
    background: radial-gradient(closest-side, rgba(var(--brand-blue-rgb), .20), transparent);
}
.hd-welcome-card::before {
    inset-block-end: -55%; inset-inline-end: 12%;
    width: 240px; height: 240px;
    background: radial-gradient(closest-side, rgba(var(--brand-teal-rgb), .18), transparent);
}
.hd-welcome-card .card-body { position: relative; z-index: 1; }
.hd-welcome-card .hd-welcome-emoji { font-size: 1.35rem; }

/* brand gradient helpers */
.hd-gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
html[dir="rtl"] .hd-gradient-text { background: var(--brand-gradient-rtl); -webkit-background-clip: text; background-clip: text; }
.hd-gradient-bg { background: var(--brand-gradient); color: #fff; }

/* ------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------ */
.btn {
    --bs-btn-border-radius: 6px;
    --bs-btn-font-size: .9375rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.375rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1.125rem;
    text-transform: none;
    letter-spacing: normal;
    transition: box-shadow .2s, background-color .2s, color .2s, border-color .2s;
}
.btn-sm {
    --bs-btn-padding-y: .3125rem;
    --bs-btn-padding-x: .8125rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-border-radius: 4px;
}
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1.0625rem; --bs-btn-border-radius: 8px; }
.btn:focus, .btn:focus-visible { box-shadow: none; outline: none; }

.btn-primary {
    --bs-btn-bg: var(--fill-primary); --bs-btn-border-color: var(--fill-primary); --bs-btn-color: var(--fill-ink);
    --bs-btn-hover-bg: var(--fill-primary-hover); --bs-btn-hover-border-color: var(--fill-primary-hover); --bs-btn-hover-color: var(--fill-ink);
    --bs-btn-active-bg: var(--fill-primary-hover); --bs-btn-active-border-color: var(--fill-primary-hover); --bs-btn-active-color: var(--fill-ink);
    --bs-btn-disabled-bg: var(--fill-primary); --bs-btn-disabled-border-color: var(--fill-primary); --bs-btn-disabled-color: var(--fill-ink);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover { box-shadow: var(--shadow-primary); }
.btn-secondary {
    --bs-btn-bg: var(--fill-secondary); --bs-btn-border-color: var(--fill-secondary); --bs-btn-color: var(--fill-ink);
    --bs-btn-hover-bg: var(--fill-secondary-hover); --bs-btn-hover-border-color: var(--fill-secondary-hover); --bs-btn-hover-color: var(--fill-ink);
    --bs-btn-active-bg: var(--fill-secondary-hover); --bs-btn-active-color: var(--fill-ink);
    --bs-btn-disabled-bg: var(--fill-secondary); --bs-btn-disabled-color: var(--fill-ink);
    box-shadow: var(--shadow-xs);
}
.btn-success {
    --bs-btn-bg: var(--fill-success); --bs-btn-border-color: var(--fill-success); --bs-btn-color: var(--fill-ink);
    --bs-btn-hover-bg: var(--fill-success-hover); --bs-btn-hover-border-color: var(--fill-success-hover); --bs-btn-hover-color: var(--fill-ink);
    --bs-btn-active-bg: var(--fill-success-hover); --bs-btn-active-color: var(--fill-ink);
    --bs-btn-disabled-bg: var(--fill-success); --bs-btn-disabled-color: var(--fill-ink);
    box-shadow: var(--shadow-xs);
}
.btn-danger {
    --bs-btn-bg: var(--fill-danger); --bs-btn-border-color: var(--fill-danger); --bs-btn-color: var(--fill-ink);
    --bs-btn-hover-bg: var(--fill-danger-hover); --bs-btn-hover-border-color: var(--fill-danger-hover); --bs-btn-hover-color: var(--fill-ink);
    --bs-btn-active-bg: var(--fill-danger-hover); --bs-btn-active-color: var(--fill-ink);
    --bs-btn-disabled-bg: var(--fill-danger); --bs-btn-disabled-color: var(--fill-ink);
    box-shadow: var(--shadow-xs);
}
.btn-warning {
    --bs-btn-bg: var(--fill-warning); --bs-btn-border-color: var(--fill-warning); --bs-btn-color: var(--fill-ink);
    --bs-btn-hover-bg: var(--fill-warning-hover); --bs-btn-hover-border-color: var(--fill-warning-hover); --bs-btn-hover-color: var(--fill-ink);
    --bs-btn-active-bg: var(--fill-warning-hover); --bs-btn-active-color: var(--fill-ink);
    --bs-btn-disabled-bg: var(--fill-warning); --bs-btn-disabled-color: var(--fill-ink);
    box-shadow: var(--shadow-xs);
}
.btn-info {
    --bs-btn-bg: var(--fill-info); --bs-btn-border-color: var(--fill-info); --bs-btn-color: var(--fill-ink);
    --bs-btn-hover-bg: var(--fill-info-hover); --bs-btn-hover-border-color: var(--fill-info-hover); --bs-btn-hover-color: var(--fill-ink);
    --bs-btn-active-bg: var(--fill-info-hover); --bs-btn-active-color: var(--fill-ink);
    --bs-btn-disabled-bg: var(--fill-info); --bs-btn-disabled-color: var(--fill-ink);
    box-shadow: var(--shadow-xs);
}
.btn-light {
    --bs-btn-bg: rgba(var(--on-surface-rgb), .06); --bs-btn-border-color: transparent; --bs-btn-color: var(--text);
    --bs-btn-hover-bg: rgba(var(--on-surface-rgb), .12); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--text-strong);
    --bs-btn-active-bg: rgba(var(--on-surface-rgb), .16);
}
.btn-dark {
    --bs-btn-bg: rgba(var(--on-surface-rgb), .8); --bs-btn-border-color: transparent; --bs-btn-color: var(--card);
    --bs-btn-hover-bg: rgba(var(--on-surface-rgb), .9); --bs-btn-hover-color: var(--card);
}

/* outline buttons — Materio keeps a hairline of the colour */
.btn-outline-primary   { --bs-btn-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-color: var(--primary);   --bs-btn-border-color: rgba(var(--primary-rgb), .5);   --bs-btn-hover-bg: rgba(var(--primary-rgb), .08);   --bs-btn-hover-color: var(--primary);   --bs-btn-hover-border-color: var(--primary);   --bs-btn-active-bg: rgba(var(--primary-rgb), .16);   --bs-btn-active-color: var(--primary); }
.btn-outline-secondary { --bs-btn-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-color: var(--secondary); --bs-btn-border-color: rgba(var(--secondary-rgb), .5); --bs-btn-hover-bg: rgba(var(--secondary-rgb), .08); --bs-btn-hover-color: var(--secondary); --bs-btn-hover-border-color: var(--secondary); --bs-btn-active-bg: rgba(var(--secondary-rgb), .16); --bs-btn-active-color: var(--secondary); }
.btn-outline-success   { --bs-btn-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-color: var(--success);   --bs-btn-border-color: rgba(var(--success-rgb), .5);   --bs-btn-hover-bg: rgba(var(--success-rgb), .08);   --bs-btn-hover-color: var(--success);   --bs-btn-hover-border-color: var(--success);   --bs-btn-active-bg: rgba(var(--success-rgb), .16);   --bs-btn-active-color: var(--success); }
.btn-outline-danger    { --bs-btn-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-color: var(--danger);    --bs-btn-border-color: rgba(var(--danger-rgb), .5);    --bs-btn-hover-bg: rgba(var(--danger-rgb), .08);    --bs-btn-hover-color: var(--danger);    --bs-btn-hover-border-color: var(--danger);    --bs-btn-active-bg: rgba(var(--danger-rgb), .16);    --bs-btn-active-color: var(--danger); }
.btn-outline-warning   { --bs-btn-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-color: var(--warning);   --bs-btn-border-color: rgba(var(--warning-rgb), .5);   --bs-btn-hover-bg: rgba(var(--warning-rgb), .08);   --bs-btn-hover-color: var(--warning);   --bs-btn-hover-border-color: var(--warning);   --bs-btn-active-bg: rgba(var(--warning-rgb), .16);   --bs-btn-active-color: var(--warning); }
.btn-outline-info      { --bs-btn-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-color: var(--info);      --bs-btn-border-color: rgba(var(--info-rgb), .5);      --bs-btn-hover-bg: rgba(var(--info-rgb), .08);      --bs-btn-hover-color: var(--info);      --bs-btn-hover-border-color: var(--info);      --bs-btn-active-bg: rgba(var(--info-rgb), .16);      --bs-btn-active-color: var(--info); }
.btn-outline-dark      { --bs-btn-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-color: var(--text);      --bs-btn-border-color: var(--border-strong);           --bs-btn-hover-bg: var(--hover);                    --bs-btn-hover-color: var(--text-strong); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-bg: var(--selected); --bs-btn-active-color: var(--text-strong); }

/* tonal ("label") buttons — the Materio signature */
.btn-label-primary   { background: rgba(var(--primary-rgb), .16);   color: var(--primary);   border: 0; }
.btn-label-secondary { background: rgba(var(--secondary-rgb), .16); color: var(--secondary); border: 0; }
.btn-label-success   { background: rgba(var(--success-rgb), .16);   color: var(--success);   border: 0; }
.btn-label-danger    { background: rgba(var(--danger-rgb), .16);    color: var(--danger);    border: 0; }
.btn-label-warning   { background: rgba(var(--warning-rgb), .16);   color: var(--warning);   border: 0; }
.btn-label-info      { background: rgba(var(--info-rgb), .16);      color: var(--info);      border: 0; }
.btn-label-primary:hover   { background: rgba(var(--primary-rgb), .26);   color: var(--primary); }
.btn-label-secondary:hover { background: rgba(var(--secondary-rgb), .26); color: var(--secondary); }
.btn-label-success:hover   { background: rgba(var(--success-rgb), .26);   color: var(--success); }
.btn-label-danger:hover    { background: rgba(var(--danger-rgb), .26);    color: var(--danger); }
.btn-label-warning:hover   { background: rgba(var(--warning-rgb), .26);   color: var(--warning); }
.btn-label-info:hover      { background: rgba(var(--info-rgb), .26);      color: var(--info); }

/* icon-only button */
.btn-icon {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* ------------------------------------------------------------
   6. Badges & chips (Materio tonal chips)
   ------------------------------------------------------------ */
.badge {
    font-weight: 500; font-size: .8125rem; line-height: 1.25rem;
    padding: .1875rem .625rem; border-radius: 4px; letter-spacing: normal;
}
.badge.rounded-pill { border-radius: 999px; }
.badge.bg-primary   { background: rgba(var(--primary-rgb), .16) !important;   color: var(--primary) !important; }
.badge.bg-success   { background: rgba(var(--success-rgb), .16) !important;   color: var(--success) !important; }
.badge.bg-warning   { background: rgba(var(--warning-rgb), .16) !important;   color: var(--warning) !important; }
.badge.bg-danger    { background: rgba(var(--danger-rgb), .16) !important;    color: var(--danger)  !important; }
.badge.bg-info      { background: rgba(var(--info-rgb), .16) !important;      color: var(--info)    !important; }
.badge.bg-secondary { background: rgba(var(--secondary-rgb), .16) !important; color: var(--secondary) !important; }
.badge.bg-dark      { background: rgba(var(--on-surface-rgb), .12) !important; color: var(--text-strong) !important; }
.badge.bg-light     { background: rgba(var(--on-surface-rgb), .06) !important; color: var(--muted) !important; }
.badge.text-dark    { color: inherit !important; }
/* solid dot badge (notification counter) */
.badge.hd-dot { padding: 0; width: 8px; height: 8px; border-radius: 50%; }

/* ------------------------------------------------------------
   7. Forms
   ------------------------------------------------------------ */
.form-label {
    font-weight: 400; font-size: .8125rem; line-height: 1.25rem;
    color: var(--text); margin-bottom: .3125rem;
}
/* NOTE: use background-color, never the `background` shorthand, on form controls —
   the shorthand resets background-repeat/position and tiles the select chevron. */
.form-control, .form-select {
    background-color: var(--input-bg); color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: .4375rem .875rem;
    font-size: .9375rem; line-height: 1.375rem;
    min-height: 38px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:hover, .form-select:hover { border-color: rgba(var(--on-surface-rgb), .35); }
.form-control:focus, .form-select:focus {
    background-color: var(--input-bg); color: var(--text);
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(var(--shadow-umbra), .1);
}
.form-control::placeholder { color: var(--disabled); opacity: 1; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: rgba(var(--on-surface-rgb), .04); color: var(--disabled); opacity: 1;
}
.form-control-sm, .form-select-sm {
    border-radius: 4px; padding: .25rem .75rem; font-size: .8125rem; min-height: 32px;
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232E263D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    background-size: 14px 11px;
    padding-inline-end: 2.25rem;
}
html[dir="rtl"] .form-select { background-position: left .875rem center; }
.form-select-sm { background-position: right .625rem center; padding-inline-end: 2rem; }
html[dir="rtl"] .form-select-sm { background-position: left .625rem center; }
:root[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23DBE8F0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
textarea.form-control { min-height: 84px; }

.form-check-input {
    border-color: var(--border-strong); background-color: transparent;
    width: 1.125rem; height: 1.125rem; margin-top: .15rem; border-radius: 4px;
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 2px 4px rgba(var(--primary-rgb), .4); border-color: var(--primary); }
.form-check-label { font-size: .9375rem; color: var(--text); }
.form-switch .form-check-input { width: 2.25rem; height: 1.25rem; border-radius: 999px; }
.form-check-input[type="radio"] { border-radius: 50%; }

.input-group-text {
    background: transparent; border-color: var(--border-strong);
    color: var(--muted); border-radius: 6px; font-size: .9375rem;
}
.input-group > .form-control:focus + .input-group-text,
.input-group:focus-within .input-group-text { border-color: var(--primary); }
.invalid-feedback, .field-validation-error, .text-danger { color: var(--danger) !important; font-size: .8125rem; }
.input-validation-error { border-color: var(--danger) !important; }
.form-text { color: var(--muted); font-size: .8125rem; }

/* ------------------------------------------------------------
   8. Tables
   ------------------------------------------------------------ */
.table {
    color: var(--text); margin-bottom: 0;
    --bs-table-bg: transparent; --bs-table-color: var(--text);
    --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: transparent; --bs-table-striped-color: var(--text);
    --bs-table-border-color: var(--border);
}
.table > thead > tr > th {
    background: var(--table-header-bg);
    font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text); border-bottom: 1px solid var(--border);
    padding: .75rem 1.25rem; white-space: nowrap;
}
.table > thead > tr > th:first-child { border-start-start-radius: 6px; }
.table > thead > tr > th:last-child  { border-start-end-radius: 6px; }
.table > tbody > tr > td {
    padding: .75rem 1.25rem; border-bottom: 1px solid var(--border);
    vertical-align: middle; color: var(--text); font-size: .9375rem;
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--hover); color: var(--text); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border); }
.card > .card-body > .table-responsive, .card > .table-responsive { border-radius: 6px; }

/* ------------------------------------------------------------
   9. Menus, modals, tabs, alerts, pagination
   ------------------------------------------------------------ */
.dropdown-menu {
    background: var(--card); border: 0; border-radius: 6px;
    box-shadow: var(--shadow-sm); padding: .3rem;
    color: var(--text); font-size: .9375rem;
    min-width: 11rem;
}
.dropdown-item {
    color: var(--text); border-radius: 4px; padding: .5rem .75rem; font-size: .9375rem;
    display: flex; align-items: center;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--hover); color: var(--text-strong); }
.dropdown-item.active, .dropdown-item:active { background: rgba(var(--primary-rgb), .16); color: var(--primary); }
.dropdown-header { color: var(--disabled); font-size: .8125rem; text-transform: uppercase; letter-spacing: .4px; }

.modal-content {
    background: var(--card); color: var(--text); border: 0;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--border); padding: 1.25rem; }
.modal-title { font-size: 1.125rem; font-weight: 500; color: var(--text-strong); }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.25rem; }
.btn-close { filter: none; opacity: .6; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.offcanvas { background: var(--card); color: var(--text); }

/* tabs — Materio pill tabs with gradient active state */
.nav-tabs, .nav-pills { border-bottom: 0; gap: .375rem; margin-bottom: 1rem; }
.nav-tabs .nav-link, .nav-pills .nav-link {
    color: var(--text); border: 0; border-radius: 6px;
    font-size: .9375rem; font-weight: 500; padding: .5rem 1rem;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: background .15s, color .15s, box-shadow .15s;
}
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { background: var(--hover); color: var(--text-strong); border-color: transparent; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    background: var(--brand-gradient);
    color: #fff; box-shadow: var(--shadow-primary); border-color: transparent;
}
html[dir="rtl"] .nav-tabs .nav-link.active, html[dir="rtl"] .nav-pills .nav-link.active {
    background: var(--brand-gradient-rtl);
}

.list-group { border-radius: 6px; }
.list-group-item { background: var(--card); border-color: var(--border); color: var(--text); font-size: .9375rem; }
.list-group-item.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.list-group-item-action:hover { background: var(--hover); color: var(--text-strong); }

.pagination { gap: .25rem; }
.page-link {
    background: transparent; border: 0; color: var(--text);
    border-radius: 6px; min-width: 32px; text-align: center; font-size: .9375rem;
}
.page-link:hover { background: var(--hover); color: var(--text-strong); }
.page-item.active .page-link {
    background: var(--brand-gradient);
    border-color: transparent; color: #fff; box-shadow: var(--shadow-primary);
}
.page-item.disabled .page-link { color: var(--disabled); background: transparent; }

.alert { border: 0; border-radius: 6px; font-size: .9375rem; padding: .75rem 1rem; }
.alert-primary { background: rgba(var(--primary-rgb), .16); color: var(--primary); }
.alert-info    { background: rgba(var(--info-rgb), .16);    color: var(--info); }
.alert-success { background: rgba(var(--success-rgb), .16); color: var(--success); }
.alert-danger  { background: rgba(var(--danger-rgb), .16);  color: var(--danger); }
.alert-warning { background: rgba(var(--warning-rgb), .16); color: var(--warning); }
.alert-secondary { background: rgba(var(--secondary-rgb), .16); color: var(--secondary); }
.alert .alert-link, .alert a { color: inherit; text-decoration: underline; }
.alert ul { margin-bottom: 0; padding-inline-start: 1.1rem; }

.progress { background: var(--track-bg); border-radius: 999px; height: .5rem; }
.progress-bar { background: var(--primary); border-radius: 999px; }
.accordion-item { background: var(--card); border-color: var(--border); }
.accordion-button { background: var(--card); color: var(--text-strong); font-size: .9375rem; box-shadow: none; }
.accordion-button:not(.collapsed) { background: rgba(var(--primary-rgb), .08); color: var(--primary); }
.tooltip-inner { background: rgba(var(--on-surface-rgb), .9); color: var(--card); border-radius: 4px; font-size: .8125rem; }
.breadcrumb { font-size: .8125rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--disabled); }
.spinner-border, .spinner-grow { color: var(--primary); }

/* ------------------------------------------------------------
   10. App components
   ------------------------------------------------------------ */
/* timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
    content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 5px;
    width: 1px; background: var(--border);
}
.timeline-item { position: relative; padding-inline-start: 1.75rem; padding-bottom: 1.5rem; }
.timeline-item .timeline-dot {
    position: absolute; inset-inline-start: 0; top: 4px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .16);
}
.timeline-item .timeline-time { font-size: .8125rem; color: var(--disabled); }

/* comments */
.comment {
    border: 0; border-radius: 6px; padding: 1rem 1.125rem; margin-bottom: .875rem;
    background: rgba(var(--on-surface-rgb), .04);
}
.comment.internal {
    border-inline-start: 3px solid var(--warning);
    background: rgba(var(--warning-rgb), .12);
}
.comment .comment-meta { font-size: .8125rem; color: var(--muted); }

/* empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2.75rem; opacity: .3; margin-bottom: .85rem; display: block; }

/* attachments */
.attachment-card {
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
    background: var(--card); transition: box-shadow .2s;
}
.attachment-card:hover { box-shadow: var(--shadow-md); }
.attachment-card .att-thumb {
    height: 120px; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--on-surface-rgb), .04); font-size: 2.2rem; color: var(--muted);
}
.attachment-card .att-body { padding: .75rem .875rem; }

/* avatars */
.avatar-sm { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.avatar-xs { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.avatar-lg {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--card); box-shadow: var(--shadow-md);
}

/* SLA progress */
.sla-progress { height: 6px; border-radius: 999px; background: var(--track-bg); overflow: hidden; }
.sla-progress > span { display: block; height: 100%; border-radius: 999px; }

/* notifications dropdown */
.hd-notif-menu { width: 380px; max-width: 92vw; padding: 0 !important; overflow: hidden; }
.hd-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1rem; border-bottom: 1px solid var(--border);
}
.hd-notif-head strong { font-size: 1.125rem; font-weight: 500; color: var(--text-strong); }
#hdNotifList { max-height: 340px; overflow-y: auto; }
#hdNotifList .dropdown-item { border-radius: 0; border-bottom: 1px solid var(--border); padding: .75rem 1rem; white-space: normal; }
#hdNotifList .dropdown-item:last-child { border-bottom: 0; }

/* ------------------------------------------------------------
   11. Auth screens
   ------------------------------------------------------------ */
/* --- sign-in screen: neon glass card on a navy field, beside a product showcase ---
   Always dark, whatever theme the app is set to, and on the reference design's own
   blue/cyan palette rather than the app's blue/teal - so every value lives here. */
body.hd-auth-page {
    /* Sovereign Industrial, on the obsidian end of the scale. */
    --auth-blue: #1b37b8;
    --auth-cyan: #3a52d0;
    --auth-gold: #d7c49f;
    --auth-ink: #FFFFFF;
    --auth-ink-soft: rgba(222, 224, 255, .72);
    --auth-ink-label: rgba(222, 224, 255, .82);
    --auth-ink-faint: rgba(222, 224, 255, .45);
    --auth-line: rgba(186, 195, 255, .26);
    --auth-line-lit: rgba(186, 195, 255, .70);
    --auth-glass: rgba(255, 255, 255, .06);
    --auth-field: rgba(255, 255, 255, .07);
}

.hd-auth {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 1.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0b0d12 0%, #141a33 34%, #1b2a6b 62%, #101533 100%);
    color: var(--auth-ink);
}

/* circuit lattice */
.hd-auth::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .07;
    pointer-events: none;
    background-image:
        linear-gradient(to right, #bac3ff 1px, transparent 1px),
        linear-gradient(to bottom, #bac3ff 1px, transparent 1px);
    background-size: 60px 60px;
}

/* glow orbs */
.hd-auth-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.hd-auth-glow.one {
    inset-block-start: -80px; inset-inline-end: -80px; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(58, 82, 208, .22) 0%, transparent 70%);
}
.hd-auth-glow.two {
    inset-block-end: -100px; inset-inline-start: -60px; width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(215, 196, 159, .12) 0%, transparent 70%);
}
.hd-auth-glow.three {
    inset-block-start: 50%; inset-inline-start: 50%; width: 600px; height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(27, 55, 184, .12) 0%, transparent 70%);
}

/* language switch, top corner */
.hd-auth-lang {
    position: fixed;
    inset-block-start: 1.25rem;
    inset-inline-start: 1.5rem;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
}
.hd-auth-lang:hover { color: rgba(255, 255, 255, .7); }
.hd-auth-lang .on { color: #fff; }
.hd-auth-lang-track {
    position: relative;
    width: 44px; height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    flex: none;
}
.hd-auth-lang-knob {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: inset-inline-start .2s ease;
}
.hd-auth-lang-track.en { background: var(--auth-blue); }
.hd-auth-lang-track.en .hd-auth-lang-knob { inset-inline-start: 24px; }

/* ---------- the card ---------- */
.hd-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    flex: none;
    padding: 2rem;
    border-radius: 16px;
    background: var(--auth-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(186, 195, 255, .22);
    box-shadow: 0 0 40px rgba(27, 55, 184, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.hd-auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-block-end: 1.5rem;
}
.hd-auth-logo img, .hd-auth-logo svg {
    width: 72px; height: 72px; object-fit: contain; flex: none;
    /* No plate and no halo — the drop shadow follows the mark's own outline. */
    background: none; border-radius: 0; box-shadow: none;
    filter: drop-shadow(0 6px 18px rgba(11, 13, 18, .55));
}
.hd-auth-logo .hd-auth-name {
    display: flex; flex-direction: column; gap: .15rem;
    text-align: start;
}
.hd-auth-logo .hd-auth-brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    line-height: 1.4rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(186, 195, 255, .45);
}
.hd-auth-logo .hd-auth-brand-sub {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    line-height: .875rem;
    color: var(--auth-gold);
}

.hd-auth-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-block-end: .25rem;
}
.hd-auth-subtitle { text-align: center; color: var(--auth-ink-soft); font-size: .875rem; margin-block-end: 1.5rem; }

/* fields */
.hd-auth-card .form-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--auth-ink-label);
    margin-block-end: .375rem;
}
.hd-auth-field { position: relative; }
.hd-auth-field > .hd-auth-field-icon {
    position: absolute;
    inset-inline-start: .875rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: rgba(186, 195, 255, .75);
    font-size: .875rem;
    z-index: 2;
    pointer-events: none;
}
.hd-auth-field .hd-pw-wrap { display: block; }
.hd-auth-card .form-control,
.hd-auth-card .form-select {
    background: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    color: #fff;
    padding-block: .625rem;
}
/* only fields that actually carry a leading icon get the extra room */
.hd-auth-field .form-control { padding-inline-start: 2.5rem; }
.hd-auth-card .form-control::placeholder { color: rgba(255, 255, 255, .3); }
.hd-auth-card .form-control:focus,
.hd-auth-card .form-select:focus {
    background: rgba(255, 255, 255, .1);
    border-color: var(--auth-line-lit);
    box-shadow: 0 0 0 2px rgba(186, 195, 255, .28);
    color: #fff;
}
.hd-auth-card .hd-pw-toggle { color: rgba(186, 195, 255, .6); }

.hd-auth-card .form-check-input {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(186, 195, 255, .35);
}
.hd-auth-card .form-check-input:checked { background-color: var(--auth-blue); border-color: var(--auth-blue); }
.hd-auth-card .form-check-label { color: var(--auth-ink-soft); font-size: .8125rem; }
.hd-auth-card a { color: var(--auth-cyan); }
.hd-auth-card a:hover { color: #fff; }

.hd-auth-card .btn-primary {
    background: linear-gradient(135deg, var(--auth-blue), var(--auth-cyan));
    border: 0;
    border-radius: 12px;
    padding-block: .75rem;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(27, 55, 184, .45);
}
.hd-auth-card .btn-primary:hover { filter: brightness(1.06); }
.hd-auth-card .btn-outline-secondary { color: var(--auth-ink-soft); border-color: var(--auth-line); }
.hd-auth-card .btn-outline-secondary:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.hd-auth-card .alert {
    background: rgba(255, 0, 0, .08);
    border: 1px solid rgba(255, 0, 0, .2);
    color: #FF6B6B;
    border-radius: 10px;
}
.hd-auth-card .alert ul { margin: 0; padding-inline-start: 1rem; }

.hd-auth-foot {
    margin-block-start: 1.25rem;
    text-align: center;
    color: var(--auth-ink-faint);
    font-size: .75rem;
}
.hd-auth-foot a { color: var(--auth-gold); }

/* ---------- product showcase ---------- */
.hd-auth-showcase {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    max-width: 560px;
    text-align: center;
}
.hd-auth-illustration {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 30px 60px rgba(27, 55, 184, .45));
}
.hd-auth-tagline {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-block: 1.5rem .5rem;
    text-shadow: 0 0 20px rgba(186, 195, 255, .3);
}
.hd-auth-subtagline { color: rgba(222, 224, 255, .6); font-size: .875rem; margin-block-end: 1rem; }
.hd-auth-points { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; }
.hd-auth-points span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--auth-gold);
    font-size: .75rem;
    font-weight: 600;
}
.hd-auth-points i {
    font-size: .5rem;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(215, 196, 159, .18);
    border: 1px solid rgba(215, 196, 159, .45);
}

@media (max-width: 991.98px) {
    .hd-auth-showcase { display: none; }
    .hd-auth { padding: 1.5rem 1rem; }
}

/* ---------- sign-in: depth + motion ----------
   The showcase sits in a 3D scene and the card lifts out of the page.
   Everything here is decorative, so it all stops under prefers-reduced-motion. */
.hd-auth { perspective: 1400px; }

/* drifting glow orbs */
.hd-auth-glow.one   { animation: hd-orb-a 14s ease-in-out infinite alternate; }
.hd-auth-glow.two   { animation: hd-orb-b 18s ease-in-out infinite alternate; }
.hd-auth-glow.three { animation: hd-breathe 9s ease-in-out infinite alternate; }

@keyframes hd-orb-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-40px, 30px, 0) scale(1.12); }
}
@keyframes hd-orb-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(35px, -25px, 0) scale(1.1); }
}
@keyframes hd-breathe {
    from { opacity: .55; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* the lattice slowly slides, like a live circuit */
.hd-auth::before { animation: hd-grid-drift 22s linear infinite; }
@keyframes hd-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 60px 60px, 60px 60px; }
}

/* card: rises into place, then keeps a subtle tilt that follows the pointer */
.hd-auth-card {
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
    transition: transform .25s ease-out, box-shadow .3s ease;
    animation: hd-card-in .7s cubic-bezier(.22, 1, .36, 1) both;
}
.hd-auth-card:hover {
    box-shadow: 0 0 60px rgba(27, 55, 184, .40), inset 0 1px 0 rgba(255, 255, 255, .1);
}
@keyframes hd-card-in {
    from { opacity: 0; transform: perspective(1200px) translateY(28px) rotateX(8deg); }
    to   { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0); }
}

/* fields and button stagger in behind the card */
.hd-auth-card .form-label,
.hd-auth-card .hd-auth-field,
.hd-auth-card .btn-primary,
.hd-auth-card .form-check,
.hd-auth-logo,
.hd-auth-title,
.hd-auth-subtitle { animation: hd-rise-in .5s ease both; }
.hd-auth-logo      { animation-delay: .05s; }
.hd-auth-title     { animation-delay: .10s; }
.hd-auth-subtitle  { animation-delay: .15s; }
.hd-auth-card .hd-auth-field { animation-delay: .20s; }
.hd-auth-card .form-check    { animation-delay: .26s; }
.hd-auth-card .btn-primary   { animation-delay: .32s; }

@keyframes hd-rise-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The mark keeps a slow pulse, on its own outline rather than a box behind it. */
.hd-auth-logo img, .hd-auth-logo svg { animation: hd-logo-pulse 3.5s ease-in-out infinite; }
@keyframes hd-logo-pulse {
    0%, 100% { filter: drop-shadow(0 6px 18px rgba(11, 13, 18, .55)); }
    50%      { filter: drop-shadow(0 6px 26px rgba(122, 141, 240, .55)); }
}

/* sign-in button sweep */
.hd-auth-card .btn-primary { position: relative; overflow: hidden; }
.hd-auth-card .btn-primary::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    animation: hd-sweep 3.5s ease-in-out infinite;
}
@keyframes hd-sweep {
    0%, 65% { inset-inline-start: -60%; }
    100%    { inset-inline-start: 130%; }
}

/* showcase floats in 3D and drifts */
.hd-auth-showcase { transform-style: preserve-3d; }
.hd-auth-illustration {
    transform: rotateY(var(--scene-y, -12deg)) rotateX(var(--scene-x, 6deg));
    transform-origin: center;
    animation: hd-float 7s ease-in-out infinite alternate;
    transition: transform .4s ease-out;
}
html[dir="rtl"] .hd-auth-illustration { --scene-y: 12deg; }
@keyframes hd-float {
    from { translate: 0 -10px; }
    to   { translate: 0 10px; }
}

.hd-auth-tagline, .hd-auth-subtagline, .hd-auth-points { animation: hd-rise-in .6s ease both; }
.hd-auth-tagline    { animation-delay: .35s; }
.hd-auth-subtagline { animation-delay: .42s; }
.hd-auth-points     { animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
    .hd-auth-glow.one, .hd-auth-glow.two, .hd-auth-glow.three,
    .hd-auth::before, .hd-auth-card, .hd-auth-illustration,
    .hd-auth-logo img, .hd-auth-logo svg,
    .hd-auth-card .btn-primary::after,
    .hd-auth-card .form-label, .hd-auth-card .hd-auth-field,
    .hd-auth-card .btn-primary, .hd-auth-card .form-check,
    .hd-auth-logo, .hd-auth-title, .hd-auth-subtitle,
    .hd-auth-tagline, .hd-auth-subtagline, .hd-auth-points {
        animation: none !important;
        transition: none !important;
    }
    .hd-auth-illustration { transform: none; }
}

/* password toggle */
.hd-pw-wrap { position: relative; }
.hd-pw-wrap > input { padding-inline-end: 2.5rem; }
.hd-pw-wrap > .hd-pw-toggle {
    position: absolute; top: 50%; transform: translateY(-50%);
    inset-inline-end: .6rem; color: var(--muted); cursor: pointer;
    width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center;
}
.hd-pw-wrap > .hd-pw-toggle:hover { color: var(--primary); }
.input-group-text.hd-pw-toggle { cursor: pointer; }
.input-group-text.hd-pw-toggle:hover { color: var(--primary); }

/* ------------------------------------------------------------
   12. Third-party: DataTables, SweetAlert2, ApexCharts
   ------------------------------------------------------------ */
div.dt-buttons { margin-bottom: .75rem; gap: .375rem; display: inline-flex; flex-wrap: wrap; }
div.dt-buttons .btn { border-radius: 4px; }
table.dataTable { width: 100% !important; border-collapse: separate !important; border-spacing: 0; }
table.dataTable thead th { position: relative; }
.dataTables_wrapper .dataTables_filter { margin-bottom: .75rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-strong); border-radius: 6px;
    padding: .3125rem .75rem; background-color: var(--input-bg); color: var(--text);
    font-size: .8125rem; min-height: 32px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--primary); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--muted); font-size: .8125rem; }
.dataTables_wrapper .dataTables_paginate { margin-top: .75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text) !important; border: 0 !important; background: transparent !important;
    border-radius: 6px !important; margin: 0 2px; padding: .3rem .7rem; font-size: .875rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--hover) !important; color: var(--text-strong) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-gradient) !important;
    color: #fff !important; box-shadow: var(--shadow-primary);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--disabled) !important; }
table.dataTable.no-footer { border-bottom: 0; }
.dataTables_processing {
    background: var(--card) !important; color: var(--text) !important;
    border-radius: 6px; box-shadow: var(--shadow-md); border: 0 !important;
}

.swal2-popup {
    background: var(--card) !important; color: var(--text) !important;
    border-radius: var(--radius) !important; box-shadow: var(--shadow-lg);
    font-family: var(--bs-body-font-family);
}
.swal2-title { color: var(--text-strong) !important; font-size: 1.25rem !important; font-weight: 500 !important; }
.swal2-html-container { color: var(--muted) !important; font-size: .9375rem !important; }
.swal2-styled { border-radius: 6px !important; font-weight: 500 !important; font-size: .9375rem !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm { background: var(--primary) !important; }
.swal2-styled.swal2-cancel { background: rgba(var(--secondary-rgb), .16) !important; color: var(--secondary) !important; }
.swal2-toast { background: var(--card) !important; box-shadow: var(--shadow-md) !important; }
.swal2-toast .swal2-title { font-size: .9375rem !important; }

.apexcharts-canvas .apexcharts-text,
.apexcharts-canvas .apexcharts-legend-text { fill: var(--muted); color: var(--muted) !important; font-family: var(--bs-body-font-family) !important; }
.apexcharts-canvas .apexcharts-gridline { stroke: var(--border); }
.apexcharts-tooltip, .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--card) !important; color: var(--text) !important;
    border: 0 !important; box-shadow: var(--shadow-md) !important; border-radius: 6px !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
    background: rgba(var(--on-surface-rgb), .04) !important;
    border-color: var(--border) !important; color: var(--text-strong) !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
    background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important;
}

/* ------------------------------------------------------------
   13. Utilities
   ------------------------------------------------------------ */
.min-w-0 { min-width: 0; }
.fw-semibold { font-weight: 500 !important; }
.hd-divider { height: 1px; background: var(--border); border: 0; margin: 1rem 0; }
.cursor-pointer { cursor: pointer; }
.bg-surface { background: var(--card) !important; }
.text-body { color: var(--text) !important; }
.shadow-sm { box-shadow: var(--shadow-xs) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.rounded, .rounded-2 { border-radius: 6px !important; }


/* ------------------------------------------------------------
   Employee profile header (Materio profile pattern, SHAML colours)
   ------------------------------------------------------------ */
.hd-profile-banner {
    height: 168px;
    border-radius: 10px 10px 0 0;
    background: var(--brand-gradient);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-inline: 2.25rem;
}

html[dir="rtl"] .hd-profile-banner { background: var(--brand-gradient-rtl); }

/* Two soft discs instead of an illustration asset - keeps the page self-contained. */
.hd-profile-banner::before,
.hd-profile-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    pointer-events: none;
}
.hd-profile-banner::before { width: 260px; height: 260px; inset-block-start: -110px; inset-inline-end: -60px; }
.hd-profile-banner::after  { width: 170px; height: 170px; inset-block-end: -90px;  inset-inline-end: 150px; }

.hd-profile-banner h3 {
    color: #fff;
    font-weight: 500;
    margin: 0;
    position: relative;
    text-shadow: 0 1px 2px rgba(15,28,39,.18);
}

.hd-profile-head {
    background: var(--card);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(15,28,39,.08));
    padding: 0 2.25rem 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hd-profile-avatar {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--card);
    border: 5px solid var(--card);
    box-shadow: var(--shadow-md);
    /* Pulled up so the avatar sits half over the banner; flex-end would cancel the offset. */
    align-self: flex-start;
    margin-block-start: -58px;
    flex-shrink: 0;
    /* The banner is positioned, so it paints over static siblings and would cut the
       overlapping half of the avatar. Positioning the avatar puts it back on top. */
    position: relative;
    z-index: 1;
}

/* Same ring for employees with no photo. */
.hd-profile-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: var(--muted);
    background: rgba(var(--on-surface-rgb), .04);
}

.hd-profile-identity { flex: 1 1 260px; padding-block-start: 1rem; }
.hd-profile-identity h4 { margin: 0 0 .25rem; font-weight: 500; }
.hd-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    color: var(--muted);
    font-size: .9375rem;
}
.hd-profile-meta i { margin-inline-end: .375rem; opacity: .75; }
.hd-profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-block-start: 1rem; }

/* ------------------------------------------------------------
   Label / value grid used by the profile tabs
   ------------------------------------------------------------ */
.hd-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 1rem;
}
.hd-info-grid .wide { grid-column: 1 / -1; }

.hd-info-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .75rem .9rem;
    background: var(--card);
    min-height: 68px;
}
.hd-info-item .lbl {
    display: block;
    color: var(--muted);
    font-size: .8125rem;
    margin-block-end: .25rem;
}
.hd-info-item .val {
    color: var(--text-strong);
    font-weight: 500;
    word-break: break-word;
}
.hd-info-item .val.pre { white-space: pre-wrap; font-weight: 400; }


/* ------------------------------------------------------------
   HR lookups: one screen, navigator beside the selected list
   ------------------------------------------------------------ */
.hd-lookup-screen {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.hd-lookup-nav {
    background: var(--card);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    position: sticky;
    top: 84px;
}

.hd-lookup-nav-head {
    background: var(--brand-gradient);
    color: #fff;
    padding: 1rem 1.125rem;
}
html[dir="rtl"] .hd-lookup-nav-head { background: var(--brand-gradient-rtl); }
.hd-lookup-nav-head strong { font-weight: 500; font-size: 1.0625rem; }
.hd-lookup-nav-sub { font-size: .8125rem; opacity: .85; margin-block-start: .2rem; }

/* The list of lists is long; it scrolls on its own instead of the page. */
.hd-lookup-nav-scroll { max-height: calc(100vh - 210px); overflow-y: auto; padding-block: .5rem; }

.hd-lookup-group {
    padding: .75rem 1.125rem .25rem;
    font-size: .75rem;
    color: var(--muted);
}

.hd-lookup-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1.125rem;
    color: var(--text);
    text-decoration: none;
    font-size: .9375rem;
    border-inline-start: 3px solid transparent;
}
.hd-lookup-link:hover { background: var(--hover); color: var(--text-strong); }
.hd-lookup-link i:first-child { width: 18px; text-align: center; color: var(--muted); }
.hd-lookup-link span { flex: 1; }

.hd-lookup-link.active {
    background: rgba(var(--primary-rgb), .12);
    color: var(--primary);
    font-weight: 500;
    border-inline-start-color: var(--primary);
}
.hd-lookup-link.active i { color: var(--primary); }
.hd-lookup-caret { font-size: .75rem; opacity: .6; }

.hd-lookup-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1rem;
}

.hd-lookup-search { position: relative; }
.hd-lookup-search input { padding-inline-start: 2.25rem; min-width: 220px; }
.hd-lookup-search > i {
    position: absolute;
    inset-inline-start: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .875rem;
    pointer-events: none;
}

/* status pill with a leading dot, as in the reference */
.hd-dot-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
}
.hd-dot-badge i { font-size: .5rem; }
.hd-dot-badge.on { background: rgba(var(--success-rgb), .16); color: var(--success); }
.hd-dot-badge.off { background: rgba(var(--secondary-rgb), .16); color: var(--secondary); }

/* borderless icon buttons for the row actions */
.btn-icon {
    border: 0;
    background: transparent;
    padding: .25rem .4rem;
    line-height: 1;
}
.btn-icon:hover { background: var(--hover); }

@media (max-width: 991.98px) {
    .hd-lookup-screen { grid-template-columns: minmax(0, 1fr); }
    .hd-lookup-nav { position: static; }
    .hd-lookup-nav-scroll { max-height: 320px; }
}

@media print {
    .hd-sidebar, .hd-topbar, .hd-backdrop, .dt-buttons { display: none !important; }
    .hd-main { margin-inline-start: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid var(--border) !important; }
}

/* Stat cards that double as filter buttons (subscriptions overview). */
.stat-card-link { display: block; color: inherit; text-decoration: none; }
.stat-card-link:hover { color: inherit; box-shadow: var(--shadow-lg); }
.stat-card-link.active {
    box-shadow: 0 0 0 2px var(--primary), var(--shadow-md);
}

/* ------------------------------------------------------------
   Attendance punch card
   ------------------------------------------------------------ */
.hd-punch-stats {
    display: grid;
    /* full width on the dashboard, three across inside the narrow day panel */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}
.hd-punch-stats > div {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .625rem;
    text-align: center;
}
.hd-punch-stats .lbl { display: block; color: var(--muted); font-size: .6875rem; margin-block-end: .15rem; }
.hd-punch-stats .val { font-weight: 600; color: var(--text-strong); font-size: .9375rem; }

.hd-punch-timeline { display: flex; flex-wrap: wrap; gap: .375rem; }
.hd-punch-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
}
.hd-punch-chip.in  { background: rgba(var(--success-rgb), .16); color: var(--success); }
.hd-punch-chip.out { background: rgba(var(--danger-rgb), .16);  color: var(--danger); }

/* the punch button reads as the primary action of the card */
.hd-punch-card .btn { font-weight: 600; }

/* group cards on the HR settings landing */
.hd-group-card { display: block; color: inherit; text-decoration: none; transition: box-shadow .25s, transform .25s; }
.hd-group-card:hover { color: inherit; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hd-group-card:hover .hd-group-card-caret { color: var(--primary) !important; }
.hd-group-card-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.hd-group-card-tags span {
    font-size: .75rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(var(--on-surface-rgb), .05);
    color: var(--muted);
}
.hd-group-card-tags span.more { background: rgba(var(--primary-rgb), .12); color: var(--primary); }

/* back link in the list navigator header */
.hd-lookup-back { color: rgba(255, 255, 255, .85); font-size: .8125rem; text-decoration: none; }
.hd-lookup-back:hover { color: #fff; }

/* self-service request card and status pills */
.hd-request-card .stat-icon-box { width: 44px; height: 44px; font-size: 1.1rem; }
.hd-req-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.hd-req-badge.pending   { background: rgba(var(--warning-rgb), .18); color: var(--warning); }
.hd-req-badge.approved  { background: rgba(var(--success-rgb), .18); color: var(--success); }
.hd-req-badge.rejected  { background: rgba(var(--danger-rgb), .18);  color: var(--danger); }
.hd-req-badge.cancelled { background: rgba(var(--secondary-rgb), .18); color: var(--secondary); }

/* ------------------------------------------------------------
   Sovereign Industrial overrides
   The active menu item is marked by a champagne-gold bar rather than a
   filled pill, in both themes; the menu surface itself follows the theme.
   ------------------------------------------------------------ */
.hd-sidebar { --nav-gold: #a68a4f; border-inline-end: 1px solid var(--border); }
.hd-nav a { border-radius: 0 var(--radius) var(--radius) 0; }
html[dir="rtl"] .hd-nav a { border-radius: var(--radius) 0 0 var(--radius); }

.hd-nav a.active {
    background: rgba(var(--primary-rgb), .10);
    color: var(--primary);
    font-weight: 600;
    box-shadow: none;
    border-inline-start: 4px solid var(--nav-gold);
}
.hd-nav a.active i { color: var(--primary); opacity: 1; }

/* Dark: the menu becomes the obsidian panel the design describes. */
:root[data-theme="dark"] .hd-sidebar { --nav-gold: #d7c49f; }
:root[data-theme="dark"] .hd-nav a.active {
    background: rgba(255,255,255,.08);
    color: #ffffff;
}
:root[data-theme="dark"] .hd-nav a.active i { color: var(--nav-gold); }

/* The original RTL rule is more specific than the plain one, so the gradient pill
   would come back on Arabic pages without matching that specificity here. */
html[dir="rtl"] .hd-nav a.active {
    background: rgba(var(--primary-rgb), .10);
    color: var(--primary);
}
html[dir="rtl"]:root[data-theme="dark"] .hd-nav a.active,
:root[data-theme="dark"] html[dir="rtl"] .hd-nav a.active {
    background: rgba(255,255,255,.08);
    color: #ffffff;
}

/* Cards: white surface with a hairline stroke, 8px radius. */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* Controls keep the 4px shape, and focus is a 2px indigo ring. */
.btn, .form-control, .form-select, .input-group-text, .badge { border-radius: var(--radius); }
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .22);
}

/* Data tables: zebra rows, sticky mono headers. */
.table > thead th {
    background: var(--table-header-bg);
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surface-low); }

/* Status chips stay desaturated so a long list does not shout. */
.badge.bg-success { background: rgba(var(--success-rgb), .16) !important; color: var(--success) !important; }
.badge.bg-danger  { background: rgba(var(--danger-rgb), .16)  !important; color: var(--danger)  !important; }
.badge.bg-warning { background: rgba(var(--warning-rgb), .18) !important; color: var(--warning) !important; }
.badge.bg-info    { background: rgba(var(--info-rgb), .16)    !important; color: var(--info)    !important; }
.badge.bg-secondary { background: rgba(var(--secondary-rgb), .16) !important; color: var(--secondary) !important; }

/* Champagne gold marks the secondary action, per the brand note. */
.btn-outline-secondary:hover i { color: var(--brand-gold); }

/* ------------------------------------------------------------
   Approval trail — the ten stages a contract request walks.
   ------------------------------------------------------------ */
.hd-approval-trail { list-style: none; margin: 0; padding: 0; position: relative; }
.hd-trail-step { display: flex; gap: .75rem; padding-block: .5rem; position: relative; }
/* the spine, drawn between the dots rather than through them */
.hd-trail-step:not(:last-child)::before {
    content: ""; position: absolute; inset-block: 2.1rem -.5rem;
    inset-inline-start: .84rem; width: 2px; background: var(--border);
}
.hd-trail-dot {
    flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; background: var(--surface-low); color: var(--muted);
    border: 1px solid var(--border); position: relative; z-index: 1;
}
.hd-trail-body { min-width: 0; }
.hd-trail-title { font-weight: 600; line-height: 1.4; }
.hd-trail-flow { font-size: .75rem; color: var(--muted); }
.hd-trail-meta { font-size: .75rem; color: var(--muted); margin-block-start: .15rem; }
.hd-trail-notes {
    font-size: .8125rem; margin-block-start: .25rem; padding: .35rem .5rem;
    background: var(--surface-low); border-radius: var(--radius); white-space: pre-wrap;
}

.hd-trail-step.approved .hd-trail-dot { background: rgba(var(--success-rgb), .16); color: var(--success); border-color: transparent; }
.hd-trail-step.rejected .hd-trail-dot { background: rgba(var(--danger-rgb), .16);  color: var(--danger);  border-color: transparent; }
.hd-trail-step.current  .hd-trail-dot { background: rgba(var(--primary-rgb), .16); color: var(--primary); border-color: var(--primary); }
.hd-trail-step.current  .hd-trail-title { color: var(--primary); }
.hd-trail-step.disabled { opacity: .5; }

/* ------------------------------------------------------------
   Collapsible menu groups. The toggle has to match .hd-nav a so a
   folder and a link sit on the same rhythm.
   ------------------------------------------------------------ */
.hd-nav-toggle {
    width: 100%; background: none; border: 0; text-align: start;
    font-family: inherit; cursor: pointer;
}
.hd-nav-caret {
    margin-inline-start: auto; font-size: .7rem; opacity: .6;
    transition: transform .18s ease;
}
.hd-nav-toggle[aria-expanded="true"] .hd-nav-caret { transform: rotate(180deg); }

.hd-nav-sub { list-style: none; margin: 0; padding: 0; }
/* Children are indented past the parent icon, and keep a hairline spine. */
.hd-nav-sub > li > a {
    padding-inline-start: 2.9rem;
    font-size: .875rem;
}
html[dir="rtl"] .hd-nav-sub > li > a { padding-inline-start: 2.9rem; }
.hd-nav-sub > li > a i { font-size: .8rem; }

/* The folder reads as active while it holds the current screen. */
.hd-nav-group.open > .hd-nav-toggle { color: var(--text-strong); font-weight: 600; }
:root[data-theme="dark"] .hd-nav-group.open > .hd-nav-toggle { color: #ffffff; }

/* ---------- Rich-text field ([data-hd-richtext]) ----------
   Toolbar + contenteditable box styled as one control; tokens only, so both
   themes and RTL follow. .hd-rt-content renders the saved HTML read-only. */
.hd-rt { border: 1px solid var(--border); border-radius: var(--radius); background: var(--input-bg); }
.hd-rt:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .25); }
.hd-rt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--surface-low); border-radius: var(--radius) var(--radius) 0 0; }
.hd-rt-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: .85rem; }
.hd-rt-btn:hover { background: var(--hover); color: var(--text); }
.hd-rt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hd-rt-btn.active { background: var(--selected); color: var(--primary); }
.hd-rt-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.hd-rt .hd-rt-editor { min-height: 150px; max-height: 360px; overflow-y: auto; border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; background: transparent; line-height: 1.7; }
.hd-rt .hd-rt-editor:focus { outline: 0; box-shadow: none; }
.hd-rt-editor:empty::before { content: attr(data-placeholder); color: var(--disabled); pointer-events: none; }
.hd-rt-editor ul, .hd-rt-editor ol, .hd-rt-content ul, .hd-rt-content ol { padding-inline-start: 1.5rem; margin-bottom: .5rem; }
.hd-rt-editor blockquote, .hd-rt-content blockquote { margin: .5rem 0; padding-inline-start: .85rem; border-inline-start: 3px solid var(--border); color: var(--muted); }
.hd-rt-editor h5, .hd-rt-content h5 { font-size: 1rem; font-weight: 700; margin: .75rem 0 .35rem; }
.hd-rt-content { line-height: 1.7; overflow-wrap: anywhere; }
.hd-rt-content > :last-child { margin-bottom: 0; }