/* Fonts loaded via <link> in index.html for non-blocking rendering */

:root {
    /* Brand Colors */
    --color-primary: #e67a2e;
    --color-primary-light: #f0944d;
    --color-primary-dark: #c9631f;
    --color-primary-glow: rgba(230, 122, 46, 0.4);
    --color-primary-rgb: 230, 122, 46;
    --color-primary-bg: rgba(230, 122, 46, 0.1);

    /* Dark Theme */
    --color-bg-dark: #0d0f14;
    --color-bg-dark-secondary: #141821;
    --color-bg-dark-tertiary: #1a1f2e;
    /* Elevated surface for floating menus / dropdown panels (Select, Dropdown menu, etc.) */
    --color-bg-elevated: #1c1f27;

    /* Glass Effects */
    --glass-bg-subtle: rgba(255, 255, 255, 0.03);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-light: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-light: rgba(255, 255, 255, 0.15);
    --glass-shadow: rgba(0, 0, 0, 0.25);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.78);
    --text-muted: rgba(255, 255, 255, 0.55);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #e67a2e 0%, #f0944d 100%);
    --gradient-bg: radial-gradient(ellipse at 20% 0%, rgba(230, 122, 46, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(230, 122, 46, 0.1) 0%, transparent 50%),
    linear-gradient(180deg, #0d0f14 0%, #141821 100%);

    /* Semantic Status Colors */
    --color-success: #52c41a;
    --color-success-light: #95de64;
    --color-success-hover: #73d13d;
    --color-warning: #faad14;
    --color-warning-light: #ffc53d;
    --color-error: #ff4d4f;
    --color-error-light: #ff7875;
    --color-info: #1890ff;
    --color-info-light: #69c0ff;
    --color-info-hover: #40a9ff;
    --color-info-rgb: 64, 169, 255;
    --color-info-bg: rgba(64, 169, 255, 0.15);
    --color-accent-purple: #722ed1;
    --color-accent-purple-light: #b37feb;
    --color-accent-purple-hover: #9254de;

    /* Subscription Tier Colors */
    --color-tier-starter: #60a5fa;
    --color-tier-pro: #a78bfa;
    --color-tier-starter-bg: rgba(96, 165, 250, 0.15);
    --color-tier-pro-bg: rgba(167, 139, 250, 0.15);

    /* Decorative Accents */
    --color-amber: #f5a623;

    /* Social Brand Colors */
    --color-social-twitter: #1da1f2;
    --color-social-linkedin: #0a66c2;
    --color-social-facebook: #4267b2;
    --color-social-whatsapp: #25d366;

    /* Typography */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Borders */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Aliases for tokens referenced in scoped CSS that did not exist as globals */
    --surface-bg: var(--glass-bg);
    --text-faint: rgba(255, 255, 255, 0.4);
    --color-primary-bg-hover: rgba(var(--color-primary-rgb), 0.2);
    --color-success-bg: rgba(82, 196, 26, 0.15);
    --color-warning-bg: rgba(250, 173, 20, 0.15);
    --color-error-bg: rgba(255, 77, 79, 0.15);
    --radius-pill: 999px;
    --radius-xs: 4px;
}

html {
    height: 100%;
    background: var(--color-bg-dark);
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--gradient-bg);
    background-attachment: fixed;
    color: var(--text-primary);
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Global Icon Color Default — TASK_04 systemic fix.
   AntDesign icons (.anticon), raw <svg>, and Material icons inherit currentColor
   so any element rendered outside an AntDesign component class chain still gets
   on-brand color (driven by body's --text-primary). Component-specific overrides
   in overrides.css (e.g., button-primary, message-success, menu-selected) remain
   authoritative — they win on specificity. */
.anticon,
.material-icons {
    color: currentColor;
}

svg:not(:root) {
    fill: currentColor;
}

/* Skip-to-Content Link (Accessibility) */
.skip-to-content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: 9999;
}

.skip-to-content:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    z-index: 9999;
    outline: 2px solid var(--text-primary);
}

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

#app {
    height: 100%;
    background: transparent;
    overflow: hidden;
}

/* Auth layout fix - ensure full height flex container */
.auth-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

h1:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

a {
    color: var(--color-primary);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error-light);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ========================================
   App Loading Screen
   ======================================== */

.loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 20% 0%, rgba(230, 122, 46, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(230, 122, 46, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0d0f14 0%, #141821 100%);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.loading-logo-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-logo {
    width: 56px;
    height: 56px;
    animation: logoPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(230, 122, 46, 0.5));
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(230, 122, 46, 0.5));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(230, 122, 46, 0.7));
    }
}

.loading-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.loading-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 3;
}

.loading-ring-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: calc(3.141 * 92 * var(--blazor-load-percentage, 0) / 100), 500;
    transition: stroke-dasharray 0.15s ease-out;
    filter: drop-shadow(0 0 6px rgba(230, 122, 46, 0.6));
    animation: ringGlow 2s ease-in-out infinite;
}

@keyframes ringGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(230, 122, 46, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(230, 122, 46, 0.8));
    }
}

.loading-text {
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.loading-dots::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

code {
    color: var(--color-primary-light);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ========================================
   AntDesign Global Theme Overrides
   For Auth Pages (Dark Theme)
   ======================================== */

/* Auth page specific - Language Picker Select */
.auth-page .ant-select {
    min-width: 130px;
}

.auth-page .ant-select-selector {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    transition: all var(--transition-base) !important;
    height: 36px !important;
}

.auth-page .ant-select-arrow {
    color: var(--text-muted) !important;
}

.auth-page .ant-select:hover .ant-select-selector {
    border-color: var(--glass-border-light) !important;
}

.auth-page .ant-select-focused .ant-select-selector {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

.auth-page .ant-select-selection-item {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
}

/* Dropdown menu styling */
.ant-select-dropdown {
    background: var(--color-bg-dark-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0.25rem !important;
}

.ant-select-item {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background: var(--glass-bg-light) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: rgba(230, 122, 46, 0.15) !important;
    color: var(--color-primary) !important;
    font-weight: 500;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
    color: var(--color-primary) !important;
}

/* ========================================
   Main Layout Global Overrides
   ======================================== */

/* Language Picker in Main Header */
.main-layout .main-header .ant-select-selector {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    height: 36px !important;
}

.main-layout .main-header .ant-select-arrow {
    color: var(--text-muted) !important;
}

.main-layout .main-header .ant-select:hover .ant-select-selector {
    border-color: var(--glass-border-light) !important;
}

.main-layout .main-header .ant-select-focused .ant-select-selector {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

.main-layout .main-header .ant-select-selection-item {
    color: var(--text-secondary) !important;
}

/* Select clear button - remove white background, show only X */
.ant-select-clear {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-muted) !important;
}

.ant-select-clear:hover {
    color: var(--text-secondary) !important;
}

/* Hide clear icon when no value is selected */
.ant-select:not(:has(.ant-select-selection-item)) .ant-select-clear {
    display: none !important;
}

/* Hide arrow when a value is selected (selection-item exists) */
.ant-select:has(.ant-select-selection-item) .ant-select-arrow {
    display: none !important;
}

/* Search input group - seamless connection between input and button */
.ant-input-group-wrapper.ant-input-search {
    display: inline-table !important;
    width: auto !important;
}

.ant-input-search .ant-input-wrapper.ant-input-group {
    display: table !important;
    width: auto !important;
}

.ant-input-search .ant-input {
    display: table-cell !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.ant-input-search .ant-input-group-addon {
    display: table-cell !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: 1px !important;
    vertical-align: middle !important;
}

.ant-input-search .ant-input-group-addon .ant-btn,
.ant-input-search .ant-input-search-button,
.ant-input-search .ant-btn.ant-btn-icon-only,
.ant-input-search .ant-input-group-addon .ant-btn.ant-btn-icon-only.ant-input-search-button {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-left: none !important;
    color: var(--text-secondary) !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    margin-left: 0 !important;
    height: 32px !important;
}

.ant-input-search .ant-input-group-addon .ant-btn:hover,
.ant-input-search .ant-input-search-button:hover,
.ant-input-search .ant-btn.ant-btn-icon-only:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--color-primary) !important;
    border-left: none !important;
    color: var(--color-primary) !important;
}

/* Spin/Loading in dark theme */
.main-layout .ant-spin-dot-item {
    background-color: var(--color-primary) !important;
}

/* Message/Notification overrides */
.ant-message-notice-content {
    background: var(--color-bg-dark-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.ant-message-success .anticon {
    color: var(--color-success) !important;
}

.ant-message-error .anticon {
    color: var(--color-error) !important;
}

.ant-message-info .anticon {
    color: var(--color-primary) !important;
}

.ant-message-notice-content .ant-message-custom-content span:last-child {
    color: var(--text-primary) !important;
}

/* ========================================
   Sidebar Navigation - Override AntDesign Blue
   ======================================== */

/* Menu selected state - force orange instead of blue */
.main-sider .ant-menu-dark .ant-menu-item-selected,
.main-sider .ant-menu.ant-menu-dark .ant-menu-item-selected,
.main-sider .ant-menu-dark.ant-menu-inline .ant-menu-item-selected,
.ant-menu-dark .ant-menu-item-selected,
.ant-menu.ant-menu-dark .ant-menu-item-selected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: var(--color-primary) !important;
}

/* Selected item - text and links */
.main-sider .ant-menu-dark .ant-menu-item-selected .ant-menu-title-content,
.main-sider .ant-menu-dark .ant-menu-item-selected .ant-menu-title-content a,
.main-sider .ant-menu-dark .ant-menu-item-selected a,
.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content,
.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content a,
.ant-menu-dark .ant-menu-item-selected a,
.ant-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content,
.ant-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content a,
.ant-menu.ant-menu-dark .ant-menu-item-selected a {
    color: var(--color-primary) !important;
}

/* Selected icon color */
.main-sider .ant-menu-dark .ant-menu-item-selected .anticon,
.main-sider .ant-menu.ant-menu-dark .ant-menu-item-selected .anticon,
.ant-menu-dark .ant-menu-item-selected .anticon,
.ant-menu.ant-menu-dark .ant-menu-item-selected .anticon,
.ant-menu-dark .ant-menu-item-selected .anticon svg,
.ant-menu.ant-menu-dark .ant-menu-item-selected .anticon svg {
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
}

/* Remove the default blue right border */
.main-sider .ant-menu-item-selected::after,
.ant-menu-dark .ant-menu-item-selected::after {
    border-right-color: transparent !important;
    display: none !important;
}

/* Hover state */
.main-sider .ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected) {
    color: var(--text-primary) !important;
}

.main-sider .ant-menu-dark .ant-menu-item:hover .anticon {
    color: var(--text-primary) !important;
}

/* Non-selected items - default styling */
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content a,
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content a,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a {
    color: var(--text-secondary) !important;
}

.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon {
    color: var(--text-secondary) !important;
}

/* ========================================
   Global Button Styles - Rounded Action Buttons
   ======================================== */

/* Base button - rounded corners for all buttons */
.ant-btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    transition: all var(--transition-fast) !important;
}

/* Primary button - orange gradient with glow */
.ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
    color: white !important;
}

.ant-btn-primary:hover:not(:disabled),
.ant-btn-primary:focus:not(:disabled) {
    background: var(--gradient-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

.ant-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.35) !important;
}

.ant-btn-primary[disabled],
.ant-btn-primary.ant-btn-disabled {
    background: rgba(230, 122, 46, 0.4) !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: not-allowed;
}

/* Default button - glass morphism style */
.ant-btn-default {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-secondary) !important;
}

