/* wwwroot/css/site.css
   Global styles for TeacherAssistant.
   Kept minimal — Bootstrap 5 handles most of the heavy lifting.
*/

/* ═══════════════════════════════════════════════════════════════════════
   DESIGNSYSTEM — FÄRGVARIABLER
   Alla färger definieras här uppe, på ett ställe.
   Bootstrap "primary" och "link" är åsidosatta så att hela appen
   följer samma palett utan att hårdkoda värden på flera ställen.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── EduPrep-palett (2026-09-01 rebrand) ─────────────────
       Referens: mörkgrön #1F3D35, korall #E47A5F, salviagrön #A8BFAE,
       varm beige #F5EFE6, mjuk gul #F2D9B3, ljus bakgrund #FAF7F2.
       Se CLAUDE.md för hur färgerna är tänkta att användas. ────── */
    /* ── Primärfärg (mörkgrön) — varumärkets identitetsfärg ─── */
    --ta-primary: #294A40; /* Navbar, rubriker, knappar           */
    --ta-primary-mid: #2C5647; /* Hover-tillstånd                    */
    --ta-primary-dark: #14261F; /* Active/pressed-tillstånd           */
    --ta-primary-accent: #A8BFAE; /* Salviagrön — ljus accenttext på mörk bakgrund */
    --ta-primary-glow: rgba(31, 61, 53, 0.16); /* Soft fokus-ring      */
    /* ── Sekundär accent (korall) — primära actions/CTA ──────── */
    --ta-coral: #E47A5F;
    --ta-coral-dark: #C6603F; /* Hover/active för korall-knappar     */
    /* ── Sekundär accent (salviagrön) — aktiva/valda element, badges ── */
    --ta-sage: #A8BFAE;
    --ta-sage-dark: #7E9986; /* Något mer mättad — ringar/prickar som behöver synas tydligare */
    /* ── Highlight (mjuk gul) — sparsamt, informationsytor/Min yta ──── */
    --ta-yellow: #F2D9B3;
    /* ── Bakgrunder & ytor ─────────────────────────────────── */
    --ta-bg: #ffffff; /* Ljus, varm sidbakgrund (body/main)        */
    --ta-cream: #F1EFEA; /* Vit/nästan vit yta — kort, paneler, kalender */
    --ta-cream-rgb: 255, 255, 255;
    --ta-surface: #ffffff;
    --ta-beige: #F5EFE6; /* Varm beige — samma värde som surface-soft nedan */
    --ta-surface-soft: #F5EFE6; /* Varm beige yta — ANVÄNDS SPARSAMT: chip, historik, dropdown-active, formpanel. Primära arbetsytor (kort, paneler) ska vara --ta-cream (vitt), inte denna. */
    --ta-surface-subtle: #F7F5EF; /* 2026-09 finjustering: nästan-vit, mycket svagare än surface-soft -- för diskreta interna avdelare (t.ex. ihopfällda avsnittsrubriker) inuti ett redan vitt kort, utan att läsas som en egen beige yta. */
    --ta-surface-hover: #EFE6D6; /* Hover-bakgrund i listor & menyer   */
    /* ── Gränser ────────────────────────────────────────────── */
    --ta-border: #E7DFD1; /* Varm neutral — generell kant        */
    --ta-border-strong: #B9AC98; /* Kalenderrutnät m.m. — lite mer kontrast än --ta-border */
    --ta-border-accent: #E4D3C8; /* Varm kant — chips, akcentelement */
    /* ── Text ───────────────────────────────────────────────── */
    --ta-text: #1f2937;
    --ta-text-muted: #6b7280;
    --ta-label-color: #374151;
    --ta-hint-text: #6b7280;
    /* ── Sidofält (sidebar) ─────────────────────────────────── */
    --ta-sidebar-bg: var(--ta-primary);
    --ta-sidebar-text: var(--ta-primary-accent);
    --ta-sidebar-accent: var(--ta-cream);
    --ta-sidebar-muted: var(--ta-cream);
    --ta-sidebar-glow: rgba(255, 255, 255, 0.10); /* Hover på mörk bg  */
    --ta-sidebar-glow-mid: rgba(255, 255, 255, 0.18); /* Active på mörk bg */
    /* ── Knappar ────────────────────────────────────────────── */
    --ta-btn-active-bg: var(--ta-primary);
    --ta-btn-active-text: var(--ta-cream);
    /* ── Chips ──────────────────────────────────────────────── */
    --ta-chip-border: var(--ta-border-accent);
    --ta-chip-bg: var(--ta-surface-soft);
    --ta-chip-color: var(--ta-primary);
    /* ── Sidans innehållsbakgrund ───────────────────────────── */
    --ta-content-bg: var(--ta-bg);
    /* ── Klassrumsdisplay (projektor-vy — avsiktligt annan blå) */
    --ta-display-primary: #1a56db;
    --ta-display-dark: #1e429f;
    --ta-display-track: #c3d4f8;
    --ta-display-bg: #f0f4ff;
    --ta-display-shadow: rgba(26, 86, 219, 0.10);
    /* ── Bootstrap 5 åsidosättning ─────────────────────────── */
    --bs-primary: var(--ta-primary);
    --bs-primary-rgb: 31, 61, 53;
    --bs-link-color: var(--ta-primary);
    --bs-link-color-rgb: 31, 61, 53;
    --bs-link-hover-color: var(--ta-primary-mid);
    --bs-body-bg: var(--ta-bg);
    --bs-body-bg-rgb: 250, 247, 242;
    --bs-light-rgb: 255, 255, 255;
}

