:root {
    --font-ui: Cambria, Georgia, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
    --bg: #f4f2f4;
    --ink: #2d2435;
    --muted: #6d6675;
    --accent: #4f2573;
    --accent-2: #de5ca7;
    --accent-3: #7b7682;
    --sidebar: #eeecf1;
    --card: #ffffff;
    --border: #d9cfdf;
    --card-soft: #fbf8ff;
    --table-head: #f7f2fb;
    --table-head-ink: #4b3c59;
    --input-bg: #ffffff;
    --input-border: #cbc1d4;
    --panel-shadow: 0 8px 24px rgba(69, 43, 93, 0.08);
    --nav-active-bg: rgba(79, 37, 115, 0.14);
    --sidebar-elevated: rgba(255, 255, 255, 0.72);
    --nav-rail: rgba(79, 37, 115, 0.22);
    --nav-section-bg: rgba(79, 37, 115, 0.06);
    /* Warning / caution actions (visible, not disabled-gray) */
    --action-warn: #b45309;
    --btn-secondary-bg: color-mix(in srgb, var(--accent) 11%, var(--card));
    --btn-secondary-border: color-mix(in srgb, var(--accent) 42%, var(--border));
    --btn-secondary-text: var(--accent);
    --btn-secondary-hover-bg: color-mix(in srgb, var(--accent) 20%, var(--card));
    /* Fluid layout: scales with viewport; no global zoom — 13″ gets tighter grids, 17″+ stays full size */
    --rcmms-sidebar-w: clamp(210px, 12vw + 6rem, 272px);
    --rcmms-sidebar-w-collapsed: clamp(64px, 4vw + 2.5rem, 84px);
    --rcmms-content-pad-x: clamp(12px, 1.2vw + 6px, 22px);
    --rcmms-content-pad-y: clamp(14px, 1.2vw + 6px, 22px);
    --rcmms-content-pad-top: clamp(8px, 0.6vw + 5px, 11px);
    --rcmms-panel-pad: clamp(14px, 1vw + 8px, 18px);
    --rcmms-grid-gap: clamp(8px, 0.6vw + 5px, 12px);
    --rcmms-card-pad: clamp(10px, 0.5vw + 7px, 12px);
    --rcmms-card-grid-min: clamp(8.25rem, 7vw + 3.5rem, 11rem);
}

/* Scoped so this beats `.sidebar a { display: flex }`, which was laying subtitle beside "RCMMS". */
.sidebar .sidebar-brand-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    margin: -2px -4px 6px;
    padding: 2px 4px 8px;
    border-radius: 10px;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.sidebar .sidebar-brand-link:hover {
    background: var(--nav-section-bg);
}

.sidebar .sidebar-brand-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: 2px;
}

html[data-theme="dark"],
body[data-theme="dark"] {
    --bg: #17151b;
    --ink: #ede7f3;
    --muted: #b8afc4;
    --accent: #b17ad9;
    --accent-2: #f08fc5;
    --accent-3: #6e6481;
    --sidebar: #201c28;
    --card: #25202f;
    --border: #3f3750;
    --card-soft: #2e273a;
    --table-head: #2a2436;
    --table-head-ink: #d8cbe7;
    --input-bg: #231e2d;
    --input-border: #4a405d;
    --panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    --nav-active-bg: rgba(177, 122, 217, 0.2);
    --sidebar-elevated: rgba(46, 39, 58, 0.92);
    --nav-rail: rgba(177, 122, 217, 0.35);
    --nav-section-bg: rgba(177, 122, 217, 0.09);
    --action-warn: #f59e0b;
    --btn-secondary-bg: color-mix(in srgb, var(--accent) 16%, var(--card));
    --btn-secondary-border: color-mix(in srgb, var(--accent) 48%, var(--border));
    --btn-secondary-text: color-mix(in srgb, var(--accent) 92%, #fff);
    --btn-secondary-hover-bg: color-mix(in srgb, var(--accent) 26%, var(--card));
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-optical-sizing: auto;
    background: var(--bg);
    color: var(--ink);
}

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--rcmms-sidebar-w) 1fr;
    transition: grid-template-columns 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100vh;
}

.shell > .content {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.sidebar {
    background: var(--sidebar);
    color: var(--ink);
    padding: 22px 16px;
    border-right: 1px solid var(--border);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 32px rgba(45, 36, 53, 0.06);
    transition: padding 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

html[data-theme="dark"] .sidebar {
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.35);
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.brand-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: block;
    filter: drop-shadow(0 0 1px rgba(45, 36, 53, 0.45)) drop-shadow(0 1px 2px rgba(45, 36, 53, 0.28));
}

.brand {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.sidebar-toggle {
    border: 1px solid var(--border);
    background: var(--sidebar-elevated);
    color: var(--ink);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 25;
    box-shadow: var(--panel-shadow);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sidebar-toggle:hover {
    border-color: var(--accent-2);
    transform: scale(1.04);
}

.sidebar-toggle svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-sub {
    margin-top: 6px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* Keep each block at full content height: shrinking <details> + overflow:hidden clipped rows and looked like overlap */
.sidebar nav > * {
    flex-shrink: 0;
}

.sidebar .nav-bottom {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Collapsible module sections (e.g. Planning, Payments) */
.nav-accordion.nav-section {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--nav-section-bg);
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.nav-accordion.nav-section:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    box-shadow: 0 2px 12px rgba(79, 37, 115, 0.07);
}

html[data-theme="dark"] .nav-accordion.nav-section:hover {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.nav-accordion .nav-section-trigger {
    list-style: none;
    cursor: pointer;
    padding: 11px 32px 11px 12px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-accordion .nav-section-trigger::-webkit-details-marker {
    display: none;
}

.nav-accordion .nav-section-trigger::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.62;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.nav-accordion[open] > .nav-section-trigger::after {
    margin-top: -2px;
    transform: rotate(45deg);
    opacity: 0.88;
}

/* Topbar sidebar toggle: SVG road icons */
.sidebar-toggle--topbar > svg {
    display: none;
}
.sidebar-toggle__road {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
}
.sidebar-toggle__icon {
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}
.sidebar-toggle__icon--closed {
    opacity: 0.95;
    transform: translateY(0) scale(1);
}
.sidebar-toggle__icon--open {
    opacity: 0;
    transform: translateY(1px) scale(0.86) rotate(-7deg);
}
.sidebar-toggle__icon path:nth-child(2) {
    stroke-width: 2.9;
    stroke-dasharray: 3.4 4.4;
    animation: sidebar-road-lane-flow 0.95s linear infinite;
}
.sidebar-toggle__icon path:nth-child(3) {
    animation: sidebar-road-hint-pulse 1.25s ease-in-out infinite;
}
.shell:not(.sidebar-collapsed) .sidebar-toggle__icon--closed {
    opacity: 0;
    transform: translateY(-1px) scale(0.86) rotate(7deg);
}
.shell:not(.sidebar-collapsed) .sidebar-toggle__icon--open {
    opacity: 0.95;
    transform: translateY(0) scale(1) rotate(0deg);
}

@keyframes sidebar-road-lane-flow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -5.4;
    }
}

@keyframes sidebar-road-hint-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

.nav-accordion .nav-section-trigger:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

.nav-accordion .nav-section-trigger.active {
    background: color-mix(in srgb, var(--nav-active-bg) 100%, transparent);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent-2);
}

/* Child links under a module */
.nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 10px 12px 12px;
    margin-left: 10px;
    border-left: 2px solid var(--nav-rail);
    animation: nav-submenu-reveal 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nav-submenu-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar a.nav-sub {
    margin-left: 0;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9px;
    background: transparent;
    color: color-mix(in srgb, var(--ink) 88%, var(--muted));
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar a.nav-sub .nav-icon {
    opacity: 0.88;
}

.sidebar a.nav-sub:hover {
    background: color-mix(in srgb, var(--card) 70%, var(--sidebar));
    color: var(--ink);
    transform: none;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 50%, transparent);
}

.sidebar a.nav-sub.active {
    background: var(--nav-active-bg);
    color: var(--accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent-2);
}

/* Top-level links grouped under a label (e.g. Administration) */
.nav-flat-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.nav-section-heading {
    margin: 0;
    padding: 2px 12px 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.3;
}

.nav-flat-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar a.nav-root-link {
    background: color-mix(in srgb, var(--card) 35%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    font-weight: 600;
    border-radius: 10px;
}

.sidebar a.nav-root-link:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    color: var(--accent);
    transform: none;
}

.sidebar a.nav-root-link.active {
    background: var(--nav-active-bg);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.sidebar a {
    color: var(--ink);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-icon {
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-label {
    white-space: nowrap;
}

.sidebar a:hover {
    background: color-mix(in srgb, var(--accent) 16%, var(--card));
    color: var(--accent);
    transform: none;
}

.sidebar a.active {
    background: var(--nav-active-bg);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent-2);
}

.shell.sidebar-collapsed {
    grid-template-columns: var(--rcmms-sidebar-w-collapsed) 1fr;
}

.shell.sidebar-collapsed .brand-sub,
.shell.sidebar-collapsed .nav-label,
.shell.sidebar-collapsed .nav-section-heading {
    display: none;
}

.shell.sidebar-collapsed .sidebar {
    padding-left: 12px;
    padding-right: 12px;
}

.shell.sidebar-collapsed .brand {
    display: none;
}

.shell.sidebar-collapsed .brand-mark {
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

.shell.sidebar-collapsed .sidebar-brand-link {
    align-items: center;
}

.shell.sidebar-collapsed .sidebar a {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

.shell.sidebar-collapsed .nav-flat-section {
    padding-top: 0;
}

.shell.sidebar-collapsed .nav-flat-links {
    gap: 6px;
}

.shell.sidebar-collapsed .nav-accordion.nav-section {
    border-radius: 10px;
    border-color: transparent;
    background: transparent;
}

.shell.sidebar-collapsed .nav-accordion.nav-section:hover {
    box-shadow: none;
}

.shell.sidebar-collapsed .nav-submenu {
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 0 0;
    margin-left: 0;
    border-left: none;
    gap: 6px;
    animation: none;
}

.shell.sidebar-collapsed .nav-accordion[open] > .nav-submenu {
    display: flex !important;
}

.shell.sidebar-collapsed .sidebar a.nav-sub {
    padding: 10px;
    justify-content: center;
    background: color-mix(in srgb, var(--card) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.shell.sidebar-collapsed .sidebar a.nav-root-link {
    justify-content: center;
    padding: 10px;
}

/* Icon rail: section headers stay clickable so each module really opens/closes */
.shell.sidebar-collapsed .nav-accordion .nav-section-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px 8px;
    border-radius: 10px;
}

.shell.sidebar-collapsed .nav-accordion .nav-section-trigger::after {
    position: static;
    width: 7px;
    height: 7px;
    margin-top: 0;
    margin-bottom: 0;
    border-right-width: 2px;
    border-bottom-width: 2px;
    opacity: 0.7;
}

.shell.sidebar-collapsed .nav-accordion[open] > .nav-section-trigger {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent-2) 55%, transparent);
}

.shell.sidebar-collapsed .nav-accordion[open] > .nav-section-trigger::after {
    margin-top: 0;
}

.shell.sidebar-collapsed .sidebar .sidebar-toggle svg {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .shell {
        transition: none;
    }

    .sidebar,
    .sidebar-toggle,
    .sidebar-toggle svg {
        transition: none;
    }
    .sidebar-toggle__icon {
        transition: none;
    }
    .sidebar-toggle__icon path:nth-child(2),
    .sidebar-toggle__icon path:nth-child(3) {
        animation: none;
    }

    .nav-submenu {
        animation: none;
    }

    .nav-accordion .nav-section-trigger::after {
        transition: none;
    }
}

.content {
    padding: var(--rcmms-content-pad-top) var(--rcmms-content-pad-x) var(--rcmms-content-pad-y);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.topbar-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.sidebar-toggle--topbar {
    flex: 0 0 auto;
}

.topbar.sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -3px -10px 14px -10px;
    padding: 5px 14px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 94%, var(--bg));
    box-shadow: var(--panel-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

html[data-theme="dark"] .topbar.sticky-header {
    background: color-mix(in srgb, var(--card) 92%, transparent);
}

.topbar-left h1 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

h1 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--rcmms-panel-pad);
    box-shadow: var(--panel-shadow);
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
}

/* Main column is a fixed-height flex stack; stretch the primary panel so short pages
   don't leave a tall strip of body background under the content. */
.content > section.panel {
    flex: 1 1 auto;
    min-height: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rcmms-card-grid-min)), 1fr));
    gap: var(--rcmms-grid-gap);
}

.dash-overview-cards-grid {
    margin-bottom: 22px;
    min-width: 0;
    max-width: 100%;
}

/* Match users page: .org-form-card surface + .users-page__panel left accent */
.card {
    border-radius: 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--card-soft) 82%, var(--card) 18%);
    padding: var(--rcmms-card-pad);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
}

.card h3 {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card .num {
    font-size: 1.5rem;
    font-weight: 700;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}

th,
td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
}

th {
    background: var(--table-head);
    color: var(--table-head-ink);
}

.small:not(.btn) {
    font-size: 0.8rem;
    color: var(--muted);
}

.profile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* FY + theme + profile: one horizontal toolbar row, vertically centered */
.topbar-tools {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible;
}

/* Header notifications + messages */
.topbar-inbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.topbar-pop {
    position: relative;
}

.topbar-pop > summary {
    list-style: none;
}

.topbar-pop > summary::-webkit-details-marker {
    display: none;
}

.topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.topbar-icon-btn:hover {
    background: var(--card-soft);
    box-shadow: var(--panel-shadow);
}

.topbar-icon-btn svg {
    position: relative;
    z-index: 0;
    opacity: 0.92;
}

.topbar-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    box-shadow: 0 0 0 1px var(--card);
}

.topbar-icon-badge--inline {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}

.topbar-pop__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(380px, calc(100vw - 24px));
    max-height: min(420px, 70vh);
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--panel-shadow);
    z-index: 80;
    display: flex;
    flex-direction: column;
}

.topbar-pop__panel--wide {
    width: min(420px, calc(100vw - 24px));
}

.topbar-pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.topbar-msg-full-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.topbar-msg-full-link:hover {
    text-decoration: underline;
}

.topbar-pop__hint {
    margin: 8px 12px 0;
    color: var(--muted);
}

.topbar-pop__hint code {
    font-size: 0.85em;
}

.topbar-pop__scroll {
    overflow-y: auto;
    padding: 8px;
    flex: 1;
    min-height: 120px;
}

.topbar-pop__empty {
    padding: 12px;
    margin: 0;
    text-align: center;
    color: var(--muted);
}

.rcmms-notif-item {
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--card-soft);
}

