/**
 * Modern CSS Stylesheet - Mobile First Adaptive Navigation
 * Using CSS Layers, Container Queries, and fluid typography
 *
 * IMPORTANT: This file requires tokens.css to be loaded first.
 * Design tokens (CSS variables) are defined in tokens.css.
 *
 * Navigation pattern:
 * - Mobile (< 768px): Drawer sidebar (hamburger menu)
 * - Tablet (768px - 1024px): Mini sidebar (icons only) + header
 * - Desktop (> 1024px): Full sidebar (icons + labels) + header
 *
 * Browser support:
 * - CSS Layers: 90%+ (2025)
 * - Container Queries: 90%+ (2025)
 * - light-dark(): 87%+ (2025) with fallback in tokens.css
 * - clamp(): 95%+ (2025)
 */

/* ==========================================================================
   CSS Layers - Define cascade order
   ========================================================================== */
@layer base, layout, components, utilities;

/* ==========================================================================
   Base Layer - Reset and typography
   Design tokens are defined in tokens.css
   ========================================================================== */
@layer base {
    /* Reset */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* Enforce [hidden] over author stylesheets that set display:flex/grid/etc.
       Allows using the native HTML hidden attribute instead of inline style="display:none". */
    [hidden] {
        display: none !important;
    }

    /* Base typography with fluid sizing */
    html {
        font-size: var(--font-size-base, 16px);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
        color: var(--color-text);
        background-color: var(--color-bg);
        font-feature-settings: var(--font-features);
        transition: background-color var(--duration-normal) var(--ease-standard),
                    color var(--duration-normal) var(--ease-standard);
    }

    /* Numerical contexts use tabular figures for column alignment.
       Suffix selectors cover module-prefixed value classes (e.g.
       .bc-widget-stat-value, .drawer-kpi-value) without forcing every
       module to opt in manually. */
    .tabular-nums,
    .admin-table td,
    .table td,
    input[type="number"],
    .amount,
    .number,
    .kpi-value, [class$="-kpi-value"],
    .stat-value, [class$="-stat-value"],
    code, kbd, samp, pre {
        font-variant-numeric: tabular-nums;
    }

    code, kbd, samp, pre {
        font-family: var(--font-mono);
    }

    /* Heading scale — negative tracking at larger sizes (modern standard) */
    h1 {
        font-size: var(--text-2xl);
        font-weight: 650;
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
    }

    h2 {
        font-size: var(--text-xl);
        font-weight: 600;
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
    }

    h3 {
        font-size: var(--text-lg);
        font-weight: 600;
        line-height: var(--leading-snug);
    }

    h4 {
        font-size: var(--text-md);
        font-weight: 600;
        line-height: var(--leading-snug);
    }

    /* Links — inline copy links get a soft underline + slightly stronger
       weight so they remain findable on dense pages. Link-like buttons
       (.btn, .btn-link, .nav-item, etc.) opt out explicitly. */
    a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 550;
    }

    a:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* Reset link styling for elements that are structurally links but
       visually something else (buttons, nav items, cards acting as links). */
    a.btn,
    a.nav-item,
    a.sidebar-utility-item,
    a.sidebar-logo,
    a.card,
    a[class*="-btn"],
    a[class*="-card"] {
        font-weight: inherit;
    }

    /* Content lists - proper styling for ul/ol in content areas */
    :is(.card-body, .backup-card-body, .alert, .modal-body) :is(ul, ol):not([class]) {
        padding-left: var(--space-lg);
        margin: var(--space-sm) 0;
    }

    :is(.card-body, .backup-card-body, .alert, .modal-body) ul:not([class]) {
        list-style-type: disc;
    }

    :is(.card-body, .backup-card-body, .alert, .modal-body) ol:not([class]) {
        list-style-type: decimal;
    }

    :is(.card-body, .backup-card-body, .alert, .modal-body) :is(ul, ol):not([class]) li {
        margin-bottom: var(--space-xs);
        line-height: 1.5;
    }

    /* Focus ring — double-layer pattern (readable on any background).
       Box-shadow inherits the element's own border-radius so it hugs
       pills, cards, and default-shaped elements alike. */
    :focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    /* Skip-link keeps the outline pattern for maximum visibility when
       appearing over arbitrary content at the top of the viewport. */
    .skip-link:focus,
    .skip-link:focus-visible {
        outline: 2px solid var(--color-text-inverted);
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* ==========================================================================
   Layout Layer - Page structure and containers (Mobile First)
   ========================================================================== */
@layer layout {
    /* App layout - Mobile first (no sidebar visible).
       Uses 100svh (small viewport height) rather than 100dvh: in a Chrome 135+
       Android edge-to-edge PWA the dynamic value animates with the gesture-bar
       chin, which throttles below 60fps and reflows the inner scroll
       container — leaving the last list item clipped. svh is stable. In
       PWA standalone mode the small/dynamic/large values are equal, so
       there is no wasted space; in browser-tab mode we trade a few pixels
       for layout stability. */
    .app-layout {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100svh;
        overflow: hidden;
    }

    /* ==========================================================================
       App Header
       ========================================================================== */
    /* The header reserves space for the system status bar via padding-top
       (rather than top:env(...)) so the elevated background still paints
       edge-to-edge under the status bar — matching the iOS / Android
       Material 3 expectation. */
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) var(--space-md) 0;
        background-color: var(--color-bg-elevated);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        z-index: var(--z-sticky);
        box-shadow: var(--shadow-sm);
    }

    .header-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-target);
        height: var(--touch-target);
        background: none;
        border: none;
        color: var(--color-text);
        cursor: pointer;
        border-radius: var(--radius-md);
        transition: background-color var(--transition-fast);
        flex-shrink: 0;
    }

    .header-menu-toggle:hover {
        background-color: var(--color-bg-subtle);
    }

    .header-logo {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        text-decoration: none;
        color: var(--color-text);
        font-weight: 600;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .header-logo:hover {
        text-decoration: none;
    }

    .header-logo-image {
        height: 32px;
        width: auto;
    }

    /* ==========================================================================
       Sidebar - Hidden on mobile, drawer behavior
       ========================================================================== */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-width-full);
        background-color: var(--sidebar-bg);
        color: var(--sidebar-text);
        display: flex;
        flex-direction: column;
        z-index: var(--z-sidebar);
        transform: translateX(-100%);
        transition: transform var(--transition-normal), width var(--transition-normal);
        overflow: hidden;
    }

    .sidebar.open {
        transform: translateX(0);
        /* Allow dropdowns to overflow sidebar bounds (user menu) */
        overflow: visible;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background-color: rgb(0 0 0 / 0.5);
        z-index: var(--z-sidebar-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-normal), visibility var(--transition-normal);
    }

    .sidebar.open ~ .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* The drawer container itself stays edge-to-edge so its background paints
       under the system status / gesture bars. Inner regions (header / nav)
       carry the safe-area padding instead, matching iOS Mail / Material 3
       drawers. */
    .sidebar-header {
        padding: calc(var(--space-md) + env(safe-area-inset-top, 0px)) var(--space-lg) var(--space-md);
        border-bottom: 1px solid var(--sidebar-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
        flex-shrink: 0;
    }

    .sidebar-logo {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        text-decoration: none;
        color: var(--sidebar-text-active);
        overflow: hidden;
    }

    .sidebar-logo:hover {
        text-decoration: none;
    }

    .sidebar-logo-text {
        font-size: 1.125rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Sidebar toggle (hamburger) - hidden on mobile (header hamburger handles it) */
    .sidebar-toggle {
        display: none;
    }

    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-target);
        height: var(--touch-target);
        background: none;
        border: none;
        color: var(--sidebar-text);
        cursor: pointer;
        border-radius: var(--radius-md);
        flex-shrink: 0;
    }

    .sidebar-close:hover {
        background-color: var(--sidebar-hover);
        color: var(--sidebar-text-hover);
    }

    /* Admin context visual indicator - sidebar left border */
    .sidebar.admin-context {
        border-left: 3px solid var(--color-warning);
    }

    .sidebar-nav {
        flex: 1;
        padding: var(--space-md) 0;
        overflow-y: auto;
        overflow-x: hidden;
        /* Theme-aware scrollbar — the previous fixed white-rgba was
           invisible on the light-mode white sidebar. */
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
        /* Ensure workspace dropdown appears above nav items */
        position: relative;
        z-index: 0;
    }

    /* Custom scrollbar - Webkit (Chrome, Safari, Edge) */
    .sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background-color: var(--color-border);
        border-radius: 3px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-border-strong);
    }

    /* Hide scrollbar thumb until the user hovers the nav (reveal on intent) */
    .sidebar-nav:not(:hover)::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    .sidebar-nav:not(:hover) {
        scrollbar-color: transparent transparent;
    }

    .nav-section {
        margin-bottom: var(--space-md);
    }

    /* Section header button (collapsible) */
    .nav-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-sm) var(--space-lg);
        background: none;
        border: none;
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }

    .nav-section-header:hover {
        background-color: var(--sidebar-hover);
    }

    .nav-section-header:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .nav-section-title {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--sidebar-text);
        opacity: 0.6;
        white-space: nowrap;
        overflow: hidden;
        /* Remove padding - now handled by parent button */
        padding: 0;
    }

    .nav-section-chevron {
        flex-shrink: 0;
        color: var(--sidebar-text);
        opacity: 0.5;
        transition: transform var(--transition-fast), opacity var(--transition-fast);
    }

    .nav-section-header:hover .nav-section-chevron {
        opacity: 0.8;
    }

    /* Collapsed state */
    .nav-section.collapsed .nav-section-chevron {
        transform: rotate(-90deg);
    }

    /* Section items container */
    .nav-section-items {
        overflow: hidden;
    }

    .nav-section.collapsed .nav-section-items {
        max-height: 0;
        overflow: hidden;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: 0.75rem var(--space-lg);
        color: var(--sidebar-text);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: background-color var(--transition-fast), color var(--transition-fast);
        min-height: var(--touch-target);
        position: relative;
        white-space: nowrap;
        overflow: hidden;
    }

    .nav-item:hover {
        background-color: var(--sidebar-hover);
        color: var(--sidebar-text-hover);
        text-decoration: none;
    }

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

    /* Accent bar on the left edge — signature marker for active item */
    .nav-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.5rem;
        bottom: 0.5rem;
        width: 3px;
        border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
        background-color: var(--sidebar-accent);
    }

    .nav-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
    }

    .nav-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-footer {
        padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--sidebar-border);
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        flex-shrink: 0;
    }

    /* Sidebar utility zone - items above user menu */
    .sidebar-utility {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .sidebar-utility-item {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm);
        color: var(--sidebar-text);
        text-decoration: none;
        border-radius: var(--radius-md);
        transition: background-color var(--transition-fast), color var(--transition-fast);
        position: relative;
        min-height: var(--touch-target);
    }

    .sidebar-utility-item:hover {
        background-color: var(--sidebar-hover);
        color: var(--sidebar-text-hover);
    }

    .sidebar-utility-item.active {
        background-color: var(--sidebar-active);
        color: var(--sidebar-text-active);
    }

    .sidebar-utility-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .sidebar-utility-label {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-utility-badge {
        margin-left: auto;
        background-color: var(--color-primary);
        color: #ffffff;
        font-size: 0.6875rem;
        font-weight: 600;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* User menu in sidebar footer - mobile styles */
    .sidebar-footer .user-menu {
        width: 100%;
        margin-left: 0;
    }

    .sidebar-footer .user-menu-trigger {
        width: 100%;
        justify-content: flex-start;
        color: var(--sidebar-text);
        padding: var(--space-sm);
    }

    .sidebar-footer .user-menu-trigger:hover {
        background-color: var(--sidebar-hover);
    }

    .sidebar-footer .user-name {
        display: block;
        color: var(--sidebar-text);
    }

    .sidebar-footer .user-menu-chevron {
        display: block;
        margin-left: auto;
        color: var(--sidebar-text);
    }

    .sidebar-footer .user-menu-dropdown {
        bottom: 100%;
        top: auto;
        left: 0;
        right: auto;
        margin-bottom: var(--space-xs);
    }

    /* ==========================================================================
       Main Content
       ========================================================================== */
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        /* Match the .app-header total height so content begins below the
           fixed header AND the system status bar inset on PWA edge-to-edge. */
        margin-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
        min-width: 0;
        min-height: 0;
    }

    /* The scroll container reserves the system gesture-bar inset upfront via
       env(safe-area-max-inset-bottom): the static maximum value (Chrome 135+,
       falls back to safe-area-inset-bottom on older browsers) avoids the
       layout reflow that the dynamic inset triggers as the chin retracts on
       scroll — which was clipping the last list item.
       scroll-padding-* keeps focused elements clear of the fixed header
       and the gesture bar (WCAG 2.2 SC 2.4.11 "Focus Not Obscured", AA).
       overscroll-behavior-y: contain stops scroll-chaining into parent
       containers (sidebar drawer, modals). */
    .content-body {
        flex: 1;
        padding: var(--space-md);
        padding-bottom: calc(var(--space-md) + env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px)));
        scroll-padding-top: var(--header-height);
        scroll-padding-bottom: calc(var(--space-md) + env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px)));
        overflow-y: auto;
        overscroll-behavior-y: contain;
        min-height: 0;
        container-type: inline-size;
    }

    /* ==========================================================================
       Content Top Bar - Slot for in-flow global widgets (e.g. notification bell)
       Rendered above content-body within main-content flex column.
       ========================================================================== */
    .content-top-bar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-sm);
        /* Mobile: overlay on header (right side where user-menu is hidden).
           Aligns with .app-header which now reserves safe-area-inset-top. */
        position: fixed;
        top: env(safe-area-inset-top, 0px);
        right: var(--space-md);
        height: var(--header-height);
        padding: 0;
        z-index: var(--z-sticky);
        background: none;
        pointer-events: none;
    }

    .content-top-bar > * {
        pointer-events: auto;
    }

    /* Logo in content-top-bar - hidden on mobile (header has its own logo) */
    .content-top-bar-logo {
        display: none;
    }

    /* ==========================================================================
       User Menu (Header)
       ========================================================================== */
    .user-menu {
        position: relative;
        margin-left: auto;
    }

    /* User menu in header - hidden on mobile (use sidebar footer menu instead) */
    .app-header .user-menu {
        display: none;
    }

    .user-menu-trigger {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-xs);
        background: none;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-md);
        transition: background-color var(--transition-fast);
        color: var(--color-text);
        min-height: var(--touch-target);
    }

    .user-menu-trigger:hover {
        background-color: var(--color-bg-subtle);
    }

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

    .user-name {
        display: none;
        font-size: 0.875rem;
        font-weight: 500;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-menu-chevron {
        display: none;
        flex-shrink: 0;
        transition: transform var(--transition-fast);
    }

    .user-menu.open .user-menu-chevron {
        transform: rotate(180deg);
    }

    .user-menu-dropdown {
        position: absolute;
        top: calc(100% + var(--space-xs));
        right: 0;
        min-width: 240px;
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
        z-index: var(--z-dropdown);
    }

    .user-menu.open .user-menu-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .user-menu-header {
        padding: var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }

    .user-menu-name {
        display: block;
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: 2px;
    }

    .user-menu-email {
        display: block;
        font-size: 0.75rem;
        color: var(--color-text-muted);
        word-break: break-all;
    }

    .user-menu-role {
        display: block;
        margin-top: var(--space-xs);
    }

    .user-menu-divider {
        height: 1px;
        background-color: var(--color-border);
    }

    .user-menu-item {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        color: var(--color-text);
        text-decoration: none;
        font-size: 0.875rem;
        min-height: var(--touch-target);
        transition: background-color var(--transition-fast);
        background: none;
        border: none;
        width: 100%;
        cursor: pointer;
        text-align: left;
    }

    .user-menu-item:hover {
        background-color: var(--color-bg-subtle);
        text-decoration: none;
    }

    .user-menu-logout {
        color: var(--color-danger);
    }

    .user-menu-logout:hover {
        background-color: rgba(239, 68, 68, 0.1);
    }

    .user-menu-logout-form {
        width: 100%;
        margin: 0;
    }

    .user-menu-badge {
        margin-left: auto;
        font-size: 0.7rem;
        font-weight: 600;
        background-color: var(--color-primary);
        color: var(--color-primary-contrast);
        border-radius: var(--radius-full, 9999px);
        padding: 1px 6px;
        min-width: 18px;
        text-align: center;
        line-height: 1.4;
    }

    .user-menu-item .nav-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    /* ==========================================================================
       Auth pages layout
       ========================================================================== */
    .auth-page {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background: light-dark(var(--color-bg), linear-gradient(135deg, #1f2937 0%, #111827 100%));
    }

    .auth-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        width: 100%;
    }

    .auth-page-header-logo {
        font-size: 1.25rem;
        font-weight: 700;
        color: light-dark(var(--color-text), #ffffff);
        text-decoration: none;
        transition: opacity var(--transition-fast);
    }

    .auth-page-header-logo-img {
        height: 28px;
        width: auto;
        display: block;
    }

    a.auth-page-header-logo:hover {
        opacity: 0.8;
    }

    a.auth-page-header-logo:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    .auth-page-header-controls {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin-left: auto;
    }

    /* Auth header: theme/language menu triggers share a 40 px square pill so
       both controls align as a symmetric pair. */
    .auth-page-header-controls .theme-menu-trigger,
    .auth-page-header-controls .language-menu-trigger {
        width: 40px;
        height: 40px;
        background-color: light-dark(var(--color-bg-subtle), rgba(255, 255, 255, 0.1));
        border-color: light-dark(var(--color-border), rgba(255, 255, 255, 0.2));
        color: light-dark(var(--color-text), rgba(255, 255, 255, 0.9));
    }

    .auth-page-header-controls .theme-menu-trigger:hover,
    .auth-page-header-controls .language-menu-trigger:hover {
        background-color: light-dark(var(--color-bg-muted), rgba(255, 255, 255, 0.2));
    }

    .auth-page-header-controls .theme-menu-trigger:focus-visible,
    .auth-page-header-controls .language-menu-trigger:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .auth-page-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-md);
    }

    .auth-container {
        width: 100%;
        max-width: 400px;
    }

    /* ==========================================================================
       Error pages layout
       ========================================================================== */
    .error-page {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-bg);
        padding: var(--space-md);
    }

    .error-container {
        text-align: center;
        max-width: 400px;
    }

    /* Fallback for auth pages without light-dark() support */
    @supports not (color: light-dark(#000, #fff)) {
        .auth-page {
            background: var(--color-bg);
        }
        .auth-page-header-logo {
            color: var(--color-text);
        }
        .auth-page-header-controls .theme-menu-trigger,
        .auth-page-header-controls .language-menu-trigger {
            background-color: var(--color-bg-subtle);
            border-color: var(--color-border);
            color: var(--color-text);
        }
        .auth-page-header-controls .theme-menu-trigger:hover,
        .auth-page-header-controls .language-menu-trigger:hover {
            background-color: var(--color-bg-muted);
        }

        [data-theme="dark"] .auth-page {
            background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        }
        [data-theme="dark"] .auth-page-header-logo {
            color: #ffffff;
        }
        [data-theme="dark"] .auth-page-header-controls .theme-menu-trigger,
        [data-theme="dark"] .auth-page-header-controls .language-menu-trigger {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.9);
        }
        [data-theme="dark"] .auth-page-header-controls .theme-menu-trigger:hover,
        [data-theme="dark"] .auth-page-header-controls .language-menu-trigger:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
    }
}