/* ── btn-primary ────────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-color:                 var(--ta-cream);
    --bs-btn-bg:                    var(--ta-primary);
    --bs-btn-border-color:          var(--ta-primary);
    --bs-btn-hover-color:           var(--ta-primary-accent);
    --bs-btn-hover-bg:              var(--ta-primary-mid);
    --bs-btn-hover-border-color:    var(--ta-primary-mid);
    --bs-btn-active-color:          var(--ta-primary-accent);
    --bs-btn-active-bg:             var(--ta-primary-dark);
    --bs-btn-active-border-color:   var(--ta-primary-dark);
    --bs-btn-disabled-color:        #a3a3a3;
    --bs-btn-disabled-bg:           #4A6358;
    --bs-btn-disabled-border-color: #4A6358;
}

/* ── btn-outline-primary ────────────────────────────────────────────── */
.btn-outline-primary {
    --bs-btn-color:                 var(--ta-primary);
    --bs-btn-border-color:          var(--ta-primary);
    --bs-btn-hover-color:           var(--ta-cream);
    --bs-btn-hover-bg:              var(--ta-primary);
    --bs-btn-hover-border-color:    var(--ta-primary);
    --bs-btn-active-color:          var(--ta-primary-accent);
    --bs-btn-active-bg:             var(--ta-primary-dark);
    --bs-btn-active-border-color:   var(--ta-primary-dark);
}

/* ── Utility-klasser ────────────────────────────────────────────────── */
.bg-primary     { background-color: var(--ta-primary) !important; }
.text-primary   { color:            var(--ta-primary) !important; }
.border-primary { border-color:     var(--ta-primary) !important; }
.badge.bg-primary { background-color: var(--ta-primary) !important; }

/* ── Navbar ─────────────────────────────────────────────────────────── */
.navbar-dark.bg-primary,
nav.navbar.bg-primary {
    background-color: var(--ta-primary) !important;
    border-bottom: 2px solid var(--ta-primary-mid);
}

.navbar-dark.bg-primary .navbar-brand,
nav.navbar.bg-primary .navbar-brand {
    color: var(--ta-cream);
    letter-spacing: .02em;
    padding-top: 0;
    padding-bottom: 0;
}
    .navbar-dark.bg-primary .navbar-brand:hover .eduprep-logo,
    nav.navbar.bg-primary .navbar-brand:hover .eduprep-logo {
        opacity: .88;
    }

/* ── EduPrep-loggan (Components/Shared/EduPrepLogo.razor) ────────────── */
.eduprep-logo { transition: opacity .12s ease; }
.eduprep-logo__word {
    font-family: "Lora", Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
}
.eduprep-logo__edu  { color: var(--ta-cream); }
.eduprep-logo__prep { color: var(--ta-coral); }

    .navbar-dark.bg-primary .nav-link,
    nav.navbar.bg-primary .nav-link {
        color: var(--ta-cream);
    }
        .navbar-dark.bg-primary .nav-link:hover,
        nav.navbar.bg-primary .nav-link:hover {
            color: var(--ta-primary-accent);
        }
    .navbar-dark.bg-primary .nav-link.active,
    nav.navbar.bg-primary .nav-link.active {
        color: var(--ta-cream) !important;
        border-bottom-color: var(--ta-cream) !important;
    }

/* ── Body & main ────────────────────────────────────────────────────── */
html, body {
    height: 100%;
    scroll-behavior: smooth;
    background-color: var(--ta-bg);
}

body { background-color: var(--ta-bg); }

main {
    min-height: calc(100vh - 56px);
    background-color: var(--ta-bg);
}

/* ── Inloggningssida ────────────────────────────────────────────────── */
.ta-login-header {
    background: linear-gradient(135deg, var(--ta-primary) 0%, var(--ta-primary-mid) 100%) !important;
    color: var(--ta-cream) !important;
}
.ta-login-header small { color: var(--ta-primary-accent); }

/* ── Kort ───────────────────────────────────────────────────────────── */
.card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important;
    border-color: var(--ta-border-accent);
}

/* ── Active nav link highlight ──────────────────────────────────────── */
.navbar .nav-link.active {
    font-weight: 600;
    border-bottom: 2px solid rgba(255,255,255,0.8);
}

/* ── Loading overlay ────────────────────────────────────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* ── Blazor error UI ────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 0.375rem;
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0,0,0,.15);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* Custom purple badge (inte inbyggd i Bootstrap 5) */
.bg-purple { background-color: #7c3aed !important; }


/* ═══════════════════════════════════════════════════════════════════════
   CLASSROOM DISPLAY VIEW
   Optimised for projectors, smart boards, and iframes
   embedded in ClassroomScreen.
   All font sizes are viewport-relative so the layout
   scales correctly at any screen size.
   Obs: använder --ta-display-primary (#1a56db) — avsiktligt
   annorlunda blå för att skilja sig från app-UI:t.
   ═══════════════════════════════════════════════════════════════════════ */

.display-shell {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr 280px;
    grid-template-areas:
        "header     header"
        "progress   progress"
        "section    objectives"
        "nav        objectives";
    height: 100vh;
    background: var(--ta-display-bg);
    font-family: 'Segoe UI', Arial, sans-serif;
    overflow: hidden;
}

.display-loading {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ta-display-bg);
}

/* ── Header ── */
.display-header {
    grid-area: header;
    background: linear-gradient(135deg, var(--ta-display-primary) 0%, var(--ta-display-dark) 100%);
    color: white;
    padding: 1rem 1.5rem 0.75rem;
}