.rcmms-notif-item--unread {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.rcmms-notif-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.rcmms-notif-item__time {
    flex-shrink: 0;
    white-space: nowrap;
}
.rcmms-notif-item__title {
    font-weight: 600;
    font-size: 0.92rem;
}

.rcmms-sev-critical {
    color: #b71c1c;
}

.rcmms-sev-warning {
    color: #e65100;
}

.rcmms-sev-info {
    color: var(--accent);
}

.rcmms-notif-item__body {
    margin-top: 4px;
    color: var(--muted);
}

.rcmms-notif-item__act {
    margin-top: 8px;
}

.rcmms-notif-item__act a {
    font-weight: 600;
}

.topbar-pop__foot {
    margin: 0;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
    flex-shrink: 0;
}

.rcmms-msg-preview-item {
    display: block;
    width: 100%;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    margin-bottom: 8px;
    text-decoration: none;
    text-align: left;
    color: inherit;
    background: var(--card-soft);
    cursor: pointer;
    font: inherit;
}

.rcmms-msg-preview-item:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.rcmms-msg-preview-item--unread {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.rcmms-msg-preview-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.rcmms-msg-preview-item__name {
    font-weight: 600;
    font-size: 0.92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcmms-msg-preview-item__snippet {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcmms-msg-preview-item__from {
    font-weight: 600;
    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
}

.rcmms-msg-toolbar {
    padding: 8px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.topbar-msg-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
}

.rcmms-msg-layout {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 0;
    min-height: 240px;
    border-top: 1px solid var(--border);
}

.rcmms-msg-sidebar {
    border-right: 1px solid var(--border);
    padding: 8px;
    overflow-y: auto;
    max-height: 320px;
}

.rcmms-msg-sidebar-title {
    margin-bottom: 6px;
}

.rcmms-conv-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--card-soft);
    color: var(--ink);
    cursor: pointer;
}

.rcmms-conv-btn:hover {
    border-color: var(--border);
}

.rcmms-conv-btn__name {
    font-weight: 600;
    flex: 1 1 auto;
}

.rcmms-conv-btn__preview {
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcmms-conv-btn__from {
    font-weight: 600;
    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
}

.rcmms-msg-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rcmms-msg-thread {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    max-height: 260px;
    background: color-mix(in srgb, var(--card-soft) 65%, var(--card));
}

.rcmms-msg-bubble {
    position: relative;
    max-width: 92%;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
}

.rcmms-msg-bubble--replyable:hover {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.rcmms-msg-bubble__actions {
    position: absolute;
    top: 4px;
    right: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1;
}

.rcmms-msg-bubble--mine .rcmms-msg-bubble__actions {
    right: auto;
    left: 6px;
}

.rcmms-msg-bubble:hover .rcmms-msg-bubble__actions,
.rcmms-msg-bubble:focus-within .rcmms-msg-bubble__actions {
    opacity: 1;
    pointer-events: auto;
}

.rcmms-msg-bubble__reply-btn {
    border: none;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--accent);
    background: color-mix(in srgb, var(--card) 92%, var(--accent));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 12%, transparent);
}

.rcmms-msg-bubble__reply-btn:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.rcmms-msg-bubble--reply-flash {
    animation: rcmms-reply-flash 0.45s ease;
}

@keyframes rcmms-reply-flash {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    }
    100% {
        box-shadow: 0 0 0 8px transparent;
    }
}

.rcmms-msg-quote {
    margin: 0 0 6px;
    padding: 5px 8px 5px 10px;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--ink) 6%, var(--card-soft));
    font-size: 0.78rem;
    color: var(--muted);
}

.rcmms-msg-bubble--mine .rcmms-msg-quote {
    background: color-mix(in srgb, var(--accent) 16%, var(--card));
    border-left-color: color-mix(in srgb, var(--accent) 88%, #1a6fb8);
}

.rcmms-msg-quote__author {
    display: block;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--accent);
    margin-bottom: 2px;
}

.rcmms-msg-quote__body {
    line-height: 1.35;
    word-break: break-word;
}

.rcmms-msg-bubble__text {
    line-height: 1.4;
    word-break: break-word;
}

.rcmms-compose-box:not(.rcmms-compose-box--replying) .rcmms-compose-input-row {
    display: contents;
}

.rcmms-compose-box--replying.rcmms-msg-form,
.rcmms-compose-box--replying.rcmms-chat-compose {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 8px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    overflow: hidden;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent);
}

.rcmms-compose-box--replying .rcmms-compose-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 8px 10px 10px;
    border-top: none;
}

.rcmms-compose-box--replying.rcmms-msg-form textarea,
.rcmms-compose-box--replying.rcmms-chat-compose textarea {
    border: none;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 4%, var(--card-soft));
    min-height: 40px;
}

.rcmms-reply-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 8px 10px 8px 0;
    margin: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--ink) 7%, var(--card-soft));
    border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, var(--ink));
}

.rcmms-reply-bar[hidden] {
    display: none !important;
}

.rcmms-reply-bar__accent {
    flex-shrink: 0;
    width: 4px;
    margin-right: 10px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}

.rcmms-reply-bar__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 8px;
}

.rcmms-reply-bar__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}

.rcmms-reply-bar__snippet {
    font-size: 0.8rem;
    color: var(--muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    word-break: break-word;
}

.rcmms-reply-bar__cancel {
    flex-shrink: 0;
    align-self: flex-start;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.rcmms-reply-bar__cancel:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 8%, var(--card));
}

.rcmms-msg-bubble--mine {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.rcmms-msg-bubble__meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--muted);
}

.rcmms-msg-ticks {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

.rcmms-msg-tick {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.rcmms-msg-tick--2 {
    margin-left: -0.38em;
}

.rcmms-msg-ticks--sent,
.rcmms-msg-ticks--delivered {
    color: color-mix(in srgb, var(--muted) 88%, var(--ink));
}

.rcmms-msg-ticks--read {
    color: var(--accent);
}

.rcmms-msg-status {
    font-size: 0.75rem;
    letter-spacing: -0.05em;
    opacity: 0.65;
}

.rcmms-msg-status--pending {
    opacity: 0.5;
    font-size: 0.7rem;
}

.rcmms-msg-status--failed {
    color: #c0392b;
    opacity: 1;
    font-weight: 700;
}

.rcmms-msg-bubble__time {
    margin-right: auto;
}

.rcmms-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 2px;
    min-height: 1.35rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
}

.rcmms-typing[hidden] {
    display: none !important;
}

.rcmms-typing__dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rcmms-typing__dots span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0.35;
    animation: rcmms-typing-bounce 1.2s ease-in-out infinite;
}

.rcmms-typing__dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.rcmms-typing__dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes rcmms-typing-bounce {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.rcmms-msg-form {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--border);
    align-items: flex-end;
}

.rcmms-msg-form textarea {
    flex: 1;
    min-height: 44px;
    resize: vertical;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
}

@media (max-width: 720px) {
    .rcmms-msg-layout {
        grid-template-columns: 1fr;
    }
    .rcmms-msg-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 160px;
    }
}

/* Full-page Messages (messages.php) */
.messages-page {
    max-width: 1100px;
}

.messages-page__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.messages-page__tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-soft);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.messages-page__tab:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    color: var(--accent);
}

.messages-page__tab--active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--card-soft));
    color: var(--accent);
}

.messages-page__panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--card);
    box-shadow: var(--panel-shadow);
}

.messages-page__lede {
    margin: 0 0 14px;
}

.messages-page__inbox-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.messages-page__inbox-head .messages-page__lede {
    margin: 0;
    flex: 1 1 220px;
}

.topbar-pop__head--messages {
    flex-wrap: wrap;
    gap: 8px;
}

.topbar-pop__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Bottom-right chat overlay */
.rcmms-chat-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.rcmms-chat-dock .rcmms-chat-fab-wrap,
.rcmms-chat-dock .rcmms-chat-panel,
.rcmms-chat-dock .rcmms-chat-panel * {
    pointer-events: auto;
}

.rcmms-chat-dock--dismissed,
.rcmms-chat-dock[hidden] {
    display: none !important;
}

.rcmms-chat-panel[hidden],
.rcmms-chat-dock:not(.rcmms-chat-dock--open) .rcmms-chat-panel {
    display: none !important;
}

.rcmms-chat-dock--open .rcmms-chat-fab-wrap {
    display: none;
}

.rcmms-chat-fab-wrap {
    position: relative;
    display: inline-flex;
}

.rcmms-chat-fab__dismiss {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--card);
    background: color-mix(in srgb, var(--ink) 88%, #000);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px color-mix(in srgb, #000 20%, transparent);
    transition: transform 0.12s ease, background 0.12s ease;
}

.rcmms-chat-fab__dismiss:hover {
    transform: scale(1.08);
    background: #c0392b;
}

.rcmms-chat-fab__dismiss:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rcmms-chat-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 35%, transparent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rcmms-chat-fab:hover {
    transform: scale(1.04);
}

.rcmms-chat-fab[aria-expanded="true"] {
    background: color-mix(in srgb, var(--accent) 88%, #000);
}

.rcmms-chat-fab__badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.rcmms-chat-panel {
    position: relative;
    width: min(380px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 100px));
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 12px 40px color-mix(in srgb, #000 18%, transparent);
    overflow: visible;
}

.rcmms-chat-panel__body,
.rcmms-chat-panel__head {
    overflow: hidden;
}

.rcmms-chat-panel__head {
    border-radius: 16px 16px 0 0;
}

.rcmms-chat-panel__close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 5;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--card);
    background: color-mix(in srgb, var(--ink) 88%, #000);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px color-mix(in srgb, #000 22%, transparent);
    transition: transform 0.12s ease, background 0.12s ease;
    pointer-events: auto;
}

.rcmms-chat-panel__close:hover {
    transform: scale(1.06);
    background: #c0392b;
}

.rcmms-chat-panel__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rcmms-chat-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px 10px 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-soft) 70%, var(--card));
}

.rcmms-chat-panel__title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.rcmms-chat-panel__title {
    font-weight: 700;
    font-size: 0.92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcmms-presence-wrap {
    min-width: 0;
    overflow: hidden;
}

.rcmms-presence-wrap[hidden] {
    display: none !important;
}

.rcmms-presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--muted);
    max-width: 100%;
}

.rcmms-presence__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.rcmms-presence--online .rcmms-presence__dot {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: rcmms-presence-breathe 2s ease-in-out infinite;
}

.rcmms-presence--away .rcmms-presence__dot {
    background: #ef4444;
    box-shadow: none;
    animation: none;
}

.rcmms-presence__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes rcmms-presence-breathe {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcmms-presence--online .rcmms-presence__dot {
        animation: none;
    }
}

.rcmms-msg-presence-bar {
    padding: 6px 12px 0;
    border-bottom: 1px solid transparent;
}

.rcmms-msg-presence-bar:not([hidden]) {
    border-bottom-color: var(--border);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.rcmms-chat-panel__actions {
    display: flex;
    gap: 4px;
}

.rcmms-chat-panel__back,
.rcmms-chat-panel__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rcmms-chat-panel__back:hover,
.rcmms-chat-panel__icon:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.rcmms-chat-panel__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rcmms-chat-hub-actions {
    padding: 10px 12px 0;
}

.rcmms-chat-conv-scroll {
    overflow-y: auto;
    max-height: 340px;
    padding: 8px 10px 12px;
}

.rcmms-chat-conv-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--card-soft);
    color: var(--ink);
    cursor: pointer;
}

.rcmms-chat-conv-item:hover {
    border-color: var(--border);
}

.rcmms-chat-conv-item__name {
    font-weight: 600;
    width: 100%;
}

.rcmms-chat-conv-item__prev {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.rcmms-chat-empty,
.rcmms-chat-loading {
    padding: 12px 14px;
    margin: 0;
}

.rcmms-chat-new-form {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rcmms-chat-new-form textarea {
    min-height: 100px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    resize: vertical;
}

.rcmms-chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    min-height: 200px;
    max-height: 320px;
    background: color-mix(in srgb, var(--card-soft) 65%, var(--card));
}

.rcmms-chat-compose {
    display: flex;
    gap: 8px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--border);
    align-items: flex-end;
}

.rcmms-chat-compose textarea {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    resize: none;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
}

.rcmms-chat-compose .btn {
    flex-shrink: 0;
}

.rcmms-compose-box--extras.rcmms-chat-compose,
.rcmms-compose-box--extras.rcmms-msg-form {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.rcmms-compose-box--extras .rcmms-compose-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    min-width: 0;
}

.rcmms-compose-box--extras .rcmms-compose-input-row textarea {
    flex: 1;
    min-width: 0;
}

.rcmms-compose-box--extras .rcmms-compose-input-row .rcmms-compose-toolbar__main {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    position: relative;
}

.rcmms-compose-box--extras .rcmms-compose-input-row .btn {
    flex-shrink: 0;
    align-self: flex-end;
}

.rcmms-compose-box--extras .rcmms-compose-input-row .rcmms-compose-attach-menu {
    left: auto;
    right: 0;
}

.rcmms-compose-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 2px;
}

.rcmms-compose-toolbar__main {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.rcmms-compose-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-soft);
    color: var(--ink);
    cursor: pointer;
    padding: 0;
}

.rcmms-compose-tool:hover,
.rcmms-compose-tool--active {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    color: var(--accent);
}

.rcmms-compose-attach-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 20;
    min-width: 220px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--panel-shadow);
    flex-direction: column;
    gap: 2px;
}

.rcmms-compose-attach-menu[hidden] {
    display: none !important;
}

.rcmms-compose-attach-menu:not([hidden]) {
    display: flex;
}

.rcmms-compose-attach-menu button {
    text-align: left;
    border: none;
    background: transparent;
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
}

.rcmms-compose-attach-menu button:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--card-soft));
}

.rcmms-compose-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rcmms-compose-pending__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, var(--card-soft));
    border: 1px solid var(--border);
    font-size: 0.8rem;
}

.rcmms-compose-pending__chip button {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.rcmms-compose-voice[hidden],
.rcmms-compose-voice-prompt[hidden],
.rcmms-compose-voice-rec[hidden] {
    display: none !important;
}

.rcmms-compose-voice:not([hidden]) {
    display: block;
    padding: 4px 2px 0;
}

.rcmms-compose-voice-prompt:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.88rem;
}

.rcmms-compose-voice-prompt__text {
    margin: 0;
    flex: 1 1 200px;
    line-height: 1.4;
    color: var(--ink);
}

.rcmms-compose-voice-rec:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.88rem;
}

.rcmms-compose-voice-rec__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e53935;
    animation: rcmms-voice-pulse 1s ease-in-out infinite;
}

@keyframes rcmms-voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.rcmms-msg-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.rcmms-msg-attach--image img {
    max-width: min(280px, 100%);
    border-radius: 10px;
    display: block;
}

.rcmms-msg-attach--file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-soft) 80%, var(--card));
    text-decoration: none;
    color: var(--ink);
}

.rcmms-msg-attach--voice audio {
    width: min(260px, 100%);
    height: 32px;
}

.rcmms-msg-bubble--call {
    max-width: min(320px, 92%);
}

.rcmms-msg-bubble--call .rcmms-msg-bubble__body {
    padding: 0;
}

.rcmms-msg-call__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 6%, var(--card));
    min-width: min(240px, 100%);
}

.rcmms-msg-bubble--mine .rcmms-msg-call__card {
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.rcmms-msg-call__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}

.rcmms-msg-call--missed .rcmms-msg-call__icon {
    color: #e53935;
}

.rcmms-msg-call--received .rcmms-msg-call__icon {
    color: #667781;
}

.rcmms-msg-call__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rcmms-msg-call__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}

.rcmms-msg-call__sub {
    line-height: 1.3;
}

.rcmms-call-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #000 45%, transparent);
    padding: 20px;
}

.rcmms-call-overlay[hidden] {
    display: none !important;
}

.rcmms-call-card {
    width: min(360px, 100%);
    padding: 24px 22px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--panel-shadow);
    text-align: center;
}

.rcmms-call-card__avatar {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 12%, var(--card-soft));
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.rcmms-call-card__status {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.9rem;
}

.rcmms-call-card__title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.rcmms-call-overlay--incoming .rcmms-call-card__title {
    font-size: 1.35rem;
    margin-bottom: 14px;
}

.rcmms-call-overlay--outgoing .rcmms-call-card__status {
    font-weight: 600;
}

.rcmms-call-overlay--active .rcmms-call-card__status[hidden] + .rcmms-call-card__title {
    margin-bottom: 4px;
}

.rcmms-call-overlay--ringing .rcmms-call-card__avatar {
    animation: rcmms-call-ring-pulse 1.1s ease-in-out infinite;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
}

@keyframes rcmms-call-ring-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

.rcmms-call-card__timer {
    margin: 0 0 14px;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.rcmms-call-overlay--active .rcmms-call-card__timer {
    margin-bottom: 18px;
}

.rcmms-call-card__timer[hidden],
.rcmms-call-card__actions[hidden],
.rcmms-call-card__in-call[hidden] {
    display: none !important;
}

.rcmms-call-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.rcmms-call-overlay--active .rcmms-call-card__status {
    color: color-mix(in srgb, #2e7d32 70%, var(--muted));
}

.rcmms-call-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.rcmms-call-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card-soft);
    color: var(--ink);
    cursor: pointer;
    padding: 0;
}

