/* Utility: used by login-mfa.js to toggle visibility without overriding flex/other layouts */
.hidden { display: none !important; }

/*
   Typography
   - Switch to a modern sans similar to the vma.be look & feel
   - Keep a consistent rhythm across all pages/cards
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =============================
   CSS Variables - Light Theme (default)
   ============================= */
:root {
    /* Brand (royal blue – mock-aligned) */
    --vma-brand-primary: #1e3a8a;
    --vma-brand-primary-hover: #172554;
    --vma-brand-on-primary: #ffffff;
    --vma-brand-muted: rgba(30, 58, 138, 0.14);

    /* Background colors */
    --vma-bg-body: #f8fafc;
    --vma-bg-content: #f8fafc;
    --vma-bg-card: #ffffff;
    --vma-bg-card-hover: rgba(30, 58, 138, 0.04);
    --vma-bg-input: #ffffff;
    --vma-bg-input-disabled: #f1f5f9;
    --vma-bg-sidebar: linear-gradient(180deg, #1e3a8a 0%, #172554 100%);
    --vma-topbar-bg: #ffffff;
    --vma-bg-shell: #f8fafc;
    --vma-bg-shell-accent: rgba(30, 58, 138, 0.08);
    --vma-bg-login: radial-gradient(1200px 600px at 20% 80%, rgba(30, 58, 138, 0.2), transparent 55%), radial-gradient(900px 500px at 85% 25%, rgba(30, 64, 175, 0.18), transparent 55%), linear-gradient(180deg, #0f172a 0%, #020617 100%);
    
    /* Text colors */
    --vma-text-primary: #1e293b;
    --vma-text-secondary: #64748b;
    --vma-text-muted: #64748b;
    --vma-text-inverse: #ffffff;
    --vma-text-heading: #1e293b;
    --vma-text-link: #1e40af;
    
    /* Border colors */
    --vma-border-light: rgba(30, 41, 59, 0.08);
    --vma-border-medium: rgba(30, 41, 59, 0.14);
    --vma-border-input: rgba(30, 41, 59, 0.18);
    
    /* Accent = brand primary (interactive UI) */
    --vma-accent: #1e3a8a;
    --vma-accent-hover: #172554;
    --vma-accent-soft: rgba(30, 58, 138, 0.12);
    --vma-accent-border: rgba(30, 58, 138, 0.28);
    
    /* Card shadows */
    --vma-shadow-card: 0 4px 24px rgba(15, 23, 42, 0.06);
    --vma-shadow-modal: 0 25px 70px rgba(0,0,0,.35);
    
    /* Alert backgrounds */
    --vma-alert-error-bg: #FEF2F2;
    --vma-alert-error-border: #FCA5A5;
    --vma-alert-error-text: #991B1B;
    --vma-alert-success-bg: #F0FDF4;
    --vma-alert-success-border: #86EFAC;
    --vma-alert-success-text: #166534;
    --vma-alert-info-bg: #EFF6FF;
    --vma-alert-info-border: #93C5FD;
    --vma-alert-info-text: #1E40AF;
    --vma-alert-warning-bg: #FFFBEB;
    --vma-alert-warning-border: #FCD34D;
    --vma-alert-warning-text: #92400E;
    
    /* Pill/badge colors */
    --vma-pill-soft-bg: #F1F5F9;
    --vma-pill-soft-text: #0F172A;
    --vma-pill-soft-border: #E2E8F0;
    
    /* Activity/stats backgrounds */
    --vma-activity-bg: #F9FAFB;
    --vma-activity-hover-bg: #F3F4F6;
    --vma-bg-secondary: #F9FAFB;
    
    /* Table */
    --vma-table-border: rgba(11,42,74,.10);
    --vma-table-row-hover: rgba(11,42,74,.03);
    
    /* Day calendar colors */
    --vma-day-bg: #fff;
    --vma-day-saturday-bg: rgba(0, 160, 210, 0.06);
    --vma-day-sunday-bg: rgba(220, 38, 38, 0.06);
    --vma-day-holiday-bg: rgba(245, 158, 11, 0.08);

    /* Responsive breakpoints (mobile-first): base <576, sm 576, md 768, lg 1200, xl 1400 */
    --vma-bp-sm: 576px;
    --vma-bp-md: 768px;
    --vma-bp-lg: 1200px;
    --vma-bp-xl: 1400px;

    /* Icon-only sidebar rail: wide enough for tiles + padding/margins + shadow without horizontal scroll */
    --vma-sidebar-rail-width: 112px;
}

/* =============================
   Responsive breakpoints
   Base: <576px (phones) | sm: 576px | md: 768px | lg: 1200px (sidebar visible) | xl: 1400px
   ============================= */

/* =============================
   Dark Theme
   ============================= */
html.dark {
    /* Brand – slightly brighter for dark surfaces */
    --vma-brand-primary: #3b82f6;
    --vma-brand-primary-hover: #60a5fa;
    --vma-brand-on-primary: #ffffff;
    --vma-brand-muted: rgba(59, 130, 246, 0.2);

    /* Background colors */
    --vma-bg-body: #0f172a;
    --vma-bg-content: #1e293b;
    --vma-bg-card: #1e293b;
    --vma-bg-card-hover: rgba(255,255,255,.05);
    --vma-bg-input: #334155;
    --vma-bg-input-disabled: #1e293b;
    --vma-bg-sidebar: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    --vma-topbar-bg: #1e293b;
    --vma-bg-shell: #0f172a;
    --vma-bg-shell-accent: rgba(59, 130, 246, 0.12);
    --vma-bg-login: radial-gradient(1200px 600px at 20% 80%, rgba(59, 130, 246, 0.12), transparent 55%), radial-gradient(900px 500px at 85% 25%, rgba(30, 58, 138, 0.2), transparent 55%), linear-gradient(180deg, #0f172a 0%, #020617 100%);
    
    /* Text colors */
    --vma-text-primary: #f1f5f9;
    --vma-text-secondary: #94a3b8;
    --vma-text-muted: #94a3b8;
    --vma-text-inverse: #0f172a;
    --vma-text-heading: #f8fafc;
    --vma-text-link: #93c5fd;
    
    /* Border colors */
    --vma-border-light: rgba(255,255,255,.08);
    --vma-border-medium: rgba(255,255,255,.12);
    --vma-border-input: rgba(255,255,255,.15);
    
    /* Accent */
    --vma-accent: #3b82f6;
    --vma-accent-hover: #60a5fa;
    --vma-accent-soft: rgba(59, 130, 246, 0.2);
    --vma-accent-border: rgba(59, 130, 246, 0.45);
    
    /* Card shadows */
    --vma-shadow-card: 0 8px 28px rgba(0,0,0,.28);
    --vma-shadow-modal: 0 25px 70px rgba(0,0,0,.55);
    
    /* Alert backgrounds */
    --vma-alert-error-bg: rgba(239, 68, 68, 0.15);
    --vma-alert-error-border: rgba(239, 68, 68, 0.35);
    --vma-alert-error-text: #fca5a5;
    --vma-alert-success-bg: rgba(34, 197, 94, 0.15);
    --vma-alert-success-border: rgba(34, 197, 94, 0.35);
    --vma-alert-success-text: #86efac;
    --vma-alert-info-bg: rgba(59, 130, 246, 0.15);
    --vma-alert-info-border: rgba(59, 130, 246, 0.35);
    --vma-alert-info-text: #93c5fd;
    --vma-alert-warning-bg: rgba(245, 158, 11, 0.15);
    --vma-alert-warning-border: rgba(245, 158, 11, 0.35);
    --vma-alert-warning-text: #fcd34d;
    
    /* Pill/badge colors */
    --vma-pill-soft-bg: #334155;
    --vma-pill-soft-text: #f1f5f9;
    --vma-pill-soft-border: #475569;
    
    /* Activity/stats backgrounds */
    --vma-activity-bg: #334155;
    --vma-activity-hover-bg: #3f4f66;
    --vma-bg-secondary: #334155;
    
    /* Table */
    --vma-table-border: rgba(255,255,255,.08);
    --vma-table-row-hover: rgba(255,255,255,.05);
    
    /* Day calendar colors */
    --vma-day-bg: #334155;
    --vma-day-saturday-bg: rgba(0, 160, 210, 0.15);
    --vma-day-sunday-bg: rgba(220, 38, 38, 0.15);
    --vma-day-holiday-bg: rgba(245, 158, 11, 0.15);
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: var(--vma-bg-body);
    color: var(--vma-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

a, .btn-link {
    color: var(--vma-text-link);
}

.btn-primary {
    color: var(--vma-brand-on-primary);
    background-color: var(--vma-brand-primary);
    border-color: var(--vma-brand-primary);
}

.btn-primary:hover {
    color: var(--vma-brand-on-primary);
    background-color: var(--vma-brand-primary-hover);
    border-color: var(--vma-brand-primary-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--vma-bg-card), 0 0 0 0.25rem var(--vma-accent-soft);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

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

/* =============================
   Login screen (gated app UI)
   ============================= */

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b2f4a;
}

.login-card {
    width: 420px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

@media (max-width: 575px) {
    .login-screen {
        padding: 16px;
    }
    .login-card {
        width: 100%;
        padding: 20px 18px;
    }
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* =============================
   Status dots (orders list)
   ============================= */

.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}

.status-open { background: #3b82f6; }
.status-realized { background: #22c55e; }
.status-partial { background: #f59e0b; }
.status-closed { background: #6b7280; }

.auth-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.auth-draft { background: #e5e7eb; color: #374151; }
.auth-awaiting { background: #fef3c7; color: #92400e; }
.auth-authorized { background: #dcfce7; color: #166534; }

/* === VMA LOGIN === */

.vma-login-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--vma-bg-login);
}

.vma-login-card {
    width: min(720px, calc(100vw - 48px));
    background: #fff;
    border-radius: 12px;
    padding: 36px 42px 40px;
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
}

@media (max-width: 575px) {
    .vma-login-bg {
        padding: 16px;
    }
    .vma-login-card {
        padding: 24px 18px 28px;
        width: min(720px, calc(100vw - 32px));
    }
    .vma-login-h {
        font-size: 18px;
    }
    .vma-logo {
        max-width: 280px;
    }
}

/* LOGO */
.vma-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.vma-logo {
    max-width: 360px;
    width: 100%;
    height: auto;
}

/* BRAND TEXT */
.vma-brand-text {
    text-align: center;
    margin-bottom: 18px;
}

.vma-tagline {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5B6F86;
    font-weight: 600;
}

.vma-app-title {
    margin-top: 6px;
    font-size: 16px; /* ⬅ POWIĘKSZONE */
    font-weight: 800;
    color: #0B2A4A;
}

/* LOGIN */
.vma-login-h {
    margin-top: 22px;
    font-size: 22px; /* ⬅ ZMNIEJSZONE */
    font-weight: 700;
    color: #0B2A4A;
}

.vma-subtitle {
    margin-top: 4px;
    font-size: 14px;
    color: #5B6F86;
}

.vma-login-divider {
    text-align: center;
    font-size: 13px;
    color: #5B6F86;
}

/* === AUTH SCREENS (Login / Sign up) – UX-optimized === */

.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    padding: 32px 28px 36px;
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
}

@media (max-width: 575px) {
    .auth-screen {
        padding: 16px;
    }
    .auth-card {
        padding: 24px 18px 28px;
    }
}

.auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.auth-brand .vma-logo {
    max-width: 200px;
}

/* Login: light logo by default, dark logo when html.dark */
.auth-brand--logo .vma-logo--dark {
    display: none;
}
.auth-brand--logo .vma-logo--light {
    display: block;
}
html.dark .auth-brand--logo .vma-logo--light {
    display: none;
}
html.dark .auth-brand--logo .vma-logo--dark {
    display: block;
}

.auth-heading {
    margin: 20px 0 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: #0B2A4A;
    line-height: 1.3;
}

.auth-subtitle {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    color: #5B6F86;
    line-height: 1.45;
}

.auth-form {
    margin-top: 24px;
}

.auth-field {
    margin-bottom: 1.125rem;
}

.auth-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B2A4A;
}

.auth-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 12px 14px;
    font-size: 1rem;
    line-height: 1.4;
    color: #0B2A4A;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input::placeholder {
    color: #94a3b8;
}

.auth-input:hover {
    border-color: #94a3b8;
}

.auth-input:focus {
    outline: none;
    border-color: var(--vma-brand-primary);
    box-shadow: 0 0 0 3px var(--vma-accent-soft);
}

.auth-input[aria-invalid="true"],
.auth-input.input-validation-error {
    border-color: #dc2626;
}

.auth-input[aria-invalid="true"]:focus,
.auth-input.input-validation-error:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.2);
}

.auth-password-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.auth-password-wrap .auth-input {
    padding-right: 48px;
}

.auth-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: transparent;
    border: none;
    border-left: 1px solid transparent;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    color: #64748b;
    transition: color .15s ease, background .15s ease;
}

.auth-password-toggle:hover {
    color: #0B2A4A;
    background: rgba(0,0,0,.04);
}

.auth-password-toggle:focus {
    outline: none;
    color: var(--vma-brand-primary);
}

.auth-password-icon {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.auth-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: #64748b;
}

.auth-error {
    margin: 8px 0 0;
    font-size: 0.875rem;
    color: #dc2626;
}

.auth-message {
    margin-top: 16px;
    padding: 14px 16px;
    font-size: 0.9375rem;
    line-height: 1.45;
    border-radius: 12px;
}

.auth-message--warning {
    background: #fef3c7;
    color: #92400e;
}

.auth-message--success {
    background: #dcfce7;
    color: #166534;
}

.auth-divider {
    margin: 24px 0;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: .02em;
}

.auth-footer {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.9375rem;
    color: #64748b;
}

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

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

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.auth-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vma-accent-soft);
}

.auth-btn:disabled,
.auth-btn[aria-busy="true"] {
    opacity: .7;
    cursor: not-allowed;
}

.auth-btn--primary {
    background: var(--vma-brand-primary);
    color: var(--vma-brand-on-primary);
}

.auth-btn--primary:hover:not(:disabled):not([aria-busy="true"]) {
    background: var(--vma-brand-primary-hover);
    color: var(--vma-brand-on-primary);
}

.auth-btn--secondary {
    background: #e2e8f0;
    color: #334155;
}

.auth-btn--secondary:hover:not(:disabled) {
    background: #cbd5e1;
    color: #1e293b;
}

.auth-btn--outline {
    background: transparent;
    border: 2px solid #cbd5e1;
    color: #334155;
}

.auth-btn--outline:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0B2A4A;
}

/* BUTTON */
.vma-btn {
    background: #00ADB5;
    color: #fff;
    border: none;
    font-weight: 700;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
}

    .vma-btn:hover {
        background: #009aa1;
        color: #fff;
    }

/* Touch targets: min 44px on touch devices / small viewports */
@media (max-width: 767px), (hover: none) {
    .vma-btn:not(.vma-table-btn) {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
}
/* === VMA SHELL (Layout) === */

.vma-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
    background: var(--vma-bg-shell);
}

@media (min-width: 1200px) {
    .vma-shell {
        transition: grid-template-columns 0.22s ease;
    }
}

/* Icon-only rail (desktop); mobile drawer ignores this via max-width rule below */
.vma-shell.vma-shell--sidebar-collapsed,
html.sidebar-collapsed-init .vma-shell {
    grid-template-columns: var(--vma-sidebar-rail-width) 1fr;
}

@media (max-width: 1199px) {
    .vma-shell.vma-shell--sidebar-collapsed {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .vma-shell {
        grid-template-columns: clamp(220px, 17.5vw, 280px) 1fr;
    }

    .vma-shell.vma-shell--sidebar-collapsed {
        grid-template-columns: var(--vma-sidebar-rail-width) 1fr;
    }
}

.vma-sidebar {
    padding: 18px 14px;
    border-right: 1px solid rgba(255,255,255,.12);
    color: #fff;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--vma-bg-sidebar);
}

/* Outer nav is a flex column; actual scroll is .vma-nav__scroll (NavMenu.razor.css) */
.vma-sidebar .vma-nav {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Scrollbar hides on the real scroll container (scoped CSS may load late — mirror here) */
.vma-sidebar .vma-nav__scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vma-sidebar .vma-nav__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.vma-sidebar__head {
    flex-shrink: 0;
}

.vma-sidebar__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
}

@media (min-width: 1200px) {
    .vma-sidebar__brand {
        padding-inline-end: 28px;
    }
}

.vma-sidebar__brand-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.vma-sidebar__brand-link:hover {
    opacity: 0.9;
}

.vma-sidebar__logo {
    width: 160px;
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

/* Collapsed rail: swap to compact mark (see MainLayout brand link) */
.vma-sidebar__logo--short {
    display: none;
}

.vma-sidebar--collapsed .vma-sidebar__logo--full {
    display: none;
}

.vma-sidebar--collapsed .vma-sidebar__logo--short {
    display: block;
}

/* Rail toggle: hidden by default (mobile drawer) */
.vma-sidebar__rail-toggle {
    display: none;
}

/* Collapse to icon rail — half circle on sidebar seam / half over topbar (desktop) */
@media (min-width: 1200px) {
    .vma-shell {
        isolation: isolate;
    }

    .vma-shell > .vma-sidebar {
        z-index: 2;
        overflow: visible;
    }

    .vma-shell > .vma-main {
        position: relative;
        z-index: 1;
    }

    .vma-sidebar__rail-toggle {
        display: block;
        position: absolute;
        top: 14px;
        right: 0;
        transform: translateX(50%);
        z-index: 5;
    }

    /* Circular control: center on sidebar edge → 50% sits in sidebar, 50% over main/topbar */
    .vma-sidebar__collapse-btn--rail {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.38);
        background: var(--vma-brand-primary);
        color: var(--vma-brand-on-primary);
        cursor: pointer;
        box-shadow:
            0 2px 14px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(0, 0, 0, 0.06);
        transition:
            transform 0.15s ease,
            background 0.15s ease,
            box-shadow 0.15s ease;
    }

    html.dark .vma-sidebar__collapse-btn--rail {
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow:
            0 2px 18px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.07);
    }

    .vma-sidebar__collapse-btn--rail:hover {
        background: var(--vma-brand-primary-hover);
        transform: scale(1.05);
    }

    .vma-sidebar__collapse-btn--rail:focus-visible {
        outline: 2px solid var(--vma-accent, #3b82f6);
        outline-offset: 3px;
    }

    .vma-sidebar__collapse-btn--rail .vma-sidebar__collapse-icon {
        width: 22px;
        height: 22px;
    }

    .vma-sidebar__head {
        margin-bottom: 6px;
    }

    .vma-sidebar.vma-sidebar--collapsed {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .vma-sidebar--collapsed {
        padding-inline: 10px;
    }

    /* Don’t reserve rail-toggle gap when rail is narrow — parent padding is enough */
    .vma-sidebar--collapsed .vma-sidebar__brand {
        padding-inline-end: 0;
    }

    /* Strip extra horizontal inset so 48px tiles + border/shadow fit the grid track */
    .vma-sidebar--collapsed .vma-nav {
        padding-inline: 0;
        overflow-x: hidden;
    }

    .vma-sidebar--collapsed .vma-nav__section {
        margin-inline: 0;
    }

    .vma-sidebar--collapsed .vma-nav__user {
        margin-inline: 0;
    }

    .vma-sidebar--collapsed .vma-sidebar__logo {
        width: 54px;
        max-width: 58px;
        margin-inline: auto;
    }

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

    /* Icon rail: tiles sized to rail column so icons + active shadow stay visible */
    .vma-sidebar--collapsed .vma-nav__link {
        justify-content: center;
        align-items: center;
        width: 48px;
        min-height: 48px;
        margin-inline: auto;
        padding: 0;
        box-sizing: border-box;
    }

    .vma-sidebar--collapsed .vma-nav__link.active {
        background: var(--vma-brand-primary);
        border-color: rgba(255, 255, 255, 0.32);
        color: var(--vma-brand-on-primary);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 4px 14px rgba(0, 0, 0, 0.22);
    }

    .vma-sidebar--collapsed .vma-nav__link.active:hover {
        background: var(--vma-brand-primary-hover);
        color: var(--vma-brand-on-primary);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .vma-sidebar--collapsed .vma-nav__link.active .vma-nav__link-icon {
        color: inherit;
        opacity: 1;
    }

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

    /* Icon rail: only profile icon (no avatar card / logged-in block) */
    .vma-sidebar--collapsed .vma-nav__user-row {
        display: none !important;
    }

    .vma-sidebar--collapsed .vma-nav__user--account {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 6px 0 10px;
        margin: 0 0 8px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .vma-sidebar--collapsed .vma-nav__user-profile-btn {
        width: 48px;
        height: 48px;
        align-self: center;
        min-width: 0;
        padding: 0 !important;
        gap: 0;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        border: 1px solid transparent !important;
        background: transparent !important;
        color: rgba(234, 242, 255, 0.88) !important;
        box-shadow: none !important;
    }

    .vma-sidebar--collapsed .vma-nav__user-profile-btn:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    .vma-sidebar--collapsed .vma-nav__user-profile-btn:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.85);
        outline-offset: 2px;
    }

    .vma-sidebar--collapsed .vma-nav__user-profile-btn.active {
        background: var(--vma-brand-primary) !important;
        border-color: rgba(255, 255, 255, 0.32) !important;
        color: var(--vma-brand-on-primary) !important;
        opacity: 1;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 4px 14px rgba(0, 0, 0, 0.22);
    }

    .vma-sidebar--collapsed .vma-nav__user-profile-btn .vma-nav__link-icon {
        color: inherit;
        opacity: 0.92;
    }

    .vma-sidebar--collapsed .vma-nav__user-profile-btn.active .vma-nav__link-icon {
        opacity: 1;
    }

    .vma-sidebar--collapsed .vma-nav__copyright {
        font-size: 9px;
        line-height: 1.15;
        text-align: center;
        word-break: break-all;
        padding: 0 2px;
    }

    .vma-sidebar--collapsed .vma-nav__logout-form {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Logout: same rail tile as FAQ / nav links (not filled danger bar) */
    .vma-sidebar--collapsed .vma-nav__logout-btn {
        width: 48px !important;
        min-height: 48px;
        margin-inline: auto;
        padding: 0 !important;
        justify-content: center;
        align-items: center;
        background: transparent !important;
        border: 1px solid transparent !important;
        color: rgba(234, 242, 255, 0.88) !important;
        box-shadow: none !important;
        cursor: pointer;
        font: inherit;
    }

    .vma-sidebar--collapsed .vma-nav__logout-btn:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }

    .vma-sidebar--collapsed .vma-nav__logout-btn:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.85);
        outline-offset: 2px;
    }

    /* Icon rail: show admin links flat — hide accordion headers */
    .vma-sidebar--collapsed .vma-nav__group-toggle {
        display: none !important;
    }

    .vma-sidebar--collapsed .vma-nav__group-panel {
        max-height: none !important;
        overflow: visible !important;
        transition: none;
    }

    .vma-sidebar--collapsed .vma-nav__group-panel-inner {
        padding-bottom: 0;
        gap: 0;
    }

    .vma-sidebar--collapsed .vma-nav__admin-group {
        margin-bottom: 0;
    }

    .vma-sidebar--collapsed .vma-nav__link--nested {
        padding-inline: 0;
    }
}

@media (max-width: 1199px) {
    .vma-sidebar__rail-toggle {
        display: none !important;
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .vma-shell {
        transition: none;
    }

    .vma-sidebar__collapse-btn--rail:hover {
        transform: none;
    }
}

.vma-sidebar__title {
    font-weight: 800;
    letter-spacing: .4px;
    font-size: 18px;
}

.vma-main {
    background: var(--vma-bg-body);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar overlay backdrop (visible when sidebar open on small screens) */
.vma-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1008;
    background: rgba(9, 30, 66, 0.5);
}

.vma-topbar__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--vma-border-light);
    border-radius: 10px;
    background: var(--vma-bg-secondary);
    color: var(--vma-text-heading);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.vma-topbar__menu-btn:hover {
    background: var(--vma-bg-card-hover);
    border-color: var(--vma-border-medium);
}

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

.vma-topbar__menu-btn svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 1199px) {
    .vma-shell {
        grid-template-columns: 1fr;
    }

    .vma-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 1010;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
        background: var(--vma-bg-sidebar);
    }

    .vma-shell.vma-shell--sidebar-open .vma-sidebar {
        transform: translateX(0);
    }

    .vma-shell.vma-shell--sidebar-open .vma-sidebar-backdrop {
        display: block;
    }

    .vma-topbar__menu-btn {
        display: flex;
    }

    .vma-content {
        padding: 14px 16px;
    }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
    .vma-sidebar {
        transition: none;
    }
}