/* ==========================================================================
   Components Layer - Reusable UI components
   ========================================================================== */
@layer components {
    /* ==========================================================================
       Buttons
       ========================================================================== */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.625rem 1.25rem;
        font-size: var(--text-sm);
        font-weight: 550;
        line-height: 1.25rem;
        letter-spacing: var(--tracking-normal);
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        cursor: pointer;
        transition: var(--motion-hover);
        text-decoration: none;
        white-space: nowrap;
        min-height: var(--touch-target);
    }

    .btn:disabled,
    .btn[disabled] {
        background-color: var(--color-bg-muted);
        color: var(--color-text-muted);
        border-color: var(--color-border);
        cursor: not-allowed;
    }

    .btn-primary {
        background-color: var(--color-primary);
        color: #ffffff;
    }

    .btn-primary:hover:not(:disabled) {
        background-color: var(--color-primary-hover);
        text-decoration: none;
    }

    .btn-secondary {
        background-color: var(--color-bg-muted);
        color: var(--color-text);
    }

    .btn-secondary:hover:not(:disabled) {
        background-color: var(--color-border);
        text-decoration: none;
    }

    .btn-danger {
        background-color: var(--color-danger);
        color: #ffffff;
    }

    .btn-danger:hover:not(:disabled) {
        background-color: var(--color-danger-hover);
        text-decoration: none;
    }

    .btn-outline {
        background-color: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-text);
    }

    .btn-outline:hover:not(:disabled) {
        border-color: var(--color-primary);
        color: var(--color-primary);
        text-decoration: none;
    }

    .btn-ghost {
        background-color: transparent;
        color: var(--color-text-secondary);
    }

    .btn-ghost:hover:not(:disabled) {
        background-color: var(--color-bg-muted);
        color: var(--color-text);
        text-decoration: none;
    }

    .btn-link {
        background: none;
        border: none;
        padding: 0;
        color: inherit;
        font: inherit;
        text-decoration: underline;
        cursor: pointer;
    }

    .btn-link:hover:not(:disabled) {
        text-decoration: none;
    }

    .btn-link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .btn-link:disabled,
    .btn-link[disabled] {
        color: var(--color-text-muted);
        cursor: not-allowed;
        text-decoration: none;
    }

    .btn-block {
        width: 100%;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        min-height: 36px;
    }

    .btn-lg {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
        min-height: 48px;
    }

    /* Alias: use .btn-sm instead */
    .btn-small {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        min-height: 36px;
    }

    .btn-logout {
        background-color: transparent;
        color: var(--sidebar-text);
        padding: var(--space-sm) var(--space-md);
        font-size: 0.875rem;
    }

    .btn-logout:hover {
        background-color: var(--sidebar-hover);
        color: #ffffff;
    }

    /* ==========================================================================
       Avatar Component
       ========================================================================== */
    .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        background-color: var(--color-primary);
        color: #ffffff;
    }

    .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar-initials {
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1;
    }

    /* Avatar sizes */
    .avatar-sm {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .avatar-md {
        width: 40px;
        height: 40px;
        font-size: 0.875rem;
    }

    .avatar-lg {
        width: 64px;
        height: 64px;
        font-size: 1.25rem;
    }

    .avatar-xl {
        width: 96px;
        height: 96px;
        font-size: 1.75rem;
    }

    .file-input {
        display: none;
    }

    /* ==========================================================================
       Cards — border-first aesthetic, paired with a barely-visible shadow
       so cards lift off a tinted canvas (1px hint, not a glow). For floating
       contexts (popovers, command palette, menus), opt into shadow-sm via
       .card-elevated.
       ========================================================================== */
    .card {
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        padding: var(--space-lg);
        margin-bottom: var(--space-lg);
        container-type: inline-size;
    }

    /* Opt-in elevation (floating widgets, popovers) */
    .card-elevated {
        box-shadow: var(--shadow-sm);
    }

    .card-title {
        font-size: var(--text-lg);
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: var(--space-sm);
        letter-spacing: var(--tracking-tight);
    }

    .card-description {
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        margin-bottom: var(--space-md);
    }

    .card-actions {
        margin-top: var(--space-lg);
        padding-top: var(--space-md);
        border-top: 1px solid var(--color-border-subtle);
    }

    /* ==========================================================================
       Auth card
       ========================================================================== */
    .auth-card {
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: var(--space-lg);
    }

    .auth-card-header {
        text-align: center;
        margin-bottom: var(--space-lg);
    }

    .auth-card-logo {
        display: block;
        max-width: 100%;
        max-height: 150px;
        width: auto;
        height: auto;
        margin: 0 auto var(--space-lg);
        object-fit: contain;
    }

    /* Framework default brand lockup (stacked logo-auth): a controlled height
       keeps it a focal mark above the form. Custom uploads keep the generous
       max-height above. */
    .auth-card-logo--default {
        height: 56px;
        max-height: 56px;
    }

    .auth-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: var(--space-sm);
    }

    .auth-subtitle {
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--color-text-secondary);
    }

    .auth-form {
        margin-top: var(--space-lg);
    }

    .auth-form .form-row .form-group {
        margin-bottom: 0;
    }

    .auth-footer {
        margin-top: var(--space-lg);
        text-align: center;
    }

    .auth-footer .link {
        color: var(--color-primary);
        text-decoration: none;
        font-size: 0.875rem;
    }

    .auth-footer .link:hover {
        text-decoration: underline;
    }

    .form-options {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-sm);
    }

    .auth-forgot-link {
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: 0.8125rem;
        white-space: nowrap;
        padding-top: 2px;
    }

    .auth-forgot-link:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }

    .auth-plan-banner {
        background-color: var(--color-bg-subtle);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-lg);
        text-align: center;
    }

    .auth-plan-banner-name {
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--color-text);
    }

    .auth-plan-banner-price {
        font-size: 0.875rem;
        color: var(--color-text-muted);
        margin-top: var(--space-xs);
    }

    .auth-plan-banner-trial {
        font-size: 0.8125rem;
        color: var(--color-success);
        margin-top: var(--space-xs);
    }

    .auth-plan-banner-hint {
        font-size: 0.8125rem;
        color: var(--color-text-muted);
        margin-top: var(--space-xs);
    }

    .auth-alt-action {
        margin-top: var(--space-lg);
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-border);
        text-align: center;
        font-size: 0.875rem;
    }

    .auth-alt-action-text {
        color: var(--color-text-muted);
    }

    .auth-alt-action-link {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 600;
    }

    .auth-alt-action-link:hover {
        text-decoration: underline;
    }

    /* Auth method selection cards */
    .auth-method-card {
        display: flex;
        align-items: flex-start;
        gap: var(--space-sm);
        width: 100%;
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-bg-elevated);
        cursor: pointer;
        text-align: left;
        font: inherit;
        color: inherit;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .auth-method-card:hover {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px var(--color-primary);
    }

    .auth-method-card svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .auth-method-card strong {
        display: block;
        margin-bottom: 2px;
    }

    .auth-method-card small {
        color: var(--color-text-muted);
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    /* Recovery phrase grid (BIP39 12-word input) */
    .phrase-grid {
        display: grid;
        grid-template-rows: repeat(6, auto);
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--space-xs);
        margin-bottom: var(--space-md);
    }

    .phrase-grid-item {
        display: flex;
        align-items: center;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        overflow: hidden;
        transition: border-color 0.15s;
    }

    .phrase-grid-item:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px var(--color-primary);
    }

    .phrase-grid-item.is-valid {
        border-color: var(--color-success);
    }

    .phrase-grid-item.is-invalid {
        border-color: var(--color-danger);
    }

    .phrase-grid-num {
        flex-shrink: 0;
        width: 2rem;
        text-align: center;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-muted);
        background: var(--color-bg-muted);
        padding: 0.5rem 0;
        line-height: 1;
        user-select: none;
    }

    .phrase-grid-input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0.5rem 0.5rem;
        font-size: 0.875rem;
        font-family: inherit;
        background: transparent;
        color: inherit;
        min-width: 0;
        /* Sub-control inside .phrase-grid-item — the wrapper provides
           the visual chrome. Opt out of the framework input baseline so
           we don't inherit min-height: 44px (which would inflate every
           cell of the 24-word mnemonic grid). */
        min-height: auto;
    }

    /* ==========================================================================
       Device pairing (smartphone-side + primary-side widget)
       ==========================================================================
       Shared visual language for the two halves of the Signal-style
       E2E device-pair flow:

         - smartphone-side: /auth/device-link page (full-screen card
           inside .auth-layout > .auth-container).
         - primary-side: #device-pair-card embedded in pwa-install
           (rendered in /profile and the onboarding mobile-install
           fragment).

       The fingerprint block is the security-critical element. It MUST
       look identical on both ends so the user compares the codes
       visually without hesitation — same monospace, same letter
       spacing, same enclosure. We deliberately use --color-bg-subtle
       + --color-border-strong (not the primary tint): a high-contrast
       neutral panel reads as "vigilance / verification", not as a
       coloured CTA. Apple, Signal, Element all follow this convention.
       ========================================================================== */

    /* Container the entire pwa-install component (QR/action zone +
       benefits list + already-installed state) into a single centered
       column. Without this, on wide profile sections the action zone
       was centered while the benefits <ul> stayed left-aligned —
       producing two contradictory alignment rules side by side.
       The flex column with gap also gives a regular vertical rhythm
       between the sub-blocks (zone d'action ↔ benefits ↔ installed). */
    .pwa-install {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        max-width: 32rem;
        margin-inline: auto;
    }

    .device-pair-card {
        max-width: 28rem;
        margin: 0 auto;
    }

    .device-link-fingerprint {
        background: var(--color-bg-subtle);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        padding: var(--space-lg);
        margin: var(--space-lg) 0;
        text-align: center;
    }

    .device-link-fingerprint-label {
        display: block;
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-muted);
        margin-bottom: var(--space-sm);
    }

    .device-link-fingerprint-words {
        display: block;
        font-family: var(--font-mono);
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--color-text);
        word-spacing: 0.5rem;
        line-height: 1.3;
    }

    @media (min-width: 768px) {
        .device-link-fingerprint-words {
            font-size: 1.75rem;
        }
    }

    .qr-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        aspect-ratio: 1 / 1;
        max-width: 280px;
        margin: 0 auto var(--space-md);
    }

    .qr-frame img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .qr-frame-spinner {
        width: 36px;
        height: 36px;
        color: var(--color-primary);
        animation: device-pair-spin 1.4s linear infinite;
    }

    @keyframes device-pair-spin {
        to { transform: rotate(360deg); }
    }

    .device-pair-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
    }

    .device-pair-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    /* On wider viewports, lay actions out as a centered row. The flex
       basis makes every button tend toward the same width regardless
       of label length — so a Confirm/Cancel pair reads symmetrically
       and a single Regenerate button (expired stage) sits centered
       in the same visual column as the rest. Primary moves to the
       right via order: 2 (Western convention for "forward" action). */
    @media (min-width: 768px) {
        .device-pair-actions {
            flex-direction: row;
            justify-content: center;
            gap: var(--space-md);
        }
        .device-pair-actions .btn {
            width: auto;
            flex: 0 1 12rem;
            min-width: 9rem;
        }
        .device-pair-actions .btn-primary {
            order: 2;
        }
    }

    .device-pair-hint-warning {
        display: flex;
        gap: var(--space-sm);
        align-items: flex-start;
        border-left: 3px solid var(--color-warning);
        background: var(--color-warning-subtle);
        color: var(--color-text-secondary);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-sm);
        line-height: 1.5;
        margin-top: var(--space-md);
    }

    .device-pair-hint-warning svg {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-top: 0.125rem;
        color: var(--color-warning);
    }

    /* Stage transitions are subtle by design — a brutal swap between
       loading / qr / confirm / done would feel jarring on a flow that
       takes ~30 seconds. Wrapped in prefers-reduced-motion so users
       who opt out get an instant swap. */
    @media (prefers-reduced-motion: no-preference) {
        [id^="device-pair-stage-"]:not([hidden]),
        [id^="device-link-stage-"]:not([hidden]) {
            animation: device-pair-fade 220ms ease-out;
        }

        @keyframes device-pair-fade {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }

    /* ==========================================================================
       Forms
       ==========================================================================
       Two layers:

       1. Native element baseline — :where(select, input, textarea) at
          specificity 0. Renders ANY native form control with the framework
          tokens (border, padding, font, focus ring, dark-mode), without
          requiring a class. Fulfils the documented promise "no CSS class
          needed on inputs" outside .form-group too (filter bars, table
          cells, inline forms). Lower-spec :where() means existing classes
          (.form-group rule below, .aff-input-sm width override, Tom Select
          wrappers, command-palette input) win without !important.

       2. .form-group — layout-only concerns (vertical stacking margin,
          label, full-width fields, textarea height). The visual rendering
          comes from layer 1.

       Excluded input types: checkbox / radio (own .checkbox-label),
       file / color / range (preserve native UI), hidden / submit / button
       / image / reset (non-visible or are buttons).

       Cascade note: this block lives in @layer components. Component CSS
       files (web/static/css/components/*.css), vendor themes (Tom Select),
       and per-module CSS are unlayered, so they ALWAYS win regardless of
       selector specificity. That is the intended escape hatch — the date
       field, command palette, password toggle, etc. continue to override
       freely without !important.
       ========================================================================== */

    /* ---- Native baseline (works everywhere, no class needed) ---- */
    :where(
        select,
        textarea,
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="number"],
        input[type="tel"],
        input[type="url"],
        input[type="password"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="time"],
        input[type="week"]
    ) {
        padding: 0.625rem 0.875rem;
        font-size: var(--text-base);
        font-family: inherit;
        line-height: 1.5;
        color: var(--color-text);
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        min-height: var(--touch-target);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    /* :focus-visible scoped to the same selector list as the visual
       baseline above — checkbox/radio focus is owned by the dedicated
       .checkbox-label / .checkbox-box pair (see line ~2540), and adding
       a box-shadow halo on top would compete with that pattern. */
    :where(
        select,
        textarea,
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="number"],
        input[type="tel"],
        input[type="url"],
        input[type="password"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="time"],
        input[type="week"]
    ):focus-visible {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }

    /* Composite input pattern (.input-wrapper)
       ---------------------------------------------------------------
       When an input/select/textarea sits inside a wrapper that owns
       its own focus indicator via :focus-within (search boxes,
       password fields with a visibility toggle, currency inputs,
       quantity steppers, etc.), the per-element focus ring above
       would stack with the wrapper's ring and produce a visible
       double border. Marking the wrapper `.input-wrapper` defers
       focus rendering to it — one ring per composite control,
       matching Material 3 / GOV.UK / IBM Carbon conventions.

       Contract:
         - The wrapper MUST style :focus-within itself (border-color,
           box-shadow, etc.). This rule only suppresses the inner
           ring; without a wrapper-level focus state, keyboard users
           lose every visible focus indicator on the control.
         - The selector mirrors the focus-visible block above so the
           neutralisation tracks any future addition to the input
           type list.

       Adopt by adding `.input-wrapper` next to your component class
       on the wrapper element (e.g. `.input-wrapper .my-search`).
       --------------------------------------------------------------- */
    .input-wrapper :where(input, select, textarea):focus-visible {
        box-shadow: none;
        border-color: transparent;
    }

    /* Forced-colors safety net — Windows High Contrast users would
       otherwise lose every focus indication if a wrapper ever
       forgets to style :focus-within. The Highlight system colour
       is the standard ensure-it-renders fallback in this mode.

       The second rule prevents the global forced-colors `border: 1px
       solid CanvasText` (see end of style.css) from re-introducing a
       border on the bare inner control — the wrapper already carries
       its own border, so without this we'd see the exact double border
       the .input-wrapper convention is meant to eliminate. */
    @media (forced-colors: active) {
        .input-wrapper :where(input, select, textarea):focus-visible {
            border-color: Highlight;
        }
        .input-wrapper :where(input, select, textarea) {
            border: 0;
        }
    }

    /* :disabled — propagate the dimmed state to the wrapper so the
       chrome (border, background) dims along with the text content.
       Without this, the bare inner input would dim alone while the
       wrapper kept its full-saturation border — visually inconsistent
       with every other disabled input in the app. The inner control's
       own opacity is reset to 1 so the dim effect doesn't multiply
       (CSS opacity composes; 0.6 × 0.6 = 0.36 reads as broken). */
    .input-wrapper:has(:where(input, select, textarea):disabled) {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .input-wrapper :where(input, select, textarea):disabled {
        opacity: 1;
    }

    /* Currency / amount input (CoreAmountInput helper)
       ---------------------------------------------------------------
       Composite input combining a numeric field and a trailing
       currency suffix (e.g. "1’234.56" + " CHF"). Mounted by
       window.CoreAmountInput.attach() onto any element with
       data-amount-input.

       Chrome (border, radius, background, min-height, padding,
       font-size) mirrors the framework's native :where(select, input,
       textarea) baseline (line ~1500) so a CoreAmountInput sits next
       to a date picker or a text field with the same visual weight —
       same border colour, same elevation, same touch target. The
       wrapper owns the focus ring per the .input-wrapper convention;
       the inner input is borderless so the ring isn't doubled.
       --------------------------------------------------------------- */
    .input-wrapper.hwc-amount-input {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs, 0.5rem);
        /* Match the native :where(input) baseline so the input visually
           reads as a peer of every other field in the form, not a
           low-contrast wrapper that disappears on a card. */
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        background-color: var(--color-bg-elevated);
        min-height: var(--touch-target);
        padding: 0 0.875rem;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .input-wrapper.hwc-amount-input:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-subtle);
    }

    .input-wrapper.hwc-amount-input > input {
        flex: 1;
        border: none;
        background: transparent;
        /* Reset the native :where(input) padding — the wrapper now owns
           the horizontal chrome and the touch target, so the inner
           input only contributes content. */
        padding: 0;
        min-height: auto;
        font-size: var(--text-base);
        line-height: 1.5;
        text-align: right;
        font-variant-numeric: tabular-nums;
        min-width: 0;
    }

    .input-wrapper.hwc-amount-input > input:focus,
    .input-wrapper.hwc-amount-input > input:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .hwc-amount-suffix {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm, 0.875rem);
        font-weight: 500;
        user-select: none;
        flex-shrink: 0;
    }

    :where(input, textarea)::placeholder {
        color: var(--color-text-muted);
        opacity: 1; /* Firefox lowers placeholder opacity by default */
    }

    /* :disabled scoped to text-like inputs + select + textarea. Native
       checkboxes/radios have their own disabled rendering managed by the
       UA; restating opacity 0.6 here would double-dim the .checkbox-box
       sibling pattern. */
    :where(
        select,
        textarea,
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="number"],
        input[type="tel"],
        input[type="url"],
        input[type="password"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="time"],
        input[type="week"]
    ):disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Hide number input spinners — financial UI never wants them. */
    :where(input[type="number"])::-webkit-inner-spin-button,
    :where(input[type="number"])::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    :where(input[type="number"]) {
        -moz-appearance: textfield;
    }

    /* Custom chevron for <select> — replaces the inconsistent native arrow
       (Chrome triangle vs Safari blue arrow vs Firefox different glyph)
       with the framework's Lucide chevron-down. CSP-safe: data: URI is
       allowed by `img-src 'self' data: blob:` (security.go:93). Logical
       properties (padding-inline-end, position-x: right) keep the chevron
       on the trailing edge in both LTR and RTL writing modes. The fill
       hex matches --color-text-muted exactly (light: #475569, dark:
       #94a3b8 — the values from tokens.css's @supports-not fallback) so
       the arrow tracks the muted text colour. */
    :where(select) {
        appearance: none;
        padding-inline-end: 2.25rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.625rem center;
        background-size: 1rem 1rem;
    }

    [data-theme="dark"] :where(select) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }

    /* <select multiple> renders as a list box — drop the chevron and
       single-line height. */
    :where(select[multiple]) {
        appearance: auto;
        padding-inline-end: 0.875rem;
        background-image: none;
        min-height: auto;
    }

    /* Inline-edit inside table cells: tighter so the row keeps its
       compact rhythm. Used by mod-rag/admin/documents.html and similar. */
    :where(td) :where(select, textarea, input) {
        min-height: auto;
        padding: 0.25rem 0.5rem;
    }

    /* Reduced motion respects user preference. */
    @media (prefers-reduced-motion: reduce) {
        :where(select, textarea, input) {
            transition: none;
        }
    }

    /* ---- Layout concerns scoped to .form-group ---- */
    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        display: block;
        margin-bottom: var(--space-sm);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-text-secondary);
    }

    /*
     * Inside .form-group fields stretch to 100% width — that is the
     * vertical-form layout convention. Visual rendering (border, padding,
     * colours, focus ring, placeholder, spinner suppression, dark-mode
     * chevron) lives on the element-level rule above and is shared with
     * filter bars, table cells and any inline use.
     *
     * Checkboxes and radios are excluded: stretching them to 100% turns
     * them into 400-px boxes. They use the .checkbox-label / .checkbox-box
     * pair instead.
     */
    .form-group :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
    }

    .form-group textarea {
        min-height: 120px;
        resize: vertical;
    }

    .form-group .form-static {
        padding: 0.625rem 0.875rem;
        font-size: var(--text-base);
        line-height: 1.5;
        color: var(--color-text-secondary);
        background-color: var(--color-bg-subtle);
        border: 1px dashed var(--color-border);
        border-radius: var(--radius-md);
    }

    /* Password input with toggle — composite control following the
       .input-wrapper pattern (see "Composite input pattern" block above
       and CSS_CONVENTIONS.md). The wrapper owns the visual chrome
       (border, padding, background, focus ring); the inner <input> is
       bare so the two no longer compete for the focus indicator. The
       baseline values mirror the framework's standalone-input default
       so the visual identity is preserved across the migration. */
    .password-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0.625rem 0.875rem;
        font-size: var(--text-base);
        line-height: 1.5;
        color: var(--color-text);
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        min-height: var(--touch-target);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    /* The wrapper's :focus-within ring fires both when the inner
       <input> AND when the .password-toggle has focus. The toggle
       also keeps its own outline (see below) — that dual indication
       is intentional: the toggle is a sibling interactive element,
       Tab-able on its own, and users navigating by keyboard need to
       know which sub-element is currently focused. Same precedent as
       the search ✕ button in mod-budgetcontrol's bc-filter-toolbar-search. */
    .password-input-wrapper:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }

    .password-input-wrapper input {
        flex: 1;
        /* Strip the framework baseline — the wrapper now owns chrome. */
        padding: 0;
        border: 0;
        background: transparent;
        outline: none;
        font: inherit;
        color: inherit;
        min-height: 0;
        /* Reserve room for the floating .password-toggle on the right.
           Toggle is right:0.5rem + width:2.25rem = 2.75rem from the
           wrapper's padding edge. We add a bit more (2.5rem on the
           input's content side, on top of the wrapper's 0.875rem
           padding-right = 3.375rem total to the wrapper's border)
           so a long password with proportional fonts stays clear of
           the toggle's hit area. */
        padding-right: 2.5rem;
    }

    .password-toggle {
        position: absolute;
        right: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        color: var(--color-text-muted);
        cursor: pointer;
        transition: color var(--transition-fast);
    }

    .password-toggle:hover {
        color: var(--color-text);
    }

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

    .password-toggle .icon-hide {
        display: none;
    }

    .password-toggle[aria-pressed="true"] .icon-show {
        display: none;
    }

    .password-toggle[aria-pressed="true"] .icon-hide {
        display: block;
    }

    /* Password strength indicator */
    .password-strength {
        margin-top: var(--space-sm);
    }

    .password-strength-bar {
        height: 4px;
        background-color: var(--color-border);
        border-radius: 2px;
        overflow: hidden;
    }

    .password-strength-fill {
        height: 100%;
        width: 0;
        border-radius: 2px;
        transition: width var(--transition-fast), background-color var(--transition-fast);
    }

    .password-strength-fill[data-strength="weak"] {
        width: 33%;
        background-color: var(--color-danger);
    }

    .password-strength-fill[data-strength="medium"] {
        width: 66%;
        background-color: var(--color-warning);
    }

    .password-strength-fill[data-strength="strong"] {
        width: 100%;
        background-color: var(--color-success);
    }

    .password-strength-text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--space-xs);
        font-size: 0.75rem;
        color: var(--color-text-muted);
    }

    .password-strength-label {
        font-weight: 500;
    }

    .password-strength-label[data-strength="weak"] {
        color: var(--color-danger);
    }

    .password-strength-label[data-strength="medium"] {
        color: var(--color-warning);
    }

    .password-strength-label[data-strength="strong"] {
        color: var(--color-success);
    }

    /* Password requirements checklist */
    .password-requirements {
        margin-top: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--color-bg-subtle);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-border);
    }

    .password-requirements-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.025em;
        margin-bottom: var(--space-xs);
    }

    .password-requirements-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .password-requirements-list li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        color: var(--color-text-muted);
        transition: color var(--transition-fast);
    }

    .password-requirements-list li.valid {
        color: var(--color-success);
    }

    .password-requirements-list li.invalid {
        color: var(--color-danger);
    }

    .password-rule-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .password-rule-icon::before {
        content: "○";
        font-size: 0.625rem;
    }

    .password-requirements-list li.valid .password-rule-icon::before {
        content: "✓";
        font-size: 0.875rem;
    }

    .password-requirements-list li.invalid .password-rule-icon::before {
        content: "✗";
        font-size: 0.875rem;
    }

    /* Password match feedback */
    .password-match-feedback {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: var(--space-xs);
        font-size: 0.8125rem;
    }

    .password-match-feedback.match {
        color: var(--color-success);
    }

    .password-match-feedback.no-match {
        color: var(--color-danger);
    }

    .password-match-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .password-match-feedback.match .password-match-icon::before {
        content: "✓";
    }

    .password-match-feedback.no-match .password-match-icon::before {
        content: "✗";
    }

    /* ==========================================================================
       Alerts
       ========================================================================== */
    .alert {
        padding: 0.875rem var(--space-md);
        margin-bottom: 1.25rem;
        border-radius: var(--radius-md);
        font-size: 0.875rem;
    }

    .alert-error {
        background-color: light-dark(#fef2f2, #450a0a);
        border: 1px solid light-dark(#fecaca, #7f1d1d);
        color: light-dark(#991b1b, #fecaca);
    }

    .alert-success {
        background-color: light-dark(#f0fdf4, #052e16);
        border: 1px solid light-dark(#bbf7d0, #166534);
        color: light-dark(#166534, #bbf7d0);
        transition: opacity 0.4s ease-out;
    }

    .alert-info {
        background-color: light-dark(#eff6ff, #1e3a5f);
        border: 1px solid light-dark(#bfdbfe, #1e40af);
        color: light-dark(#1e40af, #bfdbfe);
    }

    .alert-info a {
        color: inherit;
        word-break: break-all;
    }

    .alert-warning {
        background-color: light-dark(#fffbeb, #451a03);
        border: 1px solid light-dark(#fde68a, #92400e);
        color: light-dark(#92400e, #fde68a);
    }

    /* Alias: use .alert-error instead */
    .alert-danger {
        background-color: light-dark(#fef2f2, #450a0a);
        border: 1px solid light-dark(#fecaca, #7f1d1d);
        color: light-dark(#991b1b, #fecaca);
    }

    /* Fallback for alerts without light-dark() */
    @supports not (color: light-dark(#000, #fff)) {
        .alert-error {
            background-color: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
        }

        .alert-success {
            background-color: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #166534;
            transition: opacity 0.4s ease-out;
        }

        .alert-info {
            background-color: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1e40af;
        }

        .alert-warning {
            background-color: #fffbeb;
            border: 1px solid #fde68a;
            color: #92400e;
        }

        /* Alias: use .alert-error instead */
        .alert-danger {
            background-color: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
        }

        [data-theme="dark"] .alert-error {
            background-color: #450a0a;
            border-color: #7f1d1d;
            color: #fecaca;
        }

        [data-theme="dark"] .alert-success {
            background-color: #052e16;
            border-color: #166534;
            color: #bbf7d0;
        }

        [data-theme="dark"] .alert-info {
            background-color: #1e3a5f;
            border-color: #1e40af;
            color: #bfdbfe;
        }

        [data-theme="dark"] .alert-warning {
            background-color: #451a03;
            border-color: #92400e;
            color: #fde68a;
        }

        /* Alias: use .alert-error instead */
        [data-theme="dark"] .alert-danger {
            background-color: #450a0a;
            border-color: #7f1d1d;
            color: #fecaca;
        }

        .admin-badge {
            background-color: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .role-badge-admin {
            border-color: rgba(59, 130, 246, 0.3);
        }

        .status-badge.status-enabled {
            background-color: rgba(34, 197, 94, 0.1);
        }

        [data-theme="dark"] .admin-badge {
            background-color: rgba(245, 158, 11, 0.2);
            border-color: rgba(245, 158, 11, 0.4);
        }

        [data-theme="dark"] .role-badge-admin {
            border-color: rgba(59, 130, 246, 0.4);
        }

        [data-theme="dark"] .status-badge.status-enabled {
            background-color: rgba(34, 197, 94, 0.15);
        }
    }

    /* ==========================================================================
       Language switcher (legacy - kept for auth pages)
       ========================================================================== */
    .language-switcher {
        display: inline-flex;
    }

    .language-form {
        margin: 0;
    }

    .language-select {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.875rem;
        background-color: var(--color-bg-subtle);
        color: var(--color-text);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-sm);
        cursor: pointer;
        /* Compact picker — opt out of the framework chevron baseline; this
           legacy switcher uses the OS dropdown arrow. */
        appearance: auto;
        background-image: none;
        min-height: auto;
    }

    .language-select:focus {
        outline: none;
        border-color: var(--color-primary);
    }

    /* ==========================================================================
       Preference switchers — two contextual variants share the same visual
       and behavioural pattern; selector unions keep the rules DRY across
       theme and language pickers.

       Variants:
       - .theme-radio-list / .language-radio-list:
           inline radio group, used inside already-open dropdowns
           (user menu, landing mobile menu) where a popover would add an
           unnecessary extra step.
       - .theme-menu / .language-menu:
           popover menu, used as a standalone navbar button (auth header,
           landing desktop header). Open/close, light-dismiss, flip-up and
           shift positioning are handled by the shared MenuPopover JS helper.
       ========================================================================== */

    /* Inline radio list */
    .theme-radio-list,
    .language-radio-list {
        display: flex;
        flex-direction: column;
        padding: 0.25rem 0;
    }

    .theme-radio,
    .language-radio {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        min-height: var(--touch-target);
        padding: 0.5rem 1rem;
        background: transparent;
        border: none;
        color: var(--color-text-secondary);
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s;
    }

    .theme-radio:hover,
    .language-radio:hover {
        background-color: var(--color-bg-hover);
    }

    .theme-radio:focus-visible,
    .language-radio:focus-visible {
        outline: none;
        background-color: var(--color-bg-hover);
        box-shadow: inset 2px 0 0 var(--color-primary);
    }

    .theme-radio[aria-checked="true"],
    .language-radio[aria-checked="true"] {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
    }

    .theme-radio svg {
        flex-shrink: 0;
    }

    /* Language radio: label fills the row, the trailing check appears on the
       active item (theme uses a leading icon instead, so this is the only
       language-specific rule). */
    .language-radio-form {
        margin: 0;
    }

    .language-radio span {
        flex: 1;
    }

    .language-radio-check {
        flex-shrink: 0;
        opacity: 0;
    }

    .language-radio[aria-checked="true"] .language-radio-check {
        opacity: 1;
    }

    /* Cap the language list at ~8 items and scroll beyond — graceful
       degradation when an admin enables many languages, without needing
       a separate fallback component. The cap is derived from the touch
       target token so item count stays consistent if the token changes. */
    .language-radio-list {
        max-height: calc(8 * var(--touch-target));
        overflow-y: auto;
    }

    /* Popover menu (auth header, landing desktop header) */
    .theme-menu,
    .language-menu {
        position: relative;
        display: inline-flex;
    }

    .theme-menu-trigger,
    .language-menu-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .theme-menu-trigger:hover,
    .language-menu-trigger:hover {
        background-color: var(--color-bg-hover);
        color: var(--color-primary);
    }

    .theme-menu-trigger:focus-visible,
    .language-menu-trigger:focus-visible {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary-light);
    }

    .theme-menu-icon {
        display: none;
    }

    .theme-menu[data-theme-preference="light"] .theme-menu-icon-light,
    .theme-menu[data-theme-preference="system"] .theme-menu-icon-system,
    .theme-menu[data-theme-preference="dark"] .theme-menu-icon-dark {
        display: block;
    }

    /* Popover panel — standard anchored popover. position:absolute against
       the positioned parent (.theme-menu / .language-menu) means the
       containing block is predictable across all browsers. The base state
       uses the [hidden] attribute for SSR-safe initial rendering; JS
       toggles it on open. */
    .theme-menu-popover,
    .language-menu-popover {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 0.375rem);
        right: 0;
        z-index: var(--z-dropdown);
        min-width: 180px;
        padding: 0.25rem;
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md, 0 8px 16px rgba(0, 0, 0, 0.12));
        color: var(--color-text);
    }

    .theme-menu-popover[hidden],
    .language-menu-popover[hidden] {
        display: none;
    }

    /* Flip upward when the menu would overflow the viewport bottom */
    .theme-menu-popover.is-flip-up,
    .language-menu-popover.is-flip-up {
        top: auto;
        bottom: calc(100% + 0.375rem);
    }

    /* Same cap as .language-radio-list — see comment above. The popover
       handles many-language deployments by scrolling internally rather
       than overflowing the viewport. Theme always has 3 fixed options
       so the same rule isn't applied to .theme-menu-popover. */
    .language-menu-popover {
        max-height: calc(8 * var(--touch-target));
        overflow-y: auto;
    }

    .theme-menu-item,
    .language-menu-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        min-height: var(--touch-target);
        padding: 0.5rem 0.625rem;
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        color: var(--color-text-secondary);
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s;
    }

    .theme-menu-item:hover,
    .language-menu-item:hover {
        background-color: var(--color-bg-hover);
    }

    .theme-menu-item:focus-visible,
    .language-menu-item:focus-visible {
        outline: none;
        background-color: var(--color-bg-hover);
        color: var(--color-primary);
    }

    .theme-menu-item[aria-checked="true"],
    .language-menu-item[aria-checked="true"] {
        color: var(--color-primary);
    }

    .theme-menu-item svg[aria-hidden="true"]:first-of-type {
        flex-shrink: 0;
    }

    .theme-menu-item span,
    .language-menu-item span {
        flex: 1;
    }

    .theme-menu-check,
    .language-menu-check {
        flex-shrink: 0;
        opacity: 0;
    }

    .theme-menu-item[aria-checked="true"] .theme-menu-check,
    .language-menu-item[aria-checked="true"] .language-menu-check {
        opacity: 1;
    }

    /* Wrap each language item in its own POST form; reset default form margin
       so the popover spacing comes from the panel padding only. */
    .language-menu-form {
        margin: 0;
    }

    /* ==========================================================================
       Admin Badge
       ========================================================================== */
    .admin-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.125rem 0.5rem;
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-warning);
        background-color: light-dark(rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.2));
        border: 1px solid light-dark(rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.4));
        border-radius: var(--radius-sm);
    }

    /* ==========================================================================
       Section title
       ========================================================================== */
    .section-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--color-text-secondary);
        margin-top: var(--space-xl);
        margin-bottom: var(--space-md);
        padding-bottom: var(--space-sm);
        border-bottom: 2px solid var(--color-border);
    }

    /* ==========================================================================
       Dashboard
       ========================================================================== */
    .dashboard-welcome {
        margin-bottom: var(--space-md);
    }

    .welcome-card {
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        box-shadow: var(--shadow-sm);
    }

    .welcome-card h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: var(--space-sm);
    }

    .welcome-card p {
        color: var(--color-text-secondary);
        font-size: 0.875rem;
    }

    .dashboard-placeholder {
        display: grid;
        gap: var(--space-md);
    }

    .placeholder-card {
        background-color: var(--color-bg-elevated);
        border-radius: var(--radius-md);
        padding: var(--space-xl);
        box-shadow: var(--shadow-md);
        text-align: center;
        border: 2px dashed var(--color-border);
    }

    .placeholder-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        background-color: var(--color-bg-subtle);
        border-radius: 50%;
        margin-bottom: var(--space-md);
        color: var(--color-text-muted);
    }

    .placeholder-icon svg {
        width: 32px;
        height: 32px;
    }

    .placeholder-card h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: var(--space-sm);
    }

    .placeholder-card p {
        color: var(--color-text-secondary);
        font-size: 0.875rem;
        max-width: 300px;
        margin: 0 auto;
    }

    /* ==========================================================================
       Error pages
       ========================================================================== */
    .error-code {
        font-size: clamp(4rem, 15vw, 6rem);
        font-weight: 700;
        color: var(--color-border);
        line-height: 1;
        margin-bottom: var(--space-sm);
    }

    .error-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: var(--space-sm);
    }

    .error-message {
        font-size: 1rem;
        color: var(--color-text-secondary);
        margin-bottom: var(--space-lg);
    }

    /* ==========================================================================
       Credentials list
       ========================================================================== */
    .credentials-list {
        margin: var(--space-md) 0;
    }

    .credential-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-sm);
        gap: var(--space-md);
        container-type: inline-size;
    }

    .credential-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .credential-name {
        font-weight: 500;
        color: var(--color-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .credential-date {
        font-size: 0.75rem;
        color: var(--color-text-muted);
    }

    .credential-actions {
        display: flex;
        gap: var(--space-sm);
        flex-shrink: 0;
    }

    @container (max-width: 400px) {
        .credential-item {
            flex-direction: column;
            align-items: stretch;
        }

        .credential-actions {
            margin-top: var(--space-sm);
            justify-content: flex-end;
        }
    }

    .inline-form {
        display: inline;
    }

    /* ==========================================================================
       Recovery codes
       ========================================================================== */
    .recovery-codes-display {
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        margin: var(--space-md) 0;
    }

    .warning-text {
        color: var(--color-warning);
        font-weight: 500;
        margin-bottom: var(--space-md);
    }

    .codes-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
    }

    .recovery-code-item {
        display: flex;
        align-items: center;
        background-color: var(--color-bg-elevated);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border);
    }

    .code-number {
        font-size: 0.75rem;
        color: var(--color-text-muted);
        margin-right: var(--space-sm);
        min-width: 1.5rem;
    }

    .recovery-code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.875rem;
        letter-spacing: 0.05em;
        color: var(--color-text);
    }

    .recovery-phrase-box {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 1rem;
        line-height: 1.6;
        padding: var(--space-md);
        background: var(--color-surface-muted, var(--color-surface));
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        color: var(--color-text);
        word-spacing: 0.4em;
        user-select: all;
        min-height: 4.5em;
    }

    .recovery-codes-actions {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--color-border);
    }

    .copy-status {
        font-size: 0.875rem;
        transition: opacity var(--transition-fast);
    }

    .copy-status.success {
        color: var(--color-success);
    }

    .copy-status.error {
        color: var(--color-danger);
    }

    .recovery-status {
        color: var(--color-text-secondary);
        margin: var(--space-md) 0;
    }

    .status-enabled {
        color: var(--color-success);
    }

    .status-disabled {
        color: var(--color-text-muted);
    }

    /* ==========================================================================
       Modal Actions (legacy support for forms with button groups)
       ========================================================================== */
    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
    }

    /* ==========================================================================
       2FA page
       ========================================================================== */
    .twofa-section {
        margin: var(--space-lg) 0;
    }

    .twofa-section h3 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: var(--space-sm);
        color: var(--color-text);
    }

    .twofa-section p {
        font-size: 0.875rem;
        color: var(--color-text-secondary);
        margin-bottom: var(--space-md);
    }

    .divider {
        display: flex;
        align-items: center;
        margin: var(--space-lg) 0;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background-color: var(--color-border);
    }

    .divider span {
        padding: 0 var(--space-md);
        color: var(--color-text-muted);
        font-size: 0.875rem;
    }

    .status-message {
        margin-top: var(--space-md);
        font-size: 0.875rem;
        color: var(--color-text-secondary);
        text-align: center;
    }

    .status-message.error {
        color: var(--color-danger);
    }

    /* ==========================================================================
       Checkbox
       ========================================================================== */
    .form-checkbox {
        margin: var(--space-lg) 0;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--color-text);
        user-select: none;
        position: relative;
        min-height: var(--touch-target);
        padding: var(--space-xs) 0;
    }

    .checkbox-label:has(.checkbox-content) {
        align-items: flex-start;
    }

    .checkbox-label input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .checkbox-box {
        position: relative;
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-border);
        border-radius: var(--radius-sm);
        background-color: var(--color-bg-elevated);
        transition: var(--motion-hover);
    }

    .checkbox-box::after {
        content: '';
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .checkbox-label input[type="checkbox"]:checked + .checkbox-box {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .checkbox-label input[type="checkbox"]:checked + .checkbox-box::after {
        display: block;
    }

    .checkbox-label input[type="checkbox"]:focus-visible + .checkbox-box {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .checkbox-label:hover .checkbox-box {
        border-color: var(--color-primary);
    }

    /* Simplified checkbox with native styling for form checkboxes */
    .checkbox-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
    }

    .checkbox-group .checkbox-label {
        display: flex;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-border);
        transition: var(--motion-hover);
        cursor: pointer;
    }

    .checkbox-group .checkbox-label:hover {
        border-color: var(--color-primary);
        background-color: var(--color-bg-elevated);
    }

    .checkbox-group .checkbox-label:has(input:checked) {
        border-color: var(--color-primary);
        background-color: var(--color-primary-light);
    }

    .checkbox-group .checkbox-label input[type="checkbox"] {
        position: static;
        opacity: 1;
        width: 18px;
        height: 18px;
        pointer-events: auto;
        accent-color: var(--color-primary);
        cursor: pointer;
        flex-shrink: 0;
    }

    .checkbox-text {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: 0.875rem;
        color: var(--color-text);
    }

    .badge-small {
        display: inline-flex;
        padding: 0.125rem 0.375rem;
        font-size: 0.6875rem;
        font-weight: 500;
        border-radius: var(--radius-sm);
        background-color: var(--color-bg-subtle);
        color: var(--color-text-muted);
    }

    .badge-small.badge-admin {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
    }

    .checkbox-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.4;
    }

    .checkbox-title {
        font-weight: 500;
        color: var(--color-text);
    }

    .checkbox-hint {
        font-size: 0.75rem;
        color: var(--color-text-muted);
        font-weight: 400;
    }

    /* ==========================================================================
       Admin Components
       ========================================================================== */

    /* Admin stats grid */
    .admin-stats,
    .stat-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin-bottom: var(--space-xl);
    }

    /* Stat cards */
    .stat-card {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: var(--color-primary);
    }

    .stat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background-color: var(--color-primary-light);
        border-radius: var(--radius-md);
        color: var(--color-primary);
        flex-shrink: 0;
    }

    .stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .stat-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.2;
    }

    .stat-label {
        font-size: 0.875rem;
        color: var(--color-text-secondary);
        margin-top: 0.125rem;
    }

    .stat-link {
        font-size: 0.75rem;
        color: var(--color-primary);
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--transition-fast);
    }

    .stat-link:hover {
        color: var(--color-primary-hover);
        text-decoration: underline;
    }

    /* Quick actions */
    .admin-quick-actions {
        margin-bottom: var(--space-xl);
    }

    .admin-quick-actions h3 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: var(--space-md);
    }

    .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .quick-action-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-md);
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--color-text);
        transition: var(--motion-hover);
        min-height: var(--touch-target);
    }

    .quick-action-card:hover {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
        text-decoration: none;
    }

    .quick-action-card svg {
        width: 28px;
        height: 28px;
        color: var(--color-primary);
    }

    .quick-action-card span {
        font-size: 0.8125rem;
        font-weight: 500;
        text-align: center;
    }

    /* ==========================================================================
       Navigation Cards
       Reusable component for settings/admin navigation links with icon
       ========================================================================== */
    .nav-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--space-md);
    }

    .nav-card {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-lg);
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--color-text);
        transition: var(--motion-hover);
    }

    .nav-card:hover {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
        text-decoration: none;
    }

    .nav-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background-color: var(--color-primary);
        border-radius: var(--radius-md);
        color: white;
        flex-shrink: 0;
    }

    .nav-card-icon svg {
        width: 24px;
        height: 24px;
    }

    .nav-card-content h3 {
        margin: 0 0 0.25rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .nav-card-content p {
        margin: 0;
        font-size: 0.875rem;
        color: var(--color-text-muted);
    }

    /* Stat card details (sub-statistics) */
    .stat-details {
        display: flex;
        gap: var(--space-sm);
        margin-top: var(--space-xs);
        flex-wrap: wrap;
    }

    .stat-detail {
        font-size: 0.75rem;
        padding: 0.125rem 0.375rem;
        border-radius: var(--radius-sm);
    }

    .stat-detail-success {
        background-color: var(--color-success-light);
        color: var(--color-success);
    }

    .stat-detail-warning {
        background-color: var(--color-warning-light);
        color: var(--color-warning);
    }

    /* Warning state for stat cards */
    .stat-card-warning::before {
        background-color: var(--color-warning);
    }

    .stat-icon-warning {
        background-color: var(--color-warning-light);
        color: var(--color-warning);
    }

    /* Recent activity section */
    .admin-recent-activity {
        margin-bottom: var(--space-xl);
    }

    .recent-activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-md);
    }

    .recent-activity-header h3 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
        margin: 0;
    }

    .recent-activity-link {
        font-size: 0.875rem;
        color: var(--color-primary);
        text-decoration: none;
    }

    .recent-activity-link:hover {
        text-decoration: underline;
    }

    .recent-activity-list {
        background-color: var(--color-bg-elevated);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .recent-activity-item {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }

    .recent-activity-item:last-child {
        border-bottom: none;
    }

    .recent-activity-item-failure {
        background-color: var(--color-danger-light);
    }

    .recent-activity-time {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        min-width: 50px;
        flex-shrink: 0;
    }

    .activity-date {
        font-size: 0.75rem;
        color: var(--color-text-secondary);
    }

    .activity-time {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--color-text);
    }

    .recent-activity-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .activity-action {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-text);
    }

    .activity-user {
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recent-activity-status {
        flex-shrink: 0;
    }

    .status-dot {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .status-dot-success {
        background-color: var(--color-success);
    }

    .status-dot-failure {
        background-color: var(--color-danger);
    }

    .recent-activity-empty {
        padding: var(--space-lg);
        text-align: center;
        color: var(--color-text-secondary);
        background-color: var(--color-bg-elevated);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    /* Admin tables */
    .admin-table-container {
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
        min-width: 600px;
    }

    .admin-table thead {
        background-color: var(--color-bg-subtle);
        border-bottom: 2px solid var(--color-border);
    }

    .admin-table th {
        padding: var(--space-md) var(--space-md);
        text-align: left;
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .admin-table td {
        padding: var(--space-md) var(--space-md);
        color: var(--color-text);
        border-bottom: 1px solid var(--color-border);
        vertical-align: middle;
    }

    .admin-table tbody tr {
        transition: background-color var(--transition-fast);
    }

    .admin-table tbody tr:hover {
        background-color: var(--color-bg-subtle);
    }

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

    .actions-cell {
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-xs);
    }

    /* Badges */
    .role-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--color-text);
        background-color: var(--color-bg-subtle);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
    }

    .role-badge-admin {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
        border-color: light-dark(rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.4));
    }

    .role-badge-none {
        color: var(--color-text-muted);
        background-color: transparent;
        border-style: dashed;
    }

    .role-badge-more {
        color: var(--color-text-muted);
        background-color: var(--color-bg-muted);
        cursor: help;
    }

    .role-badge + .role-badge {
        margin-left: 0.25rem;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: var(--radius-full);
        background-color: var(--color-bg-subtle);
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

    .status-badge.status-enabled {
        color: var(--color-success);
        background-color: light-dark(rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.15));
    }

    .status-badge.status-disabled {
        color: var(--color-text-muted);
        background-color: var(--color-bg-subtle);
    }

    /* User account status badges */
    .status-badge.status-active {
        color: var(--color-success);
        background-color: light-dark(rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.15));
    }

    .status-badge.status-suspended {
        color: var(--color-danger);
        background-color: light-dark(rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
    }

    .status-badge.status-pending {
        color: light-dark(#92400e, #fbbf24);
        background-color: light-dark(rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.2));
    }

    .status-badge.status-danger {
        color: var(--color-danger);
        background-color: light-dark(rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
    }

    .status-badge.status-inactive {
        color: var(--color-text-muted);
        background-color: var(--color-bg-subtle);
    }

    .status-badge-icon {
        width: 12px;
        height: 12px;
    }

    /* General purpose badges */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: var(--radius-sm);
        background-color: var(--color-bg-subtle);
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

    .badge-success {
        color: var(--color-success);
        background-color: var(--color-success-light);
    }

    .badge-danger {
        color: var(--color-danger);
        background-color: var(--color-danger-light);
    }

    .badge-error {
        color: var(--color-danger);
        background-color: var(--color-danger-light);
    }

    .badge-warning {
        color: light-dark(#92400e, #fbbf24);
        background-color: var(--color-warning-light);
    }

    .badge-info {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
    }

    .badge-primary {
        color: var(--color-primary);
        background-color: var(--color-primary-light);
    }

    .badge-secondary {
        color: var(--color-text-muted);
        background-color: var(--color-bg-subtle);
    }

    .permissions-count,
    .permissions-info {
        font-size: 0.875rem;
        color: var(--color-text-secondary);
    }

    /* Back link */
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        margin-bottom: var(--space-lg);
        font-size: 0.875rem;
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: color var(--transition-fast);
        min-height: var(--touch-target);
    }

    .back-link:hover {
        color: var(--color-primary);
        text-decoration: none;
    }

    .back-link svg {
        width: 16px;
        height: 16px;
    }

    /* Admin form */
    .admin-form-container {
        max-width: 640px;
    }

    .form-card {
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        box-shadow: var(--shadow-sm);
    }

    .form-card h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    .role-type-label {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--color-text-muted);
    }

    .form-info {
        margin: var(--space-lg) 0;
        padding: var(--space-md);
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-md);
        border-left: 3px solid var(--color-primary);
    }

    .form-info p {
        font-size: 0.875rem;
        color: var(--color-text-secondary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    .form-info strong {
        color: var(--color-text);
    }

    .form-actions {
        display: flex;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-border);
    }

    /* Permissions fieldset */
    fieldset.form-group {
        border: none;
        padding: 0;
        margin: 0 0 1.25rem 0;
    }

    fieldset.form-group legend {
        display: block;
        margin-bottom: var(--space-sm);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-text-secondary);
    }

    .permissions-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
    }

    .permissions-grid .checkbox-label {
        padding: var(--space-sm) var(--space-md);
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-border-strong);
        transition: var(--motion-hover);
    }

    .permissions-grid .checkbox-label:hover {
        border-color: var(--color-primary);
        background-color: var(--color-bg-elevated);
    }

    .permissions-grid .checkbox-label .checkbox-content span {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.8125rem;
        color: var(--color-text);
    }

    .permissions-grid .checkbox-label .checkbox-content small {
        display: block;
        font-size: 0.75rem;
        color: var(--color-text-muted);
        margin-top: 0.125rem;
        font-family: inherit;
    }
}