.rcmms-call-ctrl:hover,
.rcmms-call-ctrl--active {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--card-soft));
}

.rcmms-call-more-wrap {
    position: relative;
}

.rcmms-call-more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    min-width: 180px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 8px 24px color-mix(in srgb, #000 16%, transparent);
    text-align: left;
}

.rcmms-call-more-menu[hidden] {
    display: none !important;
}

.rcmms-call-more-menu__label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--muted);
}

.rcmms-call-volume__slider {
    flex: 1;
    min-width: 80px;
    accent-color: var(--accent);
}

.rcmms-call-end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 220px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.rcmms-call-end:hover {
    background: #b71c1c;
}

.rcmms-call-cancel {
    min-width: 140px;
}

@media (max-width: 480px) {
    .rcmms-chat-dock {
        right: 12px;
        bottom: 12px;
    }
    .rcmms-chat-panel {
        width: calc(100vw - 24px);
    }
}

.messages-page__toolbar {
    padding: 0 0 8px;
}

.messages-page__layout {
    min-height: 320px;
}

.messages-page__thread {
    max-height: min(520px, 55vh);
}

.messages-page__field {
    margin-bottom: 14px;
}

.messages-page__field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--muted);
}

.messages-page__field textarea {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    resize: vertical;
}

.messages-page__compose-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.messages-page__table-wrap {
    overflow-x: auto;
    margin-top: 8px;
}

.messages-page__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.messages-page__table th,
.messages-page__table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.messages-page__table th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.messages-page__td-muted {
    color: var(--muted);
    white-space: nowrap;
}

.messages-page__draft-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.messages-page__draft-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--card-soft);
}

.messages-page__draft-meta {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 6px;
}

.messages-page__draft-preview {
    margin: 0 0 10px;
}

.messages-page__draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.messages-page__panel--more .messages-page__more-list {
    margin: 8px 0 0;
    padding-left: 1.2em;
}

.messages-page__panel--more a {
    font-weight: 600;
}

/* Financial year: modern chip-style selector; full label width from JS (do not cap with max-width — it caused "2024/20…") */
.topbar-fy-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
    position: relative;
    width: max-content;
    max-width: none;
    overflow: visible;
}

.topbar-fy-form::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

.topbar-fy-select {
    margin: 0;
    width: auto;
    min-width: 5.5rem;
    max-width: none;
    padding: 8px 34px 8px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 12px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #fff 8%) 0%, var(--card) 100%);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
    min-height: 38px;
    box-shadow: 0 1px 2px rgba(36, 18, 54, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    /* Hide native dropdown chevron — list still opens on click */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: clip;
    overflow: visible;
    background-image: none;
}

.topbar-fy-select::-ms-expand {
    display: none;
}

.topbar-fy-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.topbar-fy-select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: 0 3px 14px rgba(66, 25, 99, 0.12);
}

.topbar-fy-select:active:not(:disabled) {
    transform: translateY(1px);
}

.topbar-fy-select:focus,
.topbar-fy-select:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 62%, #8f70ba);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
        0 4px 14px rgba(66, 25, 99, 0.14);
}

html[data-theme="dark"] .topbar-fy-form::after {
    border-right-color: color-mix(in srgb, #fff 75%, transparent);
    border-bottom-color: color-mix(in srgb, #fff 75%, transparent);
}

html[data-theme="dark"] .topbar-fy-select {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 85%, #fff 3%) 0%, var(--card) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .topbar-fy-select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.36);
}

.user-menu {
    position: relative;
    flex-shrink: 0;
}

.user-menu summary {
    list-style: none;
}

.user-menu summary::-webkit-details-marker {
    display: none;
}

.user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: min(200px, 46vw);
    max-width: min(300px, 58vw);
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 12px 4px 6px;
    background: var(--card);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(45, 36, 53, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.user-menu[open] .user-trigger,
.user-trigger:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 2px 10px rgba(79, 37, 115, 0.08);
}

html[data-theme="dark"] .user-trigger {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-soft);
    border: 1px solid var(--border);
    color: var(--muted);
    flex-shrink: 0;
}

.user-avatar svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}

.user-brief {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.user-brief strong {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
}

.user-brief__sub {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-brief__agency,
.user-brief__office,
.user-brief__handle {
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-meta__org-detail {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.user-brief__sep {
    margin: 0 0.28em;
    opacity: 0.55;
}

.user-caret {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.user-menu[open] .user-caret {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 280px;
    max-width: 340px;
    width: max(260px, 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--panel-shadow);
    padding: 10px;
    z-index: 20;
}

.user-office-scope {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.user-office-scope__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.user-office-scope__clear-form {
    margin: 0;
    flex-shrink: 0;
}

.user-office-scope__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0;
}

.user-office-scope__active,
.user-office-scope__hint {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
    margin-bottom: 8px;
}

.user-office-scope__active strong {
    color: var(--ink);
}

.user-office-scope__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.user-office-scope__field label {
    font-size: 0.72rem;
    color: var(--muted);
}

.user-office-scope__field select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--ink);
    font-size: 0.82rem;
}

.user-office-scope__details {
    margin-top: 4px;
}

.user-office-scope__details summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--accent);
    font-weight: 600;
    padding: 4px 0;
    user-select: none;
}

.user-office-scope__details summary::-webkit-details-marker {
    display: none;
}

.user-office-scope__details summary::after {
    content: '';
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    margin-left: 0.35em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    vertical-align: 0.15em;
}

.user-office-scope__details[open] summary::after {
    transform: rotate(-135deg);
    vertical-align: -0.05em;
}

.user-office-scope__panel {
    padding-top: 8px;
}

.user-office-scope__form {
    margin-top: 8px;
}

.user-office-scope__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.user-office-scope__btn {
    width: 100%;
    justify-content: center;
    padding: 7px 10px;
    font-size: 0.82rem;
}

.user-office-scope__btn--half {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    min-width: 0;
}

.user-office-scope__actions--flat {
    flex-direction: column;
}

.user-office-scope__btn--full {
    flex: 1 1 100%;
    width: 100%;
}

.user-office-scope__btn--inline {
    width: auto;
    padding: 5px 12px;
    font-size: 0.78rem;
}

.user-office-scope__btn--clear {
    margin-top: 0;
}

/* Data scope Clear: outline so it reads as active, not a disabled “secondary” chip */
.user-office-scope .user-office-scope__btn--clear.btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: none;
}

.user-office-scope .user-office-scope__btn--clear.btn:hover {
    background: var(--card-soft);
}

.user-dropdown-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.user-dropdown-profile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.user-dropdown-profile__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--card-soft);
    border: 1px solid var(--border);
    color: var(--muted);
    overflow: hidden;
}

.user-dropdown-profile__avatar svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.user-dropdown-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-dropdown-profile__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-meta__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.user-meta__name {
    font-size: 0.95rem;
    line-height: 1.25;
    min-width: 0;
}

.user-meta__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.user-meta__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.user-meta__chip--app {
    flex-shrink: 0;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}

.user-meta__chip--user {
    color: var(--muted);
    background: var(--card-soft);
    border: 1px solid var(--border);
}

.user-meta__org {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

.user-meta__email {
    font-size: 0.76rem;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.35;
    word-break: break-all;
}

.user-meta__email:hover {
    color: var(--accent);
    text-decoration: underline;
}

.user-dropdown-actions {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.user-dropdown-actions a {
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--card-soft);
    font-size: 0.88rem;
}

.user-dropdown-actions a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.user-dropdown-actions a.danger:hover {
    border-color: #b91c1c;
    color: #b91c1c;
}

.profile-photo-preview {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    overflow: hidden;
    flex-shrink: 0;
}

.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-photo-preview svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-theme-switch {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    padding: 3px;
    box-shadow: var(--panel-shadow);
}

.auth-theme-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-theme-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-theme-btn.active {
    background: var(--accent);
    color: #fff;
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-soft);
    box-shadow: 0 1px 2px rgba(45, 36, 53, 0.06);
    min-height: 38px;
    box-sizing: border-box;
}

html[data-theme="dark"] .theme-switch {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.theme-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}

.theme-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-btn.active {
    background: var(--accent);
    color: #fff;
}

.theme-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.theme-btn.active:hover {
    background: var(--accent);
}

html[data-theme="dark"] .theme-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .theme-btn.active:hover {
    background: var(--accent);
}

.btn {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.25;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: color-mix(in srgb, var(--accent) 88%, #1a1024);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn.secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
    box-shadow: none;
}

.btn.secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--btn-secondary-hover-bg);
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    color: var(--btn-secondary-text);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.btn.secondary:focus-visible {
    outline-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.btn.secondary:disabled,
.btn.secondary[aria-disabled="true"] {
    background: color-mix(in srgb, var(--muted) 12%, var(--card));
    color: var(--muted);
    border-color: var(--border);
}

/* Alias used on manage contract / import dialogs */
.btn--ghost {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
    box-shadow: none;
}

.btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--btn-secondary-hover-bg);
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
    color: var(--btn-secondary-text);
}

.btn.warn {
    background: #b34384;
    border-color: color-mix(in srgb, #b34384 75%, transparent);
}

.btn.warn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: color-mix(in srgb, #b34384 88%, #3d1228);
}

.btn.small {
    font-size: 0.8rem;
    padding: 5px 10px;
}

/* Table / toolbar icon actions (fund sources, plans, allocations, etc.) */
.action-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 8px;
    background: var(--card);
    color: var(--accent);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.action-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    color: color-mix(in srgb, var(--accent) 90%, #1a1024);
}

.action-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 2px;
}

.action-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-btn.warn {
    color: var(--action-warn);
    border-color: color-mix(in srgb, var(--action-warn) 40%, var(--border));
    background: color-mix(in srgb, var(--action-warn) 10%, var(--card));
}

.action-btn.warn:hover {
    color: color-mix(in srgb, var(--action-warn) 88%, #1a1024);
    border-color: color-mix(in srgb, var(--action-warn) 58%, var(--border));
    background: color-mix(in srgb, var(--action-warn) 16%, var(--card));
}

.action-btn.danger {
    color: #e11d48;
    border-color: color-mix(in srgb, #e11d48 38%, var(--border));
    background: color-mix(in srgb, #e11d48 8%, var(--card));
}

.action-btn.danger:hover {
    color: #be123c;
    border-color: color-mix(in srgb, #e11d48 55%, var(--border));
    background: color-mix(in srgb, #e11d48 14%, var(--card));
}

.action-btn.ok {
    color: #059669;
    border-color: color-mix(in srgb, #059669 38%, var(--border));
    background: color-mix(in srgb, #059669 8%, var(--card));
}

.action-btn.ok:hover {
    color: #047857;
    border-color: color-mix(in srgb, #059669 55%, var(--border));
    background: color-mix(in srgb, #059669 14%, var(--card));
}

a.action-btn {
    text-decoration: none;
}

/* Icon toolbars (same patterns as register_manage_ui / roads register) */
.btn--icon {
    font-size: 0;
    padding: 8px;
    min-width: 2.25rem;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 8px;
}

.btn--icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

a.btn--icon {
    text-decoration: none;
}

.approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.approval-actions form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin: 0;
}

.btn.icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.btn.icon-only svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.form-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (max-width: 1024px) {
    .form-row--3 {
        grid-template-columns: 1fr;
    }

    .form-row--2 {
        grid-template-columns: 1fr;
    }
}

/* Road register + other Assets pages: comfortable main column width */
.content.content--register-wide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: clamp(12px, 2.2vw, 32px);
    padding-right: clamp(12px, 2.2vw, 32px);
}

.content.content--register-wide > .panel {
    min-width: 0;
    max-width: 100%;
}

.content--register-wide .register-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.content--register-wide .register-toolbar .btn {
    text-align: center;
}

.content--register-wide .register-bulk-scroll {
    width: 100%;
    max-width: 100%;
}

.content--register-wide .register-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 10px;
}

.content--register-wide .register-table-wrap .register-table {
    margin-top: 0;
}

.content--register-wide .panel,
.content--assets-wide .panel {
    padding-left: clamp(14px, 2vw, 26px);
    padding-right: clamp(14px, 2vw, 26px);
}

/* Road register: export + import grouped; grid actions primary on the right */
.content--register-wide .register-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 28px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.content--register-wide .register-action-bar__cluster {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: min(100%, 260px);
}

.content--register-wide .register-action-bar__cluster--fill {
    flex: 1 1 320px;
    min-width: min(100%, 280px);
}

.content--register-wide .register-action-bar__label {
    display: block;
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.content--register-wide .register-action-bar__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.content--register-wide .register-file-import {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    width: 100%;
}

.content--register-wide .register-file-import .register-file-import__field {
    flex: 0 1 auto;
    width: min(100%, 280px);
    max-width: 320px;
}

.content--register-wide .register-file-import input[type="file"] {
    width: 100%;
    max-width: 100%;
    font-size: 0.82rem;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
}

.content--register-wide .register-file-import label {
    display: block;
    font-size: 0.86rem;
    margin-bottom: 4px;
    color: var(--ink);
}

.content--register-wide .register-grid-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    justify-content: space-between;
}

.content--register-wide .register-grid-actions__start {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.content--register-wide .register-grid-actions__end {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-inline-start: auto;
}

.content--register-wide .register-bulk-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--card-soft, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--border);
    border-radius: 10px;
}

.content--register-wide .register-bulk-pager__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.content--register-wide .register-bulk-pager__save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}

.content--register-wide .register-bulk-dup-hint {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.content--register-wide .register-bulk-road-code-cell.is-dup-draft .register-bulk-road-code-input,
.content--register-wide .register-bulk-road-code-cell.is-dup-draft {
    outline: 2px solid #d97706;
    outline-offset: 0;
    border-radius: 6px;
}

.content--register-wide .register-bulk-road-code-cell.is-dup-db .register-bulk-road-code-input,
.content--register-wide .register-bulk-road-code-cell.is-dup-db {
    outline: 2px solid #dc2626;
    outline-offset: 0;
    border-radius: 6px;
}

html[data-theme="dark"] .content--register-wide .register-bulk-road-code-cell.is-dup-draft .register-bulk-road-code-input,
html[data-theme="dark"] .content--register-wide .register-bulk-road-code-cell.is-dup-draft {
    outline-color: #fbbf24;
}

html[data-theme="dark"] .content--register-wide .register-bulk-road-code-cell.is-dup-db .register-bulk-road-code-input,
html[data-theme="dark"] .content--register-wide .register-bulk-road-code-cell.is-dup-db {
    outline-color: #f87171;
}

.content--register-wide .register-bulk-road-code-cell.is-dup-draft.is-dup-db .register-bulk-road-code-input,
.content--register-wide .register-bulk-road-code-cell.is-dup-draft.is-dup-db {
    outline: 2px solid #dc2626;
    box-shadow: inset 0 0 0 1px #d97706;
}

@media (max-width: 560px) {
    .content--register-wide .register-toolbar .btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    .content--register-wide .register-bulk-pager {
        flex-direction: column;
        align-items: stretch;
    }

    .content--register-wide .register-bulk-pager__save {
        margin-inline-start: 0;
        flex-wrap: wrap;
    }

    .content--register-wide .register-grid-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .content--register-wide .register-grid-actions__start,
    .content--register-wide .register-grid-actions__end {
        justify-content: flex-start;
        margin-inline-start: 0;
    }

    .content--register-wide .register-grid-actions .btn {
        width: 100%;
        text-align: center;
    }
}

.content--register-wide .register-bulk-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.content--register-wide .register-bulk-table {
    width: max(100%, 2000px);
    min-width: 2000px;
    font-size: 0.88rem;
}

.content--register-wide .register-bulk-cell-input {
    width: 100%;
    min-width: 7rem;
    max-width: 14rem;
    box-sizing: border-box;
}

.content--register-wide .register-bulk-cell-textarea {
    width: 100%;
    min-width: 9rem;
    max-width: 18rem;
    box-sizing: border-box;
    resize: vertical;
}

.content--register-wide .register-bulk-cell-select {
    width: 100%;
    min-width: 6.5rem;
    max-width: 12rem;
    box-sizing: border-box;
}

.content--register-wide .register-table {
    table-layout: fixed;
}

.content--register-wide .register-table td,
.content--register-wide .register-table th {
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}

/* Structures / inventory: list (main ~2/3) + add form (aside 1/3) */
.assets-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 33.333%);
    gap: 20px 24px;
    align-items: start;
    margin-top: 4px;
}

.assets-split__main {
    min-width: 0;
}

.assets-split__main > h3:first-child {
    margin-top: 0;
}

.assets-split__aside {
    position: sticky;
    top: 12px;
}

.assets-split__aside .assets-panel-form {
    margin-bottom: 0;
}

/* One column of fields in the narrow sidebar */
.assets-split__aside .form-row,
.assets-split__aside .form-row--3 {
    grid-template-columns: 1fr;
}

.assets-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 8px;
}

.assets-table-scroll .assets-data-table {
    margin-top: 0;
}

/* View-only: no aside; avoid an empty second grid column */
.assets-split--list-only {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 960px) {
    .assets-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .assets-split__aside {
        position: static;
    }
}

.content--assets-wide .assets-data-table {
    table-layout: fixed;
}

.content--assets-wide .assets-data-table td,
.content--assets-wide .assets-data-table th {
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}

.content--assets-wide .assets-jobs-meta {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--card-soft);
}

.content--assets-wide .assets-jobs-meta ul {
    margin: 8px 0 0;
    padding-left: 1.2rem;
}

.register-road-card,
.assets-panel-form {
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.register-road-card-head,
.assets-panel-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.register-road-card-title,
.assets-panel-form__title {
    font-size: 1rem;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 9px;
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--ink);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(122, 62, 163, 0.2);
    border-color: #9a72ba;
}

label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: var(--muted);
}

