/* =========================================================================
   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 headers/cells gets 1/7 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) 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: 1344px;
    }

    /* 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;
}

/* ---- 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);
}

/* ---- 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;
    }
}