.ant-btn-default:hover:not(:disabled),
.ant-btn-default:focus:not(:disabled) {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.ant-btn-default[disabled],
.ant-btn-default.ant-btn-disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

/* Danger button - red styling */
.ant-btn-dangerous:not(.ant-btn-primary) {
    background: rgba(255, 77, 79, 0.15) !important;
    border: 1px solid rgba(255, 77, 79, 0.3) !important;
    color: var(--color-error-light) !important;
}

.ant-btn-dangerous:not(.ant-btn-primary):hover:not(:disabled),
.ant-btn-dangerous:not(.ant-btn-primary):focus:not(:disabled) {
    background: rgba(255, 77, 79, 0.25) !important;
    border-color: rgba(255, 77, 79, 0.5) !important;
    color: var(--color-error-light) !important;
}

/* Primary danger button */
.ant-btn-primary.ant-btn-dangerous {
    background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-light) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 77, 79, 0.35) !important;
    color: var(--text-primary) !important;
}

.ant-btn-primary.ant-btn-dangerous:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(255, 77, 79, 0.45) !important;
    transform: translateY(-1px);
}

/* Text button */
.ant-btn-text {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

.ant-btn-text:hover:not(:disabled),
.ant-btn-text:focus:not(:disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

/* Link button */
.ant-btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--color-primary) !important;
    box-shadow: none !important;
}

.ant-btn-link:hover:not(:disabled),
.ant-btn-link:focus:not(:disabled) {
    color: var(--color-primary-light) !important;
}

.ant-btn-link.ant-btn-dangerous {
    color: var(--color-error-light) !important;
}

.ant-btn-link.ant-btn-dangerous:hover:not(:disabled) {
    color: var(--color-error) !important;
}

/* Loading state */
.ant-btn-loading {
    opacity: 0.85;
}

/* Small button size */
.ant-btn-sm {
    border-radius: 6px !important;
}

/* Large button size */
.ant-btn-lg {
    border-radius: var(--radius-md) !important;
}

/* Block button */
.ant-btn-block {
    border-radius: var(--radius-sm) !important;
}

/* Button with icon spacing */
.ant-btn > .anticon + span,
.ant-btn > span + .anticon {
    margin-left: 6px;
}

/* Icon-only button */
.ant-btn-icon-only {
    border-radius: var(--radius-sm) !important;
}

/* Button group */
.ant-btn-group .ant-btn:first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ant-btn-group .ant-btn:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.ant-btn-group .ant-btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* ========================================
   Modal Button Overrides
   ======================================== */

.ant-modal-footer .ant-btn {
    border-radius: var(--radius-sm) !important;
}

.ant-modal-confirm-btns .ant-btn {
    border-radius: var(--radius-sm) !important;
}

/* ========================================
   Sidebar Menu Collapsed State
   ======================================== */

.ant-menu-inline-collapsed .ant-menu-item {
    padding: 0 !important;
    text-align: center !important;
}

.ant-menu-inline-collapsed .ant-menu-item .ant-menu-title-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

.ant-menu-inline-collapsed .ant-menu-item .ant-menu-title-content a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Hide text labels when sidebar is collapsed */
.ant-menu-inline-collapsed .ant-menu-item .ant-menu-title-content a span:not(.anticon) {
    display: none !important;
}

/* ========================================
   Search Input Button Override
   Override primary button styles for search inputs
   Make it a standalone rounded button like Create Ticket
   ======================================== */

.ant-input-search .ant-input-group-addon .ant-btn,
.ant-input-search .ant-input-search-button,
.ant-input-search .ant-btn-primary.ant-input-search-button,
.ant-input-group-addon .ant-btn.ant-input-search-button {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    margin-left: 8px !important;
}

.ant-input-search .ant-input-group-addon .ant-btn:hover,
.ant-input-search .ant-input-search-button:hover,
.ant-input-search .ant-btn-primary.ant-input-search-button:hover,
.ant-input-group-addon .ant-btn.ant-input-search-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    transform: none !important;
}

.ant-input-search .ant-input-group-addon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Make the search input have rounded corners on all sides */
.ant-input-search .ant-input {
    border-radius: var(--radius-sm) !important;
}

/* ========================================
   TextArea Global Styling
   ======================================== */

.ant-input-textarea textarea,
textarea.ant-input {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.ant-input-textarea textarea:focus,
.ant-input-textarea textarea:hover,
textarea.ant-input:focus,
textarea.ant-input:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

.ant-input-textarea textarea::placeholder {
    color: var(--text-muted) !important;
}

.ant-input-textarea-show-count {
    background: transparent !important;
}

.ant-input-data-count {
    color: var(--text-muted) !important;
}

/* Force all textareas to dark theme - specific AntDesign selector */
.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input,
.ant-input-textarea textarea.ant-input,
.ant-input-textarea-show-count .ant-input-affix-wrapper textarea.ant-input,
.ant-input-textarea-in-form-item textarea.ant-input,
textarea.ant-input {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: white !important;
    color-scheme: dark !important;
}

.ant-input-textarea .ant-input-affix-wrapper,
.ant-input-textarea-show-count .ant-input-affix-wrapper {
    background: transparent !important;
    border: none !important;
}

/* Remove border from textarea wrapper when show-count is enabled */
.ant-input-textarea.ant-input-textarea-show-count,
.ant-input-textarea.ant-input-textarea-in-form-item,
div.ant-input-textarea.ant-input-textarea-show-count.ant-input-textarea-in-form-item {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
}

.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input:focus,
.ant-input-textarea textarea.ant-input:focus,
textarea.ant-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

textarea.ant-input::placeholder {
    color: var(--text-muted) !important;
}

/* ========================================
   Global Form Input Styling
   Glass-morphism for all AntDesign inputs
   ======================================== */

/* Standard inputs */
.ant-input {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-base) !important;
}

.ant-input::placeholder {
    color: var(--text-muted) !important;
}

.ant-input:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-input:focus,
.ant-input-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

/* Input sizes — respect AntDesign defaults, no forced heights */

