/* =========================================================================
   COREIDON.AI — DESIGN SYSTEM
   Mobile-first. All color + spacing drawn from CSS custom properties so the
   theme toggle can flip surfaces without JS touching any component.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
    /* Typography */
    --font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Radius — sharp to slightly rounded */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --radius: var(--radius-md);  /* legacy alias */

    /* Motion — snappy, not bouncy */
    --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 160ms var(--ease-snappy);

    /* Z-index scale */
    --z-base: 1;
    --z-sticky: 100;
    --z-sidebar: 900;
    --z-toggle: 950;
    --z-modal: 2000;
    --z-toast: 9999;
}

/* ---- LIGHT THEME ------------------------------------------------------ */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bg-canvas: #FFFFFF;
    --bg-surface: #F8F5F0;      /* secondary white — hero sections, muted blocks */
    --bg-elevated: #FFFFFF;     /* cards over canvas */
    --bg-sunken: #F1EEE8;       /* inset cells, inputs disabled */

    /* Text */
    --text-primary: #000000;
    --text-secondary: #2B303B;
    --text-muted: rgba(43, 48, 59, 0.65);
    --text-inverse: #FFFFFF;

    /* Borders */
    --border-subtle: #E5E7EB;
    --border-medium: #D1D5DB;
    --border-strong: #2B303B;

    /* Brand */
    --brand-navy: #091C3A;
    --brand-navy-hover: #0F2A55;
    --brand-navy-text: #FFFFFF;

    /* Expressive accent — cyan. Never primary CTA. */
    --accent: #0284C7;
    --accent-hover: #0369A1;
    --accent-soft: rgba(2, 132, 199, 0.08);
    --focus-ring: rgba(2, 132, 199, 0.35);

    /* Semantic */
    --success: #16A34A;
    --success-soft: rgba(22, 163, 74, 0.10);
    --danger: #DC2626;
    --danger-soft: rgba(220, 38, 38, 0.10);

    /* Shadow — whisper-soft, we rely on borders for hierarchy */
    --shadow-xs: 0 1px 2px rgba(9, 28, 58, 0.04);
    --shadow-sm: 0 2px 8px rgba(9, 28, 58, 0.05);
    --shadow-md: 0 8px 20px rgba(9, 28, 58, 0.06);
    --shadow-lg: 0 16px 40px rgba(9, 28, 58, 0.08);

    /* Legacy aliases — kept so existing inline styles don't break */
    --bg-main: var(--bg-canvas);
    --bg-secondary: var(--bg-surface);
    --card-bg: var(--bg-elevated);
    --accent-primary: var(--brand-navy);
    --accent-green: var(--success);
    --accent-red: var(--danger);
}

/* ---- DARK THEME ------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — layered navy-ink family */
    --bg-canvas: #0A1220;        /* main page bg */
    --bg-surface: #121B2A;       /* card interiors, table headers */
    --bg-elevated: #243447;      /* popovers, raised */
    --bg-sunken: #0E1826;        /* inset cells */
    --bg-strong: #2B303B;        /* brand secondary dark — sidebar/topbar */

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(248, 245, 240, 0.75);
    --text-muted: rgba(248, 245, 240, 0.45);
    --text-inverse: #091C3A;

    /* Borders */
    --border-subtle: #1F2A3C;    /* thin dividers */
    --border-medium: #2D3D52;    /* card outlines */
    --border-strong: #091C3A;    /* strong interactive accent */

    /* Brand */
    --brand-navy: #091C3A;
    --brand-navy-hover: #122C56;
    --brand-navy-text: #FFFFFF;

    /* Expressive accent — brighter cyan for contrast on dark */
    --accent: #38BDF8;
    --accent-hover: #7DD3FC;
    --accent-soft: rgba(56, 189, 248, 0.12);
    --focus-ring: rgba(56, 189, 248, 0.45);

    /* Semantic — softened for dark surfaces */
    --success: #34D399;
    --success-soft: rgba(52, 211, 153, 0.14);
    --danger: #FB7185;
    --danger-soft: rgba(251, 113, 133, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    /* Legacy aliases */
    --bg-main: var(--bg-canvas);
    --bg-secondary: var(--bg-surface);
    --card-bg: var(--bg-strong);
    --accent-primary: var(--brand-navy);
    --accent-green: var(--success);
    --accent-red: var(--danger);
}

/* ---- Reset + base ----------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition), color var(--transition);
}

::selection {
    background: var(--accent-soft);
    color: var(--text-primary);
}

/* Focus — visible cyan ring everywhere */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---- Typography ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h1 { font-size: 1.75rem; line-height: 1.15; }
h2 { font-size: 1.375rem; line-height: 1.2; }
h3 { font-size: 1.125rem; line-height: 1.25; }
h4 { font-size: 1rem; line-height: 1.3; }

@media (min-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
    h1 { font-size: 2.5rem; }
}

.brand-name {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1rem;
}

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
}

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

/* ---- Layout ----------------------------------------------------------- */
/* Mobile-first: single-column stack. Sidebar slides in as overlay. */
.modern-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-canvas);
}

.modern-main {
    flex: 1;
    width: 100%;
    max-width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-10);
}

@media (min-width: 768px) {
    .modern-main {
        padding: var(--space-6) var(--space-8) var(--space-12);
    }
}

@media (min-width: 1024px) {
    .modern-layout {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
    }
    .modern-main {
        padding: var(--space-10) var(--space-12);
        max-width: 1440px;
        margin: 0 auto;
    }
}

/* ---- Sidebar ---------------------------------------------------------- */
/* Mobile: fixed off-canvas drawer, slides in when .sidebar-open on .modern-layout */
.modern-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(84vw, 320px);
    height: 100vh;
    height: 100dvh;
    background: var(--bg-canvas);
    border-right: 1px solid var(--border-subtle);
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform 260ms var(--ease-snappy);
    overflow-y: auto;
    overscroll-behavior: contain;
}

[data-theme="dark"] .modern-sidebar {
    background: var(--bg-strong);
    border-right-color: var(--border-subtle);
}

.modern-layout.sidebar-open .modern-sidebar {
    transform: translateX(0);
}

/* Backdrop when drawer is open on mobile */
.modern-layout.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.55);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-sidebar) - 1);
}

@media (min-width: 1024px) {
    .modern-sidebar {
        position: sticky;
        top: 0;
        transform: none;
        /* Fill the grid track so the sidebar doesn't overflow onto the
           main content. The mobile drawer width (min(84vw,320px)) would
           otherwise render 60px wider than the 260px track. */
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: var(--space-8) var(--space-6);
        gap: var(--space-8);
    }
    .modern-layout.sidebar-open::after { display: none; }
}

.brand-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.logo-svg,
.brand-logo-container.logo-svg {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
}

.sidebar-close-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    align-self: flex-end;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.sidebar-close-trigger:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
}

@media (min-width: 1024px) {
    .sidebar-close-trigger { display: none; }
}

/* ---- Navigation ------------------------------------------------------- */
.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    white-space: nowrap;
    transition: var(--transition);
}

.nav-item:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

[data-theme="dark"] .nav-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* ---- Header (top bar) ------------------------------------------------- */
.modern-main > header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .modern-main > header {
        margin-bottom: var(--space-10);
    }
}

#menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    min-width: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-canvas);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: var(--transition);
}
#menu-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

@media (min-width: 1024px) {
    #menu-toggle { display: none !important; }
}

#page-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-aligned cluster in the top bar: notification bell + profile pill.
   #page-title's flex:1 pushes this group to the far right. The old
   #user-greeting block was removed when <coreidon-profile> took over the
   header. */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

/* Theme the shared <coreidon-notifications> bell via its public --cn-*
   custom properties so it matches the surrounding header. */
.header-actions coreidon-notifications {
    --cn-accent: var(--accent);
    --cn-icon-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
}

/* Match the shared <coreidon-support> headset to the bell: full-strength icon
   (so its border resolves to the same 14% as the bell, not the muted default)
   and the header accent for the focus ring. */
.header-actions coreidon-support {
    --cs-fg: var(--text-primary);
    --cs-accent: var(--accent);
    display: inline-flex;
    align-items: center;
}

/* Match the shared <coreidon-wallet> pill to the bell/support: full-strength
   icon (so its 14% border resolves the same as theirs, not the muted default)
   and the header accent for the focus ring. The low-balance red stroke is the
   widget's own --cw-danger and is intentionally left untouched. */
.header-actions coreidon-wallet {
    --cw-fg: var(--text-primary);
    --cw-accent: var(--accent);
    display: inline-flex;
    align-items: center;
}

/* ---- Cards ------------------------------------------------------------ */
.card-modern {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

[data-theme="dark"] .card-modern {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

@media (min-width: 768px) {
    .card-modern {
        padding: var(--space-8);
        margin-bottom: var(--space-8);
    }
}

/* ---- Buttons ---------------------------------------------------------- */
.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    min-height: 40px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    background: var(--brand-navy);
    color: var(--brand-navy-text);
    border: 1px solid var(--brand-navy);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition),
                border-color var(--transition),
                transform var(--transition),
                color var(--transition),
                opacity var(--transition);
}

.btn-modern:hover:not(:disabled) {
    background: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
    transform: translateY(-1px);
}

.btn-modern:active:not(:disabled) { transform: translateY(0); }

.btn-modern:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary button: transparent, cyan on hover */
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.btn-outline:hover:not(:disabled) {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .btn-modern {
        padding: 12px 22px;
        min-height: 44px;
        font-size: 0.9rem;
    }
}

/* ---- Form controls ---------------------------------------------------- */
.modern-input,
.modern-select {
    display: block;
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

[data-theme="dark"] .modern-input,
[data-theme="dark"] .modern-select {
    background-color: var(--bg-surface);
    border-color: var(--border-medium);
}

.modern-input::placeholder {
    color: var(--text-muted);
}

.modern-input:focus,
.modern-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.modern-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%232B303B' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

[data-theme="dark"] .modern-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23F8F5F0' d='M6 8 0 0h12z'/></svg>");
}

/* Company language picker (Company settings row). The visible control is the
   same .btn-modern.btn-outline shell as the Manage buttons beside it — a real
   24px material icon + label, flex-centered by the button rules — while the
   actual <select> stretches invisibly over the shell so the native dropdown,
   keyboard handling, and change events stay intact. The caret sits out of
   flow at the right edge (classic select affordance) so it doesn't pull the
   centered icon+label cluster off-axis. */
/* The extra right padding reserves the caret's zone so the flex-centered
   icon+label cluster shifts a few px left — without it the caret makes the
   cluster read pushed-right even though it is mathematically centered. */
.language-select-shell {
    position: relative;
    padding-right: 38px;
}

.language-select-shell > select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.language-select-shell__caret {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Same accent treatment as the buttons' :hover when the invisible select is
   reached by keyboard — no heavy form-control focus ring. */
.language-select-shell:focus-within {
    border-color: var(--accent);
    color: var(--accent);
}

@media (min-width: 768px) {
    .modern-input, .modern-select {
        height: 46px;
        padding: 11px 16px;
        padding-right: 40px; /* for select arrow */
    }
    .modern-input { padding-right: 16px; }
}

/* ---- Tables ----------------------------------------------------------- */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
}

[data-theme="dark"] .table-container {
    background: var(--bg-surface);
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 640px;
}

.modern-table th {
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

[data-theme="dark"] .modern-table th {
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.modern-table td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--text-primary);
    vertical-align: middle;
}

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

.modern-table tbody tr {
    transition: background var(--transition);
}
.modern-table tbody tr:hover {
    background: var(--bg-surface);
}

[data-theme="dark"] .modern-table tbody tr:hover {
    background: var(--bg-elevated);
}

@media (min-width: 768px) {
    .modern-table th {
        padding: var(--space-4) var(--space-5);
    }
    .modern-table td {
        padding: var(--space-4) var(--space-5);
        font-size: 0.95rem;
    }
}

/* ---- Status pills ----------------------------------------------------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pill.active {
    background: var(--success-soft);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.status-pill.inactive {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ---- Modern switch ---------------------------------------------------- */
.modern-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.modern-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--border-medium);
    transition: background var(--transition);
    border-radius: var(--radius-pill);
}

.slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background-color: #FFFFFF;
    border-radius: 50%;
    transition: transform var(--transition);
}

/* Invisible hit-area extension: the painted switch is 40x22, well under the
   ~44px touch minimum — the ::after pad brings the tap target to ~44px tall
   without changing the visual. (::before is taken by the knob.) */
.slider::after {
    content: '';
    position: absolute;
    inset: -11px -4px;
}

input:checked + .slider {
    background-color: var(--success);
}
input:checked + .slider::before {
    transform: translateX(18px);
}

input:focus-visible + .slider {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---- Modal ------------------------------------------------------------ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-4);
    overflow-y: auto;
}

.modal-overlay[style*="flex"],
.modal-overlay.visible {
    display: flex;
}

.modal-modern {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .modal-modern {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

.modal-modern h2 {
    margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
    .modal-modern { padding: var(--space-8); }
    .modal-overlay { align-items: center; }
}

.modal-modern .modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.modal-modern .modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
}
[data-theme="dark"] .modal-modern .modal-close:hover {
    background: var(--bg-sunken);
}
.modal-modern .modal-close .material-icons { font-size: 20px; }

/* Wider variants for modals with many fields / wide trees */
.modal-modern.is-wide   { max-width: 820px; }
.modal-modern.is-xwide  { max-width: 960px; }

.modal-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--space-5);
    margin-top: calc(-1 * var(--space-4));
}

/* Inline-checkbox label row */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    cursor: pointer;
}

/* ---- App pills (scope editor / card grid) ----------------------------- */
.app-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

[data-theme="dark"] .app-item {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

.app-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.app-item-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.app-item .app-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    line-height: 1.35;
    word-break: break-word;
    color: var(--text-primary);
}

