/**
 * Main Stylesheet
 *
 * Documentation-first, utilitarian interface.
 * Static UI, hard edges, content-forward design.
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
    /* Light theme (default) */
    --bg-page: #e8eef4;
    --bg-surface: #f4f7fa;
    --bg-elevated: #ffffff;
    --bg-muted: #dde4eb;

    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #6a6a7a;
    --text-inverse: #ffffff;

    --border-color: #b0b8c4;
    --border-strong: #808890;
    --border-muted: #c8d0d8;

    --accent-primary: #0066cc;
    --accent-primary-hover: #004c99;
    --accent-secondary: #e67300;
    --accent-secondary-hover: #cc6600;

    /* Status colors - classic defaults */
    --status-success: #228b22;
    --status-success-bg: #d4edda;
    --status-success-border: #228b22;
    --status-success-text: #155724;

    --status-warning: #cc8800;
    --status-warning-bg: #fff3cd;
    --status-warning-border: #cc8800;
    --status-warning-text: #664400;

    --status-error: #cc0000;
    --status-error-bg: #f8d7da;
    --status-error-border: #cc0000;
    --status-error-text: #721c24;

    --status-info: #0066cc;
    --status-info-bg: #d1ecf1;
    --status-info-border: #0066cc;
    --status-info-text: #0c5460;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;

    --line-height: 1.5;

    /* Scanline texture (very subtle) */
    --scanline-opacity: 0.015;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #1a2332;
        --bg-surface: #232d3f;
        --bg-elevated: #2a3548;
        --bg-muted: #333f52;

        --text-primary: #e8eef4;
        --text-secondary: #b8c4d0;
        --text-muted: #8899aa;
        --text-inverse: #1a1a2e;

        --border-color: #4a5668;
        --border-strong: #6a7888;
        --border-muted: #3a4658;

        --accent-primary: #5599dd;
        --accent-primary-hover: #77bbff;
        --accent-secondary: #f8a34e;
        --accent-secondary-hover: #fcb976;

        /* Status colors - dark variants */
        --status-success-bg: #1a3a1a;
        --status-success-border: #2a8b2a;
        --status-success-text: #6cd86c;

        --status-warning-bg: #3a3010;
        --status-warning-border: #cc9900;
        --status-warning-text: #ffcc44;

        --status-error-bg: #3a1a1a;
        --status-error-border: #cc3333;
        --status-error-text: #ff6666;

        --status-info-bg: #1a2a3a;
        --status-info-border: #3388cc;
        --status-info-text: #66bbff;

        --scanline-opacity: 0.02;
    }
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--text-base);
    line-height: var(--line-height);
}

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background-color: var(--bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Subtle scanline texture */
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, var(--scanline-opacity)) 2px,
        rgba(0, 0, 0, var(--scanline-opacity)) 4px
    );
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

h1 { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
h4, h5, h6 { font-size: var(--text-base); margin-bottom: var(--space-sm); }

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

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

code {
    background: var(--bg-muted);
    padding: 2px 6px;
    border: 1px solid var(--border-muted);
    font-size: var(--text-sm);
}

pre {
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    padding: var(--space-md);
    overflow-x: auto;
}

/* ==========================================================================
   Links
   ========================================================================== */

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

a:hover {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container--narrow {
    max-width: 600px;
}

.container--wide {
    max-width: 1400px;
}

/* ==========================================================================
   Header / Top Navigation
   ========================================================================== */

.site-header {
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--border-strong);
    padding: var(--space-md) 0;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.site-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.site-title:hover {
    text-decoration: none;
}

.site-logo {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
}

.site-logo--dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .site-logo--light {
        display: none;
    }
    .site-logo--dark {
        display: block;
    }
}

/* Support notice in header */
.support-notice {
    display: flex;
    flex-direction: column;
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.3;
    text-align: right;
}

.support-notice__text {
    white-space: nowrap;
}

.support-notice__email {
    color: var(--accent-secondary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.support-notice__email:hover {
    text-decoration: underline;
}

/* Mobile support banner */
.support-notice-mobile {
    display: none;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-muted);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-secondary);
    text-align: center;
}

.support-notice-mobile a {
    color: var(--accent-secondary);
    font-weight: 600;
    text-decoration: none;
}

.support-notice-mobile a:hover {
    text-decoration: underline;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.site-nav > a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    border-left: 1px solid var(--border-muted);
}

.site-nav > a:first-child {
    border-left: none;
}

.site-nav > a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.site-nav > a.active {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-muted);
}