/* Input number */
.ant-input-number-lg {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.ant-input-number-lg:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-input-number-lg:focus,
.ant-input-number-lg-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

/* Password input — wrapper (.ant-input-affix-wrapper) */
.ant-input-affix-wrapper.ant-input-password {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
}

.ant-input-affix-wrapper.ant-input-password:hover,
.ant-input-affix-wrapper.ant-input-password:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

.ant-input-affix-wrapper.ant-input-password .ant-input {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
}

.ant-input-affix-wrapper.ant-input-password .ant-input::placeholder {
    color: var(--text-muted) !important;
}

.ant-input-affix-wrapper.ant-input-password .ant-input-suffix .anticon {
    color: var(--text-muted) !important;
}

/* Password large size — respect AntDesign defaults */

/* Select */
.ant-select-selector {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.ant-select-arrow {
    color: var(--text-muted) !important;
}

.ant-select:hover .ant-select-selector {
    border-color: var(--glass-border-light) !important;
}

.ant-select-focused .ant-select-selector {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

.ant-select-selection-item {
    color: var(--text-primary) !important;
}

.ant-select-selection-placeholder {
    color: var(--text-muted) !important;
}

.ant-select-selection-search-input {
    color: var(--text-primary) !important;
}

/* Select large size — respect AntDesign defaults */

/* Date picker */
.ant-picker {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-base) !important;
}

.ant-picker:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-picker-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

/* DatePicker large size — respect AntDesign defaults */

.ant-picker-input > input {
    color: var(--text-primary) !important;
}

.ant-picker-input > input::placeholder {
    color: var(--text-muted) !important;
}

.ant-picker-suffix {
    color: var(--text-muted) !important;
}

/* ========================================
   Native File Input Override
   Hide native browser file input styling
   ======================================== */

input[type="file"] {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

/* Hide native button text completely */
input[type="file"]::-webkit-file-upload-button {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

input[type="file"]::file-selector-button {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* ========================================
   File Upload Drop-Zone (global utilities)
   Promoted from UploadObrazlozenjeModal scoped CSS so modal-page surfaces
   (F-176: no scoped CSS on layout patterns) can compose a file picker.
   The .file-input absolutely fills its position:relative .upload-area so
   the invisible native input overlays only the drop zone, not the footer.
   ======================================== */

.upload-area {
    position: relative;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    background: var(--surface-elevated);
    transition: border-color 0.15s ease;
}

.upload-area:hover {
    border-color: var(--accent-primary);
}

.upload-area .file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    pointer-events: none;
}

.upload-hint {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

/* ========================================
   Page Layout Utility Classes
   Standardized page widths and layouts
   ======================================== */

/* Page Width Variables */
:root {
    --page-width-narrow: 800px;
    --page-width-default: 1000px;
    --page-width-wide: 1200px;
    --page-width-portal: 960px;

    /* Shadow scale — replaces inline box-shadow values across the project.
       *-primary-* use the brand glow; non-primary use the neutral glass shadow. */
    --shadow-sm: 0 2px 4px var(--glass-shadow);
    --shadow-md: 0 4px 12px var(--glass-shadow);
    --shadow-lg: 0 8px 24px var(--glass-shadow);
    --shadow-xl: 0 16px 48px var(--glass-shadow);
    --shadow-primary-md: 0 4px 14px var(--color-primary-glow);
    --shadow-primary-lg: 0 8px 24px var(--color-primary-glow);
    --shadow-inset-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Form-drawer widths — consumed by EntityFormDrawer (TASK_06). */
    --form-drawer-width: 480px;
    --form-drawer-width-wide: 640px;

    /* Font-size scale — referenced by ~120 declarations across scoped CSS;
       an undefined var() silently drops the whole declaration. */
    --font-size-xs: 0.75rem;
    --font-size-xs2: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 2.25rem;

    /* Spacing extremes used by scoped CSS beyond the core xs–2xl scale. */
    --space-3xs: 0.125rem;
    --space-2xs: 0.125rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-xxl: 5rem;

    --color-primary-bg-light: rgba(230, 122, 46, 0.15);
    --shadow-primary-sm: 0 2px 8px var(--color-primary-glow);

    /* Semantic aliases — canonical names used by feature scoped CSS.
       Aliased to the base tokens above so both vocabularies resolve. */
    --accent-primary: var(--color-primary);
    --border-subtle: var(--glass-border);
    --text-tertiary: var(--text-muted);
    --surface-elevated: var(--glass-bg-light);
    --surface-paper: var(--glass-bg-subtle);
    --surface-accent-subtle: var(--color-primary-bg);
    --surface-warning-subtle: var(--color-warning-bg);
    --surface-code: var(--color-bg-dark-secondary);
    --text-code: var(--text-secondary);
    --color-tier-limited: var(--text-muted);
    --font-family-mono: var(--font-mono);
    --line-height-tight: 1.3;
    --line-height-relaxed: 1.6;
}

/* Page Wrapper - Base page styling */
.page-wrapper {
    min-height: calc(100vh - 64px - 56px); /* viewport - header - footer */
    padding: var(--space-xl);
    background: transparent;
    /* F-176: promoted from per-page scoped CSS. Every .page-wrapper now animates
       in once globally; design-lint Rule 4 is satisfied by this single declaration
       so individual .razor.css files no longer need to repeat it. */
    animation: pageSlideUp 0.4s ease-out;
}

/* Page Container - Default width */
.page-container {
    position: relative; /* For DevPathBadge positioning */
    max-width: var(--page-width-default);
    margin: 0 auto;
    width: 100%;
}

/* Page Container Variants */
.page-container--narrow {
    max-width: var(--page-width-narrow);
}

.page-container--wide {
    max-width: var(--page-width-wide);
}

.page-container--portal {
    max-width: var(--page-width-portal);
}

.page-container--full {
    max-width: 100%;
}

/* Vertical rhythm — uniform gap between top-level page-container children.
   The `:not(style):not(.dev-path-badge)` exclusions are critical: scoped-style
   components inject a <style> sibling that would otherwise trip the owl, and
   the absolutely-positioned DevPathBadge would distort the owl chain. */
.page-container > :not(style):not(.dev-path-badge) + :not(style):not(.dev-path-badge) {
    margin-top: var(--space-lg);
}

/* Page Header - Glassmorphism card style */
.page-header {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    animation: pageSlideUp 0.4s ease-out;
}

/* Page Header - Simple style (no card) */
.page-header--simple {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: var(--space-xl);
    animation: pageFadeIn 0.5s ease-out;
}

/* Page Title */
.page-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-sm) 0;
}

/* Page Subtitle */
.page-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Subsection titles + body copy — sit inside a .glass-card (settings, detail,
   drawers, audit-log details). F-176: promoted from playground scoped CSS. */
.section-title-sm {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs);
}

.section-title-xs {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: var(--space-md) 0 var(--space-xs);
}

.section-copy {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0 0 var(--space-md);
}

.section-copy code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-primary);
}

/* Page Header with Actions (flex layout) */
.page-header--with-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
}

.page-header--with-actions .page-header__content {
    flex: 1;
}

/* Page Title Row (for inline help icon) */
.page-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Form Item with Help (for inline help popovers) */
.form-item-with-help {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Form row — 2-column split that stacks at narrow widths.
   F-176: promoted from FormPlayground.razor.css `.form-playground__row`. */
.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

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

/* Page Animations */
@keyframes pageSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   Glass Card Utility
   Reusable glassmorphism card pattern.
   Apply .glass-card to any container element.
   ======================================== */

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    padding: var(--space-lg, 1.5rem);
}

.glass-card-hover {
    transition: all var(--transition-fast);
}

.glass-card-hover:hover {
    border-color: var(--glass-border-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ========================================
   Page Layout Templates
   Composable layout primitives used by the
   Detail, Form, and Settings page templates.
   See `/design-system#detail-page-template`,
   `/design-system#form-page-template`,
   `/design-system#settings-page-template`.
   ======================================== */

/* Detail page — two-column grid (main + side panel) */
.detail-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-lg);
    align-items: start;
}

.detail-page-grid__main {
    min-width: 0;
}

.detail-page-grid__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: sticky;
    top: var(--space-lg);
    align-self: start;
}

/* Sub-block title inside .detail-page-grid__side panels.
   F-176: promoted from DetailPlayground.razor.css `.detail-playground__side-title`. */
.detail-page-grid__side-title {
    margin: 0 0 var(--space-md) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .detail-page-grid {
        grid-template-columns: 1fr;
    }

    .detail-page-grid__side {
        position: static;
    }
}

/* Entity-drawer body — flexes to fill, scrolls when content overflows.
   Catalog `drawer-playground` pattern uses this for the inside of any <Drawer>
   that has a sticky-bottom action footer. */
.entity-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-lg);
    min-height: 0;
}

/* Entity-drawer footer — sticky-bottom action bar inside a Drawer. Pair with
   .form-actions-footer for the consistent right-aligned Cancel · Save layout. */
.entity-drawer-footer {
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
}

/* When the footer is also a form-actions-footer (catalog canonical), suppress
   the top-margin so it sits flush against the drawer divider it already owns. */
.entity-drawer-footer.form-actions-footer {
    margin-top: 0;
}

/* ========================================
   Form Section — canonical glass-card section used by form pages.
   Composes glass-card chrome + a section-label header + form-grid body.
   Used by /clients/new, onboarding CompanyDataStep, PayrollRunFormDrawer,
   and other multi-section forms.
   ======================================== */
.form-section {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    animation: pageSlideUp 0.4s ease-out;
}

.form-section:last-of-type {
    margin-bottom: 0;
}

/* Section label — uppercase header with leading icon. Explicit color is
   required: inside <Form> (.ant-form) text otherwise inherits AntDesign's
   light-theme default (near-black) instead of the page's white. */
.section-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.section-label .anticon {
    font-size: 14px;
    color: var(--color-primary);
}

/* Form grid — two-column responsive grid for FormItems */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-lg);
}

.form-grid .form-item--full,
.form-grid > .form-item--full {
    grid-column: 1 / -1;
}

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

/* Clickable list rows — semantic hook used by dashboard widgets and
   document/upload lists; the hover background stays per-component. */
.clickable-row {
    cursor: pointer;
}

/* Switch inside a .detail-field flex column (detail-page edit modes) must not
   stretch to the column width — flex `align-items: stretch` otherwise turns the
   44px toggle into a full-width slider. Affects ClientDetail, EmployeeDetail,
   FixedAssetDetail, InvoiceDetail, ReminderCadenceEditor. */
.detail-field .ant-switch {
    align-self: flex-start;
}

/* Toggle row — label + Switch inline, used inside form-section */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.toggle-row + .form-grid,
.toggle-row + .toggle-row {
    margin-top: var(--space-md);
}

.toggle-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
}

/* Helper / supporting text — canonical global rules.
   These classes were previously defined only in scoped .razor.css files,
   which meant the rule applied to the owning page but NOT to shared form
   components rendered inside those pages. Blazor scoped CSS attaches a
   b-xxxxx attribute only to the owning .razor's elements — children rendered
   by other components don't inherit it. So helper text inside shared forms
   inherited AntDesign's light-theme default (near-black). */
.form-helper-text,
.form-help-text,
.form-help,
.helper-text,
.hint-text,
.service-hint-text,
.field-help {
    margin-top: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--font-size-xs2);
    line-height: 1.4;
}

/* ========================================
   Empty Section — lightweight inline empty state.
   Use INSIDE an existing glass container (e.g., a section inside a
   glass-card) so you don't get a double-glass-overlay. Centered icon +
   small message, no surrounding chrome.
   ======================================== */
.empty-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    color: var(--text-muted);
    text-align: center;
}

.empty-section .anticon {
    font-size: 28px;
    color: var(--text-faint);
}

.empty-section p,
.empty-section .empty-message {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Form page — actions footer (becomes sticky-bottom on mobile) */
.form-actions-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--glass-border);
}

