/* ===== Design Tokens (from new design) ===== */
:root {
    --bg: hsl(40, 20%, 98%);
    --fg: hsl(220, 20%, 12%);
    --card: hsl(40, 15%, 96%);
    --card-fg: hsl(220, 20%, 12%);
    /* Primary accent: blue (matches \"Boka direkt\" button) */
    --primary: hsl(217, 90%, 55%);
    --primary-fg: #fff;
    --secondary: hsl(40, 15%, 92%);
    --secondary-fg: hsl(220, 20%, 12%);
    --muted-fg: hsl(220, 10%, 50%);
    --border: hsl(40, 15%, 88%);
    --grid-line: hsl(40, 15%, 78%);
    --time-col: hsl(40, 10%, 55%);
    /* Light blue tints for hover/filled states */
    --slot-hover: hsl(217, 100%, 96%);
    --slot-filled: hsl(217, 100%, 93%);
    --destructive: hsl(0, 72%, 55%);
    --surface: #fff;
    --table-header-bg: #1B2A4E;
    --table-header-fg: #fff;
    /* Booked rows: blue instead of green */
    --booked-bg: #0066ff;
    --booked-accent: #0052cc;
    --booked-new-bg: #42a5f5;
    --booked-new-accent: #3994e4;
    --booked-toggle-on: #0066ff;
    --booked-new-toggle-on: #243761;
    --radius: 0.5rem;
    --font-sans: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: #fff;
}
body {
    font-family: var(--font-sans);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

/* Skalning: 85% på desktop, 100% på mobil */
@media (min-width: 769px) {
    html { font-size: 85%; }
}

/* Mobil: förhindra oavsiktlig zoom utan att begränsa tillgänglighet */
@media (max-width: 768px) {
    html {
        touch-action: manipulation;
        overflow-x: hidden;
    }
    body { overflow-x: hidden; }
    input, textarea:not(.time-content), select {
        font-size: 16px !important;
    }
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.btn-outline {
    background: var(--card);
    color: var(--fg);
}
.btn-outline:hover { background: var(--secondary); }

.btn-primary {
    background: var(--primary);
    color: var(--primary-fg);
    border-color: var(--primary);
}
.btn-primary:hover { opacity: 0.9; }

.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}
.btn-outline-primary:hover {
    background: hsla(217, 90%, 55%, 0.08);
    border-color: hsl(217, 90%, 48%);
    color: hsl(217, 90%, 48%);
}

.btn-icon {
    background: var(--card);
    color: var(--fg);
    padding: 0.5rem;
    line-height: 0;
}
.btn-icon:hover { background: var(--secondary); }

.btn-logout {
    background: transparent;
    color: var(--destructive);
    border-color: var(--destructive);
    padding-inline: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-logout:hover { background: hsl(0, 72%, 96%); }

/* Legacy .nav-button kept for profiles/times pages */
.nav-button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--fg);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.15s;
    font-family: var(--font-sans);
}
.nav-button:hover { background: var(--secondary); }

/* ===== Sidebar (always visible, content shifts right) ===== */
.sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;
    max-height: 100dvh;
    background: #fff;
    z-index: 1000;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-trigger {
    display: none;
}

.sidebar {
    width: 100%;
    height: 100%;
    background: transparent;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-header {
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--primary-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sidebar-brand-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg);
}

.sidebar-brand-subtitle {
    font-size: 0.75rem;
    color: var(--muted-fg);
}

.teacher-buttons, .student-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 1rem;
    margin-bottom: 1.25rem;
}
.teacher-buttons h2, .student-buttons h2 {
    color: var(--muted-fg);
    margin: 0.75rem 0 0.25rem;
    font-size: 0.825rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0;
    border-bottom: none;
}

.sidebar-button {
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: transparent;
    color: var(--fg);
    border: none;
    border-radius: 0.75rem;
    font-size: 0.935rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    font-family: var(--font-sans);
}
.sidebar-button:hover {
    background: var(--slot-hover);
    color: var(--primary);
    box-shadow: 0 0 0 1px hsla(217, 90%, 55%, 0.18);
}
.sidebar-button.active {
    color: var(--primary);
    font-weight: 600;
    border-bottom: 2px solid var(--primary);
    border-radius: 0;
    background: transparent;
}
.sidebar-button.active:hover {
    background: var(--slot-hover);
}

.sidebar-button::before {
    content: '';
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.teacher-button::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.student-button::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E");
}

/* Specific sidebar icons */
#homeButton::before { /* Hem: home icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}
#studentProfilesButton::before { /* Elever: people icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V20h6v-2.5c0-0.85 0.33-1.65 0.93-2.25C8.53 14.33 9.33 14 10.18 14H8zm8 0c-1.54 0-4.5 0.77-4.5 2.25V20h9v-1.75C20.5 14.77 17.54 14 16 14z'/%3E%3C/svg%3E");
}

#studentTimesButton::before { /* Tillgänglighet: calendar/clock icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 6H5v10h14V8zm-6 2v4h4v-2h-2v-2h-2z'/%3E%3C/svg%3E");
}

#settingsButton::before { /* Inställningar: gear icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.027 7.027 0 0 0-1.63-.94l-.36-2.54A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42l-.36 2.54c-.6.24-1.15.55-1.66.92l-2.39-.96a.5.5 0 0 0-.61.22L2.96 8.4a.5.5 0 0 0 .12.64l2.03 1.58c-.04.31-.06.64-.06.98 0 .3.02.6.06.9l-2.03 1.6a.5.5 0 0 0-.12.64l1.92 3.32c.13.22.39.3.61.22l2.39-.96c.5.37 1.06.68 1.66.92l.36 2.54c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.36-2.54c.6-.24 1.15-.55 1.66-.92l2.39.96c.23.09.48 0 .61-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.6zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5z'/%3E%3C/svg%3E");
}

#teacherArchiveButton::before { /* Lärar arkiv: archive box icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v4H3V3zm2 6h14v12H5V9zm4 2v2h6v-2H9z'/%3E%3C/svg%3E");
}

.sidebar-bottom {
    margin-top: auto;
}

.sidebar-logout {
    padding: 0 1rem 0.7rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
}

.sidebar-footer {
    padding: 1rem 1rem 1rem;
    text-align: center;
    border-top: 1px solid var(--border);
}
.footer-logo { max-width: 80px; height: auto; margin-bottom: 0.5rem; }
.copyright-text { font-size: 0.75rem; color: var(--muted-fg); line-height: 1.4; }

.sidebar-toggle, .overlay { display: none; }

/* Subadmin: desktop collapse sidebar (triggered from top bars) */
body.subadmin-sidebar-collapsed:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) .sidebar-wrapper {
    transform: translateX(-100%);
    box-shadow: none;
}
body.subadmin-sidebar-collapsed:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) .container,
body.subadmin-sidebar-collapsed:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #scheduleContainer {
    margin-left: 0;
}

/* Mobile: collapsible sidebar */
@media (max-width: 768px) {
    /* Ingen ::before/::after här: de låg över overlay (z-index 9999) och gav vita band + konstig dim vid kanterna. */

    .sidebar-wrapper {
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
        z-index: 2000;
        pointer-events: none;
        /* dvh fallback, sedan lvh (bättre mot Safari-verktygsfält) */
        height: 100dvh;
        height: 100lvh;
        min-height: 100dvh;
        max-height: none;
    }
    .sidebar-wrapper.sidebar-open {
        transform: translate3d(0, 0, 0);
        z-index: 12000;
        pointer-events: auto;
        border-radius: 0 1.125rem 1.125rem 0;
        overflow: hidden;
        box-shadow:
            6px 0 28px rgba(15, 23, 42, 0.1),
            2px 0 12px rgba(15, 23, 42, 0.06);
        /* Med viewport-fit=cover: håll innehåll under statusrad; panelen fyller fortfarande höjd (border-box) */
        padding-top: env(safe-area-inset-top, 0px);
    }
    .sidebar-wrapper.sidebar-open .sidebar {
        border-right: none;
    }
    .teacher-buttons,
    .student-buttons {
        margin-bottom: 0.5rem;
    }
    .teacher-buttons h2,
    .student-buttons h2 {
        margin: 0.35rem 0 0.1rem;
    }
    /* Överstyr desktop-collapsed (högre specificitet) så menyn faktiskt kan öppnas på mobil */
    body.subadmin-sidebar-collapsed:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) .sidebar-wrapper.sidebar-open {
        transform: translate3d(0, 0, 0);
    }
    /* Subadmin hamburger is already styled globally above */
    /* Osynlig scrim: alfa > 0 (minimal) + translateZ — undviker vit lucka. Aktiv: backdrop-blur (lätt frostat glas), nästan ingen dim. */
    .overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        /* Fyll skärmen vertikalt även när dvh krymper (Safari); lvh = största viewport-höjden */
        height: 100dvh;
        height: 100lvh;
        min-height: 100dvh;
        right: auto;
        bottom: auto;
        background: rgba(0, 0, 0, 0.007);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 11900;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-backdrop-filter 0.22s ease, backdrop-filter 0.22s ease;
    }
    .overlay.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    /* Bakgrundsscroll låses via position:fixed i JS (lockAppDrawerBackgroundScroll) — undviker vit glipa med overflow:hidden på body */
    .container,
    #scheduleContainer,
    #profilesContainer,
    #timesContainer,
    #settingsContainer,
    #teacherArchiveContainer {
        margin-left: 0 !important;
        width: 100% !important;
    }
    #scheduleContainer .schedule-header {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem 0.35rem;
        padding-left: 0;
    }
    body:not(.teacher-mode) #scheduleContainer .schedule-subadmin-menu-toggle {
        display: inline-flex;
        order: 0;
        align-self: center;
    }
    body:not(.teacher-mode) #scheduleContainer .schedule-header .header-left {
        order: 1;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-start;
    }
    #scheduleContainer .schedule-header .header-teacher-name-inline {
        display: inline;
        margin-left: 0.25rem;
    }
    #scheduleContainer .schedule-header .header-center {
        display: none;
    }
    #scheduleContainer .schedule-header .header-right {
        order: 3;
        flex-basis: 100%;
        width: 100%;
        margin-left: 0;
    }
}

/* ===== Main Container ===== */
.container {
    max-width: 1400px;
    margin-left: 280px;
    margin-right: auto;
    padding: 1.5rem 2rem;
    background: transparent;
}

/* Subadmin content pages: soft off-white page background behind cards */
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #profilesContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #timesContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #studentArchiveContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #settingsContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #teacherArchiveContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #smsContainer {
    background: hsl(217, 30%, 97%);
    min-height: 100vh;
}

/* Subadmin pages with topbar: remove extra top padding so topbar sits flush */
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #timesContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #studentArchiveContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #settingsContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #teacherArchiveContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #smsContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #helpContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #adminHelpContainer,
body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #lessonCountContainer {
    padding-top: 0;
}

/* Schedule container: fill viewport, offset by sidebar */
#scheduleContainer {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    margin-left: 280px;
    margin-right: 0;
    padding: 1rem 2rem;
    overflow: hidden;
}

/* ===== Full Admin Stats Dashboard (modern) ===== */
#fullAdminStatsPanel {
    background: linear-gradient(180deg, hsl(217, 30%, 98%) 0%, hsl(217, 20%, 99%) 100%);
    border-radius: 12px;
    padding: 0.25rem 0.5rem 1rem;
    box-sizing: border-box;
}

.stats-page-top {
    margin-bottom: 1.35rem;
}
.stats-page-sub {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.45;
    max-width: 36rem;
}
.stats-week-nav-sub {
    flex: 1 1 12rem;
    min-width: min(100%, 14rem);
    max-width: 28rem;
    align-self: center;
    padding-right: 0.5rem;
}
.stats-week-nav-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.stats-kpi-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 1.1rem 1rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 6.5rem;
    box-sizing: border-box;
}
.stats-kpi-card-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #2563eb;
    display: flex;
    opacity: 0.95;
}
.stats-kpi-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding-right: 2rem;
}
.stats-kpi-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}
.stats-kpi-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.stats-kpi-hint {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}

.stats-chart-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 1.25rem 1.35rem 1.35rem;
    margin-bottom: 1.35rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: visible;
}
.stats-chart-inner {
    overflow: visible;
}
.stats-chart-card-head {
    margin-bottom: 1rem;
}
.stats-chart-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
.stats-chart-sub {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}
.stats-bar-chart {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    min-height: 200px;
    padding-top: 2.5rem;
    margin-top: -0.25rem;
}
.stats-bar-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0.35rem 1.5rem 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
}
.stats-bar-chart-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.55rem;
    min-height: 168px;
    padding: 0 0.25rem 0 0.5rem;
    border-left: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(20% - 1px),
        rgba(203, 213, 225, 0.45) calc(20% - 1px),
        rgba(203, 213, 225, 0.45) 20%
    );
    border-radius: 0 0 4px 0;
}
.stats-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
    max-width: 4.5rem;
    position: relative;
    z-index: 1;
}
.stats-bar-col:hover,
.stats-bar-col:focus-within {
    z-index: 4;
    outline: none;
}
.stats-bar-hit {
    position: relative;
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.stats-bar-highlight {
    position: absolute;
    left: 17.5%;
    right: 17.5%;
    top: 0;
    bottom: 0;
    border-radius: 10px;
    background: #e5e7eb;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 0;
}
.stats-bar-col:hover .stats-bar-highlight,
.stats-bar-col:focus-within .stats-bar-highlight {
    opacity: 1;
}
.stats-bar-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 0.35rem;
    transform: translateX(-50%) translateY(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 5;
    background: #fff;
    border-radius: 10px;
    padding: 0.4rem 0.625rem;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.11), 0 0 1px rgba(15, 23, 42, 0.07);
    border: 1px solid #e5e7eb;
    text-align: center;
    white-space: nowrap;
}
.stats-bar-col:hover .stats-bar-tooltip,
.stats-bar-col:focus-within .stats-bar-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.stats-bar-tooltip-day {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}
.stats-bar-tooltip-lessons {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2563eb;
    margin-top: 0.15rem;
    line-height: 1.2;
}
.stats-bar-track {
    position: relative;
    z-index: 1;
    width: 45%;
    max-width: none;
    min-width: 0.6rem;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}
.stats-bar-fill {
    width: 100%;
    border-radius: 8px 8px 4px 4px;
    background: #2563eb;
    min-height: 0;
    transition: height 0.2s ease;
}
.stats-bar-xlabel {
    margin-top: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

.stats-schools-list {
    width: 100%;
}

/* Week / date navigation bar */
.stats-week-nav {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid hsl(217, 25%, 92%);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.stats-week-nav .btn-icon {
    border-radius: 12px;
    background: #fff;
    border: 1px solid hsl(217, 25%, 90%);
    color: var(--primary);
}
.stats-week-nav .btn-icon:hover {
    background: hsl(217, 90%, 97%);
    border-color: hsl(217, 90%, 75%);
}
.stats-week-nav .header-week-picker {
    border-radius: 12px;
    font-weight: 600;
    min-width: 5rem;
    background: #fff;
    border: 1px solid hsl(217, 25%, 90%);
}
.stats-week-nav .header-week-picker:hover {
    background: hsl(217, 90%, 98%);
    border-color: hsl(217, 90%, 80%);
}
.stats-week-nav-controls #statsResetWeek {
    margin-left: auto;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    background: #fff;
    border: 1px solid hsl(217, 25%, 90%);
}
.stats-week-nav-controls #statsResetWeek:hover {
    background: hsl(217, 90%, 97%);
    border-color: hsl(217, 90%, 75%);
}

.stats-week-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg);
    min-width: 10rem;
    text-align: center;
}

/* School cards — neutral ram + blå vänsterkant (2px ihopfälld, 3px utfälld) */
.stats-school-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    border-left: 2px solid var(--primary);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.2s ease, border-left-width 0.2s ease, transform 0.2s ease;
}
.stats-school-card:hover:not(.expanded) {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    border-top-color: #d1d5db;
    border-right-color: #d1d5db;
    border-bottom-color: #d1d5db;
    border-left: 2px solid var(--primary);
}
.stats-school-card.expanded {
    border-top-color: #e5e7eb;
    border-right-color: #e5e7eb;
    border-bottom-color: #e5e7eb;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--primary);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
.stats-school-card.expanded:hover {
    border-top-color: #d1d5db;
    border-right-color: #d1d5db;
    border-bottom-color: #d1d5db;
    border-left-width: 3px;
    border-left-color: var(--primary);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

.stats-school-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    user-select: none;
    gap: 1.25rem;
    transition: background 0.2s ease;
    /* Klick/tangent ger annars blå system-outline runt hela kortet */
    outline: none;
}
.stats-school-header:hover {
    background: hsl(217, 50%, 99%);
}
.stats-school-card.expanded .stats-school-header {
    position: relative;
    background: linear-gradient(135deg, hsl(217, 90%, 99%) 0%, hsl(217, 60%, 98%) 100%);
    border-bottom: none;
}
/* Fullbreddsavdelare (header sitter innanför vänster 3px-stripe — flytta linjen så den når kortets kanter) */
.stats-school-card.expanded .stats-school-header::after {
    content: '';
    position: absolute;
    left: -3px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: hsl(217, 30%, 94%);
    pointer-events: none;
}

.stats-school-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}
.stats-school-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}
.stats-school-title-icon svg {
    display: block;
}
.stats-school-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.stats-summary-pills {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.stats-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border-radius: 9px;
    background: linear-gradient(180deg, hsl(217, 90%, 98%) 0%, hsl(217, 85%, 96%) 100%);
    border: 1px solid hsl(217, 90%, 90%);
    min-width: 3.75rem;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.stats-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.stats-pill-value {
    font-size: 1.0125rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.stats-pill-label {
    font-size: 0.525rem;
    font-weight: 600;
    color: var(--muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.1125rem;
}

.stats-school-toggle {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: hsl(217, 90%, 96%);
    color: var(--primary);
    font-size: 0.7rem;
    transition: transform 0.25s ease, background 0.2s ease;
    flex-shrink: 0;
}
.stats-school-header:hover .stats-school-toggle {
    background: hsl(217, 90%, 92%);
}
.stats-school-card.expanded .stats-school-toggle {
    transform: rotate(180deg);
    background: var(--primary);
    color: #fff;
}

.stats-teacher-section {
    display: none;
    padding: 1rem 1.5rem 1.5rem;
    background: hsl(217, 40%, 99%);
}
.stats-school-card.expanded .stats-teacher-section {
    display: block;
}

.stats-teacher-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid hsl(217, 25%, 92%);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
.stats-teacher-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: hsl(217, 30%, 97%);
    border-bottom: 2px solid hsl(217, 25%, 92%);
}
.stats-teacher-table thead th:first-child {
    padding-left: 1.25rem;
}
.stats-teacher-table tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid hsl(217, 20%, 95%);
    color: var(--fg);
}
.stats-teacher-table tbody td:first-child {
    padding-left: 1.25rem;
}
.stats-teacher-table tbody tr:last-child td {
    border-bottom: none;
}
.stats-teacher-table tbody tr:hover td {
    background: hsl(217, 60%, 99%);
}
.stats-teacher-table .stats-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    min-width: 3rem;
    font-size: 0.95rem;
    color: var(--primary);
}
.stats-teacher-table .stats-num--highlight {
    color: var(--primary);
}
.stats-teacher-table .teacher-name-cell {
    font-weight: 600;
    color: var(--primary);
}
.stats-teacher-table .teacher-name-cell-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.stats-teacher-table .teacher-name-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}
.stats-teacher-table .teacher-name-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.stats-loading {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--muted-fg);
    font-size: 1rem;
    font-weight: 500;
}