/* ==========================================================================
   View Transitions — intentionally not enabled globally

   Cross-document view transitions (`@view-transition { navigation: auto }`)
   are a tempting nice-to-have: the browser crossfades between pages with
   zero JS. In practice they regress click responsiveness on dashboard-
   style UIs where users rapid-click through the sidebar.

   Chromium today swallows the second click when it arrives while the
   browser is still capturing the outgoing frame for the first navigation
   (tracked upstream under issues around rapid same-origin nav). The
   admin-first priority here is reliability, so we do NOT opt in.

   Per-element opt-ins remain possible with `view-transition-name` on
   small components that don't participate in navigation (e.g. a
   modal backdrop that should crossfade when opened). Add them locally
   if needed — do not re-introduce a global @view-transition rule.
   ========================================================================== */

/* ==========================================================================
   Utilities Layer - Helper classes
   ========================================================================== */
@layer utilities {
    /* Display */
    .hidden {
        display: none !important;
    }

    .d-flex {
        display: flex;
    }

    .d-grid {
        display: grid;
    }

    .d-inline-flex {
        display: inline-flex;
    }

    .d-block {
        display: block;
    }

    /* Flexbox direction & wrap */
    .flex-column {
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    /* Flexbox alignment */
    .items-center {
        align-items: center;
    }

    .items-start {
        align-items: flex-start;
    }

    .justify-between {
        justify-content: space-between;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-end {
        justify-content: flex-end;
    }

    /* Gap (using design tokens) */
    .gap-xs {
        gap: var(--space-xs);
    }

    .gap-sm {
        gap: var(--space-sm);
    }

    .gap-md {
        gap: var(--space-md);
    }

    .gap-lg {
        gap: var(--space-lg);
    }

    .gap-xl {
        gap: var(--space-xl);
    }

    /* Text alignment */
    .text-center {
        text-align: center;
    }

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

    /* Text color */
    .text-muted {
        color: var(--color-text-muted);
    }

    .text-secondary {
        color: var(--color-text-secondary);
    }

    .text-success {
        color: var(--color-success);
    }

    .text-danger {
        color: var(--color-danger);
    }

    .text-warning {
        color: var(--color-warning);
    }

    /* Font utilities */
    .font-bold {
        font-weight: 700;
    }

    .font-semibold {
        font-weight: 600;
    }

    .font-lg {
        font-size: 1.25rem;
    }

    .font-xl {
        font-size: 1.5rem;
    }

    .font-2xl {
        font-size: 2rem;
    }

    /* Spacing - margin bottom */
    .mb-0 {
        margin-bottom: 0;
    }

    .mb-xs {
        margin-bottom: var(--space-xs);
    }

    .mb-sm {
        margin-bottom: var(--space-sm);
    }

    .mb-md {
        margin-bottom: var(--space-md);
    }

    .mb-lg {
        margin-bottom: var(--space-lg);
    }

    .mb-xl {
        margin-bottom: var(--space-xl);
    }

    /* Spacing - margin top */
    .mt-0 {
        margin-top: 0;
    }

    .mt-xs {
        margin-top: var(--space-xs);
    }

    .mt-sm {
        margin-top: var(--space-sm);
    }

    .mt-md {
        margin-top: var(--space-md);
    }

    .mt-lg {
        margin-top: var(--space-lg);
    }

    .mt-xl {
        margin-top: var(--space-xl);
    }

    /* Spacing - horizontal auto (centering) */
    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    /* Padding - vertical (top + bottom) */
    .py-sm {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }

    .py-md {
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
    }

    .py-lg {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .py-xl {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    /* Display - additional */
    .d-inline {
        display: inline;
    }

    .d-contents {
        display: contents;
    }

    /* Text transforms */
    .text-uppercase {
        text-transform: uppercase;
    }

    .text-lowercase {
        text-transform: lowercase;
    }

    /* Flexbox - additional */
    .flex-1 {
        flex: 1;
    }

    /* Spacing - margin right */
    .mr-xs {
        margin-right: var(--space-xs);
    }

    .mr-sm {
        margin-right: var(--space-sm);
    }

    /* Spacing - margin left */
    .ml-xs {
        margin-left: var(--space-xs);
    }

    .ml-sm {
        margin-left: var(--space-sm);
    }

    /* Sizing */
    .h-full {
        height: 100%;
    }

    .max-w-xs {
        max-width: 100px;
    }

    .max-w-sm {
        max-width: 400px;
    }

    .max-w-md {
        max-width: 500px;
    }

    .max-w-lg {
        max-width: 700px;
    }

    /* Border radius */
    .rounded-full {
        border-radius: var(--radius-full);
    }

    /* Font - additional */
    .font-mono {
        font-family: monospace;
    }

    .font-sm {
        font-size: 0.875rem;
    }

    /* Grid layouts */
    .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    .grid-auto-fit {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-md);
    }

    /* Dividers */
    .section-divider {
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-border);
    }

    /* Accessibility */
    .sr-only {
        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 - hidden until keyboard-focused (WCAG 2.4.1 Bypass Blocks) */
    .skip-link {
        position: absolute;
        top: 0;
        left: 0;
        padding: var(--space-sm) var(--space-md);
        background: var(--color-primary);
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
        border-radius: 0 0 var(--radius-md) 0;
        box-shadow: var(--shadow-lg);
        z-index: var(--z-skip-link);
        transform: translateY(-100%);
        transition: transform var(--transition-fast);
    }

    .skip-link:focus {
        transform: translateY(0);
        outline: 2px solid var(--color-text-inverted);
        outline-offset: -4px;
    }

    /* Remove default focus outline on the landing anchor target itself */
    #main-content:focus {
        outline: none;
    }

    /* SVG sprite icons rendered by {{icon "name"}} template helper.
       Inherits color via currentColor, never shrinks in flex containers. */
    .icon {
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
    }
}

/* ==========================================================================
   Responsive Styles - Mobile grid stacking
   ========================================================================== */
@media (max-width: 767px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Responsive Styles - Tablet (768px+)
   ========================================================================== */
@media (min-width: 768px) {
    :root {
        /* Default: mini (collapsed, icons-only) on tablet+ */
        --sidebar-width: var(--sidebar-width-mini);
    }

    .app-layout {
        padding-bottom: 0;
    }

    /* Header hidden on tablet+ when sidebar is visible */
    .app-header {
        display: none;
    }

    /* Main content - no top margin when header is hidden */
    .main-content {
        margin-top: 0;
    }

    /* Sidebar visible as mini */
    .sidebar {
        transform: translateX(0);
        width: var(--sidebar-width-mini);
        /* Allow dropdowns to overflow sidebar bounds (user menu) */
        overflow: visible;
    }

    .sidebar-overlay {
        display: none;
    }

    .sidebar-header {
        padding: var(--space-sm);
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* Tablet+: hide sidebar logo (shown in content-top-bar instead) */
    .sidebar-logo {
        display: none;
    }

    .sidebar-close {
        display: none;
    }

    /* Tablet+: show sidebar toggle (hamburger) */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        color: var(--sidebar-text);
        cursor: pointer;
        border-radius: var(--radius-md);
        padding: 0;
        flex-shrink: 0;
        transition: background var(--transition-fast);
    }

    .sidebar-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Mini mode: hide section headers and chevrons */
    .nav-section-header {
        display: none;
    }

    .nav-section-title {
        display: none;
    }

    .nav-section-chevron {
        display: none;
    }

    /* In mini mode, always show all items (ignore collapsed state) */
    .nav-section.collapsed .nav-section-items {
        max-height: none;
    }

    .nav-item {
        padding: 0.75rem;
        justify-content: center;
        overflow: visible;
    }

    .nav-label {
        display: none;
    }

    /* Allow tooltips to overflow outside nav containers in mini mode */
    .sidebar-nav {
        overflow: visible;
    }

    .nav-section-items {
        overflow: visible;
    }

    /* Utility zone in mini mode */
    .sidebar-utility {
        align-items: center;
    }

    .sidebar-utility-item {
        justify-content: center;
        padding: 0.75rem;
        overflow: visible;
        position: relative;
    }

    .sidebar-utility-label {
        display: none;
    }

    .sidebar-utility-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        margin-left: 0;
        min-width: 16px;
        height: 16px;
        font-size: 0.625rem;
        padding: 0 4px;
    }

    /* Tooltips in mini mode for all sidebar elements with data-tooltip */
    .nav-item[data-tooltip]:hover::after,
    .sidebar-toggle[data-tooltip]:hover::after,
    .sidebar-utility-item[data-tooltip]:hover::after,
    .user-menu-trigger[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + var(--space-sm));
        top: 50%;
        transform: translateY(-50%);
        padding: var(--space-xs) var(--space-sm);
        background-color: var(--color-text);
        color: var(--color-text-inverted);
        font-size: 0.75rem;
        border-radius: var(--radius-sm);
        white-space: nowrap;
        z-index: 10;
    }

    /* Toggle and user-menu-trigger need relative positioning for tooltip */
    .sidebar-toggle,
    .user-menu-trigger {
        position: relative;
    }

    /* Hide user menu tooltip when dropdown is open */
    .user-menu.open .user-menu-trigger[data-tooltip]:hover::after {
        display: none;
    }

    /* Tooltips for content-top-bar elements (positioned below) */
    .content-top-bar [data-tooltip] {
        position: relative;
    }

    .content-top-bar [data-tooltip]:hover::after,
    .content-top-bar [data-tooltip]:focus-visible::after {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + var(--space-xs));
        left: 50%;
        transform: translateX(-50%);
        padding: var(--space-xs) var(--space-sm);
        background-color: var(--color-text);
        color: var(--color-text-inverted);
        font-size: 0.75rem;
        border-radius: var(--radius-sm);
        white-space: nowrap;
        z-index: 10;
        pointer-events: none;
    }

    /* Hide tooltip when element with a popup has it open */
    .content-top-bar [aria-haspopup][aria-expanded="true"][data-tooltip]:hover::after,
    .content-top-bar [aria-haspopup][aria-expanded="true"][data-tooltip]:focus-visible::after {
        display: none;
    }

    .sidebar-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    /* User menu in sidebar footer - mini sidebar */
    .sidebar-footer .user-menu {
        width: auto;
    }

    .sidebar-footer .user-menu-trigger {
        justify-content: center;
        padding: var(--space-sm);
    }

    .sidebar-footer .user-name {
        display: none;
    }

    .sidebar-footer .user-menu-chevron {
        display: none;
    }

    .sidebar-footer .user-menu-dropdown {
        left: 0;
        right: auto;
        bottom: 100%;
        top: auto;
        margin-bottom: var(--space-xs);
    }

    /* Main content */
    .main-content {
        margin-left: var(--sidebar-width);
    }

    .content-body {
        padding: var(--space-lg);
        padding-bottom: calc(var(--space-lg) + env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px)));
        scroll-padding-bottom: calc(var(--space-lg) + env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px)));
    }

    /* Tablet+: content-top-bar back in normal flow (not overlaying header) */
    .content-top-bar {
        position: relative;
        top: auto;
        right: auto;
        height: auto;
        padding: var(--space-xs) var(--space-lg);
        background: none;
        pointer-events: auto;
        flex-shrink: 0;
        z-index: var(--z-dropdown);
    }

    /* Logo visible in content-top-bar on tablet+ */
    .content-top-bar-logo {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        text-decoration: none;
        color: var(--color-text);
        font-weight: 600;
        font-size: 1rem;
        margin-right: auto;
        flex-shrink: 0;
    }

    .content-top-bar-logo:hover {
        text-decoration: none;
    }

    .content-top-bar-logo-image {
        height: 48px;
        width: auto;
    }

    /* Admin stats */
    .admin-stats,
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Permissions grid */
    .permissions-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    /* Form card */
    .form-card {
        padding: var(--space-lg);
    }
}