@media (max-width: 480px) {
    .form-actions-footer {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: column-reverse;
        background: var(--glass-bg);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid var(--glass-border);
        margin-top: var(--space-md);
        padding: var(--space-md);
        z-index: 5;
    }

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

/* Settings section — vertical stack of labelled fields inside a settings tab.
   F-176: promoted from SettingsPlayground.razor.css; the existing chained
   selector below (`.settings-tabs-layout .settings-section + .settings-section`)
   previously assumed this block existed but never defined the base. */
.settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.settings-section__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-sm);
}

/* Settings page — tabbed layout container */
.settings-tabs-layout {
    padding: var(--space-md) var(--space-lg);
}

.settings-tabs-layout .settings-section + .settings-section {
    margin-top: var(--space-lg);
}

/* ========================================
   Specialized Page Templates
   Dashboard, Pricing, Status Result,
   Notification Feed, Wizard. Heavy Data
   reuses .glass-card + filter-card.
   See `/design-system#dashboard-template`
   ... `/design-system#wizard-template`.
   ======================================== */

/* --- Dashboard --- */

/* Stat card — global so every dashboard / overview / summary page can use it.
   Promoted from DesignSystem.razor.css (F-174). Composition:
   .stat-card[.stat-card--clickable] > .stat-icon.stat-icon--<variant> + .stat-value + .stat-label
   (.stat-trend.stat-trend--up|--down optional). */
.stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.stat-card:hover {
    border-color: var(--glass-border-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-card--clickable {
    cursor: pointer;
}

.stat-card--clickable:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-md);
}

.stat-card--compact {
    text-align: left;
}

.stat-card--compact .stat-value {
    font-size: 1.5rem;
}

.stat-card--compact + .stat-card--compact {
    margin-top: var(--space-sm);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    font-size: 20px;
}

.stat-icon--blue {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-tier-starter);
}

.stat-icon--cyan {
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
}

.stat-icon--green {
    background: rgba(82, 196, 26, 0.12);
    color: var(--color-success);
}

.stat-icon--warning {
    background: rgba(250, 173, 20, 0.12);
    color: var(--color-warning);
}

.stat-icon--purple {
    background: rgba(114, 46, 209, 0.12);
    color: var(--color-accent-purple-light);
}

.stat-icon--danger {
    background: rgba(255, 77, 79, 0.12);
    color: var(--color-error);
}

.stat-icon--primary,
.stat-icon--orange {
    background: rgba(230, 122, 46, 0.12);
    color: var(--color-primary-light);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
}

.stat-trend--up {
    color: var(--color-success);
}

.stat-trend--down {
    color: var(--color-error);
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (max-width: 992px) {
    .dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* Dashboard glass-card section heading (Recent activity, Quick actions, etc.) */
.dashboard-card-title {
    margin: 0 0 var(--space-md) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Empty-state copy inside an activity feed / timeline card */
.activity-feed-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
}

/* Grid wrapper for dashboard quick-action buttons */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

/* --- Pricing billing toggle --- */
.pricing-billing-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    width: fit-content;
    margin: 0 auto var(--space-xl);
}

.pricing-billing-toggle button {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.pricing-billing-toggle button.active {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-primary-md);
}

/* --- Pricing tier cards --- */
.pricing-tier-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.pricing-tier-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    transition: all var(--transition-base);
}

.pricing-tier-card:hover {
    border-color: var(--glass-border-light);
    transform: translateY(-2px);
}

.pricing-tier-card--featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), 0 8px 32px rgba(230, 122, 46, 0.15);
}

.pricing-tier-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--text-primary);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pricing-tier-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pricing-tier-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.pricing-tier-price__amount {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* "Custom" / "Contact us" enterprise-tier amount — smaller because it's a word.
   F-176: promoted from PricingPlayground.razor.css. */
.pricing-tier-price__amount--custom {
    font-size: 1.75rem;
}

.pricing-tier-price__period {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Pricing page header — centered variant.
   F-176: promoted from PricingPlayground.razor.css. */
.pricing-header--centered {
    text-align: center;
}

.pricing-tier-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
    flex: 1;
}

.pricing-tier-features li {
    padding-left: 1.25rem;
    position: relative;
}

.pricing-tier-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .pricing-tier-row {
        grid-template-columns: 1fr;
    }

    .pricing-tier-card {
        padding: var(--space-lg);
    }
}

/* --- FAQ section (commonly paired with pricing / marketing pages) ---
   F-176: promoted from PricingPlayground.razor.css. */
.faq-section__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-lg) 0;
}

/* --- Subscription "current plan" card ---
   F-176: promoted from SubscriptionPlayground.razor.css. Pairs with the
   already-global .subscription-tag family in overrides.css:1015. */
.subscription-current-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.subscription-current-plan__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.subscription-current-plan__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Plan name — prominent value under the uppercase __title.
   Used by /billing and the subscription playground. */
.subscription-current-plan__name {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.subscription-current-plan__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: var(--space-xs) 0 0 0;
}

.subscription-current-plan__renewal {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.subscription-current-plan__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.subscription-current-plan__hint {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin: var(--space-sm) 0 0 0;
}

@media (max-width: 768px) {
    .subscription-current-plan__actions {
        width: 100%;
    }
}

/* --- subscription-meter molecule (global; consumed by /billing usage section + design-system) --- */
.subscription-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subscription-meter__row {
    display: flex;
    justify-content: space-between;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.subscription-meter__value {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.subscription-meter__caption {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* --- Status Result --- */
.status-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.status-result__icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    margin-bottom: var(--space-lg);
    animation: resultIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.status-result--success .status-result__icon {
    background: rgba(82, 196, 26, 0.12);
    color: var(--color-success);
    box-shadow: 0 0 0 8px rgba(82, 196, 26, 0.04), 0 8px 32px rgba(82, 196, 26, 0.18);
}

.status-result--warning .status-result__icon {
    background: rgba(250, 173, 20, 0.12);
    color: var(--color-warning);
    box-shadow: 0 0 0 8px rgba(250, 173, 20, 0.04), 0 8px 32px rgba(250, 173, 20, 0.18);
}

.status-result--error .status-result__icon {
    background: rgba(255, 77, 79, 0.12);
    color: var(--color-error);
    box-shadow: 0 0 0 8px rgba(255, 77, 79, 0.04), 0 8px 32px rgba(255, 77, 79, 0.18);
}

.status-result--info .status-result__icon {
    background: rgba(230, 122, 46, 0.12);
    color: var(--color-primary);
    box-shadow: 0 0 0 8px rgba(230, 122, 46, 0.04), 0 8px 32px rgba(230, 122, 46, 0.18);
}

.status-result__title {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.02em;
    animation: slideUp 0.4s ease-out 0.2s both;
}

.status-result__description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 var(--space-lg) 0;
    max-width: 480px;
    animation: slideUp 0.4s ease-out 0.3s both;
}

.status-result__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
    animation: slideUp 0.4s ease-out 0.35s both;
}

@keyframes resultIconPop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .status-result__actions {
        flex-direction: column;
        width: 100%;
    }

    .status-result__actions .ant-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .status-result {
        padding: var(--space-xl) var(--space-md);
    }

    .status-result__icon {
        width: 64px;
        height: 64px;
        font-size: 36px;
    }

    .status-result__title {
        font-size: 1.5rem;
    }
}

/* --- Audit-log primitives — referenced by `audit-log-playground` catalog pattern --- */
.audit-log-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.audit-log-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.audit-log-row:hover {
    background: var(--glass-bg-light);
    border-color: var(--glass-border-light);
}

.audit-log-row[data-selected="true"] {
    border-color: var(--color-primary);
    background: var(--glass-bg-light);
}

.audit-log-row[data-fresh="true"] {
    border-left: 3px solid var(--color-primary);
}

.audit-log-row__action {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: capitalize;
}

.audit-log-row__target {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-log-row__actor {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.audit-log-row__time {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

/* Small muted timestamp under a timeline event message — activity feeds, change
   history, audit detail panels. F-176: promoted from DetailPlayground.razor.css. */
.timeline-event__time {
    margin-top: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* --- File upload primitives — referenced by `file-upload-playground` catalog pattern --- */
.upload-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    border: 1px dashed var(--glass-border-light);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    transition: border-color 150ms ease, background 150ms ease;
    gap: var(--space-sm);
}

.upload-dropzone:hover,
.upload-dropzone:focus {
    border-color: var(--color-primary);
    background: var(--glass-bg-light);
    outline: none;
}

/* Drag-active state — apply via .upload-dropzone--dragging when @ondragenter fires.
   F-176: promoted from FileUploadPlayground.razor.css. */
.upload-dropzone--dragging {
    border-color: var(--color-primary);
    background: var(--glass-bg-light);
}

/* Tall column-oriented dropzone (multi-file / clipboard-paste variants). */
.upload-dropzone--column {
    min-height: 140px;
    flex-direction: column;
}

/* "Choose file" label rendered as a button (sits inside a .upload-dropzone with
   a sibling visually-hidden <input type="file">).
   F-176: promoted from FileUploadPlayground.razor.css. */
.upload-choose-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.upload-choose-label--block {
    flex-direction: column;
    text-align: center;
    color: var(--text-muted);
}

.upload-choose-label:hover {
    color: var(--color-primary);
}

/* Avatar-upload row: 80×80 circular preview + adjacent picker affordance.
   F-176: promoted from FileUploadPlayground.razor.css. */
.upload-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.upload-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

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

.upload-file-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    margin-top: var(--space-sm);
}

.upload-file-row[data-state="error"] {
    border-color: var(--color-error);
}

.upload-file-row[data-state="done"] {
    border-color: var(--color-success);
}

.upload-file-row__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg-light);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    flex-shrink: 0;
}

.upload-file-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.upload-file-row__name {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-file-row__meta {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-bottom: var(--space-xs);
}

.upload-file-row__actions {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* --- Modal-body form field — referenced by `modal-page` catalog pattern --- */
.ds-tpl-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.ds-tpl-form-field:last-child {
    margin-bottom: 0;
}

/* --- Empty State --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    gap: var(--space-md);
}

.empty-state__icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border-radius: 50%;
    margin-bottom: var(--space-md);
}

.empty-state__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.empty-state__description {
    color: var(--text-muted);
    max-width: 480px;
    margin: 0;
}

.empty-state__cta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-sm);
}

@media (max-width: 768px) {
    .empty-state__cta {
        flex-direction: column;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: var(--space-xl) var(--space-md);
    }

    .empty-state__icon {
        width: 72px;
        height: 72px;
    }

    .empty-state__title {
        font-size: 1.25rem;
    }
}

/* --- Legacy Empty State Card (compat for pages not yet migrated to .glass-card > .empty-state BEM) --- */
.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.empty-state-card h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.empty-state-card p {
    color: var(--text-muted);
    max-width: 480px;
    margin: 0;
}

.empty-state-card .empty-icon,
.empty-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border-radius: 50%;
    font-size: 40px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

@media (max-width: 480px) {
    .empty-state-card {
        padding: var(--space-xl) var(--space-md);
    }

    .empty-state-card .empty-icon,
    .empty-icon {
        width: 72px;
        height: 72px;
        font-size: 32px;
    }

    .empty-state-card h2 {
        font-size: 1.25rem;
    }
}

/* --- Notification Feed --- */
.notification-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    transition: all var(--transition-fast);
}

.notification-card:hover {
    border-color: var(--glass-border-light);
}

.notification-card--unread {
    background: var(--glass-bg-light);
    border-left-color: var(--color-primary);
}

.notification-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.notification-card__icon--info {
    background: rgba(230, 122, 46, 0.12);
    color: var(--color-primary);
}

.notification-card__icon--success {
    background: rgba(82, 196, 26, 0.12);
    color: var(--color-success);
}

.notification-card__icon--warning {
    background: rgba(250, 173, 20, 0.12);
    color: var(--color-warning);
}

.notification-card__icon--error {
    background: rgba(255, 77, 79, 0.12);
    color: var(--color-error);
}

.notification-card__body {
    flex: 1;
    min-width: 0;
}

.notification-card__title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.notification-card__text {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 4px 0;
}

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

@media (max-width: 480px) {
    .notification-card {
        padding: var(--space-md);
    }
}

/* --- Wizard Progress Rail --- */
.wizard-progress {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-md);
}

.wizard-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.wizard-progress__bullet {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    transition: all var(--transition-base);
}

.wizard-progress__step--current .wizard-progress__bullet {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(230, 122, 46, 0.12);
    box-shadow: 0 0 0 4px rgba(230, 122, 46, 0.12);
}

.wizard-progress__step--complete .wizard-progress__bullet {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.wizard-progress__label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.wizard-progress__step--current .wizard-progress__label {
    color: var(--color-primary);
    font-weight: 600;
}

.wizard-progress__rail {
    flex: 1;
    height: 2px;
    background: var(--glass-border);
    margin: 0 var(--space-sm);
    margin-bottom: 1.5rem; /* align with bullet center */
}

.wizard-progress__rail--complete {
    background: var(--color-primary);
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-lg);
}

@media (max-width: 480px) {
    .wizard-progress {
        padding: var(--space-md) 0;
    }

    .wizard-progress__label {
        display: none;
    }

    .wizard-actions .ant-btn {
        flex: 1;
    }
}

/* --- Wizard step body — title, hint, fields, review, edit-link.
   F-176: promoted from WizardPlayground.razor.css. Fills the obvious gap where
   .wizard-progress + .wizard-actions existed globally but step-body styles did not. */
.wizard-step__title {
    color: var(--text-primary);
    margin: 0 0 var(--space-xs);
}

.wizard-step__hint {
    color: var(--text-muted);
    margin: 0 0 var(--space-lg);
}

.wizard-step__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.wizard-step__error {
    margin: 0;
    color: var(--color-error);
    font-size: 0.8125rem;
}

.wizard-step__review {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
}

.wizard-step__review-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: baseline;
    gap: var(--space-md);
}