.alert {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.alert.error {
    background: #fde8f4;
    color: #8a2a67;
}

.alert.success {
    background: #f0e8fb;
    color: #5d2f7e;
}

.alert.info {
    background: #e8f4fd;
    color: #174a73;
}

.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(95%, 420px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--panel-shadow);
}

/* Login: split hero + form */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 10000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--card);
    color: var(--ink);
    border: 2px solid var(--accent);
    border-radius: 10px;
    font-weight: 600;
    box-shadow: var(--panel-shadow);
}

.login-page {
    min-height: 100vh;
    margin: 0;
}

.login-page .auth-wrap {
    min-height: 100vh;
    display: block;
    place-items: unset;
    padding: 0;
}

.auth-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 480px);
    align-items: stretch;
}

@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: 1fr;
    }
}

.auth-hero {
    position: relative;
    padding: clamp(28px, 5vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    background: linear-gradient(145deg, #2d1544 0%, #4f2573 42%, #6b3a8f 100%);
    color: #fff;
    overflow: hidden;
}

.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(222, 92, 167, 0.35), transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(79, 37, 115, 0.5), transparent 45%);
    pointer-events: none;
}

.auth-hero > * {
    position: relative;
    z-index: 1;
}

.auth-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.95);
}

.auth-hero h1 {
    margin: 0;
    font-size: clamp(1.65rem, 3.5vw, 2.15rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.auth-hero-lead {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    max-width: 36ch;
}

.auth-hero-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.auth-hero-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.45;
}

.auth-hero-list svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    stroke: rgba(255, 255, 255, 0.85);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-sysinfo {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.auth-sysinfo dt {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0;
}

.auth-sysinfo dd {
    margin: 0 0 10px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    word-break: break-word;
}

.auth-sysinfo dd:last-child {
    margin-bottom: 0;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 40px) clamp(18px, 3vw, 28px);
    background: var(--bg);
}

.auth-card--login {
    width: min(100%, 400px);
    padding: clamp(22px, 3vw, 28px);
}

.auth-card--login h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
}

.auth-card--login .auth-card-sub {
    margin: 0 0 18px;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
}

.auth-security-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.auth-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    background: var(--card-soft);
    border: 1px solid var(--border);
}

.auth-security-pill svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.auth-password-row {
    position: relative;
}

.auth-password-row input[type="password"],
.auth-password-row input[type="text"] {
    padding-right: 44px;
}

.auth-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-password-toggle:hover {
    background: var(--card-soft);
    color: var(--ink);
}

.auth-password-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.auth-password-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.auth-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 140px);
    justify-content: center;
}

.setup-shell {
    width: min(1100px, 96%);
    display: grid;
    grid-template-columns: 0.95fr 1.25fr;
    gap: 16px;
    align-items: stretch;
}

.setup-hero {
    background: #5a2b80;
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    box-shadow: 0 14px 36px rgba(80, 35, 112, 0.32);
    animation: rise 0.55s ease-out;
}

.setup-hero h2 {
    margin: 10px 0 10px;
    font-size: 1.7rem;
    line-height: 1.2;
}

.setup-hero p {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.9);
}

.pill {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
}

.setup-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.setup-card {
    width: 100%;
    border-radius: 16px;
    animation: rise 0.45s ease-out;
}

.input-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    color: #6f6479;
}

.checkline-wrap {
    margin: 4px 0 12px;
    display: grid;
    gap: 7px;
}

.checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #564a63;
    margin-top: 8px;
}

.checkline input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.preview-box {
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed #baa7cb;
    border-radius: 10px;
    background: #f7f2fb;
}

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    text-transform: capitalize;
    border: 1px solid #d9cfdf;
    background: #f4eef8;
}

.badge.approved {
    background: #f0e8fb;
    border-color: #c8b6dd;
    color: #5d2f7e;
}

.badge.green {
    background: #eafbf1;
    border-color: #9fdcb8;
    color: #1a6b3c;
}

.badge.red {
    background: #fff0f0;
    border-color: #f5aaaa;
    color: #b91c1c;
}

.badge.grey {
    background: #f3f3f4;
    border-color: #cccccd;
    color: #555;
}

.badge.pending_review {
    background: #f7eefc;
    border-color: #d7b9ea;
    color: #704092;
}

.badge.rejected {
    background: #fde8f4;
    border-color: #efb6d6;
    color: #8a2a67;
}

.office-tree {
    list-style: none;
    margin: 6px 0 6px 0;
    padding-left: 16px;
    border-left: 2px dashed #c9bdd6;
}

.office-tree li {
    margin: 8px 0;
}

.tree-node {
    background: #faf6fd;
    border: 1px solid #dbcfe5;
    border-radius: 8px;
    padding: 8px 10px;
}

.org-accent {
    border-radius: 14px;
    padding: 12px;
    background: #f6eef7;
    border: 1px solid #d9d0e6;
}

.org-form-card {
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-soft) 82%, var(--card) 18%);
    padding: 12px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
}

.org-btn {
    background: var(--accent);
}

.org-btn:hover {
    filter: brightness(0.98);
}

/* Dark theme refinements */

html[data-theme="dark"] .alert.error {
    background: #3b1225;
    color: #f8c8e1;
}

html[data-theme="dark"] .alert.success {
    background: #251633;
    color: #e6d8ff;
}

html[data-theme="dark"] .alert.info {
    background: #102536;
    color: #d3e7ff;
}

html[data-theme="dark"] .badge {
    background: #2b2335;
    border-color: #514463;
    color: #e2d9f2;
}

html[data-theme="dark"] .badge.green {
    background: #173626;
    border-color: #2d7a4b;
    color: #b9f5d0;
}

html[data-theme="dark"] .badge.red {
    background: #3b121b;
    border-color: #9f2550;
    color: #fecdd3;
}

html[data-theme="dark"] .badge.grey {
    background: #26252b;
    border-color: #4a4950;
    color: #d4d4d8;
}

html[data-theme="dark"] .badge.pending_review {
    background: #271832;
    border-color: #5e3f87;
    color: #e5d4ff;
}

html[data-theme="dark"] .badge.rejected {
    background: #3a1827;
    border-color: #a43664;
    color: #fed7e2;
}

html[data-theme="dark"] .office-tree {
    border-left-color: #4d3f63;
}

html[data-theme="dark"] .tree-node {
    background: #252033;
    border-color: #45395a;
}

html[data-theme="dark"] .org-accent {
    background: #241d31;
    border-color: #4c3f63;
}

html[data-theme="dark"] .org-form-card,
html[data-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
}

/* ---------- Profile page ---------- */
.profile-page {
    max-width: 1120px;
    margin: 0 auto;
}

.profile-page__alerts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 24px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--card-soft) 0%, var(--card) 48%, rgba(222, 92, 167, 0.06) 100%);
    box-shadow: var(--panel-shadow);
}

.profile-hero__avatar-wrap {
    flex-shrink: 0;
}

.profile-hero__avatar {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-soft);
    border: 3px solid var(--card);
    box-shadow: 0 4px 18px rgba(79, 37, 115, 0.12);
    color: var(--muted);
}

.profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-hero__avatar svg {
    width: 40px;
    height: 40px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-hero__body {
    min-width: 0;
    flex: 1;
}

.profile-hero__eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.profile-hero__title {
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.profile-hero__meta {
    margin: 0 0 10px;
    font-size: 0.92rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.profile-hero__username {
    font-weight: 600;
    color: var(--ink);
}

.profile-hero__dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent-3);
    opacity: 0.85;
}

.profile-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.profile-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 22px;
    align-items: start;
}

.profile-page__primary,
.profile-page__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.profile-card {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 20px 22px;
    box-shadow: var(--panel-shadow);
}

.profile-card--compact {
    padding: 18px 20px;
}

.profile-card--photo {
    padding-bottom: 22px;
}

.profile-card__head {
    margin-bottom: 16px;
}

.profile-card__head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.profile-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.profile-card__lede {
    margin: 6px 0 0;
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.35;
}

.profile-card__lede--tight {
    margin-top: 4px;
    margin-bottom: 12px;
}

.profile-photo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
}

.profile-photo-preview--large {
    width: 72px;
    height: 72px;
}

.profile-photo-row__actions {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-photo-row__btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.profile-inline-form--inline {
    margin: 0;
}

.profile-inline-form {
    margin: 0;
}

.profile-inline-form--tight {
    padding-top: 4px;
}

.profile-file-label {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--muted);
}

.profile-file-input {
    font-size: 0.85rem;
}

.profile-photo-row__submit {
    margin-top: 4px;
    align-self: flex-start;
}

.profile-photo-row__btn-row .btn {
    margin: 0;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-field {
    margin-bottom: 14px;
}

.profile-field:last-of-type {
    margin-bottom: 0;
}

.profile-field--flush {
    margin-top: 4px;
}

.profile-field__hint,
.profile-field__inline-hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}

.profile-field__inline-hint {
    display: inline;
    margin: 0;
    font-weight: 400;
}

.profile-form__actions {
    margin-top: 18px;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.profile-dl {
    margin: 0;
}

.profile-dl__row {
    display: grid;
    grid-template-columns: minmax(100px, 38%) 1fr;
    gap: 10px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.profile-dl__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.profile-dl dt {
    margin: 0;
    color: var(--muted);
    font-weight: 600;
}

.profile-dl dd {
    margin: 0;
    color: var(--ink);
    word-break: break-word;
}

.profile-dl__muted {
    color: var(--muted);
    font-style: italic;
}

.profile-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.45;
}

.profile-role-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-role-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-soft);
    margin-bottom: 8px;
}

.profile-role-list__item:last-child {
    margin-bottom: 0;
}

.profile-role-list__name {
    font-weight: 600;
    color: var(--ink);
}

.profile-role-list__badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-perm-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-perm-chip {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.3;
    border: 1px solid var(--border);
    background: var(--card-soft);
    color: var(--muted);
    max-width: 100%;
    word-break: break-word;
}

.btn--outline-danger {
    background: transparent;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.35);
}

.btn--outline-danger:hover {
    background: rgba(185, 28, 28, 0.08);
    border-color: #b91c1c;
}

html[data-theme="dark"] .btn--outline-danger {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.45);
}

html[data-theme="dark"] .btn--outline-danger:hover {
    background: rgba(248, 113, 113, 0.12);
}

html[data-theme="dark"] .profile-hero {
    background: linear-gradient(135deg, var(--card-soft) 0%, var(--card) 55%, rgba(177, 122, 217, 0.08) 100%);
}

html[data-theme="dark"] .profile-hero__avatar {
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .profile-perm-chip {
    background: rgba(177, 122, 217, 0.06);
    border-color: var(--border);
    color: var(--muted);
}

@media (max-width: 960px) {
    .profile-page__grid {
        grid-template-columns: 1fr;
    }

    .profile-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .profile-dl__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .profile-dl dt {
        font-size: 0.78rem;
    }
}

html[data-theme="dark"] .preview-box {
    background: #251f32;
    border-color: #5d4a79;
}

html[data-theme="dark"] .setup-hero {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- App dialog (replaces native alert / confirm) ---------- */
.rcmms-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 12, 32, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}

.rcmms-dialog-backdrop.rcmms-dialog-backdrop--open {
    display: flex !important;
}

.rcmms-dialog-backdrop[hidden] {
    display: none !important;
}

html[data-theme="dark"] .rcmms-dialog-backdrop,
body[data-theme="dark"] .rcmms-dialog-backdrop {
    background: rgba(0, 0, 0, 0.58);
}

.rcmms-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    margin: auto;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--panel-shadow), 0 24px 64px rgba(45, 36, 53, 0.18);
    padding: 18px 20px 16px;
    animation: rcmms-dialog-in 0.18s ease-out;
    pointer-events: auto;
}

.rcmms-dialog__title {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 10px;
    letter-spacing: 0.02em;
}

.rcmms-dialog__body {
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 18px;
    white-space: pre-wrap;
}

.rcmms-dialog__footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

body.rcmms-dialog-open {
    overflow: hidden;
}

@keyframes rcmms-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- Roles & permissions admin ---------- */
.roles-page {
    --roles-gap: 12px;
    --roles-panel-rad: 14px;
    max-width: min(1320px, 100%);
    margin: 0 auto;
    padding: 8px clamp(8px, 1.5vw, 20px) 32px;
}

.roles-page__alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--roles-gap);
}

.roles-page__hero {
    position: relative;
    margin: 0 0 var(--roles-gap);
    padding: 14px 16px 16px;
    border-radius: var(--roles-panel-rad);
    border: 1px solid var(--border);
    background: linear-gradient(165deg, var(--card-soft) 0%, var(--card) 55%);
    box-shadow: var(--panel-shadow);
    overflow: hidden;
}

.roles-page__hero-main {
    display: grid;
    gap: 14px;
    align-items: center;
}

@media (min-width: 880px) {
    .roles-page__hero-main {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
    }
}

.roles-page__hero-intro {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.roles-page__eyebrow {
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 75%, var(--muted));
}

.roles-page__title {
    margin: 0 0 6px;
    font-size: clamp(1.25rem, 2.2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
}

.roles-page__lede {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--muted);
}

.roles-page__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

@media (max-width: 520px) {
    .roles-page__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.roles-page__stat {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
}

.roles-page__stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.roles-page__stat-label {
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.roles-page__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--roles-gap);
}

.roles-page__toolbar-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
}

.roles-page__toolbar-link:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.roles-page__toolbar-link--emphasis {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.roles-page__toolbar-sep {
    display: none;
}

.roles-page__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: var(--roles-gap);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
}

.roles-page__controls--inline {
    margin-bottom: 0;
    padding: 4px 0;
    border: none;
    background: transparent;
    flex: 1 1 220px;
    justify-content: flex-end;
    min-width: 0;
}

.roles-page__search-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.roles-page__search-input {
    flex: 1;
    min-width: 12rem;
    max-width: 36rem;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.88rem;
}

.roles-page__search-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--input-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.roles-page__perm-quickfind {
    position: sticky;
    top: 8px;
    z-index: 5;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--roles-panel-rad);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 92%, var(--accent));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 7%, transparent);
}