@media (min-width: 1200px) {
    .vma-sidebar-backdrop {
        display: none !important;
    }

    .vma-topbar__menu-btn {
        display: none !important;
    }
}

.vma-topbar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--vma-border-light);
    flex-shrink: 0;
    background: var(--vma-topbar-bg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

html.dark .vma-topbar {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.vma-topbar__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin-left: 14px;
    min-width: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.35;
    color: var(--vma-text-muted);
    border-bottom: none;
}

@media (min-width: 1200px) {
    .vma-topbar__breadcrumbs {
        margin-left: 20px;
    }
}

.vma-topbar__breadcrumbs a,
.vma-topbar__crumb-link {
    color: var(--vma-text-muted);
    text-decoration: none;
    font-weight: 500;
}

.vma-topbar__breadcrumbs a:hover,
.vma-topbar__crumb-link:hover {
    color: var(--vma-brand-primary);
}

.vma-topbar__crumb-sep {
    color: var(--vma-border-medium);
    user-select: none;
}

.vma-topbar__crumb-current {
    color: var(--vma-text-heading);
    font-weight: 600;
}

.vma-topbar__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 8px 22px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.vma-topbar__toolbar--single {
    flex-wrap: nowrap;
}

@media (max-width: 991px) {
    .vma-topbar__toolbar--single {
        flex-wrap: wrap;
    }
}

.vma-topbar__search-wrap {
    flex: 1 1 200px;
    max-width: 420px;
    min-width: 0;
}

.vma-topbar__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--vma-border-light);
    background: var(--vma-bg-secondary);
}

