/* =========================================================
   HOOGESTEGER - LIGHT / DARK THEME
   Wordt NA app.css en intranet-addon.css geladen.
   ========================================================= */

:root,
html[data-theme="light"] {
    color-scheme: light;

    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-raised: #ffffff;

    --text: #1f2937;
    --muted: #6b7280;
    --border: #dbe1e8;

    --primary: #34476f;
    --primary-dark: #263754;
    --primary-soft: rgba(52, 71, 111, .08);

    --special: #f7e8aa;

    --input-bg: #ffffff;
    --header-bg: rgba(255,255,255,.96);

    --danger-bg: #fde8e8;
    --danger-text: #9b1c1c;
    --success-bg: #def7ec;
    --success-text: #03543f;

    --shadow-soft: 0 10px 30px rgba(22, 30, 46, .06);
    --shadow-card: 0 4px 14px rgba(31, 41, 55, .035);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #07111f;
    --surface: #0d1929;
    --surface-soft: #101f32;
    --surface-raised: #122238;

    --text: #eaf2ff;
    --muted: #93a7c2;
    --border: #223957;

    --primary: #68adff;
    --primary-dark: #4597f7;
    --primary-soft: rgba(71, 151, 247, .14);

    --special: #3d351a;

    --input-bg: #0a1625;
    --header-bg: rgba(8, 18, 32, .88);

    --danger-bg: rgba(248, 113, 113, .13);
    --danger-text: #ffaaaa;
    --success-bg: rgba(52, 211, 153, .12);
    --success-text: #8af0ca;

    --shadow-soft:
        0 14px 38px rgba(0, 0, 0, .24),
        0 0 28px rgba(38, 132, 255, .035);

    --shadow-card:
        0 10px 30px rgba(0, 0, 0, .18),
        0 0 24px rgba(46, 144, 255, .045);
}

/* Algemene achtergrond */
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 12% -4%, rgba(45, 135, 255, .18), transparent 29rem),
        radial-gradient(circle at 94% 16%, rgba(0, 170, 255, .09), transparent 31rem),
        linear-gradient(180deg, #081321 0%, var(--bg) 52%, #06101c 100%);
    background-attachment: fixed;
}