/* ==========================================================================
   Responsive Styles - Sidebar expanded state (tablet+)
   The expanded state is controlled via html.sidebar-expanded class to prevent
   flash on page load. The class is set early by sidebar-init.js.
   ========================================================================== */
@media (min-width: 768px) {
    /* Keep --sidebar-width in sync with the real sidebar width so every
       consumer of var(--sidebar-width) (main-content, selection-bar, any
       future fixed element) picks up the expanded state automatically. */
    html.sidebar-expanded {
        --sidebar-width: var(--sidebar-width-full);
    }

    html.sidebar-expanded .sidebar {
        width: var(--sidebar-width-full);
    }

    /* .main-content's margin-left already reads var(--sidebar-width)
       above, so the override that used to duplicate sidebar-width-full
       here is dropped. Kept the explicit override below only when the
       selector needs to be scoped (sidebar, app-header). */

    html.sidebar-expanded .app-header {
        left: var(--sidebar-width-full);
    }

    html.sidebar-expanded .sidebar-header {
        padding: var(--space-md) var(--space-lg);
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-sm);
    }

    /* Restore scrolling and overflow in expanded mode */
    html.sidebar-expanded .sidebar-nav {
        overflow-y: auto;
    }

    html.sidebar-expanded .nav-section-items {
        overflow: hidden;
    }

    html.sidebar-expanded .nav-section-header {
        display: flex;
    }

    html.sidebar-expanded .nav-section-title {
        display: flex;
    }

    html.sidebar-expanded .nav-section-chevron {
        display: block;
    }

    /* Restore collapsed state in expanded mode */
    html.sidebar-expanded .nav-section.collapsed .nav-section-items {
        max-height: 0;
    }

    html.sidebar-expanded .nav-item {
        overflow: hidden;
        padding: 0.75rem var(--space-lg);
        justify-content: flex-start;
    }

    html.sidebar-expanded .nav-label {
        display: block;
    }

    /* Utility zone in expanded mode */
    html.sidebar-expanded .sidebar-utility-item {
        overflow: hidden;
        padding: var(--space-sm) var(--space-lg);
        justify-content: flex-start;
    }

    html.sidebar-expanded .sidebar-utility-label {
        display: block;
    }

    html.sidebar-expanded .sidebar-utility-badge {
        position: static;
        margin-left: auto;
        min-width: 18px;
        height: 18px;
        font-size: 0.6875rem;
        padding: 0 5px;
    }

    /* Hide all tooltips when sidebar is expanded (labels are visible) */
    html.sidebar-expanded .nav-item[data-tooltip]:hover::after,
    html.sidebar-expanded .sidebar-toggle[data-tooltip]:hover::after,
    html.sidebar-expanded .sidebar-utility-item[data-tooltip]:hover::after,
    html.sidebar-expanded .user-menu-trigger[data-tooltip]:hover::after {
        display: none;
    }

    /* Sidebar footer - expanded sidebar */
    html.sidebar-expanded .sidebar-footer {
        align-items: stretch;
    }

    html.sidebar-expanded .sidebar-footer .user-menu {
        width: 100%;
    }

    html.sidebar-expanded .sidebar-footer .user-menu-trigger {
        justify-content: flex-start;
    }

    html.sidebar-expanded .sidebar-footer .user-name {
        display: block;
    }

    html.sidebar-expanded .sidebar-footer .user-menu-chevron {
        display: block;
    }

    /* Cursor: pointer on mini sidebar to indicate it's clickable to expand */
    html:not(.sidebar-expanded) .sidebar {
        cursor: pointer;
    }

    /* Reset cursor on interactive elements within mini sidebar */
    html:not(.sidebar-expanded) .sidebar a,
    html:not(.sidebar-expanded) .sidebar button {
        cursor: pointer;
    }

    /* Reset cursor when expanded */
    html.sidebar-expanded .sidebar {
        cursor: default;
    }
}

