/* ==========================================================================
   Feuerwehr- und Dorfverein Linda e.V. – brand theme on top of Radzen Material
   Red (fire brigade / club crest) + green (municipality Linda)
   ========================================================================== */

:root {
    --vv-red: #C8102E;
    --vv-red-dark: #A00D25;
    --vv-wine: #810000;
    --vv-green: #29541B;
    --vv-green-light: #3E7A2A;
    --vv-green-pale: #D0E6A9;
    --vv-anthracite: #2F3133;
    --vv-gray: #666666;

    --rz-primary: var(--vv-red);
    --rz-primary-light: #D63A52;
    --rz-primary-lighter: rgba(200, 16, 46, 0.12);
    --rz-primary-dark: var(--vv-red-dark);
    --rz-primary-darker: var(--vv-wine);
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: var(--vv-red);

    --rz-secondary: var(--vv-green);
    --rz-secondary-light: var(--vv-green-light);
    --rz-secondary-lighter: rgba(41, 84, 27, 0.12);
    --rz-secondary-dark: #1F4015;
    --rz-secondary-darker: #195319;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: var(--vv-green);

    --rz-success: #2E7D32;
    --rz-success-light: #43A047;
    --rz-success-lighter: rgba(46, 125, 50, 0.14);

    --vv-header-height: 4rem;
    --vv-radius: 14px;
}

/* -------- Dark mode tweaks (Radzen material-dark sets its own body background) -------- */
.rz-material-dark,
html:has(link[href*="material-dark"]) {
    --rz-primary-lighter: rgba(230, 70, 95, 0.18);
    --rz-on-primary-lighter: #FF8A9B;
    --rz-secondary: #5C9A44;
    --rz-secondary-light: #6FAE55;
    --rz-secondary-lighter: rgba(111, 174, 85, 0.18);
    --rz-on-secondary-lighter: #A8D88F;
    --vv-green-pale: rgba(111, 174, 85, 0.25);
}

html, body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.vv-hidden { display: none !important; }
h1:focus, h1:focus-visible { outline: none; }
.vv-muted { color: var(--rz-text-secondary-color); }
.vv-center { text-align: center; }
.vv-full-width { width: 100%; }
.vv-nowrap { white-space: nowrap; }

/* -------- Layout -------- */
.vv-layout { min-height: 100dvh; }

.vv-header.rz-header {
    background: linear-gradient(100deg, var(--vv-wine) 0%, var(--vv-red) 55%, #D9283F 100%);
    color: #fff;
    border-bottom: 4px solid var(--vv-green);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.vv-header-row {
    height: var(--vv-header-height);
    padding-inline: .25rem .75rem;
    width: 100%;
}

.vv-header .rz-sidebar-toggle,
.vv-header .rz-sidebar-toggle .rzi,
.vv-header-button.rz-button,
.vv-header-button .rzi {
    color: #fff !important;
    background: transparent !important;
}

.vv-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}

.rz-header a.vv-brand,
.rz-header a.vv-brand:hover,
.rz-header a.vv-brand:visited { color: #fff !important; }

.vv-brand-logo {
    height: 2.75rem;
    width: 2.75rem;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

.vv-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vv-brand-title { font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; white-space: nowrap; }
.vv-brand-subtitle { font-size: .78rem; opacity: .9; white-space: nowrap; }

.vv-header-actions { margin-left: auto; }

.vv-profile-menu.rz-profile-menu,
.vv-profile-menu .rz-navigation-item-wrapper,
.vv-profile-menu .rz-navigation-item-link {
    background: transparent !important;
    color: #fff !important;
}

.vv-profile-menu .rz-navigation-item-icon-children { color: #fff; }

.vv-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #fff;
    color: var(--vv-red);
    font-weight: 700;
    font-size: .85rem;
}

.vv-user-name { font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-avatar-soft { background: var(--rz-primary-lighter); color: var(--rz-on-primary-lighter); flex: 0 0 auto; }
.vv-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40rem; font-size: .85rem; }

.vv-sidebar.rz-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--rz-base-300);
}

.vv-sidebar .rz-panel-menu { padding-top: .5rem; flex: 1 1 auto; }

.vv-sidebar .rz-navigation-item-wrapper,
.vv-sidebar .rz-navigation-item-wrapper-active,
.vv-sidebar .rz-navigation-item-wrapper:hover {
    background: transparent !important;
}

.vv-sidebar .rz-navigation-item-link {
    border-radius: 10px;
    margin: 2px 8px;
}

.vv-sidebar .rz-navigation-item-link:hover { background-color: var(--rz-base-200); }

.vv-sidebar .rz-navigation-item-link.active,
.vv-sidebar .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    background-color: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    font-weight: 600;
}