/* ==========================================================================
   Navigation Dropdown
   ========================================================================== */

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown__toggle {
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    border-left: 1px solid var(--border-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    font-family: inherit;
}

.nav-dropdown__toggle:hover {
    color: var(--text-primary);
}

.nav-dropdown__toggle::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 2px;
}

.nav-dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: var(--bg-elevated);
    border: 2px solid var(--border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 2px;
}

.nav-dropdown.is-open .nav-dropdown__menu {
    display: block;
}

.nav-dropdown__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-muted);
    border-left: none;
}

.nav-dropdown__menu a:last-child {
    border-bottom: none;
}

.nav-dropdown__menu a:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
    text-decoration: none;
}

.nav-dropdown__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--status-warning);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: 10px;
}

.nav-dropdown__badge--zero {
    background: var(--bg-muted);
    color: var(--text-muted);
}

.nav-dropdown__divider {
    height: 1px;
    background: var(--border-strong);
    margin: 0;
}

/* ==========================================================================
   Mobile Navigation Toggle (Hamburger)
   ========================================================================== */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 4px;
    background: none;
    border: 1px solid var(--border-muted);
    cursor: pointer;
}

.nav-toggle:hover {
    border-color: var(--border-color);
}

.nav-toggle:focus {
    outline: none;
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    transition: transform 0.2s, opacity 0.2s;
}

/* Hamburger animation when open */
.site-header.nav-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-header.nav-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.site-header.nav-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

.site-main {
    flex: 1;
    padding: var(--space-xl) 0;
}

/* ==========================================================================
   Cards / Panels
   ========================================================================== */

.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.card--emphasized {
    border-width: 2px;
}

.card h2:first-child,
.card h3:first-child {
    margin-top: 0;
}

.card__header {
    border-bottom: 1px solid var(--border-muted);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
}

.card__section {
    border-top: 1px solid var(--border-muted);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
}

/* ==========================================================================
   Messages / Alerts
   ========================================================================== */

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

.message {
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    border: 1px solid;
    font-size: var(--text-sm);
}

.message.success {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

.message.error {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-text);
}

.message.warning {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.message.info {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-text);
}

/* ==========================================================================
   Forms
   ========================================================================== */

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

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--bg-page);
}

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

.form-group .help-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.form-group .errors {
    color: var(--status-error);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

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

/* Radio and checkbox groups */
.radio-group,
.checkbox-group {
    margin-top: var(--space-sm);
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: flex-start;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-muted);
    cursor: pointer;
}

.radio-option:hover,
.checkbox-option:hover {
    border-color: var(--border-color);
    background: var(--bg-muted);
}

.radio-option input,
.checkbox-option input {
    margin-right: var(--space-md);
    margin-top: 3px;
}

.option-label {
    font-weight: 600;
    color: var(--text-primary);
}

.option-description {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid;
    background: transparent;
}

.btn:hover {
    text-decoration: none;
}

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

/* Primary button - filled */
.btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary button - bordered */
.btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

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

/* Success button */
.btn-success {
    background: var(--status-success);
    border-color: var(--status-success);
    color: #ffffff;
}

.btn-success:hover {
    background: #1a6b1a;
    border-color: #1a6b1a;
}

/* Warning button */
.btn-warning {
    background: var(--status-warning);
    border-color: var(--status-warning);
    color: #ffffff;
}

.btn-warning:hover {
    background: #aa7000;
    border-color: #aa7000;
}

/* Danger button */
.btn-danger {
    background: var(--status-error);
    border-color: var(--status-error);
    color: #ffffff;
}

.btn-danger:hover {
    background: #aa0000;
    border-color: #aa0000;
}

/* Button sizes */
.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
}