.wizard-step__review-row dt {
    color: var(--text-muted);
    font-weight: 500;
}

.wizard-step__review-row dd {
    margin: 0;
    color: var(--text-primary);
}

.wizard-step__edit {
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.wizard-step__edit:hover {
    text-decoration: underline;
}

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

    .wizard-step__review-row dt {
        grid-column: 1 / -1;
    }
}

/* --- Portal Client Header Bar --- */
.client-header-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--glass-bg-light);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.client-header-bar__label {
    font-weight: 500;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .client-header-bar {
        flex-wrap: wrap;
        padding: var(--space-sm) var(--space-md);
    }
}

/* --- Heavy Data Report --- */
.heavy-data-section {
    position: relative;
}

/* "{N} of {total} loaded" caption above streaming-data tables.
   F-176: promoted from HeavyDataPlayground.razor.css. */
.heavy-data-section__loaded-count {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    padding-top: 0.375rem;
}

.heavy-data-totals {
    position: sticky;
    bottom: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--glass-border);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.heavy-data-totals strong {
    color: var(--text-primary);
}

.heavy-data-sentinel {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.heavy-data-density--compact .ant-table-cell {
    padding: 4px 8px !important;
    font-size: 0.8125rem;
}

.heavy-data-density--comfortable .ant-table-cell {
    padding: 12px 16px !important;
}

.heavy-data-density--spacious .ant-table-cell {
    padding: 20px 24px !important;
}

/* ========================================
   Calendar Cell Annotations
   Global so every page rendering an annotated AntDesign <Calendar/>
   (vacation, billing, deadline, etc.) can reuse it.
   Composition:
     .calendar-cell[.calendar-cell--<variant>]
       > .calendar-cell__day + (.calendar-annotation)?
   Variants: --substitute, --override, --today, --past.
   See `/design-system#calendar-annotated-playground-template`.
   ======================================== */

.calendar-cell {
    position: relative;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base);
}

.calendar-cell__day {
    font-weight: 600;
}

.calendar-annotation {
    display: inline-block;
    font-size: 0.6875rem;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(230, 122, 46, 0.15);
    color: var(--color-primary);
    margin-left: 4px;
}

.calendar-cell--substitute {
    background: rgba(96, 165, 250, 0.08);
}

.calendar-cell--override {
    background: rgba(122, 46, 209, 0.08);
}

.calendar-cell--today {
    outline: 2px solid var(--color-primary);
}

.calendar-cell--past {
    opacity: 0.5;
}

/* ========================================
   Holiday Calendar (CF-027)
   Cell-variant rules for non-working days inside an AntDesign <Calendar>
   that uses DateFullCellRender. The consumer page renders cells with
   .ant-picker-cell-inner.holiday-cell[--substitute|--today|--past]; these
   classes are global (not scoped) so /design-system and /holidays both pick
   them up.
   See `/design-system#holiday-calendar-template`.
   ======================================== */
.holiday-cell {
    position: relative;
    background: var(--color-primary-bg);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary-light);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.holiday-cell:hover {
    background: var(--color-primary-bg-hover);
    border-color: var(--color-primary);
}

.holiday-cell--substitute {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-bg);
    color: var(--color-warning-light);
}

.holiday-cell--substitute:hover {
    border-color: var(--color-warning);
}

.holiday-cell__tag {
    display: block;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.125rem;
    color: var(--color-warning);
}

/* Holiday name label inside calendar cells (consumer pages render this via DateFullCellRender). */
.holiday-cell__name {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    margin-top: 0.125rem;
}

.holiday-cell--today {
    box-shadow: 0 0 0 2px var(--color-primary-glow);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.holiday-cell--past {
    opacity: 0.45;
}

/* Bureau-scoped firm closure (CF-028). Distinct from --substitute (warning) and
   --today (primary): uses the brand purple accent + a dashed border to signal
   "firm-internal closure, not national holiday". Display-only — bureau overrides
   never participate in legal-deadline arithmetic. */
.holiday-cell--bureau-override {
    background: rgba(114, 46, 209, 0.12);
    border-color: var(--color-accent-purple);
    border-style: dashed;
    color: var(--color-accent-purple-light);
}

.holiday-cell--bureau-override:hover {
    border-color: var(--color-accent-purple-hover);
}

@media (max-width: 768px) {
    .holiday-cell {
        padding: 0.125rem var(--space-xs);
    }

    .holiday-cell__tag {
        margin-top: 0;
    }
}

/* ========================================
   Upcoming Holiday Hint (CF-027)
   Compact glass card surfacing the next non-working day. Three variants:
   default (date + name + countdown), today (accent), and mobile-collapsed.
   Classes are global (not scoped): UpcomingHolidayHint builds its class
   string in the .razor.cs partial, so scoped-CSS attributes never attach.
   ======================================== */
.holiday-hint {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.holiday-hint__icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.holiday-hint__body {
    flex: 1;
    min-width: 0;
}

.holiday-hint__title {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2xs);
}

.holiday-hint__subtitle {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.holiday-hint__countdown {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-light);
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-2xs) var(--space-sm);
}