.roles-page__perm-quickfind-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.roles-page__perm-quickfind-input {
    flex: 1 1 16rem;
    min-width: min(100%, 12rem);
    max-width: none;
}

.roles-page__perm-quickfind-hint {
    margin: 8px 0 0;
    line-height: 1.4;
    color: var(--muted);
}

.roles-page__perm-choice {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    min-width: 0;
}

.roles-page__perm-choice-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.roles-page__perm-choice-key {
    font-size: 0.78rem;
    opacity: 0.88;
}

.roles-page__section--panel {
    margin-bottom: var(--roles-gap);
    border-radius: var(--roles-panel-rad);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent);
    overflow: hidden;
}

.roles-page__section--panel .roles-page__section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--table-head);
}

.roles-page__section-head--row {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 16px;
}

.roles-page__section--panel .roles-page__heading {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.roles-page__section--panel .roles-page__table-wrap {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: var(--card);
}

.roles-page__form-surface {
    margin: 0;
    padding: 12px 14px 14px;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-soft) 70%, var(--card));
    box-shadow: none;
}

.roles-page__form-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.roles-page__context--floating {
    margin-bottom: var(--roles-gap);
    padding: 10px 14px;
    border-radius: var(--roles-panel-rad);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--panel-shadow);
}

.roles-page__context--floating .roles-page__context-label {
    margin: 0 0 6px;
}

.roles-page__nav-preview {
    margin: 0;
    padding: 12px 14px;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--nav-section-bg) 50%, var(--card));
}

.roles-page__nav-preview-title {
    margin: 0 0 10px;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--table-head-ink);
}

.roles-page__nav-preview-empty {
    margin: 0;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: var(--card-soft);
}

.roles-page__edit-banner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.roles-page__edit-banner-title {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.roles-page__edit-banner-name {
    font-size: 1.05rem;
    font-weight: 800;
}

.roles-page__edit-banner-meta {
    font-size: 0.84rem;
    color: var(--muted);
}

.roles-page__section--edit .roles-page__form-surface {
    margin-top: 0;
}

.roles-page dialog.rcmms-dialog.roles-page__assign-dialog {
    max-width: min(580px, 96vw);
}

.roles-page__assign-dialog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    margin: 0 0 12px;
}

.roles-page__assign-dialog-find {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.roles-page__assign-dialog-find .roles-page__search-input {
    max-width: none;
    width: 100%;
}

.roles-page__assign-dialog-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.roles-page__assign-dialog-body {
    margin: 0 0 14px;
    max-height: min(52vh, 420px);
    overflow: auto;
    padding-right: 4px;
}

.roles-page__assign-dialog-body .roles-page__role-matrix {
    max-height: none;
}

.roles-page__assign-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.roles-page__assign-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.roles-page__assign-edit-btn svg {
    flex-shrink: 0;
}

#roles-panel-assign .roles-page__th--assignment {
    min-width: min(11rem, 40vw);
}

.roles-page__person-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 22rem;
    padding: 4px 0;
}

.roles-page__person-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent));
    background: color-mix(in srgb, var(--table-head) 35%, var(--card));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.roles-page__person-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.roles-page__person-avatar-initials {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--table-head-ink);
    line-height: 1;
}

.roles-page__person-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.roles-page__person-name {
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

.roles-page__person-meta {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--muted);
    word-break: break-word;
}

.roles-page__assign-person {
    vertical-align: middle;
}

.roles-page__assign-cell {
    vertical-align: middle;
    min-width: 10rem;
    max-width: 16rem;
}

.roles-page__assign-actions-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.roles-page__assign-menu-trigger {
    margin: 0;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
}

.roles-page__assign-menu-trigger svg {
    display: block;
}

/* Popover escapes table overflow clipping (same pattern as users directory). */
.roles-page__assign-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--panel-shadow);
    min-width: min(13.5rem, calc(100vw - 24px));
    max-height: min(70vh, calc(100vh - 16px));
    overflow-y: auto;
    box-sizing: border-box;
}

.roles-page__assign-popover::backdrop {
    background: rgba(45, 36, 53, 0.14);
}

html[data-theme="dark"] .roles-page__assign-popover::backdrop,
body[data-theme="dark"] .roles-page__assign-popover::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.roles-page__assign-popover-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roles-page__assign-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s ease;
}

.roles-page__assign-menu-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.roles-page__assign-menu-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.roles-page__assign-menu-ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    color: var(--muted);
}

.roles-page__assign-menu-item:hover .roles-page__assign-menu-ico {
    color: inherit;
}

.roles-page__assign-menu-ico svg {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.roles-page__assign-menu-lbl {
    flex: 1;
    min-width: 0;
}

.roles-page__role-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 6px 8px;
    align-content: start;
    max-height: 10.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    min-height: 0;
}

.roles-page__role-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background: var(--card);
}

.roles-page__role-row-main {
    flex: 0 0 auto;
    margin: 0;
}

.roles-page__role-office {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 0 0 auto;
}

.roles-page__role-office select {
    width: 100%;
    font-size: 0.82rem;
}

.roles-page__context {
    margin-bottom: 22px;
}

.roles-page__context-label {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--table-head-ink);
}

.roles-page__context-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.roles-page__context-form label {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}

.roles-page__context-form select {
    min-width: min(280px, 100%);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 40px;
}

.roles-page__context-hint {
    margin: 10px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
}

.roles-page__section {
    margin-bottom: 0;
}

.roles-page__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.roles-page__heading {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.roles-page__section-hint {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
    max-width: 36rem;
}

.roles-page__table-wrap {
    margin-top: 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 2px 14px rgba(69, 43, 93, 0.05);
}

.roles-page__table-wrap table {
    margin-top: 0;
}

.roles-page__table-wrap tbody tr {
    transition: background-color 0.14s ease;
}

.roles-page__table-wrap tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.roles-page__subhead {
    margin: 14px 0 10px;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--table-head-ink);
}

.roles-page__table-wrap th:first-child,
.roles-page__table-wrap td:first-child {
    padding-left: 16px;
}

.roles-page__table-wrap th:last-child,
.roles-page__table-wrap td:last-child {
    padding-right: 16px;
}

.roles-page__section--panel .roles-page__table-wrap th,
.roles-page__section--panel .roles-page__table-wrap td {
    padding: 8px 10px;
    font-size: 0.88rem;
}

.roles-page__section--panel .roles-page__table-wrap th:first-child,
.roles-page__section--panel .roles-page__table-wrap td:first-child {
    padding-left: 12px;
}

.roles-page__section--panel .roles-page__table-wrap th:last-child,
.roles-page__section--panel .roles-page__table-wrap td:last-child {
    padding-right: 12px;
}

.roles-page__mono {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--table-head) 70%, var(--card));
    border: 1px solid var(--border);
}

.roles-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.roles-page__actions .btn,
.roles-page__actions .btn.secondary {
    margin: 0;
}

.roles-page__actions .btn--icon {
    margin: 0;
}

.roles-page__icon-form {
    display: inline-flex;
    margin: 0;
}

.roles-page__action-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: color-mix(in srgb, var(--table-head) 50%, transparent);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.roles-page__action-locked-icon {
    display: flex;
    line-height: 0;
    color: var(--muted);
}

.roles-page__action-locked-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.roles-page__role-select {
    width: 100%;
    min-width: 200px;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.88rem;
    min-height: 120px;
}

.roles-perm-group {
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent));
    background: color-mix(in srgb, var(--card-soft) 65%, var(--card));
    overflow: hidden;
}

.roles-perm-group summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--table-head-ink);
    background: color-mix(in srgb, var(--table-head) 55%, transparent);
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
}

.roles-perm-group summary::-webkit-details-marker {
    display: none;
}

.roles-perm-group summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.roles-perm-group[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.roles-perm-group[open] summary {
    border-bottom-color: var(--border);
}

.roles-perm-group summary:hover {
    background: color-mix(in srgb, var(--table-head) 80%, transparent);
}

.roles-perm-group__body {
    padding: 12px 14px 14px;
}

.roles-perm-resource {
    margin-top: 12px;
}

.roles-perm-resource:first-child {
    margin-top: 0;
}

.roles-perm-resource__head {
    margin-bottom: 8px;
}

.roles-perm-resource__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.roles-perm-resource__name {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    flex: 1 1 140px;
    margin-bottom: 0;
}

.roles-perm-resource__page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.roles-perm-resource__route {
    margin-top: 4px;
    color: color-mix(in srgb, var(--muted) 92%, var(--ink));
    line-height: 1.35;
    word-break: break-all;
}

.roles-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 10px;
}

.roles-perm-grid .checkline {
    align-items: flex-start;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: var(--card);
    margin: 0;
}

.roles-perm-grid .checkline:hover {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.roles-page__row--current {
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.roles-page__section--capmap .roles-page__cap-details {
    max-width: 28rem;
}

.roles-page__cap-summary {
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent);
    list-style: none;
}

.roles-page__cap-summary::-webkit-details-marker {
    display: none;
}

.roles-page__cap-keylist {
    margin: 10px 0 0;
    padding: 10px 12px;
    max-height: 220px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-soft);
    color: var(--ink);
}

.roles-page dialog.rcmms-dialog {
    max-width: min(420px, 94vw);
    margin: auto;
    border: none;
    padding: 0;
}

.roles-page dialog.rcmms-dialog::backdrop {
    background: rgba(20, 12, 32, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

html[data-theme="dark"] .roles-page dialog.rcmms-dialog::backdrop,
body[data-theme="dark"] .roles-page dialog.rcmms-dialog::backdrop {
    background: rgba(0, 0, 0, 0.58);
}

.roles-page dialog.rcmms-dialog form {
    padding: 18px 20px 16px;
}

html[data-theme="dark"] .roles-perm-group {
    background: color-mix(in srgb, var(--card) 40%, var(--card-soft));
}

html[data-theme="dark"] .roles-perm-grid .checkline {
    background: var(--card);
}

html[data-theme="dark"] .roles-page__row--current,
body[data-theme="dark"] .roles-page__row--current {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

html[data-theme="dark"] .roles-page__stat,
body[data-theme="dark"] .roles-page__stat {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border-color: var(--border);
}

html[data-theme="dark"] .roles-page__table-wrap tbody tr:hover,
body[data-theme="dark"] .roles-page__table-wrap tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

/* ---------- Roles page: tabs, perm toolbar, filter, sticky save, etc. ---------- */
.roles-page__tabs {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--roles-gap);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.roles-page__tab-button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 8rem;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--muted);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.roles-page__tab-button:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.roles-page__tab-button[aria-selected="true"] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
    box-shadow: inset 0 -2px 0 var(--accent);
}

.roles-page__tab-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.roles-page__tab-count {
    display: inline-flex;
    min-width: 1.4rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 14%, var(--card-soft));
    color: var(--accent);
    line-height: 1.4;
}

.roles-page__tab-button[aria-selected="true"] .roles-page__tab-count {
    background: color-mix(in srgb, var(--accent) 22%, var(--card));
}

.roles-page__tab-panel[hidden] {
    display: none !important;
}

.roles-page__create-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.roles-page__create-open-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.roles-page dialog.rcmms-dialog.roles-page__create-dialog {
    width: 80vw;
    max-width: 80vw;
    max-height: min(92vh, 900px);
    overflow: hidden;
}

.roles-page dialog.rcmms-dialog.roles-page__create-dialog form.roles-page__create-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(92vh, 900px);
    margin-top: 0;
    box-sizing: border-box;
    padding: 18px 20px 16px;
}

.roles-page__create-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.roles-page__create-dialog-title {
    margin: 0;
    flex: 1 1 auto;
}

.roles-page__create-dialog-lede {
    margin: 0 0 12px;
    flex-shrink: 0;
    color: var(--muted);
}

.roles-page__create-dialog-body {
    white-space: normal;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
}

.roles-page__create-dialog-footer {
    justify-content: flex-start;
    gap: 10px;
    flex-shrink: 0;
    margin-top: 12px;
}

.roles-page__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--accent) 4%, var(--card-soft));
    border-bottom: 1px solid var(--border);
}

.roles-page__filter-row label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.roles-page__filter-input {
    flex: 1 1 200px;
    min-width: 12rem;
    max-width: 28rem;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.85rem;
}

.roles-page__filter-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--input-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.roles-page__filter-counter {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.roles-page__th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
}

.roles-page__th-sort:hover {
    color: var(--ink);
}

.roles-page__th-sort:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

.roles-page__th-sort::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    transform: translateY(1px);
    transition: opacity 0.12s ease;
}

.roles-page__th-sort:hover::after {
    opacity: 0.4;
}

.roles-page__th-sort.is-sorted-asc::after,
.roles-page__th-sort.is-sorted-desc::after {
    opacity: 0.95;
}

.roles-page__th-sort.is-sorted-desc::after {
    transform: rotate(180deg) translateY(-1px);
}

.roles-page__row-hidden {
    display: none !important;
}

.roles-page__filter-empty td {
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

.roles-page__perm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--accent) 4%, var(--card-soft));
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}

.roles-page__perm-toolbar-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.78rem;
    font-family: inherit;
}

.roles-page__perm-toolbar-button:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.roles-page__perm-toolbar-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.roles-perm-group__title {
    flex: 1 1 auto;
}

.roles-perm-group__count {
    margin-left: auto;
    margin-right: 12px;
    min-width: 2.4rem;
    text-align: center;
    transition: background 0.14s ease, color 0.14s ease;
}

.roles-page__overall-counter {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.roles-page__perm-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 5%, var(--card-soft));
}

.roles-page__perm-summary-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
}

.roles-page__perm-summary-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 18%, var(--card));
    color: var(--accent);
}

.roles-page__perm-summary-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.roles-page__perm-summary-delta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-left: auto;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--muted);
}

.roles-page__perm-summary-delta--changed {
    color: var(--accent);
}

.roles-page__perm-delta-added {
    color: #2f8f4e;
    background: color-mix(in srgb, #2f8f4e 14%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
}

.roles-page__perm-delta-removed {
    color: #b34384;
    background: color-mix(in srgb, #b34384 14%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
}

.roles-page__form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-left: -14px;
    margin-right: -14px;
    margin-bottom: -14px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    border-top: 1px solid var(--border);
    box-shadow: 0 -3px 12px color-mix(in srgb, var(--ink) 12%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.roles-page__edit-banner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}

.roles-page__edit-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 280px;
    min-width: 0;
}

.roles-page__edit-banner-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.roles-page__edit-banner-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.roles-page__edit-banner-actions .btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

.roles-page__back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--accent);
    box-shadow: 0 6px 18px rgba(20, 12, 32, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.14s ease;
}

.roles-page__back-to-top:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.roles-page__back-to-top svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.roles-page__icon-form {
    display: inline-flex;
    margin: 0;
}

.roles-page__icon-form button {
    margin: 0;
}

.roles-page-access__howto {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

.roles-page-access__howto-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.roles-page-access__howto-title::-webkit-details-marker {
    display: none;
}

.roles-page-access__howto[open] .roles-page-access__howto-title {
    margin-bottom: 8px;
}

.roles-page-access__howto-steps {
    margin: 0 0 10px 1.2rem;
    padding: 0;
    line-height: 1.5;
    color: var(--text);
}

.roles-page-access__howto-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.roles-page-access__issues {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--warn, #d97706) 45%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--warn, #d97706) 8%, var(--card));
}

.roles-page-access__issues-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 650;
}

.roles-page-access__issues-intro {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.45;
}

.roles-page-access__issues-list {
    margin: 0;
    padding: 0 0 0 1.2rem;
    line-height: 1.5;
}

.roles-page-access__issues-list li {
    margin: 0 0 8px;
}

