/* =========================================================================
   Invoice Trainer — Modern UI design system
   - Light, modern, accessible, mobile-first.
   - Bootstrap 5 is loaded as a base; this file refines/extends it.
   ========================================================================= */

:root {
    /* Brand — overridden per deployment via club.config.json (see MainLayout.razor).
       Hover/soft are derived from --it-primary so a single colour value is enough. */
    --it-primary: #4f46e5;          /* indigo-600 (default) */
    --it-primary-hover: color-mix(in srgb, var(--it-primary) 85%, #000);
    --it-primary-soft:  color-mix(in srgb, var(--it-primary) 12%, #fff);
    --it-accent: #06b6d4;           /* cyan-500 */
    --it-success: #10b981;
    --it-warning: #f59e0b;
    --it-danger:  #ef4444;
    --it-info:    #0ea5e9;

    /* Neutrals */
    --it-bg:        #f5f7fb;
    --it-surface:   #ffffff;
    --it-surface-2: #f9fafc;
    --it-border:    #e5e7eb;
    --it-border-strong: #d1d5db;
    --it-text:      #111827;
    --it-text-muted:#6b7280;
    --it-text-dim:  #9ca3af;

    /* Effects */
    --it-radius-sm: 6px;
    --it-radius:    10px;
    --it-radius-lg: 16px;
    --it-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --it-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
    --it-shadow-md: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06);
    --it-shadow-lg: 0 10px 25px -5px rgba(15,23,42,.12), 0 8px 10px -6px rgba(15,23,42,.06);

    --it-transition: 150ms cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------ Base ------------------------------------ */
html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                 'Apple Color Emoji', 'Segoe UI Emoji';
    font-feature-settings: 'cv02','cv03','cv04','cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--it-bg);
    color: var(--it-text);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { color: var(--it-text); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; margin-bottom: 1rem; }
h3 { font-size: 1.15rem; margin-top: 1.25rem; }
h5 { font-size: 1rem; }

h1:focus { outline: none; }

p { color: var(--it-text); }
.text-muted { color: var(--it-text-muted) !important; }

a, .btn-link {
    color: var(--it-primary);
    text-decoration: none;
    transition: color var(--it-transition);
}
a:hover, .btn-link:hover { color: var(--it-primary-hover); text-decoration: underline; }

/* ------------------------------ Buttons --------------------------------- */
.btn {
    border-radius: var(--it-radius-sm);
    font-weight: 500;
    padding: .45rem .9rem;
    transition: background-color var(--it-transition),
                border-color var(--it-transition),
                color var(--it-transition),
                box-shadow var(--it-transition),
                transform var(--it-transition);
}
.btn-sm { padding: .3rem .65rem; font-size: .825rem; }

.btn-primary {
    color: #fff;
    background-color: var(--it-primary);
    border-color: var(--it-primary);
    box-shadow: var(--it-shadow-xs);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--it-primary-hover);
    border-color: var(--it-primary-hover);
    color: #fff;
}
.btn-primary:active { transform: translateY(1px); }

.btn-outline-primary { color: var(--it-primary); border-color: var(--it-primary); }
.btn-outline-primary:hover { background-color: var(--it-primary); border-color: var(--it-primary); color: #fff; }

.btn-outline-secondary { color: var(--it-text); border-color: var(--it-border-strong); background: var(--it-surface); }
.btn-outline-secondary:hover { background: var(--it-surface-2); color: var(--it-text); border-color: var(--it-text-dim); }

.btn-outline-danger { color: var(--it-danger); border-color: rgba(239,68,68,.5); }
.btn-outline-danger:hover { background-color: var(--it-danger); border-color: var(--it-danger); color: #fff; }

.btn-outline-success { color: var(--it-success); border-color: rgba(16,185,129,.5); }
.btn-outline-success:hover { background-color: var(--it-success); border-color: var(--it-success); color: #fff; }

.btn-outline-warning { color: #b45309; border-color: rgba(245,158,11,.5); }
.btn-outline-warning:hover { background-color: var(--it-warning); border-color: var(--it-warning); color: #fff; }

.btn-success { background-color: var(--it-success); border-color: var(--it-success); }
.btn-success:hover { background-color: #059669; border-color: #059669; }

.btn-danger { background-color: var(--it-danger); border-color: var(--it-danger); }
.btn-danger:hover { background-color: #dc2626; border-color: #dc2626; }

.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

/* Unified focus ring across interactive controls */
.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .25);
    border-color: var(--it-primary);
    outline: none;
}

/* ------------------------------ Forms ----------------------------------- */
label { font-weight: 500; font-size: .9rem; color: var(--it-text); margin-bottom: .25rem; display: inline-block; }

.form-control, .form-select, input[type="month"], input[type="date"], input[type="time"], input[type="number"] {
    border-radius: var(--it-radius-sm);
    border: 1px solid var(--it-border);
    background: var(--it-surface);
    color: var(--it-text);
    transition: border-color var(--it-transition), box-shadow var(--it-transition);
}
.form-control:hover, .form-select:hover { border-color: var(--it-border-strong); }

input[type="month"], input[type="date"], input[type="time"] {
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
}

.form-check-input:checked { background-color: var(--it-primary); border-color: var(--it-primary); }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--it-success); }
.invalid { outline: 1px solid var(--it-danger); }
.validation-message { color: var(--it-danger); font-size: .85rem; }

/* ------------------------------ Cards ----------------------------------- */
.card {
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    box-shadow: var(--it-shadow-sm);
    background: var(--it-surface);
    transition: box-shadow var(--it-transition), transform var(--it-transition);
}
.card:hover { box-shadow: var(--it-shadow-md); }
.card-body { padding: 1.1rem 1.25rem; }
.card h5 { margin-bottom: .6rem; }

/* ------------------------------ Tables ---------------------------------- */
.table {
    background: var(--it-surface);
    border-radius: var(--it-radius);
    overflow: hidden;
    box-shadow: var(--it-shadow-sm);
    border: 1px solid var(--it-border);
    margin-bottom: 1.25rem;
}
.table > :not(caption) > * > * { padding: .65rem .85rem; vertical-align: middle; }
.table thead th {
    background: var(--it-surface-2);
    color: var(--it-text-muted);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--it-border);
}
.table tbody tr { transition: background-color var(--it-transition); }
.table tbody tr:hover { background: var(--it-surface-2); }
.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.table > :not(:first-child) { border-top: none; }

/* Make tables scroll horizontally on small screens to keep them readable. */
@media (max-width: 720px) {
    .table-responsive-auto, .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ------------------------------ Alerts ---------------------------------- */
.alert {
    border-radius: var(--it-radius-sm);
    border: 1px solid transparent;
    padding: .65rem 1rem;
    box-shadow: var(--it-shadow-xs);
}
.alert-info    { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.alert-success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.alert-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.alert-danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* ------------------------------ Badges ---------------------------------- */
.badge {
    border-radius: 999px;
    padding: .35em .7em;
    font-weight: 500;
    letter-spacing: .01em;
}
.badge.bg-success   { background-color: var(--it-success) !important; }
.badge.bg-info      { background-color: var(--it-info) !important; }
.badge.bg-secondary { background-color: #6b7280 !important; }

/* ------------------------------ Misc ------------------------------------ */
code { color: #be185d; background: #fdf2f8; padding: .1rem .35rem; border-radius: 4px; }

.content { padding-top: 1.25rem; padding-bottom: 2rem; }

/* ------------------------------ Auth pages ------------------------------ */
/* Pages that wrap themselves in <div class="auth-card"> get a centered
   "card" treatment that works equally well on phone and desktop. */
.auth-card {
    background: var(--it-surface);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius-lg);
    box-shadow: var(--it-shadow-lg);
    padding: 1.75rem 1.75rem 1.5rem;
    max-width: 440px;
    margin: 2rem auto;
}
.auth-card h1 { font-size: 1.35rem; margin-bottom: .25rem; }
.auth-card .auth-sub { color: var(--it-text-muted); margin-bottom: 1.25rem; font-size: .92rem; }
.auth-card .auth-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: .15rem .6rem;
    margin-bottom: .5rem;
}
.auth-card .form-control { padding: .55rem .75rem; }
.auth-card .btn-primary { width: 100%; padding: .6rem .9rem; font-weight: 600; }

@media (max-width: 480px) {
    .auth-card { margin: 1rem .75rem; padding: 1.25rem 1.1rem 1.1rem; box-shadow: var(--it-shadow-md); }
}

/* ------------------------------ Blazor error UI ------------------------- */
#blazor-error-ui {
    background: #fff7ed;
    color: #7c2d12;
    border-top: 1px solid #fed7aa;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, .12);
    display: none;
    left: 0;
    padding: .75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
}
    #blazor-error-ui .reload { color: var(--it-primary); margin: 0 .75rem; }
    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: .65rem;
        font-size: 1.1rem;
    }

.blazor-error-boundary {
    background: var(--it-danger);
    color: #fff;
    border-radius: var(--it-radius-sm);
    padding: 1rem 1.25rem;
    box-shadow: var(--it-shadow-md);
}
    .blazor-error-boundary::after { content: "Es ist ein Fehler aufgetreten."; }

/* ------------------------------ Loading splash -------------------------- */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 22vh auto 1rem auto;
}
    .loading-progress circle {
        fill: none;
        stroke: #e5e7eb;
        stroke-width: 0.5rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }
        .loading-progress circle:last-child {
            stroke: var(--it-primary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray .15s ease-in-out;
            stroke-linecap: round;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: var(--it-text-muted);
    inset: calc(22vh + 3.25rem) 0 auto 0.2rem;
}
    .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Lade …"); }

/* ------------------------------ Page hero -------------------------------- */
/* Hero header used on data-heavy pages (Forecast, Templates, Sessions). */
.page-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--it-radius-lg);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.25rem;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(6,182,212,.55) 0%, rgba(6,182,212,0) 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(167,139,250,.55) 0%, rgba(167,139,250,0) 60%),
        linear-gradient(135deg, #4f46e5 0%, #6366f1 60%, #4338ca 100%);
    box-shadow: var(--it-shadow-md);
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 1.6px);
    background-size: 18px 18px;
    opacity: .25;
    pointer-events: none;
    mask-image: linear-gradient(135deg, rgba(0,0,0,.7), transparent 70%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
    color: #fff;
    margin: 0 0 .35rem;
    font-size: 1.55rem;
    letter-spacing: -.015em;
}
.page-hero .hero-sub { color: rgba(255,255,255,.85); margin: 0; font-size: .95rem; }
.page-hero .hero-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
    margin-top: 1rem;
}
.page-hero .hero-row label { color: rgba(255,255,255,.85); margin: 0 .35rem 0 0; font-size: .85rem; }
.page-hero input[type="month"],
.page-hero input[type="date"],
.page-hero input[type="number"],
.page-hero .form-control,
.page-hero .form-select {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    backdrop-filter: blur(4px);
}
.page-hero input::placeholder,
.page-hero .form-control::placeholder { color: rgba(255,255,255,.7); }
.page-hero input[type="month"]::-webkit-calendar-picker-indicator,
.page-hero input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); }
.page-hero .btn-outline-secondary,
.page-hero .btn-outline-primary {
    color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.12);
}
.page-hero .btn-outline-secondary:hover,
.page-hero .btn-outline-primary:hover {
    background: rgba(255,255,255,.22); border-color: #fff; color: #fff;
}
.page-hero .btn-primary {
    background: rgba(255,255,255,.95); color: var(--it-primary); border-color: transparent;
}
.page-hero .btn-primary:hover { background: #fff; color: var(--it-primary-hover); }

@media (max-width: 640.98px) {
    .page-hero { padding: 1.1rem 1.1rem; }
    .page-hero h1 { font-size: 1.3rem; }
}

/* ------------------------------ KPI tiles -------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.kpi-tile {
    position: relative;
    background: var(--it-surface);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: var(--it-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--it-transition), transform var(--it-transition);
}
.kpi-tile:hover { box-shadow: var(--it-shadow-md); transform: translateY(-1px); }
.kpi-tile::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--it-primary), var(--it-accent));
    opacity: .9;
}
.kpi-tile.kpi-success::before { background: linear-gradient(180deg, var(--it-success), #34d399); }
.kpi-tile.kpi-warning::before { background: linear-gradient(180deg, var(--it-warning), #fbbf24); }
.kpi-tile.kpi-info::before    { background: linear-gradient(180deg, var(--it-info),    #38bdf8); }

.kpi-head {
    display: flex; align-items: center; gap: .55rem;
    color: var(--it-text-muted);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: .35rem;
}
.kpi-head .kpi-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--it-primary-soft);
    color: var(--it-primary);
}
.kpi-tile.kpi-success .kpi-head .kpi-icon { background: #d1fae5; color: #047857; }
.kpi-tile.kpi-warning .kpi-head .kpi-icon { background: #fef3c7; color: #b45309; }
.kpi-tile.kpi-info    .kpi-head .kpi-icon { background: #e0f2fe; color: #0369a1; }

.kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--it-text);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.kpi-value .kpi-unit { font-size: .9rem; font-weight: 500; color: var(--it-text-muted); margin-left: .25rem; }
.kpi-foot { color: var(--it-text-muted); font-size: .82rem; margin-top: .35rem; }
.kpi-foot strong { color: var(--it-text); font-weight: 600; }

/* Progress track */
.progress-track {
    position: relative;
    height: 8px;
    background: var(--it-surface-2);
    border-radius: 999px;
    overflow: hidden;
    margin-top: .65rem;
    border: 1px solid var(--it-border);
}
.progress-track .progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--it-primary), var(--it-accent));
    border-radius: 999px;
    transition: width .4s cubic-bezier(.4,0,.2,1);
}
.progress-track .progress-marker {
    position: absolute; top: -4px; bottom: -4px;
    width: 2px;
    background: var(--it-text);
    opacity: .55;
}
.progress-legend {
    display: flex; justify-content: space-between;
    font-size: .75rem; color: var(--it-text-muted);
    margin-top: .35rem;
}
.kpi-tile.kpi-success .progress-track .progress-fill { background: linear-gradient(90deg, var(--it-success), #34d399); }
.kpi-tile.kpi-warning .progress-track .progress-fill { background: linear-gradient(90deg, var(--it-warning), #fbbf24); }

/* ------------------------------ Section header --------------------------- */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    margin: 1.5rem 0 .75rem;
}
.section-head h2, .section-head h3 { margin: 0; }

/* ------------------------------ Weekly grid (templates) ------------------ */
.template-card {
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface);
    box-shadow: var(--it-shadow-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow var(--it-transition), transform var(--it-transition);
}
.template-card:hover { box-shadow: var(--it-shadow-md); transform: translateY(-1px); }
.template-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(135deg, var(--it-primary-soft), #fff 80%);
    border-bottom: 1px solid var(--it-border);
}
.template-card-head h5 { margin: 0; display: flex; align-items: center; gap: .55rem; }
.template-card-head .template-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--it-primary); color: #fff;
    box-shadow: var(--it-shadow-xs);
}
.template-meta { color: var(--it-text-muted); font-size: .82rem; }
.template-body { padding: 1rem 1.1rem; }

.weekly-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .4rem;
    margin-bottom: .9rem;
}
.weekly-day {
    border-radius: var(--it-radius-sm);
    padding: .5rem .35rem;
    background: var(--it-surface-2);
    border: 1px solid var(--it-border);
    min-height: 62px;
    display: flex; flex-direction: column; align-items: stretch;
    text-align: center;
    transition: background var(--it-transition), border-color var(--it-transition);
}
.weekly-day .wd-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--it-text-muted); margin-bottom: .3rem;
}
.weekly-day .wd-entry {
    font-size: .72rem;
    background: var(--it-primary);
    color: #fff;
    border-radius: 6px;
    padding: .15rem .25rem;
    margin-bottom: .2rem;
    line-height: 1.15;
    box-shadow: var(--it-shadow-xs);
}
.weekly-day .wd-entry .wd-time { font-weight: 700; display: block; }
.weekly-day .wd-entry .wd-group { font-size: .68rem; opacity: .9; }
.weekly-day.wd-active { background: #fff; border-color: var(--it-primary); }
.weekly-day.wd-empty .wd-empty-mark { color: var(--it-text-dim); font-size: 1.1rem; }

.template-actions {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    padding-top: .25rem;
}

/* ------------------------------ Template picker (sessions) -------------- */
.template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .65rem;
    margin-bottom: .25rem;
}
.template-chip {
    --tc-bg: var(--it-surface);
    display: flex; flex-direction: column; gap: .55rem;
    text-align: left;
    padding: .75rem .85rem;
    border-radius: var(--it-radius);
    border: 1px solid var(--it-border);
    background: var(--tc-bg);
    box-shadow: var(--it-shadow-xs);
    color: var(--it-text);
    cursor: pointer;
    transition: border-color var(--it-transition), box-shadow var(--it-transition), transform var(--it-transition), background var(--it-transition);
}
.template-chip:hover:not(:disabled) {
    border-color: var(--it-primary);
    box-shadow: var(--it-shadow-md);
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--it-primary-soft), #fff 75%);
}
.template-chip:focus-visible {
    outline: none;
    border-color: var(--it-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.25);
}
.template-chip:disabled { opacity: .65; cursor: not-allowed; }
.template-chip.is-busy { border-color: var(--it-primary); background: var(--it-primary-soft); opacity: 1; }