.vma-topbar__search-icon {
    flex-shrink: 0;
    color: var(--vma-text-muted);
    display: flex;
    align-items: center;
}

.vma-topbar__search-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.vma-topbar__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--vma-text-primary);
    outline: none;
}

.vma-topbar__search-input::placeholder {
    color: var(--vma-text-muted);
}

.vma-topbar__search-input:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

@media (max-width: 767px) {
    .vma-topbar__search-wrap {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }
    .vma-topbar__toolbar {
        padding: 8px 14px;
    }
}

.vma-topbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vma-topbar__version {
    font-size: 12px;
    color: var(--vma-text-muted);
    font-variant-numeric: tabular-nums;
}
html.dark .vma-topbar__version {
    color: var(--vma-text-muted);
}

@media (max-width: 767px) {
    .vma-topbar__toolbar {
        padding-left: 14px;
        padding-right: 14px;
    }
    .vma-topbar__right {
        gap: 8px;
    }
}

@media (max-width: 575px) {
    .vma-topbar__version {
        font-size: 11px;
    }
}

/* —— Top bar: in-app notifications (bell + right drawer) —— */
.vma-notify {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.vma-notify__bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--vma-text, #0f172a);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vma-notify__bell:hover {
    background: color-mix(in srgb, var(--vma-text, #0f172a) 8%, transparent);
}

html.dark .vma-notify__bell {
    color: var(--vma-text-primary, #f1f5f9);
}

html.dark .vma-notify__bell:hover {
    background: rgba(255, 255, 255, 0.08);
}

.vma-notify__bell:focus-visible {
    outline: 2px solid var(--vma-brand, #2563eb);
    outline-offset: 2px;
}

.vma-notify__bell-icon {
    width: 22px;
    height: 22px;
}

.vma-notify__dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dc2626;
    border: 2px solid var(--vma-topbar-bg, #fff);
    box-sizing: content-box;
}

html.dark .vma-notify__dot {
    border-color: var(--vma-topbar-bg, #1e293b);
}

.vma-notify__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.35);
    animation: vma-notify-fade-in 0.2s ease;
}

.vma-notify__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    width: min(400px, 100vw);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--vma-surface, #fff);
    color: var(--vma-text, #0f172a);
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
    animation: vma-notify-slide-in 0.22s ease;
}

html.dark .vma-notify__panel {
    background: var(--vma-bg-card, #1e293b);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
}

html.dark .vma-notify__backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.vma-notify__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--vma-border, #e2e8f0);
    flex-shrink: 0;
}

html.dark .vma-notify__panel-head {
    border-bottom-color: var(--vma-border-medium, rgba(255,255,255,.12));
}

.vma-notify__panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

html.dark .vma-notify__panel-title {
    color: var(--vma-text-heading, #f8fafc);
}

.vma-notify__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.vma-notify__close:hover {
    background: color-mix(in srgb, var(--vma-text, #0f172a) 8%, transparent);
}

html.dark .vma-notify__close {
    color: var(--vma-text-secondary, #94a3b8);
}

html.dark .vma-notify__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vma-text-primary, #f1f5f9);
}

.vma-notify__panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 20px;
}

.vma-notify__muted {
    color: var(--vma-text-muted, #64748b);
    font-size: 0.9rem;
}

.vma-notify__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vma-notify__item-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}

.vma-notify__item {
    border-radius: 10px;
    border: 1px solid var(--vma-border, #e2e8f0);
    overflow: hidden;
    background: var(--vma-surface-2, #f8fafc);
}

html.dark .vma-notify__item {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--vma-border-medium, rgba(255,255,255,.12));
}

.vma-notify__item--unread {
    border-color: color-mix(in srgb, var(--vma-brand, #2563eb) 35%, var(--vma-border, #e2e8f0));
    box-shadow: inset 3px 0 0 var(--vma-brand, #2563eb);
}

html.dark .vma-notify__item--unread {
    border-color: color-mix(in srgb, var(--vma-brand-primary, #3b82f6) 40%, var(--vma-border-medium, rgba(255,255,255,.12)));
    box-shadow: inset 3px 0 0 var(--vma-brand-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
}

.vma-notify__link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 10px 12px 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
}

.vma-notify__dismiss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 100%;
    padding: 0;
    border: none;
    border-left: 1px solid var(--vma-border, #e2e8f0);
    background: transparent;
    color: var(--vma-text-muted, #64748b);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.vma-notify__dismiss:hover {
    background: color-mix(in srgb, var(--vma-text, #0f172a) 8%, transparent);
    color: var(--vma-text, #0f172a);
}

html.dark .vma-notify__dismiss {
    border-left-color: var(--vma-border-medium, rgba(255,255,255,.12));
    color: var(--vma-text-muted, #94a3b8);
}

html.dark .vma-notify__dismiss:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vma-text-primary, #f1f5f9);
}

.vma-notify__dismiss:focus-visible {
    outline: 2px solid var(--vma-brand, #2563eb);
    outline-offset: -2px;
}

.vma-notify__link:hover {
    background: color-mix(in srgb, var(--vma-text, #0f172a) 5%, transparent);
}

html.dark .vma-notify__link:hover {
    background: rgba(255, 255, 255, 0.06);
}

.vma-notify__item-title {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.35;
}

html.dark .vma-notify__item-title {
    color: var(--vma-text-primary, #f1f5f9);
}

.vma-notify__item-sub {
    font-size: 0.82rem;
    color: var(--vma-text-muted, #64748b);
    line-height: 1.35;
}

html.dark .vma-notify__item-sub {
    color: var(--vma-text-secondary, #94a3b8);
}

.vma-notify__item-when {
    font-size: 0.75rem;
    color: var(--vma-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

html.dark .vma-notify__item-when {
    color: var(--vma-text-muted, #94a3b8);
}

html.dark .vma-notify__muted {
    color: var(--vma-text-secondary, #94a3b8);
}

@keyframes vma-notify-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vma-notify-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.vma-topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.vma-content {
    padding: 24px 32px;
    background: var(--vma-bg-content);
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overflow-x: hidden;
    transition: background-color 0.3s ease;
}

@media (min-width: 1200px) {
    .vma-content {
        padding: 28px 40px;
    }
}

@media (min-width: 1600px) {
    .vma-content {
        padding: 32px 56px;
    }
}

/* Center helper */
.vma-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vma-bg-login);
}

/* Muted text: default for light pages; override on dark splash screens */
.vma-muted {
    color: var(--vma-text-muted);
}

.vma-center .vma-muted,
.vma-login-bg .vma-muted {
    color: rgba(255, 255, 255, 0.75);
}

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

/* === VMA NAV (Sidebar) === */
.vma-nav {
    padding: 6px 6px 14px;
}

.vma-nav__user {
    margin: 6px 6px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}

.vma-nav__user--account {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 10px;
}

.vma-nav__user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vma-nav__userIcon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--vma-brand-muted);
    border: 1px solid rgba(255,255,255,.12);
}

.vma-nav__userMeta {
    min-width: 0;
}

.vma-nav__userLabel {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.70);
}

.vma-nav__userName {
    font-size: 13px;
    font-weight: 700;
    color: #EAF2FF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.vma-nav__section {
    margin: 0 6px 14px;
}

.vma-nav__sectionTitle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.55);
    margin: 14px 10px 8px;
}

/* Hide wrapper when no icon rendered (unknown Kind / whitespace-only) */
.vma-nav__link-icon:not(:has(svg)) {
    display: none;
}

.vma-nav__link-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.92;
}

.vma-nav__link-icon svg {
    width: 22px;
    height: 22px;
}

.vma-nav__link-text {
    min-width: 0;
    flex: 1;
}

    .vma-nav__link.active .vma-nav__link-icon {
        opacity: 1;
    }

.vma-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(234,242,255,.88);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

    .vma-nav__link:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.10);
        color: #fff;
    }

    .vma-nav__link:active {
        transform: translateY(1px);
    }

    /* NavLink active – filled brand pill */
    .vma-nav__link.active {
        background: var(--vma-brand-primary);
        border-color: rgba(255,255,255,.25);
        color: var(--vma-brand-on-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

/* View profile – inside account / user card */
.vma-nav__user-profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    color: var(--vma-brand-on-primary) !important;
    background: var(--vma-brand-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.vma-nav__user-profile-btn .vma-nav__link-icon {
    opacity: 1;
    color: inherit;
}

.vma-nav__user-profile-btn:hover {
    background: var(--vma-brand-primary-hover);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--vma-brand-on-primary) !important;
}

.vma-nav__user-profile-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.vma-nav__user-profile-btn.active {
    opacity: 0.92;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Logout */
.vma-nav__logout-form {
    display: block;
    width: 100%;
    margin: 0;
}

.vma-nav__logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* Button UA style is text-align: center; flex:1 on label would center word in leftover space */
.vma-nav__logout-btn .vma-nav__link-text {
    flex: 0 1 auto;
    text-align: left;
}

.vma-nav__link--danger {
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.04);
}

    .vma-nav__link--danger:hover {
        background: rgba(255,90,90,.12);
        border-color: rgba(255,90,90,.22);
    }

/* Admin sidebar: expandable groups (same buckets as /admin hub) */
.vma-nav__section--admin {
    margin-bottom: 10px;
}

.vma-nav__admin-group {
    margin-bottom: 2px;
}

.vma-nav__group-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    margin: 0 0 2px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

.vma-nav__group-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
}

.vma-nav__group-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.vma-nav__group-chevron {
    flex-shrink: 0;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.vma-nav__group-toggle[aria-expanded="true"] .vma-nav__group-chevron {
    transform: rotate(90deg);
}

.vma-nav__group-label {
    min-width: 0;
    line-height: 1.25;
}

.vma-nav__group-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

.vma-nav__group-panel.is-open {
    max-height: min(1200px, 90vh);
}

.vma-nav__group-panel-inner {
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vma-nav__link--nested {
    padding-inline-start: 10px;
}

/* === VMA PAGE / CARDS === */
.vma-page {
    width: 100%;
    min-width: 0;
}

.vma-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .vma-page__header {
        gap: 10px;
        margin-bottom: 14px;
    }
    .vma-page__title {
        font-size: 22px;
    }
}

.vma-page__title {
    font-size: 26px;
    font-weight: 800;
    color: var(--vma-text-heading);
    letter-spacing: .2px;
}

.vma-page__subtitle {
    font-size: 14px;
    color: var(--vma-text-secondary);
    margin-top: 6px;
    line-height: 1.45;
}

.vma-page__actions {
    display: flex;
    gap: 10px;
}

.vma-card {
    background: var(--vma-bg-card);
    border-radius: 12px;
    box-shadow: var(--vma-shadow-card);
    border: 1px solid var(--vma-border-light);
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* === Timesheet month header (Czas pracy) – card layout === */
.ts-header {
    min-width: 0;
    padding: 24px 28px;
}

.ts-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vma-border-light);
}

.ts-header__month-wrap {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

.ts-header__month {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 260px;
    height: 44px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--vma-bg-input, #f1f5f9);
    padding: 0 6px;
}

.ts-header__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--vma-text-heading);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ts-header__nav-btn:hover {
    background: var(--vma-bg-card-hover);
    color: var(--vma-accent);
}

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

.ts-header__month-label {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--vma-text-heading);
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.ts-header__status-pill {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vma-text-secondary);
    background: var(--vma-pill-soft-bg);
    border: 1px solid var(--vma-pill-soft-border);
    border-radius: 10px;
    flex-shrink: 0;
}

.ts-header__identity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vma-border-light);
}

.ts-header__identity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.ts-header__identity-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vma-text-inverse);
}

.ts-header__identity-icon--user,
.ts-header__identity-icon--contract {
    background: var(--vma-pill-soft-bg);
    border: 1px solid var(--vma-pill-soft-border);
    color: var(--vma-text-secondary);
}

.ts-header__identity-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vma-text-secondary);
    margin-bottom: 2px;
}

.ts-header__identity-value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--vma-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-header__overview-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vma-text-heading);
}

.ts-header__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ts-header__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    min-width: 0;
    flex: 1;
    min-width: 100px;
    background: var(--vma-pill-soft-bg);
    border: 1px solid var(--vma-pill-soft-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(9, 30, 66, 0.06);
}

.ts-header__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.ts-header__card--planned,
.ts-header__card--worked,
.ts-header__card--night,
.ts-header__card--overtime,
.ts-header__card--vacation {
    background: var(--vma-bg-card);
    border-color: var(--vma-border-light);
    color: var(--vma-text-secondary);
}

.ts-header__card .ts-header__card-label,
.ts-header__card .ts-header__card-unit {
    color: var(--vma-text-secondary);
}

.ts-header__card .ts-header__card-value {
    color: var(--vma-text-heading);
}

.ts-header__card--overtime.ts-header__card--danger .ts-header__card-value {
    color: #b91c1c;
}

.ts-header__card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.ts-header__card-value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--vma-text-heading);
}

.ts-header__card-unit {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.ts-header__hint-box {
    padding: 12px 16px;
    background: var(--vma-activity-bg);
    border: 1px solid var(--vma-border-light);
    border-radius: 10px;
    margin-bottom: 20px;
}

.ts-header__hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--vma-text-secondary);
}

.ts-header__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.ts-header__save-draft {
    min-height: 44px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.9375rem;
    background: var(--vma-bg-card);
    color: var(--vma-text-primary);
    border: 1px solid var(--vma-border-medium);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ts-header__save-draft:hover {
    background: var(--vma-activity-hover-bg);
    border-color: var(--vma-accent-border);
}

.ts-header__save-draft:focus-visible {
    outline: 2px solid var(--vma-accent);
    outline-offset: 2px;
}

.ts-header__submit {
    min-height: 44px;
    padding: 10px 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ts-header__submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ts-header__status {
    margin: 0;
    font-size: 12px;
    color: var(--vma-text-secondary);
}

@media (max-width: 767px) {
    .ts-header {
        padding: 18px 16px;
    }
    .ts-header__identity {
        gap: 14px 16px;
    }
    .ts-header__cards {
        gap: 8px;
    }
    .ts-header__card {
        padding: 10px 12px;
        min-width: 80px;
    }
    .ts-header__card-value {
        font-size: 18px;
    }
    .ts-header__action {
        gap: 8px;
    }
}

@media (max-width: 575px) {
    .ts-header {
        padding: 14px 12px;
    }
    .ts-header__month-wrap { justify-content: flex-start; }
    .ts-header__month { width: 200px; }
    .ts-header__month-label { font-size: 16px; padding: 0 6px; }
    .ts-header__identity { grid-template-columns: 1fr; }
    .ts-header__cards { flex-direction: column; }
    .ts-header__card { min-width: 0; }
    .ts-header__card-value { font-size: 16px; }
    .ts-header__hint-box { padding: 10px 12px; }
}

@media (max-width: 767px), (hover: none) {
    .ts-panel__btn {
        min-height: 44px;
        min-width: 44px;
    }
}

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

.vma-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--vma-text-secondary);
    font-weight: 700;
    margin-bottom: 6px;
}

.vma-input {
    border-radius: 12px !important;
    border-color: var(--vma-border-input) !important;
    padding: 10px 12px !important;
    background: var(--vma-bg-input) !important;
    color: var(--vma-text-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .vma-input:focus {
        border-color: var(--vma-accent) !important;
        box-shadow: 0 0 0 .2rem var(--vma-accent-soft) !important;
    }
    
    .vma-input::placeholder {
        color: var(--vma-text-muted) !important;
    }

.vma-mono {
    font-variant-numeric: tabular-nums;
}

.vma-truncate {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === FILTERS GRID === */
.vma-filters {
    padding: 16px;
}

.vma-filters__grid {
    display: grid;
    grid-template-columns: 220px 240px 1fr;
    gap: 14px;
    align-items: end;
}

@media (max-width: 767px) {
    .vma-filters__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .vma-filters__grid {
        grid-template-columns: 1fr;
    }
}

.vma-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
    align-items: end;
}

@media (max-width: 1199px) {
    .vma-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .vma-filter-grid {
        grid-template-columns: 1fr;
    }
}

.vma-filters__search {
    min-width: 260px;
}

@media (max-width: 575px) {
    .vma-filters__search {
        min-width: 0;
        width: 100%;
    }
}

/* === BUTTONS (VMA) === */
.vma-btn,
.vma-btn-primary {
    background: var(--vma-brand-primary);
    color: var(--vma-brand-on-primary);
    border: none;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 12px;
}

    .vma-btn:hover,
    .vma-btn-primary:hover {
        background: var(--vma-brand-primary-hover);
        color: var(--vma-brand-on-primary);
    }

.vma-btn-outline-green {
    background: var(--vma-brand-primary);
    color: var(--vma-brand-on-primary);
    border: 1px solid var(--vma-border-medium);
    font-weight: 700;
    border-radius: 12px;
}

    .vma-btn-outline-green:hover {
        background: var(--vma-brand-primary-hover);
        color: var(--vma-brand-on-primary);
    }    

.vma-btn-outline-danger {
    background: transparent;
    color: #DC2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
    font-weight: 700;
    border-radius: 12px;
}

    .vma-btn-outline-danger:hover {
        background: #DC2626;
        color: #fff;
        border-color: #DC2626;
    }

.vma-btn-outline {
    background: transparent;
    border: 1px solid var(--vma-border-medium);
    color: var(--vma-text-heading);
    font-weight: 700;
    border-radius: 12px;
}

    .vma-btn-outline:hover {
        background: var(--vma-bg-card-hover);
        border-color: var(--vma-border-medium);
        color: var(--vma-text-heading);
    }

.vma-table .btn-outline-danger {
    border-radius: 12px;
}

.vma-btn-soft {
    background: var(--vma-accent-soft);
    border: 1px solid var(--vma-accent-border);
    color: var(--vma-text-heading);
    font-weight: 700;
    border-radius: 12px;
}

    .vma-btn-soft:hover {
        background: var(--vma-brand-muted);
        border-color: var(--vma-accent-border);
        color: var(--vma-text-heading);
    }

    .vma-btn-soft:disabled {
        opacity: .55;
    }

.vma-btn-link {
    background: transparent;
    border: none;
    color: var(--vma-text-link);
    font-weight: 500;
    cursor: pointer;
}

.vma-btn-link:hover {
    color: var(--vma-accent-hover);
    text-decoration: underline;
}

/* Table action buttons - consistent sizing */
.vma-table-btn {
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
}

.vma-table-btn.vma-btn {
    background: #00ADB5;
    color: #fff;
    border: none;
}

.vma-table-btn.vma-btn:hover {
    background: #009aa1;
    color: #fff;
}

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

.vma-table-btn.vma-btn-outline:hover {
    background: var(--vma-bg-card-hover);
    border-color: var(--vma-border-medium);
    color: var(--vma-text-heading);
}

/* === TABLE === */
.vma-tableCard {
    padding: 0;
}

.vma-tableWrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.table.vma-table {
    margin: 0;
}

    .table.vma-table thead th {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .10em;
        color: var(--vma-text-secondary);
        border-bottom: 1px solid var(--vma-table-border);
        padding: 14px 14px;
        background: var(--vma-bg-card);
    }

    .table.vma-table tbody td {
        padding: 14px 14px;
        border-bottom: 1px solid var(--vma-border-light);
        color: var(--vma-text-primary);
        background: var(--vma-bg-card);
    }

    .table.vma-table tbody tr:hover td {
        background: var(--vma-table-row-hover);
    }

/* Table active row (e.g. selected user in admin list) */
.table.vma-table tbody tr.vma-row--active td {
    background: var(--vma-accent-soft);
    border-bottom-color: var(--vma-accent-border);
}

.table.vma-table tbody tr.vma-row--active:hover td {
    background: var(--vma-accent-soft);
}

/* === Users table (admin) – action column UX === */
.vma-users-table-card .vma-tableWrap {
    border-radius: 0 0 18px 18px;
    overflow-x: auto;
}

.vma-users-table {
    min-width: 720px;
}

.vma-users-table__th--expand { width: 32px; min-width: 32px; padding-left: 10px; }
.vma-users-table__th--job { width: 180px; min-width: 140px; }
.vma-users-table__th--active { width: 100px; min-width: 90px; }
.vma-users-table__th--login { width: 140px; min-width: 120px; }
.vma-users-table__th--actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-right: 12px;
}

.vma-users-table__empty {
    padding: 28px 14px !important;
    text-align: center;
}

.vma-users-table__name-primary {
    font-weight: 700;
    color: var(--vma-text-primary);
}

.vma-users-table__row--clickable {
    cursor: pointer;
}

.vma-users-table__row--clickable:hover td {
    background: var(--vma-table-row-hover);
}

.vma-users-table__expand-cell {
    padding: 10px 10px 10px 12px !important;
    vertical-align: middle;
}

.vma-users-table__expand-icon {
    display: inline-block;
    font-size: 10px;
    color: var(--vma-text-secondary);
    transition: transform 0.2s ease;
}

.vma-users-table__detail-row td {
    padding: 0 !important;
    border-bottom: 1px solid var(--vma-border-light);
    vertical-align: top;
}

.vma-users-table__detail-cell {
    background: linear-gradient(90deg, var(--vma-accent-soft) 0%, transparent 8px) !important;
}

html.dark .vma-users-table__detail-cell {
    background: linear-gradient(90deg, var(--vma-accent-soft) 0%, transparent 8px) !important;
}

.vma-users-table__detail-panel {
    padding: 20px 24px 24px 56px;
}

.vma-users-table__detail-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
}

.vma-users-table__detail-section {
    flex: 1;
    min-width: min(100%, 280px);
}

.vma-users-table__detail-section-title {
    margin: 0 0 12px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--vma-text-muted);
}

.vma-users-table__detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px 20px;
}

.vma-users-table__detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vma-users-table__detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vma-text-muted);
}