@media (max-width: 900px) {
    .stats-week-nav {
        flex-direction: column;
        align-items: stretch;
        /* Undvik vertikal spridning (space-between + flex-grow) som skapar “tomrum” mellan rubrik och knappar */
        justify-content: flex-start;
        gap: 0.65rem;
    }
    .stats-week-nav-sub {
        max-width: none;
        padding-right: 0;
        flex: 0 1 auto;
        align-self: stretch;
        text-align: center;
    }
    .stats-week-nav-controls {
        flex: 0 1 auto;
        justify-content: flex-start;
        /* En rad: ◀ vecka månad år ▶; Idag på egen rad (HTML-ordning) */
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 0.45rem 0.35rem;
        align-items: center;
    }
    .stats-week-nav-controls .week-picker-wrap,
    .stats-week-nav-controls .month-picker-wrap,
    .stats-week-nav-controls .year-picker-wrap {
        min-width: 0;
    }
    .stats-week-nav-controls .header-week-picker {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0.45rem 0.35rem;
        font-size: 0.75rem;
    }
    .stats-week-nav-controls .btn-icon {
        flex-shrink: 0;
    }
    .stats-week-nav-controls #statsResetWeek {
        grid-column: 1 / -1;
        margin-left: 0;
        width: 100%;
        justify-self: stretch;
    }
}
@media (max-width: 768px) {
    .stats-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Statistik skolkort: titel + vik-knapp på samma rad, pills under (inte pil på egen rad) */
    .stats-school-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 0.65rem;
        row-gap: 0.65rem;
        padding: 1rem 1.1rem;
    }
    .stats-school-title-wrap {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .stats-school-toggle {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }
    .stats-summary-pills {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-content: flex-start;
    }
    .stats-school-name {
        font-size: 1.05rem;
        line-height: 1.25;
        word-break: break-word;
    }
    #fullAdminStatsPanel .stats-school-card {
        overflow: visible;
    }
    #fullAdminStatsPanel .stats-teacher-section {
        padding: 0.75rem 0.85rem 1.1rem;
    }
    /* Lärarlista: kort per rad, inga horisontella tabellskroll */
    #fullAdminStatsPanel .stats-teacher-table {
        display: block;
        width: 100%;
        margin-top: 0.35rem;
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    #fullAdminStatsPanel .stats-teacher-table thead {
        display: none;
    }
    #fullAdminStatsPanel .stats-teacher-table tbody {
        display: block;
    }
    #fullAdminStatsPanel .stats-teacher-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid hsl(217, 25%, 92%);
        border-radius: 12px;
        margin-bottom: 0.65rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }
    #fullAdminStatsPanel .stats-teacher-table tbody tr:last-child {
        margin-bottom: 0;
    }
    #fullAdminStatsPanel .stats-teacher-table tbody td {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        padding: 0.55rem 0.85rem;
        border-bottom: 1px solid #f3f4f6;
        text-align: right !important;
    }
    #fullAdminStatsPanel .stats-teacher-table tbody td:last-child {
        border-bottom: none;
    }
    #fullAdminStatsPanel .stats-teacher-table tbody td::before {
        content: attr(data-label);
        flex: 0 1 38%;
        max-width: 9.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
        line-height: 1.35;
        text-align: left;
    }
    #fullAdminStatsPanel .stats-teacher-table tbody td > * {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        text-align: right;
    }
    #fullAdminStatsPanel .stats-teacher-table .teacher-name-cell .teacher-name-cell-inner {
        justify-content: flex-end;
        width: 100%;
    }
    #fullAdminStatsPanel .stats-teacher-table .stats-num {
        min-width: 0;
        font-size: 1rem;
    }
}
@media (max-width: 640px) {
    .stats-summary-grid {
        grid-template-columns: 1fr;
    }
    .stats-pill {
        min-width: 3rem;
        padding: 0.3rem 0.5625rem;
    }
    .stats-pill-value {
        font-size: 0.8625rem;
    }
    .stats-week-nav {
        padding: 0.75rem 1rem;
    }
}

/* ===== Teacher Help Page ===== */
.help-page-container {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}
/* Subadmin help topbar now uses .subadmin-dash-topbar */
#helpContainer .full-admin-collection-icon {
    color: var(--primary);
}
#helpContainer .full-admin-collection-icon svg {
    stroke: currentColor;
}
.help-page-content {
    flex: 1;
    padding: 0.5rem 0;
}
.help-page-section {
    margin-bottom: 1.5rem;
}
.help-page-section-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fg);
}
.help-page-section-text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted-fg);
    line-height: 1.5;
}
.help-page-section-text + .help-page-section-text { margin-top: 0.5rem; }
.help-page-section-text code {
    background: var(--secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.9em;
}
.admin-help-content { max-width: 52rem; }

/* Admin help hierarchy */
.admin-help-article { padding-bottom: 2rem; }
.admin-help-h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--fg);
    margin: 1.75rem 0 0.6rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
}
.admin-help-article .admin-help-h1:first-child { margin-top: 0; }
.admin-help-h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fg);
    margin: 1rem 0 0.35rem 0;
    padding-left: 0.5rem;
    border-left: 3px solid var(--primary);
}
.admin-help-p {
    margin: 0 0 0 0.5rem;
    font-size: 0.9375rem;
    color: var(--muted-fg);
    line-height: 1.55;
}
.admin-help-p + .admin-help-h2,
.admin-help-list + .admin-help-h2 { margin-top: 1rem; }
.admin-help-list {
    margin: 0.35rem 0 0 0.5rem;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted-fg);
    line-height: 1.55;
}
.admin-help-list li { margin-bottom: 0.35rem; }
.admin-help-list code {
    background: var(--secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.9em;
}
.admin-help-pre {
    margin: 0.35rem 0 0 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--secondary);
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.45;
    overflow-x: auto;
    color: var(--fg);
}
.admin-help-pre code { background: none; padding: 0; }

/* ===== Home / Onboarding (sub-admin) ===== */
.home-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 0 2.25rem 2.5rem;
    background: #ffffff;
}
#homeContainer .subadmin-dash-topbar {
    margin-left: -2.25rem;
    margin-right: -2.25rem;
    margin-bottom: 1.35rem;
}
#homeContainer .home-content {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}
#homeContainer .home-header {
    margin-bottom: 1.75rem;
}
#homeContainer .home-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}
#homeContainer .home-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #111827;
}
#homeContainer .home-subtitle-block {
    max-width: 40rem;
}
#homeContainer .home-subtitle-school {
    margin: 0 0 0.2rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--primary);
}
#homeContainer .home-subtitle {
    margin: 0;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6b7280;
}
#homeContainer .home-quick-booking-btn {
    flex-shrink: 0;
    gap: 0.45rem;
    padding: 0.7rem 1.1rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}
#homeContainer .home-quick-booking-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
#homeContainer .home-quick-booking-icon svg {
    width: 16px;
    height: 16px;
}
#homeContainer .home-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
#homeContainer .home-stat-card {
    padding: 1.25rem 1.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
#homeContainer .home-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
#homeContainer .home-stat-label {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: #6b7280;
}
#homeContainer .home-stat-value {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #2563eb;
}
#homeContainer .home-stat-subtitle {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.45;
}
#homeContainer .home-stat-subline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
#homeContainer .home-stat-subicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.04rem;
    height: 1.04rem;
    flex-shrink: 0;
    color: #2563eb;
}
#homeContainer .home-stat-subicon svg {
    width: 100%;
    height: 100%;
}
#homeContainer .home-stat-subline--down .home-stat-subicon {
    color: #dc2626;
}
#homeContainer .home-stat-subline--neutral .home-stat-subicon {
    color: #64748b;
}
#homeContainer .home-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    flex-shrink: 0;
}
#homeContainer .home-stat-icon svg {
    width: 17px;
    height: 17px;
}
#homeContainer .home-stat-icon--blue {
    background: #e8f1ff;
    color: #2563eb;
}
#homeContainer .home-stat-icon--green {
    background: #e8f1ff;
    color: #2563eb;
}
#homeContainer .home-stat-icon--purple {
    background: #e8f1ff;
    color: #2563eb;
}
#homeContainer .home-section {
    margin-bottom: 2rem;
}
#homeContainer .home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}
#homeContainer .home-section-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #111827;
}
#homeContainer .home-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
#homeContainer .home-action-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.95rem;
    width: 100%;
    padding: 1.2rem 1.1rem 1.15rem 1.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
#homeContainer .home-action-card:hover {
    transform: translateY(-1px);
    border-color: #d1d5db;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}
#homeContainer .home-action-card:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
#homeContainer .home-action-accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    border-radius: 18px 0 0 18px;
}
#homeContainer .home-action-card .home-action-accent { background: #3b82f6; }
#homeContainer .home-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    flex-shrink: 0;
}
#homeContainer .home-action-card .home-action-icon {
    background: #e8f1ff;
    color: #2563eb;
}
#homeContainer .home-action-icon svg {
    width: 20px;
    height: 20px;
}
#homeContainer .home-action-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
#homeContainer .home-action-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
#homeContainer .home-action-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6b7280;
}
#homeContainer .home-action-arrow {
    position: absolute;
    top: 1.05rem;
    right: 1.05rem;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
}
#homeContainer .home-action-arrow svg {
    width: 100%;
    height: 100%;
}
#homeContainer .home-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
#homeContainer .home-panel {
    padding: 1.25rem 1.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
#homeContainer .home-panel-head {
    margin-bottom: 0.9rem;
}
#homeContainer .home-panel-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}
#homeContainer .home-panel-subtitle {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6b7280;
}
#homeContainer .home-agenda-list,
#homeContainer .home-notice-list {
    display: flex;
    flex-direction: column;
    height: 250px;
    overflow-y: auto;
    padding-right: 0.25rem;
}
#homeContainer .home-agenda-list {
    gap: 0.75rem;
}
#homeContainer .home-agenda-list::-webkit-scrollbar,
#homeContainer .home-notice-list::-webkit-scrollbar {
    width: 8px;
}
#homeContainer .home-agenda-list::-webkit-scrollbar-thumb,
#homeContainer .home-notice-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}
#homeContainer .home-agenda-list::-webkit-scrollbar-track,
#homeContainer .home-notice-list::-webkit-scrollbar-track {
    background: transparent;
}
#homeContainer .home-notice-list {
    gap: 0.75rem;
}
#homeContainer .home-agenda-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1rem;
    background: #fafafa;
    border: 1px solid #f3f4f6;
    border-radius: 14px;
}
#homeContainer .home-agenda-time {
    min-width: 3.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #111827;
}
#homeContainer .home-agenda-main {
    min-width: 0;
}
#homeContainer .home-agenda-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#homeContainer .home-agenda-tags {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}
#homeContainer .home-agenda-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
#homeContainer .home-agenda-tag--teacher {
    background: #f3f4f6;
    color: #6b7280;
}
#homeContainer .home-agenda-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
#homeContainer .home-agenda-type--lesson {
    background: #eff6ff;
    color: #2563eb;
}
#homeContainer .home-agenda-type--test {
    background: #ecfeff;
    color: #0891b2;
}
#homeContainer .home-agenda-type--exam {
    background: #f5f3ff;
    color: #7c3aed;
}
#homeContainer .home-notice-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1rem;
    background: #fafafa;
    border: 1px solid #f3f4f6;
    border-radius: 14px;
}
#homeContainer .home-notice-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.4rem;
    flex-shrink: 0;
}
#homeContainer .home-notice-dot--info { background: #3b82f6; }
#homeContainer .home-notice-dot--warning { background: #f59e0b; }
#homeContainer .home-notice-dot--success { background: #10b981; }
#homeContainer .home-notice-dot--neutral { background: #94a3b8; }
#homeContainer .home-notice-content {
    min-width: 0;
}
#homeContainer .home-notice-title {
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}
#homeContainer .home-notice-detail {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6b7280;
}
#homeContainer .home-panel-empty {
    margin: 0;
    padding-top: 0.35rem;
    font-size: 0.88rem;
    color: #6b7280;
}
.home-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Full Admin */
body.full-admin-mode .container:not(#fullAdminContainer) { margin-left: 1.5rem; margin-right: 1.5rem; }
body.full-admin-mode #fullAdminContainer {
    margin: 0;
    padding: 0;
    max-width: none;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}
body.full-admin-mode #fullAdminContainer .full-admin-dashboard {
    font-family: 'Inter', var(--font-sans), system-ui, sans-serif;
}
.full-admin-dashboard {
    display: flex;
    min-height: 100vh;
    background: #f3f4f6;
    color: #111827;
}
.full-admin-dash-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.9rem 1rem;
    position: relative;
    z-index: 20;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.full-admin-dash-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.5rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 1rem;
}
.full-admin-dash-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.full-admin-dash-brand-text { min-width: 0; }
.full-admin-dash-brand-name {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #111827;
    line-height: 1.2;
}
.full-admin-dash-brand-sub {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.15rem;
}
.full-admin-dash-nav-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 0 0 0.6rem 0.5rem;
}
.full-admin-dash-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-height: 0;
}
.full-admin-dash-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.full-admin-dash-nav-item:hover {
    background: #f9fafb;
    color: #111827;
}
.full-admin-dash-nav-item.active {
    background: #eff6ff;
    color: #2563eb;
}
.full-admin-dash-nav-item.active .full-admin-dash-nav-icon {
    color: #2563eb;
}
.full-admin-dash-nav-icon {
    display: flex;
    color: #6b7280;
    flex-shrink: 0;
}
.full-admin-dash-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
}
.full-admin-dash-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.full-admin-dash-topbar-title-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: min(340px, calc(100vw - 11rem));
    z-index: 0;
    pointer-events: none;
}
.full-admin-dash-topbar-title {
    margin: 0;
    padding: 0.42rem 1.2rem;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1e3a8a;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 2px 8px rgba(37, 99, 235, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.full-admin-dash-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1;
}
.full-admin-dash-menu-toggle:hover {
    background: #e5e7eb;
}
.full-admin-dash-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
    z-index: 1;
}
.full-admin-dash-user .nav-user-button {
    border-radius: 10px;
}
.full-admin-dash-overlay {
    display: none;
    position: fixed;
    inset: 5px 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 15;
}
.full-admin-dash-body {
    flex: 1;
    padding: 1.5rem 1.75rem 2rem;
    overflow: auto;
}
.full-admin-dash-panel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.full-admin-dash-panel .student-table {
    margin-top: 1rem;
}
.full-admin-rakning-panel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.full-admin-rakning-panel .rakning-container.container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body.full-admin-mode #lessonCountContainer.lesson-count--full-admin .navigation-container.settings-topbar {
    display: none;
}
/* Embedded Räkning: full-admin topbar already covers menu, title, and user. */
body.full-admin-mode #lessonCountContainer.lesson-count--full-admin > .navigation-container.subadmin-dash-topbar {
    display: none;
}
body.full-admin-mode #lessonCountContainer.lesson-count--full-admin .rakning-back-btn {
    display: none;
}
#lessonCountContainerHome {
    display: contents;
}
body.full-admin-mode #fullAdminContainer .home-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.full-admin-dash-intro {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.full-admin-dash-page-sub {
    margin: 0 0 1.5rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.55;
    text-align: center;
    max-width: 40rem;
    flex: 0 1 auto;
    width: 100%;
}
.full-admin-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.full-admin-stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.full-admin-stat-label {
    margin: 0 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    line-height: 1.3;
}
h3.full-admin-stat-label {
    font-family: inherit;
}
.full-admin-stat-value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.full-admin-stat-value--schools { color: #2563eb; }
.full-admin-stat-value--students { color: #059669; }
.full-admin-stat-value--lessons { color: #7c3aed; }
.full-admin-stat-value--backup { color: #ea580c; }
.full-admin-stat-value--sm {
    font-size: 1.15rem;
    font-weight: 600;
}
.full-admin-stat-hint {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.35;
}
.full-admin-snabb-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
body.full-admin-mode #fullAdminContainer .home-cards.full-admin-dash-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: none;
    margin: 0;
}
.full-admin-dash-actions .home-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.full-admin-dash-actions .home-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}
.full-admin-qa-card--blue .home-card-icon { background: #dbeafe; color: #2563eb; }
.full-admin-qa-card--green .home-card-icon { background: #d1fae5; color: #059669; }
.full-admin-qa-card--amber .home-card-icon { background: #fef3c7; color: #d97706; }
.full-admin-qa-card--purple .home-card-icon { background: #ede9fe; color: #7c3aed; }
.full-admin-qa-card--pink .home-card-icon { background: #fce7f3; color: #db2777; }
.full-admin-qa-card--rose .home-card-icon { background: #ffe4e6; color: #e11d48; }
.full-admin-qa-card--sky .home-card-icon { background: #e0f2fe; color: #0284c7; }
.full-admin-qa-card--teal .home-card-icon { background: #ccfbf1; color: #0d9488; }
body.full-admin-mode #fullAdminContainer .full-admin-view-school {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (max-width: 1100px) {
    .full-admin-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    body.full-admin-mode #fullAdminContainer .home-cards.full-admin-dash-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 901px) {
    .full-admin-dash-sidebar {
        transition: width 0.22s ease, padding 0.22s ease, border-width 0.22s ease;
    }
    body.full-admin-dash-sidebar-collapsed .full-admin-dash-sidebar {
        width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        border-right-width: 0;
        opacity: 0;
        pointer-events: none;
    }
}
@media (max-width: 900px) {
    /* Samma princip som subadmin mobil: full yta + rgba-overlay (inte transparent/inset),
       inga ::before/::after-vita ränder (z-index 9999 ovanför overlay), translate3d + z-index. */

    .full-admin-dash-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100dvh;
        height: 100lvh;
        min-height: 100dvh;
        max-height: none;
        background: #fff;
        z-index: 2000;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
        overflow-y: auto;
        pointer-events: none;
    }
    body.full-admin-sidebar-open .full-admin-dash-sidebar {
        transform: translate3d(0, 0, 0);
        z-index: 12000;
        pointer-events: auto;
        border-radius: 0 1.125rem 1.125rem 0;
        overflow-x: hidden;
        overflow-y: auto;
        box-shadow:
            6px 0 28px rgba(15, 23, 42, 0.1),
            2px 0 12px rgba(15, 23, 42, 0.06);
        padding-top: env(safe-area-inset-top, 0px);
    }
    .full-admin-dash-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        height: 100lvh;
        min-height: 100dvh;
        right: auto;
        bottom: auto;
        /* Samma trick som subadmin + blur när öppen */
        background: rgba(15, 23, 42, 0.007);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 11900;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-backdrop-filter 0.22s ease, backdrop-filter 0.22s ease;
    }
    body.full-admin-sidebar-open .full-admin-dash-overlay {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    /* Samma som subadmin: scroll-lås i JS, inte overflow:hidden på body */
}
@media (max-width: 640px) {
    .full-admin-stats-row {
        grid-template-columns: 1fr;
    }
    body.full-admin-mode #fullAdminContainer .home-cards.full-admin-dash-actions {
        grid-template-columns: 1fr;
    }
    /* Topbar: title was absolutely centered and collided with the user badge on narrow widths */
    body.full-admin-mode .full-admin-dash-topbar {
        padding-inline: 1rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    body.full-admin-mode .full-admin-dash-topbar-title-wrap {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
    }
    body.full-admin-mode .full-admin-dash-topbar-title {
        max-width: 100%;
        box-sizing: border-box;
    }
    body.full-admin-mode .full-admin-dash-topbar-right {
        margin-left: 0;
    }
    body.full-admin-mode #fullAdminContainer .full-admin-dash-topbar .nav-user-group {
        margin-right: 0;
    }
    .full-admin-dash-body {
        padding: 1rem;
    }
}

/* Full admin: Skolor page (in-dashboard) */
.full-admin-schools-panel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.full-admin-schools-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.full-admin-schools-hero {
    position: relative;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.full-admin-schools-hero-count {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 1;
}
.full-admin-schools-hero-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding-right: 7.5rem;
}
.full-admin-schools-hero-copy {
    flex: 1;
    min-width: min(100%, 20rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
}
.full-admin-schools-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.full-admin-schools-hero-sub {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.45;
    max-width: 36rem;
    text-align: center;
}
.full-admin-schools-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: 600;
}
.full-admin-schools-count-badge--accent {
    background: hsl(217, 90%, 96%);
    color: var(--fg);
    font-size: 0.8rem;
    box-shadow: inset 0 0 0 1px hsla(217, 80%, 80%, 0.45);
}
.full-admin-white-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.25rem 1.35rem;
}
.full-admin-white-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.full-admin-white-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.full-admin-white-card-icon--blue {
    background: #dbeafe;
    color: #2563eb;
}
.full-admin-white-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}
.full-admin-white-card-desc {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.45;
    max-width: 42rem;
}
.full-admin-prices-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.full-admin-price-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
}
.full-admin-price-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
}
.full-admin-price-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-family: inherit;
    font-size: 0.9375rem;
    color: #111827;
}
.full-admin-price-field input:focus {
    outline: none;
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.full-admin-schools-table-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
#fullAdminSchoolsPanel .full-admin-prices-card-head {
    display: grid;
    grid-template-columns: 1fr minmax(0, 2fr) 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1.35rem;
    margin-bottom: 3.15rem;
}
#fullAdminSchoolsPanel .full-admin-prices-card-head-start {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    justify-self: start;
    min-width: 0;
}
#fullAdminSchoolsPanel .full-admin-prices-card-head-start .full-admin-white-card-title {
    margin: 0;
    text-align: left;
}
#fullAdminSchoolsPanel .full-admin-prices-card-sub {
    margin: 0;
    text-align: center;
    justify-self: stretch;
    min-width: 0;
}
#fullAdminSchoolsPanel .full-admin-prices-card-head-actions {
    display: flex;
    justify-content: flex-end;
    justify-self: end;
    align-items: center;
    min-width: 0;
}
#fullAdminSchoolsPanel .full-admin-schools-table-toolbar {
    display: grid;
    grid-template-columns: 1fr minmax(0, 2fr) 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1.25rem;
    margin-bottom: 3rem;
}
#fullAdminSchoolsPanel .full-admin-schools-table-toolbar-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: start;
    min-width: 0;
}
#fullAdminSchoolsPanel .full-admin-schools-table-toolbar-start .full-admin-schools-table-title {
    margin: 0;
    text-align: left;
}
#fullAdminSchoolsPanel .full-admin-schools-table-toolbar-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#fullAdminSchoolsPanel .full-admin-schools-table-toolbar .full-admin-schools-table-desc {
    margin: 0;
    text-align: center;
    justify-self: stretch;
    min-width: 0;
}
#fullAdminSchoolsPanel .full-admin-schools-table-toolbar-actions {
    display: flex;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
}

