/* ============================================================
   Teacher portal shell — scoped chrome reskin
   Restyles the shared app shell (sidebar, app bar, mobile drawer)
   to the calm "teacher-portal" design, ONLY for teacher-only users
   (body.tp-shell). Purely additive: same DOM and scripts, no impact
   on Owner / Admin / Parent. Tokens mirror teacher-dashboard.css so
   the chrome and the dashboard read as one cohesive portal.

   Selectors are prefixed with `body.tp-shell` so they outrank the
   shell's base rules in _Layout's inline <style> by specificity,
   regardless of stylesheet order.
   ============================================================ */

body.tp-shell {
    /* accent (indigo) + soft derivations */
    --accent: #5b63d3;
    --accent-strong: #5057ba;
    --accent-soft: #ebecfa;
    --accent-softer: #f4f4fc;
    --accent-line: rgba(91, 99, 211, 0.28);

    /* surfaces / text */
    --surface: #ffffff;
    --surface-2: #f7f8fc;
    --surface-3: #eef0f6;
    --border: #e6e8f0;
    --border-strong: #d6d9e6;
    --text: #1b2030;
    --text-muted: #5a6276;
    --text-subtle: #8c93a6;

    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-md: 0 1px 3px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .18);

    --tp-font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    background: var(--surface-2);
    font-family: var(--tp-font);
}

body.tp-shell .main-content { background: var(--surface-2); }

/* ===========================================================
   Sidebar  (light calm surface, was a dark navy gradient)
   =========================================================== */
body.tp-shell .sidebar-nav {
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

body.tp-shell .sidebar-header {
    border-bottom: 1px solid var(--border);
    padding: 1.15rem 1.25rem;
}

body.tp-shell .sidebar-header .navbar-brand {
    color: var(--text) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    gap: 11px;
}

/* Brand mark: indigo tile + recoloured glyph.
   The inline SVG was drawn for a dark bar (white base rect, navy hex);
   recolour it for the light sidebar so it reads as a brand tile. */
body.tp-shell .logo-icon {
    background: linear-gradient(150deg, var(--accent), var(--accent-strong));
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    padding: 4px;
}
body.tp-shell .logo-icon svg rect { fill: transparent; }
body.tp-shell .logo-icon svg path { fill: #ffffff; }
body.tp-shell .logo-icon svg circle { fill: #ffd9a8; }

/* Group labels (app's localized "Main / Academic / More") */
body.tp-shell .sidebar-menu { padding: 0.85rem 0; }
body.tp-shell .sidebar-menu .nav-section {
    color: var(--text-subtle);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 0.65rem 1.5rem 0.35rem;
}

/* Nav links: inset rounded pills, calm hover, soft-indigo active */
body.tp-shell .sidebar-menu .nav-link {
    color: var(--text-muted) !important;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 2px 12px;
    padding: 9px 12px;
    border-left: 0;
    border-radius: var(--radius-sm);
    transition: background .15s ease, color .15s ease;
}
body.tp-shell .sidebar-menu .nav-link:hover {
    background: var(--surface-3);
    color: var(--text) !important;
    border-left: 0;
}
body.tp-shell .sidebar-menu .nav-link.active {
    background: var(--accent-soft);
    color: var(--accent-strong) !important;
    border-left: 0;
    box-shadow: inset 0 0 0 1px var(--accent-line);
}
body.tp-shell .sidebar-menu .nav-link i {
    color: var(--text-subtle);
    font-size: 1.02rem;
    transition: color .15s ease;
}
body.tp-shell .sidebar-menu .nav-link:hover i { color: var(--text-muted); }
body.tp-shell .sidebar-menu .nav-link.active i { color: var(--accent-strong); }

/* Footer: user line + logout (were white-on-dark, now calm) */
body.tp-shell .sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 0.9rem 1rem;
}
body.tp-shell .sidebar-footer .text-white-50 {
    color: var(--text-muted) !important;
}
body.tp-shell .sidebar-footer .btn-outline-light {
    color: var(--text-muted);
    border-color: var(--border-strong);
    background: var(--surface);
    font-weight: 600;
    border-radius: var(--radius-sm);
}
body.tp-shell .sidebar-footer .btn-outline-light:hover {
    color: var(--accent-strong);
    border-color: var(--accent-line);
    background: var(--accent-softer);
}

/* Mobile drawer scrim a touch softer */
body.tp-shell .sidebar-overlay { background: rgba(27, 32, 48, 0.45); }

/* ===========================================================
   App bar (top)  — calm surface for BOTH layout modes
   =========================================================== */
body.tp-shell .navbar-top {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
}
body.tp-shell .navbar-top .nav-link {
    color: var(--text-muted) !important;
    font-weight: 600;
}
body.tp-shell .navbar-top .nav-link:hover {
    color: var(--accent-strong) !important;
}

/* Top-bar-layout fallbacks (teacher who switched away from the sidebar) */
body.tp-shell .navbar-brand-top { color: var(--text) !important; }
body.tp-shell .navbar-toggler { border-color: var(--border-strong); }
body.tp-shell .sidebar-toggle-btn { color: var(--text-muted); }

/* Dropdowns within the shell */
body.tp-shell .navbar-top .dropdown-menu {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: 12px;
}
body.tp-shell .navbar-top .dropdown-item.active,
body.tp-shell .navbar-top .dropdown-item:active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

/* ===========================================================
   Accent alignment for content controls on teacher pages
   =========================================================== */
body.tp-shell .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 14px 0 rgba(91, 99, 211, 0.28);
}
body.tp-shell .btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    box-shadow: 0 6px 20px 0 rgba(91, 99, 211, 0.36);
}