.template-chip .tc-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.template-chip .tc-name { font-weight: 700; font-size: .98rem; }
.template-chip .tc-meta { color: var(--it-text-muted); font-size: .74rem; white-space: nowrap; }

.template-chip .tc-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .2rem;
}
.template-chip .tc-dot {
    display: inline-flex; align-items: center; justify-content: center;
    height: 22px;
    border-radius: 6px;
    font-size: .65rem; font-weight: 700;
    background: var(--it-surface-2);
    color: var(--it-text-dim);
    border: 1px solid var(--it-border);
}
.template-chip .tc-dot.on {
    background: var(--it-primary);
    color: #fff;
    border-color: var(--it-primary);
    box-shadow: var(--it-shadow-xs);
}

.template-chip .tc-cta {
    display: inline-flex; align-items: center; gap: .35rem;
    align-self: flex-end;
    font-size: .8rem; font-weight: 600;
    color: var(--it-primary);
}
.template-chip:hover:not(:disabled) .tc-cta { color: var(--it-primary); }

.template-picker-empty {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .75rem 1rem;
    border: 1px dashed var(--it-border-strong);
    border-radius: var(--it-radius);
    background: var(--it-surface-2);
    color: var(--it-text-muted);
}

/* Day pills used in template editor */
.day-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.day-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 32px;
    padding: 0 .55rem;
    border-radius: 999px;
    border: 1px solid var(--it-border-strong);
    background: var(--it-surface);
    color: var(--it-text);
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    transition: all var(--it-transition);
    user-select: none;
}
.day-pill:hover { border-color: var(--it-primary); color: var(--it-primary); }
.day-pill.active {
    background: var(--it-primary); color: #fff;
    border-color: var(--it-primary);
    box-shadow: 0 2px 6px rgba(79,70,229,.35);
}