/* Scope chips — cyan expressive accent */
.scope-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.scope-badge {
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---- Scope selector (within modal) ------------------------------------ */
.scope-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

.scope-checkbox-item:hover {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

.scope-checkbox-item.checked {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.scope-checkbox-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scope-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.scope-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ---- Responsive table variant (card-per-row on mobile) ---------------- */
@media (max-width: 767px) {
    .modern-table.responsive-table {
        display: block;
        min-width: 0;
        border: none;
    }
    .modern-table.responsive-table thead { display: none; }

    .modern-table.responsive-table tbody,
    .modern-table.responsive-table tr {
        display: block;
        width: 100%;
    }

    .modern-table.responsive-table tr {
        margin-bottom: var(--space-4);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-elevated);
    }

    .modern-table.responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-subtle);
    }

    .modern-table.responsive-table td::before {
        content: attr(data-label);
        font-family: var(--font-heading);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
        margin-right: var(--space-4);
    }

    .modern-table.responsive-table td:last-child { border-bottom: none; }
}

/* ---- Theme toggle (sun/moon, always visible) ------------------------- */
.theme-toggle {
    position: fixed;
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    right: var(--space-5);
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: var(--z-toggle);
    transition: var(--transition);
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.theme-toggle .material-icons {
    font-size: 20px;
}

[data-theme="dark"] .theme-toggle {
    background: var(--bg-elevated);
}

@media (min-width: 1024px) {
    .theme-toggle {
        bottom: var(--space-8);
        right: var(--space-8);
    }
}

/* ---- Toast ------------------------------------------------------------ */
.toast-container {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
    padding: 0 var(--space-4);
    max-width: calc(100vw - var(--space-8));
}

.toast {
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand-navy-text);
    background: var(--brand-navy);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 200ms var(--ease-snappy), transform 200ms var(--ease-snappy);
    pointer-events: auto;
    border: 1px solid transparent;
}

.toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.toast.green { background: var(--success); color: #FFFFFF; }
.toast.red   { background: var(--danger); color: #FFFFFF; }

[data-theme="dark"] .toast.green,
[data-theme="dark"] .toast.red {
    color: #FFFFFF;
}

/* ---- Utility classes -------------------------------------------------- */

/* Layout primitives */
.stack     { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm  { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg  { display: flex; flex-direction: column; gap: var(--space-6); }

.row            { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row-tight      { display: flex; gap: var(--space-2); align-items: center; }
.row-end        { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.row-between    { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row-top        { display: flex; gap: var(--space-3); align-items: flex-start; }
.spacer         { flex: 1 1 auto; }

/* Responsive grid helpers. Collapse to single column on mobile. */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Typography */
.text-xs  { font-size: 0.75rem; }
.text-sm  { font-size: 0.85rem; }
.text-md  { font-size: 0.95rem; }
.text-lg  { font-size: 1.125rem; }

.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-primary  { color: var(--text-primary); }
.text-danger   { color: var(--danger); }
.text-success  { color: var(--success); }
.text-accent   { color: var(--accent); }

.text-right    { text-align: right; }
.text-center   { text-align: center; }

.fw-500        { font-weight: 500; }
.fw-600        { font-weight: 600; }
.fw-700        { font-weight: 700; }

.mono          { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Small uppercase labels (form fields, table-like headers) */
.label-sm {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

/* Responsive-visibility toggles. revert (not initial) restores the element's
   stylesheet/UA display — initial would force inline on everything,
   silently breaking block elements when they reappear. */
.hidden-mobile  { display: none; }
.hidden-desktop { display: revert; }
@media (min-width: 768px) {
    .hidden-mobile  { display: revert; }
    .hidden-desktop { display: none; }
}

/* ---- Component classes ----------------------------------------------- */

/* Card header: title block (left) + actions (right), stacks on mobile. */
.card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.card-header .card-title    { font-size: 1.5rem; }
.card-header .card-subtitle { color: var(--text-secondary); font-size: 0.9rem; }
.card-header .card-header-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (min-width: 768px) {
    .card-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: var(--space-8);
    }
    .card-header .card-title { font-size: 2rem; }
}

/* Settings list — labeled rows (title + description) with a trailing control.
   Mobile-first: text and control stack; >=640px they sit on one line with the
   control trailing right. Used by the My Company "Company settings" section. */
.settings-list { display: flex; flex-direction: column; gap: var(--space-3); }
.settings-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
[data-theme="dark"] .settings-row { border-color: var(--border-medium); }
.settings-row__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
}
.settings-row__desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: var(--space-1) 0 0;
}
.settings-row__control { width: 100%; }
.settings-row__control > .btn-modern { width: 100%; }
@media (min-width: 640px) {
    .settings-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }
    .settings-row__control { width: auto; flex: 0 0 auto; }
    /* Uniform width so the three controls line up (left edges align): at least
       as wide as the longest label (RO "Gestionează"), equal across the Manage
       buttons and the language-picker shell (also a .btn-modern). */
    .settings-row__control > .btn-modern { width: auto; min-width: 180px; }
}

/* Extra breathing room between the Company settings block and the User
   Management section below it. Two-class selector so it beats the base
   .divider margin regardless of source order. */
.divider.company-settings__sep { margin-top: var(--space-5); margin-bottom: var(--space-8); }

/* Form groups + rows */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-group label,
.form-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.form-row-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.form-row-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) {
    .form-row-2 { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (min-width: 768px) {
    .form-row-3 { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
}

/* Inline status slot between form body and actions */
.form-status {
    min-height: 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.form-status.is-error   { color: var(--danger); }
.form-status.is-success { color: var(--success); }

/* Action row at the bottom of forms / modals */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-2);
}

/* Hint text under a form / in a callout box */
.form-help {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Compact icon-only button (28×28) — used across tree rows, tables */
/* Row-level edit/delete actions (org-unit + company-role managers): full
   touch size on phones, the dense 28px square from tablet up. */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon .material-icons { font-size: 16px; }
@media (min-width: 768px) {
    .btn-icon { width: 28px; height: 28px; }
}

.btn-icon-sm {
    width: 24px;
    height: 24px;
}
.btn-icon-sm .material-icons { font-size: 14px; }

/* Destructive variant */
.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #FFFFFF;
}
.btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 82%, #000 18%);
    border-color: color-mix(in srgb, var(--danger) 82%, #000 18%);
    color: #FFFFFF;
}

/* Group of action buttons in a tight flex row */
.btn-group { display: inline-flex; gap: 4px; flex-shrink: 0; }

/* Password-field wrapper: input + inline eye toggle */
.pw-field { position: relative; }
.pw-field .modern-input { padding-right: 44px; }
.pw-field .pw-toggle {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.pw-field .pw-toggle:hover { color: var(--text-primary); }
.pw-field .pw-toggle .material-icons { font-size: 20px; }

/* Callout / helper panel — subtle surface with optional title */
.panel-note {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.panel-note .panel-note-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

[data-theme="dark"] .panel-note {
    background: var(--bg-sunken);
    border-color: var(--border-subtle);
}

/* Empty-state centered message inside lists/tables */
.empty-state {
    padding: var(--space-6);
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.9rem;
}

/* Divider */
.divider {
    height: 1px;
    background: var(--border-subtle);
    border: 0;
    margin: var(--space-4) 0;
}

/* Inline read-only value display (used where an editable select was) */
.readonly-value {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.readonly-value.is-role { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }

/* Clickable email link (mailto:). Inherits the surrounding muted color so it
   blends with the email-as-meta look; the cursor + hover accent reveal it
   as interactive. */
.mail-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition);
}
.mail-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ---- My Company page chrome ------------------------------------------ */
/* Mobile/tablet: the page sits inside .modern-main's own padding like every
   other page. Only at >=1024px (when the sidebar becomes a column) does the
   page go full-bleed with the wide --page-gutter; the single custom property
   keeps the header padding and card margins from drifting apart. */
@media (min-width: 1024px) {
    /* Let the My Company page fill the viewport width (minus the gutters)
       instead of being capped at the global 1440px column. Scoped via :has()
       so other pages keep their centered 1440px layout. */
    .modern-main:has(.my-company-page) {
        --page-gutter: 140px;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    /* Pull the header (menu button on the left, notification bell + profile
       pill on the right) inward so its right edge lines up with the card's. */
    .modern-main:has(.my-company-page) > header {
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
    }
    /* Horizontal breathing room from sidebar + page edge. */
    .my-company-page {
        margin-left: var(--page-gutter);
        margin-right: var(--page-gutter);
    }
}

/* Tighter typography in the dashboard table. */
.my-company-page .modern-table th,
.my-company-page .modern-table td {
    font-size: 0.82rem;
}
.my-company-page .modern-table .identity-name { font-size: 0.88rem; }
.my-company-page .modern-table .identity-meta {
    font-size: 0.72rem;
    /* Long emails would otherwise blow the fixed column width. */
    overflow-wrap: anywhere;
}

/* Tablet+ keeps the real table; below 768px the card-per-row
   .responsive-table variant takes over (see the mobile block further down),
   so the fixed layout, width floor and centering must not apply there. */
@media (min-width: 768px) {
    /* Equal-width columns: each of the 7 data headers/cells gets an equal
       share of the table width regardless of content. Keeps the layout
       aligned and rhythmic across viewport sizes. The min-width floor is
       7 × (160px dropdown-min + 2 × 16px cell padding), plus the 44px select
       column admins get, so the dropdowns never overflow into the next
       column — below this the surrounding .table-container scrolls
       horizontally instead. */
    .my-company-page .modern-table {
        table-layout: fixed;
        width: 100%;
        min-width: 1388px;
    }

    /* Center all column-header labels — and align cell contents to match so
       the auto-sized dropdowns/toggles/buttons don't drift to the left while
       the header floats over the column center. */
    .my-company-page .modern-table thead th,
    .my-company-page .modern-table tbody td {
        text-align: center;
    }
    /* The manager picker is a block-level wrapper (it needs position:relative
       for its popup), so text-align doesn't reach it — center via margin auto. */
    .my-company-page .manager-picker {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile (matches the .responsive-table variant's own breakpoint): rows are
   self-bordered cards, so the .table-container chrome is redundant — and its
   scroll context must go away or the absolutely-positioned manager-picker
   popup stays clipped inside it. */
@media (max-width: 767px) {
    .my-company-page .table-container {
        border: none;
        overflow: visible;
        background: transparent;
    }
    /* Identity cell holds two stacked lines (name + email); the variant's
       label/value flex row would set them side by side. Stack instead. */
    .my-company-page .modern-table.responsive-table td.identity {
        display: block;
        text-align: left;
    }
    .my-company-page .modern-table.responsive-table td.identity::before {
        display: block;
        margin-bottom: 4px;
    }
    /* Anchor the popup to the picker's right edge with a readable width —
       in card mode the picker itself can be narrower than the options. */
    .my-company-page .manager-picker-popup {
        left: auto;
        right: 0;
        width: min(280px, calc(100vw - 48px));
    }
}

/* Smaller Actions-column buttons (Edit Scopes / Edit Roles). */
.btn-modern.btn-sm {
    padding: 6px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.btn-modern.btn-sm .material-icons { font-size: 16px; }

/* Org Unit + Access Level dropdowns fill their column between a 200px floor
   and a 280px cap so they keep a consistent visible width across the row. */
.my-company-page .modern-table .dept-selector,
.my-company-page .modern-table .role-selector {
    width: 100%;
    max-width: 280px;
    min-width: 160px;
}
.my-company-page .modern-table .dept-selector {
    white-space: normal;
    line-height: 1.25;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}
/* Same sizing for the manager picker (which is a block wrapper, not a select). */
.my-company-page .modern-table .manager-picker {
    width: 100%;
    max-width: 280px;
    min-width: 160px;
}

/* Manager column trigger: 2-line (name + email) layout. */
.manager-picker-trigger {
    height: auto;
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.2;
}
.manager-picker-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
}
.manager-picker-label .identity-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.manager-picker-label .identity-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.manager-picker-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Hide-inactive toggle filter: collapses inactive rows without removing
   them from the DOM, so a status flip back to active reveals them again. */
.my-company-page.is-hiding-inactive .modern-table tbody tr[data-active="0"] {
    display: none;
}

/* Rows outside the current page / search / filters. Same keep-it-in-the-DOM
   trick as above — the filter pass only toggles this class, so bound selects
   and manager pickers survive paging. Unscoped: My Company and Global Admin
   both page their roster this way. */
.modern-table tbody tr.is-row-hidden {
    display: none;
}

/* ---- Roster multi-select (My Company + Global Admin) ------------------- */
/* Select column: pinned narrow, otherwise table-layout:fixed hands it the same
   share as a data column. Only inside the desktop block — in card-per-row mode
   the cell is a full-width flex row like every other td. */
@media (min-width: 768px) {
    .modern-table th.col-select,
    .modern-table td.col-select {
        width: 44px;
    }
}
.modern-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}
.modern-table tbody tr.is-selected {
    background: var(--accent-soft);
}

/* ---- Filter bar (Global Admin: company / org unit / role) -------------- */
/* Lives inside .card-header-actions, alongside the search box and Create
   User, so the whole toolbar reads as one line on a desktop. Phone-first:
   full-width stacked selects, side by side from 640px. The selects are kept
   narrow because five controls share that line before it wraps. */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}
@media (min-width: 640px) {
    .filter-bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        width: auto;
    }
    .filter-bar .modern-select {
        width: auto;
        min-width: 150px;
        max-width: 210px;
    }
}

/* Create User shares that line with three dropdowns and a search box, and at
   the default button size it dominates them. Sized to the controls beside it
   instead: same 44px height as .modern-select / .modern-input, text a notch
   down, padding tight enough that it reads as one more control rather than
   the point of the toolbar. */
.global-users-page .card-header-actions > .btn-modern {
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.82rem;
}
.global-users-page .card-header-actions > .btn-modern .material-icons {
    font-size: 18px;
}
/* HR records with no midway.user_auth_data row — drivers and other non-login
   staff. Muted so the row reads as "on the payroll, not on the platform"
   rather than as a user whose settings you're looking at. Opacity only: every
   action on the row still works, which matters most on Global Admin where a
   Superadmin has to be able to edit and delete these profiles. Unscoped —
   both rosters mark them the same way. */
.modern-table tbody tr.is-no-account {
    opacity: 0.55;
}
/* Phone twin of the header's select-all: card-per-row mode hides the whole
   thead, which would leave mobile admins ticking rows one at a time. */
.roster-select-all {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.roster-select-all input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}
@media (min-width: 768px) {
    .roster-select-all { display: none; }
}

/* ---- Bulk actions card (appears once a row is ticked) ------------------ */
/* Phone-first: everything stacked. From 768px the whole bar is one line —
   count, what to change, its value, then Cancel + Apply pushed to the end. */
.bulk-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
}
.bulk-actions[hidden] { display: none; }
/* .modern-select declares display:block, which outranks the UA's [hidden]
   rule — restate it so the field for the action you didn't pick stays gone. */
.bulk-actions [hidden] { display: none; }

.bulk-actions__count {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    white-space: nowrap;
}
.bulk-actions__count .material-icons {
    color: var(--accent);
    font-size: 20px;
}
.bulk-actions__count strong { font-family: var(--font-heading); }

/* Cancel + Apply travel together, so they stay side by side at every width —
   only their position in the bar changes. */
.bulk-actions__buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* The company-role action needs two controls (add/remove + which role) where
   the other two need one, so they're wrapped as a single value slot. */
.bulk-actions__pair {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
@media (min-width: 768px) {
    .bulk-actions__pair {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }
}

@media (min-width: 768px) {
    .bulk-actions {
        flex-direction: row;
        align-items: center;
        /* Wraps rather than squeezing the selects when the org-unit names are
           long or the window is narrow. */
        flex-wrap: wrap;
    }
    .bulk-actions .modern-select {
        width: auto;
        min-width: 170px;
    }
    /* The action picker leads, so give it a little more presence than the
       value beside it. */
    .bulk-actions__what { font-weight: 600; }
    .bulk-actions__buttons { margin-left: auto; }
}

/* ---- Chip buttons: alphabet filter + table pager ----------------------- */
/* Both strips are rows of the same small chip button, so they share one base
   and differ only in what sits inside. Written phone-first — these are the
   mobile sizes; the 768px block scales them up.
   Chips never shrink (flex: 0 0 auto): the alphabet strip scrolls rather than
   squeezing 27 letters into whatever width is left. */
.alpha-tab,
.alpha-nav,
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition),
                background var(--transition);
}
.alpha-tab:hover:not(:disabled):not(.is-active),
.alpha-nav:hover:not(:disabled),
.pagination-btn:hover:not(:disabled):not(.is-active) {
    border-color: var(--accent);
    color: var(--accent);
}
.alpha-tab.is-active,
.pagination-btn.is-active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--brand-navy-text);
}
/* Navy on the dark canvas is nearly invisible at this size — the selection
   has to read at a glance, so dark mode borrows the accent like the subpage
   tabs do. */
[data-theme="dark"] .alpha-tab.is-active,
[data-theme="dark"] .pagination-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
}
.alpha-nav:disabled,
.pagination-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
/* Letters nobody answers to are dropped from the strip, not greyed out (see
   applyUserTableFilters). display:inline-flex above would beat the UA's
   [hidden] rule on its own, so it has to be restated here. */
.alpha-tab[hidden] { display: none; }
.alpha-nav .material-icons,
.pagination-btn .material-icons { font-size: 18px; }

@media (min-width: 768px) {
    .alpha-tab,
    .alpha-nav,
    .pagination-btn {
        min-width: 34px;
        height: 34px;
        font-size: 0.82rem;
    }
}

/* ---- Alphabet filter (My Company: jump to an initial) ------------------ */
/* Always a single row. The 27 letter chips scroll horizontally inside
   .alpha-track under the ◀ ▶ buttons; "All" is pinned outside it so the reset
   never scrolls out of reach. */
.alpha-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--space-4);
}
.alpha-tab--all { padding: 0 12px; }
.alpha-track {
    display: flex;
    flex: 1 1 auto;
    /* Without this a flex item refuses to shrink below its content width,
       which for 27 chips means the strip overflows the card instead of
       scrolling inside it. */
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    /* Room for the global focus ring (2px outline + 2px offset), which an
       overflow container would otherwise clip off the top and bottom of a
       focused chip. The negative margin keeps the strip's outer height at the
       chip height, so nothing below shifts. scroll-padding does the same job
       on the leading edge when Tab scrolls a chip into view. */
    padding: 4px 0;
    margin: -4px 0;
    scroll-padding-inline: 6px;
    /* The arrows are the affordance; a scrollbar under a 32px row is just
       noise (and eats the chips' height on desktop). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.alpha-track::-webkit-scrollbar { display: none; }
/* Set by updateAlphaNavState() only when the alphabet actually overflows —
   on a wide screen the whole strip fits and the arrows would be dead chrome. */
.alpha-filter:not(.is-scrollable) .alpha-nav { display: none; }

/* ---- Table pager ------------------------------------------------------- */
/* Phone-first: summary stacked over the controls, side by side from 640px. */
.table-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
/* display:flex would otherwise beat the UA's [hidden] rule, leaving an empty
   pager bar behind when the filters match nothing. */
.table-pagination[hidden] { display: none; }
@media (min-width: 640px) {
    .table-pagination {
        flex-direction: row;
        justify-content: space-between;
    }
}
/* Size picker and range read as one unit, so the bar keeps the two children
   its space-between layout is built around. */
.pagination-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}
.pagination-summary {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
/* .modern-select is a full-width 44px form field; in the pager it has to sit
   at chip scale, so the box metrics are restated (the themed background,
   border and focus ring still come from .modern-select). padding-right and
   the arrow position move together — the caret is a background image, not a
   glyph the padding can push around.
   Type follows .pagination-summary next to it rather than the bold heading
   font of .pagination-btn across the bar: it's the label's neighbour, not the
   buttons'. Only the height is shared with the buttons, to keep the row even.
   Colour stays --text-primary, though — muted like the summary, the control
   would read as disabled. */
.pagination-size {
    width: auto;
    height: 32px;
    padding: 0 32px 0 10px;
    background-position: right 10px center;
    font-size: 0.78rem;
}
@media (min-width: 768px) {
    .pagination-size {
        height: 34px;
        font-size: 0.82rem;
    }
}
.pagination-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.pagination-gap {
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ---- Subpage tabs (My Company: Dashboard | Hierarchy) ----------------- */
/* Phones don't get the Hierarchy subpage — the org chart needs more room
   than a phone offers even with touch pan — and with Dashboard as the only
   remaining subpage the tab bar itself is dead chrome, so both hide below
   768px. renderUsersPage coerces a remembered 'hierarchy' choice back to
   Dashboard to match. */
.subpage-tabs {
    display: none;
    gap: 4px;
    padding: var(--space-3) var(--space-4) 0 var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 60px;
}
@media (min-width: 768px) {
    .subpage-tabs { display: flex; }
}
@media (max-width: 767px) {
    .subpage-content[data-subpage-content="hierarchy"] { display: none; }
}
.subpage-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.subpage-tab:hover { color: var(--text-primary); }
.subpage-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.subpage-tab .material-icons { font-size: 18px; }

/* ---- Org chart (Hierarchy subpage) ------------------------------------ */
.org-canvas {
    position: relative;
    width: 100%;
    /* dvh avoids the mobile URL-bar resize jump; the lower mobile floor keeps
       a scrollable strip of page around the canvas, which swallows touch
       gestures via touch-action: none (needed so pan/pinch reach the chart
       instead of scrolling the page). */
    height: min(70vh, 70dvh);
    min-height: 360px;
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-elevated);
    background-image:
        radial-gradient(circle at 1px 1px, var(--border-subtle) 1px, transparent 0);
    background-size: 24px 24px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
@media (min-width: 768px) {
    .org-canvas { min-height: 480px; }
}
.org-canvas.is-panning { cursor: grabbing; }
[data-theme="dark"] .org-canvas { background-color: var(--bg-sunken); }

.org-canvas-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    padding: var(--space-4);
}
/* Temporary class added during a search-jump so the camera glides instead of
   snapping. Removed after the transition completes, so drag/wheel stay snappy. */
.org-canvas-inner.is-flying {
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mobile-first: the controls span the canvas top so the search box gets a
   usable width; >=640px they float compactly in the top-right corner. */
.org-canvas-controls {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    z-index: 10;
}
@media (min-width: 640px) {
    .org-canvas-controls { left: auto; }
}

.org-canvas-toolbar {
    display: flex;
    gap: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .org-canvas-toolbar {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Hierarchy search: type to filter, click a result to focus on that user. */
.org-search {
    position: relative;
    flex: 1;
    min-width: 0;
}
@media (min-width: 640px) {
    .org-search { flex: none; width: 260px; }
}
.org-search-input {
    width: 100%;
    height: 38px;
    padding: 6px 12px 6px 36px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.85rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .org-search-input {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.org-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.org-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
    pointer-events: none;
}
.org-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .org-search-results {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.org-search-result {
    padding: 6px 12px;
    cursor: pointer;
}
.org-search-result:hover,
.org-search-result.is-active { background: var(--bg-surface); }
[data-theme="dark"] .org-search-result:hover,
[data-theme="dark"] .org-search-result.is-active { background: var(--bg-sunken); }
.org-search-result.is-hidden { display: none; }
.org-search-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.org-search-mail {
    font-size: 0.7rem;
    color: var(--text-muted);
}
/* On touch viewports the zoom tools are the ONLY zoom mechanism (the wheel
   is mouse-only), so they get full 40px touch targets; desktop restores the
   dense 28px look. */
.canvas-tool {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.canvas-tool:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}
[data-theme="dark"] .canvas-tool:hover { background: var(--bg-sunken); }
@media (min-width: 1024px) {
    .canvas-tool { width: 28px; height: 28px; }
}

/* Hidden on phones: the copy describes mouse gestures (drag/scroll/drag-to-
   reparent) and the wrapped pill would cover the lower third of the canvas. */
.org-canvas-hint {
    display: none;
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    max-width: 60%;
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    z-index: 10;
    pointer-events: none;
}
@media (min-width: 768px) {
    .org-canvas-hint { display: block; }
}
[data-theme="dark"] .org-canvas-hint {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

.org-tree, .org-tree ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 20px 0 0 0;
    display: flex;
    justify-content: center;
}

.org-tree li {
    flex: none;
    position: relative;
    padding: 20px 8px 0 8px;
    text-align: center;
    list-style: none;
}

/* Horizontal connector halves above each child. ::before is the left half,
   ::after is the right half + the short vertical drop down to the card. */
.org-tree li::before,
.org-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 20px;
    border-top: 1px solid var(--border-medium);
}
.org-tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid var(--border-medium);
}

/* Root has no incoming connector. */
.org-tree > li { padding-top: 0; }
.org-tree > li::before,
.org-tree > li::after { display: none; }

/* Only child: hide horizontal halves (the parent's vertical drop is enough)
   AND drop the 20px top padding the multi-child case needs. Without this,
   the parent's vertical line ends 20px above the child card, leaving a gap. */
.org-tree li:only-child::before,
.org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }

/* First / last child: trim the outer half of the horizontal line and round
   the corner so the connector reads as a single bracket. */
.org-tree li:first-child::before { border: 0; }
.org-tree li:last-child::after { border: 0; }
.org-tree li:last-child::before {
    border-right: 1px solid var(--border-medium);
    border-radius: 0 4px 0 0;
}
.org-tree li:first-child::after { border-radius: 4px 0 0 0; }

/* Vertical drop from a parent card down to its children's horizontal bar. */
.org-tree li > ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 20px;
    border-left: 1px solid var(--border-medium);
}

.org-node {
    position: relative;
    display: inline-block;
    min-width: 180px;
    max-width: 240px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: default;
    transition: box-shadow var(--transition), outline-color var(--transition);
}
.org-node[draggable="true"] { cursor: grab; }
.org-node[draggable="true"]:active { cursor: grabbing; }
.org-node.is-dragging { opacity: 0.45; }
.org-node.is-drop-target {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.04);
}

/* The toggle is the only collapse mechanism, so phones get a 32px target;
   desktop restores the small badge look. */
.org-node-toggle {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}
.org-node-toggle:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
[data-theme="dark"] .org-node-toggle { background: var(--bg-surface); }
@media (min-width: 1024px) {
    .org-node-toggle { top: -10px; right: -10px; width: 22px; height: 22px; }
}

.org-node-collapsed-badge {
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
[data-theme="dark"] .org-node {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}
.org-node-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
/* Primary meta slot: company-role chips (or an em-dash placeholder). */
.org-node-roles {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.org-node-no-roles {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
}
/* Secondary, smaller line below company roles — the platform access level. */
.org-node-access {
    margin-top: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
}
.org-node-mail {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
    /* Long emails would otherwise widen the card past .org-node's max-width
       (same pattern as the users-table .identity-meta). */
    overflow-wrap: anywhere;
}

/* ---- Manager picker (custom searchable dropdown) ---------------------- */
.manager-picker {
    position: relative;
    min-width: 140px;
    max-width: 280px;
    width: auto;
}

.manager-picker-trigger {
    text-align: left;
    cursor: pointer;
}
/* Two-line manager label (name + email) lives in the My Company page chrome
   section above. The old single-line layout was here and clobbered it. */

.manager-picker-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .manager-picker-popup {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.manager-picker-search-wrap {
    padding: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.manager-picker-options {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
}

/* Taller rows on phones for tappability; denser from tablet up. */
.manager-picker-option {
    padding: 12px 14px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .manager-picker-option { padding: 8px 14px; }
}
.manager-picker-option:hover {
    background: var(--bg-surface);
}
[data-theme="dark"] .manager-picker-option:hover {
    background: var(--bg-sunken);
}
.manager-picker-option.is-hidden { display: none; }

/* Small pill-like tag (e.g., unit type badge, company chip) */
.tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}
[data-theme="dark"] .tag {
    background: var(--bg-sunken);
    border-color: var(--border-subtle);
}

/* Identity cell pattern: primary line + muted subline */
.identity .identity-name { font-weight: 700; color: var(--text-primary); }
.identity .identity-meta { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }

/* Modal body scroll guard: max-height area inside the modal */
.modal-scroll {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

/* "Edit row" highlight used in the org-unit manager */
.edit-row-active {
    background: var(--accent-soft);
}

/* ---- Org-unit manager (inside the modal) ----------------------------- */
.ou-manager-hint { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: var(--space-4); }
.ou-manager-hint .material-icons { font-size: 14px; vertical-align: middle; }

.ou-filter-bar {
    display: grid;
    /* minmax(0,...) lets the track shrink below its content's min-content
       width on phones (plain 1fr floors at min-content). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    align-items: end;
}
@media (min-width: 640px) {
    .ou-filter-bar { grid-template-columns: 180px 1fr; }
}

.ou-create-fieldset {
    /* Override the UA default fieldset min-width: min-content, which would
       otherwise floor the whole modal at the widest type row on phones. */
    min-width: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}
.ou-create-fieldset > legend {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 var(--space-2);
    color: var(--text-secondary);
}
.ou-create-fieldset .ou-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: end;
}
@media (min-width: 768px) {
    .ou-create-fieldset .ou-create-grid {
        grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr) auto;
        gap: var(--space-3);
    }
}

.ou-tree-container {
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ou-drop-root {
    padding: 10px var(--space-4);
    background: var(--bg-surface);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border-subtle);
    text-align: center;
}
.ou-drop-root .material-icons { font-size: 14px; vertical-align: middle; }

/* Tree rows indent by the --depth set inline per row; the per-level step is
   narrower on phones so deep trees don't eat half the modal width. */
.ou-row {
    --ou-indent: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 1rem 10px calc(1rem + var(--depth, 0) * var(--ou-indent));
    border-bottom: 1px solid var(--border-subtle);
    cursor: grab;
}
.ou-row:last-child { border-bottom: none; }

.ou-row-label {
    display: inline-flex;
    /* Wrapping beats crushing: the unit name keeps a readable floor and the
       usage tags drop to the next line on narrow rows. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    min-width: 0;
}
.ou-row-label .drag-grip       { font-size: 16px; opacity: 0.3; }
.ou-row-label .branch-icon     { font-size: 16px; opacity: 0.6; }
.ou-row-label .branch-icon-sub { opacity: 0.4; }
.ou-row-label .unit-name {
    flex: 1 1 auto;
    min-width: 6ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ou-edit-row {
    --ou-indent: 0.75rem;
    padding: var(--space-3) 1rem var(--space-3) calc(1rem + var(--depth, 0) * var(--ou-indent));
    border-bottom: 1px solid var(--border-subtle);
    background: var(--accent-soft);
}
@media (min-width: 640px) {
    .ou-row, .ou-edit-row { --ou-indent: 1.5rem; }
}
.ou-edit-row .ou-edit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
    .ou-edit-row .ou-edit-grid {
        grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
    }
}

/* ---- Global Admin page ----------------------------------------------- */
.search-field {
    position: relative;
    width: 100%;
}
@media (min-width: 640px) {
    .search-field { width: 260px; }
}
.search-field > .modern-input { padding-left: 2.25rem; }
.search-field > .material-icons {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 18px;
}

.company-chip {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-subtle);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* ---- Bulk upload modal ------------------------------------------------ */
.template-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.template-link .material-icons { font-size: 16px; }
.template-link:hover { color: var(--accent-hover); }

.bulk-results {
    margin-top: var(--space-2);
    max-height: 260px;
    overflow-y: auto;
}
.bulk-results-table { font-size: 0.85rem; min-width: 0; }
/* Long emails/details wrap instead of forcing a sideways scroll inside the
   already-vertically-scrolling results box. */
.bulk-results-table td { overflow-wrap: anywhere; }
@media (max-width: 767px) {
    /* Card-per-row mode (.responsive-table) renders taller rows. */
    .bulk-results { max-height: 320px; }
}

/* ---- Apps Editor (scope management modal) ---------------------------- */
.permissions-editor { display: flex; flex-direction: column; gap: var(--space-6); }

.permissions-editor > header {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-5);
}
.permissions-editor > header h2 { font-size: 1.5rem; margin: 0; }
.permissions-editor > header .identity-strip {
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    margin-top: var(--space-2);
}
.permissions-editor > header .identity-strip .identity-value {
    color: var(--brand-navy);
}
[data-theme="dark"] .permissions-editor > header .identity-strip .identity-value {
    color: var(--accent);
}

.permissions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .permissions-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.permissions-column .permissions-column-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.permissions-column.available .permissions-column-title { color: var(--text-muted); }
.permissions-column.available .permissions-column-title .material-icons { font-size: 18px; }

.permissions-column.allowed .permissions-column-title { color: var(--success); }
.permissions-column.allowed .permissions-column-title .material-icons { font-size: 18px; }

.permissions-dropzone {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 160px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 2px dashed var(--border-medium);
}
.permissions-dropzone.is-allowed {
    background: var(--success-soft);
    border: 2px solid color-mix(in srgb, var(--success) 30%, transparent);
    border-style: solid;
}
[data-theme="dark"] .permissions-dropzone { background: var(--bg-sunken); }

.permissions-editor > footer {
    display: flex;
    /* Without wrap the justify-end row overflows LEFT on narrow phones,
       which is unreachable in LTR — the Discard button gets clipped. */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

/* Scope selector sub-modal uses a higher z-index than parent modal */
#scope-selector-modal { z-index: 3000; }
#scope-selector-modal .modal-modern { max-width: 500px; }
#scope-checkboxes-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    max-height: 240px;
    overflow-y: auto;
    padding-right: var(--space-2);
}
#scope-hint-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

/* Destructive outline variant — used for the Revoke App button */
.btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}
.btn-outline-danger:hover:not(:disabled) {
    color: #FFFFFF;
    background: var(--danger);
    border-color: var(--danger);
    transform: translateY(-1px);
}

.modal-loading {
    padding: var(--space-12) var(--space-6);
    text-align: center;
}
.modal-loading .loading-spinner { margin: 0 auto; }
.modal-loading .loading-label {
    margin-top: var(--space-4);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* ---- Profile page ----------------------------------------------------- */
.profile-card { max-width: 820px; }
.profile-title { margin-bottom: var(--space-6); }

.profile-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}
@media (min-width: 640px) {
    .profile-meta { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
[data-theme="dark"] .profile-meta {
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
}

/* ---- Company details modal (My Company → Company settings) ------------- */
/* Breathing room above the Logo, Website and Addresses sections — the stacked
   .form-group blocks otherwise sit flush against the box above them. */
.company-details-gap { margin-top: var(--space-4); }

/* Logo upload row: current logo (or an empty placeholder) beside the upload /
   remove buttons. */
.company-logo-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.company-logo-preview {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
    padding: var(--space-2);
}
.company-logo-empty {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
    padding: var(--space-2);
}
.company-logo-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* The upload control is a <label> wrapping a hidden file input, so it needs the
   button's inline-flex layout to line its icon + text up like a real button. */
.company-logo-upload {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

/* Address panels: one bordered card per address, stacked. */
.company-addresses-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.company-address-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
    padding: var(--space-3);
}
.company-address-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.company-address-panel__title {
    font-weight: 600;
    font-size: 0.9rem;
}

/* ---- Help & Guide ------------------------------------------------------ */
/* A documentation view, not a dashboard: a section strip, a contents rail, and
   a list of collapsible topics. Card bodies are HTML authored in the locale
   files, so every rule under .help-body targets a bare tag — there are no
   classes in the JSON to keep in sync with this stylesheet.

   Mobile-first throughout. The base rules are the phone layout; the contents
   rail and the two-column split only appear from 1024px, where there is room
   for a rail that does not steal from the measure. */

.help-page { container-type: inline-size; }

/* Masthead — title block over search on a phone, side by side from 768px. */
.help-masthead {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.help-masthead-text { min-width: 0; }
.help-search { width: 100%; }
@media (min-width: 768px) {
    .help-masthead {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-6);
        margin-bottom: var(--space-6);
    }
    .help-search { width: 18rem; flex: 0 0 auto; }
}

/* Section strip — chips on a phone, an underline strip from 640px.
   Its own component rather than a reuse of .subpage-tabs: that one is hidden
   below 768px (My Company's org chart is desktop-only), and the guide has to
   stay navigable on a phone, which is exactly where someone is most likely to
   be reading it.

   The base layout WRAPS rather than scrolling sideways. A one-line scrolling
   strip fits 360px, but it puts half the guide's navigation behind a
   horizontal swipe almost nobody attempts — the last two sections may as well
   not exist. Four chips over two rows cost about 50px of height and hide
   nothing. The icons and the uppercase treatment come back at 640px, where
   there is room for them on one line; at 360px they are what pushes the
   labels past the available width in the first place. */
.help-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.help-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition),
                background var(--transition);
}
.help-tab .material-icons { display: none; }
.help-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
}
.help-tab.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

@media (min-width: 640px) {
    .help-tabs {
        flex-wrap: nowrap;
        gap: var(--space-1);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--border-subtle);
    }
    .help-tabs::-webkit-scrollbar { display: none; }
    .help-tab {
        padding: 0 14px;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .help-tab .material-icons { display: inline; font-size: 18px; }
    /* Ordered after :hover deliberately — equal specificity, so the current
       section keeps its accent underline while the pointer is over it. */
    .help-tab.is-active {
        background: transparent;
        border-bottom-color: var(--accent);
        color: var(--accent);
    }
}

/* Search summary — "N results across all sections". */
.help-status {
    margin-bottom: var(--space-5);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.help-status[hidden] { display: none; }

/* Layout: one column on a phone, contents rail alongside from 1024px. */
.help-layout { display: block; }
.help-main { min-width: 0; }
@media (min-width: 1024px) {
    .help-layout {
        display: grid;
        grid-template-columns: 13.5rem minmax(0, 1fr);
        gap: var(--space-10);
        align-items: start;
    }
}

/* Contents rail. Hidden below 1024px rather than restyled: on a phone the
   collapsed topic headings ARE the contents, so a second list of the same
   titles would be pure duplication. */
.help-toc { display: none; }
@media (min-width: 1024px) {
    .help-toc {
        display: block;
        position: sticky;
        top: var(--space-5);
        max-height: calc(100vh - var(--space-12));
        overflow-y: auto;
        padding-right: var(--space-2);
    }
}
.help-toc-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.help-toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 1px solid var(--border-subtle);
}
.help-toc-link {
    display: block;
    padding: 7px 0 7px var(--space-3);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}
.help-toc-link:hover { color: var(--text-primary); }
/* Accent colour and the accent bar only — deliberately nothing that changes
   the text's metrics. Bolding the current entry made longer titles rewrap onto
   a second line the moment they became current ("Filtrarea și căutarea
   utilizatorilor" fits this rail at 400 but not at 600), so the rail twitched
   as you scrolled past it. The tab strip above already works this way: every
   tab carries the same weight and only colour marks the active one. */
.help-toc-link.is-current {
    color: var(--accent);
    border-left-color: var(--accent);
}
/* A search spans all four sections, so a rail listing only the active one
   would point at topics the filtered list no longer shows. It stands down
   until the query clears, and the layout closes up behind it. */
.help-page.is-searching .help-toc { display: none; }
@media (min-width: 1024px) {
    .help-page.is-searching .help-layout { display: block; }
}

/* Toolbar above the list: how many topics, and a bulk expand/collapse. */
.help-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    margin-bottom: var(--space-2);
}
.help-count {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.help-expand {
    min-height: 44px;
    padding: 0 var(--space-3);
    margin-right: calc(var(--space-3) * -1);
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition);
}
.help-expand:hover { color: var(--accent); }
.help-expand[hidden] { display: none; }

.help-pane[hidden], .help-card[hidden] { display: none; }

/* Topics read as a document, not a stack of boxes: the page is already a
   .card-modern, so bordered panels inside it would be a card in a card. A
   hairline between rows carries the separation instead. */
.help-card {
    border-top: 1px solid var(--border-subtle);
    /* Must match READING_OFFSET in modern_help.js — where a heading reached
       from the contents rail comes to rest. */
    scroll-margin-top: 80px;
}
.help-card:first-child { border-top: 0; }

.help-card-head { margin: 0; }
.help-card-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) 0;
    background: transparent;
    border: 0;
    text-align: start;
    cursor: pointer;
    color: var(--text-primary);
}
.help-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
    transition: color var(--transition);
}
.help-card-toggle:hover .help-card-title { color: var(--accent); }
.help-card-chevron {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--text-muted);
    transition: transform var(--transition);
}
.help-card-toggle[aria-expanded="true"] .help-card-chevron { transform: rotate(180deg); }

