/* 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-starter-rgb: 96, 165, 250;
    --color-tier-pro: #a78bfa;
    --color-tier-pro-rgb: 167, 139, 250;
    --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;
    --color-amber-rgb: 245, 166, 35;

    /* Indigo (Journal entry highlights) */
    --color-indigo: #6366f1;
    --color-indigo-rgb: 99, 102, 241;

    /* Accounting Semantics (financial ledger debit/credit) */
    --color-accounting-credit: #52c41a;
    --color-accounting-credit-rgb: 82, 196, 26;
    --color-accounting-debit: #ff4d4f;
    --color-accounting-debit-rgb: 255, 77, 79;

    /* Greyscale RGB triplets (used for rgba() translucent overlays) */
    --color-black-rgb: 0, 0, 0;
    --color-white-rgb: 255, 255, 255;
    --color-gray-rgb: 140, 140, 140;

    /* Semantic Status RGB triplets (translucent backgrounds, borders, glows) */
    --color-success-rgb: 82, 196, 26;
    --color-warning-rgb: 250, 173, 20;
    --color-error-rgb: 255, 77, 79;
    --color-info-hover-rgb: 64, 169, 255;
    --color-accent-purple-rgb: 114, 46, 209;

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

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

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

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

/* Section title — heading row inside form sections or glass-cards (icon + text).
   Defined globally so it applies inside portaled drawer/modal content where
   scoped CSS attributes (b-XXXX) don't reach. Pages may extend with their own
   `.section-title--variant` modifier classes. */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: 600;
    margin: 0 0 var(--space-md);
}

.section-title--with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

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

/* CF-039: cash-register day-session banner. Composes inside a .glass-card on the drawer detail
   page; promoted to a global utility (the detail page carries no scoped CSS — detail-page pattern
   is scoped_css_allowed: none). */
.session-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

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

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

.session-banner__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
}

.session-banner__metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

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

/* Empty-state title — heading inside `.empty-state` blocks across list/report pages.
   Defined globally because AntDesign Typography sets a default dark color on h3,
   which causes the heading to render invisible on the dark theme when the page's
   scoped CSS doesn't apply (e.g., inside portaled drawer/modal content, or when
   the rule was simply never added per-page). */
.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Form helper text — short caption under a field describing constraints or hints.
   Defined globally because AntDesign Drawer portals form content out of the
   component subtree, where scoped CSS attributes (b-XXXX) don't reach. */
.form-helper-text {
    margin-top: var(--space-xs);
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* CF-011 — Unlock modal body. Defined globally because AntDesign Modal
   portals its content out of the component subtree (scoped CSS attributes
   don't reach). Lives here so that when UnlockModal gets wired into a
   document-detail page, the body renders with the correct dark-theme tokens. */
.unlock-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

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

.unlock-counter {
    align-self: flex-end;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* CF-011 — Edit-justification modal body. Same portal reasoning as above. */
.edit-justification-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.edit-justification-hint {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.edit-justification-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.edit-justification-label {
    font-weight: 500;
    font-size: 0.875rem;
}

.edit-justification-counter {
    align-self: flex-end;
    font-size: 0.75rem;
    color: var(--text-muted);
}

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

.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%;
    }
}

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

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

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

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

/* ========================================
   Sortable List
   Vertical drag-to-reorder list for sequencing workflows (delivery route order,
   priority queues, manual sort). Native HTML5 drag — rows reorder on drop and the
   visible 1..N sequence renumbers from list position. Distinct from the reconciliation
   grid (drag-to-pair). Composition:
     ul.sortable-list > li.sortable-list__item[.--dragging|.--drag-over] x N
       > .sortable-list__handle + .sortable-list__seq + .sortable-list__label + .sortable-list__meta
   See `/design-system#sortable-list-template`.
   ======================================== */

.sortable-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sortable-list__item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    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);
    cursor: grab;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
    animation: fadeIn 0.3s ease-out both;
}

.sortable-list__item:active {
    cursor: grabbing;
}

.sortable-list__item--dragging {
    opacity: 0.5;
}

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