/* Skolor page: hero + card toolbars — 3-col grid squishes copy on narrow viewports */
@media (max-width: 768px) {
    .full-admin-schools-hero-inner {
        flex-direction: column;
        align-items: center;
        padding-right: 1.25rem;
        gap: 0.85rem;
    }
    .full-admin-schools-hero-copy {
        min-width: 0;
        width: 100%;
        align-items: center;
    }
    .full-admin-schools-hero-sub {
        max-width: none;
        text-align: center;
    }
    #fullAdminSchoolsPanel .full-admin-prices-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.65rem;
    }
    #fullAdminSchoolsPanel .full-admin-prices-card-head-start {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
    }
    #fullAdminSchoolsPanel .full-admin-prices-card-head-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }
    #fullAdminSchoolsPanel .full-admin-prices-card-sub {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.65rem;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table-toolbar-start {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table-toolbar-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table-toolbar .full-admin-schools-table-desc {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
    }

    /* Alla skolor: one card per school, vertical stack (no horizontal table scroll) */
    #fullAdminSchoolsPanel .full-admin-table-scroll {
        overflow-x: visible;
        border: none;
        background: transparent;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table thead {
        display: none;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody {
        display: block;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.35rem 1rem 0.85rem;
        margin-bottom: 0.85rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody tr:last-child {
        margin-bottom: 0;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.55rem 0;
        border: none;
        border-bottom: 1px solid #f3f4f6;
        text-align: right !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        vertical-align: middle;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td::before {
        content: attr(data-label);
        flex: 0 1 36%;
        max-width: 10rem;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
        line-height: 1.35;
        text-align: left;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td > * {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td .full-admin-school-cell-inner {
        justify-content: flex-end;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td.sub-phone-cell {
        min-height: 2.25rem;
        word-break: break-word;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        border-bottom: none;
        padding-bottom: 0.25rem;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td:last-child::before {
        flex: none;
        max-width: none;
        width: 100%;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td:last-child > * {
        width: 100%;
        justify-content: stretch;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table tbody td:last-child .full-admin-school-actions {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    #fullAdminSchoolsPanel .full-admin-schools-table .full-admin-school-contact-tag {
        max-width: 100%;
    }

    /* Admin arkiv: samma kort-rad layout som Alla skolor (≤768px) */
    #fullAdminArchivePanel .full-admin-table-scroll {
        overflow-x: visible;
        border: none;
        background: transparent;
    }
    #fullAdminArchivePanel .full-admin-schools-table {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    #fullAdminArchivePanel .full-admin-schools-table thead {
        display: none;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody {
        display: block;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.35rem 1rem 0.85rem;
        margin-bottom: 0.85rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody tr:last-child {
        margin-bottom: 0;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.55rem 0;
        border: none;
        border-bottom: 1px solid #f3f4f6;
        text-align: right !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        vertical-align: middle;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td::before {
        content: attr(data-label);
        flex: 0 1 36%;
        max-width: 10rem;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
        line-height: 1.35;
        text-align: left;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td > * {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td .full-admin-school-cell-inner {
        justify-content: flex-end;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td.sub-username-cell {
        min-height: 2.25rem;
        word-break: break-word;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        border-bottom: none;
        padding-bottom: 0.25rem;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td:last-child::before {
        flex: none;
        max-width: none;
        width: 100%;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td:last-child > * {
        width: 100%;
        justify-content: stretch;
    }
    #fullAdminArchivePanel .full-admin-schools-table tbody td:last-child .full-admin-school-actions {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    #fullAdminArchivePanel .full-admin-schools-table .full-admin-school-contact-tag {
        max-width: 100%;
    }
}
.full-admin-schools-table-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}
.full-admin-schools-table-desc {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: #6b7280;
}
.full-admin-add-school-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 10px;
    flex-shrink: 0;
}
.full-admin-add-school-btn svg {
    flex-shrink: 0;
}
.full-admin-table-scroll {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: auto;
}
.full-admin-schools-table {
    margin-bottom: 0;
    min-width: 920px;
}
.full-admin-schools-table thead th {
    background: #f9fafb;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
#fullAdminSchoolsPanel #fullAdminPricesHeading,
#fullAdminSchoolsPanel #fullAdminAllSchoolsHeading {
    color: var(--primary);
}
.full-admin-school-cell-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.full-admin-school-cell-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.full-admin-school-name-editable {
    min-width: 0;
    font-weight: 600;
    color: #111827;
    outline: none;
}
.full-admin-school-name-editable:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    border-radius: 4px;
}
.full-admin-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.full-admin-pill--blue {
    background: #dbeafe;
    color: #1d4ed8;
}
#fullAdminSchoolsPanel .full-admin-schools-table th:nth-child(2),
#fullAdminSchoolsPanel .full-admin-schools-table td:nth-child(2) {
    text-align: center;
}
#fullAdminSchoolsPanel .full-admin-school-contact-tag {
    cursor: text;
    outline: none;
    max-width: min(14rem, 100%);
    min-width: 0;
}
#fullAdminSchoolsPanel .full-admin-school-contact-tag:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
    border-radius: 999px;
}
.full-admin-pill--gray {
    background: #f3f4f6;
    color: #374151;
}
.full-admin-school-pw-cell {
    vertical-align: middle;
}
.full-admin-school-pw-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.25;
}
.full-admin-school-pw-mask {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: #6b7280;
}
.full-admin-school-pw-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.full-admin-school-pw-actions .full-admin-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}
.full-admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
}
.full-admin-icon-btn:hover {
    background: #e5e7eb;
    color: #111827;
}
.full-admin-school-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 75%;
    max-width: 75%;
    margin-inline: auto;
}
.full-admin-school-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.375rem;
    padding: 0.5rem 1rem;
}
@media (max-width: 900px) {
    .full-admin-prices-fields {
        grid-template-columns: 1fr;
    }
}
.full-admin-schools-section h2,
.full-admin-view-school h2 { margin-bottom: 1rem; }
.full-admin-schools-intro {
    font-size: 0.9375rem;
    color: var(--muted-fg);
    margin-bottom: 1rem;
}
.full-admin-schools-table-wrap {
    margin-bottom: 1rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}
.full-admin-schools-table { margin-bottom: 0; }
.full-admin-schools-table th:nth-child(3),
.full-admin-schools-table th:nth-child(4),
.full-admin-schools-table th:nth-child(5),
.full-admin-schools-table th:nth-child(6),
.full-admin-schools-table td:nth-child(3),
.full-admin-schools-table td:nth-child(4),
.full-admin-schools-table td:nth-child(5) { text-align: center; }
.full-admin-schools-table td:last-child { text-align: center; width: 120px; }
.full-admin-school-login-btn { white-space: nowrap; }
.full-admin-view-school h2 { margin-bottom: 1rem; }
.full-admin-view-school-stats { margin-bottom: 1rem; padding: 0.75rem; background: var(--slot-hover); border-radius: var(--radius); }
.full-admin-view-school-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.full-admin-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.full-admin-readonly-list { padding: 1rem 0; }
.full-admin-readonly-list table { margin-bottom: 0.5rem; }
.full-admin-readonly-list h4 { margin: 1rem 0 0.5rem; font-size: 0.9375rem; }
.full-admin-readonly-list ul { margin: 0; padding-left: 1.25rem; }
.full-admin-collection-header {
    margin-bottom: 1.5rem;
}
.full-admin-collection-header--inner {
    margin-bottom: 1rem;
}
.full-admin-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-inline: 0.85rem;
    padding-block: 0.4rem;
    border-radius: 999px;
    border-color: hsl(217, 90%, 75%);
    color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0 0 1px hsla(217, 90%, 75%, 0.5);
}
.full-admin-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.full-admin-collection-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid hsl(217, 90%, 90%);
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.full-admin-collection-card--compact {
    padding: 0.85rem 0.9rem;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}
.full-admin-collection-card--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
}
.full-admin-collection-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.full-admin-collection-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
.full-admin-collection-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: hsl(217, 90%, 96%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.full-admin-collection-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.full-admin-collection-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
}
.full-admin-collection-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted-fg);
}
.full-admin-collection-meta {
    flex-shrink: 0;
}
.full-admin-collection-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: hsl(217, 90%, 96%);
    color: var(--fg);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
 .full-admin-collection-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.full-admin-collection-search {
    flex: 1;
    min-width: min(260px, 100%);
}
.full-admin-collection-search-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    border: 1px solid hsl(217, 90%, 75%);
    box-shadow: 0 0 0 1px hsla(217, 90%, 75%, 0.4);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    outline: none;
}
.full-admin-collection-search-input::placeholder {
    color: var(--muted-fg);
}
@media (max-width: 640px) {
    .full-admin-collection-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .full-admin-collection-footer {
        align-items: stretch;
    }
    .full-admin-collection-count {
        align-self: flex-start;
    }
}
.home-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid hsl(217, 20%, 92%);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s ease;
    text-align: left;
    font-family: var(--font-sans);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.home-card:hover {
    border-color: hsl(217, 90%, 88%);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}
.home-card:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.2);
}
.home-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(217, 90%, 96%);
    color: var(--primary);
    border-radius: 10px;
}
.home-card-icon svg {
    width: 22px;
    height: 22px;
}
.home-card-text {
    min-width: 0;
}
.home-card-label {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--fg);
    margin-bottom: 0.2rem;
}
.home-card-desc {
    font-size: 0.8125rem;
    color: var(--muted-fg);
    line-height: 1.4;
}
@media (max-width: 1024px) {
    #homeContainer .home-stats-grid,
    #homeContainer .home-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #homeContainer .home-panels-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .home-cards { grid-template-columns: 1fr; }
    #homeContainer .home-stats-grid,
    #homeContainer .home-actions-grid,
    #homeContainer .home-panels-grid {
        grid-template-columns: 1fr;
    }
    #homeContainer .home-title { font-size: 1.5rem; }
    #homeContainer .home-action-card {
        padding: 1.05rem 1rem 1.05rem 1.1rem;
    }
    #homeContainer .home-panel,
    #homeContainer .home-stat-card {
        padding-inline: 1.05rem;
    }
}

/* Subadmin Startsida: kompakt rubrik + Ny bokning (telefon ≤768px, ej desktop) */
@media (max-width: 768px) {
    #homeContainer.home-container {
        padding: 0 1rem 1.75rem;
    }
    #homeContainer .subadmin-dash-topbar {
        margin-left: -1rem;
        margin-right: -1rem;
        margin-bottom: 1.1rem;
    }
    #homeContainer .home-content {
        padding-top: 0.35rem;
    }
    #homeContainer .home-header {
        margin-bottom: 1.25rem;
    }
    #homeContainer .home-dashboard-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: stretch;
    }
    #homeContainer .home-subtitle-block {
        max-width: none;
        margin: 0 auto;
        padding: 0 0.35rem;
        text-align: center;
    }
    #homeContainer .home-subtitle-school {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    #homeContainer .home-subtitle {
        max-width: none;
        margin: 0 auto;
        padding: 0;
        font-size: 0.875rem;
        line-height: 1.5;
        text-align: center;
        text-wrap: balance;
    }
    #homeContainer .home-quick-booking-btn {
        width: 100%;
        max-width: none;
        justify-content: center;
        box-sizing: border-box;
        padding: 0.52rem 1rem;
        font-size: 0.9rem;
        border-radius: 11px;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.16);
    }
}

/* ===== Schedule Header ===== */
.schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0 1rem;
    flex-shrink: 0;
    position: relative;
}
/* Subadmin schema: samma hamburger som övriga sidor (visas bara ≤768px, inte lärar-läge) */
.schedule-subadmin-menu-toggle {
    display: none;
}
/* Schedule header: keep existing layout; teacher name shown as a pill */
.header-teacher-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.41rem 1.09rem;
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 2px 8px rgba(37, 99, 235, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 769px) {
    body:not(.full-admin-mode):not(.teacher-mode):not(.login-mode) #scheduleContainer .schedule-header .header-left {
        margin-left: 2rem;
    }
}
.header-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    justify-content: center;
}
/* (replaced by pill styling above) */
.header-teacher-name-inline {
    display: none;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.header-week-nav {
    position: relative;
}
.header-week-nav .btn-icon {
    color: var(--primary);
}
.header-week-nav .btn-icon:hover {
    color: hsl(217, 90%, 48%);
}
.header-week-picker {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--primary);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.header-week-picker:hover {
    background: var(--slot-hover);
    box-shadow: 0 0 0 1px hsla(217, 90%, 55%, 0.18);
}
.header-date-range.header-week-display {
    padding: 0.5rem 0.75rem;
}
.header-week-display {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg);
    padding: 0.5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    white-space: nowrap;
}

.week-picker-wrap,
.year-picker-wrap,
.month-picker-wrap {
    position: relative;
}
.year-picker-dropdown {
    width: 5rem;
}
.month-picker-dropdown {
    width: 8rem;
}
.header-month-picker {
    color: var(--primary);
}
/* Week picker dropdown: scrollable list 1–52 */
.week-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    width: 6.5rem;
    max-height: 14rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.week-picker-dropdown.open {
    display: block;
}
.week-picker-list {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 0;
    max-height: 14rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.week-picker-list::-webkit-scrollbar {
    width: 6px;
}
.week-picker-list::-webkit-scrollbar-track {
    background: transparent;
}
.week-picker-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.week-picker-list::-webkit-scrollbar-thumb:hover {
    background: var(--muted-fg);
}
.week-picker-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.85rem;
    border: none;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fg);
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.week-picker-item:hover {
    background: var(--slot-hover);
}
.week-picker-item.active {
    background: hsla(217, 90%, 55%, 0.12);
    color: var(--primary);
}

/* ===== Schedule Grid (8-col: time + 7 days) ===== */
.lesson-counter-bar {
    font-size: 0.8125rem;
    color: var(--muted-fg);
    padding: 0.35rem 0.5rem;
    text-align: right;
}
.lesson-counter-bar #lessonCounterValue {
    font-weight: 600;
    color: var(--fg);
}
body.teacher-mode .lesson-counter-bar { display: none !important; }

.schedule-grid {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    border: 1px solid var(--grid-line);
    border-radius: 0.75rem;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.schedule-grid-inner {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(12, 1fr);
    min-width: 700px;
    height: 100%;
}


/* Day header row */
.grid-day-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
    padding: 0.5rem 0.25rem;
    position: relative;
}
.grid-day-header:last-child { border-right: none; }
.grid-day-header.is-today { background: hsla(217, 90%, 55%, 0.08); }

/* Per-day hours override + button (top-right of day header, appears on hover) */
.day-hours-plus {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--grid-line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--muted-fg);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
    z-index: 4;
}
.grid-day-header:hover .day-hours-plus,
.day-hours-plus:focus,
.day-hours-plus.has-override {
    display: inline-flex;
}
.day-hours-plus:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: scale(1.05);
}
.day-hours-plus.has-override {
    background: hsla(217, 90%, 55%, 0.15);
    color: var(--primary);
    border-color: hsla(217, 90%, 55%, 0.4);
}
.day-hours-plus.has-override:hover {
    background: var(--primary);
    color: #fff;
}
.grid-day-header.has-day-override {
    box-shadow: inset 0 -2px 0 0 var(--primary);
}
body.teacher-mode .day-hours-plus { display: none !important; }

/* Hide time slots that are outside the effective day range (per-day override
 * or teacher default). The grid cell remains in place so the layout stays
 * aligned, but it is visually blank and non-interactive. */
.time-slot.is-outside-hours {
    background-color: hsl(0, 0%, 97%);
    cursor: default;
    pointer-events: none;
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
}
.time-slot.is-outside-hours:hover {
    background-color: hsl(0, 0%, 97%);
}
.time-slot.is-outside-hours .slot-hour-label,
.time-slot.is-outside-hours .manual-cap-indicator,
.time-slot.is-outside-hours .time-content,
.time-slot.is-outside-hours .button-group {
    display: none !important;
}
.time-slot.is-outside-hours::before,
.time-slot.is-outside-hours::after {
    display: none !important;
}

.day-num {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
}

.day-name-short {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-fg);
    font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
}

/* Time slot cells */
.time-slot {
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
    cursor: text;
    transition: background-color 0.12s;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.time-slot:nth-child(7n) { border-right: none; }
.time-slot:nth-last-child(-n+7) { border-bottom: none; }

.time-slot:hover { background-color: var(--slot-hover); }
.time-slot.is-today { background-color: hsla(217, 90%, 55%, 0.04); }
.time-slot.is-today:hover { background-color: var(--slot-hover); }
.time-slot.has-content {
    background-color: var(--surface);
    box-shadow: none;
}
.time-slot.has-content:hover {
    background-color: var(--secondary);
    box-shadow: none;
}

/* Booked slots on current day: keep subtle blue hue */
.time-slot.is-today.has-content {
    background-color: hsla(217, 90%, 55%, 0.08);
}
.time-slot.is-today.has-content:hover {
    background-color: hsla(217, 90%, 55%, 0.12);
}

/* Inline hour label inside each slot (top-left) */
.slot-hour-label {
    position: absolute;
    top: 5px;
    left: 7px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--muted-fg);
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

/* Read-only overlay shown on top of the textarea when a cell has content and is not being edited.
 * Purpose: keep the stored textarea value (which still includes a trailing "(M)" for manual students,
 * because lots of logic depends on that format) while visually presenting the name without "(M)" and
 * a small "(M)" badge in the top-right corner instead. Clicks pass through (pointer-events: none);
 * focusing the textarea hides the overlay via :focus-within so editing shows the raw value as before. */
.slot-display-overlay {
    position: absolute;
    inset: 0;
    padding: 1.2rem 0.6rem 0.4rem 1.3rem;
    font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
    pointer-events: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    display: none;
    z-index: 1;
}
.slot-display-name { display: inline; }
.slot-teacher-note {
    display: block;
    color: #4b5563;
}
.slot-manual-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: #000;
    line-height: 1;
    display: none;
}
/* Show the overlay only when the cell has content, isn't blocked, and isn't being edited. */
.time-slot.has-content:not(.is-blocked):not(:focus-within) .slot-display-overlay { display: block; }
/* When overlay is showing, hide the raw textarea text underneath so "(M)" doesn't appear twice. */
.time-slot.has-content:not(.is-blocked):not(:focus-within) .time-content {
    color: transparent;
    caret-color: transparent;
}
.time-slot.is-outside-hours .slot-display-overlay,
.time-slot.is-outside-hours .slot-manual-badge { display: none !important; }