/* ==========================================================================
   Responsive Styles - Desktop (1024px+)
   Unified behavior with tablet: mini by default, .expanded when user opens
   ========================================================================== */
@media (min-width: 1024px) {
    /* Note: overflow: visible for sidebar is inherited from tablet (768px+) */

    /* Larger content padding on desktop */
    .content-body {
        padding: var(--space-xl);
        padding-bottom: calc(var(--space-xl) + env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px)));
        scroll-padding-bottom: calc(var(--space-xl) + env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px)));
    }

    .content-top-bar {
        padding: var(--space-xs) var(--space-xl);
    }

    /* Desktop inherits tablet's mini-by-default behavior.
       No need to override most tablet rules - they work correctly. */
}

/* ==========================================================================
   No Sidebar Layout
   Used when non-admin users have access to only one navigation item.
   The sidebar is hidden and content extends to full width.
   Header is shown since user-menu is not available in sidebar.
   ========================================================================== */
.no-sidebar .main-content {
    margin-left: 0;
    /* Mirror the mobile/header offset so the header reserves status-bar inset */
    margin-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
}

.no-sidebar .app-header {
    display: flex;
    justify-content: space-between;
    left: 0;
}

/* Hide hamburger when there's no sidebar to open */
.no-sidebar .header-menu-toggle {
    display: none;
}

