/* ============================================================
 * PyForm — unified theme overlay for secondary pages
 *
 * Drop <script src="/theme.js"></script> in <head>.
 * Drop <link rel="stylesheet" href="/pf-theme.css"> after the page's own <style>.
 *
 * Pages themed: /school-admin, /teacher, /classroom, /schools,
 *               /pdpo, /legal, /special-task/*
 *
 * Add the toggle button somewhere in the masthead:
 *   <button class="pf-theme-btn" onclick="window.toggleTheme()" title="Toggle theme">
 *     <span class="pf-th-dark">☾</span><span class="pf-th-light">☀</span>
 *   </button>
 * ============================================================ */

/* ── Dark mode tokens (default) ── */
:root,
[data-theme="dark"] {
    --pf-bg:          #07080f;
    --pf-surface:     rgba(255,255,255,0.03);
    --pf-surface-2:   rgba(255,255,255,0.06);
    --pf-text:        #ffffff;
    --pf-text-2:      rgba(255,255,255,0.75);
    --pf-text-3:      rgba(255,255,255,0.45);
    --pf-muted:       rgba(255,255,255,0.3);
    --pf-border:      rgba(255,255,255,0.08);
    --pf-border-2:    rgba(255,255,255,0.14);
    --pf-input-bg:    rgba(0,0,0,0.3);
    --pf-card:        rgba(255,255,255,0.03);
    --pf-code-bg:     rgba(0,0,0,0.4);
    --pf-accent-ink:  #fff;
    --pf-orb-opacity: 0.55;
    --pf-grid-line:   rgba(255,255,255,0.03);

    /* Editorial pages use paper/accent — give them dark-readable fallbacks */
    --paper:    #07080f;
    --paper-2:  #0d0e1a;
    --ink:      #f6f2e8;
    --ink-2:    #e6e2d6;
    --ink-3:    #b3afa3;
    --rule:     rgba(255,255,255,0.12);
    --rule-2:   rgba(255,255,255,0.06);
    --accent:   #e27b5c;
}

/* ── Light mode tokens ── */
[data-theme="light"] {
    --pf-bg:          #f6f2e8;
    --pf-surface:     #fdfaf1;
    --pf-surface-2:   #efe9dc;
    --pf-text:        #111111;
    --pf-text-2:      #2a2a28;
    --pf-text-3:      #55524c;
    --pf-muted:       #8a867d;
    --pf-border:      #cfc7b5;
    --pf-border-2:    #b8ae99;
    --pf-input-bg:    #fdfaf1;
    --pf-card:        #fdfaf1;
    --pf-code-bg:     #efe9dc;
    --pf-accent-ink:  #111;
    --pf-orb-opacity: 0.15;
    --pf-grid-line:   rgba(0,0,0,0.025);

    /* Editorial pages — paper stays paper in light */
    --paper:    #f6f2e8;
    --paper-2:  #efe9dc;
    --ink:      #111111;
    --ink-2:    #2a2a28;
    --ink-3:    #55524c;
    --rule:     #cfc7b5;
    --rule-2:   #e3dccb;
    --accent:   #b23a1d;
}

/* ── Global body + common element overrides (light mode) ──
 * Targets the class patterns used across my new pages.
 * Wrapped in [data-theme="light"] so dark stays untouched. */
[data-theme="light"] body {
    background: var(--pf-bg);
    color: var(--pf-text);
    background-image:
        linear-gradient(var(--pf-bg), var(--pf-bg)),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--pf-grid-line) 31px 32px);
    background-blend-mode: multiply;
}
[data-theme="light"] .bg-orb {
    opacity: var(--pf-orb-opacity);
    filter: blur(120px);
}

/* School-admin / teacher / classroom / super-admin sections */
[data-theme="light"] .card,
[data-theme="light"] .stat,
[data-theme="light"] .sa-stat,
[data-theme="light"] .glass-card,
[data-theme="light"] .class-card,
[data-theme="light"] .task-card,
[data-theme="light"] .task-row,
[data-theme="light"] .submission-card,
[data-theme="light"] .flag-card,
[data-theme="light"] .sa-flag,
[data-theme="light"] .data-card,
[data-theme="light"] .insight,
[data-theme="light"] .join-card {
    background: var(--pf-card);
    border-color: var(--pf-border);
    color: var(--pf-text);
}
[data-theme="light"] .card h3,
[data-theme="light"] .class-name,
[data-theme="light"] .task-title,
[data-theme="light"] .mast-title,
[data-theme="light"] h1, [data-theme="light"] h2,
[data-theme="light"] h3, [data-theme="light"] h4 { color: var(--pf-text); }