.vma-users-table__detail-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--vma-text-primary);
}

.vma-users-table__detail-contract {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vma-users-table__detail-contract-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.vma-users-table__detail-contract-meta {
    line-height: 1.5;
}

.vma-users-table__detail-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--vma-border-light);
}

@media (max-width: 767px) {
    .vma-users-table__detail-panel {
        padding: 16px 16px 20px 44px;
    }
    .vma-users-table__detail-sections {
        gap: 20px 24px;
    }
    .vma-users-table__detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.vma-users-table__actions {
    vertical-align: middle;
    text-align: right;
    padding: 10px 14px !important;
}

.vma-users-table__actions-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Icon-only action buttons – right column, consistent size, tooltips via title */
.vma-users-table__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--vma-border-medium);
    border-radius: 10px;
    background: var(--vma-bg-card);
    color: var(--vma-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.vma-users-table__action-btn:hover {
    background: var(--vma-bg-card-hover);
    border-color: var(--vma-border-medium);
    color: var(--vma-text-heading);
}

.vma-users-table__action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--vma-accent-soft);
}

.vma-users-table__action-btn--edit:hover {
    border-color: var(--vma-accent-border);
    color: var(--vma-accent);
}

.vma-users-table__action-btn--toggle:hover {
    border-color: var(--vma-accent-border);
    color: var(--vma-accent);
}

.vma-users-table__action-btn--delete:hover {
    border-color: var(--vma-alert-error-border);
    color: var(--vma-alert-error-text);
    background: var(--vma-alert-error-bg);
}

/* Dark mode */
html.dark .vma-users-table__action-btn {
    background: var(--vma-bg-input);
    border-color: var(--vma-border-input);
    color: var(--vma-text-secondary);
}

html.dark .vma-users-table__action-btn:hover {
    background: var(--vma-bg-card-hover);
    color: var(--vma-text-heading);
}

html.dark .vma-users-table__action-btn--delete:hover {
    background: var(--vma-alert-error-bg);
    border-color: var(--vma-alert-error-border);
    color: var(--vma-alert-error-text);
}

/* === Diet rates table (settings) – same look as users table === */
.vma-diet-rates-card .vma-tableWrap {
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}

.vma-diet-rates-table__th--code { width: 90px; min-width: 80px; }
.vma-diet-rates-table__th--name { width: 160px; min-width: 120px; }
.vma-diet-rates-table__th--rate { width: 110px; min-width: 90px; }
.vma-diet-rates-table__th--currency { width: 80px; min-width: 70px; }
.vma-diet-rates-table__th--sort { width: 90px; min-width: 70px; }

.vma-diet-rates-table__edit-cell {
    padding: 14px !important;
    background: var(--vma-accent-soft);
    border-bottom-color: var(--vma-accent-border);
    vertical-align: middle;
}

.vma-diet-rates-table__edit-cell .vma-formGrid {
    background: var(--vma-bg-card);
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--vma-border-light);
}

/* === STATUS DOTS (zostawiamy kompatybilność z Twoimi klasami) === */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}

.status-open {
    background: #00ADB5;
}

.status-realized {
    background: #2ECC71;
}

.status-partial {
    background: #F1C40F;
}

.status-closed {
    background: #95A5A6;
}

/* === AUTH PILLS (kompatybilność z Twoimi klasami) === */
.auth-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.auth-authorized {
    background: rgba(46, 204, 113, .14);
    border-color: rgba(46, 204, 113, .30);
    color: #0B2A4A;
}

.auth-awaiting {
    background: rgba(241, 196, 15, .18);
    border-color: rgba(241, 196, 15, .35);
    color: #0B2A4A;
}

