/* ============================================================
   EmployeeManagement Portal — Theme
   All colors go through CSS variables so dark/light is a
   single variable swap, not hundreds of overrides.
   ============================================================ */

/* ── Semantic colour palette (light) ── */
:root {
    --em-accent:          #534AB7;
    --em-accent-hover:    #443DA0;
    --em-accent-subtle:   #ede9f8;
    --em-accent-text:     #534AB7;

    --em-bg:              #e8eaf0;
    --em-surface:         #ffffff;
    --em-surface-raised:  #f4f5f8;
    --em-border:          #d1d5db;
    --em-border-subtle:   #e5e7eb;

    --em-text:            #111827;
    --em-text-secondary:  #374151;
    --em-text-muted:      #6b7280;
    --em-text-placeholder:#9ca3af;

    --em-radius:          0.5rem;
    --em-radius-lg:       0.75rem;
    --em-shadow-sm:       0 1px 3px rgba(0,0,0,0.10), 0 1px 6px rgba(0,0,0,0.08);
    --em-shadow:          0 4px 16px rgba(0,0,0,0.12);

    --em-badge-role-bg:   #f0f0f6;
    --em-badge-role-text: #3d3780;

    /* Bootstrap overrides */
    --bs-primary:         #534AB7;
    --bs-primary-rgb:     83,74,183;
    --bs-link-color:      #534AB7;
    --bs-link-hover-color:#443DA0;
    --bs-border-radius:   0.5rem;
    --bs-border-radius-lg:0.75rem;
    --bs-border-radius-xl:1rem;
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --bs-body-font-family:var(--bs-font-sans-serif);
    --bs-body-color:      var(--em-text-secondary);
    --bs-body-bg:         var(--em-bg);
}

/* ── Dark palette ── */
[data-bs-theme="dark"] {
    --em-accent:          #7c6fcd;
    --em-accent-hover:    #9183d8;
    --em-accent-subtle:   rgba(124,111,205,0.15);
    --em-accent-text:     #a99ef5;

    --em-bg:              #0d0e12;
    --em-surface:         #161a23;
    --em-surface-raised:  #1d2130;
    --em-border:          rgba(255,255,255,0.1);
    --em-border-subtle:   rgba(255,255,255,0.06);

    --em-text:            #e8eaf0;
    --em-text-secondary:  #c5cad6;
    --em-text-muted:      #7a8394;
    --em-text-placeholder:#4b5263;

    --em-badge-role-bg:   rgba(124,111,205,0.18);
    --em-badge-role-text: #b8aff8;

    --bs-body-color:      var(--em-text-secondary);
    --bs-body-bg:         var(--em-bg);
    --bs-link-color:      var(--em-accent-text);
    --bs-link-hover-color:var(--em-accent-hover);
}

/* ── Base ── */
body {
    font-size: 0.9375rem;
    -webkit-font-smoothing: antialiased;
    background-color: var(--em-bg);
    color: var(--em-text-secondary);
    /* Sticky-footer column: main fills the remaining height so a short page
       doesn't force a permanent scrollbar (sticky topbar + footer overflow). */
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

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

/* ── Buttons ── */
.btn-primary {
    --bs-btn-bg:                var(--em-accent);
    --bs-btn-border-color:      var(--em-accent);
    --bs-btn-hover-bg:          var(--em-accent-hover);
    --bs-btn-hover-border-color:var(--em-accent-hover);
    --bs-btn-active-bg:         #332b82;
    --bs-btn-focus-shadow-rgb:  83,74,183;
    font-weight: 500;
}
.btn-outline-primary {
    --bs-btn-color:        var(--em-accent-text);
    --bs-btn-border-color: var(--em-accent);
    --bs-btn-hover-bg:     var(--em-accent);
    --bs-btn-hover-color:  #fff;
    --bs-btn-hover-border-color: var(--em-accent);
    --bs-btn-active-bg:    var(--em-accent-hover);
}
.btn { border-radius: var(--em-radius); font-weight: 500; }
.btn-sm { font-size: 0.8125rem; }

/* ── Navbar ── */
.navbar {
    height: 60px;
    padding: 0 1rem;
    background-color: var(--em-surface) !important;
    border-bottom: 1px solid var(--em-border);
    box-shadow: none;
}
.brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--em-accent); color: #fff; font-size: 0.95rem; flex-shrink: 0;
}
.brand-name {
    font-weight: 700; font-size: 1rem;
    color: var(--em-text) !important;
    letter-spacing: -0.3px;
}
.navbar .nav-link {
    font-size: 0.875rem; font-weight: 500;
    color: var(--em-text-muted) !important;
    padding: 0.4rem 0.75rem;
    border-radius: var(--em-radius);
    transition: color 0.15s, background 0.15s;
}
.navbar .nav-link:hover {
    color: var(--em-text) !important;
    background: var(--em-accent-subtle);
}
.navbar .nav-link.active {
    color: var(--em-accent-text) !important;
    background: var(--em-accent-subtle);
    font-weight: 600;
}