.btn-lg {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Text-link button (no border) */
.btn-link {
    background: transparent;
    border: none;
    color: var(--accent-primary);
    padding: var(--space-xs) var(--space-sm);
}

.btn-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Dropdowns
   ========================================================================== */

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

.dropdown-toggle::after {
    content: "▾";
    margin-left: var(--space-xs);
    font-size: 0.75em;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 180px;
    padding: var(--space-xs) 0;
    margin-top: 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}

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

.dropdown-item .text-muted {
    font-size: var(--text-xs);
}

/* Modal header - hidden on desktop, shown on mobile */
.dropdown-menu__header {
    display: none;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th,
.table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border: 1px solid var(--border-muted);
}

.table th {
    background: var(--bg-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

/* Zebra striping */
.table tbody tr:nth-child(even) {
    background: var(--bg-surface);
}

.table tbody tr:nth-child(odd) {
    background: var(--bg-elevated);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid;
}

.badge-success {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

.badge-warning {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.badge-error,
.badge-danger,
.badge-critical {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-text);
}

.badge-info {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-text);
}

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

/* Strong variant for important badges */
.badge-critical-strong {
    background: var(--status-error);
    border-color: var(--status-error);
    color: #ffffff;
}

.badge-important {
    background: var(--status-warning);
    border-color: var(--status-warning);
    color: #ffffff;
}

.badge--hidden {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-text);
    margin-left: var(--space-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge--hidden svg {
    margin-top: 1px;
}

/* ==========================================================================
   Internal-Only Fields
   Reusable styles for fields/sections visible only to internal users
   ========================================================================== */

/* Container for internal-only content sections */
.internal-only-field {
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

/* Header with icon for internal-only sections */
.internal-only-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--status-warning-text);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.internal-only-header h4,
.internal-only-header h5 {
    margin: 0;
    color: inherit;
}

/* Internal-only icon (person silhouette) */
.internal-only-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--status-warning-text);
    flex-shrink: 0;
}

.internal-only-icon svg {
    width: 16px;
    height: 16px;
}

/* Smaller icon variant */
.internal-only-icon--sm svg {
    width: 12px;
    height: 12px;
}

/* Content area within internal-only field */
.internal-only-field__content {
    color: var(--text-primary);
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-muted);
}

.breadcrumb a:hover {
    color: var(--text-primary);
}

.breadcrumb__separator {
    margin: 0 var(--space-sm);
    color: var(--border-color);
}

/* ==========================================================================
   Info boxes
   ========================================================================== */

.info-box {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    background: var(--bg-surface);
    border: 1px solid var(--border-muted);
    padding: var(--space-xs) var(--space-sm);
}

.info-box__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.info-box__label::after {
    content: ":";
}

.info-box__value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* ==========================================================================
   Details / Summary (expandable sections)
   ========================================================================== */

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

details summary {
    cursor: pointer;
    color: var(--accent-primary);
    font-size: var(--text-sm);
    padding: var(--space-sm) 0;
}

details summary:hover {
    text-decoration: underline;
}

details[open] summary {
    margin-bottom: var(--space-sm);
}

/* ==========================================================================
   Empty states
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    color: var(--text-muted);
}

.empty-state p {
    margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: #a9bbcd;
    border-top: 2px solid var(--border-strong);
    padding: var(--space-md) 0;
    margin-top: auto;
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

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

.footer-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.footer-image {
    height: 40px;
    width: auto;
}

.footer-text {
    font-size: var(--text-sm);
    color: #ffffff;
}

.site-footer a {
    font-size: var(--text-sm);
    color: #ffffff;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .site-footer {
        background: #2a3548;
    }
}

/* ==========================================================================
   Legal Pages (Privacy, Terms)
   ========================================================================== */

.legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-lg) 0;
}

.legal-page h1 {
    margin-bottom: var(--space-sm);
}

.legal-page h2 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
}

.legal-page p {
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.legal-updated {
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Auth Container (centered form pages)
   ========================================================================== */

.auth-container {
    max-width: 400px;
    margin: var(--space-xl) auto;
}

/* ==========================================================================
   Backup Tokens
   ========================================================================== */

.tokens-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    font-family: var(--font-mono);
}

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

.token-item:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   QR Code
   ========================================================================== */

.qr-code-container {
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: #ffffff;
    border: 1px solid var(--border-muted);
}

.qr-code-image {
    max-width: 200px;
    height: auto;
}

/* ==========================================================================
   Progress Bar
   ========================================================================== */

.progress-container {
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    overflow: hidden;
}

.progress-bar {
    height: 24px;
    background: var(--accent-primary);
    width: 0%;
    transition: width 0.3s ease;
}

/* ==========================================================================
   Form Input Variants
   ========================================================================== */

.input-readonly {
    background: var(--bg-muted);
    cursor: not-allowed;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.inline { display: inline; }

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

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

.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

.mt-0 { margin-top: 0; }
.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); }