.display-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.display-badge {
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.display-title {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* ── Progress bar ── */
.display-progress-track {
    grid-area: progress;
    height: 6px;
    background: var(--ta-display-track);
}

.display-progress-fill {
    height: 100%;
    background: var(--ta-display-primary);
    transition: width 0.4s ease;
}

/* ── Section card ── */
.display-section-card {
    grid-area: section;
    background: white;
    margin: 1rem 1rem 0.5rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 24px var(--ta-display-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.display-section-header {
    background: var(--ta-display-primary);
    color: white;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.display-section-number {
    font-size: 0.75rem;
    opacity: 0.75;
    white-space: nowrap;
}

.display-section-title {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    margin: 0;
    flex: 1;
}

.display-section-time {
    font-size: 0.85rem;
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.display-section-body {
    padding: 1rem 1.25rem;
    flex: 1;
    overflow-y: auto;
}

.display-description {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    color: #374151;
    margin-bottom: 1rem;
    font-style: italic;
}

.display-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.display-col {
    background: #f8faff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--ta-display-primary);
}

.display-col-label {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ta-display-primary);
    margin-bottom: 0.4rem;
}

.display-col p {
    margin: 0;
    font-size: clamp(0.85rem, 1.3vw, 1rem);
    color: #1f2937;
    line-height: 1.5;
}

/* ── Navigation ── */
.display-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem 1rem;
}

.display-nav-btn {
    background: none;
    border: none;
    color: var(--ta-display-primary);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.15s, transform 0.15s;
    padding: 0;
}

.display-nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
    transform: none;
}

.display-nav-btn:not(:disabled):hover {
    transform: scale(1.15);
}

.display-dots {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.display-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ta-display-track);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.display-dot.active {
    background: var(--ta-display-primary);
    transform: scale(1.3);
}

/* ── Objectives sidebar ── */
.display-objectives {
    grid-area: objectives;
    background: white;
    margin: 1rem 1.5rem 1rem 0.5rem;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 24px rgba(26,86,219,0.08);
    overflow-y: auto;
}

.display-objectives-label {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ta-display-primary);
    margin-bottom: 0.6rem;
}

.display-objectives ul {
    padding-left: 1.1rem;
    margin: 0;
}

.display-objectives li {
    font-size: clamp(0.78rem, 1.1vw, 0.9rem);
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   MATERIALGENERATOR & KLASSRUMSDESIGNER — LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sidans ytterram ── */
.ta-page {
    background: var(--ta-content-bg);
    min-height: calc(100vh - 56px);
    padding: 0;
}

/* ── Huvud-layout: sidebar + huvudyta ── */
.ta-layout {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 56px);
}

/* ── Sidopanel ── */
.ta-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--ta-sidebar-bg);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    min-height: calc(100vh - 56px);
}

/* ── Huvudyta ── */
.ta-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ta-main__alert   { padding: 12px 20px 0; }

.ta-main__columns {
    display: flex;
    gap: 20px;
    padding: 20px;
    align-items: flex-start;
    flex: 1;
}