.entry-editor {
    border: 1px dashed var(--it-border-strong);
    border-radius: var(--it-radius);
    padding: .85rem;
    margin-bottom: .65rem;
    background: var(--it-surface-2);
    transition: border-color var(--it-transition), background var(--it-transition);
}
.entry-editor:hover { border-color: var(--it-primary); background: #fff; }
.entry-editor .entry-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.entry-editor .entry-row > div { flex: 0 0 auto; }

/* ------------------------------ Calendar view ---------------------------- */
.view-toggle {
    display: inline-flex;
    background: var(--it-surface-2);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius-sm);
    padding: 3px;
}
.view-toggle button {
    border: 0;
    background: transparent;
    color: var(--it-text-muted);
    padding: .35rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 5px;
    display: inline-flex; align-items: center; gap: .35rem;
    cursor: pointer;
    transition: all var(--it-transition);
}
.view-toggle button:hover { color: var(--it-text); }
.view-toggle button.active {
    background: #fff;
    color: var(--it-primary);
    box-shadow: var(--it-shadow-xs);
}

.calendar {
    background: var(--it-surface);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    box-shadow: var(--it-shadow-sm);
    padding: .75rem;
    margin-bottom: 1.25rem;
}
.calendar-head, .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .4rem;
}
.calendar-head {
    margin-bottom: .4rem;
}
.calendar-head .cal-dow {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--it-text-muted);
    padding: .4rem 0;
}
.calendar-day {
    position: relative;
    background: var(--it-surface-2);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius-sm);
    min-height: 96px;
    padding: .35rem .4rem;
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: all var(--it-transition);
}
.calendar-day:hover { border-color: var(--it-primary); background: #fff; box-shadow: var(--it-shadow-xs); }
.calendar-day.cal-out { background: transparent; border-color: transparent; cursor: default; }
.calendar-day.cal-out:hover { box-shadow: none; background: transparent; border-color: transparent; }
.calendar-day.cal-today {
    background: #fff;
    border-color: var(--it-primary);
    box-shadow: 0 0 0 2px rgba(79,70,229,.2);
}
.calendar-day.cal-weekend { background: var(--it-surface); }
.cal-daynum {
    font-size: .82rem; font-weight: 600; color: var(--it-text);
    margin-bottom: .25rem;
    display: flex; justify-content: space-between; align-items: center;
}
.calendar-day.cal-out .cal-daynum { color: var(--it-text-dim); }
.calendar-day.cal-today .cal-daynum {
    color: var(--it-primary);
}
.cal-event {
    font-size: .7rem;
    line-height: 1.2;
    background: var(--it-primary);
    color: #fff;
    border-radius: 5px;
    padding: .15rem .3rem;
    margin-bottom: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: var(--it-shadow-xs);
}
.cal-event.ev-2 { background: #06b6d4; }
.cal-event.ev-3 { background: #10b981; }
.cal-event.ev-4 { background: #f59e0b; }
.cal-event.ev-5 { background: #ec4899; }
.cal-event-more {
    font-size: .68rem; color: var(--it-text-muted);
    font-weight: 600;
}
.cal-totals {
    margin-top: auto; padding-top: .25rem;
    font-size: .68rem; color: var(--it-text-muted);
    font-weight: 600;
    border-top: 1px dashed var(--it-border);
}

@media (max-width: 720px) {
    .calendar-day { min-height: 70px; padding: .25rem .3rem; }
    .cal-event { font-size: .62rem; padding: .1rem .25rem; }
    .calendar-head .cal-dow { font-size: .62rem; padding: .25rem 0; }
}

/* ------------------------------ Mobile spacing -------------------------- */
@media (max-width: 640.98px) {
    h1 { font-size: 1.35rem; }
    .content { padding-top: 1rem; padding-bottom: 1.5rem; }
    .row.g-2 > [class^="col-"] { width: 100%; }
}

/* ============================================================
   Surveys (admin page + trainer popup)
   ============================================================ */

/* --- Admin: type picker pills -------------------------------- */
.survey-type-picker {
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.type-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid var(--it-border-strong);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    color: var(--it-text);
    font-weight: 500;
    transition: background-color var(--it-transition),
                color var(--it-transition),
                border-color var(--it-transition);
}
.type-pill input { display: none; }
.type-pill:hover { border-color: var(--it-primary); color: var(--it-primary); }
.type-pill.is-active {
    background: linear-gradient(135deg, var(--it-primary), var(--it-accent));
    color: #fff;
    border-color: transparent;
    box-shadow: var(--it-shadow-sm);
}

/* --- Admin: trainer multi-select ----------------------------- */
.trainer-picker {
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface-2);
    max-height: 320px;
    overflow-y: auto;
    padding: .25rem;
}
.trainer-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: center;
    column-gap: .65rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--it-transition);
    user-select: none;
}
.trainer-row:hover { background: var(--it-primary-soft); }
.trainer-row input[type="checkbox"] {
    width: 1.05rem; height: 1.05rem; accent-color: var(--it-primary);
}
.trainer-row .trainer-name { font-weight: 500; color: var(--it-text); }
.trainer-row .trainer-meta { font-size: .78rem; color: var(--it-text-muted); }
.trainer-row-all {
    border-bottom: 1px solid var(--it-border);
    border-radius: 8px 8px 0 0;
    background: #fff;
    margin-bottom: .25rem;
    position: sticky; top: 0;
}
.trainer-row-all .trainer-name { font-weight: 600; }

/* --- Admin: survey list -------------------------------------- */
.survey-list { display: flex; flex-direction: column; gap: .85rem; }
.survey-item {
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: #fff;
    padding: 1rem 1.1rem;
    box-shadow: var(--it-shadow-xs);
    transition: box-shadow var(--it-transition), border-color var(--it-transition);
}
.survey-item.is-live { border-left: 4px solid var(--it-success); }
.survey-item.is-closed { border-left: 4px solid var(--it-text-dim); }
.survey-item:hover { box-shadow: var(--it-shadow-sm); }

.survey-item-head {
    display: flex; flex-wrap: wrap; gap: .75rem;
    justify-content: space-between; align-items: flex-start;
}
.survey-item-title { font-size: 1.05rem; margin: 0 0 .35rem; }
.survey-item-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .85rem;
}
.survey-item-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.survey-item-desc {
    margin: .65rem 0 0; color: var(--it-text-muted); font-size: .9rem;
}

.survey-results {
    margin-top: .9rem; padding-top: .9rem;
    border-top: 1px dashed var(--it-border);
}
.option-results { display: flex; flex-direction: column; gap: .55rem; }
.option-row-label {
    display: flex; justify-content: space-between; gap: .5rem;
    font-size: .88rem; margin-bottom: .2rem;
}
.option-bar {
    background: var(--it-surface-2);
    border: 1px solid var(--it-border);
    border-radius: 999px;
    height: .55rem;
    overflow: hidden;
}
.option-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--it-primary), var(--it-accent));
    transition: width 250ms ease;
}