.roles-page-access__issues-list li[data-level="error"] {
    color: var(--danger, #b91c1c);
    font-weight: 600;
}

.roles-page-access__issues-list li[data-level="warning"] {
    color: color-mix(in srgb, var(--warn, #b45309) 80%, var(--text));
}

.roles-page-access__issues-ok {
    margin: 0;
    color: var(--ok, #15803d);
}

.roles-page-access tr[data-perm-row-issue="error"] {
    outline: 2px solid color-mix(in srgb, var(--danger, #dc2626) 55%, transparent);
    outline-offset: -2px;
}

.roles-page-access {
    margin: 0 0 18px;
}

.roles-page-access__title {
    margin: 0 0 6px;
    font-size: 1.08rem;
    font-weight: 650;
}

.roles-page-access__intro {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.45;
}

.roles-page-access__scroll-hint {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.45;
}

.roles-page-access__scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: min(520px, 62vh);
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
}

.roles-page-access__scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.roles-page__create-dialog-body:has(.roles-page-access__scroll) {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.roles-page__create-dialog-body:has(.roles-page-access__scroll) .roles-page-access {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.roles-page__create-dialog-body:has(.roles-page-access__scroll) .roles-page-access__head {
    flex-shrink: 0;
}

.roles-page__create-dialog-body .roles-page-access__scroll {
    flex: 1 1 auto;
    min-height: 14rem;
    max-height: min(440px, 48vh);
}

.roles-page-access__table {
    --roles-access-col-menu-w: 9.5rem;
    --roles-access-col-page-w: 11.5rem;
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.9rem;
}

.roles-page-access__col-menu {
    width: var(--roles-access-col-menu-w);
}

.roles-page-access__col-page {
    width: var(--roles-access-col-page-w);
}

.roles-page-access__col-verb {
    width: 11.25rem;
}

.roles-page-access__col-verb--manage {
    width: 14rem;
}

.roles-page-access__col-actions {
    width: 5.75rem;
}

.roles-page-access__table th,
.roles-page-access__table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* Sticky column header row (scroll vertically inside .roles-page-access__scroll) */
.roles-page-access__table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: var(--table-head);
    background-clip: padding-box;
    box-shadow: 0 1px 0 var(--border);
}

.roles-page-access__table thead th.roles-page-access__th-verb,
.roles-page-access__table thead th.roles-page-access__th-actions {
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: var(--table-head);
    box-shadow: 0 1px 0 var(--border), 0 4px 6px -4px rgba(45, 36, 53, 0.08);
}

.roles-page-access__menu,
.roles-page-access__page {
    text-align: left;
    vertical-align: top;
}

/* Pin Menu + Page while scrolling permission columns horizontally */
.roles-page-access__table tbody td.roles-page-access__menu,
.roles-page-access__table tbody td.roles-page-access__page {
    position: sticky;
    z-index: 2;
    background-color: var(--card);
    background-clip: padding-box;
}

.roles-page-access__table tbody td.roles-page-access__menu {
    left: 0;
    box-shadow: 1px 0 0 var(--border);
}

.roles-page-access__table tbody td.roles-page-access__page {
    left: var(--roles-access-col-menu-w);
    box-shadow: 4px 0 8px -4px rgba(45, 36, 53, 0.1);
}

/* Header corners: fixed top + left (above body sticky cells and verb headers) */
.roles-page-access__table thead th.roles-page-access__menu {
    left: 0;
    z-index: 6;
    background-color: var(--table-head);
    box-shadow:
        1px 0 0 var(--border),
        0 2px 0 var(--border),
        4px 4px 8px -4px rgba(45, 36, 53, 0.12);
}

.roles-page-access__table thead th.roles-page-access__page {
    left: var(--roles-access-col-menu-w);
    z-index: 6;
    background-color: var(--table-head);
    box-shadow:
        4px 0 8px -4px rgba(45, 36, 53, 0.12),
        0 2px 0 var(--border);
}

html[data-theme="dark"] .roles-page-access__table thead th,
body[data-theme="dark"] .roles-page-access__table thead th {
    background-color: var(--table-head);
}

html[data-theme="dark"] .roles-page-access__table tbody td.roles-page-access__menu,
html[data-theme="dark"] .roles-page-access__table tbody td.roles-page-access__page,
body[data-theme="dark"] .roles-page-access__table tbody td.roles-page-access__menu,
body[data-theme="dark"] .roles-page-access__table tbody td.roles-page-access__page {
    background-color: var(--card);
}

html[data-theme="dark"] .roles-page-access__table tbody td.roles-page-access__page,
body[data-theme="dark"] .roles-page-access__table tbody td.roles-page-access__page {
    box-shadow: 4px 0 10px -4px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .roles-page-access__table thead th.roles-page-access__page,
body[data-theme="dark"] .roles-page-access__table thead th.roles-page-access__page {
    box-shadow:
        4px 0 10px -4px rgba(0, 0, 0, 0.35),
        0 2px 0 var(--border);
}

.roles-page__table-wrap.roles-page-access__scroll tbody tr:hover td.roles-page-access__menu,
.roles-page__table-wrap.roles-page-access__scroll tbody tr:hover td.roles-page-access__page {
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
}

html[data-theme="dark"] .roles-page__table-wrap.roles-page-access__scroll tbody tr:hover td.roles-page-access__menu,
html[data-theme="dark"] .roles-page__table-wrap.roles-page-access__scroll tbody tr:hover td.roles-page-access__page,
body[data-theme="dark"] .roles-page__table-wrap.roles-page-access__scroll tbody tr:hover td.roles-page-access__menu,
body[data-theme="dark"] .roles-page__table-wrap.roles-page-access__scroll tbody tr:hover td.roles-page-access__page {
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.roles-page-access__th-verb,
.roles-page-access__cell {
    border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.roles-page-access__th-verb {
    text-align: center;
    white-space: normal;
    vertical-align: middle;
    line-height: 1.25;
}

.roles-page-access__cell {
    text-align: left;
    white-space: normal;
}

.roles-page-access__th-actions {
    text-align: center;
    white-space: nowrap;
    font-size: 0.82rem;
    border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.roles-page-access__page-name {
    display: block;
}

.roles-page-access__route {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.roles-page-access__checks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
}

.roles-page-access__checks--exec {
    width: 100%;
    min-width: 0;
}

.roles-page-access__exec-block {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-soft, #f4f4f5) 88%, var(--card));
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.roles-page-access__exec-title {
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
}

.roles-page-access__exec-hint {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.35;
}

.roles-page-access__exec-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.roles-page-access label.roles-page-access__check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    text-align: left;
    box-sizing: border-box;
}

.roles-page-access__check--full {
    padding: 6px 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
}

.roles-page-access__check--chip .roles-page-access__check-label {
    font-size: 0.8rem;
}

.roles-page-access__check input[type="checkbox"] {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    margin: 0.12em 0 0;
    accent-color: var(--accent);
}

.roles-page-access__check-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
}

.roles-page-access__check-scope {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.25;
}

.roles-page-access__mirror {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
}

.roles-page-access__mirror:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    color: var(--text);
}

.roles-page-access__mirror--on {
    border-style: solid;
    border-color: color-mix(in srgb, #2e7d32 45%, var(--border));
    background: color-mix(in srgb, #2e7d32 10%, var(--card));
    color: var(--text);
}

.roles-page-access__mirror-label {
    font-weight: 600;
    font-size: 0.82rem;
}

.roles-page-access__mirror-hint {
    font-size: 0.72rem;
    opacity: 0.85;
}

.roles-page-access__na {
    display: block;
    color: var(--muted);
    opacity: 0.55;
    text-align: center;
    padding: 2px 0;
}

.roles-page-access__actions {
    text-align: center;
    vertical-align: middle;
}

.roles-page-access__row-btn {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    font-size: 0.78rem;
}

.roles-page-access__row-btn:last-child {
    margin-bottom: 0;
}

.roles-page__perm-form-counter {
    margin: 8px 0 0;
    color: var(--muted);
}

.roles-perm-orphans {
    margin: 12px 0 18px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 10px 14px;
}

.roles-perm-orphans__summary {
    cursor: pointer;
    font-weight: 600;
}

.roles-perm-orphans__hint {
    margin: 8px 0 10px;
    color: var(--muted);
}

.roles-perm-orphans__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roles-page__create-dialog-body .roles-perm-orphans {
    flex-shrink: 0;
}

.roles-page__create-dialog-body .roles-perm-orphans[open] .roles-perm-orphans__list {
    max-height: min(320px, 40vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.roles-perm-matrix {
    margin: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px 14px;
    background: color-mix(in srgb, var(--card) 94%, var(--accent) 3%);
}

.roles-perm-matrix__summary {
    cursor: pointer;
    list-style: none;
}

.roles-perm-matrix__summary::-webkit-details-marker {
    display: none;
}

.roles-perm-matrix__summary-title {
    font-weight: 650;
    font-size: 1.02rem;
}

.roles-perm-matrix__hint {
    margin: 8px 0 12px;
    color: var(--muted);
    line-height: 1.45;
}

.roles-perm-matrix__scroll {
    max-height: min(440px, 58vh);
    overflow: auto;
    margin: 0 -4px;
}

.roles-perm-matrix__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.roles-perm-matrix__table th,
.roles-perm-matrix__table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.roles-perm-matrix__th-verb {
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
}

.roles-perm-matrix__cell {
    text-align: center;
}

.roles-perm-matrix__empty {
    color: var(--muted);
    opacity: 0.55;
}

.roles-perm-matrix__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: flex-start;
}

.roles-perm-matrix__toggle {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 0.74rem;
    line-height: 1.25;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.roles-perm-matrix__toggle:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.roles-perm-matrix__toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.roles-perm-matrix__toggle--on {
    border-color: color-mix(in srgb, #2e7d32 45%, var(--border));
    background: color-mix(in srgb, #2e7d32 11%, var(--card));
}

.roles-perm-matrix__toggle-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-word;
    text-align: left;
}

.roles-page__nav-preview-scroll {
    overflow-x: auto;
}

.roles-page__nav-preview-verbs-hint {
    margin: 0 0 10px;
    color: var(--muted);
}

.roles-page__nav-verb-th {
    white-space: nowrap;
    text-align: center;
    font-size: 0.82rem;
}

.roles-page__nav-verb-cell {
    text-align: center;
    vertical-align: middle;
}

.roles-page__verb-na {
    color: var(--muted);
    opacity: 0.55;
}

.roles-page__verb-missing {
    color: var(--muted);
    opacity: 0.75;
    font-weight: 700;
}

.roles-page__reference-panel {
    margin-top: 16px;
}

.roles-page__reference-summary {
    cursor: pointer;
    font-weight: 650;
    font-size: 1.05rem;
    padding: 4px 0;
}

.roles-page__reference-intro {
    margin: 6px 0 12px;
    color: var(--muted);
    line-height: 1.45;
}

.roles-page__reference-scroll {
    max-height: min(480px, 62vh);
    overflow: auto;
}

html[data-theme="dark"] .roles-page__tabs,
body[data-theme="dark"] .roles-page__tabs {
    background: color-mix(in srgb, var(--card) 90%, transparent);
}

html[data-theme="dark"] .roles-page__perm-summary,
body[data-theme="dark"] .roles-page__perm-summary {
    background: color-mix(in srgb, var(--accent) 9%, var(--card));
}

html[data-theme="dark"] .roles-page__form-actions--sticky,
body[data-theme="dark"] .roles-page__form-actions--sticky {
    background: color-mix(in srgb, var(--card) 92%, transparent);
}

html[data-theme="dark"] .roles-page__back-to-top,
body[data-theme="dark"] .roles-page__back-to-top {
    background: var(--card-soft);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ---------- Workflows admin (workflows.php) ---------- */
.workflows-page {
    --workflows-gap: 12px;
    --workflows-panel-rad: 14px;
    max-width: min(1320px, 100%);
    margin: 0 auto;
    padding: 8px clamp(8px, 1.5vw, 20px) 32px;
}

.workflows-page__alerts,
.workflows-page > .alert {
    margin-bottom: var(--workflows-gap);
}

.workflows-page__alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workflows-page__hero {
    margin: 0 0 var(--workflows-gap);
    padding: 14px 16px 16px;
    border-radius: var(--workflows-panel-rad);
    border: 1px solid var(--border);
    background: linear-gradient(165deg, var(--card-soft) 0%, var(--card) 55%);
    box-shadow: var(--panel-shadow);
}

.workflows-page__hero-main {
    display: grid;
    gap: 14px;
    align-items: center;
}

@media (min-width: 880px) {
    .workflows-page__hero-main {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
    }
}

.workflows-page__eyebrow {
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 75%, var(--muted));
}

.workflows-page__title {
    margin: 0 0 6px;
    font-size: clamp(1.25rem, 2.2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
}

.workflows-page__lede {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--muted);
}

.workflows-page__hero--simple {
    padding: 16px 18px;
}

.workflows-page__hero--simple .workflows-page__title {
    margin-bottom: 8px;
}

.workflows-page__stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: var(--workflows-gap);
}

@media (max-width: 640px) {
    .workflows-page__stepper {
        grid-template-columns: repeat(5, minmax(52px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

.workflows-page__stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    text-decoration: none;
    color: var(--muted);
    transition: border-color 0.14s ease, background 0.14s ease;
    scroll-margin-top: 80px;
}

.workflows-page__stepper-item:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    color: var(--ink);
}

.workflows-page__stepper-item.is-current {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    color: var(--ink);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

.workflows-page__stepper-item.is-done .workflows-page__stepper-num {
    background: color-mix(in srgb, #22c55e 14%, var(--card));
    border-color: color-mix(in srgb, #22c55e 35%, var(--border));
    color: #1a6b3c;
}

html[data-theme="dark"] .workflows-page__stepper-item.is-done .workflows-page__stepper-num,
body[data-theme="dark"] .workflows-page__stepper-item.is-done .workflows-page__stepper-num {
    color: #86efac;
}

.workflows-page__stepper-num {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
    background: var(--card-soft);
    color: var(--accent);
}

.workflows-page__stepper-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.2;
}

.workflows-page__existing {
    margin-bottom: var(--workflows-gap);
    padding: 14px 16px;
    border-radius: var(--workflows-panel-rad);
    border: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
    box-shadow: var(--panel-shadow);
}

.workflows-page__existing-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
}

.workflows-page__existing-lede {
    margin: 0 0 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--muted);
}

.workflows-page__existing .workflows-page__switcher {
    margin-bottom: 12px;
}

.workflows-page__existing-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.workflows-page__existing-link:hover strong {
    color: var(--accent);
}

.workflows-page__table-wrap--definitions {
    margin: 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.workflows-page__table-wrap--definitions table {
    margin-top: 0;
}

.workflows-page__existing .workflows-page__table-wrap--definitions tbody tr.is-selected {
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.workflows-page__switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: var(--workflows-gap);
    padding: 10px 14px;
    border-radius: var(--workflows-panel-rad);
    border: 1px solid var(--border);
    background: var(--card);
}

.workflows-page__switcher label {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.workflows-page__switcher-select {
    flex: 1 1 14rem;
    min-width: min(100%, 12rem);
    max-width: 36rem;
}

.workflows-page__step-card {
    margin-bottom: var(--workflows-gap);
    border-radius: var(--workflows-panel-rad);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent);
    scroll-margin-top: 80px;
    overflow: hidden;
}

.workflows-page__step-card.is-current {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

.workflows-page__step-card-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--table-head);
}

.workflows-page__step-card-head h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--table-head-ink);
}

.workflows-page__step-hint {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--muted);
}

.workflows-page__step-card-body {
    padding: 14px;
}

.workflows-page__step-card-body--center {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.workflows-page__step-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

.workflows-page__step-form:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.workflows-page__empty-inline {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--card-soft);
    border: 1px solid var(--border);
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.45;
}

.workflows-page__next-hint {
    margin: 0 0 var(--workflows-gap);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    font-size: 0.88rem;
    color: var(--ink);
    text-align: center;
}

.workflows-page__simple-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.workflows-page__simple-list li {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card-soft);
}

.workflows-page__simple-list li.is-selected {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.workflows-page__simple-list-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--muted);
}

.workflows-page__simple-list--moves {
    margin-bottom: 0;
}

.workflows-page__step-card-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--table-head-ink);
    background: var(--table-head);
    border-bottom: 1px solid transparent;
}

.workflows-page__step-card--fold[open] > .workflows-page__step-card-summary {
    border-bottom-color: var(--border);
}

.workflows-page__step-card-summary::-webkit-details-marker {
    display: none;
}

.workflows-page__step-card-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.workflows-page__step-card--fold[open] > .workflows-page__step-card-summary::after {
    transform: rotate(-135deg);
}

.workflows-page__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

@media (min-width: 520px) {
    .workflows-page__stats {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }
}

.workflows-page__stat {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
}

.workflows-page__stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.workflows-page__stat-label {
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.workflows-page__section--panel {
    margin-bottom: var(--workflows-gap);
    border-radius: var(--workflows-panel-rad);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent);
    overflow: hidden;
}

.workflows-page__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--table-head);
}

.workflows-page__section-head h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--table-head-ink);
}

.workflows-page__section-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.workflows-page__section-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--table-head);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--table-head-ink);
}