/* Manual car capacity reached in this slot (other teachers) */
.manual-cap-indicator {
    position: absolute;
    right: 4px;
    bottom: 3px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: #16a34a;
    opacity: 0.9;
    pointer-events: none;
    z-index: 3;
    display: none;
    line-height: 1;
}
.time-slot.manual-cap-reached .manual-cap-indicator { display: block; }
.time-slot.is-blocked .manual-cap-indicator { display: none !important; }

/* Visual accent for booked slots: thin blue bar on the left */
.time-slot.has-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary);
}
.time-slot.has-content:hover::before {
    width: 3px;
    background-color: hsl(217, 90%, 48%);
}
.time-slot.has-content.sms-sent::before,
.time-slot.has-content.sms-sent:hover::before {
    background-color: #22c55e;
}

/* SMS reminder sent: green replaces the booked blue marker. */
.time-slot.sms-sent::after {
    display: none;
}

/* Sub-admin only: XX = teacher cannot work this time. */
.time-slot.is-blocked {
    background-color: hsl(0, 0%, 94%);
    cursor: default;
    overflow: hidden;
}
.time-slot.is-blocked:hover {
    background-color: hsl(0, 0%, 91%);
}
.time-slot.is-blocked .button-group {
    display: none !important;
}
/* Large corner-to-corner X (overrides has-content bar when blocked) */
.time-slot.is-blocked::before,
.time-slot.is-blocked:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Two diagonals corner-to-corner; 1px lines */
    background:
        linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(220, 10%, 45%) calc(50% - 1px), hsl(220, 10%, 45%) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to bottom left, transparent calc(50% - 1px), hsl(220, 10%, 45%) calc(50% - 1px), hsl(220, 10%, 45%) calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
    z-index: 2;
}
.time-slot.is-blocked .time-content {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 1;
    caret-color: transparent;
}
body.teacher-mode .time-slot.is-blocked .time-content {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.time-slot.unrecognized-student {
    background-color: hsl(40, 100%, 95%);
    border-color: hsl(40, 90%, 60%);
}
.time-slot.unrecognized-student .time-content {
    color: hsl(30, 80%, 30%);
}

.time-content {
    width: 100%;
    flex: 1;
    min-height: 0;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    padding: 1.2rem 0.6rem 0.4rem 1.3rem;
    overflow: hidden;
}
/* Responsive: shrink slot text and placeholder as viewport narrows.
 * Top padding is also reduced on smaller screens so multi-row slot text isn't clipped. */
@media (max-width: 1024px) {
    #scheduleContainer .time-content { font-size: 0.55rem !important; padding-top: 0.6rem !important; }
    #scheduleContainer .time-content::placeholder { font-size: 0.55rem !important; }
    /* Keep overlay and textarea font-size in sync so text doesn't "shrink" on focus. */
    #scheduleContainer .slot-display-overlay { font-size: 0.55rem !important; padding-top: 0.6rem !important; }
}
@media (max-width: 768px) {
    /* Phone: shrink text by ~10% and badges by ~20% */
    #scheduleContainer .time-content { font-size: 0.5rem !important; padding-top: 0.9rem !important; line-height: 1.1 !important; }
    #scheduleContainer .time-content::placeholder { font-size: 0.5rem !important; }
    #scheduleContainer .slot-display-overlay { font-size: 0.5rem !important; padding-top: 0.9rem !important; line-height: 1.1 !important; }
    #scheduleContainer .slot-manual-badge { font-size: 0.54rem !important; }
    #scheduleContainer .manual-cap-indicator { font-size: 0.54rem !important; }
    #scheduleContainer .time-slot.slot-3-lines .time-content { padding-top: 0.75rem !important; }
    #scheduleContainer .time-slot.slot-3-lines .slot-display-overlay { padding-top: 0.75rem !important; }
    #scheduleContainer .time-slot.slot-4-lines .time-content { padding-top: 0.46rem !important; font-size: 0.46rem !important; }
    #scheduleContainer .time-slot.slot-4-lines .slot-display-overlay { padding-top: 0.46rem !important; font-size: 0.46rem !important; }
}
@media (max-width: 480px) {
    /* Phone: shrink text by ~10% and badges by ~20% */
    #scheduleContainer .time-content { font-size: 0.5rem !important; padding-top: 0.8rem !important; line-height: 1.1 !important; }
    #scheduleContainer .time-content::placeholder { font-size: 0.5rem !important; }
    #scheduleContainer .slot-display-overlay { font-size: 0.5rem !important; padding-top: 0.8rem !important; line-height: 1.1 !important; }
    #scheduleContainer .slot-manual-badge { font-size: 0.54rem !important; }
    #scheduleContainer .manual-cap-indicator { font-size: 0.54rem !important; }
    #scheduleContainer .time-slot.slot-3-lines .time-content { padding-top: 0.65rem !important; }
    #scheduleContainer .time-slot.slot-3-lines .slot-display-overlay { padding-top: 0.65rem !important; }
    #scheduleContainer .time-slot.slot-4-lines .time-content { padding-top: 0.4rem !important; font-size: 0.46rem !important; }
    #scheduleContainer .time-slot.slot-4-lines .slot-display-overlay { padding-top: 0.4rem !important; font-size: 0.46rem !important; }
}
@media (max-width: 768px) {
    /* iOS Safari zooms focused textareas below 16px. Keep the slot's visual scale by
       rendering a 16px textarea and shrinking it inside the fixed-size cell. */
    #scheduleContainer .time-slot {
        overflow: hidden;
    }
    #scheduleContainer .time-content {
        --schedule-slot-input-scale: 0.5;
        position: absolute;
        inset: 0;
        flex: none;
        width: 200%;
        height: 200%;
        min-height: 200%;
        font-size: 16px !important;
        padding: 1.8rem 1.2rem 0.8rem 2.6rem !important;
        line-height: 1.1 !important;
        transform: scale(var(--schedule-slot-input-scale));
        transform-origin: top left;
    }
    #scheduleContainer .time-content::placeholder {
        font-size: 16px !important;
    }
    #scheduleContainer .time-slot.slot-3-lines .time-content {
        padding-top: 1.5rem !important;
    }
    #scheduleContainer .time-slot.slot-4-lines .time-content {
        --schedule-slot-input-scale: 0.46;
        font-size: 16px !important;
        width: 217.3913%;
        height: 217.3913%;
        min-height: 217.3913%;
        padding-top: 1rem !important;
    }
}
@media (max-width: 480px) {
    #scheduleContainer .time-content {
        padding-top: 1.6rem !important;
    }
    #scheduleContainer .time-slot.slot-3-lines .time-content {
        padding-top: 1.3rem !important;
    }
    #scheduleContainer .time-slot.slot-4-lines .time-content {
        padding-top: 0.87rem !important;
    }
}
.time-content::placeholder {
    color: transparent;
    transition: color 0.15s;
}
.time-slot:hover .time-content::placeholder {
    color: var(--muted-fg);
    opacity: 0.4;
}

/* Button group (availability on hover) */
.time-slot .button-group {
    position: absolute;
    top: 2px;
    right: 26px;
    display: none;
    align-items: center;
    z-index: 5;
}
.time-slot:not(.has-content):hover .button-group { display: flex; }

.time-slot .button-group .show-available-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--primary);
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.time-slot .button-group .show-available-button:hover {
    background: var(--primary);
    color: #fff;
}
@media (max-width: 768px) {
    #scheduleContainer .time-slot .button-group .show-available-button {
        width: 15px;
        height: 15px;
        border-width: 1px;
    }
    #scheduleContainer .time-slot .button-group .show-available-button svg {
        width: 9px;
        height: 9px;
    }
}
.delete-button {
    background: var(--destructive);
    color: #fff;
}
.delete-button:hover { opacity: 0.85; }

/* ===== Top area: only gap + Admin button (no bar, no title) ===== */
.navigation-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 0.5rem 2rem 0.5rem 1.25rem;
    min-height: 2.75rem;
}

/* Subadmin: legacy settings-topbar removed in favor of .subadmin-dash-topbar */

/* Full admin home: break topbar out of narrow container */
.full-admin-topbar {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Full admin home: reduce gap under the top bar */
.full-admin-topbar {
    margin-bottom: 0.25rem;
}
.full-admin-topbar .settings-topbar-title {
    top: auto;
}

.navigation-container .btn-logout {
    border-radius: 999px;
    padding: 0.35rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.nav-user-group {
    position: relative;
}
.nav-user-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0.4rem 1rem 0.4rem 0.75rem;
    cursor: pointer;
    min-width: 7.5rem;
}
.nav-user-button:hover {
    border-color: var(--primary);
    background-color: hsl(217, 90%, 97%);
}
.nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}
.nav-user-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fg);
}
.nav-user-caret {
    font-size: 0.7rem;
    color: var(--muted-fg);
}
.nav-user-menu {
    position: absolute;
    right: 0;
    top: 110%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    padding: 0;
    min-width: 7.5rem;
    display: none;
    z-index: 1200;
    overflow: hidden;
}
.nav-user-menu.open {
    display: block;
}
.nav-user-menu-item {
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 0;
}
.nav-user-menu-item:hover {
    background: var(--slot-hover);
}

.nav-user-menu-item-help {
    color: hsl(217, 70%, 42%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.nav-user-menu-item-help:hover {
    background: hsl(217, 50%, 96%);
    color: hsl(217, 70%, 35%);
}

.nav-user-menu-item-logout {
    color: var(--destructive);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.46rem 1rem 0.46rem 0.75rem;
}
.nav-user-menu-item-logout .logout-icon svg {
    color: var(--destructive);
}

/* ===== Profile / Student Pages ===== */
.profile-form {
    background: var(--card);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}
.profile-form--elev-card {
    background: transparent;
    padding: 0;
    border: none;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.form-grid input, .form-grid select {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* Hover på Växellåda, Riskutbildning och Testlektion (placeholder-dropdowns) */
.form-grid #transmission:hover,
.form-grid #riskUtbildning:hover,
.form-grid #testLesson:hover,
.form-grid #timeTransmission:hover {
    border-color: var(--primary);
    background-color: hsl(217, 90%, 97%);
}

/* Student list (Elevprofiler) – revamped table */
.student-list-section {
    margin-top: 1rem;
}
.student-list-count {
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

/* Subadmin Elever: combine search + header in one white wrapper (like reference) */
#profilesContainer .subadmin-elever-table-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#profilesContainer .subadmin-elever-table-card .student-table.subadmin-elever-table {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
#profilesContainer .subadmin-list-card-head,
#timesContainer .subadmin-list-card-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}
#profilesContainer .subadmin-list-card-head-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    flex: 0 1 auto;
}
#profilesContainer .subadmin-elever-mass-arkiv-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(100%, 28rem);
    padding: 0.65rem 0.85rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    box-sizing: border-box;
}
#profilesContainer .subadmin-elever-mass-arkiv-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #92400e;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
#profilesContainer .subadmin-elever-mass-arkiv-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
#profilesContainer .subadmin-elever-mass-arkiv-sub {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #a16207;
}
#profilesContainer .subadmin-elever-mass-arkiv-btn {
    flex-shrink: 0;
    font-size: 0.8125rem;
    padding: 0.38rem 0.65rem;
    white-space: nowrap;
}
#profilesContainer .subadmin-list-card-icon,
#timesContainer .subadmin-list-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#profilesContainer .subadmin-list-card-icon--blue,
#timesContainer .subadmin-list-card-icon--blue {
    background: #eff6ff;
    color: #2563eb;
}
#profilesContainer .subadmin-list-card-icon--indigo,
#timesContainer .subadmin-list-card-icon--indigo {
    background: #eef2ff;
    color: #4f46e5;
}
#profilesContainer .subadmin-list-card-copy,
#timesContainer .subadmin-list-card-copy {
    min-width: 0;
}
#profilesContainer .subadmin-list-card-title,
#timesContainer .subadmin-list-card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}
#profilesContainer .subadmin-list-card-subtitle,
#timesContainer .subadmin-list-card-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #9ca3af;
}
#profilesContainer .subadmin-list-card-searchwrap,
#timesContainer .subadmin-list-card-searchwrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: min(360px, 100%);
    width: min(360px, 100%);
    padding: 0.45rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    position: relative;
}
#profilesContainer .subadmin-list-card-searchicon,
#timesContainer .subadmin-list-card-searchicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0;
}
#profilesContainer .subadmin-list-card-search-input,
#timesContainer .subadmin-list-card-search-input {
    width: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0.35rem 0;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}
#profilesContainer .subadmin-list-card-search-input:focus,
#timesContainer .subadmin-list-card-search-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
#timesContainer .times-status-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#timesContainer .times-status-filter-button:hover {
    background: #e2e8f0;
    color: #1e293b;
}
#timesContainer .times-status-filter-button.is-active {
    background: #dbeafe;
    color: #2563eb;
}
#timesContainer .times-status-filter-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 40;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}
#timesContainer .times-status-filter-menu[hidden] {
    display: none !important;
}
#timesContainer .times-status-filter-option {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #334155;
    text-align: left;
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
#timesContainer .times-status-filter-option:hover {
    background: #f8fafc;
}
#timesContainer .times-status-filter-option.is-active {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Subadmin Elever: category/header row uses default blue header */

.student-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.student-table th {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
}
.student-table th.times-notes-header { text-align: center; }
#timesContainer .student-table th:nth-child(6),
#timesContainer .student-table th:nth-child(7) { text-align: center; }
.student-table td {
    padding: 0.65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-size: 0.8125rem;
}
.student-table tbody tr:last-child td { border-bottom: none; }
.student-table tbody td[contenteditable="true"]:hover { background-color: hsl(217, 100%, 96%); }
.student-table td[contenteditable="true"] { cursor: text; transition: background 0.15s; }
.student-table td[contenteditable="true"]:focus {
    background: hsl(217, 100%, 98%);
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.student-table td:last-child { width: 100px; text-align: center; }

/* Column alignment for teacher settings table (Inställningar) */
#settingsContainer .student-table th:nth-child(4),
#settingsContainer .student-table td:nth-child(4) {
    text-align: center;
}

/* Full Admin Skolor page: center numeric/status/action columns */
#fullAdminSchoolsPanel .full-admin-schools-table th:nth-child(5),
#fullAdminSchoolsPanel .full-admin-schools-table th:nth-child(6),
#fullAdminSchoolsPanel .full-admin-schools-table th:nth-child(7),
#fullAdminSchoolsPanel .full-admin-schools-table th:nth-child(8),
#fullAdminSchoolsPanel .full-admin-schools-table td:nth-child(5),
#fullAdminSchoolsPanel .full-admin-schools-table td:nth-child(6),
#fullAdminSchoolsPanel .full-admin-schools-table td:nth-child(7),
#fullAdminSchoolsPanel .full-admin-schools-table td:nth-child(8) {
    text-align: center;
}
#fullAdminSchoolsPanel .full-admin-schools-table td:last-child { width: 160px; }
#fullAdminSchoolsPanel .full-admin-schools-table td:last-child .full-admin-school-actions { justify-content: center; }

/* Full Admin Admin Arkiv: same column alignment as skolor-tabell */
#fullAdminArchivePanel .full-admin-schools-table th:nth-child(3),
#fullAdminArchivePanel .full-admin-schools-table th:nth-child(4),
#fullAdminArchivePanel .full-admin-schools-table th:nth-child(5),
#fullAdminArchivePanel .full-admin-schools-table th:nth-child(6),
#fullAdminArchivePanel .full-admin-schools-table td:nth-child(3),
#fullAdminArchivePanel .full-admin-schools-table td:nth-child(4),
#fullAdminArchivePanel .full-admin-schools-table td:nth-child(5),
#fullAdminArchivePanel .full-admin-schools-table td:nth-child(6) { text-align: center; }
#fullAdminArchivePanel .full-admin-schools-table td:last-child { width: 160px; }
#fullAdminArchivePanel .full-admin-schools-table td:last-child .full-admin-school-actions { justify-content: center; }
#fullAdminStudentsPanel .student-table td:nth-child(1),
#fullAdminStudentsPanel .student-table td:nth-child(2) {
    font-weight: 600;
}