.auth-draft {
    background: rgba(149, 165, 166, .18);
    border-color: rgba(149, 165, 166, .32);
    color: #0B2A4A;
}
/* === VMA FORM / EDIT === */
.vma-card__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--vma-text-heading);
    margin-bottom: 12px;
    letter-spacing: .2px;
}

@media (max-width: 767px) {
    .vma-card {
        padding: 14px;
        border-radius: 14px;
    }
    .vma-card__title {
        font-size: 18px;
        margin-bottom: 8px;
    }
}

@media (max-width: 575px) {
    .vma-card {
        padding: 12px 10px;
        border-radius: 12px;
    }
    .vma-card__title {
        font-size: 16px;
    }
}

.vma-formGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: end;
}

@media (max-width: 767px) {
    .vma-formGrid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .vma-formGrid {
        grid-template-columns: 1fr;
    }
}

.vma-formGrid-no-align {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 767px) {
    .vma-formGrid-no-align {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .vma-formGrid-no-align {
        grid-template-columns: 1fr;
    }
}

.vma-formGrid__full {
    grid-column: 1 / -1;
}

.vma-small {
    font-size: 12px;
}

.vma-stickyBar {
    position: sticky;
    top: 10px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--vma-border-light);
    box-shadow: var(--vma-shadow-card);
    backdrop-filter: blur(6px);
    transition: background-color 0.3s ease;
}

html.dark .vma-stickyBar {
    background: rgba(30, 41, 59, 0.92);
}

.vma-stickyBar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vma-stickyBar__right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vma-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vma-pill--soft {
    background: var(--vma-pill-soft-bg);
    color: var(--vma-pill-soft-text);
    border-color: var(--vma-pill-soft-border);
}

.vma-pill--ok {
    background: #E7F7ED;
    color: #177245;
    border-color: #BFE9D0;
}

.vma-pill--danger {
    background: #FDE8E8;
    color: #8B0000;
    border-color: #F5BCBC;
}

.vma-pill--info {
    background: #E0F2FE;
    color: #0369A1;
    border-color: #BAE6FD;
}

.vma-pill--warn {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FCD34D;
}

.vma-pill--muted {
    background: var(--vma-pill-soft-bg);
    color: var(--vma-text-muted);
    border-color: var(--vma-pill-soft-border);
}

.vma-card--wide {
    width: 100%;
}

.vma-authRow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vma-authRow__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vma-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.vma-total__value {
    font-size: 20px;
    font-weight: 900;
    color: var(--vma-text-heading);
}
.vma-monthGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.vma-day {
    border: 1px solid var(--vma-border-light);
    border-radius: 14px;
    background: var(--vma-day-bg);
    padding: 10px;
    min-height: 92px;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .06s ease, background-color 0.3s ease;
    overflow: hidden;
}

    .vma-day:hover {
        transform: translateY(-1px);
        box-shadow: var(--vma-shadow-card);
    }

.vma-day--muted {
    opacity: .45;
}

/* Dzień poza okresem umowy – nie można raportować czasu */
.vma-day--no-contract {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}
.vma-day--no-contract:hover {
    transform: none;
    box-shadow: inherit;
}

.vma-day--selected {
    outline: 2px solid rgba(0,180,180,.45);
    box-shadow: 0 8px 20px rgba(0,180,180,.12);
}

.vma-day__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vma-day__num {
    font-weight: 800;
}

.vma-day__meta {
    margin-top: 8px;
}

.vma-day__status {
    margin-top: 6px;
}

/* Responsive month grid */
@media (max-width: 767px) {
    .vma-monthGrid {
        gap: 6px;
    }
    .vma-day {
        padding: 8px 6px;
        min-height: 72px;
        border-radius: 10px;
    }
    .vma-day__num {
        font-size: 13px;
    }
    .vma-day__top {
        gap: 4px;
    }
    .vma-day__top .vma-pill {
        font-size: 10px;
        padding: 1px 5px;
    }
    .vma-day__meta {
        margin-top: 4px;
    }
    .vma-day__meta .vma-pill,
    .vma-day__meta .vma-small {
        font-size: 10px;
    }
    .vma-day__status {
        margin-top: 3px;
    }
    .vma-day__status .vma-small {
        font-size: 9px;
    }
}

@media (max-width: 575px) {
    .vma-monthGrid {
        gap: 4px;
    }
    .vma-day {
        padding: 6px 4px;
        min-height: 58px;
        border-radius: 8px;
    }
    .vma-day__num {
        font-size: 12px;
    }
    .vma-day__top .vma-pill {
        font-size: 9px;
        padding: 1px 4px;
    }
    .vma-day__meta .vma-muted {
        display: none;
    }
    .vma-day__status .vma-small {
        font-size: 8px;
    }
}
/* Month grid day colors */
.vma-day--saturday {
    background: var(--vma-day-saturday-bg);
    border-color: rgba(0, 160, 210, 0.18);
}

.vma-day--sunday {
    background: var(--vma-day-sunday-bg);
    border-color: rgba(220, 38, 38, 0.18);
}

.vma-day--holiday {
    background: var(--vma-day-holiday-bg);
    border-color: rgba(245, 158, 11, 0.22);
}

/* żeby zaznaczenie było zawsze widoczne */
.vma-day--selected.vma-day--saturday,
.vma-day--selected.vma-day--sunday,
.vma-day--selected.vma-day--holiday {
    box-shadow: 0 0 0 2px rgba(0, 150, 200, 0.35);
}

/* Strona Czas pracy – bez cieni */
.ts-page .vma-card {
    box-shadow: none;
}
.ts-page .vma-day:hover {
    box-shadow: none;
}
.ts-page .vma-day--selected {
    box-shadow: none;
}
.ts-page .vma-day--selected.vma-day--saturday,
.ts-page .vma-day--selected.vma-day--sunday,
.ts-page .vma-day--selected.vma-day--holiday {
    box-shadow: none;
}

/* Settings: approval workflows */
.settings-workflows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-workflows__section {
    border: 1px solid var(--vma-border-light);
    border-radius: 12px;
    padding: 14px;
    background: var(--vma-bg-card);
}

.settings-workflows__section-header {
    margin-bottom: 10px;
}

.settings-workflows__section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vma-text-heading);
}

.settings-workflows__section-hint {
    margin: 4px 0 0 0;
    color: var(--vma-text-muted);
    font-size: 0.9rem;
}

.settings-workflows__module-list {
    display: grid;
    gap: 10px;
}

.settings-workflows__module {
    border: 1px solid var(--vma-border-light);
    border-radius: 10px;
    padding: 12px;
    background: var(--vma-bg-main);
}

.settings-workflows__module--enabled {
    border-color: color-mix(in srgb, var(--vma-accent, #0ea5e9) 35%, var(--vma-border-light) 65%);
}

.settings-workflows__module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.settings-workflows__module-title {
    font-weight: 650;
    color: var(--vma-text-heading);
}

.settings-workflows__module-subtitle {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--vma-text-muted);
}

.settings-workflows__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--vma-text-muted);
}

.settings-workflows__module-body {
    margin-top: 10px;
}

.settings-workflows__actions {
    display: flex;
    justify-content: flex-end;
}

.settings-workflows__editor {
    display: grid;
    gap: 8px;
}

.settings-workflows__step-add {
    display: flex;
    gap: 8px;
    align-items: center;
}

.settings-workflows__role-select {
    min-width: 260px;
    height: 40px;
    padding: 0 40px 0 12px;
    border: 1px solid var(--vma-border-light);
    border-radius: 10px;
    background-color: var(--vma-bg-input, var(--vma-bg-card));
    color: var(--vma-text, #1a1a1a);
    font-weight: 600;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.settings-workflows__role-select:focus {
    outline: 2px solid color-mix(in srgb, var(--vma-accent, #0ea5e9) 45%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--vma-accent, #0ea5e9) 45%, var(--vma-border-light));
}

.settings-workflows__role-select:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.settings-workflows__steps {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 6px;
}

.settings-workflows__step-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--vma-border-light);
    border-radius: 8px;
    background: var(--vma-bg-card);
}

.settings-workflows__step-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-workflows__step-index {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--vma-text-muted);
    text-transform: uppercase;
}

.settings-workflows__step-label {
    font-weight: 600;
    color: var(--vma-text-heading);
}

.settings-workflows__step-actions {
    display: inline-flex;
    gap: 6px;
}

@media (max-width: 575px) {
    .settings-workflows__step-add {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-workflows__role-select {
        min-width: 100%;
        width: 100%;
    }
    .settings-workflows__step-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.vma-pill--holiday {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: rgba(161, 98, 7, 1);
}


/* ===== Uprawnienia ===== */
.vma-divider{height:1px;background:rgba(0,0,0,.08);margin:10px 0;}
.vma-permGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (max-width: 900px){.vma-permGrid{grid-template-columns:1fr;}}
.vma-permGroup{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px;background:#fff;}
.vma-check{display:flex;align-items:center;gap:10px;margin:8px 0;}
.vma-check input{width:16px;height:16px;}
.vma-hint{color:rgba(0,0,0,.6);font-size:.9rem;margin-top:6px;}

.vma-disabledOption {
    opacity: 0.55;
    cursor: not-allowed;
    user-select: none;
}
.vma-disabledOption * {
    cursor: not-allowed;
}
/* === Timesheet: stabilny układ "Dodaj linię" === */
.vma-formGrid--timeLine {
    /* projekt full-width, potem 3 pola w jednym rzędzie: start | koniec | przerwa */
    grid-template-columns: 1fr 1fr 170px;
    align-items: start; /* nie przykleja do dołu */
}

/* Responsywność: na średnich szerokościach start/koniec w 2 kolumnach, przerwa w kolejnym rzędzie */
@media (max-width: 980px) {
    .vma-formGrid--timeLine {
        grid-template-columns: 1fr 1fr;
    }
}

/* Na małych: wszystko w jednej kolumnie */
@media (max-width: 640px) {
    .vma-formGrid--timeLine {
        grid-template-columns: 1fr;
    }
}

/* time input – stała czytelna szerokość i brak "ściśnięcia" */
.vma-input-time {
    width: 100%;
    min-width: 140px;
}

/* helper teksty w formularzach – spójna typografia i łamanie */
.vma-help {
    line-height: 1.35;
    word-break: break-word;
}
/* === FIX: grid items nie mogą wypychać karty (min-width:auto w CSS Grid) === */
/* === FIX: wymuś wygraną nad .vma-formGrid === */
.vma-formGrid.vma-formGrid--timeLine {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,180px);
    align-items: start;
}

    /* dzieci w gridzie MUSZĄ móc się kurczyć */
    .vma-formGrid.vma-formGrid--timeLine > * {
        min-width: 0;
    }

    .vma-formGrid.vma-formGrid--timeLine .form-control,
    .vma-formGrid.vma-formGrid--timeLine .form-select,
    .vma-formGrid.vma-formGrid--timeLine input[type="time"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

@media (max-width: 980px) {
    .vma-formGrid.vma-formGrid--timeLine {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }
}

@media (max-width: 640px) {
    .vma-formGrid.vma-formGrid--timeLine {
        grid-template-columns: minmax(0,1fr);
    }
}

/* Wspólny rząd przycisków (wyrównanie, równa wysokość, ładne łamanie) */
.vma-btnRow {
    display: flex;
    align-items: stretch; /* <- klucz: równe wysokości */
    gap: 12px;
    flex-wrap: wrap;
}

    /* Ujednolicenie przycisków VMA (żeby Bootstrap nie rozjeżdżał) */
    .vma-btnRow .btn {
        height: 44px; /* jedna wysokość */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px; /* pion kontroluje height */
        line-height: 1; /* baseline nie skacze */
    }

/* Na wąskich ekranach przyciski mogą iść na całą szerokość */
@media (max-width: 640px) {
    .vma-btnRow .btn {
        flex: 1 1 100%;
    }
}
/* Bulk form: wyrównanie inputów do góry + stałe miejsce na helper */
.vma-formGrid--inputsTop {
    align-items: start !important; /* zamiast end */
}

/* Rezerwujemy taką samą “strefę” pod inputem w każdej kolumnie */
.vma-fieldHelp {
    min-height: 18px; /* dopasuj 16–22px pod swój font */
    margin-top: 6px;
}

/* Jeden rząd przycisków – wyrównanie i odstępy */
.vma-btnRow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

    /* Opcjonalnie: żeby oba przyciski miały identyczną wysokość */
    .vma-btnRow .btn {
        height: 44px;
        display: inline-flex;
        align-items: center;
    }
/* Delegation: wyrównanie inputów w gridzie */
.vma-formGrid--inputsTop {
    align-items: start !important;
}

/* stała wysokość pod inputem (na helper / pusto) */
.vma-fieldHelp {
    min-height: 18px;
    margin-top: 6px;
}
/* Wyrównanie inputów (helper zawsze zajmuje miejsce) */
.vma-formGrid--inputsTop {
    align-items: start;
}

.vma-fieldHelp {
    min-height: 18px; /* stała wysokość: wyrównuje wiersze */
    margin-top: 6px;
}

/* InputFile jak vma-input */
.vma-file {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(11,42,74,.18);
    background: #fff;
}

    .vma-file:focus-within {
        border-color: var(--vma-accent-border);
        box-shadow: 0 0 0 .2rem var(--vma-accent-soft);
    }

.vma-modalBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 2000;
}

.vma-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(980px, calc(100vw - 32px));
    max-height: min(85vh, 900px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vma-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(11,42,74,.10);
}

.vma-modal__title {
    font-weight: 800;
    color: var(--vma-text-heading);
}

.vma-modal__body {
    padding: 14px;
    overflow: auto;
}

.vma-modal__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(11,42,74,.10);
}

/* Dark mode: modals use theme surface (fixes hardcoded #fff + light chart text on white) */
html.dark .vma-modal {
    background: var(--vma-bg-card);
    border: 1px solid var(--vma-border-light);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
}

html.dark .vma-modal__header {
    border-bottom-color: var(--vma-border-light);
    background: rgba(255, 255, 255, 0.02);
}

html.dark .vma-modal__body {
    color: var(--vma-text-primary);
}

html.dark .vma-modal__img {
    border-color: var(--vma-border-light);
}

html.dark .vma-modalBackdrop {
    background: rgba(0, 0, 0, 0.65);
}

/* Area charts inside modals: gradient + axes (SVG from MarkupString; global so it always applies) */
html.dark .vma-modal .vma-area-chart {
    --vma-area-grad-top: 0.38;
    --vma-area-grad-bot: 0.05;
}

html.dark .vma-modal .vma-area-grid {
    stroke: rgba(255, 255, 255, 0.12);
}

html.dark .vma-modal .vma-area-ylab,
html.dark .vma-modal .vma-area-xlab {
    fill: #94a3b8;
}

html.dark .vma-modal .vma-area-line {
    filter: brightness(1.12);
}

/* Donut chart text inside modals */
html.dark .vma-modal .vma-donut__center-val {
    color: #f8fafc;
}

html.dark .vma-modal .vma-donut__center-lbl {
    color: #94a3b8;
}

html.dark .vma-modal .vma-donut__legend-name {
    color: #e2e8f0;
}

html.dark .vma-modal .vma-donut__legend-hours {
    color: #f8fafc;
}

html.dark .vma-modal .vma-donut__legend-pct {
    color: #94a3b8;
}

html.dark .vma-modal .vma-donut-arc {
    filter: brightness(1.08) saturate(1.1);
}

/* =============================
   Reusable Component Styles
   ============================= */

/* LoadingSpinner */
.vma-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
}

.vma-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(11, 42, 74, 0.1);
    border-top-color: #0B2A4A;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ErrorAlert / StatusAlert */
.vma-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    position: relative;
}