.vv-sidebar .rz-navigation-item-link.active .rz-navigation-item-icon { color: var(--rz-primary); }

.vv-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem;
    font-size: .75rem;
    color: var(--rz-text-secondary-color);
    border-top: 4px solid var(--vv-green);
}

.vv-sidebar-footer img { width: 2.25rem; height: 2.25rem; object-fit: contain; }

.vv-body.rz-body { background: var(--rz-base-background-color); }

.vv-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 3rem;
}

/* -------- Page header -------- */
.vv-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.vv-page-title { display: flex; align-items: center; gap: .85rem; }

.vv-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.vv-page-icon .rzi { font-size: 1.6rem; }

.vv-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.vv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.vv-toolbar .vv-search { flex: 1 1 16rem; min-width: 12rem; }

/* -------- Cards / KPIs -------- */
.vv-card.rz-card,
.vv-kpi.rz-card { border-radius: var(--vv-radius); }

.vv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.vv-kpi.rz-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    height: 100%;
    border-left: 5px solid var(--rz-primary);
}

.vv-kpi-green.rz-card { border-left-color: var(--vv-green); }
.vv-kpi-gray.rz-card { border-left-color: var(--vv-gray); }

.vv-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.vv-kpi-green .vv-kpi-icon { background: var(--rz-secondary-lighter); color: var(--rz-secondary); }
.vv-kpi-gray .vv-kpi-icon { background: rgba(102, 102, 102, .12); color: var(--vv-gray); }

.vv-kpi-body { flex: 1 1 auto; min-width: 0; }
.vv-kpi-label { font-size: .82rem; color: var(--rz-text-secondary-color); text-transform: uppercase; letter-spacing: .04em; }
.vv-kpi-value { font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.vv-kpi-hint { font-size: .82rem; color: var(--rz-text-secondary-color); }
.vv-kpi .rz-progressbar { margin-top: .5rem; }

.vv-recent-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--rz-base-300);
}

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

.vv-recent-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    line-height: 1;
}

.vv-recent-date span { font-weight: 700; font-size: 1.15rem; }
.vv-recent-date small { font-size: .7rem; text-transform: uppercase; }
.vv-recent-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.vv-recent-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.vv-recent-hours { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }

/* -------- Grids -------- */
.vv-grid.rz-data-grid { border-radius: var(--vv-radius); }
.vv-grid .rz-grid-table td { vertical-align: middle; }
.vv-row-actions { display: flex; gap: .25rem; justify-content: flex-end; flex-wrap: nowrap; }
.vv-clickable .rz-data-row { cursor: pointer; }

.vv-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.vv-chip-open { background: var(--rz-primary-lighter); color: var(--rz-on-primary-lighter); }
.vv-chip-done { background: var(--vv-green-pale); color: var(--rz-on-secondary-lighter); }
.vv-chip-none { background: rgba(102, 102, 102, .14); color: var(--rz-text-secondary-color); }
.vv-chip-waived { background: rgba(224, 160, 0, .18); color: var(--rz-text-color); }

.vv-progress-cell { display: flex; flex-direction: column; gap: .3rem; min-width: 8rem; }
.vv-progress-cell .rz-progressbar { height: .55rem; }
.vv-progress-done .rz-progressbar-value { background-color: var(--vv-green); }

/* -------- Dialogs -------- */
.vv-dialog .rz-dialog-titlebar { border-bottom: 3px solid var(--rz-primary); }
.vv-form-actions {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.vv-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .9rem 1rem;
}

.vv-form-grid > * { grid-column: span 12; }
.vv-col-3 { grid-column: span 3 !important; }
.vv-col-4 { grid-column: span 4 !important; }
.vv-col-5 { grid-column: span 5 !important; }
.vv-col-6 { grid-column: span 6 !important; }
.vv-col-8 { grid-column: span 8 !important; }
.vv-col-9 { grid-column: span 9 !important; }