/* Klassrumsdesigner: full-area (utan kolumnpaneler) */
.ta-main__full {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

/* ── Formulärkolumn (fast bredd) ── */
.ta-form-panel {
    flex: 0 0 500px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Materialkolumn (fyller resten) ── */
.ta-display-panel {
    flex: 1;
    min-width: 0;
}

/* ── Formulärets kort-wrapper ── */
.ta-shell {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

/* ── Responsivt ── */
@media (max-width: 1200px) {
    .ta-main__columns { gap: 14px; }
    .ta-form-panel    { flex: 0 0 380px; }
}

@media (max-width: 960px) {
    .ta-layout         { flex-direction: column; }
    .ta-sidebar        { width: 100%; min-height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; }
    .ta-sidebar__steps { flex-direction: row; flex: 1; }
    .ta-main__columns  { flex-direction: column; }
    .ta-form-panel     { flex: none; width: 100%; }
}

@media (max-width: 700px) { .ta-row { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════
   SIDOFÄLT — LOGOTYP, STEG & BADGE
   ═══════════════════════════════════════════════════════════════════════ */


.ta-sidebar__steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Steg-knapp i sidofältet */
.ta-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
    color: var(--ta-sidebar-muted);
}

.ta-step:hover {
    background: var(--ta-sidebar-glow);
    color: var(--ta-sidebar-text);
}

.ta-step--active {
    background: var(--ta-sidebar-glow-mid) !important;
    color: var(--ta-sidebar-accent) !important;
}

.ta-step--done { color: var(--ta-sidebar-text); }

.ta-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: var(--ta-sidebar-text);
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.ta-step--active .ta-step__num {
    background: var(--ta-sidebar-accent);
    color: var(--ta-sidebar-bg);
}

.ta-step--done .ta-step__num {
    background: rgba(255,255,255,.25);
    color: var(--ta-sidebar-accent);
}

.ta-step__label { font-size: .9rem; font-weight: 500; }

.ta-sidebar__badge {
    margin-top: auto;
    padding: 12px;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
}

.ta-sidebar__badge-subject {
    color: var(--ta-sidebar-accent);
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.ta-sidebar__badge-area {
    color: var(--ta-sidebar-text);
    font-size: .72rem;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ta-sidebar__badge-grade {
    color: var(--ta-sidebar-text);
    font-size: .68rem;
    opacity: .8;
}

/* Sidebar nav-knappar (klassrumsdesigner) */
.ta-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ta-sidebar__nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--ta-sidebar-muted);
    font-size: .88rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    width: 100%;
}
.ta-sidebar__nav-btn i      { font-size: 1.1rem; flex-shrink: 0; }
.ta-sidebar__nav-btn small  { display: block; }
.ta-sidebar__nav-btn:hover  { background: var(--ta-sidebar-glow); color: var(--ta-sidebar-text); }
.ta-sidebar__nav-btn.active {
    background: var(--ta-sidebar-glow-mid);
    color: var(--ta-sidebar-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   FORMULÄR — INNEHÅLLSYTA, FÄLT, KNAPPAR
   ═══════════════════════════════════════════════════════════════════════ */

.ta-content {
    background: var(--ta-content-bg);
    padding: 4px 0;
}

.ta-step-content { padding: 28px 28px 20px; }

.ta-step-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ta-primary);
    margin: 0 0 4px;
}

.ta-step-subtitle {
    font-size: .85rem;
    color: var(--ta-hint-text);
    margin: 0 0 22px;
}

/* ── Fält-wrapper ── */
.ta-field { margin-bottom: 18px; }

.ta-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ta-label-color);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

.ta-label__required { color: #ef4444; margin-left: 2px; }
.ta-label__optional { font-weight: 400; text-transform: none; color: var(--ta-hint-text); letter-spacing: 0; }

.ta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Pill-knappar (Åk, Typ) ── */
.ta-btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

.ta-btn-choice {
    flex: 1;
    min-width: 64px;
    padding: 8px 10px;
    font-size: .82rem;
    font-weight: 600;
    border: 2px solid var(--ta-border);
    border-radius: 8px;
    background: var(--ta-surface-soft);
    color: var(--ta-primary);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.ta-btn-choice:hover { border-color: var(--ta-primary-mid); background: var(--ta-surface-hover); }

.ta-btn-choice--active {
    background: var(--ta-btn-active-bg) !important;
    border-color: var(--ta-btn-active-bg) !important;
    color: var(--ta-btn-active-text) !important;
}

/* ── Svårighetskort ── */
.ta-difficulty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ta-difficulty {
    padding: 14px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: var(--ta-surface);
    cursor: pointer;
    text-align: center;
    transition: all .18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ta-difficulty:hover { border-color: var(--diff-color, #6b7280); background: color-mix(in srgb, var(--diff-color, #6b7280) 8%, #fff); }

.ta-difficulty--active {
    border-color: var(--diff-color) !important;
    background: color-mix(in srgb, var(--diff-color) 10%, #fff) !important;
}

.ta-difficulty__icon { font-size: 1.4rem; }
.ta-difficulty__name { font-weight: 800; font-size: .82rem; color: var(--ta-text); }
.ta-difficulty__niva { font-size: .68rem; color: var(--diff-color, #6b7280); font-weight: 700; }
.ta-difficulty__desc { font-size: .65rem; color: #9ca3af; line-height: 1.3; }

/* ── Slider ── */
.ta-range        { width: 100%; accent-color: var(--ta-primary); }
.ta-range-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ta-hint-text); margin-top: 2px; }

.ta-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ta-primary);
    color: var(--ta-sidebar-accent);
    border-radius: 20px;
    padding: 1px 10px;
    font-size: .78rem;
    font-weight: 700;
    margin-left: 6px;
}

/* ── Textarea ── */
.ta-textarea {
    width: 100%;
    border: 1.5px solid var(--ta-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: .85rem;
    background: var(--ta-surface);
    color: var(--ta-text);
    resize: vertical;
    transition: border-color .15s;
}
.ta-textarea:focus {
    outline: none;
    border-color: var(--ta-primary-mid);
    box-shadow: 0 0 0 3px var(--ta-primary-glow);
}

/* ── Uppgiftstyp-chips ── */
.ta-type-group-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ta-hint-text);
    margin-bottom: 10px;
}

.ta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.ta-chip {
    padding: 7px 13px;
    border: 2px solid var(--ta-chip-border);
    border-radius: 8px;
    background: var(--ta-chip-bg);
    color: var(--ta-chip-color);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.ta-chip:hover { border-color: var(--ta-primary); background: var(--ta-surface-hover); }

.ta-chip--active {
    background: var(--ta-primary) !important;
    border-color: var(--ta-primary) !important;
    color: var(--ta-cream) !important;
}

/* Aktiva uppgifter — lila variant */
.ta-chip--aktiv { border-color: #e9d5ff; background: #faf5ff; color: #6d28d9; }
.ta-chip--aktiv:hover { border-color: #7c3aed; background: #f3e8ff; }
.ta-chip--aktiv-active {
    background: #5b21b6 !important;
    border-color: #5b21b6 !important;
    color: #e9d5ff !important;
}

/* ── Hints & valideringsmeddelanden ── */
.ta-hint {
    font-size: .78rem;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 8px;
    display: inline-block;
}
.ta-hint--info  { background: #eff6ff; color: #1d4ed8; }
.ta-hint--warn  { background: #fef9c3; color: #92400e; }
.ta-hint--ok    { background: #f0fdf4; color: #166534; }

.ta-validation { font-size: .78rem; color: #dc2626; display: block; margin-top: 4px; }

/* ── Steg-knappar ── */
.ta-step-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.ta-step-actions--split { justify-content: space-between; }

.ta-btn {
    padding: 11px 20px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
}

.ta-btn--primary {
    background: var(--ta-primary);
    color: var(--ta-cream);
}
.ta-btn--primary:hover:not(:disabled) { background: var(--ta-primary-dark); }
.ta-btn--primary:disabled { opacity: .45; cursor: not-allowed; }

.ta-btn--next { padding-right: 16px; }

.ta-btn--ghost {
    background: transparent;
    border: 2px solid var(--ta-border);
    color: var(--ta-primary);
}
.ta-btn--ghost:hover { background: var(--ta-surface-soft); }

.ta-btn--generate {
    width: 100%;
    justify-content: center;
    padding: 15px;
    font-size: 1rem;
    background: var(--ta-primary);
    color: var(--ta-cream);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(30,58,95,.25);
}
.ta-btn--generate:hover:not(:disabled) { background: var(--ta-primary-dark); box-shadow: 0 6px 20px rgba(30,58,95,.3); }
.ta-btn--generate:disabled { opacity: .5; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════
   SAMMANFATTNING & HISTORIK
   ═══════════════════════════════════════════════════════════════════════ */

.ta-summary {
    background: var(--ta-surface);
    border: 1.5px solid var(--ta-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ta-summary__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ta-border);
    font-size: .85rem;
}
.ta-summary__row:last-child { border-bottom: none; }
.ta-summary__row--types { align-items: flex-start; }

.ta-summary__key {
    flex: 0 0 120px;
    font-weight: 700;
    color: #6b7280;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ta-summary__val { color: var(--ta-text); font-weight: 500; flex: 1; }
.ta-summary__val--extra { font-style: italic; color: var(--ta-text-muted); }

.ta-summary__chip {
    display: inline-block;
    background: var(--ta-surface-soft);
    border: 1px solid var(--ta-border);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: .72rem;
    color: var(--ta-primary);
    font-weight: 600;
    margin: 2px 4px 2px 0;
}

.ta-history {
    background: var(--ta-surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.ta-history__header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: .82rem;
    color: var(--ta-primary);
    background: var(--ta-surface-soft);
    border-bottom: 1px solid var(--ta-border);
}

.ta-history__item {
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-bottom: 1px solid #f9fafb;
    cursor: pointer;
    transition: background .12s;
}
.ta-history__item:last-child { border-bottom: none; }
.ta-history__item:hover      { background: var(--ta-surface-hover); }
.ta-history__item--active    { background: var(--ta-surface-soft) !important; }

.ta-history__title {
    font-weight: 600;
    font-size: .82rem;
    color: var(--ta-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1;
    grid-row: 1;
    max-width: 260px;
}

.ta-history__meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    gap: 8px;
    font-size: .7rem;
    color: #9ca3af;
    margin-top: 2px;
}

.ta-history__date {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: .7rem;
    color: #9ca3af;
    align-self: center;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   SÖKBAR DROPDOWN
   ═══════════════════════════════════════════════════════════════════════ */

.ta-dropdown { position: relative; }

.ta-dropdown__backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.ta-dropdown__trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    background: var(--ta-surface);
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: left;
    color: var(--ta-text);
}

.ta-dropdown__trigger:hover { border-color: var(--ta-primary-mid); }
.ta-dropdown__trigger:focus {
    outline: none;
    border-color: var(--ta-primary-mid);
    box-shadow: 0 0 0 3px var(--ta-primary-glow);
}

.ta-dropdown__placeholder { color: #9ca3af; }
.ta-dropdown__value       { color: var(--ta-text); font-weight: 600; }
.ta-dropdown__chevron     { font-size: .75rem; color: #9ca3af; margin-left: 8px; flex-shrink: 0; }

.ta-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--ta-surface);
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    overflow: hidden;
}

.ta-dropdown__search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--ta-border);
}

.ta-dropdown__search-icon { color: #9ca3af; font-size: .85rem; }

.ta-dropdown__search-input {
    border: none;
    outline: none;
    font-size: .85rem;
    color: var(--ta-text);
    width: 100%;
    background: transparent;
}

.ta-dropdown__list { max-height: 230px; overflow-y: auto; }

.ta-dropdown__option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: .85rem;
    color: var(--ta-label-color);
    cursor: pointer;
    transition: background .1s;
}

.ta-dropdown__option:hover   { background: var(--ta-surface-hover); }
.ta-dropdown__option--active { background: var(--ta-surface-soft); color: var(--ta-primary); font-weight: 600; }

.ta-dropdown__empty { padding: 14px; color: #9ca3af; font-size: .82rem; text-align: center; }


/* ═══════════════════════════════════════════════════════════════════════
   FÄRGVÄLJARE FÖR LEKTIONER -- 10 standardfärger istället för fri RGB-väljare
   ═══════════════════════════════════════════════════════════════════════ */

.ta-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
}

.ta-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .75rem;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    transition: transform .1s ease, box-shadow .1s ease;
}

.ta-color-swatch:hover { transform: scale(1.12); }

.ta-color-swatch--active {
    box-shadow: 0 0 0 2px var(--ta-surface), 0 0 0 4px var(--ta-text);
}

/* "Egen färg" -- a <label> wrapping a hidden native <input type="color">.
   Clicking the circle opens the browser/OS colour wheel directly; we never
   render or ask for a hex/RGB code ourselves. */
.ta-color-swatch--custom {
    position: relative;
    overflow: hidden;
    background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444);
    text-shadow: 0 0 3px rgba(0,0,0,.45);
}

.ta-color-swatch__native-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════
   VECKOKALENDER -- RAMTID-BAND OCH NU-STRECK
   Delade av Kalender-fliken (Planner.razor) och "Min dag" (Home.razor) --
   var och en hade tidigare en egen, ordagrant identisk kopia av de här
   reglerna i sitt eget inline <style>-block.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ramtid (working-hours framework) background band.
   Purely visual: sits behind hour-lines/lessons and never intercepts clicks.
   Flat, neutral tint -- deliberately not a diagonal stripe, which reads as
   "disabled"/unavailable time rather than "this is when your workday runs". */
.tg-ramtid-band {
    position: absolute;
    left: 0; right: 0;
    background: rgba(100, 116, 139, 0.06);
    border-top: 1px dashed var(--ta-border-strong);
    border-bottom: 1px dashed var(--ta-border-strong);
    pointer-events: none;
    z-index: 1;
}

/* Ramtid start/end labels -- anchored to the same top/bottom edges as the
   band above, so they always line up exactly with the border. Right-aligned
   and raised above the normal lesson layer (but below hover/selected) so the
   time stays legible even when a lesson block sits on top of the band --
   lesson content itself is left-aligned, so the right edge stays clear. */
.tg-ramtid-mark {
    position: absolute;
    right: 4px;
    max-width: calc(100% - 8px);
    pointer-events: none;
    z-index: 3;
    line-height: 1;
}

/* start: sits ABOVE the ramtid-start line (bottom edge touches it);
   end: sits BELOW the ramtid-end line (top edge touches it) -- keeps both
   labels outside the band instead of crowding inward on top of lessons. */
.tg-ramtid-mark--start { transform: translateY(-100%) translateY(-3px); }
.tg-ramtid-mark--end   { transform: translateY(3px); }

.tg-ramtid-mark__label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .62rem;
    font-weight: 600;
    color: #475569;
    background: rgba(255,255,255,.92);
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Current-time indicator */
.tg-now-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #ef4444;
    z-index: 5;
    pointer-events: none;
}

.tg-now-dot {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ef4444;
}


/* ═══════════════════════════════════════════════════════════════════════
   KLASSRUMSDESIGNER
   ═══════════════════════════════════════════════════════════════════════ */

/* Tab heading strip */
.classroom-tab-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--ta-border);
    font-size: .95rem;
}

/* ── Room Editor ── */
.room-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.room-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border);
    border-radius: 10px;
    padding: 10px 14px;
}

.room-editor__body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.room-editor__canvas-wrap {
    overflow: auto;
    /* Mörk varm bakgrund = "utsidan av rummet" syns tydligare */
    background: #9e9488;
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    flex: 1;
    min-width: 0;
    cursor: crosshair;
    user-select: none;
}

/* ── SVG-rutnät ── */
.room-grid { display: block; }

/* Inaktiva celler = väggar/utanför rummet — varm grå-brun */
.grid-cell {
    fill: #c4bab0;
    stroke: none;
    transition: fill .07s;
}

/* Aktiva celler = golvet — varm beige, som linoleum */
.grid-cell--active         { fill: #f5efdf; }
.grid-cell:hover           { fill: #a8a098; cursor: pointer; }
.grid-cell--active:hover   { fill: #e8dfc8; }

/* Rutnätslinjer: synliga i ritläge, nästan osynliga i möbelläge */
.grid-line {
    stroke: rgba(0,0,0,.10);
    stroke-width: 1;
    pointer-events: none;
}
.room-grid--furniture .grid-line {
    stroke: rgba(0,0,0,.04);
}

/* Möbelskugga — ger djup mot golvet */
.desk-group {
    cursor: pointer;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,.22));
}
.desk-group--selected rect,
.desk-group--selected ellipse { stroke: var(--ta-primary-mid) !important; stroke-width: 2 !important; }

/* ── Bänkpalett ── */
.desk-palette {
    width: 160px;
    flex-shrink: 0;
    background: var(--ta-surface);
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    padding: 14px 12px;
}

.desk-palette__heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ta-hint-text);
    margin-bottom: 10px;
}

.desk-palette__mode-badge {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(37,99,235,0.15);
    color: #2563eb;
    border-radius: 4px;
    padding: 1px 5px;
}

.desk-palette__item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-size: .82rem;
    color: var(--ta-label-color);
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s;
    margin-bottom: 4px;
}
.desk-palette__item:hover {
    background: var(--ta-surface-hover);
    border-color: var(--ta-border-accent);
}
.desk-palette__item--active {
    background: var(--ta-primary) !important;
    color: var(--ta-cream) !important;
    border-color: var(--ta-primary) !important;
}
.desk-palette__item--danger {
    color: #b91c1c;
}
.desk-palette__item--danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.desk-palette__seats { padding-top: 8px; border-top: 1px solid var(--ta-border); }


/* ═══════════════════════════════════════════════════════════════════════
   ELEVHANTERARE
   ═══════════════════════════════════════════════════════════════════════ */

.student-manager { max-width: 520px; }

.student-manager__header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: .9rem;
    color: var(--ta-primary);
}

.student-manager__add {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.student-manager__bulk summary { font-size: .82rem; }

.student-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 480px;
    overflow-y: auto;
}

.student-list__empty {
    color: #9ca3af;
    font-size: .85rem;
    padding: 16px 0;
    text-align: center;
}

.student-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    font-size: .85rem;
}
.student-item--absent {
    opacity: .55;
    background: #f9f9f9;
    text-decoration: line-through;
}

.student-item__name {
    flex: 1;
    color: var(--ta-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-item__btn {
    padding: 3px 6px;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: #9ca3af;
    cursor: pointer;
    font-size: .85rem;
    transition: color .12s, background .12s;
    flex-shrink: 0;
}
.student-item__btn:hover          { color: var(--ta-label-color); background: #f3f4f6; }
.student-item__btn.active         { color: var(--ta-primary); }
.student-item__btn.active.absent  { color: #d97706; }
.student-item__btn--delete:hover  { color: #ef4444; background: #fef2f2; }

.student-manager__legend {
    display: flex;
    gap: 16px;
    font-size: .76rem;
    color: var(--ta-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   SITTPLANESTAVLA (SeatingBoard)
   ═══════════════════════════════════════════════════════════════════════ */

.seating-board {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.seating-board__panel {
    width: 400px;
    flex-shrink: 0;
    background: var(--ta-surface);
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    padding: 14px 12px;
}

.seating-board__section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ta-hint-text);
    margin-bottom: 8px;
}

.seating-board__student-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 400px;
    overflow-y: auto;
}

.seating-board__canvas-wrap {
    flex: 1;
    overflow: auto;
    background: #f8f9fa;
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    min-height: 300px;
}

.seating-board__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #9ca3af;
    text-align: center;
    padding: 24px;
}

.seating-student {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: .8rem;
    cursor: pointer;
    transition: background .1s;
    color: var(--ta-label-color);
    border: 1.5px solid transparent;
}
.seating-student:hover { background: var(--ta-surface-hover); }
.seating-student--selected {
    background: var(--ta-primary) !important;
    color: var(--ta-cream) !important;
    border-color: var(--ta-primary);
}
.seating-student--seated  { color: #9ca3af; }
.seating-student--locked  { opacity: .7; }
.seating-student--absent  { opacity: .45; pointer-events: none; }

.seating-student__name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════════════════════════════
   KODGENERATOR
   ═══════════════════════════════════════════════════════════════════════ */

.code-generator {
    background: var(--ta-surface-soft);
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    padding: 14px 16px;
}

.code-generator__title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ta-hint-text);
    margin-bottom: 10px;
}

.code-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 2px;
}

.code-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--ta-surface);
    border: 1.5px solid var(--ta-border);
    border-radius: 8px;
    padding: 4px 6px 4px 8px;
    font-family: monospace;
    transition: border-color .12s, opacity .12s;
}

.code-badge--absent { opacity: .45; border-style: dashed; }

.code-badge--locked {
    border-color: var(--ta-primary);
    background: var(--ta-surface-soft);
}

.code-badge__label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ta-primary);
    letter-spacing: .03em;
    min-width: 24px;
}

.code-badge__btn {
    padding: 1px 3px;
    border: none;
    background: transparent;
    color: #c0c8c4;
    cursor: pointer;
    font-size: .75rem;
    border-radius: 4px;
    line-height: 1;
    transition: color .1s, background .1s;
    flex-shrink: 0;
}
.code-badge__btn:hover                       { color: var(--ta-label-color); background: #f0f0f0; }
.code-badge--locked .code-badge__btn:first-of-type { color: var(--ta-primary); }
.code-badge__btn--remove:hover               { color: #ef4444; background: #fef2f2; }


/* ═══════════════════════════════════════════════════════════════════════
   REGELHANTERARE (RuleManager)
   ═══════════════════════════════════════════════════════════════════════ */

/* Panel tab switcher */
.seating-panel-tabs {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px;
}

.seating-panel-tab {
    flex: 1;
    padding: 5px 8px;
    font-size: .78rem;
    font-weight: 600;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ta-hint-text);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.seating-panel-tab:hover       { background: #e5e7eb; color: var(--ta-primary); }
.seating-panel-tab--active {
    background: var(--ta-primary);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.rule-manager { padding: 0; }

/* Lägg-till-regelformulär */
.rule-form {
    background: var(--ta-surface-soft);
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    padding: 14px 16px;
}

.rule-form__title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ta-hint-text);
    margin-bottom: 10px;
}

.rule-form__row   { display: flex; flex-direction: column; gap: 8px; }
.rule-form__field { display: flex; flex-direction: column; }
.rule-form__select { font-family: monospace; font-weight: 700; font-size: .82rem; }

/* Regellista */
.rule-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
}

.rule-list__empty {
    font-size: .82rem;
    color: var(--ta-hint-text);
    padding: 10px 4px;
    font-style: italic;
}

/* Enskild regelrad */
.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--ta-surface);
    border: 1.5px solid var(--ta-border);
    border-radius: 8px;
    padding: 7px 8px;
    font-size: .80rem;
    line-height: 1.4;
    transition: border-color .12s;
}
.rule-item:hover { border-color: #9ca3af; }

.rule-item--info { background: #eff6ff; border-color: #bfdbfe; }

.rule-item__icon   { flex-shrink: 0; margin-top: 1px; font-size: .85rem; }
.rule-item__text   { flex: 1; color: var(--ta-label-color); word-break: break-word; }

.rule-item__delete {
    flex-shrink: 0;
    padding: 1px 5px;
    border: none;
    background: transparent;
    color: #c0c8c4;
    cursor: pointer;
    font-size: .75rem;
    border-radius: 4px;
    line-height: 1.6;
    transition: color .1s, background .1s;
}
.rule-item__delete:hover { color: #ef4444; background: #fef2f2; }

/* Statusrad (byt-tips) */
.seating-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 12px;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: 8px;
    font-size: .80rem;
    color: #92400e;
    max-width: max-content;
}

.seating-status-bar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f97316;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(249,115,22,.25);
}

.seating-status-bar__cancel {
    margin-left: auto;
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: #c2410c;
    cursor: pointer;
    border-radius: 4px;
    font-size: .75rem;
    transition: background .1s;
}
.seating-status-bar__cancel:hover { background: #fed7aa; }


/* ═══════════════════════════════════════════════════════════════════════
   KLASS- OCH PLANVÄLJARE (ClassroomDesigner sidebar)
   ═══════════════════════════════════════════════════════════════════════ */

.class-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.class-selector__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ta-cream);
    margin-bottom: 2px;
}

.class-selector__select  { flex: 1; min-width: 0; }

.class-selector__add-btn {
    flex-shrink: 0;
    width: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-selector__new-form {
    background: var(--ta-surface-soft);
    border: 1.5px solid var(--ta-primary);
    border-radius: 8px;
    padding: 8px;
}

.class-selector__rename {
    font-size: .80rem;
    background: rgba(255,255,255,.6);
    border-color: var(--ta-border);
    color: var(--ta-text);
}
.class-selector__rename:focus {
    background: var(--ta-surface);
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 2px var(--ta-primary-glow);
}

/* ── Klass/plan-accordion i ClassroomDesigner-sidopanelen ───────────────────── */

/* Tomt tillstånd — inga klasser */
.cd-accordion__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem .5rem;
    color: rgba(255,255,255,.7);
}

/* Scrollbar nav-lista */
.cd-accordion {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 40vh;
    margin: 0 -4px;         /* kompenserar padding på sidebar */
}

/* ── Klassrad ── */
.cd-accordion__class {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    transition: background .15s;
    user-select: none;
}

.cd-accordion__class:hover {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.95);
}