/* Full admin Elever + Elev arkiv + Subadmin Elever/Tillgänglighet/Elev arkiv: mobil — accordion (768px) */
body.full-admin-mode #fullAdminStudentsPanel .full-admin-students-mobile-list,
body.full-admin-mode #fullAdminArchivedStudentsPanel .full-admin-students-mobile-list,
body.full-admin-mode #fullAdminBackupsPanel .full-admin-students-mobile-list,
#profilesContainer .full-admin-students-mobile-list,
#timesContainer .full-admin-students-mobile-list,
#studentArchiveContainer .full-admin-students-mobile-list {
    display: none;
}
@media (max-width: 768px) {
    body.full-admin-mode #fullAdminStudentsPanel .full-admin-students-table-desktop,
    body.full-admin-mode #fullAdminArchivedStudentsPanel .full-admin-students-table-desktop,
    body.full-admin-mode #fullAdminBackupsPanel .full-admin-students-table-desktop,
    #profilesContainer .full-admin-students-table-desktop,
    #timesContainer .full-admin-students-table-desktop,
    #studentArchiveContainer .full-admin-students-table-desktop {
        display: none !important;
    }
    body.full-admin-mode #fullAdminStudentsPanel .full-admin-students-mobile-list,
    body.full-admin-mode #fullAdminArchivedStudentsPanel .full-admin-students-mobile-list,
    body.full-admin-mode #fullAdminBackupsPanel .full-admin-students-mobile-list,
    #profilesContainer .full-admin-students-mobile-list,
    #timesContainer .full-admin-students-mobile-list,
    #studentArchiveContainer .full-admin-students-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        margin-top: 0.75rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile[open] {
        border-width: 3px;
        border-color: var(--primary);
        box-shadow: 0 2px 14px hsla(217, 90%, 55%, 0.12);
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-summary {
        list-style: none;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.28rem;
        padding: 0.65rem 1.75rem 0.65rem 0.75rem;
        cursor: pointer;
        font-size: 0.8125rem;
        line-height: 1.35;
        -webkit-tap-highlight-color: transparent;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-summary::-webkit-details-marker {
        display: none;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-summary::marker {
        content: '';
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-summary::after {
        content: "";
        position: absolute;
        right: 0.65rem;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-right: 2px solid #94a3b8;
        border-bottom: 2px solid #94a3b8;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile[open] .full-admin-student-mobile-summary::after {
        transform: rotate(-135deg);
        margin-top: 0;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-school {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--primary);
    }
    /* Subadmin Elever / Tillgänglighet / Elev arkiv (mobil): skolnamn i läsbar titelstil */
    :is(#profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-school {
        text-transform: none;
        letter-spacing: -0.02em;
        font-size: 0.78rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-name {
        font-weight: 700;
        font-size: 0.9rem;
        color: #0f172a;
        word-break: break-word;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-pnr {
        font-family: var(--font-mono);
        font-size: 0.78rem;
        color: #475569;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-body {
        padding: 0.55rem 0.75rem 0.75rem;
        border-top: 1px solid #f1f5f9;
        display: flex;
        flex-direction: column;
        gap: 0.72rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-field--iconrow {
        display: grid;
        grid-template-columns: 1.4rem auto minmax(0, 1fr);
        column-gap: 0.55rem;
        row-gap: 0;
        align-items: center;
        font-size: 0.8125rem;
    }
    #profilesContainer .full-admin-student-mobile-field--iconrow {
        column-gap: 0.65rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-field-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-field-icon svg {
        display: block;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-field--note {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 0.15rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-field--pris {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        font-size: 0.8125rem;
        margin-top: 0.1rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-label {
        color: #64748b;
        font-weight: 500;
    }
    /* Dubbel klass — måste ligga efter .full-admin-student-mobile-label så blå färg inte skrivs över */
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-label.full-admin-student-mobile-label--note {
        display: block;
        color: var(--primary);
        font-weight: 600;
        font-size: 0.6875rem;
        letter-spacing: 0.02em;
        margin-bottom: 0.4rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-value {
        color: #1e293b;
        word-break: break-word;
        text-align: right;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-field--iconrow .full-admin-student-mobile-value {
        justify-self: end;
        text-align: right;
    }
    /* Subadmin Elever (mobil): smalare fält till höger så etikett + ikon får luft mot vänster */
    #profilesContainer .full-admin-student-mobile-field--iconrow .full-admin-student-mobile-value[contenteditable="true"] {
        justify-self: end;
        width: min(10rem, 100%);
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.26rem 0.5rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        text-align: right;
        outline: none;
        min-height: 1.7rem;
        font-size: 16px;
        line-height: 1.3;
        -webkit-text-size-adjust: 100%;
    }
    #profilesContainer .full-admin-student-mobile-field--iconrow .full-admin-student-mobile-value[contenteditable="true"]:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.15);
    }
    #profilesContainer .full-admin-student-mobile-field--pris {
        align-items: center;
    }
    #profilesContainer .full-admin-student-mobile-field--pris .full-admin-student-mobile-value[contenteditable="true"] {
        flex: 0 1 auto;
        min-width: 4.75rem;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.26rem 0.5rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        text-align: right;
        outline: none;
        font-size: 16px;
        line-height: 1.3;
        -webkit-text-size-adjust: 100%;
    }
    #profilesContainer .full-admin-student-mobile-field--pris .full-admin-student-mobile-value[contenteditable="true"]:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.15);
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-note.note-cell {
        display: block;
        min-height: 2.35rem;
        padding: 0.45rem 0.55rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        font-size: 16px;
        color: #64748b;
        outline: none;
        -webkit-text-size-adjust: 100%;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-note.note-cell:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.15);
        color: #64748b;
    }
    #profilesContainer .full-admin-student-mobile-note.note-cell {
        padding: 0.28rem 0.5rem;
        border-radius: 8px;
        min-height: 1.75rem;
        font-size: 16px;
        line-height: 1.35;
        -webkit-text-size-adjust: 100%;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #fullAdminBackupsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-actions {
        margin-top: 0.35rem;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }
    :is(#fullAdminStudentsPanel, #fullAdminArchivedStudentsPanel, #profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-actions .full-admin-student-mobile-rakning-btn.times-count-button {
        width: 100%;
        justify-content: center;
        font-size: 0.8125rem;
        /* ~20% högre än tabell-knapp (0.3rem → 0.36rem vertikal padding) */
        padding: 0.36rem 0.85rem;
    }
    :is(#profilesContainer, #timesContainer, #studentArchiveContainer) .full-admin-student-mobile-actions .delete-button {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        box-sizing: border-box;
        padding: 0.36rem 0.85rem;
        font-size: 0.8125rem;
        border-radius: 10px;
    }
    #timesContainer .full-admin-student-mobile-actions .times-sms-button {
        width: 100%;
        padding: 0.34rem 0.85rem;
        border-radius: 10px;
        font-size: 0.8125rem;
    }
    #timesContainer .full-admin-student-mobile-actions .delete-button {
        padding: 0.3rem 0.75rem;
        font-size: 0.76rem;
    }
    /* Undvik att utfällda accordion-kort klipps av kortets overflow */
    #profilesContainer .subadmin-elever-table-card,
    #timesContainer .subadmin-elever-table-card,
    #studentArchiveContainer .archive-students-list-card {
        overflow: visible;
    }
    /* Subadmin mobil: 16px i fokuserbara fält + sök — stoppar iOS Safari auto-zoom */
    #profilesContainer .subadmin-list-card-search-input,
    #timesContainer .subadmin-list-card-search-input,
    #studentArchiveContainer .archive-students-list-search-input {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
    /* Namn-rad: blå tagg (16px text mot iOS-zoom) */
    #timesContainer .full-admin-student-mobile-value.times-mobile-namn-tag[contenteditable="true"] {
        justify-self: end;
        display: inline-block;
        max-width: 100%;
        width: auto;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.02em;
        -webkit-text-size-adjust: 100%;
        color: var(--primary);
        padding: 0.2rem 0.55rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        text-align: right;
        outline: none;
        word-break: break-word;
    }
    #timesContainer .full-admin-student-mobile-value[data-times-mobile="theory"][contenteditable="true"],
    #timesContainer .full-admin-student-mobile-value[data-times-mobile="driving"][contenteditable="true"] {
        justify-self: end;
        width: min(100%, 11rem);
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.02em;
        -webkit-text-size-adjust: 100%;
        color: #0f172a;
        padding: 0.2rem 0.45rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        text-align: right;
        outline: none;
    }
    #timesContainer .full-admin-student-mobile-value.times-mobile-availability-value[contenteditable="true"] {
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.35;
        letter-spacing: -0.02em;
        -webkit-text-size-adjust: 100%;
        color: #475569;
        padding: 0.2rem 0.45rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        text-align: right;
        outline: none;
    }
    #timesContainer .full-admin-student-mobile-value.times-mobile-namn-tag[contenteditable="true"]:focus,
    #timesContainer .full-admin-student-mobile-value[data-times-mobile="theory"][contenteditable="true"]:focus,
    #timesContainer .full-admin-student-mobile-value[data-times-mobile="driving"][contenteditable="true"]:focus,
    #timesContainer .full-admin-student-mobile-value.times-mobile-availability-value[contenteditable="true"]:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.15);
    }
    #timesContainer .full-admin-student-mobile-field--iconrow select.times-transmission-select:focus,
    #timesContainer .full-admin-student-mobile-field--iconrow select.times-mobile-transmission:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.15);
        outline: none;
    }
    #timesContainer .full-admin-student-mobile-note.note-cell {
        font-size: 16px;
        line-height: 1.35;
        -webkit-text-size-adjust: 100%;
        padding: 0.28rem 0.5rem;
        border-radius: 8px;
    }
    #timesContainer button.times-mobile-teacher-tag {
        display: inline-block;
        max-width: 100%;
        margin: 0;
        padding: 0.2rem 0.55rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.02em;
        color: var(--primary);
        word-break: break-word;
        text-align: right;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    #timesContainer button.times-mobile-teacher-tag:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    #timesContainer .full-admin-student-mobile-field--iconrow select.times-transmission-select,
    #timesContainer .full-admin-student-mobile-field--iconrow select.times-mobile-transmission {
        justify-self: end;
        width: min(8.85rem, 100%);
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.01em;
        -webkit-text-size-adjust: 100%;
        padding: 0.2rem 1.85rem 0.2rem 0.45rem;
        text-align: right;
        text-align-last: right;
        -webkit-appearance: none;
        appearance: none;
        background-color: #eff6ff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.4rem center;
        background-size: 12px;
        border: 1px solid #bfdbfe;
        border-radius: 7px;
        color: #1d4ed8;
        cursor: pointer;
    }
    #timesContainer .times-mobile-teacher-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        min-width: 0;
    }
    #timesContainer .times-mobile-availability-value {
        white-space: pre-wrap;
        word-break: break-word;
        min-height: 2.25rem;
    }
    #studentArchiveContainer .full-admin-student-mobile-field--note .full-admin-student-mobile-note {
        cursor: default;
        user-select: text;
    }
    /* Elev arkiv mobil: utbildningskort-rad under namn i sammanfattningen */
    body.full-admin-mode .full-admin-archived-student-meta,
    #studentArchiveContainer .full-admin-archived-student-meta {
        display: block;
        font-size: 0.68rem;
        color: #64748b;
        font-weight: 500;
        line-height: 1.3;
        margin-top: 0.1rem;
    }
}

/* Column alignment for teacher archive table (Lärar arkiv) */
#teacherArchiveContainer .student-table th:nth-child(3),
#teacherArchiveContainer .student-table td:nth-child(3),
#teacherArchiveContainer .student-table th:nth-child(4),
#teacherArchiveContainer .student-table td:nth-child(4) {
    text-align: center;
}

/* Emphasize student name */
.student-table .name-cell {
    font-weight: 600;
}

/* Växellåda: dropdown i Tillgänglighet – pill-liknande med pil */
.student-table .transmission-cell {
    padding: 0.5rem 1rem 0.65rem;
}
.student-table .transmission-cell select {
    width: 100%;
    max-width: 10rem;
    padding: 0.4rem 2rem 0.4rem 1rem;
    border: none;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    background: hsl(217, 100%, 95%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233A7EED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.6rem center;
    background-size: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    text-align-last: center;
}
.student-table .transmission-cell select:hover {
    background-color: hsl(217, 100%, 92%);
}
.student-table .transmission-cell select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary);
}
.student-table .transmission-cell .pill {
    display: inline-block;
    border-radius: 999px;
    background: hsl(217, 100%, 95%);
    color: var(--primary);
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    margin-top: 0.3rem;
    min-width: 4rem;
}

/* Pill tags: Testlektion (Ja/Nej) – style the inner span so the cell keeps its border */
.student-table .test-lesson-cell {
    padding: 0.5rem 1rem 0.65rem;
}
.student-table .test-lesson-cell .pill {
    display: inline-block;
    border-radius: 999px;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    margin-top: 0.3rem;
    min-width: 2.5rem;
}
.student-table tr.test-lesson-ja .test-lesson-cell .pill {
    background: hsl(142, 52%, 46%);
    color: #fff;
}
.student-table tr.test-lesson-nej .test-lesson-cell .pill {
    background: hsl(0, 0%, 88%);
    color: hsl(0, 0%, 30%);
}

/* Radera button in table */
.student-table .delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
    margin: 0;
    width: auto;
    background: #fff;
    color: var(--destructive);
    border: 1.5px solid var(--destructive);
}
.student-table .teacher-archive-button {
    margin-bottom: 0.6rem;
}
.student-table .delete-button svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.student-table .delete-button:hover {
    background-color: hsl(0, 85%, 96%);
    color: hsl(0, 72%, 45%);
    border-color: hsl(0, 72%, 45%);
}

/* Full admin Skolor: Radera – same block size as Logga in */
.full-admin-school-archive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    background: #fff;
    color: var(--destructive);
    border: 1.5px solid var(--destructive);
    border-radius: var(--radius);
}
.full-admin-school-archive-btn:hover {
    background-color: hsl(0, 85%, 96%);
    border-color: hsl(0, 72%, 45%);
    color: hsl(0, 72%, 45%);
}

/* Status pills (Aktiv / Inte aktiv) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}
.status-pill__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.status-pill--active {
    background: hsl(142, 70%, 95%);
    color: hsl(142, 45%, 30%);
}
.status-pill--active .status-pill__dot {
    background: hsl(142, 52%, 46%);
}
.status-pill--inactive {
    background: hsl(0, 85%, 96%);
    color: hsl(0, 70%, 40%);
}
.status-pill--inactive .status-pill__dot {
    background: hsl(0, 72%, 55%);
}

/* Availability block: Format + textarea + button – kompakt layout */
.availability-block {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.availability-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
}
.availability-input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.4;
    height: 72px;
    resize: vertical;
    min-height: 72px;
    max-height: 180px;
}
.btn-add-time {
    flex-shrink: 0;
    padding: 0.38rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Format-hint – kompakt */
.availability-format {
    padding: 0.5rem 0.75rem;
    background: hsl(217, 40%, 97%);
    border: 1px solid hsl(217, 50%, 90%);
    border-radius: var(--radius);
    font-size: 0.75rem;
}
.availability-format-label {
    display: inline-block;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.availability-format-desc {
    color: var(--muted-fg);
    margin: 0 0 0.35rem 0;
    line-height: 1.35;
}
.availability-format-desc code {
    background: hsl(217, 30%, 92%);
    padding: 0.08rem 0.28rem;
    border-radius: 3px;
    font-size: 0.7rem;
    color: var(--primary);
}
.availability-format-example {
    margin: 0;
    padding: 0.4rem 0.6rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--fg);
}
.availability-format-example code {
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}
.availability-cell { white-space: pre-line; min-width: 280px; line-height: 1.5; }

/* ===== Manual Car Setting ===== */
.manual-car-setting {
    grid-column: span 2;
}
.manual-car-setting label {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted-fg);
    font-weight: 500;
    margin-bottom: 0.35rem;
}
.manual-car-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.manual-car-input {
    width: 5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    text-align: center;
}
.manual-car-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.2);
}
.btn-save-cars {
    padding: 0.38rem 0.75rem;
    font-size: 0.8rem;
}

/* ===== Schedule Hours Inputs ===== */
.schedule-hours-row {
    grid-column: span 2;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.schedule-hours-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.schedule-hours-field label {
    font-size: 0.8125rem;
    color: var(--muted-fg);
    font-weight: 500;
}

.schedule-hours-field select {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    min-width: 100px;
}

.schedule-hours-separator {
    color: var(--muted-fg);
    font-size: 1rem;
    padding-bottom: 0.5rem;
}

.schedule-hours-inputs {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.schedule-hours-inputs .schedule-hours-field select {
    width: 100%;
}

/* ===== Custom Alert/Warning Dialog ===== */
.custom-alert-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 2000;
}
.custom-alert-overlay.active { display: block; }

.custom-alert-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    z-index: 2001;
    padding: 1.4rem 1.5rem 1.25rem;
    min-width: 300px;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
}
.custom-alert-modal.active { display: block; }

.custom-alert-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-alert-icon.warning {
    background: hsl(40, 100%, 94%);
}
.custom-alert-icon.warning svg {
    color: hsl(35, 92%, 50%);
}
.custom-alert-icon.error {
    background: hsl(0, 100%, 95%);
}
.custom-alert-icon.error svg {
    color: var(--destructive);
}
.custom-alert-icon.info {
    background: hsl(217, 100%, 95%);
}
.custom-alert-icon.info svg {
    color: var(--primary);
}
.custom-alert-icon.loading {
    background: hsl(217, 100%, 95%);
    color: var(--primary);
}

.custom-alert-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.75rem;
}

.custom-alert-body {
    font-size: 0.85rem;
    color: var(--muted-fg);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    text-align: center;
    white-space: pre-line;
}

.custom-alert-body .conflict-list {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: hsl(40, 20%, 97%);
    border: 1px solid hsl(40, 15%, 90%);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    max-height: 180px;
    overflow-y: auto;
}

.custom-alert-body .conflict-hint {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--muted-fg);
    font-style: italic;
}

.backup-progress {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-align: left;
}

.backup-progress-detail {
    color: #1e293b;
    font-weight: 600;
    text-align: center;
}

.backup-progress-meta {
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
}

.backup-progress-steps {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.backup-progress-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #64748b;
}

.backup-progress-step.is-active {
    color: #1e293b;
    font-weight: 600;
}

.backup-progress-step.is-done {
    color: #0f766e;
}

.backup-progress-step-dot {
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 0.7rem;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    background: #fff;
}

.backup-progress-step.is-active .backup-progress-step-dot {
    border-color: var(--primary);
    background: var(--primary);
}

.backup-progress-step.is-done .backup-progress-step-dot {
    border-color: #0f766e;
    background: #0f766e;
}

.backup-progress-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(37, 99, 235, 0.18);
    border-top-color: var(--primary);
    border-radius: 999px;
    animation: backup-progress-spin 0.85s linear infinite;
}

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

.custom-alert-close {
    min-width: 100px;
}

.custom-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* Elever: Importera-sektion och Admin-knapp på samma rad, knappen i linje med rubriken */
.profiles-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.profiles-top-row .upload-container {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
/* Subadmin: Elever top bar (like full admin title pill) */
.subadmin-dash-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 0.85rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-sizing: border-box;
}
.subadmin-dash-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1;
}
.subadmin-dash-menu-toggle:hover { background: #e5e7eb; }
.subadmin-dash-topbar-title-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: min(340px, calc(100vw - 11rem));
    z-index: 0;
    pointer-events: none;
}
.subadmin-dash-topbar-title {
    margin: 0;
    padding: 0.42rem 1.2rem;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1e3a8a;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 2px 8px rgba(37, 99, 235, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Subadmin Elever: page look like mock */
#profilesContainer {
    background: #f3f4f6;
    border-radius: 16px;
    padding-top: 0;
}
#profilesContainer .subadmin-elever-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.25rem 0.25rem 0.5rem;
}
#profilesContainer .subadmin-elever-head-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#profilesContainer .subadmin-elever-btn {
    border-radius: 12px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
}
#profilesContainer .subadmin-elever-btn-icon {
    display: inline-flex;
}

#profilesContainer .subadmin-elever-import-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    background: #f3f4f6;
    border: 1px dashed #e5e7eb;
    border-radius: 16px;
    padding: 1.4rem 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1rem;
}
#profilesContainer .subadmin-elever-import-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: hsl(217, 90%, 96%);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#profilesContainer .subadmin-elever-import-text h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}
#profilesContainer .subadmin-elever-import-text p {
    margin: 0.15rem 0 0;
    color: #6b7280;
    font-size: 0.8125rem;
    line-height: 1.35;
}
#profilesContainer .subadmin-elever-import-action {
    border-radius: 12px;
    padding: 0.45rem 1rem;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.25rem;
    gap: 0.45rem;
}

/* Collapsible card (Ny elev) */
#profilesContainer #profilesNewStudentCard[hidden] {
    display: none !important;
}
#profilesContainer #profilesNewStudentCard {
    margin-bottom: 1rem;
}
#profilesContainer #profilesNewStudentCard .full-admin-collection-card {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#profilesContainer .subadmin-elever-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

/* Student list styling intentionally uses existing (older) styles */
.upload-container { margin-bottom: 1rem; }
.upload-info { font-size: 0.8125rem; color: var(--muted-fg); margin-bottom: 0.5rem; }
.file-input { display: none; }
.profile-counter { margin-top: 0.75rem; font-weight: 600; color: var(--fg); text-align: right; font-size: 0.875rem; }

/* Tillgänglighet: sökfält och Admin-knapp på samma rad */
.times-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.times-top-row .search-container {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
/* times-nav-inline removed (topbar now used) */

.search-container {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.search-container--pill {
    padding: 0;
    background: transparent;
    border: none;
}
.search-container--pill .search-input {
    border-radius: 999px;
    border: 1px solid hsl(217, 90%, 75%);
    box-shadow: 0 0 0 1px hsla(217, 90%, 75%, 0.4);
    padding: 0.65rem 0.9rem;
}
.search-container--pill .search-input::placeholder {
    color: var(--muted-fg);
}
.search-input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    transition: border-color 0.15s;
}
.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.2);
}

/* Tillgänglighet redesign */
#timesContainer .times-entry-form {
    margin-bottom: 1rem;
}
#timesContainer .times-entry-card {
    border-color: #dbe5f0;
    border-top: 4px solid #2563eb;
    border-radius: 16px;
    padding: 1rem 1rem 1.1rem;
}
#timesContainer .times-entry-card-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
#timesContainer .times-entry-card-head-row .times-entry-card-head {
    align-items: flex-start;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}