.vma-alert--error,
.vma-alert--danger {
    background: var(--vma-alert-error-bg);
    border: 1px solid var(--vma-alert-error-border);
    color: var(--vma-alert-error-text);
}

.vma-alert--success {
    background: var(--vma-alert-success-bg);
    border: 1px solid var(--vma-alert-success-border);
    color: var(--vma-alert-success-text);
}

.vma-alert--info {
    background: var(--vma-alert-info-bg);
    border: 1px solid var(--vma-alert-info-border);
    color: var(--vma-alert-info-text);
}

.vma-alert--warning {
    background: var(--vma-alert-warning-bg);
    border: 1px solid var(--vma-alert-warning-border);
    color: var(--vma-alert-warning-text);
}

.vma-alert__icon {
    font-size: 18px;
    line-height: 1;
}

.vma-alert__content {
    flex: 1;
}

.vma-alert__title {
    font-weight: 600;
    margin-bottom: 4px;
}

.vma-alert__message {
    font-size: 14px;
}

.vma-alert__close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.vma-alert__close:hover {
    opacity: 1;
}

/* Modal Overlay for ConfirmDialog */
.vma-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.vma-modal-overlay .vma-modal {
    margin: 16px;
    max-width: min(500px, calc(100vw - 32px));
    width: calc(100% - 32px);
    background: var(--vma-bg-card);
    border-radius: 12px;
    box-shadow: var(--vma-shadow-modal);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vma-modal__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--vma-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vma-modal__close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    color: var(--vma-text-muted);
    transition: color 0.2s;
}

.vma-modal__close:hover {
    color: var(--vma-text-primary);
}

.vma-modal-overlay .vma-modal__body {
    padding: 20px 24px;
}

.vma-modal-overlay .vma-modal__body p {
    margin: 0;
    line-height: 1.5;
    color: var(--vma-text-primary);
}

.vma-modal__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--vma-border-light);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* StatusPill / Badge */
.vma-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.vma-badge--gray {
    background: #F1F5F9;
    color: #475569;
}

.vma-badge--blue {
    background: #DBEAFE;
    color: #1E40AF;
}

.vma-badge--green {
    background: #D1FAE5;
    color: #065F46;
}

.vma-badge--yellow {
    background: #FEF3C7;
    color: #92400E;
}

.vma-badge--red {
    background: #FEE2E2;
    color: #991B1B;
}

/* User pills (team members) */
.vma-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vma-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #E2E8F0;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 18px;
}

.vma-pill-remove {
    border: 0;
    background: transparent;
    padding: 0 2px;
    margin-left: 4px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.vma-pill-remove:hover {
    opacity: 0.75;
}

.vma-pill-remove:focus-visible {
    outline: 2px solid var(--vma-primary, #2563eb);
    outline-offset: 2px;
}

/* User pills (zespół realizujący) – dark mode */
html.dark .vma-user-pill {
    background: var(--vma-pill-soft-bg) !important;
    color: var(--vma-pill-soft-text) !important;
    border-color: var(--vma-pill-soft-border) !important;
}

html.dark .vma-user-pill .vma-avatar {
    background: var(--vma-bg-input);
    color: var(--vma-text-heading);
}

html.dark .vma-user-pill .vma-pill-remove {
    color: var(--vma-pill-soft-text);
}

/* FormCard additional styles - extends .vma-card__title */

.vma-card__description {
    font-size: 14px;
    color: var(--vma-text-muted);
    margin-bottom: 20px;
}

.vma-card__footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--vma-border-light);
}

/* =============================
   Home Page Styles
   ============================= */

/* Home page grid layout */
.home-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Stats cards grid */
.home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: var(--vma-bg-card);
    border: 1px solid var(--vma-border-light);
    border-radius: 12px;
    box-shadow: var(--vma-shadow-card);
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--vma-accent-border);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.stat-card__icon {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
}

.stat-card__content {
    flex: 1;
    min-width: 0;
}

.stat-card__label {
    font-size: 13px;
    color: var(--vma-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.stat-card__value {
    font-size: 28px;
    font-weight: 800;
    color: var(--vma-text-heading);
    line-height: 1.1;
}

.stat-card__meta {
    font-size: 13px;
    color: var(--vma-text-muted);
}

.stat-card--action {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.stat-card--action:hover {
    color: inherit;
}

.stat-card--warn .stat-card__value {
    color: #ca8a04;
}

/* Admin dashboard hub (/admin) */
.vma-admin-hub .vma-admin-hub__loading {
    padding: 20px 24px;
}

.vma-admin-hub__hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.vma-admin-hub__hero-text {
    min-width: 0;
    flex: 1 1 220px;
}

.vma-admin-hub__title {
    margin-bottom: 4px;
}

.vma-admin-hub__welcome {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--vma-text-heading);
    margin: 0 0 6px;
}

.vma-admin-hub__subtitle {
    margin: 0;
    max-width: 42rem;
}

.vma-admin-hub__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
}

.vma-admin-hub__search {
    min-width: min(100%, 220px);
    max-width: 320px;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.95rem;
}

.vma-admin-hub__refresh {
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1;
}

.vma-admin-hub__refresh-icon {
    display: inline-block;
    font-size: 1.25rem;
    transition: transform 0.35s ease;
}

.vma-admin-hub__refresh:active .vma-admin-hub__refresh-icon {
    transform: rotate(180deg);
}

.vma-admin-hub__block-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vma-text-muted);
    margin: 0 0 14px;
}

.vma-admin-hub__stats-block {
    margin-bottom: 32px;
}

.vma-admin-hub__stats .stat-card--action {
    color: inherit;
}

.vma-admin-hub__stat--urgent {
    border-color: rgba(220, 38, 38, 0.35);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06), var(--vma-bg-card));
}

.vma-admin-hub__stat--urgent:hover {
    border-color: rgba(220, 38, 38, 0.55);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.12);
}

.vma-admin-hub__cta {
    margin-top: 16px;
    border-radius: 12px;
    padding: 12px 22px;
    font-weight: 600;
}

.vma-admin-hub__modules {
    margin-top: 8px;
}

.vma-admin-hub__section {
    margin-bottom: 28px;
}

.vma-admin-hub__section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vma-text-heading);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vma-border-light);
}

.vma-admin-hub__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vma-admin-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 18px 16px;
    background: var(--vma-bg-card);
    border: 1px solid var(--vma-border-light);
    border-radius: 12px;
    text-decoration: none;
    color: var(--vma-text-primary);
    box-shadow: var(--vma-shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    min-height: 88px;
}

.vma-admin-tile:hover {
    border-color: var(--vma-accent-border);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
    color: var(--vma-text-primary);
}

.vma-admin-tile:focus {
    outline: none;
}

.vma-admin-tile:focus-visible {
    outline: 2px solid var(--vma-accent);
    outline-offset: 2px;
}

.vma-admin-tile__icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vma-accent-soft);
    border-radius: 12px;
}

.vma-admin-tile__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vma-admin-tile__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vma-text-heading);
}

.vma-admin-tile__desc {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--vma-text-muted);
}

.vma-admin-tile__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #dc2626;
    border-radius: 999px;
}

.vma-admin-hub__empty {
    padding: 20px;
    text-align: center;
    border: 1px dashed var(--vma-border-medium);
    border-radius: 12px;
}

@media (max-width: 575px) {
    .vma-admin-hub__hero {
        margin-bottom: 20px;
    }

    .vma-admin-hub__tiles {
        grid-template-columns: 1fr;
    }

    .vma-admin-tile {
        min-height: 0;
    }

    .home-grid {
        gap: 14px;
    }
    .stat-card {
        padding: 14px 16px;
    }
    .stat-card__icon {
        font-size: 28px;
    }
    .stat-card__value {
        font-size: 22px;
    }
}

/* =============================
   Account Page Styles
   ============================= */

/* Account Stats Grid */
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.account-settlement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

/* Stat Group */
.account-stat-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-stat-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vma-border-light);
}

.account-stat-group__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vma-text-heading);
    letter-spacing: 0.02em;
}

.account-stat-group__period {
    font-size: 12px;
    color: var(--vma-text-secondary);
    font-weight: 500;
}

.account-stat-group__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stat Item */
.account-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-stat-item--compact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-stat-item--secondary {
    padding-top: 12px;
    border-top: 1px solid var(--vma-border-light);
    margin-top: 4px;
}

.account-stat-item__label {
    font-size: 12px;
    color: var(--vma-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.account-stat-item__value {
    font-size: 18px;
    font-weight: 800;
    color: var(--vma-text-heading);
    line-height: 1.1;
}

.account-stat-item__value--primary {
    color: var(--vma-text-heading);
    font-size: 24px;
}

.account-stat-item__value--positive {
    color: #10b981;
}

.account-stat-item__value--negative {
    color: #ef4444;
}

.account-stat-item__value--info {
    font-size: 16px;
    font-weight: 700;
    color: var(--vma-text-heading);
}

.account-stat-item__value--warning {
    color: #f59e0b;
}

.account-stat-item__unit {
    font-size: 14px;
    color: var(--vma-text-secondary);
    font-weight: 500;
    margin-left: 4px;
}

/* Info Text */
.account-info-text {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--vma-border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-info-text__item {
    font-size: 13px;
    color: var(--vma-text-secondary);
    line-height: 1.6;
}

.account-info-text__item strong {
    color: var(--vma-text-heading);
    font-weight: 700;
}

/* Settlement Details */
.account-settlement-details {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--vma-border-light);
}

.account-settlement-details__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vma-text-heading);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.account-settlement-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.account-settlement-details__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--vma-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--vma-border-light);
}

.account-settlement-details__label {
    font-size: 12px;
    color: var(--vma-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.account-settlement-details__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--vma-text-heading);
}

/* Wnioski i akceptacje – sekcja z formularzami i podsumowaniem */
.account-requests-card {
    padding: 28px 32px;
}

.account-requests-card__header {
    margin-bottom: 28px;
}

.account-requests-card__title {
    margin-bottom: 8px;
}

.account-requests-card__desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--vma-text-secondary);
    margin: 0;
    max-width: 56ch;
}

.account-requests-card__section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--vma-border-light);
}

.account-requests-card__section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.account-requests-card__section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vma-text-heading);
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
    text-transform: uppercase;
}

.account-requests-card__section--table .account-requests-card__section-title {
    margin-bottom: 12px;
}

.account-requests-card__section--summary .account-stats-grid {
    margin-top: 0;
}