/* Show logo in no-sidebar mode */
.no-sidebar .header-logo {
    display: flex;
}

/* In no-sidebar mode: logo image styling */
.no-sidebar .header-logo-image {
    height: 32px;
    width: auto;
}

/* Show user-menu in header when no sidebar (only way to access profile/logout) */
.no-sidebar .app-header .user-menu {
    display: flex;
}

/* ==========================================================================
   Container queries for content-body children
   ========================================================================== */
@container (min-width: 500px) {
    .dashboard-placeholder {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-stats,
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .codes-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 800px) {
    .dashboard-placeholder {
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-stats,
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Branding Settings
   ======================================== */

.branding-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.branding-item:first-of-type {
    padding-top: 0;
}

.branding-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.branding-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

/* Inline row: preview + buttons aligned horizontally */
.branding-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* Preview container */
.branding-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.branding-preview-logo {
    width: 300px;
    height: 100px;
    padding: 0.75rem;
}

.branding-preview-favicon {
    width: 80px;
    height: 80px;
    padding: 0.5rem;
}

.branding-preview-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.branding-preview-avatar .branding-current-image,
.branding-preview-avatar .branding-preview-image {
    border-radius: 50%;
}

.branding-preview-empty {
    border-style: dashed;
}

.branding-placeholder-icon {
    color: var(--text-tertiary);
}

.branding-preview .branding-current-image,
.branding-preview .branding-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.branding-preview.has-preview .branding-current-image,
.branding-preview.has-preview .branding-placeholder-icon {
    display: none;
}

/* Form inline layout */
.branding-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* Hide file input visually but keep accessible */
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-input:focus + .btn {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Branding form actions and delete button */
.branding-form-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.branding-delete-action {
    margin-top: 0.75rem;
}

/* Branding actions container */
.branding-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Logo dimensions display */
.branding-dimensions {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Theme toggle buttons for logo preview */
.branding-theme-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 0.125rem;
    margin-top: 0.5rem;
}

.branding-theme-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: var(--motion-hover);
}

.branding-theme-btn:hover {
    color: var(--text-secondary);
}

.branding-theme-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Logo preview theme variants */
.branding-preview-logo.preview-dark {
    background: #1f2937;
    border-color: #374151;
}

/* Responsive adjustments for branding */
@media (max-width: 480px) {
    .branding-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .branding-form {
        width: 100%;
    }

    .branding-form .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ========================================
   Logo Theme Variants (light/dark switching)
   Uses data-theme attribute set by theme-init.js.
   When only logo_url is set (no dark variant), no classes are added
   and the single logo displays normally in all themes.
   ======================================== */
.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

/* ========================================
   Theme Customization
   ======================================== */

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-input {
    width: 48px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-bg-elevated);
}

.color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-input::-webkit-color-swatch {
    border-radius: var(--radius-sm);
    border: none;
}

.color-input::-moz-color-swatch {
    border-radius: var(--radius-sm);
    border: none;
}

.color-text-input {
    width: 100px;
    font-family: monospace;
    text-transform: uppercase;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    /* Trailing breathing room so a sibling block (activity timeline,
     * danger zone, validation summary, etc.) does not visually fuse with
     * the Save / Cancel buttons. Symmetric with margin-top above. */
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Settings List - for toggle switches with labels */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: 0.25rem 1rem;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.settings-row:first-child {
    padding-top: var(--space-md);
}

.settings-row:last-child {
    border-bottom: none;
    padding-bottom: var(--space-md);
}

.settings-row-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.settings-row-label {
    font-weight: 500;
    color: var(--color-text);
}

.settings-row-help {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.settings-row-warning {
    font-size: 0.8125rem;
    color: var(--color-warning-dark);
    line-height: 1.4;
}

/* Settings list mobile responsiveness */
@media (max-width: 480px) {
    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .settings-row .toggle-switch {
        align-self: flex-end;
    }
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-muted);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

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

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.page-header h1,
.page-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.page-description {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.page-actions {
    display: flex;
    gap: var(--space-sm);
}

/* Modifier for complex headers (filters, multiple action groups) */
.page-header-with-actions {
    align-items: flex-start;
}

/* ==========================================================================
   Back Button Component
   ========================================================================== */

.back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.back-button-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   Audit Logs Styles
   ========================================================================== */

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    padding: var(--space-xs) 0;
    margin-top: var(--space-xs);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--color-bg-subtle);
    text-decoration: none;
}

.dropdown-item svg {
    color: var(--color-text-secondary);
}

/* Dropdown with descriptions */
.dropdown-menu-wide {
    min-width: 280px;
}

.dropdown-item-desc {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
}

.dropdown-item-title {
    font-weight: 500;
    color: var(--color-text);
}

.dropdown-item-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

/* Audit retention alert */
.audit-retention-alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.audit-retention-alert .alert-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.audit-purge-form {
    margin: 0;
}

/* Audit filters */
.audit-filters-card {
    padding: var(--space-md);
}

.audit-filters-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.audit-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

.audit-filters-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-end;
    padding-top: var(--space-md);
}

/* Audit results info */
.audit-results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.audit-date-range {
    font-style: italic;
}

/* Audit table */
.audit-table {
    min-width: 800px;
}

.audit-col-date {
    width: 140px;
}

.audit-col-user {
    min-width: 150px;
}

.audit-col-action {
    min-width: 150px;
}

.audit-col-entity {
    min-width: 100px;
}

.audit-col-status {
    width: 90px;
}

.audit-col-ip {
    width: 120px;
}

.audit-col-details {
    width: 50px;
    text-align: center;
}

/* Audit cell styles */
.audit-cell-date .audit-date,
.audit-cell-date .audit-time,
.audit-cell-user .audit-user-name,
.audit-cell-user .audit-user-email,
.audit-cell-entity .audit-entity-type,
.audit-cell-entity .audit-entity-id {
    display: block;
}

.audit-date {
    font-weight: 500;
    color: var(--color-text);
}

.audit-time {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.audit-user-name {
    font-weight: 500;
    color: var(--color-text);
}

.audit-user-email {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.audit-user-unknown,
.audit-user-system {
    font-style: italic;
    color: var(--color-text-muted);
}

/* Audit action badge */
.audit-action-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--color-text-secondary);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* Audit entity */
.audit-entity-type {
    font-weight: 500;
    color: var(--color-text);
}

.audit-entity-id {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-family: var(--font-mono, ui-monospace, monospace);
    margin-top: 2px;
}

/* Audit cell IP */
.audit-cell-ip {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* Audit details toggle */
.audit-details-toggle {
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: transform var(--transition-fast);
}

.audit-details-toggle.expanded svg {
    transform: rotate(180deg);
}

/* Audit details row */
.audit-details-row {
    background-color: var(--color-bg-subtle);
}

.audit-details-row td {
    padding: 0 !important;
}

.audit-details-content {
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.audit-changes-json {
    margin: var(--space-sm) 0 0 0;
    padding: var(--space-sm);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
}

/* Pagination — see /static/css/components/pagination.css */
/* Styles moved to a dedicated stylesheet so client-side renderers
   (E2E modules) can opt into the same look without pulling all of
   style.css. */

/* Button icon */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-icon:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-text);
}

/* Button outline danger */
.btn-outline-danger {
    color: var(--color-danger);
    background-color: transparent;
    border: 1px solid var(--color-danger);
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: var(--color-danger);
}

/* ==========================================================================
   Permissions Admin Page
   ========================================================================== */

/* Info card with icon */
.permissions-info-card {
    margin-bottom: var(--space-md);
}

.card-body-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: light-dark(#e8f4fd, rgba(59, 130, 246, 0.1));
    border: 1px solid light-dark(#b8daff, rgba(59, 130, 246, 0.3));
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.card-body-info .info-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 2px;
}

.card-body-info p {
    margin: 0;
    font-size: 0.875rem;
    color: light-dark(#004085, var(--color-text-secondary));
    line-height: 1.5;
}

/* Scope legend */
.scope-legend {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Scope badges */
.scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.scope-badge svg {
    flex-shrink: 0;
}

.scope-badge.scope-global {
    background: light-dark(#e3f2fd, rgba(33, 150, 243, 0.15));
    color: light-dark(#1565c0, #64b5f6);
}

.scope-badge.scope-owned {
    background: light-dark(#fff3e0, rgba(255, 152, 0, 0.15));
    color: light-dark(#e65100, #ffb74d);
}

.scope-badge.scope-relation {
    background: light-dark(#f3e5f5, rgba(156, 39, 176, 0.15));
    color: light-dark(#7b1fa2, #ce93d8);
}

.scope-badge .relation-code {
    opacity: 0.75;
    margin-left: 0.125rem;
    font-weight: 400;
}

/* Filter card */
.permissions-filter-card {
    margin-bottom: var(--space-md);
}

.permissions-filter-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
}

.permissions-filter-form .form-group {
    margin: 0;
    min-width: 200px;
}

/* Module card */
.module-card {
    margin-bottom: var(--space-md);
}

.module-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
}

.module-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.permission-count {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Permission code */
.permission-code {
    background: var(--color-bg-subtle);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    color: var(--color-text);
}

/* Page header info badge */
.page-header-info {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-left: auto;
}

/* Responsive page header and audit styles */
@media (max-width: 768px) {
    /* Page header responsive */
    .page-header {
        gap: var(--space-sm);
    }

    .page-header h1,
    .page-header h2,
    .page-title {
        font-size: 1.25rem;
    }

    /* Title followed by action button: stack vertically */
    .page-header .page-title:first-child {
        flex: 1 1 100%;
    }

    /* Back button + title pattern: keep on same line */
    .page-header > .btn:first-child + .page-title {
        flex: 1 1 auto;
        font-size: 1.125rem;
    }

    /* Action buttons take full width */
    .page-header > .btn:last-child:not(.btn-sm):not(.btn-small) {
        width: 100%;
    }

    /* Back button stays compact */
    .page-header > .btn.btn-sm:first-child,
    .page-header > .btn.btn-small:first-child {
        width: auto;
        flex-shrink: 0;
    }

    .page-header-with-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .page-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Audit-specific responsive styles */
    .audit-filters-row {
        grid-template-columns: 1fr;
    }

    .audit-filters-actions {
        flex-direction: column;
    }

    .audit-filters-actions .btn {
        width: 100%;
    }

    .audit-retention-alert {
        flex-direction: column;
        align-items: stretch;
    }

    .audit-purge-form {
        text-align: right;
    }
}

/* ==========================================================================
   Language Management - Admin section
   ========================================================================== */

/* Language badges */
.language-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Static translations table */
.static-translations-table .col-key {
    width: 40%;
    font-size: 0.875rem;
}

.static-translations-table .col-key code {
    word-break: break-all;
}

.static-translations-table .col-value {
    width: 60%;
}

/* Static translations filters */
.static-filters {
    margin-bottom: 0;
}

.static-filters .form-row {
    align-items: flex-end;
}

.static-filters .form-group-actions {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0;
}

/* Translation progress indicators */
.translation-progress {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.translation-progress.progress-complete {
    background-color: light-dark(#dcfce7, rgba(34, 197, 94, 0.2));
    color: light-dark(#166534, #86efac);
}

.translation-progress.progress-partial {
    background-color: light-dark(#fef9c3, rgba(245, 158, 11, 0.2));
    color: light-dark(#854d0e, #fcd34d);
}

.translation-progress.progress-none {
    background-color: light-dark(#fee2e2, rgba(239, 68, 68, 0.2));
    color: light-dark(#991b1b, #fca5a5);
}

/* Translation card for edit page */
.translation-card {
    margin-bottom: 1.5rem;
}

.translation-card .card-title {
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* Translation tabs */
.translation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.translation-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: var(--transition-fast);
    position: relative;
}

.translation-tab:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

.translation-tab.active {
    background: var(--color-primary);
    color: white;
}

.translation-tab .tab-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--color-warning);
    color: white;
    border-radius: 50%;
}

.translation-tab.active .tab-warning {
    background: white;
    color: var(--color-warning);
}

/* Translation panels */
.translation-panel {
    display: none;
}

.translation-panel.active {
    display: block;
}

/* Translation reference */
.translation-reference {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-primary);
}

.translation-reference label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.translation-reference .reference-text {
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: pre-wrap;
}

/* Translation input */
.translation-input {
    width: 100%;
    min-height: 80px;
    resize: vertical;
}

/* Responsive for translation interface */
@media (max-width: 768px) {
    .translation-tabs {
        flex-direction: column;
        gap: 0.125rem;
    }

    .translation-tab {
        border-radius: var(--radius-sm);
        text-align: left;
    }

    .static-filters .form-row {
        flex-direction: column;
    }

    .static-filters .form-group-actions {
        flex-direction: column;
    }

    .static-filters .form-group-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   TOTP Setup Styles
   ========================================================================== */

/* TOTP setup container */
.totp-setup {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.totp-setup-step {
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.totp-setup-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.totp-setup-step h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.totp-setup-step p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

/* QR code container */
.totp-qr-container {
    text-align: center;
}

.totp-qr-code {
    display: inline-block;
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.totp-qr-code img {
    display: block;
    max-width: 256px;
    height: auto;
}

/* Manual secret entry */
.totp-secret-manual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.totp-secret-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.totp-secret-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.1em;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    user-select: all;
}

/* TOTP verify form */
.totp-verify-form {
    max-width: 300px;
    margin: 0 auto;
}

.totp-verify-form input[type="text"] {
    text-align: center;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* TOTP disable form (inline in profile) */
.totp-disable-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.totp-disable-form .form-group-inline {
    flex: 1;
    min-width: 200px;
}

.totp-disable-form .form-group-inline input {
    width: 100%;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .totp-secret-manual {
        padding: var(--space-sm);
    }

    .totp-secret-code {
        font-size: 0.75rem;
        word-break: break-all;
    }

    .totp-disable-form {
        flex-direction: column;
    }

    .totp-disable-form .form-group-inline {
        width: 100%;
    }

    .totp-disable-form .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Inline Confirmation Component
   ========================================================================== */

/* Inline confirm wrapper */
.inline-confirm-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Inline confirm buttons */
.inline-confirm-yes,
.inline-confirm-no {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    cursor: pointer;
    transition: var(--motion-hover);
    white-space: nowrap;
}

.inline-confirm-yes {
    background: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}

.inline-confirm-yes:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

.inline-confirm-no {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

.inline-confirm-no:hover {
    background: var(--color-bg-subtle);
}

/* Active state for element being confirmed */
.inline-confirm-active {
    display: inline-flex !important;
    align-items: center;
}

/* Focus visible for keyboard navigation */
.inline-confirm-yes:focus-visible,
.inline-confirm-no:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Inline Confirm - Floating Mode
   -------------------------------------------------------------------------- */

/* Source element marker */
.inline-confirm-source {
    position: relative;
}

/* Floating bubble container */
.inline-confirm-floating {
    position: absolute;
    z-index: var(--z-widget);
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

/* Visible state */
.inline-confirm-floating-visible {
    opacity: 1;
    transform: scale(1);
}

/* Hiding state (exit animation) */
.inline-confirm-floating-hiding {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 100ms ease-in, transform 100ms ease-in;
}

/* Content wrapper */
.inline-confirm-floating-content {
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    padding: 0.875rem 1rem;
    min-width: 180px;
    max-width: 280px;
    text-align: center;
}

/* Confirmation text */
.inline-confirm-floating-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text, #111827);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Action buttons container */
.inline-confirm-floating-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Floating buttons */
.inline-confirm-floating-yes,
.inline-confirm-floating-no {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md, 8px);
    border: 1px solid;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
    min-width: 70px;
    /* Touch-friendly size (min 44px height) */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inline-confirm-floating-yes {
    background: var(--color-danger, #dc2626);
    color: white;
    border-color: var(--color-danger, #dc2626);
}

.inline-confirm-floating-yes:hover {
    background: var(--color-danger-hover, #b91c1c);
    border-color: var(--color-danger-hover, #b91c1c);
}

.inline-confirm-floating-yes:active {
    transform: scale(0.98);
}

/* Success variant for confirm button */
.inline-confirm-floating-yes.btn-success {
    background: var(--color-success, #22c55e);
    border-color: var(--color-success, #22c55e);
}

.inline-confirm-floating-yes.btn-success:hover {
    background: var(--color-success-hover, #16a34a);
    border-color: var(--color-success-hover, #16a34a);
}

/* Warning variant for confirm button */
.inline-confirm-floating-yes.btn-warning {
    background: var(--color-warning, #f59e0b);
    border-color: var(--color-warning, #f59e0b);
    color: #000;
}

.inline-confirm-floating-yes.btn-warning:hover {
    background: var(--color-warning-hover, #d97706);
    border-color: var(--color-warning-hover, #d97706);
}

/* Cancel button */
.inline-confirm-floating-no {
    background: var(--color-bg-subtle, #f3f4f6);
    color: var(--color-text, #111827);
    border-color: var(--color-border, #e5e7eb);
}

.inline-confirm-floating-no:hover {
    background: var(--color-bg-muted, #e5e7eb);
    border-color: var(--color-border-strong, #d1d5db);
}

.inline-confirm-floating-no:active {
    transform: scale(0.98);
}

/* Focus visible for keyboard navigation */
.inline-confirm-floating-yes:focus-visible,
.inline-confirm-floating-no:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* Arrow pointer */
.inline-confirm-floating-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    transform: rotate(45deg);
    pointer-events: none;
}

/* Arrow position based on placement */
.inline-confirm-floating[data-placement="top"] .inline-confirm-floating-arrow {
    bottom: -7px;
    border-top: none;
    border-left: none;
}

.inline-confirm-floating[data-placement="bottom"] .inline-confirm-floating-arrow {
    top: -7px;
    border-bottom: none;
    border-right: none;
}

/* Dark mode */
[data-theme="dark"] .inline-confirm-floating-content,
.dark .inline-confirm-floating-content {
    background: var(--color-bg-elevated, #1f2937);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .inline-confirm-floating-arrow,
.dark .inline-confirm-floating-arrow {
    background: var(--color-bg-elevated, #1f2937);
    border-color: var(--color-border, #374151);
}

[data-theme="dark"] .inline-confirm-floating-no,
.dark .inline-confirm-floating-no {
    background: var(--color-bg-subtle, #374151);
    border-color: var(--color-border, #4b5563);
}

[data-theme="dark"] .inline-confirm-floating-no:hover,
.dark .inline-confirm-floating-no:hover {
    background: var(--color-bg-muted, #4b5563);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .inline-confirm-floating,
    .inline-confirm-floating-visible,
    .inline-confirm-floating-hiding {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   Forced-colors mode (Windows High Contrast / system-level overrides)

   When the OS substitutes its own palette for accessibility reasons, the
   browser ignores most colours we set. The CanvasText / Canvas / Highlight
   / ButtonFace system colour keywords are guaranteed to remain visible,
   so we use them to keep cards, inputs and focus rings legible.

   `forced-color-adjust: auto` is the default — we only override it locally
   on subtle UI (skeletons, decorative gradients) where forced colours
   would create an opaque rectangle that hides content.
   ========================================================================== */
@media (forced-colors: active) {
    /* Make every interactive surface keep a visible border, even when
       our background tokens are flattened by the OS. */
    .card,
    .auth-card,
    .modal,
    .dropdown,
    .toast,
    .alert,
    :where(
        select,
        textarea,
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="number"],
        input[type="tel"],
        input[type="url"],
        input[type="password"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="time"],
        input[type="week"]
    ) {
        border: 1px solid CanvasText;
    }

    /* Buttons: rely on system Button* colours so disabled / hover states
       remain distinguishable. */
    .btn {
        border: 1px solid ButtonText;
        forced-color-adjust: none;
        background-color: ButtonFace;
        color: ButtonText;
    }
    .btn-primary,
    .btn-danger,
    .btn-success {
        background-color: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }
    .btn:disabled,
    .btn[disabled] {
        color: GrayText;
        border-color: GrayText;
    }

    /* Focus ring: replace the brand-coloured halo with the system Highlight
       so focus stays visible on any forced palette. */
    *:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }

    /* Active sidebar item: the emerald accent bar disappears under forced
       colours; fall back to a system underline. */
    .nav-item.active {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    .nav-item.active::before {
        background-color: Highlight;
    }

    /* Skeletons would render as opaque blocks — fade them out. */
    .skeleton::after {
        animation: none;
        background-image: none;
    }

    /* Sprite icons: keep them stroked so they remain visible. */
    .icon use {
        forced-color-adjust: auto;
    }
}

/* ==========================================================================
   Higher contrast preference (user explicitly requests more contrast,
   independent of the forced-colors OS feature). Tightens borders and
   removes the subtle text variants.
   ========================================================================== */
@media (prefers-contrast: more) {
    :root {
        --color-border-subtle: var(--color-border-strong);
        --color-border:        var(--color-border-strong);
        --color-text-muted:    var(--color-text-secondary);
        --color-text-subtle:   var(--color-text-secondary);
    }

    .card,
    .auth-card {
        border-width: 2px;
    }

    a:not(.btn) {
        text-decoration: underline;
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .inline-confirm-floating-content {
        min-width: 160px;
        padding: 0.75rem;
    }

    .inline-confirm-floating-text {
        font-size: 0.875rem;
    }

    .inline-confirm-floating-yes,
    .inline-confirm-floating-no {
        padding: 0.5rem 0.75rem;
        min-width: 60px;
    }
}

/* ==========================================================================
   Clickable Rows
   ========================================================================== */

.clickable-row[data-href] {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.clickable-row[data-href]:hover {
    background-color: var(--color-bg-subtle);
}

/* Prevent propagation on interactive elements within rows */
.clickable-row a,
.clickable-row button,
.clickable-row input,
.clickable-row select,
.clickable-row .no-propagate {
    cursor: auto;
}

/* ==========================================================================
   Drag & Drop Component
   ========================================================================== */

/* Drag handle */
.drag-handle {
    cursor: move;
    cursor: grab;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
    touch-action: none;
    user-select: none;
}

.drag-handle:hover {
    color: var(--color-text);
}

.drag-handle:active {
    cursor: grabbing;
}

/* Item being dragged (position:fixed, floating above content) */
.dragging {
    box-shadow: var(--shadow-lg);
    cursor: grabbing !important;
}

/* Placeholder during drag */
.drag-placeholder {
    background: var(--color-bg-subtle);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    opacity: 0.5;
}

/* Table row placeholder */
tr.drag-placeholder {
    border-radius: 0;
}

tr.drag-placeholder td {
    background: var(--color-bg-subtle);
    border-top: 2px dashed var(--color-border);
    border-bottom: 2px dashed var(--color-border);
}

/* ==========================================================================
   Timeline Component
   Compact vertical timeline with colored dots and connecting line.
   Used for activity history on detail pages and workspace activity feeds.
   ========================================================================== */

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    position: relative;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* Vertical connecting line between dots */
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
}

/* Colored dot */
.timeline-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    background: var(--color-text-muted);
}

.timeline-dot-create  { background: var(--color-success); }
.timeline-dot-update  { background: var(--color-primary); }
.timeline-dot-delete  { background: var(--color-danger); }
.timeline-dot-restore { background: var(--color-warning); }

.timeline-content {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
}

.timeline-text {
    font-size: 0.875rem;
    color: var(--color-text);
}

.timeline-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ==========================================================================
   Empty State Component
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    color: var(--color-text-muted);
}

/* Inline empty-state usage (on td/p without sub-components) */
td.empty-state,
p.empty-state {
    font-style: italic;
    padding: var(--space-md) 0;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.empty-state-icon svg {
    width: 3.5rem;
    height: 3.5rem;
    stroke: currentColor;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.empty-state-text {
    font-size: 1rem;
    margin-bottom: var(--space-lg);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-action {
    margin-top: var(--space-lg);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .empty-state {
        padding: var(--space-xl) var(--space-md);
    }

    .empty-state-icon {
        font-size: 3rem;
    }

    .empty-state-icon svg {
        width: 2.5rem;
        height: 2.5rem;
    }

    .empty-state-title {
        font-size: 1.25rem;
    }

    .empty-state-text {
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   Profile Accordion Sections
   Native <details><summary> for progressive enhancement (works without JS)
   ========================================================================== */

.profile-section {
    background-color: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.profile-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    min-height: var(--touch-target);
    cursor: pointer;
    user-select: none;
    list-style: none;
    background-color: var(--color-bg-elevated);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-fast);
}

.profile-section summary::-webkit-details-marker {
    display: none;
}

.profile-section summary:hover {
    background-color: var(--color-bg-subtle);
}

.profile-section summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.profile-section[open] summary {
    border-bottom-color: var(--color-border);
}

.profile-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

.profile-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.profile-section-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.profile-section[open] .profile-section-chevron {
    transform: rotate(180deg);
}

.profile-section-content {
    padding: var(--space-lg);
}

/* Profile subsections (within accordion content) */
.profile-subsection {
    padding: var(--space-md);
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

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

.profile-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.profile-subsection-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.profile-subsection-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md) 0;
}

.profile-subsection-status {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.profile-subsection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Avatar section within profile */
.profile-avatar-section {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.profile-avatar-preview {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--color-border);
}

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

.profile-avatar-preview .avatar-placeholder-icon {
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
}

.profile-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.profile-avatar-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* Form help text */
.form-help {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
    margin-bottom: 0;
}

/* Password requirements list (profile page simple list) */
.profile-section ul.password-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-top: var(--space-sm);
    padding: 0;
    list-style: none;
}

.profile-section ul.password-requirements li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.profile-section ul.password-requirements li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Responsive: Tablet and up */
@media (min-width: 768px) {
    .profile-section {
        margin-bottom: var(--space-lg);
    }

    .profile-section-content {
        padding: var(--space-xl);
    }

    .profile-section-content .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .profile-section-content .form-row .form-group {
        margin-bottom: 0;
    }

    .profile-avatar-section {
        gap: var(--space-xl);
    }

    .profile-avatar-preview {
        width: 120px;
        height: 120px;
    }

    .profile-avatar-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
    .profile-section summary {
        padding: var(--space-md);
    }

    .profile-section-content {
        padding: var(--space-md);
    }

    .profile-avatar-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-avatar-actions {
        width: 100%;
    }

    .profile-avatar-actions .btn {
        width: 100%;
    }

    .profile-subsection-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-subsection-actions {
        flex-direction: column;
    }

    .profile-subsection-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Admin Modules Page
   ========================================================================== */

/* Module name cell with dependency indicators */
.module-name-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.module-name-cell strong {
    font-weight: 600;
}

.module-id {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.module-deps-indicator {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.dep-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
}

.dep-requires {
    background-color: light-dark(#e0f2fe, rgba(56, 189, 248, 0.15));
    color: light-dark(#0369a1, #7dd3fc);
}

.dep-required-by {
    background-color: light-dark(#fef3c7, rgba(245, 158, 11, 0.15));
    color: light-dark(#b45309, #fcd34d);
}

.dep-optional {
    background-color: light-dark(#f3e8ff, rgba(168, 85, 247, 0.15));
    color: light-dark(#7e22ce, #c084fc);
}

.dep-badge svg {
    width: 10px;
    height: 10px;
}

/* Module features badges */
.module-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    transition: background-color 0.2s, color 0.2s;
}

.feature-badge:hover {
    background-color: var(--color-primary);
    color: white;
}

.feature-badge svg {
    width: 14px;
    height: 14px;
}

.feature-badge-special {
    background-color: light-dark(#dbeafe, rgba(59, 130, 246, 0.2));
    color: light-dark(#1d4ed8, #60a5fa);
}

/* Module row disabled state */
.module-row-disabled {
    opacity: 0.6;
}

.module-row-disabled .module-name-cell strong {
    color: var(--color-text-muted);
}

/* Module overview card (detail page) */
.module-overview-card {
    margin-bottom: var(--space-md);
}

.module-header-detail {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
}

.module-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.module-info .module-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.module-id-code {
    font-size: 0.8125rem;
    background-color: var(--color-bg-subtle);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.module-description {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.meta-value {
    font-weight: 500;
}

/* Capabilities grid */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}

.capability-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
}

.capability-item svg {
    flex-shrink: 0;
}

.capability-active {
    background-color: light-dark(#dcfce7, rgba(34, 197, 94, 0.15));
    color: light-dark(#166534, #86efac);
}

.capability-active svg {
    stroke: light-dark(#16a34a, #4ade80);
}

.capability-inactive {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.capability-inactive svg {
    opacity: 0.5;
}

.capability-special {
    background-color: light-dark(#dbeafe, rgba(59, 130, 246, 0.2));
    color: light-dark(#1d4ed8, #60a5fa);
}

.capability-special svg {
    stroke: light-dark(#2563eb, #3b82f6);
}

.capability-label {
    font-weight: 500;
    font-size: 0.875rem;
}

.capability-detail {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Permissions list (detail page) */
.permissions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.permission-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

.permission-scope {
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.scope-global {
    background-color: light-dark(#fee2e2, rgba(239, 68, 68, 0.2));
    color: light-dark(#991b1b, #fca5a5);
}

.scope-owned {
    background-color: light-dark(#dcfce7, rgba(34, 197, 94, 0.2));
    color: light-dark(#166534, #86efac);
}

.scope-workspace {
    background-color: light-dark(#dbeafe, rgba(59, 130, 246, 0.2));
    color: light-dark(#1d4ed8, #60a5fa);
}

.scope-relation {
    background-color: light-dark(#fef3c7, rgba(245, 158, 11, 0.2));
    color: light-dark(#b45309, #fcd34d);
}

.permission-desc {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    flex: 1;
}

/* Navigation items list */
.nav-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-item-row {
    padding: 0.75rem;
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

.nav-item-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.nav-context-badge {
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.context-app {
    background-color: light-dark(#dcfce7, rgba(34, 197, 94, 0.2));
    color: light-dark(#166534, #86efac);
}

.context-admin {
    background-color: light-dark(#fef3c7, rgba(245, 158, 11, 0.2));
    color: light-dark(#b45309, #fcd34d);
}

.nav-item-label {
    font-weight: 500;
}

.nav-item-url {
    font-size: 0.75rem;
    background-color: var(--color-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.nav-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.nav-item-admin-only {
    color: light-dark(#dc2626, #f87171);
    font-weight: 500;
}

/* Widgets list */
.widgets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.widget-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

.widget-type {
    font-size: 0.75rem;
    background-color: var(--color-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.widget-name {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Relations list */
.relations-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.relation-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

.relation-code {
    font-size: 0.75rem;
    background-color: var(--color-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.relation-flow {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.relation-name {
    color: var(--color-text);
    font-size: 0.875rem;
}

/* Dependency type badges (detail page) */
.dep-type-badge {
    display: inline-block;
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-full, 9999px);
    font-weight: 500;
    line-height: 1.4;
}

.dep-type-required {
    background-color: light-dark(#e0f2fe, rgba(56, 189, 248, 0.15));
    color: light-dark(#0369a1, #7dd3fc);
}

.dep-type-optional {
    background-color: light-dark(#f3e8ff, rgba(168, 85, 247, 0.15));
    color: light-dark(#7e22ce, #c084fc);
}

/* Module action buttons group */
.module-action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Dependencies section improvements */
.dependency-name {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.875rem;
    text-decoration: none;
    color: inherit;
}

.dependency-name:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

/* Stats card for modules */
.modules-stats-card {
    margin-bottom: var(--space-md);
}

.modules-info-card {
    margin-bottom: var(--space-md);
}

.modules-info-card .card-body-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.modules-info-card .info-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .module-header-detail {
        flex-direction: column;
        gap: var(--space-md);
    }

    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .permission-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-item-main {
        flex-direction: column;
        align-items: flex-start;
    }
}