.holiday-hint--today {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.holiday-hint--today .holiday-hint__icon {
    color: var(--color-primary-light);
}

.holiday-hint--today .holiday-hint__title {
    color: var(--color-primary-light);
}

.holiday-hint--mobile {
    padding: var(--space-sm) var(--space-md);
}

.holiday-hint--mobile .holiday-hint__title {
    display: none;
}

@media (max-width: 768px) {
    .holiday-hint {
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }

    .holiday-hint__countdown {
        display: none;
    }
}

@media (max-width: 480px) {
    .holiday-hint__title {
        display: none;
    }
}

/* ========================================
   Deadline-Dots (Density Grid)
   Global so reminder/alarm/scheduling UIs can reuse it.
   Composition:
     .deadline-row > .bureau-deadline-cell
       > .bureau-deadline-cell__date
       + .bureau-deadline-cell__dots
         > .deadline-dot.deadline-dot--<urgency> x N
         + .bureau-deadline-cell__overflow?
   Urgencies: --low, --med, --high, --critical.
   See `/design-system#deadline-dots-playground-template`.
   ======================================== */

.deadline-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.bureau-deadline-cell {
    aspect-ratio: 1;
    padding: 6px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bureau-deadline-cell__date {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.bureau-deadline-cell__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.deadline-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

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

.deadline-dot--med {
    background: var(--color-warning);
}

.deadline-dot--high {
    background: var(--color-primary);
}

.deadline-dot--critical {
    background: var(--color-error);
}

.bureau-deadline-cell__overflow {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-left: 2px;
}

@media (max-width: 768px) {
    .deadline-row {
        grid-template-columns: repeat(5, 1fr);
    }
}

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

/* ========================================
   Bureau Deadline Calendar (F-091)
   Multi-dot urgency cell rules for cross-client compliance deadlines inside an
   AntDesign <Calendar> using DateFullCellRender. Up to 6 dots per day, then a
   `+N` overflow chip. Namespaced under .bureau-deadline-calendar (the component
   root) because the Deadline-Dots playground section above reuses
   .bureau-deadline-cell with different chrome. Global (NOT scoped) because the
   cells are built in the .razor.cs partial via RenderTreeBuilder, which never
   receives scoped-CSS attributes.
   ======================================== */
.bureau-deadline-calendar .bureau-deadline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: var(--space-sm);
}

.bureau-deadline-calendar .bureau-deadline-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.bureau-deadline-calendar .bureau-deadline-legend__label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Calendar day cell — explicitly neutralizes the playground density-grid
   chrome (aspect-ratio tile + glass border) that shares this class name. */
.bureau-deadline-calendar .bureau-deadline-cell {
    aspect-ratio: auto;
    background: transparent;
    border: none;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    min-height: 64px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.bureau-deadline-calendar .bureau-deadline-cell__day {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.1;
}

.bureau-deadline-calendar .bureau-deadline-cell--today {
    background: var(--color-primary-bg);
}

.bureau-deadline-calendar .bureau-deadline-cell--past {
    opacity: 0.55;
}

.bureau-deadline-calendar .bureau-deadline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bureau-deadline-calendar .bureau-deadline-dot--overdue   { background: var(--color-error); }
.bureau-deadline-calendar .bureau-deadline-dot--3d        { background: var(--color-warning); }
.bureau-deadline-calendar .bureau-deadline-dot--7d        { background: var(--color-amber); }
.bureau-deadline-calendar .bureau-deadline-dot--upcoming  { background: var(--color-info); }

.bureau-deadline-calendar .bureau-deadline-overflow {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--glass-bg-subtle);
    color: var(--text-secondary);
    font-size: 0.625rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .bureau-deadline-calendar .bureau-deadline-cell {
        min-height: 56px;
        padding: var(--space-2xs) var(--space-xs);
    }

    .bureau-deadline-calendar .bureau-deadline-legend {
        gap: var(--space-sm);
        padding: var(--space-xs) var(--space-sm);
    }
}

@media (max-width: 480px) {
    .bureau-deadline-calendar .bureau-deadline-cell {
        min-height: 48px;
    }

    .bureau-deadline-calendar .bureau-deadline-legend__label {
        font-size: 0.6875rem;
    }
}

/* ========================================
   Playground Hub Grid (F-174 TASK_40)
   Used by /design-system/playgrounds (PlaygroundIndex.razor) — three card grids
   grouped by A/B/C playground category. Composition:
     .playground-section > .playground-card-grid > .playground-card.glass-card x N
   ======================================== */

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

.playground-section:first-of-type {
    margin-top: var(--space-xl);
}

.playground-section__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.playground-section__count {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.875rem;
    margin-left: var(--space-xs);
}

.playground-section__hint {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-lg);
}

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

.playground-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

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

.playground-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.playground-card__description {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.playground-card__footer {
    margin-top: auto;
    padding-top: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    border-top: 1px solid var(--glass-border);
}

.playground-card__route {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playground-card__cta {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary-light);
    white-space: nowrap;
}

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

/* ========================================
   Reconciliation Grid
   Vertical stack of paired rows for matching workflows (transactions to bank statements,
   diff/sync UIs, etc.). Each row is a 3-column grid: left record | match badge | right record.
   Composition:
     .reconciliation-grid > .reconciliation-pair x N
       > .reconciliation-pair__side.reconciliation-pair__side--left
       + .reconciliation-match-badge[.reconciliation-match-badge--matched|--unmatched|--drop-target]
       + .reconciliation-pair__side.reconciliation-pair__side--right
   See `/design-system#reconciliation-playground-template`.
   ======================================== */

.reconciliation-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.reconciliation-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-md);
    align-items: stretch;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: border-color var(--transition-base);
}

.reconciliation-pair--matched {
    border-color: rgba(82, 196, 26, 0.4);
    background: rgba(82, 196, 26, 0.06);
}

.reconciliation-pair--drag-over {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-glow);
}

.reconciliation-pair__side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--glass-bg-light);
    min-height: 56px;
}

.reconciliation-pair__side--draggable {
    cursor: grab;
}

.reconciliation-pair__side--draggable:active {
    cursor: grabbing;
}

.reconciliation-pair__side--empty {
    background: transparent;
    border: 1px dashed var(--glass-border);
    color: var(--text-muted);
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
}

.reconciliation-pair__reference {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.reconciliation-pair__amount {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

.reconciliation-match-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    align-self: center;
    height: 32px;
    border-radius: 50%;
    background: var(--glass-bg-light);
    color: var(--text-muted);
    font-size: 1rem;
    border: 1px solid var(--glass-border);
}

.reconciliation-match-badge--matched {
    background: rgba(82, 196, 26, 0.15);
    color: var(--color-success);
    border-color: rgba(82, 196, 26, 0.4);
}

.reconciliation-match-badge--unmatched {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .reconciliation-pair {
        grid-template-columns: 1fr;
    }
    .reconciliation-match-badge {
        justify-self: center;
    }
}

/* ========================================
   Calculator Page Grid
   Two-pane input/output layout for calculator
   and financial tool pages. Composition:
   .calculator-page-grid > .calculator-pane[input] + .calculator-pane[output]
   See `/design-system#calculator-playground-template`.
   ======================================== */

.calculator-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
}

/* Pane wrappers used by FeeCalculatorEdit — keep grid children shrinkable. */
.calculator-page-grid__input,
.calculator-page-grid__output {
    min-width: 0;
}

/* Calculator pane — section heading inside an input/output pane on a calculator page.
   F-176: promoted from CalculatorPlayground.razor.css. */
.calculator-pane h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .calculator-page-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Shared Animations
   Common keyframes used across multiple pages.
   Pages can reference these without re-declaring.
   ======================================== */

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   Auth Form Shared Styles
   Used across Login, Register, LoginConfirm,
   RegisterConfirm pages.
   ======================================== */

.auth-form {
    width: 100%;
    position: relative;
    z-index: 1;
}

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

.auth-title {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.625rem 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.auth-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.auth-code-expires {
    font-size: 0.875rem;
    color: var(--color-primary);
    margin: 0.75rem 0 0 0;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(230, 122, 46, 0.1);
    border-radius: var(--radius-sm);
}

.auth-footer-links {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.auth-footer-links a {
    color: var(--color-primary);
    text-decoration: none;
    margin-left: 0.375rem;
    font-weight: 500;
    transition: var(--transition-fast);
    position: relative;
}

.auth-footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.auth-footer-links a:hover {
    color: var(--color-primary-light);
}

.auth-footer-links a:hover::after {
    width: 100%;
}

/* Auth-page button hover shine effect */
.auth-form .ant-btn-primary {
    position: relative;
    overflow: hidden;
}

.auth-form .ant-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.2) 0%,
            transparent 50%
    );
    opacity: 0;
    transition: opacity var(--transition-base);
}

.auth-form .ant-btn-primary:hover::before {
    opacity: 1;
}

@media (max-width: 480px) {
    .auth-title {
        font-size: 1.625rem;
    }

    .auth-subtitle {
        font-size: 0.875rem;
    }
}

/* ========================================
   List Page Shared Components
   Filter cards, loading/retry states, tables,
   pagination, skeletons, and utilities used
   across list pages (TicketList, Notifications, etc.)
   ======================================== */

/* --- Loading Container --- */
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.loading-container .ant-spin-text {
    color: var(--text-secondary) !important;
}

/* --- Retry Container --- */
.retry-container {
    margin-top: var(--space-md);
    text-align: center;
}

/* Right-aligned inline retry row (for list/table pages with optimistic refetch).
   F-176: promoted from ListPlayground.razor.css `.list-playground__retry`. */
.retry-container--inline {
    text-align: initial;
    display: flex;
    justify-content: flex-end;
}

.retry-container .ant-btn {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-secondary) !important;
}

.retry-container .ant-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* --- Import Banner ---
   Glass-card variant with a left text block and a right-aligned action button,
   used for "N records not yet in the register" import prompts (F-116). */
.import-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.import-banner__text {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* --- Filter Card --- */
.filter-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    animation: pageSlideUp 0.4s ease-out;
}

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

.filter-item {
    flex: 1;
    min-width: 160px;
}

.filter-item--search {
    flex: 1.5;
    min-width: 200px;
}

.filter-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    font-weight: 500;
}

.filter-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-end;
    padding-bottom: 1px;
}

/* Action row belonging to a panel/section rather than to a filter bar — e.g. the
   credit-note refund panel's "record refund manually" button above its candidate
   table, or a retry row under an error alert. F-176: promoted out of inline
   `style="margin-*"` attributes so panels can compose from globals only. */
.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Same row placed *after* the content it acts on (error / empty states). */
.section-actions--after {
    margin-bottom: 0;
    margin-top: var(--space-md);
}