.cd-accordion__class--active {
    color: #fff;
}

.cd-accordion__chevron {
    font-size: 0.7rem;
    flex-shrink: 0;
    opacity: .7;
    transition: transform .15s;
}

.cd-accordion__class-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
}

/* Litet elevantal-badge */
.cd-accordion__class-count {
    font-size: .68rem;
    font-weight: 400;
    opacity: .55;
    flex-shrink: 0;
}

/* ── Planrad (indenterad) ── */
.cd-accordion__plans {
    padding-left: 18px;
    padding-bottom: 4px;
}

.cd-accordion__plan {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: .78rem;
    color: rgba(255,255,255,.65);
    transition: background .15s, color .15s;
    user-select: none;
}

.cd-accordion__plan:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.9);
}

.cd-accordion__plan--active {
    background: rgba(255,255,255,.13);
    color: #fff;
    font-weight: 600;
}

.cd-accordion__plan-icon {
    font-size: .7rem;
    opacity: .5;
    flex-shrink: 0;
}

.cd-accordion__plan-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── "Ny placering"-knapp ── */
.cd-accordion__add-plan {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 5px;
    background: transparent;
    font-size: .75rem;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    transition: color .15s, background .15s;
    text-align: left;
}

.cd-accordion__add-plan:hover {
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.06);
}