/* ── Avatar chip ── */
.avatar-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--em-accent); color: #fff;
    font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
    cursor: pointer; flex-shrink: 0;
    transition: opacity 0.15s;
}
.avatar-chip:hover { opacity: 0.88; }

/* ── Page layout ──
   Every portal page opens with ONE header: .page-header wrapping the shared _PageTitle partial
   (title + accent icon + optional subtitle) and, optionally, the page's primary action as the
   second flex child. Wrapping + gap + bottom margin live here so no page inlines them. */
.portal-main { flex: 1 0 auto; }
.page-title { font-size: 1.5rem; font-weight: 700; color: var(--em-text); margin: 0; letter-spacing: -0.4px; }
.page-title i { color: var(--em-accent); }
.page-subtitle { color: var(--em-text-muted); font-size: 0.8125rem; margin: 0.15rem 0 0; }
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 1rem;
}
/* Let a flex child shrink below its content size, so a long title truncates instead of
   pushing the page action off-screen. */
.min-w-0 { min-width: 0; }

/* Group heading above a card/table on a page with several sections (Holidays, Offers, Loans). */
.section-heading {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--em-text-muted);
    margin: 0 0 0.5rem;
}
.section-heading i { color: var(--em-accent); }

/* ── Cards ──
   This is OpsCore's `.modern-card` (OpsCore/wwwroot/css/app.css) using EM's tokens: the BORDER
   defines the card, not a drop shadow. Do NOT re-add a box-shadow, and do NOT write
   `card border-0 shadow-sm` in a view — the two neutralisers below exist only to keep older
   views in line and will be removed once every call site is clean. */
.card {
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    height: fit-content;
    box-shadow: none;
    overflow: hidden; /* clip table/list sharp corners to card border-radius */
}
/* Legacy call sites: Bootstrap's .border-0 / .shadow-sm must not undo the card look. */
.card.border-0 { border: 1px solid var(--em-border) !important; }
.card.shadow-sm, .card.shadow { box-shadow: none !important; }
/* A card inside a Bootstrap grid column: the row's gutter owns the spacing, so the card's own
   bottom margin would double it. And `height: fit-content` must not fight an explicit .h-100. */
.row > [class^="col"] > .card,
.row > [class*=" col"] > .card { margin-bottom: 0; }
.card.h-100 { height: 100%; }
.card-header {
    background: var(--em-surface-raised);
    border-bottom: 1px solid var(--em-border);
    border-radius: 16px 16px 0 0 !important;
    font-weight: 600; font-size: 0.875rem;
    padding: 1rem 1.5rem;
    color: var(--em-text);
}
.card-body { padding: 1.5rem; }
.card-footer {
    background: var(--em-surface-raised);
    border-top: 1px solid var(--em-border);
    border-radius: 0 0 16px 16px !important;
}

/* List groups blend into the card surface (Bootstrap's default bg differs from --em-surface in dark). */
.list-group-item {
    background-color: transparent;
    color: var(--em-text);
    border-color: var(--em-border);
}

/* ── Tables ── */
.table { font-size: 0.875rem; --bs-table-bg: transparent; }
.table th {
    font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--em-text-muted); border-bottom: 1px solid var(--em-border);
    padding: 0.7rem 1rem; white-space: nowrap; background: var(--em-surface-raised);
}
.table td {
    padding: 0.875rem 1rem; vertical-align: middle;
    border-color: var(--em-border-subtle); color: var(--em-text-secondary);
}
/* NO hover background on list rows — rows keep the card surface at all times. Bootstrap's
   .table-hover would tint them, so it is neutralised here rather than stripped from ~20 views. */
.table-hover > tbody > tr:hover > *,
.table-hover tbody tr:hover td,
.table-row-hover:hover td {
    background-color: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-bg-state: transparent;
}
.table-empty { text-align: center; padding: 3rem 1rem; color: var(--em-text-muted); }
.table-empty i { font-size: 2rem; opacity: 0.3; }