.text-answers {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .5rem;
}
.text-answers li {
    background: var(--it-surface-2);
    border: 1px solid var(--it-border);
    border-radius: 8px;
    padding: .55rem .75rem;
}
.text-answer-head {
    display: flex; justify-content: space-between; gap: .5rem;
    margin-bottom: .25rem;
}
.text-answer-body { margin: 0; white-space: pre-wrap; color: var(--it-text); }

/* --- Trainer popup ------------------------------------------ */
.survey-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: surveyFade 180ms ease-out;
}
@keyframes surveyFade { from { opacity: 0; } to { opacity: 1; } }

.survey-modal {
    position: relative;
    background: #fff;
    width: 100%; max-width: 520px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-radius: var(--it-radius-lg);
    box-shadow: var(--it-shadow-lg);
    padding: 1.5rem 1.5rem 1.25rem;
    animation: surveyPop 220ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes surveyPop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.survey-close {
    position: absolute; top: .5rem; right: .65rem;
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 0; background: transparent;
    font-size: 1.4rem; line-height: 1;
    color: var(--it-text-muted); cursor: pointer;
    transition: background-color var(--it-transition), color var(--it-transition);
}
.survey-close:hover { background: var(--it-surface-2); color: var(--it-text); }

.survey-header { margin-bottom: 1rem; }
.survey-badge-row {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .5rem;
}
.survey-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--it-primary), var(--it-accent));
    color: #fff; font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .25rem .55rem; border-radius: 999px;
}
.survey-counter {
    display: inline-flex; align-items: center;
    background: var(--it-primary-soft);
    color: var(--it-primary);
    font-size: .72rem; font-weight: 600;
    padding: .2rem .55rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--it-primary) 25%, transparent);
}
.survey-dots {
    display: flex; gap: .35rem; margin-top: .65rem;
    flex-wrap: wrap;
}
.survey-dot {
    width: 1.5rem; height: .35rem;
    border: 0; padding: 0;
    border-radius: 999px;
    background: var(--it-border);
    cursor: pointer;
    transition: background-color var(--it-transition), transform var(--it-transition);
}
.survey-dot:hover { background: var(--it-border-strong); }
.survey-dot.is-current {
    background: linear-gradient(90deg, var(--it-primary), var(--it-accent));
    width: 2.25rem;
}
.survey-dot.is-done { background: var(--it-success); opacity: .55; }
.survey-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,.25); }
.survey-title { margin: 0 2.25rem 0 0; font-size: 1.2rem; }
.survey-desc { margin: .5rem 0 .25rem; color: var(--it-text-muted); }
.survey-meta { font-size: .8rem; color: var(--it-text-muted); }