#timesContainer .times-entry-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}
#timesContainer .times-entry-import-btn {
    border-radius: 12px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
#timesContainer .times-entry-import-btn-icon {
    display: inline-flex;
}
#timesContainer .times-entry-card-head {
    align-items: flex-start;
    margin-bottom: 0.35rem;
}
#timesContainer .times-entry-card .full-admin-collection-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #eef4ff;
    color: #2563eb;
}
#timesContainer .times-entry-card .full-admin-collection-title {
    font-size: 1.05rem;
    font-weight: 700;
}
#timesContainer .times-entry-card .full-admin-collection-subtitle {
    font-size: 0.9rem;
}
#timesContainer .times-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}
#timesContainer .times-entry-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
#timesContainer .times-entry-field--wide {
    grid-column: span 2;
}
#timesContainer .times-entry-field--full {
    grid-column: 1 / -1;
}
#timesContainer .times-entry-field label,
#timesContainer .teacher-selection-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
}
#timesContainer .times-entry-field > input:not([type="checkbox"]),
#timesContainer .times-entry-field > select,
#timesContainer .times-teacher-dropdown-button {
    width: 100%;
    min-height: 44px;
    padding: 0.72rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    box-shadow: none;
}
#timesContainer .times-entry-field > input:not([type="checkbox"]):focus,
#timesContainer .times-entry-field > select:focus,
#timesContainer .times-teacher-dropdown-button:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
#timesContainer .times-entry-field > select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 1.15rem center;
    background-size: 12px;
    padding-right: 2.75rem;
}
#timesContainer .teacher-selection-inline {
    grid-column: span 1;
    align-self: auto;
    margin: 0;
}
#timesContainer .times-teacher-dropdown-button {
    border-radius: 10px;
    color: #111827;
    font-weight: 400;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.85rem center;
    background-size: 12px;
    padding-right: 2.2rem;
}
#timesContainer .teacher-dropdown-content {
    border-radius: 12px;
}
#timesContainer .teacher-checkbox-item {
    padding: 0.65rem 0.85rem;
    gap: 0.65rem;
}
#timesContainer .teacher-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    flex-shrink: 0;
}
#timesContainer .teacher-checkbox-item .teacher-checkbox-label {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.35;
}
#timesContainer .times-entry-availability {
    grid-column: 1 / -1;
    gap: 0.8rem;
    margin: 0;
}
#timesContainer .availability-format-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.72rem 0.85rem;
    border: 1px solid #f3e3a6;
    border-radius: 12px;
    background: #fffaf0;
    color: #8a6a19;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
#timesContainer .availability-format-toggle-left {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}
#timesContainer .availability-format-toggle-icon,
#timesContainer .availability-format-toggle-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#timesContainer .availability-format-toggle[aria-expanded="true"] .availability-format-toggle-caret {
    transform: rotate(180deg);
}
#timesContainer .availability-format {
    padding: 0.9rem 1rem;
    background: #fffdf7;
    border: 1px solid #f3e3a6;
    border-radius: 12px;
    font-size: 0.78rem;
}
#timesContainer .availability-format-desc {
    margin-bottom: 0.55rem;
    line-height: 1.5;
}
#timesContainer .availability-input {
    width: 100%;
    min-height: 72px;
    height: 72px;
    max-height: none;
    padding: 0.85rem 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.45;
}
#timesContainer .availability-input:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
#timesContainer .times-entry-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
#timesContainer .btn-add-time {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}
#timesContainer .times-table-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#timesContainer .times-table-card .student-table.subadmin-elever-table {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

/* Name suggestion dropdown for schedule slots */
.name-suggestions {
    position: absolute;
    z-index: 1200;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    padding: 0.25rem 0;
    max-height: 240px;
    overflow-y: auto;
    min-width: 180px;
    font-size: 0.8125rem;
}
.name-suggestions-item {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}
.name-suggestions-item:hover,
.name-suggestions-item.active {
    background: var(--slot-hover);
}

/* ===== Modals ===== */
.modal {
    display: none;
    position: fixed;
    background: var(--surface);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 1002;
    min-width: 300px;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--border);
}
.modal.active { display: block; }
.modal > button.btn { margin-top: 0.5rem; }
#studentModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#restModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#rensaDayModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#autofillDayModal,
#restDayModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#changePasswordModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#changeTeacherUsernameModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#changeTeacherUsernameModal .search-input { width: 100%; margin-bottom: 0.75rem; }
#changeScheduleHoursModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#changeDayHoursModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#createSubAdminModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modal--create-subadmin {
    min-width: 420px;
    max-width: 540px;
    width: min(92vw, 540px);
    padding: 1.75rem;
}
.modal--create-subadmin .create-subadmin-form-grid {
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.modal--create-subadmin .create-subadmin-form-grid input {
    min-height: 42px;
    padding: 0.65rem 0.85rem;
}
.modal--create-subadmin .create-subadmin-password-wrap {
    grid-column: 1 / -1;
}
.modal--create-subadmin .modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
#changeFullAdminModal { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Räkning page */
.rakning-body {
    padding: 1.5rem 2rem 2.5rem;
    max-width: 960px;
    margin: 0 auto;
}
.rakning-hero-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid hsl(217, 90%, 88%);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
.giltig-rakning-tag {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    line-height: 1.35;
    white-space: nowrap;
    user-select: none;
    z-index: 1;
}
.giltig-rakning-tag[hidden] {
    display: none !important;
}
.rakning-hero-text {
    text-align: center;
}

.rakning-back-btn {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-inline: 0.85rem;
    padding-block: 0.4rem;
    border-radius: 999px;
    border: 1px solid hsl(217, 90%, 75%);
    color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0 0 1px hsla(217, 90%, 75%, 0.5);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}
.rakning-back-btn:hover {
    background: hsl(217, 90%, 97%);
    box-shadow: 0 0 0 2px hsla(217, 90%, 75%, 0.35);
}
.rakning-back-btn svg { flex-shrink: 0; }

.rakning-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: hsl(217, 70%, 50%);
    margin: 0 0 0.15rem;
    line-height: 1.2;
}
.rakning-pnr {
    font-size: 0.9rem;
    font-weight: 600;
    color: hsl(220, 15%, 40%);
    margin: 0 0 0.3rem;
}
.rakning-pnr:empty { display: none; }
.rakning-subtitle {
    font-size: 0.85rem;
    color: var(--muted-fg);
    margin: 0;
}

.rakning-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.rakning-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid hsl(217, 90%, 88%);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
.rakning-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: hsl(217, 90%, 96%);
    color: var(--primary);
    flex-shrink: 0;
}
.rakning-stat-icon svg { stroke: var(--primary); }
.rakning-stat-text {
    display: flex;
    flex-direction: column;
}
.rakning-stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted-fg);
    line-height: 1.2;
}
.rakning-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: hsl(220, 15%, 25%);
    line-height: 1.25;
}

.rakning-list-card {
    background: #fff;
    border: 1px solid hsl(217, 90%, 88%);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.rakning-list-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    padding: 0.9rem 1.25rem;
    border-bottom: none;
    background: var(--primary);
}

.rakning-list {
    max-height: 55vh;
    overflow-y: auto;
}

.rakning-lesson-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid hsl(220, 20%, 94%);
    transition: background 0.12s;
}
.rakning-lesson-row:last-child { border-bottom: none; }
.rakning-lesson-row:hover { background: hsl(217, 60%, 98%); }

.rakning-lesson-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    border: none;
}
.rakning-lesson-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.rakning-lesson-date {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fg);
}
.rakning-lesson-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--muted-fg);
}
.rakning-lesson-time svg {
    flex-shrink: 0;
    color: var(--muted-fg);
}

.rakning-lesson-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.rakning-teacher-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: hsl(217, 90%, 96%);
    border: 1px solid hsl(217, 90%, 82%);
    border-radius: 20px;
    padding: 0.3rem 0.7rem;
}
.rakning-teacher-pill svg {
    flex-shrink: 0;
    stroke: var(--primary);
}
.rakning-lesson-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: hsl(220, 15%, 25%);
    white-space: nowrap;
}
.rakning-type-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1em 0.5em;
    border-radius: 4px;
    margin-left: 0.5em;
    vertical-align: middle;
}
.rakning-type-exam {
    background: hsl(30, 90%, 93%);
    color: hsl(30, 80%, 35%);
}
.rakning-type-test {
    background: hsl(270, 60%, 93%);
    color: hsl(270, 50%, 35%);
}

.rakning-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid hsl(217, 90%, 92%);
    background: hsl(217, 90%, 97%);
}
.rakning-footer-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
}
.rakning-footer-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(220, 15%, 25%);
}

@media (max-width: 640px) {
    .rakning-body { padding: 1rem; }
    .rakning-hero-card { flex-direction: column; align-items: center; padding-bottom: 3.5rem; }
    .rakning-hero-card:has(.giltig-rakning-tag:not([hidden])) {
        padding-top: 2.85rem;
    }
    .giltig-rakning-tag {
        top: 0.85rem;
        left: 1rem;
        font-size: 0.8125rem;
        padding: 0.3rem 0.65rem;
    }
    body.full-admin-mode #lessonCountContainer.lesson-count--full-admin .rakning-hero-card {
        padding-bottom: 1.25rem;
    }
    .rakning-back-btn { position: static; transform: none; margin-top: 0.75rem; }
    .rakning-summary-cards { grid-template-columns: 1fr; }
    .rakning-lesson-row { flex-wrap: wrap; }
    .rakning-lesson-right { width: 100%; justify-content: flex-end; margin-top: 0.25rem; }
}

.times-actions-cell {
    text-align: center;
    vertical-align: middle;
}
.times-actions-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
    min-width: 4.4rem;
}
.times-sms-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.62rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--primary);
    background: #fff;
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}
.times-sms-button:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}
.times-actions-cell .times-count-button,
.student-table .times-count-button {
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.5rem;
}
.times-actions-cell .delete-button {
    margin: 0;
    padding: 0.25rem 0.55rem;
    font-size: 0.74rem;
    width: 100%;
    box-sizing: border-box;
}

.modal h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--fg); }

.modal-day-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1.5px solid #bfdbfe;
}

.student-list { display: grid; gap: 0.4rem; max-height: 60vh; overflow-y: auto; }
.student-item {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.12s;
    font-size: 0.8125rem;
}
.student-item:hover { background-color: var(--slot-hover); }

.rest-list-item { padding: 0.75rem 1rem; }
.rest-list-item > strong { display: block; margin-bottom: 0.35rem; }
.rest-availability {
    font-size: 0.8125rem;
    color: var(--muted-fg);
    line-height: 1.45;
    white-space: normal;
}

#restModal .student-list { gap: 0.25rem; }
#restModal .rest-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.65rem;
    cursor: default;
}
#restModal .rest-list-item:hover { background-color: transparent; }
#restModal .rest-list-item > strong {
    margin-bottom: 0;
    line-height: 1.25;
    font-size: 0.8125rem;
}
#restModal .rest-availability {
    font-size: 0.75rem;
    line-height: 1.25;
}

/* Rensa day selector modal */
.modal-hint { font-size: 0.8125rem; color: var(--muted-fg); margin-bottom: 0.75rem; }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.password-input-wrapper {
    position: relative;
}
.password-input-wrapper .password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.1rem;
    color: var(--muted-fg);
}
.password-input-wrapper .password-toggle:hover {
    color: var(--primary);
}

.teacher-password-subtitle {
    margin: 0 0 0.35rem;
}
#changePasswordModal .teacher-password-subtitle {
    margin-bottom: 0.5rem;
}
.password-field-with-strength {
    margin-bottom: 0.75rem;
}
.password-field-with-strength .teacher-password-strength {
    margin-top: 0.4rem;
}
.teacher-password-strength {
    display: block;
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.2s ease;
}
.teacher-password-strength[hidden] {
    display: none !important;
}
.teacher-password-strength--weak,
.teacher-password-strength[data-strength="weak"] {
    color: #dc2626;
}
.teacher-password-strength--medium,
.teacher-password-strength[data-strength="medium"] {
    color: #fdba74;
}
.teacher-password-strength--ok,
.teacher-password-strength[data-strength="ok"] {
    color: #16a34a;
}
#changePasswordModal .teacher-password-strength {
    min-height: 1.25rem;
}

.rensa-day-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.rensa-day-buttons .btn { width: 100%; }

/* ===== Booked Toggle Buttons ===== */
.booked-toggle {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: var(--radius);
    margin-bottom: 0.35rem;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    font-size: 0.75rem;
    font-family: var(--font-sans);
    transition: background-color 0.15s, color 0.15s;
}
.booked-toggle-off { background: var(--secondary); color: var(--muted-fg); }
.booked-toggle-on { background: var(--booked-toggle-on); color: var(--surface); }
.booked-new-toggle-off { background: var(--secondary); color: var(--muted-fg); }
.booked-new-toggle-on { background: var(--booked-new-toggle-on); color: var(--surface); }
.booked-toggle:hover { opacity: 0.9; }

.booked-student { background-color: var(--booked-bg) !important; color: #000 !important; }
.booked-student .teachers-cell { background-color: var(--booked-accent) !important; }
.booked-student .teacher-display { background-color: var(--booked-accent) !important; color: #000 !important; }
.booked-new-student { background-color: var(--booked-new-bg) !important; color: #000 !important; }
.booked-new-student .teachers-cell { background-color: var(--booked-new-accent) !important; }
.booked-new-student .teacher-display { background-color: var(--booked-new-accent) !important; color: #000 !important; }
.booked-student td, .booked-new-student td,
.booked-student td[contenteditable="true"], .booked-new-student td[contenteditable="true"] { color: #000 !important; }
.booked-student td[contenteditable="true"]:hover, .booked-new-student td[contenteditable="true"]:hover,
.booked-student td[contenteditable="true"]:focus, .booked-new-student td[contenteditable="true"]:focus {
    background-color: rgba(255,255,255,0.2) !important;
}
.student-table tr.times-status-row--uppkorning td,
.student-table tr.times-status-row--vecka td,
.student-table tr.times-status-row--past td,
.student-table tr.times-status-row--sms td {
    font-weight: 600;
}
.student-table tr.times-status-row--uppkorning td {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.student-table tr.times-status-row--vecka td {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}
.student-table tr.times-status-row--past td {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.student-table tr.times-status-row--sms td {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}
.student-table tr.times-status-row--uppkorning td[contenteditable="true"]:hover,
.student-table tr.times-status-row--vecka td[contenteditable="true"]:hover,
.student-table tr.times-status-row--past td[contenteditable="true"]:hover,
.student-table tr.times-status-row--sms td[contenteditable="true"]:hover,
.student-table tr.times-status-row--uppkorning td[contenteditable="true"]:focus,
.student-table tr.times-status-row--vecka td[contenteditable="true"]:focus,
.student-table tr.times-status-row--past td[contenteditable="true"]:focus,
.student-table tr.times-status-row--sms td[contenteditable="true"]:focus {
    filter: brightness(0.99);
}
.student-table tr.times-status-row--uppkorning .teacher-display,
.student-table tr.times-status-row--vecka .teacher-display,
.student-table tr.times-status-row--past .teacher-display,
.student-table tr.times-status-row--sms .teacher-display {
    background: transparent !important;
    color: inherit !important;
    border: 1px solid currentColor;
}
.student-table tr.times-status-row--uppkorning .teacher-display:hover,
.student-table tr.times-status-row--vecka .teacher-display:hover,
.student-table tr.times-status-row--past .teacher-display:hover,
.student-table tr.times-status-row--sms .teacher-display:hover {
    background: rgba(255,255,255,0.18) !important;
}
.student-table tr.times-status-row--uppkorning .transmission-cell select,
.student-table tr.times-status-row--vecka .transmission-cell select,
.student-table tr.times-status-row--past .transmission-cell select,
.student-table tr.times-status-row--sms .transmission-cell select {
    color: inherit;
    border: 1px solid currentColor;
    background-color: rgba(255,255,255,0.28);
}
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning {
    background: #dcfce7;
    border-color: #86efac;
}
#timesContainer .full-admin-student-mobile.times-status-row--vecka {
    background: #dbeafe;
    border-color: #93c5fd;
}
#timesContainer .full-admin-student-mobile.times-status-row--past {
    background: #fef3c7;
    border-color: #fbbf24;
}
#timesContainer .full-admin-student-mobile.times-status-row--sms {
    background: #fee2e2;
    border-color: #fca5a5;
}
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-summary,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-summary,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-summary,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-summary,
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-body,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-body,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-body,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-body {
    background: transparent;
}
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-name,
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-pnr,
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-value,
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-label,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-name,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-pnr,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-value,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-label,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-name,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-pnr,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-value,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-label,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-name,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-pnr,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-value,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-label {
    color: inherit !important;
}
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning,
#timesContainer .full-admin-student-mobile.times-status-row--vecka,
#timesContainer .full-admin-student-mobile.times-status-row--past,
#timesContainer .full-admin-student-mobile.times-status-row--sms {
    font-weight: 600;
}
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning {
    color: #166534;
}
#timesContainer .full-admin-student-mobile.times-status-row--vecka {
    color: #1d4ed8;
}
#timesContainer .full-admin-student-mobile.times-status-row--past {
    color: #92400e;
}
#timesContainer .full-admin-student-mobile.times-status-row--sms {
    color: #b91c1c;
}
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning button.times-mobile-teacher-tag,
#timesContainer .full-admin-student-mobile.times-status-row--vecka button.times-mobile-teacher-tag,
#timesContainer .full-admin-student-mobile.times-status-row--past button.times-mobile-teacher-tag,
#timesContainer .full-admin-student-mobile.times-status-row--sms button.times-mobile-teacher-tag,
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-field--iconrow select.times-transmission-select,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-field--iconrow select.times-transmission-select,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-field--iconrow select.times-transmission-select,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-field--iconrow select.times-transmission-select,
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .full-admin-student-mobile-field--iconrow select.times-mobile-transmission,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .full-admin-student-mobile-field--iconrow select.times-mobile-transmission,
#timesContainer .full-admin-student-mobile.times-status-row--past .full-admin-student-mobile-field--iconrow select.times-mobile-transmission,
#timesContainer .full-admin-student-mobile.times-status-row--sms .full-admin-student-mobile-field--iconrow select.times-mobile-transmission,
#timesContainer .full-admin-student-mobile.times-status-row--uppkorning .times-mobile-availability-value,
#timesContainer .full-admin-student-mobile.times-status-row--vecka .times-mobile-availability-value,
#timesContainer .full-admin-student-mobile.times-status-row--past .times-mobile-availability-value,
#timesContainer .full-admin-student-mobile.times-status-row--sms .times-mobile-availability-value {
    background-color: rgba(255,255,255,0.28) !important;
    border-color: currentColor !important;
    color: inherit !important;
}


/* Settings / Teacher archive buttons */
.student-table .delete-button.teacher-archive-button {
    background: #fff;
    color: hsl(220, 50%, 35%);
    border: 1.5px solid hsl(210, 70%, 70%);
    border-radius: 999px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.45rem;
}
.student-table .delete-button.teacher-archive-button:hover {
    background: hsla(210, 100%, 96%, 1);
    border-color: hsl(210, 70%, 65%);
    color: hsl(220, 50%, 30%);
}
.teacher-delete-round {
    border-radius: 999px;
}

.teacher-password-edit {
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--fg);
}
.teacher-password-edit:hover {
    background: var(--secondary);
}

.student-table .teacher-view-schedule {
    background: transparent;
    color: var(--primary);
    border: none;
    padding: 0.25rem;
}

/* Full admin Backups page */
#fullAdminBackupsPanel .full-admin-collection-title {
    margin-bottom: 0.35rem;
}