/* --- Tree toolbar + node title family ---
   F-176: promoted from TreePlayground.razor.css. "Search input + filter buttons +
   counter" toolbar above any tree/list; "icon + text" tree node title with
   filter/search states. Real org-chart, file-browser, role-tree pages want these. */
.tree-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.tree-toolbar > :first-child {
    flex: 1 1 320px;
}

.search-match-count {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.tree-node-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.tree-node-title__icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.tree-node-title--dimmed {
    opacity: 0.4;
}

.tree-node-title--match .tree-node-title__name {
    color: var(--color-primary-light);
    font-weight: 500;
}

.tree-node-title--match .tree-node-title__icon {
    color: var(--color-primary);
}

/* --- Form Field utility (non-submit reactive inputs) --- */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.form-field__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Inline hint text beneath a .form-field (validation/help messaging).
   F-176: promoted from InputsPlayground.razor.css. */
.form-field__hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.form-field__hint--success {
    color: var(--color-success);
}

.form-field__hint--error {
    color: var(--color-error);
}

/* Advisory, non-blocking hint — something needs a second look but nothing is broken
   and nothing is stopped. Reserve --error for hints that actually block the user. */
.form-field__hint--warning {
    color: var(--color-warning);
}

/* Password-strength meter — 4-state track + fill bar.
   F-176: promoted from InputsPlayground.razor.css. */
.password-strength {
    height: 4px;
    background: var(--glass-bg);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--space-xs);
}

.password-strength__bar {
    height: 100%;
    transition: width 200ms ease, background-color 200ms ease;
}

.password-strength__bar--weak {
    background: var(--color-error);
}

.password-strength__bar--fair {
    background: var(--color-warning);
}

.password-strength__bar--strong {
    background: var(--color-amber);
}

.password-strength__bar--excellent {
    background: var(--color-success);
}

/* Suggestion chip row beneath an input — "Try these instead:" affordance.
   F-176: promoted from InputsPlayground.razor.css. */
.input-suggestions {
    margin-top: var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.input-suggestions__item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.input-suggestions__item:hover {
    border-color: var(--color-primary);
    background: var(--glass-bg-light);
}

/* Muted secondary meta-text shown beside an option's primary label (e.g. an
   email beside a user's display name in a `<Select>` or autocomplete row).
   F-176: promoted from InputsPlayground.razor.css. */
.option-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-left: var(--space-xs);
}

/* Inline autocomplete results panel (rendered below the input).
   F-176: promoted from InputsPlayground.razor.css. */
.autocomplete-results-list {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    max-height: 280px;
    overflow-y: auto;
}

.autocomplete-results-list__item {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--glass-border);
    transition: background 150ms ease;
}

.autocomplete-results-list__item:last-child {
    border-bottom: none;
}

.autocomplete-results-list__item:hover {
    background: var(--glass-bg-light);
}

/* Keyboard-highlighted row (ArrowUp / ArrowDown), matching the hover affordance. */
.autocomplete-results-list__item--active {
    background: var(--glass-bg-light);
}

/* Filter card — search input */
.filter-card .ant-input-affix-wrapper {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
}

.filter-card .ant-input-affix-wrapper:hover {
    border-color: var(--glass-border-light) !important;
}

.filter-card .ant-input-affix-wrapper:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

.filter-card .ant-input-affix-wrapper .ant-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
}

.filter-card .ant-input-search-button {
    border-radius: var(--radius-md) !important;
    margin-left: 5px !important;
}

/* Search input — fill filter-item container width */
.filter-card .ant-input-group-wrapper.ant-input-search {
    width: 100% !important;
}

.filter-card .ant-input-search .ant-input-wrapper.ant-input-group {
    width: 100% !important;
}

/* Multi-select tag styling inside filter cards */
.filter-card .ant-select-selection-overflow-item .ant-select-selection-item {
    background: rgba(230, 122, 46, 0.15) !important;
    border-color: rgba(230, 122, 46, 0.3) !important;
    color: var(--color-primary) !important;
    border-radius: var(--radius-sm);
}

.filter-card .ant-select-selection-item-remove {
    color: var(--color-primary) !important;
}

/* --- Page Header Actions ---
   .header-actions is the legacy alias — 30+ pages use it for the same
   right-side action cluster; both names get identical layout. */
.page-header__actions,
.header-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* --- Table Container --- */
.table-container {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: pageSlideUp 0.5s ease-out;
}

/* Allow horizontal scroll inside a glass-card-hosted table when the column set
   exceeds viewport width. F-176: promoted from TablesPlayground.razor.css. */
.table-card--scroll-x {
    overflow-x: auto;
}

/* ========================================
   Table row affordances — expand, edit, sub-records.
   F-176: promoted from TablesPlayground.razor.css. Reusable across every
   feature table that needs expandable rows, ••• action menus, inline-edit
   cells, or sub-tables of child records (invoices line items, audit detail,
   sub-records, etc.).
   ======================================== */

/* Borderless chevron button used to expand a table row. */
.row-expand-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.row-expand-toggle:hover {
    color: var(--color-primary);
}

/* Borderless ellipsis (•••) button that opens a per-row actions dropdown. */
.row-actions-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.row-actions-toggle:hover {
    color: var(--text-primary);
    background: var(--glass-bg-light);
}

/* Cell with a transparent dashed underline that becomes visible on hover —
   the "click to edit inline" affordance. */
.cell-editable {
    cursor: text;
    border-bottom: 1px dashed transparent;
    transition: border-color 150ms ease;
}

.cell-editable:hover {
    border-bottom-color: var(--glass-border-light);
}

/* Inline `<input>` that replaces a .cell-editable in edit mode. */
.cell-edit-input {
    background: var(--glass-bg-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    padding: 2px 6px;
    width: 8rem;
    text-align: right;
}

/* Glass surface revealed below an expanded row. */
.row-expand-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-sm);
}

.row-expand-content__title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm);
}

/* Secondary `<table>` rendered inside .row-expand-content for child records
   (line items, sub-rows, audit detail). */
.row-expand-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.row-expand-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    padding: 4px 8px;
    border-bottom: 1px solid var(--glass-border);
}

.row-expand-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--glass-border);
}

.table-container .ant-table {
    background: transparent !important;
}

.table-container .ant-table-thead > tr > th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table-container .ant-table-tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.table-container .ant-table-tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.03) !important;
}

.table-container .ant-table-tbody > tr:last-child > td {
    border-bottom: none !important;
}