/* Which section a hit came from. Only shown while searching, where results
   from four sections are merged into one list and would otherwise be a pile
   of answers with no context. */
.help-card-eyebrow { display: none; }
.help-page.is-searching .help-card-eyebrow {
    display: block;
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
[data-theme="dark"] .help-page.is-searching .help-card-eyebrow {
    background: var(--bg-elevated);
}

/* Card bodies: the only place in the app where locale-authored HTML renders.
   Capped near 68 characters — the old 900px at this size ran past 110, which
   is roughly double a comfortable measure. */
.help-body {
    max-width: 68ch;
    padding: 0 0 var(--space-5) 0;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--text-secondary);
}
.help-body[hidden] { display: none; }
.help-body p { margin: 0 0 var(--space-3); }
.help-body p:last-child { margin-bottom: 0; }
.help-body ul,
.help-body ol { margin: 0 0 var(--space-3) var(--space-5); }
.help-body ul { list-style: disc; }
.help-body ol { list-style: decimal; }
.help-body li { margin-bottom: var(--space-2); }
.help-body li:last-child { margin-bottom: 0; }
.help-body ul:last-child,
.help-body ol:last-child { margin-bottom: 0; }
.help-body li::marker { color: var(--text-muted); }
.help-body strong { color: var(--text-primary); font-weight: 600; }
/* Asides, not emphasis — the guide uses <em> for "you may not have this
   right" notes, which read better muted than italic. */
.help-body em { color: var(--text-muted); font-style: normal; }
.help-body code {
    padding: 1px 5px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}
[data-theme="dark"] .help-body code { border-color: var(--border-medium); }

@media (min-width: 768px) {
    .help-card-title { font-size: 1.05rem; }
    .help-body { font-size: 0.95rem; }
}

/* ---- Reduced motion ---------------------------------------------------- */
/* Same guard the store page ships: collapse transitions/animations for users
   who ask for less motion (sidebar slide, org-canvas fly, hover lifts). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}