/* 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 {
    /* ── Primärfärg (mörk marinblå) ────────────────────────── */
    --ta-primary:           #1e3a5f;   /* Navbar, sidebar, knappar           */
    --ta-primary-mid:       #2e5899;   /* Hover-tillstånd                    */
    --ta-primary-dark:      #162d4a;   /* Active/pressed-tillstånd           */
    --ta-primary-accent:    #93c5fd;   /* Ljus accenttext på mörk bakgrund   */
    --ta-primary-glow:      rgba(30, 58, 95, 0.14);  /* Soft fokus-ring      */

    /* ── Bakgrunder & ytor ─────────────────────────────────── */
    --ta-cream:             #fffbf5;   /* Varm krembakgrund (body)           */
    --ta-cream-rgb:         255, 251, 245;
    --ta-surface:           #ffffff;
    --ta-surface-soft:      #f0f7ff;   /* Ljusblå yta — chip, historik, formpanel */
    --ta-surface-hover:     #eff6ff;   /* Hover-bakgrund i listor & menyer   */

    /* ── Gränser ────────────────────────────────────────────── */
    --ta-border:            #e2e8f0;   /* Neutral grå — generell kant        */
    --ta-border-accent:     #dbeafe;   /* Ljusblå 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-cream);

    /* ── 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:       30, 58, 95;
    --bs-link-color:        var(--ta-primary);
    --bs-link-color-rgb:    30, 58, 95;
    --bs-link-hover-color:  var(--ta-primary-mid);
    --bs-body-bg:           var(--ta-cream);
    --bs-body-bg-rgb:       255, 251, 245;
    --bs-light-rgb:         255, 251, 245;
}

/* ── 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:           #2d4a7a;
    --bs-btn-disabled-border-color: #2d4a7a;
}

/* ── 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);
    font-weight: 700;
    letter-spacing: .02em;
}
    .navbar-dark.bg-primary .navbar-brand:hover,
    nav.navbar.bg-primary .navbar-brand:hover {
        color: var(--ta-primary-accent);
    }

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

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

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

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


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