[data-theme="light"] .card p,
[data-theme="light"] .task-desc,
[data-theme="light"] .task-sub,
[data-theme="light"] .class-meta,
[data-theme="light"] .mast-sub,
[data-theme="light"] .sec-sub,
[data-theme="light"] .label,
[data-theme="light"] .stat-lbl,
[data-theme="light"] .sa-stat-lbl,
[data-theme="light"] .insight-lbl,
[data-theme="light"] .feat-tag { color: var(--pf-text-3); }

[data-theme="light"] .input,
[data-theme="light"] .custom-select,
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="password"] {
    background: var(--pf-input-bg) !important;
    color: var(--pf-text) !important;
    border-color: var(--pf-border-2) !important;
}
[data-theme="light"] .input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--pf-muted) !important; }

[data-theme="light"] .btn,
[data-theme="light"] .sa-btn-sm,
[data-theme="light"] .custom-btn {
    background: var(--pf-surface);
    border-color: var(--pf-border-2);
    color: var(--pf-text);
}
[data-theme="light"] .btn:hover,
[data-theme="light"] .sa-btn-sm:hover { background: var(--pf-surface-2); }

[data-theme="light"] .tab { color: var(--pf-text-3); }
[data-theme="light"] .tab:hover { color: var(--pf-text); }
[data-theme="light"] .tabs { border-bottom-color: var(--pf-border); }

[data-theme="light"] table th,
[data-theme="light"] .sa-table th {
    background: var(--pf-surface-2);
    color: var(--pf-text-3);
    border-bottom-color: var(--pf-border);
}
[data-theme="light"] table td,
[data-theme="light"] .sa-table td {
    border-bottom-color: var(--pf-border);
    color: var(--pf-text);
}
[data-theme="light"] tr:hover td { background: var(--pf-surface); }

[data-theme="light"] pre.code-view,
[data-theme="light"] .code-view,
[data-theme="light"] .feat-visual {
    background: var(--pf-code-bg);
    color: var(--pf-text-2);
    border-color: var(--pf-border);
}

[data-theme="light"] .mast,
[data-theme="light"] .masthead { border-bottom-color: var(--pf-border-2); }
[data-theme="light"] .mast-right,
[data-theme="light"] .mast-right a { color: var(--pf-text-3); }
[data-theme="light"] .mast-right a:hover { color: var(--pf-text); }

[data-theme="light"] .modal,
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-overlay > div {
    background: var(--pf-surface);
    border-color: var(--pf-border);
    color: var(--pf-text);
}
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.45) !important; }

[data-theme="light"] .empty-state,
[data-theme="light"] .empty { color: var(--pf-muted); }

[data-theme="light"] .sa-chip {
    background: var(--pf-surface-2);
    color: var(--pf-text-2);
    border-color: var(--pf-border-2);
}
[data-theme="light"] .role-chip { border-width: 1px; }

[data-theme="light"] .class-section .class-header { border-bottom-color: var(--pf-border); }
[data-theme="light"] .feedback {
    background: rgba(47,107,79,0.08);
    color: var(--pf-text-2);
    border-color: rgba(47,107,79,0.4);
}

/* Super-admin sidebar divider color fix */
[data-theme="light"] #super-nav-group { border-top-color: var(--pf-border-2) !important; }

/* ── Theme toggle button (drop-in) ── */
.pf-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--pf-border-2);
    background: var(--pf-surface);
    color: var(--pf-text);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    padding: 0;
    line-height: 1;
}
.pf-theme-btn:hover { background: var(--pf-surface-2); transform: rotate(15deg); }
.pf-theme-btn .pf-th-dark  { display: none; }
.pf-theme-btn .pf-th-light { display: inline; }
[data-theme="light"] .pf-theme-btn .pf-th-dark  { display: inline; }
[data-theme="light"] .pf-theme-btn .pf-th-light { display: none; }

/* ── Editorial pages (paper-default) respect [data-theme="dark"] ── */
[data-theme="dark"] body.pf-editorial {
    background: var(--paper);
    color: var(--ink);
    background-image:
        linear-gradient(var(--paper), var(--paper)),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,0.02) 31px 32px) !important;
}