.mb-0 { margin-bottom: 0; }
.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); }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.hidden { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0;
    }

    .site-header .container,
    .site-footer .container {
        padding: 0 var(--space-md);
    }

    .breadcrumb {
        padding: 0 var(--space-md);
    }

    /* Mobile header layout */
    .site-header .container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    /* Show hamburger button on mobile */
    .nav-toggle {
        display: flex;
    }

    /* Hide desktop support notice, show mobile banner */
    .support-notice {
        display: none;
    }

    .support-notice-mobile {
        display: block;
    }

    /* Hide nav by default on mobile */
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        border-top: 1px solid var(--border-muted);
        margin-top: var(--space-md);
        padding-top: var(--space-sm);
    }

    /* Show nav when header has nav-open class */
    .site-header.nav-open .site-nav {
        display: flex;
    }

    /* Style nav items for mobile */
    .site-nav > a {
        padding: var(--space-sm) 0;
        border-left: none;
        border-bottom: 1px solid var(--border-muted);
    }

    .site-nav > a:last-child {
        border-bottom: none;
    }

    /* Nav dropdowns on mobile - full width, no border-left */
    .nav-dropdown {
        display: block;
        width: 100%;
    }

    .nav-dropdown__toggle {
        width: 100%;
        padding: var(--space-sm) 0;
        border-left: none;
        border-bottom: 1px solid var(--border-muted);
        justify-content: space-between;
    }

    /* Dropdown menu on mobile - inline, not absolute */
    .nav-dropdown__menu {
        position: static;
        border: none;
        box-shadow: none;
        margin-top: 0;
        min-width: 0;
        background: var(--bg-muted);
        border-bottom: 1px solid var(--border-muted);
    }

    .nav-dropdown__menu a {
        padding-left: var(--space-md);
    }

    .info-grid {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .card {
        padding: var(--space-md);
    }
}

/* ===========================================
   Searchable Select Component
   =========================================== */

.searchable-select {
    position: relative;
    width: 100%;
}

.searchable-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    min-height: 40px;
    box-sizing: border-box;
}

.searchable-select__trigger:hover {
    border-color: var(--border-strong);
}

.searchable-select__trigger:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--bg-page);
}

.searchable-select--open .searchable-select__trigger {
    border-color: var(--accent-primary);
}

.searchable-select__trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select__trigger-text--placeholder {
    color: var(--text-muted);
}

.searchable-select__trigger-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: var(--space-xs);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.searchable-select__trigger-clear[hidden] {
    display: none;
}

.searchable-select__trigger-clear:hover {
    color: var(--text-primary);
}

.searchable-select__trigger-clear:focus {
    outline: none;
    color: var(--text-primary);
}

.searchable-select__arrow {
    display: flex;
    align-items: center;
    margin-left: var(--space-sm);
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.searchable-select--open .searchable-select__arrow {
    transform: rotate(180deg);
}

.searchable-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-top: none;
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    display: none;
    flex-direction: column;
}

.searchable-select--open .searchable-select__dropdown {
    display: flex;
}

.searchable-select__search-wrapper {
    position: relative;
    padding: var(--space-sm);
    border-bottom: 1px solid var(--border-muted);
}

.searchable-select__search {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    padding-right: calc(var(--space-md) + 24px);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-sm);
}

.searchable-select__search:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-surface);
}

.searchable-select__search::placeholder {
    color: var(--text-muted);
}

.searchable-select__clear {
    position: absolute;
    right: calc(var(--space-sm) + var(--space-xs));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.searchable-select__clear[hidden] {
    display: none;
}

.searchable-select__clear:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
}

.searchable-select__clear:focus {
    outline: none;
    color: var(--text-primary);
    background: var(--bg-muted);
}

.searchable-select__options {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
}