/* --- Skeleton Rows --- */
.skeleton-row {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.skeleton-row .ant-skeleton-content .ant-skeleton-title {
    background: linear-gradient(90deg, var(--glass-bg-light) 25%, rgba(255, 255, 255, 0.08) 50%, var(--glass-bg-light) 75%) !important;
    background-size: 400% 100% !important;
}

.skeleton-row .ant-skeleton-content .ant-skeleton-paragraph > li {
    background: linear-gradient(90deg, var(--glass-bg-light) 25%, rgba(255, 255, 255, 0.08) 50%, var(--glass-bg-light) 75%) !important;
    background-size: 400% 100% !important;
}

.skeleton-row .ant-skeleton-avatar {
    background: var(--glass-bg-light) !important;
}

/* --- Pagination --- */
.pagination-container {
    display: flex;
    justify-content: center;
    padding: var(--space-lg);
}

.pagination-container .ant-pagination-item {
    background: var(--glass-bg-light) !important;
    border-color: var(--glass-border) !important;
}

.pagination-container .ant-pagination-item a {
    color: var(--text-secondary) !important;
}

.pagination-container .ant-pagination-item-active {
    border-color: var(--color-primary) !important;
}

.pagination-container .ant-pagination-item-active a {
    color: var(--color-primary) !important;
}

.pagination-container .ant-pagination-prev .ant-pagination-item-link,
.pagination-container .ant-pagination-next .ant-pagination-item-link {
    background: var(--glass-bg-light) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

/* --- Tag Colors (Dark Theme) --- */
.ant-tag-processing {
    background: rgba(24, 144, 255, 0.15) !important;
    border-color: rgba(24, 144, 255, 0.3) !important;
    color: var(--color-info-light) !important;
}

.ant-tag-blue {
    background: rgba(24, 144, 255, 0.15) !important;
    border-color: rgba(24, 144, 255, 0.3) !important;
    color: var(--color-info-light) !important;
}

.ant-tag-warning {
    background: rgba(250, 173, 20, 0.15) !important;
    border-color: rgba(250, 173, 20, 0.3) !important;
    color: var(--color-warning-light) !important;
}

.ant-tag-success,
.ant-tag-green {
    background: rgba(82, 196, 26, 0.15) !important;
    border-color: rgba(82, 196, 26, 0.3) !important;
    color: var(--color-success-light) !important;
}

.ant-tag-error,
.ant-tag-red {
    background: rgba(255, 77, 79, 0.15) !important;
    border-color: rgba(255, 77, 79, 0.3) !important;
    color: var(--color-error-light) !important;
}

.ant-tag-default {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-tag-cyan {
    background: rgba(19, 194, 194, 0.15) !important;
    border-color: rgba(19, 194, 194, 0.3) !important;
    color: #5cdbd3 !important; /* No token; cyan tag is used in 1 place */
}

.ant-tag-purple {
    background: rgba(114, 46, 209, 0.15) !important;
    border-color: rgba(114, 46, 209, 0.3) !important;
    color: var(--color-accent-purple-light) !important;
}

.ant-tag-orange {
    background: rgba(230, 122, 46, 0.15) !important;
    border-color: rgba(230, 122, 46, 0.3) !important;
    color: var(--color-primary) !important;
}

/* --- Empty State --- */
.ant-empty {
    padding: var(--space-2xl);
}

.ant-empty-description {
    color: var(--text-muted) !important;
}

/* --- Error Alert --- */
.ant-alert-error {
    background: rgba(255, 77, 79, 0.1) !important;
    border: 1px solid rgba(255, 77, 79, 0.2) !important;
    border-radius: var(--radius-md);
}

.ant-alert-error .ant-alert-message {
    color: var(--color-error-light) !important;
}

.ant-alert-error .ant-alert-description {
    color: rgba(255, 120, 117, 0.8) !important;
}

/* --- Utility Classes --- */
.datetime-cell {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

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

/* Brand-error color utility — destructive menu items, danger labels.
   F-176: promoted from TablesPlayground.razor.css. */
.text-danger {
    color: var(--color-error);
}

/* Right-aligned tabular-numeric cell — money/quantity/% columns in tables.
   F-176: promoted from TablesPlayground.razor.css. */
.numeric-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A table row the page wants to draw the eye to right after an action created or
   changed it (CF-062: the freshly created čl. 7 prigovor among its siblings). Reuses the
   accent border + tinted surface the app already uses for "look here" affordances, so it
   reads as emphasis rather than as a status. Cleared by the state's ClearHighlight().
   Specificity must beat the blanket `.ant-table-tbody > tr > td` rule in overrides.css. */
.ant-table-tbody > tr.is-highlighted > td {
    background: var(--glass-bg-light) !important;
}

.ant-table-tbody > tr.is-highlighted > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}

/* Grand-total rows in heavy-data ageing tables — visual separator from counterparty rows. */
.subtotal-row td {
    background: var(--glass-bg-light);
    border-top: 1px solid var(--glass-border-light);
    font-weight: var(--font-weight-semibold);
}

/* Native per-currency sub-row under a consolidated parent row (F-127).
   Specificity + !important must beat the blanket `.ant-table-tbody > tr > td`
   rule in overrides.css, which forces a transparent background and primary text. */
.ant-table-tbody > tr.table-sub-row > td {
    color: var(--text-secondary) !important;
    font-size: 0.8125rem;
    background: var(--glass-bg-subtle) !important;
}

/* The leading action column is empty on sub-rows, so the nesting indent goes on the
   counterparty cell — the first one that carries content. !important is required to
   beat AntDesign's equally-specific `.ant-table-small ... > td { padding: 8px }`. */
.ant-table-tbody > tr.table-sub-row > td:nth-child(2) {
    padding-left: 2.5rem !important;
}

.code-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* Glass-surface preformatted text container — diffs, webhook payloads, stack
   traces, JSON previews, SQL viewers, API-key reveal blocks.
   F-176: promoted from AuditLogPlayground.razor.css. */
.code-block {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    margin: 0;
}

/* ========================================================================
   Playground-only utilities (F-176)

   These classes back demo-only chrome on `/design-system/playground/*` pages —
   variant comparison grids, "5-states-in-a-row" decorators, demo controls
   rows, in-frame caveats. They are NOT for production features. The `.pg-`
   prefix marks them as such.

   When a real feature legitimately needs a similar layout, promote the
   pattern out of this block into the main app.css utilities above. Do NOT
   reach into `.pg-*` from real feature pages.

   Source: specs/F-176-PlaygroundScopedCssCleanup/AUDIT_REPORT.md
   ======================================================================== */

/* Variant switcher control row — Empty, StatusResult */
.pg-variant-switcher {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-xl);
    animation: pageSlideUp 0.4s ease-out;
}

/* Section-heading inside a playground glass-card — Tags, Feedback, Skeleton,
   Inputs, FileUpload, Drawers */
.pg-section-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
}

/* Companion body copy under .pg-section-title — FileUpload, Inputs, Drawers */
.pg-section-copy {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 var(--space-md);
}

.pg-section-copy code {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
}

/* Compare-N-variants block (top-border separator) — Skeleton, Wizard,
   Subscription, Inputs */
.pg-variant {
    padding-top: var(--space-md);
    border-top: 1px solid var(--glass-border);
}

.pg-variant:first-of-type {
    padding-top: 0;
    border-top: none;
}

/* UPPERCASE letterspaced caption above each .pg-variant block */
.pg-variant-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
}

/* 2-column variant-comparison grid (stacks at 768) — Inputs */
.pg-variant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

/* "label + control + hint" vertical stack inside .pg-variant-grid — Inputs */
.pg-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Inline-natural controls (Switch / Checkbox / Radio / Rate / Segmented) shouldn't
   stretch to fill the grid cell — they have intrinsic widths. Input / Select /
   DatePicker still stretch because they have their own width: 100%. */
.pg-field > .ant-switch,
.pg-field > .ant-radio-group,
.pg-field > .ant-checkbox-wrapper,
.pg-field > .ant-rate,
.pg-field > .ant-segmented {
    align-self: flex-start;
}

/* Generic vertical stack of demo items, gap-sm — Detail, Tags, Feedback */
.pg-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* "Label on left, control on right" demo row — Settings */
.pg-split-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

/* Centered single-state wrapper — Notifications */
.pg-center-row {
    display: flex;
    justify-content: center;
    padding: var(--space-md);
}

/* Flex-wrap row of demo trigger buttons — Modals, Drawers */
.pg-trigger-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Caveat / failure-mode notes list under a demo card — Modals */
.pg-notes-list {
    margin: 0;
    padding-left: var(--space-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.pg-notes-list code {
    font-family: var(--font-mono);
    color: var(--color-primary-light);
}

/* Single `margin-bottom` spacer for a demo control row — Settings */
.pg-demo-spacer {
    margin-bottom: var(--space-md);
}

/* Secondary-color helper paragraph under a demo — Skeleton */
.pg-hint {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Flex-wrap row of demo controls (slider + button) above a demonstrator —
   Skeleton */
.pg-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Inline-flex label wrapping a slider/switch in .pg-controls-row — Skeleton */
.pg-control-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Bare reset + flex column container for a "loaded list" demo — Skeleton */
.pg-demo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* 3-column "ref / label / amount" row used inside .pg-demo-list — Skeleton */
.pg-demo-list-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg-subtle);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
}

.pg-demo-list-item__ref {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.pg-demo-list-item__label {
    color: var(--text-primary);
}

.pg-demo-list-item__amount {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 500;
    color: var(--text-primary);
}

/* Visually-hidden file input for playground file-picker demos — FileUpload */
.pg-visually-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Viewport-fitting demo card to keep a long feed visible on-screen — AuditLog */
.pg-scroll-card-70vh {
    max-height: 70vh;
    overflow-y: auto;
}

/* --- Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
    }

    .filter-item {
        min-width: 100%;
    }

    .filter-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .page-header__actions {
        flex-direction: column;
        width: 100%;
    }

    .page-wrapper {
        padding: var(--space-lg);
    }

    .page-header {
        padding: var(--space-lg);
    }

    .page-header--with-actions {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Playground utilities — mobile collapse */
    .pg-variant-grid {
        grid-template-columns: 1fr;
    }

    .pg-demo-list-item {
        grid-template-columns: 1fr;
    }

    .pg-demo-list-item__amount {
        text-align: left;
    }
}

/* --- Responsive: Small mobile (480px) — playground utilities --- */
@media (max-width: 480px) {
    .pg-controls-row {
        gap: var(--space-sm);
    }
}

/* Responsive - Mobile */
@media (max-width: 576px) {
    .page-wrapper {
        padding: var(--space-md);
    }

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

    .page-title {
        font-size: 1.5rem;
    }

    .page-subtitle {
        font-size: 0.875rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TAB SECTION HEADER — shared by ClientDetail tabs (Portal Users,
   API Keys, and any future tab that needs a title + action button
   in a flex space-between header). Promoted from ClientDetail's
   scoped portal-users-header per F-176 (compose-from-globals only).
   ═══════════════════════════════════════════════════════════════ */

.tab-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.tab-section-header__text {
    flex: 1;
}

@media (max-width: 768px) {
    .tab-section-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CF-005 API KEYS — global utilities for the ClientDetail
   "API ključevi" tab. No scoped CSS introduced (F-176).
   ═══════════════════════════════════════════════════════════════ */

.api-key-mask {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.api-key-reveal-value {
    display: flex;
    justify-content: center;
    padding: var(--space-lg);
    margin: var(--space-md) 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 1rem;
    word-break: break-all;
    text-align: center;
    color: var(--text-primary);
}

.api-key-reveal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

@media (max-width: 480px) {
    .api-key-reveal-actions {
        flex-direction: column-reverse;
    }
}

/* F-113 — overpaid-invoice credit-note CTA (detail-page is scoped_css_allowed: none, so global) */
.overpaid-cta {
    margin-top: var(--space-md);
}

.overpaid-cta-btn {
    margin-top: var(--space-sm);
}

/* F-119 — cadence editor layout (detail-page is scoped_css_allowed: none, so global) */
.reminder-cadence-offsets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.reminder-cadence-add {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.reminder-cadence-repeat {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.reminder-cadence-error {
    margin-top: var(--space-sm);
}

.reminder-cadence-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════
   F-141 INSPECTION-NOTIFICATION CARD — global utilities for the
   side-column card on the work-injury / occupational-disease detail
   pages (InspectionNotificationCard.razor). The card renders a vertical
   Descriptions list; these classes stack each value (text + tag) so
   dates never wrap mid-token in the narrow column. No scoped CSS (F-176).
   ═══════════════════════════════════════════════════════════════ */

.inspection-card__block + .inspection-card__block {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--glass-border);
}

.inspection-card__value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    width: 100%;
}

.inspection-card__nowrap {
    white-space: nowrap;
}

.inspection-card__lines p {
    margin: 0;
    line-height: 1.5;
}

/* AntDesign Blazor 1.6.0 ignores Colon="false" on a vertical Descriptions —
   drop the trailing " :" the label ::after injects, it is noise when the
   label sits on its own line above the value. */
.inspection-card__block .ant-descriptions-item-label::after {
    content: none;
    margin: 0;
}

.inspection-card__prewrap {
    white-space: pre-line;
    overflow-wrap: anywhere;
}