.full-admin-backups-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}
.backup-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0.48rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    background: #fff;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.backup-toolbar-btn:hover {
    cursor: pointer;
}
.backup-toolbar-btn--neutral {
    color: hsl(220, 45%, 32%);
    border-color: hsl(217, 70%, 78%);
    background: hsl(210, 100%, 98%);
}
.backup-toolbar-btn--neutral:hover {
    background: hsl(210, 100%, 96%);
    border-color: hsl(217, 70%, 70%);
}
.backup-toolbar-btn--primary {
    color: #fff;
    border-color: hsl(217, 91%, 60%);
    background: hsl(217, 91%, 56%);
}
.backup-toolbar-btn--primary:hover {
    background: hsl(217, 91%, 50%);
    border-color: hsl(217, 91%, 52%);
}
.backup-toolbar-btn--warning {
    color: hsl(28, 85%, 32%);
    border-color: hsl(39, 90%, 76%);
    background: hsl(48, 100%, 96%);
}
.backup-toolbar-btn--warning:hover {
    background: hsl(48, 100%, 92%);
    border-color: hsl(39, 90%, 68%);
}
.backup-toolbar-btn--danger {
    color: hsl(358, 70%, 38%);
    border-color: hsl(354, 85%, 82%);
    background: hsl(350, 100%, 97%);
}
.backup-toolbar-btn--danger:hover {
    background: hsl(350, 100%, 94%);
    border-color: hsl(354, 85%, 74%);
}

.backup-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 2rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    background: #fff;
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.backup-action-btn:hover {
    cursor: pointer;
}
.backup-action-btn svg {
    flex: 0 0 auto;
}
.backup-action-btn--restore {
    color: hsl(220, 50%, 35%);
    border-color: hsl(210, 70%, 70%);
    background: hsl(210, 100%, 98%);
}
.backup-action-btn--restore:hover {
    background: hsla(210, 100%, 96%, 1);
    border-color: hsl(210, 70%, 65%);
    color: hsl(220, 50%, 30%);
}
.backup-action-btn--delete {
    color: hsl(358, 70%, 38%);
    border-color: hsl(354, 85%, 82%);
    background: hsl(350, 100%, 97%);
}
.backup-action-btn--delete:hover {
    background: hsl(350, 100%, 94%);
    border-color: hsl(354, 85%, 74%);
}
.full-admin-backup-detail {
    display: block;
    color: #1e293b;
    text-align: left;
    line-height: 1.4;
}

@media (max-width: 768px) {
    #fullAdminBackupsPanel .full-admin-backups-toolbar-actions {
        width: 100%;
        margin-left: 0;
    }
    #fullAdminBackupsPanel .backup-toolbar-btn,
    #fullAdminBackupsPanel .backup-action-btn {
        width: 100%;
        margin-right: 0;
    }
}
.student-table .teacher-view-schedule:hover {
    background: var(--slot-hover);
}
.student-table .teacher-view-cell {
    text-align: center;
    padding: 0.4rem 0;
}

.student-table .teacher-view-schedule svg {
    width: 20px;
    height: 20px;
}

/* ===== Teacher Selection ===== */
.teacher-selection {
    grid-column: span 2;
    margin-bottom: 0.75rem;
    position: relative;
}
/* Inline till höger om Körprov i Tillgänglighet-formuläret */
.teacher-selection-inline {
    grid-column: span 1;
    margin-bottom: 0;
    align-self: end;
}
.teacher-selection-inline .teacher-selection-label {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}
.teacher-selection-label { display: block; margin-bottom: 0.4rem; color: var(--muted-fg); font-size: 0.8125rem; }
.teacher-selection-hint {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-fg);
    font-weight: 400;
}
.teacher-dropdown-button {
    width: 100%;
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    border: 1px solid hsl(217, 90%, 75%);
    box-shadow: 0 0 0 1px hsla(217, 90%, 75%, 0.4);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233A7EED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.75rem center;
    background-size: 12px;
    color: var(--primary);
    font-weight: 500;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.teacher-dropdown-button:hover {
    background-color: hsl(217, 100%, 97%);
}
.teacher-dropdown-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsla(217, 90%, 55%, 0.35);
}

.teacher-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid hsl(217, 40%, 90%);
    border-radius: 12px;
    margin-top: 6px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    padding: 0.25rem 0;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1000;
}
.teacher-dropdown-content.show { display: block; }

.teacher-checkbox-item {
    padding: 0.45rem 0.75rem;
    background: transparent;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}
.teacher-checkbox-item:hover { background: hsl(217, 100%, 97%); }
.teacher-checkbox-item .teacher-checkbox-label {
    flex-grow: 1;
    cursor: pointer;
    user-select: none;
    font-size: 0.8125rem;
    color: var(--fg);
}
.teacher-checkbox-item input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: var(--primary);
}

.teachers-cell { min-width: 120px; cursor: pointer; }
.teacher-display {
    padding: 0.4rem;
    background: var(--card);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
    color: var(--fg);
    font-size: 0.8125rem;
}
.teacher-display:hover { background: var(--secondary); }

.teacher-edit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 1002;
    min-width: 300px;
    border: 1px solid var(--border);
}
.teacher-edit-modal h3 { margin-top: 0; margin-bottom: 0.75rem; color: var(--fg); font-size: 1rem; }
.teacher-edit-modal .teacher-checkboxes { margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.35rem; }

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1001;
}
.modal-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.75rem; }

/* ===== Login ===== */
#login-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 1001;
    display: none;
    width: 320px;
    border: 1px solid var(--border);
}
 .login-logo {
    display: block;
    margin: 0 auto 0.75rem auto;
    max-width: 180px;
    height: auto;
 }
body.login-mode #login-modal { display: block; }
#login-modal h2 { font-size: 1.25rem; font-weight: 700; color: var(--fg); margin-bottom: 1rem; text-align: center; }
#login-form div { margin-bottom: 0.75rem; }
.login-captcha-wrap { display: none; margin-top: 0.75rem; }
.login-captcha-wrap.visible { display: block; }
.login-captcha-wrap label { display: block; margin-bottom: 0.35rem; color: var(--muted-fg); font-size: 0.8125rem; }
.login-captcha-wrap input { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
#login-form label { display: block; margin-bottom: 0.35rem; color: var(--muted-fg); font-size: 0.8125rem; }
#login-form input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}
#login-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px hsla(172, 50%, 40%, 0.15); }
#login-form button { width: 100%; padding: 0.6rem; }
#login-error { margin-top: 0.5rem; text-align: center; font-size: 0.8125rem; }

/* ===== Login-mode hides ===== */
body.login-mode .container,
body.login-mode #scheduleContainer { margin-left: 0; }
body.login-mode .sidebar-wrapper,
body.login-mode .sidebar-toggle { display: none !important; }
body.login-mode .container,
body.login-mode #profilesContainer,
body.login-mode #timesContainer,
body.login-mode #scheduleContainer,
body.login-mode #homeContainer { display: none; }

/* ===== Teacher Mode ===== */
body.teacher-mode .sidebar-wrapper { display: none !important; }
body.teacher-mode #homeContainer { display: none !important; }
body.teacher-mode .container,
body.teacher-mode .container,
body.teacher-mode #scheduleContainer { margin-left: 20px; margin-right: auto; width: calc(100% - 40px); max-width: 1400px; }
body.teacher-mode .sidebar-toggle { display: none !important; }
body.teacher-mode .time-content {
    cursor: default;
    pointer-events: none;
}

/* Teacher schedule: user menu (hidden by default, shown only in teacher mode) */
.teacher-schedule-user-menu { display: none; }
body.teacher-mode .teacher-schedule-user-menu { display: block; }
body.teacher-mode .header-teacher-name { display: none !important; }
body.teacher-mode .header-center { display: none !important; }
body.teacher-mode .header-left { display: none !important; }
body.teacher-mode .schedule-subadmin-menu-toggle { display: none !important; }
body.teacher-mode .schedule-header { justify-content: center; }
body.teacher-mode .header-right { flex: 1 1 auto; justify-content: center; position: relative; }
body.teacher-mode .teacher-schedule-user-menu { position: absolute; right: 0; flex-shrink: 0; }

/* Full admin dashboard: align user menu */
body.full-admin-mode #fullAdminContainer .full-admin-dash-topbar .nav-user-group {
    margin-right: -0.25rem;
}
body.teacher-mode .delete-button,
body.teacher-mode .show-available-button,
body.teacher-mode .autofill-day-button,
body.teacher-mode .autofill-button,
body.teacher-mode #autofillButton,
body.teacher-mode #autofillAllButton,
body.teacher-mode #restButton { display: none !important; }
body.teacher-mode #studentProfilesButton,
body.teacher-mode #studentTimesButton,
body.teacher-mode #settingsButton,
body.teacher-mode #teacherArchiveButton { display: none !important; }
body.teacher-mode .time-slot .button-group { display: none !important; }
body.teacher-mode .schedule-grid-inner {
    grid-template-columns: repeat(7, 1fr);
    min-width: 0 !important;
}
body.teacher-mode .schedule-grid {
    overflow-x: hidden;
}
body.teacher-mode #clearCurrentWeekButton,
body.teacher-mode #autofillAllButton,
body.teacher-mode #restButton { display: none !important; }
body.teacher-mode #prevButton, body.teacher-mode #nextButton { display: inline-flex; }
body.teacher-mode .logout-button, body.teacher-mode .btn-logout { margin-left: auto; }

.teacher-top-logout {
    position: fixed;
    top: 0.75rem;
    right: 1rem;
    left: auto;
    z-index: 1100;
    width: auto;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
}

body.teacher-mode #teacherTopLogoutButton { display: none !important; }
body.full-admin-mode .sidebar-trigger,
body.full-admin-mode .sidebar-toggle { display: none !important; }
body.login-mode #teacherTopLogoutButton { display: none !important; }

/* Lärare: dölj placeholder-text i schemarutorna (desktop + mobil) */
body.teacher-mode .time-content::placeholder,
body.teacher-mode .time-slot:hover .time-content::placeholder {
    color: transparent !important;
    opacity: 0;
}
body.teacher-mode .time-content::-webkit-input-placeholder {
    color: transparent !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .schedule-grid { font-size: 0.85rem; }
    .time-slot { min-height: 2rem; }
    #timesContainer .times-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #timesContainer .times-entry-field--wide,
    #timesContainer .times-entry-availability {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .container, #scheduleContainer { padding: 0.75rem; }
    .navigation-container {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0.5rem 0.75rem;
    }
    .schedule-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .form-grid { grid-template-columns: 1fr; }
    .teacher-selection { grid-column: span 1; }
    .student-table { font-size: 0.85rem; }
    .modal { width: 95vw; min-width: auto; }
    #timesContainer .times-entry-grid {
        grid-template-columns: 1fr;
    }
    #timesContainer .times-entry-field,
    #timesContainer .times-entry-field--wide,
    #timesContainer .times-entry-availability {
        grid-column: 1 / -1;
    }
    #timesContainer .subadmin-elever-table-top {
        flex-wrap: wrap;
        align-items: stretch;
    }
    #timesContainer .student-list-count.subadmin-elever-count {
        width: 100%;
    }

}

/* Lärare i mobil */
@media (max-width: 768px) {
    body.teacher-mode .header-center {
        justify-content: center;
        text-align: center;
    }
    body.teacher-mode .teacher-top-logout {
        position: fixed !important;
        top: 0.5rem;
        right: 0.75rem;
        left: auto !important;
        z-index: 9999;
    }
    body.teacher-mode .schedule-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    body.teacher-mode .header-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.2rem;
        justify-content: center;
        width: 100%;
        position: static;
    }
    body.teacher-mode .teacher-schedule-user-menu {
        position: static;
        margin-left: auto;
    }
    body.teacher-mode .header-right .btn-icon {
        padding: 0.3rem;
    }
    body.teacher-mode .header-right .btn-icon svg {
        width: 14px;
        height: 14px;
    }
    body.teacher-mode .header-right .header-week-picker {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
    }
    body.teacher-mode .teacher-schedule-user-menu .nav-user-button {
        padding: 0.3rem 0.6rem 0.3rem 0.5rem;
        min-width: auto;
        font-size: 0.75rem;
    }
    body.teacher-mode .teacher-schedule-user-menu .nav-user-avatar {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    body.teacher-mode .teacher-schedule-user-menu .nav-user-name {
        font-size: 0.7rem;
    }
    body.teacher-mode .teacher-schedule-user-menu .nav-user-caret {
        font-size: 0.55rem;
    }
}

/* Lärare i desktop: fixa logga ut-knapp och visa ca två dagar i taget */
@media (min-width: 1024px) {
    body.teacher-mode .teacher-top-logout {
        top: 0.75rem;
        right: 1.5rem;
    }
    body.teacher-mode .schedule-grid-inner {
        grid-template-columns: repeat(7, 1fr);
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .schedule-header .header-left { flex-wrap: wrap; gap: 0.25rem; }
    #scheduleContainer .schedule-header .header-left { flex-wrap: nowrap; }
    body.teacher-mode .schedule-header .header-right { flex-wrap: nowrap; }
    .btn { font-size: 0.8rem; padding: 0.35rem 0.65rem; }
}

/* ===== Responsive table scrolling ===== */
.table-scroll-wrap {
    --table-min-width: 980px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.table-scroll-wrap > .student-table {
    width: max(100%, var(--table-min-width));
}
#profilesContainer .table-scroll-wrap {
    --table-min-width: 1080px;
}
#timesContainer .table-scroll-wrap {
    --table-min-width: 1120px;
}
#settingsContainer .table-scroll-wrap {
    --table-min-width: 980px;
}
#studentArchiveContainer .table-scroll-wrap {
    --table-min-width: 980px;
}
#teacherArchiveContainer .table-scroll-wrap {
    --table-min-width: 900px;
}

/* ===== Phone-only fixes ===== */
@media (max-width: 768px) {

    /* 2. Collection header cards: stack vertically */
    .full-admin-collection-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.85rem;
    }
    .full-admin-collection-main-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        width: 100%;
    }
    .full-admin-collection-main {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    .full-admin-back-button {
        align-self: flex-start;
    }
    .full-admin-collection-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }
    .full-admin-collection-search {
        min-width: 0;
        width: 100%;
    }
    .full-admin-collection-count {
        align-self: flex-start;
    }

    /* 3. Subadmin topbars: use flex layout on phones so title doesn't collide */
    .subadmin-dash-topbar {
        padding-inline: 1rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    .subadmin-dash-topbar-title-wrap {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
    }
    .subadmin-dash-topbar-title {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 4. Home cards: single column */
    .home-cards {
        grid-template-columns: 1fr;
    }

    /* 5. Full admin topbar breakout: prevent horizontal scroll */
    .full-admin-topbar {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* 6. Profiles top row: stack vertically */
    .profiles-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    /* Times top row: keep horizontal, leave room for hamburger + admin btn */
    .times-top-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding-left: 3rem;
    }
    .times-top-row .search-container {
        flex: 1;
        min-width: 0;
    }
    /* times-nav-inline removed */

    /* 7. General spacing tightening */
    .full-admin-collection-header {
        margin-bottom: 1rem;
    }
    .profile-form--elev-card .full-admin-collection-card {
        padding: 0.75rem;
        gap: 0.6rem;
    }
    .full-admin-collection-icon {
        width: 34px;
        height: 34px;
    }
    .full-admin-collection-icon svg {
        width: 18px;
        height: 18px;
    }
    .full-admin-collection-title {
        font-size: 1.05rem;
    }
    .full-admin-collection-subtitle {
        font-size: 0.8rem;
    }
    .home-header-bar {
        padding: 0.85rem 1rem;
    }
    .home-card {
        padding: 1rem;
    }
    body.full-admin-mode .container:not(#fullAdminContainer) {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    body.full-admin-mode #fullAdminContainer {
        max-width: none;
    }

    /* Search containers inside cards */
    .full-admin-collection-search-input {
        font-size: 0.8125rem;
        padding: 0.55rem 0.75rem;
    }
    .search-container--pill .search-input {
        padding: 0.55rem 0.75rem;
    }

    /* Tillgänglighet form card: prevent horizontal overflow */
    .profile-form--elev-card {
        max-width: 100%;
        overflow: hidden;
    }
    .full-admin-collection-card--stacked,
    .full-admin-collection-card--compact {
        max-width: 100%;
        box-sizing: border-box;
    }
    .availability-block,
    .schedule-hours-row {
        grid-column: span 1;
        min-width: 0;
        max-width: 100%;
    }
    .teacher-selection {
        grid-column: span 1;
    }
    .form-grid input,
    .form-grid select,
    .form-grid button {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }
    .availability-format-example {
        white-space: pre-wrap;
        word-break: break-word;
    }
    .availability-row {
        flex-direction: column;
        align-items: stretch;
    }
    .availability-row .btn-add-time {
        align-self: flex-end;
    }
    .availability-input {
        min-height: 4rem;
    }
}

/* Teacher schedule on phone: show ~2 days, swipe for rest (no hard snap for smoother scroll) */
@media (max-width: 768px) {
    body.teacher-mode .schedule-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: none;
    }
    body.teacher-mode .schedule-grid-inner {
        grid-template-columns: repeat(7, calc((100vw - 1.5rem) / 2)) !important;
        min-width: 0 !important;
    }
    body.teacher-mode .grid-day-header {
        scroll-snap-align: start;
    }
    body.teacher-mode .day-num {
        font-size: 0.85rem;
    }
    body.teacher-mode .day-name-short {
        font-size: 0.55rem;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .settings-topbar-title {
        font-size: 1.05rem;
    }
    .full-admin-collection-title {
        font-size: 0.95rem;
    }
    .full-admin-collection-subtitle {
        font-size: 0.75rem;
    }
    .full-admin-back-button {
        font-size: 0.75rem;
        padding-inline: 0.65rem;
        padding-block: 0.3rem;
    }
    .home-card {
        padding: 0.85rem;
        gap: 0.75rem;
    }
    .home-card-icon {
        width: 36px;
        height: 36px;
    }
    .home-card-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== Settings dual-column inside one card ===== */
.settings-dual-columns {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.settings-dual-col {
    flex: 1;
    min-width: 0;
}
.settings-dual-divider {
    width: 1px;
    align-self: stretch;
    background: var(--primary, #3b82f6);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .settings-dual-columns {
        flex-direction: column;
    }
    .settings-dual-divider {
        width: 100%;
        height: 1px;
    }
}

/* ===== School address input ===== */
.school-address-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.school-address-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}
.school-address-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}
.school-address-field-row {
    display: flex;
    gap: 0.75rem;
}
@media (max-width: 480px) {
    .school-address-field-row {
        flex-direction: column;
    }
}

/* ===== Settings page redesign ===== */
#settingsContainer .settings-panels {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
#settingsContainer .settings-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
#settingsContainer .settings-panel-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
#settingsContainer .settings-panel-card--compact {
    min-height: 230px;
}
#settingsContainer .settings-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.8rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
}
#settingsContainer .settings-panel-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#settingsContainer .settings-panel-icon--blue {
    color: #2563eb;
    background: #eff6ff;
}
#settingsContainer .settings-panel-icon--green {
    color: #10b981;
    background: #ecfdf5;
}
#settingsContainer .settings-panel-icon--purple {
    color: #8b5cf6;
    background: #f5f3ff;
}
#settingsContainer .settings-panel-copy {
    min-width: 0;
}
#settingsContainer .settings-panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}
#settingsContainer .settings-panel-subtitle {
    margin: 0.1rem 0 0;
    font-size: 0.77rem;
    color: #9ca3af;
}
#settingsContainer .settings-panel-body {
    padding: 1rem;
}
#settingsContainer .settings-panel-actions {
    display: flex;
    justify-content: flex-end;
}
#settingsContainer .settings-panel-actions--teacher {
    margin-top: 1rem;
}
#settingsContainer .settings-field,
#settingsContainer .school-address-field,
#settingsContainer .manual-car-setting {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
#settingsContainer .settings-field label,
#settingsContainer .school-address-field label,
#settingsContainer .manual-car-setting label {
    margin: 0;
    font-size: 0.77rem;
    font-weight: 500;
    color: #4b5563;
}
#settingsContainer .settings-field-hint {
    color: #9ca3af;
    font-weight: 400;
}
#settingsContainer .settings-field input,
#settingsContainer .settings-field select,
#settingsContainer .school-address-field input,
#settingsContainer .manual-car-input {
    width: 100%;
    min-height: 42px;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