/* ── Ny placering-formulär ── */
.cd-accordion__new-plan {
    padding: 4px 4px 6px;
}

/* ── "Hantera klasser"-länk ── */
.cd-accordion__manage-link {
    display: block;
    font-size: .73rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    padding: 2px 4px;
    transition: color .15s;
}

.cd-accordion__manage-link:hover {
    color: rgba(255,255,255,.85);
    text-decoration: none;
}

.classroom-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    color: var(--ta-hint-text);
    padding: 2rem;
}

/* Sparade regeluppsättningar */
.saved-rule-sets {
    background: rgba(255,255,255,.55);
    border: 1.5px solid var(--ta-border);
    border-radius: 8px;
    padding: 12px 14px;
}

.saved-rule-sets__heading {
    font-size: .80rem;
    font-weight: 600;
    color: var(--ta-primary);
    letter-spacing: .01em;
}

/* ── Statusrad i sidopanelen ──────────────────────────────────────────────── */
.ta-status-bar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .75rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ta-status-bar span {
    display: flex;
    align-items: center;
}

/* Diskret autosave-text på mörk bakgrund — reserverar plats, tonar in/ut */
.ta-autosave-msg {
    text-align: center;
    font-size: .75rem;
    padding: 6px 0 4px;
    color: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transition: opacity .3s ease;
}