.sortable-list__handle {
    color: var(--text-muted);
    font-size: 1.125rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.sortable-list__seq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sortable-list__label {
    color: var(--text-primary);
    font-weight: 500;
}

.sortable-list__meta {
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .sortable-list__item {
        grid-template-columns: auto auto minmax(0, 1fr);
    }
    .sortable-list__meta {
        grid-column: 3 / -1;
        text-align: left;
    }
}

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

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

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

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

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

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

/* Monetary balance cell — sign-colored amount in finance list/detail tables.
   Global so pages with no scoped CSS (e.g. cash-register list) can compose it. */
.balance-cell {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.balance-cell--positive {
    color: var(--color-accounting-credit);
}

.balance-cell--negative {
    color: var(--color-accounting-debit);
}

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

/* Brand-success color utility — confirmed precondition checks, positive status icons.
   CF-013: used in CloseYearDrawer precheck list. */
.text-success {
    color: var(--color-success);
}

/* Fiscal-year close wizard helpers — used inside the wizard step body.
   CF-013: standalone utilities so step components stay scoped-CSS-free per F-176. */
.precheck-list {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.precheck-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
}

.precheck-list__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

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

.wizard-step__subtitle {
    margin: var(--space-md) 0 var(--space-sm) 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
}

.wizard-step__actions-bar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Spacing utilities — F-176: promoted to globals for scoped-CSS-free components. */
.mt-md { margin-top: var(--space-md); }

/* Informational list inside a modal (e.g. reopen-blocked dependents).
   CF-013 TASK_13: scoped-CSS-free per F-176. */
.modal-info-list {
    margin: var(--space-sm) 0 0 var(--space-md);
    padding: 0 0 0 var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

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

.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;
}

/* ========================================
   Document lock / approved banner (CF-011, CF-013)
   Promoted from LockBanner.razor.css so ApprovedBanner can share the layout.
   ======================================== */
.lock-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    border-left: 4px solid transparent;
}

.lock-banner--locked {
    border-left-color: var(--color-warning);
}

.lock-banner--approved {
    border-left-color: var(--color-success);
}

.lock-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}

.lock-banner__icon {
    font-size: 1.25rem;
    line-height: 1;
}

.lock-banner__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .lock-banner {
        flex-direction: column;
        align-items: stretch;
    }
}

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

/* --- CF-023 SLA countdown chip urgency pulse (global; F-176: no component-scoped CSS) ---
   Applied via the `sla-chip--urgent` class on SlaCountdownChip's ATag when an inbound
   purchase invoice is overdue. Reuses the PricingStatusBadge pulse cadence. */
.sla-chip--urgent {
    animation: slaUrgentPulse 1.8s ease-in-out infinite;
}

@keyframes slaUrgentPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

/* --- CF-023 E-Fakture inbox accept/reject modal + detail meta (global; F-176: no component-scoped CSS) --- */
.ar-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ar-modal-comment {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.required-marker {
    color: var(--color-error);
    margin-left: 2px;
}

.field-error {
    color: var(--color-error);
    font-size: var(--font-size-xs);
}

.detail-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

.detail-header__meta-item {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* ========================================
   Report page utilities — ledger tables, empty states, numeric columns.
   Promoted globally (CF-039 TASK_18) so report pages that correctly carry
   zero scoped CSS (CashDaybookReport, KepuReport, etc.) can compose from
   globals only, per F-176 / heavy-data-page catalog rule.
   Canonical source: CustomerLedgerReport.razor.css
   ======================================== */

/* Secondary / muted inline text inside report sections. */
.muted {
    color: var(--text-muted);
}

/* Empty-state container — centers icon + title + description vertically.
   Used as a modifier on .heavy-data-section.glass-card in report pages
   before the user has generated a report or when no data is found. */
.empty-state-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* Large decorative icon inside .empty-state-card blocks. */
.empty-state-icon {
    font-size: 3rem;
    color: var(--text-muted);
}

/* Description paragraph inside .empty-state-card blocks. */
.empty-state-description {
    margin: 0;
    color: var(--text-muted);
    max-width: 32rem;
}

/* Table section card: removes glass-card default padding so table fills edge-to-edge. */
.table-card {
    padding: 0;
    overflow: hidden;
}

/* Horizontal-scroll wrapper for ledger tables on narrow viewports. */
.ledger-table-wrapper {
    overflow-x: auto;
}

/* Full-width, border-collapsed ledger table used in cash daybook, customer
   ledger, comparative, and other financial report sections. */
.ledger-table {
    width: 100%;
    border-collapse: collapse;
}

.ledger-table th,
.ledger-table td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
    vertical-align: middle;
}

.ledger-table th {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--glass-bg-subtle);
}

/* Right-aligned, tabular-numeral column for amounts. */
.ledger-table th.num,
.ledger-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Subtotal / closing-balance row — visually distinct from data rows. */
.totals-row td {
    background: var(--glass-bg);
    border-top: 2px solid var(--glass-border);
    font-weight: 600;
    color: var(--text-primary);
}

/* Error/alert container at the top of a report page — separates alert from filter block. */
.error-container {
    margin-bottom: var(--space-md);
}

/* Filter grid layout for report filter rows — responsive auto-fit columns. */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

/* Filter item modifier: spans two columns (e.g., the register/partner picker
   that should be wider than a single date or status field). */
.filter-item--full-md {
    grid-column: span 2;
}

/* Filter item modifier: right-aligns action buttons (Generate, Print, etc.)
   at the trailing edge of the filter row. */
.filter-item--actions {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-end;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .ledger-table th,
    .ledger-table td {
        white-space: nowrap;
    }

    .filter-item--full-md {
        grid-column: span 1;
    }

    .filter-item--actions {
        align-items: stretch;
    }
}