.account-requests-form-block {
    padding: 20px 24px;
    background: var(--vma-bg-secondary);
    border: 1px solid var(--vma-border-light);
    border-radius: 14px;
}

.account-requests-form-block__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-requests-form-block__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--vma-text-heading);
}

.account-requests-form-block__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .account-requests-card {
        padding: 20px;
    }

    .account-requests-form-block {
        padding: 16px 18px;
    }

    .account-requests-form-block__grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .account-stats-grid,
    .account-settlement-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .account-stat-item__value {
        font-size: 24px;
    }

    .account-stat-item__value--primary {
        font-size: 28px;
    }
}

.stat-card__meta--ok {
    color: #059669;
    font-weight: 600;
}

.stat-card__meta--warn {
    color: #DC2626;
    font-weight: 600;
}

/* Activity list */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--vma-activity-bg);
    border: 1px solid var(--vma-border-light);
    border-radius: 12px;
    transition: all 0.15s ease;
}

.activity-item:hover {
    background: var(--vma-activity-hover-bg);
    border-color: var(--vma-accent-border);
}

.activity-item__icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.activity-item__content {
    flex: 1;
    min-width: 0;
}

.activity-item__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--vma-text-primary);
    margin-bottom: 2px;
}

.activity-item__meta {
    font-size: 13px;
    color: var(--vma-text-muted);
}

.activity-item__time {
    font-size: 12px;
    color: var(--vma-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Quick actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--vma-bg-card);
    border: 1px solid var(--vma-border-medium);
    border-radius: 12px;
    color: var(--vma-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.quick-action-btn:hover {
    background: var(--vma-activity-bg);
    border-color: var(--vma-accent-border);
    transform: translateY(-2px);
    box-shadow: var(--vma-shadow-card);
    color: var(--vma-text-primary);
}

.quick-action-btn:active {
    transform: translateY(0);
}

.quick-action-btn__icon {
    font-size: 28px;
    line-height: 1;
}

.quick-action-btn__label {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.quick-action-btn__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #DC2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}

.quick-action-btn--admin {
    border-color: var(--vma-accent-border);
}

.quick-action-btn--admin:hover {
    border-color: var(--vma-brand-primary);
    background: var(--vma-accent-soft);
}

/* Brand components for login screen */
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.brand__logo svg {
    display: block;
}

.brand__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand__name {
    font-size: 24px;
    font-weight: 800;
    color: var(--vma-text-heading);
    letter-spacing: -0.3px;
}

.brand__tagline {
    font-size: 12px;
    color: var(--vma-text-muted);
    font-weight: 500;
}

/* Contract cards grid */
.vma-contract-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 2rem;
}

.vma-contract-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vma-contract-item--full {
    grid-column: 1 / -1;
}

.vma-card--muted {
    opacity: 0.7;
    background: var(--vma-activity-bg);
}

.vma-card--editing {
    border-color: var(--vma-accent);
    box-shadow: 0 0 0 2px var(--vma-accent-soft);
}

/* =============================
   Language Switcher (topbar) – pill style, next to theme toggle
   ============================= */
.vma-lang-switcher {
    display: flex;
    align-items: center;
}
.vma-lang-switcher__form {
    display: block;
}
.vma-lang-switcher__select {
    display: inline-flex;
    align-items: center;
    height: 32px;
    min-width: 92px;
    padding: 0 12px 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vma-text-heading);
    background: var(--vma-bg-secondary);
    border: 1px solid var(--vma-border-light);
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.vma-lang-switcher__select:hover {
    background-color: var(--vma-bg-card-hover);
    border-color: var(--vma-border-medium);
}
.vma-lang-switcher__select:focus {
    outline: none;
    border-color: var(--vma-accent);
    box-shadow: 0 0 0 2px var(--vma-accent-soft);
}
.vma-lang-switcher__select option {
    background: var(--vma-bg-card);
    color: var(--vma-text-primary);
}
/* Dark mode topbar */
html.dark .vma-lang-switcher__select {
    color: rgba(255, 255, 255, 0.95);
    background-color: rgba(15, 23, 42, 0.75);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border-color: rgba(255, 255, 255, 0.2);
}
html.dark .vma-lang-switcher__select:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}
html.dark .vma-lang-switcher__select:focus {
    border-color: var(--vma-accent);
    box-shadow: 0 0 0 2px var(--vma-accent-soft);
}
html.dark .vma-lang-switcher__select option {
    background: var(--vma-bg-content);
    color: var(--vma-text-primary);
}

/* =============================
   Theme Toggle Switch
   ============================= */
.vma-theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vma-theme-toggle__label {
    font-size: 13px;
    color: var(--vma-text-muted);
    opacity: 0.95;
}

.vma-theme-switch {
    position: relative;
    width: 52px;
    height: 28px;
}

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

.vma-theme-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--vma-bg-secondary);
    border: 1px solid var(--vma-border-light);
    transition: 0.3s;
    border-radius: 28px;
}

.vma-theme-switch__slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vma-theme-switch__slider .vma-theme-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: opacity 0.3s;
}

.vma-theme-switch__slider .vma-theme-icon--sun {
    right: 6px;
    opacity: 1;
}

.vma-theme-switch__slider .vma-theme-icon--moon {
    left: 6px;
    opacity: 0;
}

.vma-theme-switch input:checked + .vma-theme-switch__slider {
    background: var(--vma-accent-soft);
    border-color: var(--vma-accent-border);
}

.vma-theme-switch input:checked + .vma-theme-switch__slider:before {
    transform: translateX(24px);
    background: var(--vma-brand-primary);
}

.vma-theme-switch input:checked + .vma-theme-switch__slider .vma-theme-icon--sun {
    opacity: 0;
}

.vma-theme-switch input:checked + .vma-theme-switch__slider .vma-theme-icon--moon {
    opacity: 1;
}

.vma-theme-switch input:focus + .vma-theme-switch__slider {
    box-shadow: 0 0 0 2px var(--vma-accent-soft);
}

/* Dark mode specific overrides for form elements */
html.dark .form-control,
html.dark .form-select {
    background-color: var(--vma-bg-input);
    border-color: var(--vma-border-input);
    color: var(--vma-text-primary);
}

html.dark .form-control:focus,
html.dark .form-select:focus {
    background-color: var(--vma-bg-input);
    border-color: var(--vma-accent);
    color: var(--vma-text-primary);
    box-shadow: 0 0 0 0.2rem var(--vma-accent-soft);
}

html.dark .form-control::placeholder {
    color: var(--vma-text-muted);
}

/* Login card dark mode */
html.dark .vma-login-card {
    background: var(--vma-bg-card);
}

html.dark .vma-login-h,
html.dark .vma-app-title,
html.dark .auth-heading {
    color: var(--vma-text-heading);
}

html.dark .vma-subtitle,
html.dark .auth-subtitle {
    color: var(--vma-text-secondary);
}

/* Auth form dark mode */
html.dark .auth-label {
    color: var(--vma-text-heading);
}

html.dark .auth-input {
    background: var(--vma-bg-input);
    border-color: var(--vma-border-input);
    color: var(--vma-text-primary);
}

html.dark .auth-input::placeholder {
    color: var(--vma-text-muted);
}

html.dark .auth-input:focus {
    border-color: var(--vma-accent);
    box-shadow: 0 0 0 3px var(--vma-accent-soft);
}

html.dark .auth-hint,
html.dark .auth-footer {
    color: var(--vma-text-secondary);
}

html.dark .auth-message--warning {
    background: rgba(245, 158, 11, .2);
    color: #fcd34d;
}

html.dark .auth-message--success {
    background: rgba(34, 197, 94, .2);
    color: #86efac;
}

html.dark .auth-btn--outline {
    border-color: var(--vma-border-medium);
    color: var(--vma-text-heading);
}

html.dark .auth-btn--outline:hover:not(:disabled) {
    background: var(--vma-bg-card-hover);
    border-color: var(--vma-border-medium);
    color: var(--vma-text-heading);
}

/* Form file input dark mode */
html.dark .vma-file {
    background: var(--vma-bg-input);
    border-color: var(--vma-border-input);
    color: var(--vma-text-primary);
}

/* Badge dark mode adjustments */
html.dark .vma-badge--gray {
    background: #475569;
    color: #f1f5f9;
}

/* Permissions section (Uprawnienia) dark mode */
html.dark .vma-divider {
    background: var(--vma-border-light);
}

html.dark .vma-permGroup {
    background: var(--vma-bg-input);
    border-color: var(--vma-border-input);
}

html.dark .vma-permGroup .vma-small {
    color: var(--vma-text-heading);
}

html.dark .vma-check {
    color: var(--vma-text-primary);
}

html.dark .vma-check input[type="checkbox"] {
    accent-color: var(--vma-accent);
}

html.dark .vma-hint {
    color: var(--vma-text-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vma-contract-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .home-stats {
        grid-template-columns: 1fr;
    }

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

    .stat-card__value {
        font-size: 24px;
    }
}

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

    .activity-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-item__time {
        align-self: flex-end;
    }

    
}
.account-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px; /* mniej miejsca niż wcześniej */
}

.account-info-item .vma-label {
    margin-bottom: 2px;
}

/* zmniejsz "pudełka" read-only, żeby nie zajmowały tyle wysokości */
.account-info-grid .vma-input--read {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 0;
}

.account-actions {
    display: flex;
    justify-content: flex-end;
}

/* === STAT BOX (Time Report) === */
.vma-stat-box {
    background: var(--vma-bg-input, #f8f9fa);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 160px;
}

.vma-stat-box--highlight {
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid var(--vma-success, #4caf50);
}

.vma-stat-box__label {
    font-size: 12px;
    color: var(--vma-text-secondary);
    margin-bottom: 4px;
}

.vma-stat-box__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--vma-text-primary);
}

/* Table total row */
.vma-table-total {
    background: var(--vma-bg-input, #f8f9fa);
    font-weight: 700;
}

.vma-table-total td {
    background: var(--vma-bg-input, #f8f9fa) !important;
}

/* Table detail row (expandable) */
.vma-table-detail-row {
    background: var(--vma-activity-bg, #F9FAFB);
}

.vma-table-detail-row td {
    background: var(--vma-activity-bg, #F9FAFB) !important;
    padding: 0 !important;
}

/* Dark mode for stat box */
html.dark .vma-stat-box--highlight {
    background: rgba(76, 175, 80, 0.15);
}

/* === HARMONOGRAM PRACY (Schedule page) === */
.schedule-page {
    padding-bottom: 2rem;
}

.schedule-filters {
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.schedule-filters__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--vma-text-heading);
    margin-bottom: 1rem;
}

.schedule-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
}

.schedule-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.schedule-filters__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vma-text-secondary);
}

.schedule-filters__input,
.schedule-filters__select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--vma-border-input);
    border-radius: 10px;
    background: var(--vma-bg-input);
    color: var(--vma-text-primary);
    font-size: 0.9375rem;
    min-width: 200px;
}

.schedule-filters__input:focus,
.schedule-filters__select:focus {
    outline: none;
    border-color: var(--vma-accent);
    box-shadow: 0 0 0 2px var(--vma-accent-soft);
}

.schedule-filters__input {
    max-width: 280px;
}

.schedule-filters__select {
    max-width: 320px;
}

.schedule-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.schedule-filters__btn {
    white-space: nowrap;
}

/* Accordion – monthly panels */
.schedule-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.schedule-accordion__item {
    background: var(--vma-bg-card);
    border-radius: 14px;
    box-shadow: var(--vma-shadow-card);
    border: 1px solid var(--vma-border-light);
    overflow: hidden;
}

.schedule-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vma-text-heading);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.schedule-accordion__header:hover {
    background: var(--vma-bg-card-hover);
}

.schedule-accordion__title {
    flex: 0 0 auto;
}

.schedule-accordion__summary {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vma-text-secondary);
}

.schedule-accordion__icon {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--vma-text-muted);
}

.schedule-accordion__panel {
    border-top: 1px solid var(--vma-border-light);
    padding: 1rem 1.25rem;
    background: var(--vma-bg-content);
}

.schedule-accordion__panel[hidden] {
    display: none;
}

/* Schedule table */
.schedule-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--vma-border-light);
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.schedule-table th,
.schedule-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--vma-table-border);
}

.schedule-table th {
    font-weight: 700;
    color: var(--vma-text-secondary);
    background: var(--vma-activity-bg);
}

.schedule-table tbody tr:hover {
    background: var(--vma-table-row-hover);
}

.schedule-table__row--weekend {
    background: var(--vma-day-saturday-bg);
}

.schedule-table__row--holiday {
    background: var(--vma-day-holiday-bg);
}

.schedule-table__date,
.schedule-table__day {
    white-space: nowrap;
}

.schedule-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.schedule-table__input {
    width: 100%;
    max-width: 5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--vma-border-input);
    border-radius: 8px;
    background: var(--vma-bg-input);
    color: var(--vma-text-primary);
    font-size: 0.875rem;
}

.schedule-table__input:focus {
    outline: none;
    border-color: var(--vma-accent);
}