/* Bootstrap's .table-light pins a LIGHT --bs-table-bg on the header cells, which wins over the
   themed .table th background and turns the header white in dark mode. Views should not use it;
   this keeps the ones that still do on-theme. */
.table > thead.table-light > tr > th {
    --bs-table-bg: transparent;
    --bs-table-color: var(--em-text-muted);
    background: var(--em-surface-raised);
    color: var(--em-text-muted);
    box-shadow: none;
}
[data-bs-theme="dark"] .table > thead.table-light > tr > th { background: rgba(255,255,255,0.03); }

/* ── Role badge ── */
.role-badge {
    display: inline-block;
    padding: 0.25em 0.7em;
    font-size: 0.73rem; font-weight: 600;
    border-radius: 20px;
    background: var(--em-badge-role-bg);
    color: var(--em-badge-role-text);
    letter-spacing: 0.01em;
}

/* ── Status badges ── */
.badge-active {
    display: inline-block; padding: 0.28em 0.75em;
    font-size: 0.73rem; font-weight: 600; border-radius: 20px;
    background: #dcfce7; color: #166534;
}
.badge-inactive {
    display: inline-block; padding: 0.28em 0.75em;
    font-size: 0.73rem; font-weight: 600; border-radius: 20px;
    background: var(--em-surface-raised); color: var(--em-text-muted);
    border: 1px solid var(--em-border);
}
.badge-anon {
    display: inline-block; padding: 0.28em 0.75em;
    font-size: 0.73rem; font-weight: 600; border-radius: 20px;
    background: #fef9c3; color: #854d0e;
}
[data-bs-theme="dark"] .badge-active   { background: rgba(74,222,128,0.14); color: #86efac; border: none; }
[data-bs-theme="dark"] .badge-inactive { background: rgba(107,114,128,0.18); color: #9ca3af; border-color: transparent; }
[data-bs-theme="dark"] .badge-anon     { background: rgba(234,179,8,0.14); color: #fde047; }

/* ── Audit action badges ──
   Bucket → colour comes from Helpers/AuditActionBadge.ClassFor (coloured by VERB, not entity), so
   "something was destroyed" and "something was attacked" are the loudest things on /Audit. Same shape
   as the status badges above; the action text stays the raw PascalCase literal because the audit
   action filter is a substring search over it. */
.badge-audit-security,
.badge-audit-auth,
.badge-audit-delete,
.badge-audit-create,
.badge-audit-edit,
.badge-audit-neutral {
    display: inline-block; padding: 0.28em 0.75em;
    font-size: 0.73rem; font-weight: 600; border-radius: 20px;
    word-break: break-word;
}
/* security and delete are both red — deliberately the same family, separated by DEPTH (a deeper fill +
   darker ink), not by opacity: dimming the whole badge would take the text's contrast with it. */
.badge-audit-security { background: #fecaca; color: #7f1d1d; }
.badge-audit-auth     { background: var(--em-accent-subtle); color: var(--em-accent-text); }
.badge-audit-delete   { background: #fee2e2; color: #991b1b; }
.badge-audit-create   { background: #dcfce7; color: #166534; }
.badge-audit-edit     { background: #fef3c7; color: #92400e; }
.badge-audit-neutral  { background: var(--em-surface-raised); color: var(--em-text-muted); }

/* auth + neutral read off --em-* vars, which already carry dark values — no override needed. */
[data-bs-theme="dark"] .badge-audit-security { background: rgba(248,113,113,0.26); color: #fecaca; }
[data-bs-theme="dark"] .badge-audit-delete   { background: rgba(248,113,113,0.13); color: #fca5a5; }
[data-bs-theme="dark"] .badge-audit-create   { background: rgba(74,222,128,0.14);  color: #86efac; }
[data-bs-theme="dark"] .badge-audit-edit     { background: rgba(234,179,8,0.14);   color: #fde047; }

/* ── Form sections ── */
.form-section {
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: 16px;
    padding: 1.5rem; margin-bottom: 1.25rem;
    box-shadow: none;
}
.form-section-title {
    font-weight: 600; font-size: 0.875rem;
    color: var(--em-text);
    margin-bottom: 1.25rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--em-border-subtle);
    display: flex; align-items: center;
}

/* ── Form controls — all adaptive ── */

/* Labels: intentionally muted so the value below them takes visual focus */
.form-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--em-text-muted);
    margin-bottom: 0.35rem;
}
/* Suppress the fw-medium override in views — labels always use the muted style */
.form-label.fw-medium { font-weight: 600; }

.form-text { color: var(--em-text-muted); font-size: 0.775rem; opacity: 0.85; }

.form-control, .form-select {
    background-color: var(--em-surface);
    border-color: var(--em-border);
    color: var(--em-text);          /* values = full primary text */
    font-size: 0.9rem; border-radius: var(--em-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
    background-color: var(--em-surface);
    border-color: var(--em-accent);
    color: var(--em-text);
    box-shadow: 0 0 0 0.2rem rgba(83,74,183,0.18);
}
.form-control::placeholder { color: var(--em-text-placeholder); }

/* Browser autofill (Firefox + Chrome/Safari): keep the themed field surface/text instead of the browser's
   pale yellow/blue fill — the login/phone fields looked wrong once Firefox filled them. The theme tokens
   follow light/dark automatically (no body.dark needed). The long background-color transition is the
   standard trick to stop WebKit repainting its own fill over ours. Mirrors OpsCore's app.css. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--em-surface) inset !important;
    -webkit-text-fill-color: var(--em-text) !important;
    caret-color: var(--em-text);
    transition: background-color 9999s ease-in-out 0s;
}
input:autofill,
input:-moz-autofill,
input:-moz-autofill:focus {
    box-shadow: 0 0 0 1000px var(--em-surface) inset !important;
    -moz-text-fill-color: var(--em-text) !important;
}

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

.input-group-text {
    background: var(--em-surface-raised);
    border-color: var(--em-border);
    color: var(--em-text-muted);
}

/* ── Hide number spinners ── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Week-off day toggles ── */
.btn-group:has(.day-toggle) {
    gap: 5px;
    flex-wrap: wrap;
}
.btn-group:has(.day-toggle) > .btn,
.btn-group:has(.day-toggle) > .btn-check + .btn {
    border-radius: 8px !important;
    margin-left: 0 !important;
}
.day-toggle {
    font-size: 0.78rem; font-weight: 700;
    padding: 0.35rem 0;
    min-width: 36px;
    letter-spacing: 0;
}
.btn-check:checked + .btn-outline-primary.day-toggle {
    background-color: var(--em-accent);
    border-color: var(--em-accent);
    color: #fff;
}

/* ── Filter bar ── (same chrome as .card — one look for every boxed surface)
   ONE shape on every list page:
       .filter-bar > form
           .row.g-2.filter-row      ← dropdown filters, sharing a single row (omit when there are none)
           .input-group.input-group-sm  ← search box + Search button, button on the RIGHT
   There is deliberately NO clear/"x" button — submitting an empty search box clears the filter. */
.filter-bar {
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: 16px;
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    box-shadow: none;
}
/* Gap between the filter row and the search row below it. */
.filter-bar .filter-row { margin-bottom: 0.75rem; }
/* The Search button must not wrap its label onto two lines on a narrow phone. */
.filter-bar .input-group .btn { white-space: nowrap; }

/* Attached controls in an .input-group get Bootstrap's own --bs-border-radius(-sm) on their outer
   corners, which is NOT the --em-radius every standalone .form-control / .btn uses — the search box
   ended up with visibly tighter corners than the fields above it. Pin the outer corners to the theme
   radius (all input-groups, so a search box and a plain field always match). */
.input-group > :first-child,
.input-group > .form-control:first-child,
.input-group > .form-select:first-child {
    border-top-left-radius: var(--em-radius);
    border-bottom-left-radius: var(--em-radius);
}
.input-group > :last-child,
.input-group > .btn:last-child,
.input-group > .form-control:last-child,
.input-group > .form-select:last-child {
    border-top-right-radius: var(--em-radius);
    border-bottom-right-radius: var(--em-radius);
}

/* ── Dashboard stat cards ── */
.dashboard-stat-card { transition: border-color 0.15s, transform 0.15s; }
.dashboard-stat-card:hover { border-color: var(--em-accent); transform: translateY(-2px); }

/* ── All-trails map layout (Map/AllTrails) ──────────────────────────────────
   Desktop: a fixed-width employee legend BESIDE the map. Phone: they STACK —
   a 240px sidebar next to a map on a 360px screen left the map ~100px wide. */
.trails-layout { display: flex; gap: 1rem; height: calc(100vh - 200px); min-height: 420px; }
.trails-legend { width: 240px; flex-shrink: 0; overflow-y: auto; margin-bottom: 0; }
.trails-map { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767.98px) {
    .trails-layout { flex-direction: column; height: auto; }
    /* Legend becomes a short scrollable strip above the map, never the whole screen. */
    .trails-legend { width: 100%; max-height: 40vh; }
    .trails-map { height: 60vh; min-height: 320px; }
}

/* ── Dropdown ── */
.dropdown-menu {
    background-color: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-lg);
    box-shadow: var(--em-shadow);
    font-size: 0.875rem;
    padding: 0.375rem;
}
.dropdown-item {
    color: var(--em-text-secondary);
    border-radius: var(--em-radius);
    padding: 0.5rem 0.875rem;
    transition: background 0.1s, color 0.1s;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--em-accent-subtle);
    color: var(--em-text);
}
.dropdown-item.text-danger:hover { background: rgba(239,68,68,0.1); color: #ef4444 !important; }
.dropdown-header { color: var(--em-text-muted); font-size: 0.8rem; padding: 0.375rem 0.875rem; }
.dropdown-divider { border-color: var(--em-border); margin: 0.25rem 0; }

/* ── Notification items ── */
.notif-item { transition: background 0.12s; }
.notif-item:hover { background: var(--em-accent-subtle); }

.notif-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    flex-shrink: 0; font-size: 1rem;
}
.notif-icon--in  { background: #dcfce7; color: #16a34a; }
.notif-icon--out { background: #fee2e2; color: #dc2626; }
[data-bs-theme="dark"] .notif-icon--in  { background: rgba(74,222,128,0.15); color: #4ade80; }
[data-bs-theme="dark"] .notif-icon--out { background: rgba(239,68,68,0.15);  color: #f87171; }

.notif-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--em-accent);
}

/* ── Alerts ── */
.alert-success {
    background: #f0fdf4; border-color: #bbf7d0; color: #166534;
}
.alert-danger {
    background: #fff1f2; border-color: #fecdd3; color: #9f1239;
}
[data-bs-theme="dark"] .alert-success { background: rgba(74,222,128,0.09); border-color: rgba(74,222,128,0.2); color: #86efac; }
[data-bs-theme="dark"] .alert-danger  { background: rgba(239,68,68,0.09);  border-color: rgba(239,68,68,0.2);  color: #fca5a5; }

/* ── Employee avatar sizes ── */
.emp-avatar-sm { width: 32px; height: 32px; object-fit: cover; flex-shrink: 0; }
.emp-avatar-lg { width: 88px; height: 88px; object-fit: cover; }

/* ── Brand logo sizing ── */
.brand-logo { max-height: 30px; width: auto; }

/* ── Misc ── */
code {
    font-size: 0.8em; padding: 0.15em 0.4em;
    background: var(--em-accent-subtle);
    color: var(--em-accent-text);
    border-radius: 4px;
}
.danger-zone {
    border: 1px solid #fecaca; border-radius: var(--em-radius-lg);
    background: #fff5f5; padding: 2rem;
}
[data-bs-theme="dark"] .danger-zone {
    background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.25);
}

/* ── Dark: surface-raised needs explicit bg on table header ── */
[data-bs-theme="dark"] .table th { background: rgba(255,255,255,0.03); }
[data-bs-theme="dark"] .table td { border-color: var(--em-border-subtle); color: var(--em-text-secondary); }
[data-bs-theme="dark"] .table-hover tbody tr:hover td { background-color: transparent; }

/* ═══════════════════════════════════════════════════════
   DESKTOP NAVBAR
═══════════════════════════════════════════════════════ */
.desktop-nav {
    height: 60px;
    align-items: center;
    gap: 0.25rem;
    padding: 0 1.25rem;
    background: var(--em-surface);
    border-bottom: 1px solid var(--em-border);
    position: sticky; top: 0; z-index: 100;
}

.brand-link, .mobile-brand {
    display: flex; align-items: center; gap: 0.625rem;
    text-decoration: none; flex-shrink: 0;
}
/* The topbar brand may shrink and clip so the right-side icons never get pushed off-screen. */
.mobile-brand { flex-shrink: 1; min-width: 0; overflow: hidden; }
.brand-logo { max-height: 28px; width: auto; flex-shrink: 0; }
.brand-name { font-weight: 700; font-size: 1rem; color: var(--em-text); letter-spacing: -0.3px; }
/* Long App/Site name trims with an ellipsis instead of overflowing (phone view). */
.mobile-brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Stack the site name under the app name so the topbar never crowds. */
.brand-titles { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.mobile-brand .brand-name { font-size: 0.92rem; }
.brand-subname {
    font-size: 0.72rem; font-weight: 500; color: var(--em-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* PLATFORM CONSOLE ONLY (_PlatformLayout adds .brand-wrap): a long app title wraps to a second line beside
   the drawer button instead of being cut with an ellipsis — the console topbar has the room for it (no site
   name, no notification bell). Two lines at this size fit inside the fixed 56px .mobile-topbar, so the
   drawer's matching padding-top stays correct. The SITE portal deliberately keeps the ellipsis above. */
.mobile-brand.brand-wrap { align-items: center; }
.mobile-brand.brand-wrap .brand-name {
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* hard cap: never push the topbar taller than 56px */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.15;
}

.brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--em-accent); color: #fff; font-size: 0.9rem; flex-shrink: 0;
}

.desktop-nav-links {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0 0 0 1rem; padding: 0;
    flex: 1;
}
.desktop-nav-links .nav-link {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.875rem; font-weight: 500;
    color: var(--em-text-muted) !important;
    padding: 0.4rem 0.75rem;
    border-radius: var(--em-radius);
    transition: color 0.13s, background 0.13s;
    white-space: nowrap;
}
.desktop-nav-links .nav-link:hover { color: var(--em-text) !important; background: var(--em-accent-subtle); }
.desktop-nav-links .nav-link.active { color: var(--em-accent-text) !important; background: var(--em-accent-subtle); font-weight: 600; }
.desktop-nav-links .nav-link i { font-size: 0.95rem; }

/* Avatar button */
.avatar-btn {
    display: flex; align-items: center; gap: 0.5rem;
    background: none; border: none; border-radius: var(--em-radius);
    padding: 0.35rem 0.5rem; cursor: pointer;
    transition: background 0.12s;
}
.avatar-btn:hover { background: var(--em-accent-subtle); }
.avatar-name { font-size: 0.875rem; font-weight: 500; color: var(--em-text-secondary); }
.avatar-chevron { font-size: 0.7rem; color: var(--em-text-muted); }

/* ═══════════════════════════════════════════════════════
   MOBILE TOPBAR
═══════════════════════════════════════════════════════ */
.mobile-topbar {
    height: 56px;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    background: var(--em-surface);
    border-bottom: 1px solid var(--em-border);
    position: sticky; top: 0; z-index: 1200;  /* must be above drawer (1100) */
}

/* Modals must sit above the sticky topbar (1200) and drawer (1100), not under them.
   Bootstrap defaults are 1055/1050, which the topbar would otherwise paint over. */
.modal { z-index: 1300; }
.modal-backdrop { z-index: 1290; }

/* Cap every modal's content to the viewport so a long dialog's body scrolls and the
   footer (e.g. Save) stays reachable instead of overflowing off-screen. (The JS in
   _PlatformLayout refines this to the real visible px height for mobile toolbars.) */
.modal-content,
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}
/* These edit modals wrap header/body/footer in a <form>, so the form — not the body —
   is the sole flex child of .modal-content. Bootstrap's body-scroll then never engages
   (the form lays out at full natural height and the footer gets clipped/unreachable).
   Make the wrapping form a flex column that fills the capped content, so .modal-body
   becomes the scroll area again with header/footer pinned. */
.modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}
.modal-body,
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    min-height: 0;
}

.drawer-toggle-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--em-radius);
    color: var(--em-text-muted); cursor: pointer; font-size: 1.35rem;
    transition: background 0.12s, color 0.12s;
}
.drawer-toggle-btn:hover,
.drawer-toggle-btn[aria-expanded="true"] {
    background: var(--em-accent-subtle);
    color: var(--em-accent-text);
}

.avatar-btn-sm {
    background: none; border: none; padding: 0; cursor: pointer;
    border-radius: 50%;
}
.avatar-photo-sm {
    display: block;
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    transition: opacity 0.15s;
}
.avatar-photo-sm:hover { opacity: 0.88; }

/* Ring separating a large avatar from a tinted panel behind it (the profile dropdown header, the
   Settings photo card). A class, not an inline style, because _EmployeeAvatar owns the style attribute
   — and it must follow --em-surface, not a fixed light grey, or it becomes a white ring in dark mode. */
.avatar-ring { border: 3px solid var(--em-surface); }

/* Prevent scroll when drawer open */
body.drawer-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════
   SIDE DRAWER
═══════════════════════════════════════════════════════ */
.side-drawer {
    position: fixed;
    top: 0; left: -290px;
    width: 272px; height: 100dvh;
    z-index: 1100;
    display: flex; flex-direction: column;
    background: var(--em-surface);
    border-right: 1px solid var(--em-border);
    box-shadow: 8px 0 32px rgba(0,0,0,0.18);
    transition: left 0.26s cubic-bezier(.4,0,.2,1);
    /* Content starts below the mobile topbar */
    padding-top: 56px;
}
.side-drawer.open { left: 0; }

.drawer-scroller {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0.5rem 0.625rem 1rem;
}

.drawer-section-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--em-text-muted);
    padding: 0.75rem 0.5rem 0.4rem; margin: 0;
}

.drawer-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.875rem;
    border-radius: var(--em-radius);
    text-decoration: none; color: var(--em-text-secondary);
    font-size: 0.9375rem; font-weight: 500;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 2px;
}
.drawer-link:hover { background: var(--em-accent-subtle); color: var(--em-text); }
.drawer-link.active {
    background: var(--em-accent-subtle);
    color: var(--em-accent-text);
    font-weight: 600;
}
.drawer-link i { font-size: 1.05rem; flex-shrink: 0; opacity: 0.75; }
.drawer-link.active i { opacity: 1; }

.drawer-pinned {
    padding: 0.5rem 0.625rem 1rem;
    border-top: 1px solid var(--em-border);
}

/* ── Backdrop ── */
.drawer-overlay {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,0.48);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.26s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* Topbar is universal — no responsive hide. .portal-main flexes to fill (see body). */
.portal-main { flex: 1 0 auto; }

.site-version-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
    color: var(--em-text-muted);
    letter-spacing: 0.04em;
    border-top: 1px solid var(--em-border);
    background: var(--em-bg);
}
.site-version-footer img {
    height: 16px;
    width: auto;
    object-fit: contain;
}
.site-version-footer .version-sep { opacity: 0.5; }

/* ── Stacked tables on phones ──────────────────────────────────────────────
   THE one phone-list mechanism for the whole portal. A table marked .table-stack folds its
   columns into label/value lines under 576px so it never needs a horizontal scrollbar — do NOT
   hand-roll a second `d-md-none` card list beside a desktop table (that renders every row twice).

   IT IS ONE CONTINUOUS LIST INSIDE ONE CARD. Rows are separated by a divider, exactly like the
   desktop table — do NOT turn each row into its own bordered/rounded card (one card per item was
   tried and rejected). The wrapping .card keeps its chrome on phones too.

   Each <td> supplies data-label="…" used as the line caption; the row's identity cell is
   .cell-primary (full width, no caption — avatar + name + muted sub-line) and the actions cell
   is .cell-actions. */
@media (max-width: 575.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    /* A row is a row — a divider, not a card. */
    .table-stack tr {
        border: 0;
        border-bottom: 1px solid var(--em-border-subtle);
        border-radius: 0;
        padding: 0.5rem 1rem;
        margin: 0;
    }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack td {
        border: 0;
        padding: 0.15rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: right;
    }
    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--em-text-muted);
        text-align: left;
        flex: 0 0 auto;
    }
    /* Identity cell: the row's headline — full width, no caption, no divider. */
    .table-stack td.cell-primary {
        display: block;
        text-align: left;
        padding: 0.1rem 0 0.25rem;
    }
    .table-stack td.cell-primary::before { display: none; }
    /* Hidden-on-phone columns stay hidden inside a stacked row. */
    .table-stack td.d-none { display: none !important; }
    /* Multi-line value cell (e.g. Name + site code, Plan + details):
       stack the lines vertically and right-align them under the label. */
    .table-stack td .cell-stack {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }
    .table-stack td.cell-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        text-align: right;
        padding-top: 0.35rem;
    }
    .table-stack td.cell-actions::before { display: none; }
    .table-stack td.cell-actions form,
    .table-stack td.cell-actions .form-select { width: auto; }
    .table-stack td.table-empty { text-align: center; }
    .table-stack td.table-empty::before { display: none; }

    /* The card wrapping a stacked list keeps its chrome; only the horizontal scroll context
       (pointless once the table has folded) is dropped. */
    .table-card .table-responsive { overflow-x: visible; }
}