.workflows-page__section-summary::-webkit-details-marker {
    display: none;
}

.workflows-page__section-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.workflows-page__section--panel[open] > .workflows-page__section-summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.workflows-page__form-surface {
    margin: 0;
    padding: 12px 14px 14px;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-soft) 70%, var(--card));
    box-shadow: none;
}

.workflows-page__form-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.workflows-page__table-wrap {
    overflow-x: auto;
}

.workflows-page__table-wrap table {
    margin-top: 0;
}

.workflows-page__table-wrap tbody tr {
    transition: background 0.12s ease;
}

.workflows-page__table-wrap tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.workflows-page__table-wrap th,
.workflows-page__table-wrap td {
    padding: 8px 10px;
    font-size: 0.88rem;
}

.workflows-page__table-wrap th:first-child,
.workflows-page__table-wrap td:first-child {
    padding-left: 12px;
}

.workflows-page__table-wrap th:last-child,
.workflows-page__table-wrap td:last-child {
    padding-right: 12px;
}

.workflows-page__mono {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--table-head) 70%, var(--card));
    border: 1px solid var(--border);
}

.workflows-page__key {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}

.workflows-page__empty {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

.workflows-page__checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    font-size: 0.88rem;
    color: var(--ink);
}

.workflows-page__checkline input[type="checkbox"] {
    width: auto;
}

.workflows-page__guide {
    margin-bottom: var(--workflows-gap);
    border-radius: var(--workflows-panel-rad);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 6%, var(--card));
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent);
    overflow: hidden;
}

.workflows-page__guide-summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--table-head-ink);
    background: color-mix(in srgb, var(--accent) 8%, var(--table-head));
    border-bottom: 1px solid transparent;
}

.workflows-page__guide[open] > .workflows-page__guide-summary {
    border-bottom-color: var(--border);
}

.workflows-page__guide-summary::-webkit-details-marker {
    display: none;
}

.workflows-page__guide-summary::after {
    content: "";
    float: right;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.workflows-page__guide[open] > .workflows-page__guide-summary::after {
    transform: rotate(-135deg);
    margin-top: 8px;
}

.workflows-page__guide-body {
    padding: 14px 16px 16px;
}

.workflows-page__guide-intro {
    margin: 0 0 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
}

.workflows-page__guide-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    background: var(--card-soft);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.workflows-page__guide-flow span {
    color: var(--ink);
}

.workflows-page__guide-flow .workflows-page__guide-arrow {
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
    font-weight: 800;
}

.workflows-page__guide-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workflows-page__guide-steps > li {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
}

.workflows-page__guide-steps > li.is-done {
    border-color: color-mix(in srgb, #22c55e 35%, var(--border));
    background: color-mix(in srgb, #22c55e 6%, var(--card));
}

.workflows-page__guide-step-title {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.3;
}

.workflows-page__guide-step-num {
    display: inline-block;
    min-width: 1.35rem;
    margin-right: 0.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.workflows-page__guide-steps > li.is-done .workflows-page__guide-step-num::after {
    content: " ✓";
    font-size: 0.78rem;
    color: #1a6b3c;
    font-weight: 800;
}

html[data-theme="dark"] .workflows-page__guide-steps > li.is-done .workflows-page__guide-step-num::after,
body[data-theme="dark"] .workflows-page__guide-steps > li.is-done .workflows-page__guide-step-num::after {
    color: #86efac;
}

.workflows-page__section-summary .workflows-page__guide-step-num,
.workflows-page__section-head .workflows-page__guide-step-num {
    font-size: 0.98rem;
}

.workflows-page__guide-step-text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--muted);
}

.workflows-page__guide-step-text strong {
    color: var(--ink);
    font-weight: 650;
}

.workflows-page__guide-footer {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
}

.workflows-page__guide-footer a {
    font-weight: 650;
}

.workflows-page__picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--border);
}

.workflows-page__picker-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
    background: var(--card-soft);
    border: 1px solid var(--border);
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.workflows-page__picker-link:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.workflows-page__picker-link.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.workflows-page__picker-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--card);
    color: var(--muted);
}

.workflows-page__picker-link.is-active .workflows-page__picker-count {
    color: var(--accent);
}

.workflows-page__pipeline {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.workflows-page__pipeline-step {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.workflows-page__pipeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 72px;
    text-align: center;
}

.workflows-page__pipeline-seq {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--card);
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.workflows-page__pipeline-seq.is-terminal {
    border-color: color-mix(in srgb, #f59e0b 50%, var(--border));
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 12%, var(--card));
}

html[data-theme="dark"] .workflows-page__pipeline-seq.is-terminal,
body[data-theme="dark"] .workflows-page__pipeline-seq.is-terminal {
    color: #fbbf24;
}

.workflows-page__pipeline-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    max-width: 88px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflows-page__pipeline-connector {
    width: 24px;
    height: 2px;
    background: var(--border);
    flex-shrink: 0;
}

.workflows-page__table-wrap tbody tr.is-selected {
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.workflows-page__table-wrap tbody tr.is-selected:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.workflows-page__subheading {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
}

.workflows-page__context-note {
    margin: 0 0 12px;
    font-size: 0.84rem;
    color: var(--muted);
}

/* ---------- Agencies (agencies.php) — uses users-page shell ---------- */
.agencies-page__subhead {
    margin: 16px 0 8px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--table-head-ink);
}

.agencies-page__mini-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card);
}

.agencies-page__mini-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.86rem;
}

.agencies-page__mini-list li:last-child {
    border-bottom: none;
}

.agencies-page__mini-list li:hover {
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.agencies-page__quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Users management (users.php) ---------- */
.users-page {
    margin: 0 0 8px;
    max-width: 100%;
    min-width: 0;
}

.users-page__main {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.2vw, 26px);
    min-width: 0;
    max-width: 100%;
}

.users-page__workspace {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
}

.users-page__workspace--with-aside {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
    .users-page__workspace--with-aside {
        grid-template-columns: minmax(0, 1fr) minmax(300px, min(38vw, 420px));
    }
}

.users-page__aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    container-type: inline-size;
    container-name: users-aside;
}

@media (min-width: 1100px) {
    .users-page__aside {
        position: sticky;
        top: 12px;
        max-height: calc(100vh - 24px);
        overflow-x: clip;
        overflow-y: auto;
        padding-right: 2px;
    }
}

/* Side panel is ~300–420px: stack fields by container width, not viewport */
@container users-aside (max-width: 520px) {
    .users-page__panel,
    .users-page__panel-body,
    .users-page__manage-form {
        min-width: 0;
        max-width: 100%;
    }

    .users-page__panel-head {
        flex-wrap: wrap;
    }

    .form-row,
    .form-row--2,
    .form-row--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-row > * {
        min-width: 0;
    }

    .users-data-access__modes {
        grid-template-columns: minmax(0, 1fr);
    }

    .users-data-access__check-grid,
    .users-page__role-assign-list--simple {
        grid-template-columns: minmax(0, 1fr);
    }

    .users-page__view-dl--grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .users-page__reset-form--inline {
        flex-direction: column;
        align-items: stretch;
    }

    .users-page__reset-form--inline .users-page__reset-field {
        flex: 1 1 auto;
        max-width: none;
    }
}

.users-page__hero {
    margin: 0 0 16px;
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--card-soft) 0%, var(--card) 55%, color-mix(in srgb, var(--accent) 12%, transparent) 100%);
    box-shadow: var(--panel-shadow);
}

.users-page__hero--premium {
    margin-bottom: clamp(14px, 2vw, 20px);
    padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 28px);
    border-radius: 18px;
    background:
        radial-gradient(1200px 400px at 100% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
        radial-gradient(800px 280px at -5% 110%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 50%),
        linear-gradient(155deg, var(--card-soft) 0%, var(--card) 48%, color-mix(in srgb, var(--accent) 10%, var(--card-soft)) 100%);
    box-shadow:
        var(--panel-shadow),
        0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset;
}

.users-page__hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 20px;
}

.users-page__hero-inner--premium {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(16px, 2.2vw, 22px);
}

.users-page__hero-text {
    flex: 1 1 200px;
    min-width: 0;
}

.users-page__hero-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.users-page__stat--compact {
    flex: 0 1 auto;
    min-width: 4.5rem;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.users-page__stat--compact .users-page__stat-value {
    font-size: 1.15rem;
    margin: 0;
    line-height: 1.15;
}

.users-page__stat--compact .users-page__stat-label {
    margin-top: 2px;
    font-size: 0.65rem;
}

.users-page__hero-cta {
    flex: 0 0 auto;
    align-self: center;
}

.users-page__hero--premium .users-page__title {
    margin-bottom: 6px;
    font-size: clamp(1.35rem, 2.6vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.users-page__hero--premium .users-page__lede {
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 38rem;
}

.users-page__hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 20px;
}

.users-page__hero--premium .users-page__hero-top {
    align-items: center;
}

.users-page__hero--premium .users-page__hero-cta {
    align-self: flex-start;
}

.users-page__stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 960px) {
    .users-page__stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .users-page__stat-grid {
        grid-template-columns: 1fr;
    }
}

.users-page__stat-tile {
    position: relative;
    margin: 0;
    padding: 14px 16px 14px 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 92%, var(--accent));
    background: color-mix(in srgb, var(--card) 92%, var(--card-soft));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 5.5rem;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.users-page__stat-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--accent);
}

.users-page__stat-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
}

.users-page__stat-tile .users-page__stat-value {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 1.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.users-page__stat-tile .users-page__stat-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.users-page__stat-tile--total::before {
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent-2) 65%, var(--accent)));
}

.users-page__stat-tile--total .users-page__stat-value {
    color: var(--ink);
}

.users-page__stat-tile--active::before {
    background: linear-gradient(180deg, #1a6b3c, #2d9d5c);
}

.users-page__stat-tile--active {
    background: color-mix(in srgb, #eafbf1 55%, var(--card));
    border-color: color-mix(in srgb, #9fdcb8 55%, var(--border));
}

.users-page__stat-tile--active .users-page__stat-value {
    color: #145a32;
}

.users-page__stat-tile--inactive::before {
    background: linear-gradient(180deg, var(--muted), color-mix(in srgb, var(--muted) 70%, var(--ink)));
}

.users-page__stat-tile--inactive {
    background: color-mix(in srgb, var(--card-soft) 65%, var(--card));
}

.users-page__stat-tile--locked::before {
    background: linear-gradient(180deg, #b91c1c, #dc2626);
}

.users-page__stat-tile--locked {
    background: color-mix(in srgb, var(--color-danger, #b91c1c) 9%, var(--card));
    border-color: color-mix(in srgb, var(--color-danger, #b91c1c) 22%, var(--border));
}

.users-page__stat-tile--locked .users-page__stat-value {
    color: color-mix(in srgb, var(--color-danger, #b91c1c) 88%, var(--ink));
}

html[data-theme="dark"] .users-page__stat-tile--active,
body[data-theme="dark"] .users-page__stat-tile--active {
    background: color-mix(in srgb, #173626 45%, var(--card));
    border-color: color-mix(in srgb, #2d7a4b 45%, var(--border));
}

html[data-theme="dark"] .users-page__stat-tile--active .users-page__stat-value,
body[data-theme="dark"] .users-page__stat-tile--active .users-page__stat-value {
    color: #b9f5d0;
}

html[data-theme="dark"] .users-page__stat-tile--locked .users-page__stat-value,
body[data-theme="dark"] .users-page__stat-tile--locked .users-page__stat-value {
    color: #fca5a5;
}

.users-page__eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.users-page__title {
    margin: 0 0 8px;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--ink);
}

.users-page__lede {
    margin: 0;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--muted);
}

.users-page__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 700;
    border-radius: 10px;
}

.users-page__cta svg {
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.users-page__hero--premium .users-page__cta {
    padding: 11px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.users-page__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.users-page__stat {
    flex: 1 1 120px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.users-page__stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
}

.users-page__stat-label {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.users-page__alerts {
    margin-bottom: 16px;
}

.users-page__alerts .alert:last-child {
    margin-bottom: 0;
}

.users-page__section {
    margin-bottom: 28px;
}

.users-page__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.users-page__section-head--tight {
    margin-bottom: 8px;
    align-items: center;
}

.users-page__section--directory {
    margin-bottom: 0;
    min-width: 0;
    max-width: 100%;
}

.users-page__directory-card {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 94%, var(--accent));
    background: color-mix(in srgb, var(--card-soft) 35%, var(--card));
    box-shadow: var(--panel-shadow);
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.users-page__directory-card-head {
    padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 22px) clamp(12px, 1.5vw, 14px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, transparent), var(--card));
}

/* Directory toolbar: quick find + export */
.users-page__toolbar {
    padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.2vw, 22px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--card-soft) 22%, var(--card));
}

.users-page__toolbar-grid {
    display: grid;
    gap: 12px 14px;
    align-items: end;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .users-page__toolbar-grid {
        grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 0.55fr) minmax(8rem, 0.55fr) auto;
    }
}

.users-page__toolbar-field--grow {
    min-width: 0;
}

.users-page__toolbar-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.users-page__toolbar-input,
.users-page__toolbar-select {
    width: 100%;
    font-size: 0.9rem;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
}

.users-page__toolbar-input:focus,
.users-page__toolbar-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.users-page__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    justify-content: flex-end;
}

@media (min-width: 720px) {
    .users-page__toolbar-actions {
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 6px;
    }
}

.users-page__filter-count {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    max-width: 18rem;
    text-align: right;
    line-height: 1.35;
}

.users-page__btn-export:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.users-page__stat-tile--filter {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s ease;
}

.users-page__stat-tile--filter:hover {
    transform: translateY(-2px);
}

.users-page__stat-tile--filter:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 3px;
}

.users-page__stat-tile--filter.is-active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
        0 8px 28px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Sortable column headers */
.users-page__th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
}

.users-page__th-sort:hover {
    color: var(--ink);
}

.users-page__th-sort:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

.users-page__th-sort::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    transform: translateY(1px);
    transition: opacity 0.12s ease;
}

.users-page__th-sort:hover::after {
    opacity: 0.4;
}

.users-page__th-sort.is-sorted-asc::after,
.users-page__th-sort.is-sorted-desc::after {
    opacity: 0.95;
}

.users-page__th-sort.is-sorted-desc::after {
    transform: rotate(180deg) translateY(-1px);
}

.users-page__th-static {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
}

.users-page__directory-card-head .users-page__section-head {
    margin-bottom: 0;
}

.users-page__directory-card-head .users-page__heading {
    font-size: 1.12rem;
    letter-spacing: -0.01em;
}

.users-page__heading {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.users-page__section-hint {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
    max-width: 36rem;
}

.users-page__section-head--tight .users-page__section-hint {
    font-size: 0.8rem;
    max-width: none;
}

.users-page__kbd--inline {
    font-size: 0.72rem;
    padding: 1px 5px;
}

.users-page__table-wrap {
    overflow-x: auto;
    margin-top: 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 2px 14px rgba(69, 43, 93, 0.05);
}

.users-page__directory-card .users-page__table-wrap {
    margin: 0;
    border: none;
    border-radius: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
    box-shadow: none;
    background: var(--card);
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}

.users-page__directory-card .users-page__table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
}

.users-page__directory-card .users-page__table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    background: linear-gradient(180deg, var(--table-head), color-mix(in srgb, var(--table-head) 85%, var(--card)));
    border-bottom: 1px solid var(--border);
}

.users-page__directory-card .users-page__table-wrap tbody tr {
    transition: background 0.15s ease;
}

.users-page__directory-card .users-page__table-wrap tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.users-page__directory-card .users-page__table-wrap tbody tr.users-page__tree-office-row:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--table-head));
}