.schedule-table__input--note {
    max-width: 100%;
    min-width: 120px;
}

.schedule-empty {
    padding: 2rem;
    text-align: center;
}

.schedule-empty__text {
    margin: 0;
    color: var(--vma-text-secondary);
    font-size: 0.9375rem;
}

/* === TIMESHEET SUBMIT CONFIRMATION MODAL === */
.timesheet-submit-backdrop {
    z-index: 1040;
}

.timesheet-submit-modal {
    z-index: 1050;
    max-width: 440px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.timesheet-submit-modal__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timesheet-submit-modal__intro {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--vma-text-secondary);
    line-height: 1.5;
}

.timesheet-submit-summary {
    background: var(--vma-activity-bg);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timesheet-submit-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9375rem;
}

.timesheet-submit-summary__label {
    color: var(--vma-text-secondary);
}

.timesheet-submit-summary__value {
    font-weight: 700;
    color: var(--vma-text-primary);
    font-variant-numeric: tabular-nums;
}

.timesheet-submit-summary__value--ok {
    color: var(--vma-alert-success-text, #166534);
}

.timesheet-submit-summary__value--minus {
    color: var(--vma-alert-error-text, #991B1B);
}

.timesheet-submit-warning {
    background: var(--vma-alert-warning-bg);
    border: 1px solid var(--vma-alert-warning-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--vma-alert-warning-text);
}

.timesheet-submit-warning strong {
    display: block;
    margin-bottom: 0.35rem;
}

.timesheet-submit-warning__more {
    font-weight: 600;
}

.timesheet-submit-warning__hint {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.95;
    line-height: 1.4;
}

.timesheet-submit-modal__footer {
    flex-shrink: 0;
}

/* =============================
   HR Page Styles
   ============================= */

/* --- Tabs --- */
.hr-tabs {
    margin-top: 0;
}

.hr-tablist {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--vma-border-light);
    padding-bottom: 0;
}

.hr-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vma-text-secondary);
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.hr-tab:hover {
    color: var(--vma-text-heading);
    background: var(--vma-bg-card-hover);
}

.hr-tab--active {
    color: var(--vma-accent);
    border-bottom-color: var(--vma-accent);
    background: var(--vma-accent-soft);
}

.hr-tabpanel:focus {
    outline: none;
}
.hr-tabpanel:focus-visible {
    outline: 2px solid var(--vma-focus-ring, currentColor);
    outline-offset: 2px;
}

/* --- Employee card --- */
.hr-employee-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.hr-employee-card--open {
    border-color: var(--vma-accent-border);
}

.hr-employee-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    gap: 12px;
    transition: background .12s ease;
}

.hr-employee-header:hover {
    background: var(--vma-bg-card-hover);
}

.hr-employee-header__info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.hr-employee-header__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--vma-text-heading);
}

.hr-chevron {
    font-size: 11px;
    color: var(--vma-text-muted);
    flex-shrink: 0;
    transition: transform .15s ease;
}

.hr-employee-body {
    border-top: 1px solid var(--vma-border-light);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- Sections inside employee body --- */
.hr-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--vma-border-light);
}

.hr-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hr-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.hr-section__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--vma-text-secondary);
}

/* --- Schedule months --- */
.hr-schedule-months {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hr-schedule-month {
    border: 1px solid var(--vma-border-light);
    border-radius: 12px;
    overflow: hidden;
    background: var(--vma-bg-card);
}

.hr-schedule-month__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    gap: 10px;
    font-size: 14px;
    transition: background .12s ease;
}

.hr-schedule-month__header:hover {
    background: var(--vma-bg-card-hover);
}

.hr-schedule-month__name {
    font-weight: 700;
    color: var(--vma-text-heading);
    min-width: 140px;
}

.hr-schedule-month__stats {
    font-size: 13px;
    color: var(--vma-text-secondary);
    flex: 1;
}

.hr-schedule-table-wrap {
    border-top: 1px solid var(--vma-border-light);
    overflow-x: auto;
}

/* --- Overtime badges --- */
.hr-ot-badge {
    color: #d97706;
    font-weight: 600;
}

.hr-ot-badge--weekly {
    color: #7c3aed;
}

.hr-ot-cell {
    color: #d97706 !important;
    font-weight: 700;
}

.hr-ot-cell--weekly {
    color: #7c3aed !important;
    font-weight: 700;
}

.hr-row--ot td {
    background: rgba(217, 119, 6, .05) !important;
}

/* --- Report toolbar (overtime / vacation tabs) --- */
.hr-report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hr-report-toolbar__filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.hr-report-toolbar__export {
    flex-shrink: 0;
}

/* --- Overtime table column widths --- */
.hr-overtime-table th,
.hr-overtime-table td {
    white-space: nowrap;
}

/* --- Job position assignment row --- */
.hr-employee-jobpos {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hr-employee-jobpos__select {
    max-width: 280px;
}

.hr-employee-jobpos__save {
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Dark mode adjustments --- */
html.dark .hr-schedule-month {
    background: var(--vma-bg-input);
}

html.dark .hr-ot-badge {
    color: #fbbf24;
}

html.dark .hr-ot-badge--weekly {
    color: #a78bfa;
}

html.dark .hr-ot-cell {
    color: #fbbf24 !important;
}

html.dark .hr-ot-cell--weekly {
    color: #a78bfa !important;
}

html.dark .hr-row--ot td {
    background: rgba(251, 191, 36, .07) !important;
}

/* === Print: hide layout chrome so only page content prints === */
@media print {
    .vma-sidebar,
    .vma-topbar,
    .vma-sidebar-backdrop,
    .vma-topbar__menu-btn {
        display: none !important;
    }
    .vma-shell {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        background: none !important;
    }
    .vma-main {
        overflow: visible !important;
    }
    .vma-content {
        overflow: visible !important;
        padding: 0.5in !important;
        max-width: 100% !important;
    }
    body {
        font-size: 12pt;
    }
}

/* =============================
   Work calendar page (week view + circle)
   ============================= */
.calendar-page .calendar-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1199px) {
    .calendar-page .calendar-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .calendar-date-range-panel {
        padding: 0.75rem 1rem;
    }
    .calendar-date-range-field .vma-input {
        min-width: 0;
        width: 100%;
    }
}

.calendar-date-range-panel {
    padding: 1rem 1.25rem;
}
.calendar-date-range-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 0.5rem;
}
.calendar-date-range-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.calendar-date-range-field .vma-input {
    min-width: 10rem;
}
.calendar-date-range-actions {
    margin-left: 0.25rem;
}
.calendar-date-range-fields--border {
    border-top: 1px solid var(--vma-border-medium, #dee2e6);
}
.calendar-week-card {
    overflow: hidden;
}
.calendar-week-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.calendar-nav-btn {
    min-width: 44px;
    padding: 0.5rem 0.75rem;
}
.calendar-nav-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.calendar-week-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--vma-text-heading);
}
.calendar-grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.calendar-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.calendar-grid th,
.calendar-grid td {
    padding: 0.5rem;
    border: 1px solid var(--vma-border-light);
    vertical-align: middle;
    height: 52px;
    box-sizing: border-box;
}
.calendar-grid thead tr {
    height: 52px;
}
.calendar-grid tbody tr {
    height: 52px;
}
.calendar-cell--name {
    font-weight: 600;
    background: var(--vma-activity-bg);
}
.calendar-cell--day {
    text-align: center;
}
.calendar-day-name {
    display: block;
    font-size: 0.75rem;
    color: var(--vma-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.calendar-day-num {
    display: block;
    font-weight: 700;
    color: var(--vma-text-heading);
}
.calendar-cell--sat {
    background: var(--vma-day-saturday-bg);
}
.calendar-cell--sun {
    background: var(--vma-day-sunday-bg);
}
.calendar-row--me .calendar-cell--name {
    background: var(--vma-accent-soft);
    border-color: var(--vma-accent-border);
}
.calendar-cell--value {
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-day-select {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.calendar-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--vma-pill-soft-bg);
    color: var(--vma-pill-soft-text);
}
.calendar-badge--remote {
    background: rgba(59, 130, 246, 0.15);
    color: #1e40af;
}
html.dark .calendar-badge--remote {
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
}
.calendar-badge--office {
    background: rgba(34, 197, 94, 0.15);
    color: #166534;
}
html.dark .calendar-badge--office {
    background: rgba(74, 222, 128, 0.2);
    color: #86efac;
}
.calendar-badge--sickleave {
    background: rgba(245, 158, 11, 0.2);
    color: #92400e;
}
html.dark .calendar-badge--sickleave {
    background: rgba(251, 191, 36, 0.2);
    color: #fcd34d;
}
.calendar-badge--vacation {
    background: rgba(168, 85, 247, 0.15);
    color: #5b21b6;
}
html.dark .calendar-badge--vacation {
    background: rgba(192, 132, 252, 0.2);
    color: #c4b5fd;
}
.calendar-user-name {
    font-weight: 600;
}
.calendar-sidebar {
    position: sticky;
    top: 1rem;
}
.calendar-sidebar-card {
    padding: 1.25rem;
}
.calendar-add-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.calendar-add-select {
    width: 100%;
}
.calendar-add-btn {
    align-self: flex-start;
    min-width: 8rem;
}
.calendar-circle-list,
.calendar-pending-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.calendar-circle-item,
.calendar-pending-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--vma-border-light);
}
.calendar-circle-item:last-child,
.calendar-pending-item:last-child {
    border-bottom: none;
}

/* ========== Bank yearly breakdown table ========== */
.bank-yearly-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.bank-yearly-picker__select {
    width: auto;
    min-width: 6rem;
}

.bank-recalc-card {
    margin-top: 1.5rem;
}
.bank-recalc-card__title {
    margin-bottom: 0.25rem;
}
.bank-recalc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 0.75rem;
}
.bank-recalc-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.bank-recalc-field .vma-label {
    font-size: 0.875rem;
}
.bank-recalc-select {
    width: auto;
    min-width: 7rem;
}
.bank-recalc-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.bank-recalc-btn {
    white-space: nowrap;
}
.bank-recalc-message {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
}
.bank-recalc-message--success {
    color: var(--vma-success, #198754);
}
.bank-recalc-message--error {
    color: var(--vma-danger, #dc3545);
}

.bank-yearly-breakdown {
    margin-top: 1rem;
}
.bank-yearly-breakdown__intro {
    font-size: 0.9375rem;
    color: var(--vma-muted, #6c757d);
    margin: 0;
    max-width: 60rem;
}
.bank-yearly-breakdown__empty {
    color: var(--vma-muted);
    margin: 1rem 0 0;
}
.bank-yearly-breakdown__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1rem;
    border: 1px solid var(--vma-border-medium, #dee2e6);
    border-radius: 8px;
    background: var(--vma-bg-card, #fff);
}
html.dark .bank-yearly-breakdown__scroll {
    border-color: rgba(255,255,255,.12);
}
.bank-yearly-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.bank-yearly-table__th {
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--vma-text, #1a1a1a);
    background: var(--vma-bg-input, #f8f9fa);
    border-bottom: 2px solid var(--vma-border-medium, #dee2e6);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.bank-yearly-table__th--num,
.bank-yearly-table__cell--num {
    text-align: right;
    min-width: 4rem;
}
.bank-yearly-table__th--month {
    min-width: 6rem;
    position: sticky;
    left: 0;
    background: var(--vma-bg-input, #f8f9fa);
    z-index: 2;
}
.bank-yearly-table__th--current {
    border-left: 1px solid var(--vma-border-light);
}
.bank-yearly-table__th--fifo {
    min-width: 3rem;
    text-align: center;
    font-weight: 500;
}
.bank-yearly-table__row:hover .bank-yearly-table__cell {
    background: rgba(0,0,0,.02);
}
html.dark .bank-yearly-table__row:hover .bank-yearly-table__cell {
    background: rgba(255,255,255,.04);
}
.bank-yearly-table__cell {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--vma-border-light);
    color: var(--vma-text, #1a1a1a);
    background: var(--vma-bg-card, #fff);
}
.bank-yearly-table__cell--month {
    position: sticky;
    left: 0;
    background: var(--vma-bg-card, #fff);
    font-weight: 500;
    z-index: 1;
}
.bank-yearly-table__row:hover .bank-yearly-table__cell--month {
    background: rgba(0,0,0,.02);
}
html.dark .bank-yearly-table__row:hover .bank-yearly-table__cell--month {
    background: rgba(255,255,255,.04);
}
.bank-yearly-table__cell--current {
    border-left: 1px solid var(--vma-border-light);
    font-weight: 600;
}
.bank-yearly-table__cell--negative {
    color: var(--vma-danger, #dc3545);
}
.bank-yearly-table__cell--fifo {
    text-align: center;
}
.bank-yearly-table__cell--fifo-highlight {
    background: rgba(255, 152, 0, 0.18);
    font-weight: 500;
}
html.dark .bank-yearly-table__cell--fifo-highlight {
    background: rgba(255, 152, 0, 0.25);
}