/* ── intl-tel-input (phone ISD picker) ──────────────────────────────────────
   Used everywhere through Views/Shared/_PhoneIntlInput.cshtml. The library wraps
   the <input> in an inline-block .iti container, which makes the phone field
   narrower than sibling form controls — force it full width. Also lift the
   country dropdown above adjacent Bootstrap input-group buttons (the password
   show/hide eye gets z-index on focus) and above modals. */
.iti { width: 100%; display: block; }
/* Lift the country list above any adjacent Bootstrap input-group button (the password show/hide eye,
   which takes a focus z-index).

   SPECIFICITY MATTERS HERE. The library's own rule is `.iti--inline-dropdown .iti__dropdown-content`
   (z-index: 2) and its stylesheet is injected into <head> AT RUNTIME by _PhoneIntlInput, i.e. AFTER
   this file — so a bare `.iti__dropdown-content` selector loses on specificity and this rule did
   nothing at all. Match the library's selector and add `.iti` to outrank it.

   This is the INLINE dropdown only (ordinary pages). Inside a modal the list is no longer inline: the
   partial hands the library a `dropdownContainer`, because there the problem is the dialog's
   `overflow-y: auto` CLIPPING the list, which no z-index can fix. */
.iti.iti--inline-dropdown .iti__dropdown-content { z-index: 1080; }