.vv-section-title {
    grid-column: span 12;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rz-primary);
    border-bottom: 1px solid var(--rz-base-300);
    padding-bottom: .25rem;
    margin-top: .35rem;
}

.vv-form-grid .rz-form-field,
.vv-form-grid .rz-textbox,
.vv-form-grid .rz-dropdown,
.vv-form-grid .rz-datepicker,
.vv-form-grid .rz-numeric,
.vv-form-grid .rz-autocomplete,
.vv-form-grid .rz-textarea { width: 100%; }

.vv-member-picker.rz-listbox { width: 100%; height: 18rem; }

/* -------- Static auth pages -------- */
.vv-auth {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(200, 16, 46, .22), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(41, 84, 27, .25), transparent 45%),
        var(--rz-base-background-color);
}

.vv-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--rz-base-background-color);
    background-color: var(--rz-panel-background-color, #fff);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
    border-top: 6px solid var(--vv-red);
    color: var(--rz-text-color);
}

.vv-auth-logo { display: block; width: 110px; height: 110px; object-fit: contain; margin: 0 auto .75rem; }
.vv-auth-title { font-size: 1.5rem; text-align: center; margin: 0 0 .25rem; color: var(--rz-text-title-color); }
.vv-auth-footer { margin-top: 1rem; font-size: .8rem; color: var(--rz-text-secondary-color); }
.vv-auth-form { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.25rem; }
.vv-label { font-weight: 600; font-size: .9rem; margin-top: .5rem; }
.vv-input.rz-textbox { width: 100%; font-size: 1rem; }
.vv-validation, .validation-message { color: var(--rz-danger); font-size: .82rem; }
.vv-checkbox { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; font-size: .92rem; cursor: pointer; }
.vv-submit { margin-top: 1.25rem; justify-content: center; text-decoration: none; }
.vv-link-center { display: block; text-align: center; margin-top: .75rem; color: var(--rz-primary); }

.vv-alert { border-radius: 10px; padding: .75rem 1rem; margin-top: 1rem; font-size: .92rem; }
.vv-alert-error { background: rgba(200, 16, 46, .1); color: var(--vv-wine); border: 1px solid rgba(200, 16, 46, .35); }
.vv-alert-success { background: rgba(41, 84, 27, .1); color: var(--vv-green); border: 1px solid rgba(41, 84, 27, .35); }
.vv-alert-info { background: rgba(224, 160, 0, .12); color: var(--rz-text-color); border: 1px solid rgba(224, 160, 0, .45); }

/* -------- Blazor error UI -------- */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

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

/* -------- Responsive -------- */
@media (max-width: 900px) {
    .vv-content { padding: .9rem .75rem 2.5rem; }
    .vv-user-name { display: none; }
    .vv-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
    .vv-kpi.rz-card { padding: .85rem; gap: .7rem; }
    .vv-kpi-icon { width: 2.25rem; height: 2.25rem; }
    .vv-kpi-value { font-size: 1.45rem; }
}

@media (max-width: 640px) {
    .vv-brand-subtitle { display: none; }
    .vv-brand-logo { height: 2.3rem; width: 2.3rem; }
    .vv-page-actions { width: 100%; }
    .vv-page-actions > .rz-button,
    .vv-page-actions > .rz-splitbutton { flex: 1 1 auto; }
    .vv-col-3, .vv-col-4, .vv-col-5, .vv-col-6, .vv-col-8, .vv-col-9 { grid-column: span 12 !important; }

    .vv-dialog.rz-dialog,
    .rz-dialog-wrapper .vv-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh;
        border-radius: 0;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    .vv-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Environment marker (test/development systems) */
.vv-env-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: #ffb300;
    color: #3e2700;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .06em;
    white-space: nowrap;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}
.vv-env-badge .rzi { font-size: 1rem; }
.vv-env-badge.vv-env-badge--auth { display: flex; width: fit-content; margin: 0 auto 1rem; }
@media (max-width: 640px) {
    .vv-header .vv-env-badge { padding: .2rem .4rem; font-size: .65rem; margin-inline-start: .4rem !important; }
    .vv-header-row:has(.vv-env-badge) .vv-brand-text { display: none; }
}