.survey-body { display: flex; flex-direction: column; gap: .5rem; }
.survey-option {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .85rem;
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface-2);
    cursor: pointer; user-select: none;
    transition: background-color var(--it-transition),
                border-color var(--it-transition);
}
.survey-option:hover { border-color: var(--it-primary); background: var(--it-primary-soft); }
.survey-option.is-checked {
    border-color: var(--it-primary);
    background: var(--it-primary-soft);
}
.survey-option input { accent-color: var(--it-primary); width: 1.05rem; height: 1.05rem; }
.survey-option-label { color: var(--it-text); }

.survey-textarea { resize: vertical; min-height: 6rem; }

.survey-actions {
    display: flex; justify-content: flex-end; gap: .5rem;
    margin-top: 1.1rem; padding-top: .9rem;
    border-top: 1px solid var(--it-border);
}

@media (max-width: 480px) {
    .survey-modal { padding: 1.1rem 1rem 1rem; border-radius: 14px; }
    .survey-title { font-size: 1.05rem; }
    .survey-actions { flex-direction: column-reverse; }
    .survey-actions .btn { width: 100%; }
    .survey-item-head { flex-direction: column; }
    .survey-item-actions .btn { flex: 1; }
}

/* ------------------------------ Landing (logged-out home) -------------- */
/* Stylish welcome view rendered by Pages/Dashboard.razor when no user is
   signed in. Uses the same gradient palette as .page-hero so it feels at
   home in the design system. */