/* DARK THEME. The library ships a hardcoded light palette (`--iti-dropdown-bg: white`, `#ccc` borders,
   a black-tinted hover), so the country list stayed a white slab on every dark page.

   Re-point its own CSS VARIABLES at the app's tokens rather than overriding its rules: variables resolve
   by cascade at the point of use, so this cannot be beaten by the library's later-injected stylesheet the
   way a competing `background-color` rule would be. It also survives a library upgrade that reshuffles
   selectors, and covers the dropdown wherever it is rendered — inline, or appended to a `.modal` (where
   it is NOT a descendant of `.iti`, so anything scoped to `.iti` would miss it entirely).

   `html[data-bs-theme="dark"]` (0,1,1), NOT `:root` (0,1,0) — the library declares these on `:root` and
   its stylesheet is injected into <head> at runtime, i.e. AFTER this file, so an equal-specificity
   selector would lose on source order. */
html[data-bs-theme="dark"] {
    --iti-dropdown-bg:   var(--em-surface);   /* a step up from the dialog/page, like any popover */
    --iti-border-color:  var(--em-border);
    --iti-hover-color:   rgba(255,255,255,0.08);  /* drives BOTH hover and the keyboard highlight */
    --iti-arrow-color:   var(--em-text-muted);
    --iti-dialcode-color: var(--em-text-muted);
}
/* The search box sets no colours of its own, so it falls back to the UA's field styling. Pin it to the
   dropdown instead — the country names next to it already inherit the themed text colour. */