.ta-autosave-msg--visible {
    opacity: 1;
}

/* ── Arbetsflödesguide (tre steg) ─────────────────────────────────────────── */
.workflow-guide {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.7);
    border: 1.5px solid var(--ta-border);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: .83rem;
    flex-wrap: wrap;
}

.workflow-guide__step {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ta-hint-text);
}

.workflow-guide__step.active {
    color: var(--ta-primary);
    font-weight: 600;
}

.workflow-guide__step.done {
    color: var(--ta-hint-text);
}

.workflow-guide__icon {
    font-size: 1rem;
    line-height: 1;
}

.workflow-guide__arrow {
    color: var(--ta-border);
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Elevlista i Elever-fliken (läsläge) ──────────────────────────────────── */
.student-roster {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
}

.student-roster__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--ta-surface);
    border: 1.5px solid var(--ta-border);
    border-radius: 8px;
    transition: opacity .15s;
}

.student-roster__row.absent {
    opacity: .45;
    text-decoration: line-through;
}

.student-roster__name {
    font-size: .9rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── ConfirmDialog (Components/Shared/ConfirmDialog.razor) ──────────────
   Reusable confirmation modal, 2026-09-01. z-index sits above the
   .loading-overlay above (9999) so a confirmation is never hidden behind
   it even if both happen to be visible at once. */
.ta-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 10000;
}

.ta-confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    background: #fff;
    border-radius: .6rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    padding: 1.25rem 1.5rem;
    width: min(420px, calc(100vw - 2rem));
}

.ta-confirm-dialog__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.ta-confirm-dialog__icon--danger {
    color: #ef4444;
    font-size: 1.25rem;
}

.ta-confirm-dialog__icon--info {
    color: #3b82f6;
    font-size: 1.25rem;
}

.ta-confirm-dialog__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.ta-confirm-dialog__message {
    font-size: .9rem;
    color: #4b5563;
    margin: 0 0 1rem 0;
    white-space: pre-line;
}

.ta-confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}