.landing-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--it-radius-lg);
    padding: 3rem 2rem 3.25rem;
    margin: 0 0 1.5rem;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(6,182,212,.55) 0%, rgba(6,182,212,0) 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(167,139,250,.55) 0%, rgba(167,139,250,0) 60%),
        linear-gradient(135deg, #4f46e5 0%, #6366f1 60%, #4338ca 100%);
    box-shadow: var(--it-shadow-lg);
}
.landing-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 1.6px);
    background-size: 22px 22px;
    opacity: .35;
    pointer-events: none;
    mask-image: linear-gradient(135deg, rgba(0,0,0,.7), transparent 70%);
}
.landing-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.landing-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    margin-bottom: 1rem;
}
.landing-hero h1 {
    color: #fff;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 .85rem;
    letter-spacing: -.015em;
}
.landing-lead {
    color: rgba(255,255,255,.9);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.6rem;
    max-width: 60ch;
}
.landing-cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.landing-cta .btn-primary {
    background: #fff;
    color: var(--it-primary);
    border-color: #fff;
    font-weight: 600;
}
.landing-cta .btn-primary:hover,
.landing-cta .btn-primary:focus {
    background: #fff;
    color: var(--it-primary-hover);
    border-color: #fff;
    filter: brightness(.97);
}
.landing-cta .btn-outline-light {
    color: #fff;
    border-color: rgba(255,255,255,.7);
    background: transparent;
    font-weight: 600;
}
.landing-cta .btn-outline-light:hover,
.landing-cta .btn-outline-light:focus {
    background: rgba(255,255,255,.14);
    color: #fff;
    border-color: #fff;
}
.landing-note { color: rgba(255,255,255,.75); font-size: .85rem; margin: 0; }