.searchable-select__option {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background-color 0.1s ease;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.searchable-select__option:hover,
.searchable-select__option--highlighted {
    background: var(--bg-muted);
}

.searchable-select__option--selected {
    background: var(--accent-primary);
    color: white;
}

.searchable-select__option--selected:hover,
.searchable-select__option--selected.searchable-select__option--highlighted {
    background: var(--accent-primary-hover);
}

.searchable-select__no-results {
    padding: var(--space-md);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ==========================================================================
   Responsive Table Cards
   Converts tables to card layout on mobile for better readability.
   Add class "table--responsive-cards" to enable this behavior.
   ========================================================================== */

@media (max-width: 768px) {
    .table--responsive-cards {
        border: none;
    }

    .table--responsive-cards thead {
        display: none;
    }

    .table--responsive-cards tbody {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .table--responsive-cards tbody tr {
        display: flex;
        flex-direction: column;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        padding: var(--space-md);
        gap: var(--space-sm);
    }

    .table--responsive-cards tbody tr:nth-child(even),
    .table--responsive-cards tbody tr:nth-child(odd) {
        background: var(--bg-elevated);
    }

    .table--responsive-cards tbody td {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-sm);
        padding: 0;
        border: none;
    }

    .table--responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        min-width: 80px;
    }

    .table--responsive-cards tbody td:empty {
        display: none;
    }

    /* Primary cell (first column) - make it stand out */
    .table--responsive-cards tbody td[data-label]:first-child {
        font-weight: 600;
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--border-muted);
        margin-bottom: var(--space-xs);
    }

    .table--responsive-cards tbody td[data-label]:first-child::before {
        display: none;
    }

    /* Actions cell - full width, buttons aligned */
    .table--responsive-cards tbody td.card-actions {
        flex-direction: column;
        align-items: stretch;
        padding-top: var(--space-sm);
        border-top: 1px solid var(--border-muted);
        margin-top: var(--space-xs);
        gap: var(--space-sm);
    }

    .table--responsive-cards tbody td.card-actions::before {
        display: none;
    }

    .table--responsive-cards tbody td.card-actions .btn {
        text-align: center;
    }

    /* Inline action buttons row */
    .card-actions__row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .card-actions__row .btn,
    .card-actions__row a {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }

    /* Rejection reason rows - special styling */
    .table--responsive-cards tbody tr.rejection-reason-row {
        margin-top: calc(-1 * var(--space-md));
        border-top: none;
        padding-top: 0;
    }

    /* Inline rejection reason for card layout */
    .rejection-reason-inline {
        background: var(--status-error-bg);
        border: 1px solid var(--status-error-border);
        padding: var(--space-sm);
        font-size: var(--text-sm);
        color: var(--status-error-text);
        margin-top: var(--space-sm);
    }

    /* ==========================================================================
       Dropdown Modal (Mobile)
       On mobile, dropdowns with .dropdown--modal-mobile show as centered modals
       ========================================================================== */

    .dropdown--modal-mobile.open .dropdown-menu {
        position: fixed;
        top: 50%;
        left: var(--space-md);
        right: var(--space-md);
        bottom: auto;
        transform: translateY(-50%);
        max-height: 70vh;
        overflow-y: auto;
        z-index: 1001;
    }

    .dropdown--modal-mobile.open .dropdown-menu .dropdown-item {
        white-space: normal;
        word-break: break-word;
    }

    .dropdown--modal-mobile .dropdown-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .dropdown--modal-mobile.open .dropdown-backdrop {
        display: block;
    }

    .dropdown--modal-mobile .dropdown-menu__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--border-muted);
        font-weight: 600;
        font-size: var(--text-sm);
    }

    .dropdown-menu__close {
        background: none;
        border: none;
        font-size: var(--text-lg);
        cursor: pointer;
        padding: 0;
        line-height: 1;
        color: var(--text-muted);
    }

    .dropdown-menu__close:hover {
        color: var(--text-primary);
    }
}

/* ==========================================================================
   Products List (used for Available For, Works With)
   ========================================================================== */

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

.products-section h3 {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-strong);
}

.products-list {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.products-list--boxed {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
}

.products-list__label {
    flex-basis: 100%;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: block;
}

.products-list a {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-muted);
    text-decoration: none;
    color: var(--text-primary);
}

.products-list a:hover {
    background: var(--bg-muted);
    text-decoration: underline;
}

.products-list__code {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 2px 6px;
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    color: var(--text-primary);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* ==========================================================================
   Accessories Grid (with images and descriptions)
   ========================================================================== */

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

.accessories-section h3 {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-strong);
}

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

.accessory-card {
    display: block;
    background: var(--bg-surface);
    border: 1px solid var(--border-muted);
    padding: var(--space-md);
    text-decoration: none;
    color: inherit;
}

.accessory-card:hover {
    border-color: var(--border-strong);
}

.accessory-card__image {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
    overflow: hidden;
    background: var(--bg-muted);
}

.accessory-card__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.accessory-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 0 0 var(--space-xs) 0;
    color: var(--text-primary);
}

.accessory-card__description {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   Multi-Select Searchable Select
   ========================================================================== */

.searchable-select--multi .searchable-select__trigger {
    min-height: 38px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    padding-right: 32px;
}

.searchable-select__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.searchable-select__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    padding: 2px 6px;
    font-size: var(--text-xs);
}

.searchable-select__tag-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select__tag-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    font-size: var(--text-base);
}

.searchable-select__tag-remove:hover {
    color: var(--text-primary);
}

.searchable-select--multi .searchable-select__option--selected {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

.searchable-select--multi .searchable-select__option--selected:hover {
    background: var(--accent-primary-hover);
}

/* ==========================================================================
   Access Expiration Notice
   ========================================================================== */

.access-expiration-notice {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    color: var(--status-info-text);
    font-size: var(--text-sm);
}

.access-expiration-notice__renew {
    margin-left: var(--space-sm);
    color: var(--text-link);
}

.access-expiration-notice__renew:hover {
    text-decoration: underline;
}

.access-expiration-notice__renew--disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.access-expiration-notice__renew--disabled:hover {
    text-decoration: none;
}