.users-page__tree-office-row {
    background: color-mix(in srgb, var(--table-head) 55%, var(--card));
}

.users-page__tree-office-cell {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.users-page__tree-office-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.users-page__tree-office-inner--root {
    padding-left: 2px;
}

.users-page__tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 70%, transparent);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
}

.users-page__tree-toggle:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.users-page__tree-chevron {
    display: inline-block;
    font-size: 0.65rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.users-page__tree-office-row.is-collapsed .users-page__tree-chevron {
    transform: rotate(-90deg);
}

.users-page__tree-office-label {
    font-weight: 700;
    color: var(--ink);
}

.users-page__tree-office-meta {
    font-size: 0.78rem;
    color: var(--muted);
}

.users-page__tree-office-row--unassigned .users-page__tree-office-label {
    font-style: italic;
}

.users-page__tree-user-name .users-page__name-cell {
    min-width: 0;
}

.users-page__table-wrap table {
    margin-top: 0;
    font-size: 0.88rem;
    min-width: 52rem;
}

.users-page__workspace--with-aside .users-page__table-wrap table {
    min-width: 44rem;
}

@media (min-width: 1100px) {
    .users-page__workspace--with-aside .users-page__toolbar {
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .users-page__workspace--with-aside .users-page__toolbar-grid {
        grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.5fr) minmax(6.5rem, 0.5fr) auto;
        gap: 10px 12px;
        min-width: min(100%, 52rem);
    }
}

.users-page__table-wrap th,
.users-page__table-wrap td {
    padding: 8px 10px;
    vertical-align: middle;
}

.users-page__table-wrap th:first-child,
.users-page__table-wrap td:first-child {
    padding-left: 16px;
}

.users-page__table-wrap th:last-child,
.users-page__table-wrap td:last-child {
    padding-right: 16px;
}

.users-page__th-actions,
.users-page__td-actions {
    width: 1%;
    min-width: 3.25rem;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--card);
    box-shadow: -6px 0 10px -8px rgba(45, 36, 53, 0.35);
}

.users-page__directory-card .users-page__table-wrap thead th.users-page__th-actions {
    z-index: 3;
    background: linear-gradient(180deg, var(--table-head), color-mix(in srgb, var(--table-head) 85%, var(--card)));
}

.users-page__directory-card .users-page__table-wrap tbody tr:hover .users-page__td-actions {
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
}

.users-page__directory-card .users-page__table-wrap tbody tr.users-page__row--current .users-page__td-actions {
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.users-page__mono {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--table-head) 70%, var(--card));
    border: 1px solid var(--border);
}

.users-page__muted {
    color: var(--muted);
}

.users-page__you-badge {
    font-size: 0.65rem;
    margin-left: 6px;
    vertical-align: middle;
}

.users-page__roles-cell {
    max-width: 14rem;
    line-height: 1.4;
}

.users-page__login-cell {
    white-space: nowrap;
}

.users-page__row--current {
    background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.users-page__empty {
    padding: 22px 16px !important;
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
}

.users-page__actions-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ⋮ trigger — square so it aligns cleanly in the row */
.users-page__action-menu-trigger {
    margin: 0;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
}

.users-page__action-menu-trigger svg {
    display: block;
}

/* Popover escapes `.users-page__table-wrap { overflow-x: auto }` clipping.
   Coordinates are set from JS (invokers do not auto-anchor in all engines). */
.users-page__action-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--panel-shadow);
    min-width: min(13.5rem, calc(100vw - 24px));
    max-height: min(70vh, calc(100vh - 16px));
    overflow-y: auto;
    box-sizing: border-box;
}

.users-page__action-popover::backdrop {
    background: rgba(45, 36, 53, 0.14);
}

html[data-theme="dark"] .users-page__action-popover::backdrop,
body[data-theme="dark"] .users-page__action-popover::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.users-page__action-popover-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.users-page__menu-form {
    margin: 0;
    padding: 0;
    border: 0;
}

.users-page__menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s ease;
}

.users-page__menu-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.users-page__menu-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.users-page__menu-ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    color: var(--muted);
}

.users-page__menu-item:hover .users-page__menu-ico {
    color: inherit;
}

.users-page__menu-ico svg {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.users-page__menu-lbl {
    flex: 1;
    min-width: 0;
}

.users-page__menu-item--warn .users-page__menu-lbl {
    color: var(--action-warn);
}

.users-page__menu-item--danger .users-page__menu-lbl {
    color: var(--color-danger, #b91c1c);
}

.users-page__menu-item--danger:hover {
    background: color-mix(in srgb, var(--color-danger, #b91c1c) 12%, var(--card));
}

.users-page__act--danger {
    color: var(--color-danger, #b91c1c) !important;
    border: 1px solid color-mix(in srgb, var(--color-danger, #b91c1c) 35%, var(--border)) !important;
    background: color-mix(in srgb, var(--color-danger, #b91c1c) 6%, var(--card)) !important;
}

.users-page__act--danger:hover {
    background: color-mix(in srgb, var(--color-danger, #b91c1c) 14%, var(--card)) !important;
}

.users-page__act--warn {
    color: color-mix(in srgb, var(--color-danger, #b91c1c) 75%, var(--ink)) !important;
}

.users-page__panel {
    margin-bottom: 24px;
    border-radius: 14px;
    border-left: 3px solid var(--accent);
    box-shadow: var(--panel-shadow);
}

.users-page__panel--manage {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--accent);
}

.users-page__panel-head--compact {
    margin-bottom: 12px;
}

.users-page__panel-head--compact .users-page__panel-title {
    font-size: 1.05rem;
}

.users-page__manage-form .form-row--3 {
    margin-bottom: 10px;
}

.users-page__manage-form .form-row > * {
    min-width: 0;
}

.users-page__roles-block {
    margin-bottom: 12px;
}

.users-page__roles-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.88rem;
}

.users-page__roles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.users-page__role-check {
    margin: 0 !important;
}

.users-page__manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.users-page__reset-form--inline {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
}

.users-page__reset-form--inline .users-page__reset-field {
    flex: 1 1 180px;
    max-width: 100%;
}

.users-page__panel--view {
    border-left-color: color-mix(in srgb, var(--muted) 55%, var(--accent));
    margin-bottom: 0;
}

.users-page__view-dl {
    display: grid;
    grid-template-columns: minmax(0, 8rem) 1fr;
    gap: 8px 16px;
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.users-page__view-dl--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-bottom: 12px;
}

@media (max-width: 420px) {
    .users-page__view-dl--grid {
        grid-template-columns: 1fr;
    }
}

.users-page__vf {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-soft) 80%, var(--card));
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.users-page__vf--full {
    grid-column: 1 / -1;
}

.users-page__view-dl--grid dt {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.users-page__view-dl--grid dd {
    margin: 0;
    font-size: 0.86rem;
    color: var(--ink);
    line-height: 1.35;
    word-break: break-word;
}

.users-page__view-dl dt {
    margin: 0;
    font-weight: 700;
    color: var(--muted);
}

.users-page__view-dl dd {
    margin: 0;
    color: var(--ink);
    min-width: 0;
}

.users-page__view-actions {
    margin: 0;
    padding-top: 4px;
}

.users-page__btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.users-page__btn-with-icon svg {
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.users-page__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.users-page__panel-head--with-avatar {
    align-items: center;
}

.users-page__panel-name {
    flex: 1 1 auto;
    min-width: 0;
}

.users-page__panel-name-text {
    min-width: 0;
}

.users-page__panel-head--with-avatar .users-page__panel-eyebrow {
    margin-bottom: 4px;
}

.users-page__avatar--lg {
    width: 48px;
    height: 48px;
}

.users-page__avatar--lg .users-page__avatar-initials {
    font-size: 0.9rem;
}

.users-page__panel-eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.users-page__panel-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
}

.users-page__hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.users-page__subheading {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.users-page__reset-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
}

.users-page__reset-field {
    flex: 1 1 220px;
    min-width: min(220px, 100%);
}

.users-page__reset-field input {
    width: 100%;
    max-width: 320px;
}

.users-page__create {
    margin-top: 4px;
    margin-bottom: 8px;
}

.users-page__create--premium {
    padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--card)) 0%, var(--card) 100%);
    box-shadow: var(--panel-shadow);
}

.users-page__create--premium .users-page__create-summary {
    padding-top: 2px;
    font-size: 1.06rem;
    letter-spacing: -0.015em;
}

.users-page__role-assign-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 720px) {
    .users-page__role-assign-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .users-page__role-assign-list {
        grid-template-columns: 1fr;
    }
}

.users-page__role-assign-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--card) 94%, var(--card-soft));
}

.users-page__role-assign-check {
    margin: 0 !important;
    flex: 1 1 160px;
}

.users-page__role-scope-select {
    min-width: 11rem;
}

.users-page__roles-grid--stack {
    flex-direction: column;
    gap: 10px;
}

.users-page__create-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    padding: 6px 0;
    list-style: none;
}

.users-page__create-summary::-webkit-details-marker {
    display: none;
}

.users-page__create-summary::before {
    content: "+";
    display: inline-block;
    width: 1.25em;
    font-weight: 800;
    color: var(--accent);
}

.users-page__create[open] .users-page__create-summary::before {
    content: "−";
}

.users-page__create-form {
    margin-top: 16px;
}

.users-page__create-hint {
    margin-top: 10px;
    color: var(--muted);
}

.users-page__name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.users-page__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent));
    background: color-mix(in srgb, var(--table-head) 35%, var(--card));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.users-page__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.users-page__avatar-initials {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--table-head-ink);
    line-height: 1;
}

.users-page__name-text {
    min-width: 0;
}

.users-page__name-text strong {
    font-weight: 700;
}

.users-page__act--delete {
    color: color-mix(in srgb, var(--color-danger, #b91c1c) 88%, var(--ink)) !important;
}

.users-page__act--delete:hover {
    color: var(--color-danger, #b91c1c) !important;
}

.users-page__delete-dialog-body p {
    margin: 0 0 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted);
}

.users-page__delete-dialog-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
}

.users-page__kbd {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    background: var(--card-soft);
    border: 1px solid var(--border);
}

.users-page__delete-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.users-page dialog.rcmms-dialog {
    max-width: min(440px, 94vw);
    margin: auto;
    border: none;
    padding: 0;
}

.users-page dialog.rcmms-dialog::backdrop {
    background: rgba(20, 12, 32, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

html[data-theme="dark"] .users-page dialog.rcmms-dialog::backdrop,
body[data-theme="dark"] .users-page dialog.rcmms-dialog::backdrop {
    background: rgba(0, 0, 0, 0.58);
}

.users-page dialog.rcmms-dialog form {
    padding: 18px 20px 16px;
}

.users-page dialog.rcmms-dialog.users-page__create-dialog {
    max-width: min(720px, 96vw);
    width: 100%;
    max-height: min(92vh, 880px);
    overflow: hidden;
}

.users-page dialog.rcmms-dialog.users-page__create-dialog form.users-page__create-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(92vh, 880px);
    margin-top: 0;
    box-sizing: border-box;
}

.users-page__create-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.users-page__create-dialog-title {
    margin: 0;
    flex: 1 1 auto;
}

.users-page__create-dialog-body {
    white-space: normal;
    margin: 8px 0 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.users-page__create-dialog-footer {
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    gap: 0;
    margin: 0;
}

.users-page__create-dialog-footer .btn {
    align-self: flex-start;
}

.users-page__create-dialog-footer .users-page__create-hint {
    margin-top: 10px;
}

.users-page dialog.rcmms-dialog.users-page__celebrate-dialog {
    max-width: min(400px, 92vw);
    padding: 0;
}

.users-page__celebrate-inner {
    padding: 28px 24px 22px;
    text-align: center;
}

.users-page__celebrate-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-success, #16a34a) 16%, var(--card-soft));
    color: var(--color-success, #15803d);
}

.users-page__celebrate-icon svg {
    width: 28px;
    height: 28px;
}

.users-page__celebrate-title {
    margin: 0 0 10px;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.users-page__celebrate-lede {
    margin: 0 0 8px;
    line-height: 1.45;
    font-size: 0.95rem;
}

.users-page__celebrate-sub {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.users-page__celebrate-actions .btn {
    min-width: 9rem;
}

.users-page__office-combo {
    position: relative;
    width: 100%;
}

.users-page__office-combo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.92rem;
}

.users-page__office-combo-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--input-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.users-page__office-combo-list {
    position: fixed;
    z-index: 10001;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--panel-shadow), 0 16px 40px rgba(20, 12, 32, 0.12);
    -webkit-overflow-scrolling: touch;
}

.users-page__office-combo-opt {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", monospace;
    font-size: 0.88rem;
    cursor: pointer;
    color: inherit;
}

/* Align UTF-8 tree guides (├── └── │) in native office <select>s */
#users-dir-office,
#edit-user-section select[name="office_id"],
.users-page__role-scope-select {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", monospace;
    font-size: max(0.85rem, 0.92em);
}

.users-page__office-combo-opt:hover,
.users-page__office-combo-opt:focus {
    background: color-mix(in srgb, var(--accent) 10%, var(--card-soft));
    outline: none;
}

html[data-theme="dark"] .users-page__office-combo-list,
body[data-theme="dark"] .users-page__office-combo-list {
    box-shadow: var(--panel-shadow), 0 16px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .users-page__row--current,
body[data-theme="dark"] .users-page__row--current {
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

html[data-theme="dark"] .users-page__stat,
body[data-theme="dark"] .users-page__stat {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border-color: var(--border);
}

/* User data access (office scope) */
.users-data-access {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-soft) 40%, var(--card));
}

.users-data-access__legend {
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0 0.35rem;
}

.users-data-access__intro {
    margin: 0.35rem 0 0.85rem;
    color: var(--muted);
    line-height: 1.45;
}

.users-data-access__modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.users-data-access__mode {
    display: block;
    cursor: pointer;
}

.users-data-access__mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.users-data-access__mode-card {
    display: block;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.users-data-access__mode input:checked + .users-data-access__mode-card {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.users-data-access__mode-title {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.25rem;
}

.users-data-access__mode-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

.users-data-access__offices-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.users-data-access__offices-actions {
    display: flex;
    gap: 0.35rem;
}

.users-data-access__check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.35rem 0.75rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--card);
}

.users-data-access__check {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.84rem;
    line-height: 1.3;
}

.users-page__role-assign-list--simple {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.35rem 0.75rem;
}

.users-page__role-check--solo {
    padding: 0.35rem 0;
}

@media (max-width: 900px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

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

    .setup-shell {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: stretch;
        gap: 12px;
        flex-direction: column;
    }

    .topbar.sticky-header {
        margin: -2px -6px 12px -6px;
        padding: 6px 12px 14px;
    }

    .topbar-left {
        width: 100%;
    }

    .profile {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .topbar-tools {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
    }

    .user-trigger {
        min-width: min(200px, 55vw);
        max-width: none;
    }
}

/* Inline fixed-column card grids → auto-fit to viewport (font size unchanged) */
.content .grid[style*="repeat(4"],
.content .grid[style*="repeat(3"],
.planning-dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rcmms-card-grid-min)), 1fr)) !important;
}

/* Narrow desktop (~≤1280px): tighter card columns only, not smaller text */
@media (min-width: 901px) and (max-width: 1280px) {
    :root {
        --rcmms-card-grid-min: clamp(7.5rem, 14vw, 9.5rem);
        --rcmms-sidebar-w: clamp(200px, 16vw, 232px);
    }
}