.landing-features {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 1.5rem;
}
.landing-feature {
    background: var(--it-surface);
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    padding: 1.1rem 1.1rem 1.15rem;
    box-shadow: var(--it-shadow-xs);
    transition: box-shadow var(--it-transition), transform var(--it-transition);
}
.landing-feature:hover { box-shadow: var(--it-shadow-md); transform: translateY(-1px); }
.landing-feature h3 {
    font-size: 1rem;
    margin: .85rem 0 .35rem;
    color: var(--it-text);
    letter-spacing: -.005em;
}
.landing-feature p { color: var(--it-text-muted); font-size: .9rem; margin: 0; line-height: 1.5; }
.landing-feature-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.landing-icon-primary { background: var(--it-primary-soft); color: var(--it-primary); }
.landing-icon-success { background: #d1fae5; color: #047857; }
.landing-icon-info    { background: #e0f2fe; color: #0369a1; }
.landing-icon-warning { background: #fef3c7; color: #b45309; }

.landing-foot { color: var(--it-text-muted); text-align: center; font-size: .9rem; }
.landing-foot p { margin: 0; }

@media (max-width: 600px) {
    .landing-hero { padding: 2rem 1.25rem 2.25rem; border-radius: var(--it-radius); }
    .landing-cta .btn { flex: 1 1 auto; }
}