body,
.site-header,
.card,
.student-card,
.stat-card,
.announcement-card,
.portal-tile,
.login-card,
input,
textarea,
select,
.button,
.tool-button,
.progress-row {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

/* Header */
.site-header {
    background: var(--header-bg) !important;
    border-color: var(--border) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] .site-header {
    box-shadow:
        0 1px 0 rgba(104, 173, 255, .05),
        0 10px 35px rgba(0, 0, 0, .14);
}

html[data-theme="dark"] .brand-logo {
    filter: drop-shadow(0 0 8px rgba(71, 151, 247, .16));
}

/* Basis surfaces */
.card,
.student-card,
.stat-card,
.announcement-card,
.portal-tile,
.login-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .student-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .announcement-card,
html[data-theme="dark"] .portal-tile {
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .portal-tile:hover,
html[data-theme="dark"] .student-card:hover {
    border-color: rgba(104, 173, 255, .52) !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .28),
        0 0 25px rgba(45, 135, 255, .11);
}

/* Blauwe accenten / iconen */
.portal-icon,
.stat-icon,
.announcement-icon {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}

html[data-theme="dark"] .portal-icon,
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .announcement-icon {
    box-shadow:
        inset 0 0 0 1px rgba(104, 173, 255, .09),
        0 0 20px rgba(45, 135, 255, .07);
}

/* Tekst */
body,
.portal-tile,
.student-card {
    color: var(--text);
}

.muted,
.portal-content small,
.stat-label,
.announcement-meta,
.details dt {
    color: var(--muted) !important;
}

/* Formulieren */
input,
textarea,
select {
    background: var(--input-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: .76;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    outline: 2px solid rgba(104, 173, 255, .16) !important;
    box-shadow: 0 0 0 4px rgba(70, 145, 245, .06);
}

/* Buttons */
.button-secondary,
.dialog-close,
.tool-button {
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.button-primary,
.announcement-add-button,
.tool-button.active {
    background: var(--primary) !important;
    color: #07111f !important;
    border-color: transparent !important;
}

html[data-theme="light"] .button-primary,
html[data-theme="light"] .announcement-add-button,
html[data-theme="light"] .tool-button.active {
    color: #fff !important;
}

html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .announcement-add-button {
    box-shadow: 0 0 24px rgba(57, 145, 255, .17);
}

.danger-tool {
    color: #ff9e9e !important;
}

/* Alerts */
.alert-error {
    background: var(--danger-bg) !important;
    color: var(--danger-text) !important;
    border: 1px solid rgba(248, 113, 113, .18);
}

.alert-success {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
    border: 1px solid rgba(52, 211, 153, .16);
}

/* Tabellen en instructiekaart */
th,
td {
    border-color: var(--border) !important;
}

.instruction-table th,
.instruction-table td {
    border-color: var(--border) !important;
}

.instruction-table .topic-column {
    background: var(--surface) !important;
}

.progress-list,
.lesson-progress-view {
    border-color: var(--border) !important;
    background: var(--border) !important;
}

.progress-row,
.lesson-progress-item {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.progress-special,
.instruction-table .special-row th,
.instruction-table .special-row td {
    background: var(--special) !important;
}

.level-badge,
.student-meta span,
.portal-badge {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
}

/* Mededeling modal */
.announcement-dialog {
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

html[data-theme="dark"] .announcement-dialog {
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .5),
        0 0 42px rgba(45, 135, 255, .09);
}

.announcement-dialog::backdrop {
    background: rgba(2, 8, 18, .68) !important;
}

/* Whiteboard omgeving donker, tekenvel blijft wit */
.whiteboard-toolbar {
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
}

.tool-group {
    border-color: var(--border) !important;
}

.canvas-shell {
    background: #1a2839 !important;
    border-color: var(--border) !important;
}

#lesson-whiteboard {
    background: #ffffff !important;
}

/* Fullscreen whiteboard */
html[data-theme="dark"] .whiteboard-card.is-whiteboard-fullscreen {
    background: #07111f !important;
}

html[data-theme="dark"] .whiteboard-card:fullscreen,
html[data-theme="dark"] .whiteboard-card:-webkit-full-screen {
    background: #07111f !important;
}

/* Login */
html[data-theme="dark"] body.login-page {
    background:
        radial-gradient(circle at 50% 18%, rgba(46, 145, 255, .22), transparent 24rem),
        radial-gradient(circle at 80% 80%, rgba(0, 174, 255, .08), transparent 25rem),
        #07111f !important;
}

html[data-theme="dark"] .login-card {
    background:
        linear-gradient(180deg, rgba(18, 34, 56, .97), rgba(10, 24, 40, .97)) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .42),
        0 0 42px rgba(44, 137, 255, .12);
}

/* Theme toggle */
.theme-toggle {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--text);

    cursor: pointer;
    font: inherit;
    line-height: 1;

    transition:
        transform .15s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(104, 173, 255, .22);
    outline-offset: 2px;
}

.theme-toggle-icon::before {
    content: "☾";
    display: block;
    font-size: 22px;
    transform: translateY(-1px);
}

html[data-theme="dark"] .theme-toggle-icon::before {
    content: "☀";
    font-size: 20px;
    transform: none;
}

html[data-theme="dark"] .theme-toggle {
    background: rgba(17, 34, 56, .9);
    color: #dcebff;
    border-color: rgba(104, 173, 255, .24);
    box-shadow:
        inset 0 0 0 1px rgba(104, 173, 255, .04),
        0 0 24px rgba(45, 135, 255, .09);
}

/* Toggle op loginpagina */
.login-theme-toggle {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 50;
}

/* Scrollbar - vooral prettig in dark mode */
html[data-theme="dark"] {
    scrollbar-color: #284566 #091523;
}

html[data-theme="dark"] ::selection {
    background: rgba(82, 159, 255, .35);
    color: #fff;
}

@media (max-width: 760px) {
    .theme-toggle {
        width: 40px;
        height: 40px;
    }

    .header-user {
        gap: 10px !important;
    }
}