#settingsContainer .settings-field input::placeholder,
#settingsContainer .school-address-field input::placeholder,
#settingsContainer .manual-car-input::placeholder {
    color: #c0c7d2;
}
#settingsContainer .settings-field input:focus,
#settingsContainer .settings-field select:focus,
#settingsContainer .school-address-field input:focus,
#settingsContainer .manual-car-input:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
#settingsContainer .settings-field select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.85rem center;
    background-size: 12px;
    padding-right: 2.4rem;
}
#settingsContainer .manual-car-setting {
    max-width: 180px;
}
#settingsContainer .manual-car-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
#settingsContainer .manual-car-input {
    width: 74px;
    text-align: left;
}
#settingsContainer .school-address-fields {
    gap: 0.8rem;
}
#settingsContainer .school-address-field-row {
    gap: 0.8rem;
}
#settingsContainer .settings-teacher-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem 0.9rem;
}
#settingsContainer .settings-field--span-2 {
    grid-column: span 2;
}
#settingsContainer .settings-primary-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}
#settingsContainer .settings-add-teacher-button {
    padding-left: 1rem;
    padding-right: 1rem;
}
#settingsContainer .settings-teachers-list-card {
    margin-top: 0.35rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}
#settingsContainer .settings-teachers-list-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}
#settingsContainer .settings-teachers-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f3ff;
    color: #8b5cf6;
    flex-shrink: 0;
}
#settingsContainer .settings-teachers-list-copy {
    min-width: 0;
}
#settingsContainer .settings-teachers-list-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}
#settingsContainer .settings-teachers-list-count-tag {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #9ca3af;
}
#settingsContainer .settings-teacher-td-value--row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#settingsContainer .settings-teacher-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 75%;
    max-width: 75%;
    margin-inline: auto;
}
#settingsContainer .settings-teachers-list-card .table-scroll-wrap > .student-table {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
#studentArchiveContainer .archive-students-list-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}
#studentArchiveContainer .archive-students-list-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}
#studentArchiveContainer .archive-students-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}
#studentArchiveContainer .archive-students-list-copy {
    min-width: 0;
}
#studentArchiveContainer .archive-students-list-searchwrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: min(360px, 100%);
    width: min(360px, 100%);
    padding: 0.45rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
}
#studentArchiveContainer .archive-students-list-searchicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex-shrink: 0;
}
#studentArchiveContainer .archive-students-list-search-input {
    width: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0.35rem 0;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}
#studentArchiveContainer .archive-students-list-search-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
#studentArchiveContainer .archive-students-list-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}
#studentArchiveContainer .archive-students-list-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #9ca3af;
}
#studentArchiveContainer .archive-students-list-card .table-scroll-wrap > .student-table {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
#studentArchiveContainer .archive-student-name {
    font-weight: 700;
}
#teacherArchiveContainer .archive-teachers-list-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}
#teacherArchiveContainer .archive-teachers-list-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}
#teacherArchiveContainer .archive-teachers-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}
#teacherArchiveContainer .archive-teachers-list-copy {
    min-width: 0;
}
#teacherArchiveContainer .archive-teachers-list-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}
#teacherArchiveContainer .archive-teachers-list-count-tag {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #9ca3af;
}
#teacherArchiveContainer .archive-teacher-td-value--row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#teacherArchiveContainer .archive-teacher-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 75%;
    max-width: 75%;
    margin-inline: auto;
}
#teacherArchiveContainer .archive-teacher-schema-inner {
    display: flex;
    justify-content: center;
    width: 100%;
}
#teacherArchiveContainer .archive-teachers-list-card .table-scroll-wrap > .student-table {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 1024px) {
    #settingsContainer .settings-teacher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #settingsContainer .settings-field,
    #settingsContainer .settings-field--span-2 {
        grid-column: span 1;
    }
    #studentArchiveContainer .archive-students-list-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #studentArchiveContainer .archive-students-list-searchwrap {
        margin-left: 0;
        width: 100%;
        min-width: 0;
    }
    #profilesContainer .subadmin-list-card-head,
    #timesContainer .subadmin-list-card-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #profilesContainer .subadmin-list-card-searchwrap,
    #timesContainer .subadmin-list-card-searchwrap {
        margin-left: 0;
        width: 100%;
        min-width: 0;
    }
    #settingsContainer .settings-teachers-list-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #teacherArchiveContainer .archive-teachers-list-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    /* Subadmin Elever: "Elever" + antal som pill till höger (override 1024px head align) */
    #profilesContainer .subadmin-elever-table-card .subadmin-list-card-head {
        align-items: flex-start;
        gap: 0.65rem 0.75rem;
        padding: 0.95rem 1rem;
    }
    #profilesContainer .subadmin-elever-mass-arkiv-card {
        flex: 1 1 100%;
        max-width: none;
        order: 2;
    }
    #profilesContainer .subadmin-list-card-searchwrap {
        order: 3;
    }
    #profilesContainer .subadmin-list-card-head-main {
        order: 1;
        width: 100%;
    }
    #profilesContainer .subadmin-elever-table-card .subadmin-list-card-copy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
        flex: 1 1 0;
        min-width: 0;
    }
    #profilesContainer .subadmin-elever-table-card .subadmin-list-card-title {
        flex: 0 1 auto;
        min-width: 0;
    }
    #profilesContainer .subadmin-elever-table-card .subadmin-list-card-count-tag {
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.3rem 0.7rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--primary);
        letter-spacing: 0.01em;
        line-height: 1.25;
    }
    #timesContainer .times-table-card .subadmin-list-card-head {
        align-items: center;
        gap: 0.65rem 0.75rem;
        padding: 0.95rem 1rem;
    }
    #timesContainer .times-table-card .subadmin-list-card-copy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
        flex: 1 1 0;
        min-width: 0;
    }
    #timesContainer .times-table-card .subadmin-list-card-title {
        flex: 0 1 auto;
        min-width: 0;
    }
    #timesContainer .times-table-card .subadmin-list-card-count-tag {
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.3rem 0.7rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--primary);
        letter-spacing: 0.01em;
        line-height: 1.25;
    }
    #studentArchiveContainer .archive-students-list-card .archive-students-list-head {
        align-items: center;
        gap: 0.65rem 0.75rem;
        padding: 0.95rem 1rem;
    }
    #studentArchiveContainer .archive-students-list-card .archive-students-list-copy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
        flex: 1 1 0;
        min-width: 0;
    }
    #studentArchiveContainer .archive-students-list-card .archive-students-list-title {
        flex: 0 1 auto;
        min-width: 0;
    }
    #studentArchiveContainer .archive-students-list-card .archive-students-list-count-tag {
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.3rem 0.7rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--primary);
        letter-spacing: 0.01em;
        line-height: 1.25;
    }
    /* Inställningar — Lärare: rubrik + antal som blå pill till höger */
    #settingsContainer .settings-teachers-list-card .settings-teachers-list-head {
        align-items: center;
        gap: 0.65rem 0.75rem;
        padding: 0.95rem 1rem;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-list-icon {
        background: #eff6ff;
        color: #2563eb;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-list-copy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
        flex: 1 1 0;
        min-width: 0;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-list-title {
        flex: 0 1 auto;
        min-width: 0;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-list-count-tag {
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.3rem 0.7rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--primary);
        letter-spacing: 0.01em;
        line-height: 1.25;
    }
    /* Inställningar — Lärare: kort-rad som Full admin Skolor */
    #settingsContainer .settings-teachers-list-card {
        overflow: visible;
    }
    #settingsContainer .settings-teachers-list-card .table-scroll-wrap {
        overflow-x: visible;
        border: none;
        background: transparent;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table thead {
        display: none;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody {
        display: block;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.35rem 1rem 0.85rem;
        margin-bottom: 0.85rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody tr:last-child {
        margin-bottom: 0;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.55rem 0;
        border: none;
        border-bottom: 1px solid #f3f4f6;
        text-align: right !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        vertical-align: middle;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td::before {
        content: attr(data-label);
        flex: 0 1 36%;
        max-width: 10rem;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
        line-height: 1.35;
        text-align: left;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td > * {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td.teacher-phone-cell,
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td.teacher-email-cell {
        min-height: 2.25rem;
        word-break: break-word;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        border-bottom: none;
        padding-bottom: 0.25rem;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td:last-child::before {
        flex: none;
        max-width: none;
        width: 100%;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td:last-child > * {
        width: 100%;
        justify-content: stretch;
    }
    #settingsContainer .settings-teachers-list-card .settings-teachers-table tbody td:last-child .settings-teacher-actions {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    /* Lärar arkiv: rubrik + antal som blå pill till höger */
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-list-head {
        align-items: center;
        gap: 0.65rem 0.75rem;
        padding: 0.95rem 1rem;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-list-copy {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
        flex: 1 1 0;
        min-width: 0;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-list-title {
        flex: 0 1 auto;
        min-width: 0;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-list-count-tag {
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.3rem 0.7rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--primary);
        letter-spacing: 0.01em;
        line-height: 1.25;
    }
    /* Lärar arkiv: kort-rad som Skolor / Inställningar Lärare */
    #teacherArchiveContainer .archive-teachers-list-card {
        overflow: visible;
    }
    #teacherArchiveContainer .archive-teachers-list-card .table-scroll-wrap {
        overflow-x: visible;
        border: none;
        background: transparent;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table {
        min-width: 0 !important;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table thead {
        display: none;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody {
        display: block;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.35rem 1rem 0.85rem;
        margin-bottom: 0.85rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody tr:last-child {
        margin-bottom: 0;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.55rem 0;
        border: none;
        border-bottom: 1px solid #f3f4f6;
        text-align: right !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        vertical-align: middle;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td::before {
        content: attr(data-label);
        flex: 0 1 36%;
        max-width: 10rem;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
        line-height: 1.35;
        text-align: left;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td > * {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td.teacher-phone-cell,
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td.teacher-email-cell {
        min-height: 2.25rem;
        word-break: break-word;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        border-bottom: none;
        padding-bottom: 0.25rem;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td:last-child::before {
        flex: none;
        max-width: none;
        width: 100%;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td:last-child > * {
        width: 100%;
        justify-content: stretch;
    }
    #teacherArchiveContainer .archive-teachers-list-card .archive-teachers-table tbody td:last-child .archive-teacher-actions {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    #settingsContainer .settings-panels-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #settingsContainer .settings-teacher-grid {
        grid-template-columns: 1fr;
    }
    #settingsContainer .settings-field,
    #settingsContainer .settings-field--span-2 {
        grid-column: 1 / -1;
    }
    #settingsContainer .manual-car-setting {
        max-width: none;
    }
    #settingsContainer .manual-car-input-row,
    #settingsContainer .school-address-field-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== SMS Påminnelser ===== */

.sms-config-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sms-config-row label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}
.sms-config-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sms-config-status {
    font-size: 0.82rem;
    font-weight: 500;
}
.sms-config-status.ok { color: #16a34a; }
.sms-config-status.error { color: #dc2626; }

.sms-gateway-owner-notice {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    color: var(--muted-fg);
    font-style: italic;
}

.sms-auto-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.sms-auto-status-pill .sms-auto-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sms-auto-status-pill--active {
    background: hsl(142, 70%, 95%);
    color: hsl(142, 45%, 30%);
    border: 1px solid hsl(142, 50%, 82%);
}
.sms-auto-status-pill--active .sms-auto-status-dot {
    background: hsl(142, 52%, 46%);
}
.sms-auto-status-pill--inactive {
    background: hsl(35, 100%, 95%);
    color: hsl(30, 70%, 38%);
    border: 1px solid hsl(35, 80%, 80%);
}
.sms-auto-status-pill--inactive .sms-auto-status-dot {
    background: hsl(35, 85%, 55%);
}

/* Send section */
.sms-send-section {
    padding: 1rem 0 0;
}
.sms-date-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sms-date-picker-row label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}
.sms-date-picker-row input[type="date"] {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--card-bg, #fff);
}
.sms-auto-time-input {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--card-bg, #fff);
    width: 110px;
}
.sms-auto-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}
.sms-auto-check-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--primary, #3b82f6);
}
.sms-progress-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    text-align: left;
}
.sms-progress-count {
    align-self: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 700;
}
.sms-progress-current {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
    color: #1e293b;
}
.sms-progress-current strong {
    font-size: 0.98rem;
    color: #0f172a;
}
.sms-progress-current span,
.sms-progress-meta {
    font-size: 0.82rem;
    color: #64748b;
}
.sms-progress-current .sms-progress-teacher-tag {
    align-self: center;
    margin-top: 0.2rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 0.76rem;
    font-weight: 700;
}
.sms-progress-meta {
    text-align: center;
}
.sms-progress-bar {
    width: 100%;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}
.sms-progress-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
    transition: width 0.2s ease;
}
.sms-send-preview {
    margin-bottom: 1rem;
}
.sms-preview-hint {
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}
.sms-send-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sms-selected-count {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

/* Preview table */
.sms-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}
.sms-preview-table th,
.sms-preview-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.sms-preview-table th {
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sms-preview-count {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748b);
    margin-top: 0.5rem;
}
.sms-preview-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
}
.sms-preview-table input[type="checkbox"]:hover {
    accent-color: #2563eb;
}
.sms-preview-table .teacher-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    margin-right: 0.4rem;
}
.sms-preview-table .time-tag {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
}
.sms-lesson-type {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}
.sms-lesson-type.test {
    background: #fef3c7;
    color: #92400e;
}
.sms-lesson-type.regular {
    background: #dbeafe;
    color: #1e40af;
}
.sms-lesson-type.exam {
    background: #fce7f3;
    color: #9d174d;
}
.sms-already-sent-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.25rem;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.sms-preview-row--sent {
    background: #f8fafc;
}
.sms-no-phone-warning {
    color: #dc2626;
    font-size: 0.78rem;
    font-style: italic;
}

/* Dashboard */
.sms-dashboard-section {
    margin-top: 1.5rem;
}
.sms-dashboard-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #1e293b);
}
.sms-dashboard-empty {
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}

/* Batch card */
.sms-batch-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sms-batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sms-batch-date {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary, #1e293b);
}
.sms-batch-target-date {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1d4ed8;
}
.sms-batch-type-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.sms-batch-type-badge.auto {
    background: #dbeafe;
    color: #1d4ed8;
}
.sms-batch-type-badge.manual {
    background: #f3e8ff;
    color: #7e22ce;
}
.sms-batch-by {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

/* Batch stats row */
.sms-batch-stats {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.sms-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
}
.sms-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sms-stat-dot.total { background: #6366f1; }
.sms-stat-dot.sent { background: #22c55e; }
.sms-stat-dot.confirmed { background: #16a34a; }
.sms-stat-dot.failed { background: #ef4444; }

/* Per-message rows */
.sms-batch-messages {
    margin-top: 0.5rem;
}
.sms-batch-toggle {
    font-size: 0.82rem;
    color: var(--accent-color, #6366f1);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    font-weight: 500;
}
.sms-batch-toggle:hover {
    text-decoration: underline;
}

.sms-msg-list {
    margin-top: 0.5rem;
}
.sms-msg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.85rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sms-msg-row:last-child {
    border-bottom: none;
}
.sms-msg-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.sms-msg-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.sms-msg-icon.success { color: #16a34a; }
.sms-msg-icon.fail { color: #ef4444; }
.sms-msg-icon.pending { color: #f59e0b; }
.sms-msg-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sms-msg-phone {
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
}
.sms-msg-time {
    color: var(--text-secondary, #64748b);
    font-size: 0.78rem;
    white-space: nowrap;
}
.sms-msg-actions {
    flex-shrink: 0;
}
.sms-retry-btn {
    font-size: 0.78rem;
    padding: 0.25rem 0.65rem;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}
.sms-retry-btn:hover {
    background: #fee2e2;
}

/* Batch status badge */
.sms-batch-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sms-batch-status.completed { background: #dcfce7; color: #166534; }
.sms-batch-status.partial { background: #fef9c3; color: #854d0e; }
.sms-batch-status.sending { background: #e0e7ff; color: #3730a3; }
.sms-batch-status.pending { background: #f1f5f9; color: #475569; }
.sms-batch-status.failed { background: #fef2f2; color: #991b1b; }

@media (max-width: 640px) {
    #smsContainer {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
    }
    #smsContainer .full-admin-collection-main {
        flex-wrap: nowrap;
        align-items: flex-start;
        width: 100%;
    }
    #smsContainer .full-admin-collection-text {
        min-width: 0;
    }
    #smsContainer .sms-send-section,
    #smsContainer .sms-send-preview,
    #smsContainer .sms-dashboard-section {
        width: 100%;
        min-width: 0;
    }
    #smsContainer .sms-dashboard-section {
        margin-top: 2.25rem;
        padding-bottom: 1.5rem;
    }
    #smsContainer .sms-dashboard-title {
        margin-bottom: 1.25rem;
    }
    #smsContainer .sms-date-picker-row {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.55rem;
    }
    #smsContainer .sms-date-picker-row label {
        margin-bottom: -0.15rem;
    }
    #smsContainer .sms-date-picker-row input[type="date"],
    #smsContainer .sms-auto-time-input,
    #smsContainer .sms-date-picker-row .btn {
        width: 100%;
    }
    #smsContainer .sms-auto-check-label {
        justify-content: flex-start;
        padding: 0.35rem 0;
    }
    #smsContainer .sms-send-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
        align-items: stretch;
    }
    #smsContainer .sms-send-actions .btn {
        width: 100%;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        white-space: normal;
    }
    #smsContainer .sms-selected-count {
        grid-column: 1 / -1;
        text-align: right;
    }
    #smsContainer .sms-preview-table,
    #smsContainer .sms-preview-table thead,
    #smsContainer .sms-preview-table tbody,
    #smsContainer .sms-preview-table tr,
    #smsContainer .sms-preview-table td {
        display: block;
        width: 100%;
    }
    #smsContainer .sms-preview-table {
        border-collapse: separate;
        border-spacing: 0;
        margin-top: 0.65rem;
        font-size: 0.82rem;
    }
    #smsContainer .sms-preview-table thead {
        display: none;
    }
    #smsContainer .sms-preview-table tr {
        position: relative;
        padding: 0.85rem 0.85rem 0.7rem 2.8rem;
        margin-bottom: 0.65rem;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }
    #smsContainer .sms-preview-table td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
        min-width: 0;
        word-break: break-word;
    }
    #smsContainer .sms-preview-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    #smsContainer .sms-preview-table td::before {
        content: attr(data-label);
        flex: 0 0 5rem;
        text-align: left;
        color: #64748b;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    #smsContainer .sms-preview-table .sms-preview-select-cell {
        position: absolute;
        top: 0.85rem;
        left: 0.85rem;
        width: auto;
        padding: 0;
        border: none;
    }
    #smsContainer .sms-preview-table .sms-preview-select-cell::before {
        content: none;
    }
    #smsContainer .sms-preview-table .sms-preview-name-cell {
        font-weight: 700;
        color: #0f172a;
    }
    #smsContainer .sms-preview-table .teacher-tag,
    #smsContainer .sms-lesson-type,
    #smsContainer .sms-already-sent-tag {
        margin-right: 0;
        margin-left: 0.25rem;
        white-space: normal;
    }
    #smsContainer .sms-batch-card {
        padding: 1rem;
    }
    #smsContainer .sms-batch-header,
    #smsContainer .sms-batch-stats,
    #smsContainer .sms-msg-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }
    #smsContainer .sms-msg-info {
        width: 100%;
        flex-wrap: wrap;
    }
    #smsContainer .sms-msg-name {
        white-space: normal;
    }
}