[data-bs-theme="dark"] .iti__search-input { background: transparent; color: var(--em-text); }
[data-bs-theme="dark"] .iti__search-input::placeholder { color: var(--em-text-placeholder); }

/* ── Create-site wizard (Platform console → Sites → + Add) ──────────────────
   Four-step dialog driven by wwwroot/js/site-wizard.js. Steps are a plain numbered
   strip; the database list is a selectable list of probed candidates. */
.wiz-steps {
    display: flex; flex-wrap: wrap; gap: .35rem;
    list-style: none; counter-reset: wiz; padding: 0; margin: 0 0 1rem;
}
.wiz-steps li {
    counter-increment: wiz;
    flex: 1 1 0; min-width: 6rem;
    font-size: .8rem; color: var(--em-text-muted, #6c757d);
    border-top: 3px solid var(--em-border); padding-top: .4rem;
}
.wiz-steps li::before { content: counter(wiz) ". "; font-weight: 600; }
.wiz-steps li.active { color: var(--em-accent); border-top-color: var(--em-accent); font-weight: 600; }
.wiz-steps li.done { border-top-color: var(--em-accent); }

.wiz-dblist { border: 1px solid var(--em-border); border-radius: var(--em-radius); overflow: hidden; }
.wiz-db { padding: .6rem .75rem; border-bottom: 1px solid var(--em-border); cursor: pointer; }
.wiz-db:last-child { border-bottom: 0; }
.wiz-db:hover:not(.disabled) { background: var(--em-bg); }
.wiz-db.disabled { cursor: not-allowed; opacity: .75; }
.wiz-db.selected { background: var(--em-bg); box-shadow: inset 3px 0 0 var(--em-accent); }