/*
 * Schoole Appearance themes: Ink (atlas), Chalkboard (cedar), Crayon (solstice).
 *
 * The look borrows from school stationery: flat sidebars, ruled-register tables
 * with a red margin line, highlighter-style row hover and a pencil-coloured
 * bookmark on the active menu item. Colours live in the per-theme token blocks
 * below; everything else reads from those tokens.
 *
 * Every rule is scoped to html[data-schoole-appearance], so removing the module
 * (or the injected attribute) restores the stock ERP look.
 */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap");

@media screen {
    /* ---------- Theme tokens ---------- */

    html[data-schoole-appearance="atlas"] {
        --sa-ink: #16243f;
        --sa-accent: #2a5db0;
        --sa-accent-strong: #1e4a91;
        --sa-soft: #eaf1fb;
        --sa-canvas: #f5f7fa;
        --sa-surface: #ffffff;
        --sa-border: #d9e3ef;
        --sa-sidebar: #1b2b4b;
        --sa-chalk: #e7edf6;
        --sa-marker: #e9b949;
        --sa-margin: #d0473d;
        --sa-text: #1f2a3c;
        --sa-muted: #5e6b7e;
        --primary-rgb: 42, 93, 176;
        --bs-primary-rgb: 42, 93, 176;
    }

    html[data-schoole-appearance="cedar"] {
        --sa-ink: #16302b;
        --sa-accent: #1d7a61;
        --sa-accent-strong: #145c49;
        --sa-soft: #e6f2ec;
        --sa-canvas: #f4f6f3;
        --sa-surface: #ffffff;
        --sa-border: #d7e1d9;
        --sa-sidebar: #243f39;
        --sa-chalk: #eaf0ea;
        --sa-marker: #e8b923;
        --sa-margin: #c4372f;
        --sa-text: #1e2d29;
        --sa-muted: #5d6e67;
        --primary-rgb: 29, 122, 97;
        --bs-primary-rgb: 29, 122, 97;
    }

    html[data-schoole-appearance="solstice"] {
        --sa-ink: #2e1f3a;
        --sa-accent: #a83f63;
        --sa-accent-strong: #8a2f50;
        --sa-soft: #f8e9ef;
        --sa-canvas: #f8f5f7;
        --sa-surface: #ffffff;
        --sa-border: #e8dce3;
        --sa-sidebar: #35243f;
        --sa-chalk: #f1e9f1;
        --sa-marker: #f29e4c;
        --sa-margin: #c4372f;
        --sa-text: #2f2433;
        --sa-muted: #6e6272;
        --primary-rgb: 168, 63, 99;
        --bs-primary-rgb: 168, 63, 99;
    }

    /* AdminLTE dark mode: same accents, dark paper. */
    html[data-schoole-appearance] body.dark-mode {
        --sa-ink: #f1f3f5;
        --sa-soft: color-mix(in srgb, var(--sa-accent) 22%, #1d2227);
        --sa-canvas: #15191d;
        --sa-surface: #1d2227;
        --sa-border: #323a42;
        --sa-text: #e3e7ea;
        --sa-muted: #a0aab3;
        color-scheme: dark;
    }

    /* Shared shape and type tokens, then the ERP's own variables mapped onto
       ours. Repeated on body.dark-mode so the mapped values pick up the dark
       tokens (custom properties resolve where they are declared). */
    html[data-schoole-appearance],
    html[data-schoole-appearance] body.dark-mode {
        --sa-font: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
        --sa-radius: 10px;
        --sa-radius-sm: 6px;
        --sa-pop: 0 12px 32px rgba(16, 24, 40, .16);
        --sa-highlight: color-mix(in srgb, var(--sa-marker) 16%, transparent);
        --sa-focus: 0 0 0 3px color-mix(in srgb, var(--sa-accent) 28%, transparent);

        --tpl-primary: var(--sa-accent);
        --tpl-primary-2: var(--sa-accent);
        --tpl-primary-deep: var(--sa-accent-strong);
        --tpl-primary-soft: var(--sa-soft);
        --tpl-primary-border: var(--sa-border);
        --tpl-text: var(--sa-text);
        --tpl-text-2: var(--sa-muted);
        --tpl-border: var(--sa-border);
        --tpl-bg-soft: var(--sa-canvas);
        --tpl-grad: var(--sa-accent);
        --tpl-card-shadow: none;
        --tpl-radius: var(--sa-radius);
        --pw-sidebar-accent: var(--sa-marker) !important;
        --primary: var(--sa-accent) !important;
        --brand-primary: var(--sa-accent) !important;
        --orange: var(--sa-accent) !important;
        --orange-dark: var(--sa-accent-strong) !important;
        --navy: var(--sa-sidebar);
        --yellow: var(--sa-marker);
        --shadow: 0 4px 24px rgba(16, 24, 40, .08);
        --shadow-lg: 0 12px 40px rgba(16, 24, 40, .12);
        --bs-primary: var(--sa-accent);
        --primary-color: var(--sa-accent);
        --secondary-color: var(--sa-ink);
        --secondary: var(--sa-ink);
        --p-soft: var(--sa-soft);
        --p-border: var(--sa-border);
        --grad: var(--sa-accent);
        --dark: var(--sa-sidebar);
        --text: var(--sa-text);
        --muted: var(--sa-muted);
        --border: var(--sa-border);
        --bg-soft: var(--sa-canvas);
        --nav-bg: var(--sa-surface);
        --nav-text: var(--sa-ink);
        --footer-bg: var(--sa-sidebar);
        --footer-text: var(--sa-chalk);
        --r-card: var(--sa-radius);
        --r-btn: var(--sa-radius-sm);
        --shadow-card: none;
        --shadow-pop: var(--sa-pop);
        --sw-primary: var(--sa-accent);
        --sw-secondary: var(--sa-sidebar);
        --sw-accent: var(--sa-accent-strong);
        --sw-bg-alt: var(--sa-canvas);
        --sw-border: var(--sa-border);
        --sw-radius: var(--sa-radius);
    }

    html[data-schoole-appearance] {
        color-scheme: light;
    }

    /* ---------- Base ---------- */

    html[data-schoole-appearance] body {
        color: var(--sa-text);
        background: var(--sa-canvas);
        font-family: var(--sa-font);
    }

    html[data-schoole-appearance] body :is(h1, h2, h3, h4, h5, h6, p, td, th, label, .btn, .form-control, .nav-link, .card-title, .dropdown-item, .badge, .small-box, .info-box) {
        font-family: var(--sa-font);
    }

    html[data-schoole-appearance] .content-wrapper,
    html[data-schoole-appearance] .wrapper,
    html[data-schoole-appearance] .min-h-screen {
        background-color: var(--sa-canvas);
    }

    /* Zero specificity: component styles (buttons, footers, nav) keep their own link colours. */
    :where(html[data-schoole-appearance] a:not(.btn)) {
        color: var(--sa-accent);
    }

    :where(html[data-schoole-appearance] a:not(.btn):hover) {
        color: var(--sa-accent-strong);
    }

    html[data-schoole-appearance] .text-primary {
        color: var(--sa-accent) !important;
    }

    html[data-schoole-appearance] .content-header h1,
    html[data-schoole-appearance] .content-header h2,
    html[data-schoole-appearance] .login-box h1 {
        color: var(--sa-ink);
        font-weight: 700;
        letter-spacing: -.01em;
    }

    html[data-schoole-appearance] .text-muted {
        color: var(--sa-muted) !important;
    }

    html[data-schoole-appearance] :focus-visible:not(input, select, textarea) {
        outline: 2px solid var(--sa-accent);
        outline-offset: 2px;
    }

    /* ---------- Top bar ---------- */

    html[data-schoole-appearance] .main-header.navbar,
    html[data-schoole-appearance] .navbar-white {
        background: var(--sa-surface);
        border-bottom: 1px solid var(--sa-border);
        box-shadow: none;
    }

    html[data-schoole-appearance] .main-header .nav-link {
        color: var(--sa-muted);
    }

    /* ---------- Sidebar: flat board, pencil bookmark on the active item ---------- */

    html[data-schoole-appearance] body .main-sidebar,
    html[data-schoole-appearance] body .main-sidebar[class*="sidebar-"] {
        background: var(--sa-sidebar) !important;
        color: var(--sa-chalk);
        box-shadow: none !important;
    }

    html[data-schoole-appearance] .brand-link {
        background: transparent !important;
        border-color: rgba(255, 255, 255, .1) !important;
        color: #fff !important;
        font-weight: 700;
    }

    html[data-schoole-appearance] body .main-sidebar .nav-header {
        color: color-mix(in srgb, var(--sa-chalk) 60%, transparent);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        padding-top: 1.1rem;
    }

    html[data-schoole-appearance] body .main-sidebar .nav-sidebar .nav-link {
        border-radius: 0 var(--sa-radius-sm) var(--sa-radius-sm) 0;
        margin: 1px 10px 1px 0;
        color: color-mix(in srgb, var(--sa-chalk) 86%, transparent);
        border-left: 4px solid transparent;
    }

    html[data-schoole-appearance] body .main-sidebar .nav-sidebar .nav-link:hover {
        background: rgba(255, 255, 255, .07) !important;
        color: #fff !important;
    }

    html[data-schoole-appearance] body .main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
    html[data-schoole-appearance] body .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
        background: rgba(255, 255, 255, .1) !important;
        border-left: 4px solid var(--sa-marker) !important;
        color: #fff !important;
        font-weight: 700;
        box-shadow: none !important;
    }

    html[data-schoole-appearance] body .main-sidebar .nav-treeview > .nav-item > .nav-link.active {
        background: transparent !important;
        color: var(--sa-marker) !important;
    }

    html[data-schoole-appearance] .nav-treeview .nav-link::before {
        color: color-mix(in srgb, var(--sa-chalk) 45%, transparent) !important;
    }

    html[data-schoole-appearance] body .main-sidebar .form-control-sidebar,
    html[data-schoole-appearance] body .main-sidebar .btn-sidebar {
        background: rgba(255, 255, 255, .08) !important;
        border-color: rgba(255, 255, 255, .12) !important;
        color: var(--sa-chalk) !important;
    }

    /* ---------- Surfaces: flat paper, lift only what floats ---------- */

    html[data-schoole-appearance] .card,
    html[data-schoole-appearance] .small-box,
    html[data-schoole-appearance] .info-box,
    html[data-schoole-appearance] .login-card-body,
    html[data-schoole-appearance] .register-card-body,
    html[data-schoole-appearance] .tpl-card,
    html[data-schoole-appearance] .lms-course-card {
        border: 1px solid var(--sa-border);
        border-radius: var(--sa-radius);
        background-color: var(--sa-surface);
        box-shadow: none;
    }

    html[data-schoole-appearance] .card-header,
    html[data-schoole-appearance] .card-footer,
    html[data-schoole-appearance] .modal-header,
    html[data-schoole-appearance] .modal-footer {
        border-color: var(--sa-border);
        background-color: transparent;
    }

    html[data-schoole-appearance] .card-title {
        color: var(--sa-ink);
        font-weight: 700;
    }

    html[data-schoole-appearance] .card.card-outline {
        border-top-width: 3px;
    }

    html[data-schoole-appearance] .modal-content,
    html[data-schoole-appearance] .dropdown-menu,
    html[data-schoole-appearance] .popover {
        border: 1px solid var(--sa-border);
        border-radius: var(--sa-radius);
        background-color: var(--sa-surface);
        box-shadow: var(--sa-pop);
    }

    html[data-schoole-appearance] .dropdown-item:hover,
    html[data-schoole-appearance] .dropdown-item:focus {
        background: var(--sa-soft);
        color: var(--sa-ink);
    }

    /* ---------- Buttons ---------- */

    html[data-schoole-appearance] .btn {
        border-radius: var(--sa-radius-sm);
        font-weight: 700;
    }

    html[data-schoole-appearance] .btn-primary,
    html[data-schoole-appearance] .tpl-btn-primary,
    html[data-schoole-appearance] .btn-brand-primary {
        background: var(--sa-accent) !important;
        border-color: var(--sa-accent) !important;
        color: #fff !important;
        box-shadow: none;
    }

    html[data-schoole-appearance] .btn-primary:hover,
    html[data-schoole-appearance] .tpl-btn-primary:hover,
    html[data-schoole-appearance] .btn-brand-primary:hover {
        background: var(--sa-accent-strong) !important;
        border-color: var(--sa-accent-strong) !important;
    }

    html[data-schoole-appearance] .bg-primary,
    html[data-schoole-appearance] .badge-primary {
        background-color: var(--sa-accent) !important;
        color: #fff !important;
    }

    html[data-schoole-appearance] .btn-outline-primary {
        border-color: var(--sa-accent);
        color: var(--sa-accent);
    }

    html[data-schoole-appearance] .btn-outline-primary:hover {
        background: var(--sa-accent);
        border-color: var(--sa-accent);
        color: #fff;
    }

    html[data-schoole-appearance] .btn-default,
    html[data-schoole-appearance] .btn-light,
    html[data-schoole-appearance] .btn-outline-secondary {
        background-color: var(--sa-surface);
        border-color: var(--sa-border);
        color: var(--sa-text);
    }

    html[data-schoole-appearance] .btn-default:hover,
    html[data-schoole-appearance] .btn-light:hover,
    html[data-schoole-appearance] .btn-outline-secondary:hover {
        background-color: var(--sa-soft);
        border-color: var(--sa-accent);
        color: var(--sa-ink);
    }

    html[data-schoole-appearance] .badge {
        border-radius: 999px;
        font-weight: 700;
        padding: .3em .65em;
    }

    /* ---------- Forms ---------- */

    html[data-schoole-appearance] .form-control,
    html[data-schoole-appearance] .custom-select,
    html[data-schoole-appearance] :is(.select2-container--default, .select2-container--bootstrap4) .select2-selection,
    html[data-schoole-appearance] .dataTables_filter input,
    html[data-schoole-appearance] .dataTables_length select {
        border-color: var(--sa-border);
        border-radius: var(--sa-radius-sm);
        background-color: var(--sa-surface);
        color: var(--sa-text);
    }

    html[data-schoole-appearance] .form-control:focus,
    html[data-schoole-appearance] .custom-select:focus,
    html[data-schoole-appearance] .select2-container--focus .select2-selection,
    html[data-schoole-appearance] .dataTables_filter input:focus {
        border-color: var(--sa-accent);
        box-shadow: var(--sa-focus);
    }

    html[data-schoole-appearance] label:not(.custom-control-label):not(.sa-choice) {
        color: var(--sa-ink);
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
    }

    html[data-schoole-appearance] input[type="checkbox"],
    html[data-schoole-appearance] input[type="radio"],
    html[data-schoole-appearance] progress {
        accent-color: var(--sa-accent);
    }

    html[data-schoole-appearance] .custom-control-input:checked ~ .custom-control-label::before,
    html[data-schoole-appearance] .page-item.active .page-link,
    html[data-schoole-appearance] .progress-bar {
        background-color: var(--sa-accent);
        border-color: var(--sa-accent);
    }

    html[data-schoole-appearance] .page-link {
        color: var(--sa-accent);
        border-color: var(--sa-border);
    }

    /* ---------- Tables: the ruled register ---------- */

    html[data-schoole-appearance] .table {
        color: var(--sa-text);
        font-variant-numeric: tabular-nums;
    }

    html[data-schoole-appearance] .table thead th,
    html[data-schoole-appearance] table.dataTable thead th {
        background: var(--sa-soft);
        color: var(--sa-ink);
        border-top: 0;
        border-bottom: 2px solid var(--sa-ink);
        font-size: .85rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        vertical-align: bottom;
    }

    html[data-schoole-appearance] .table td,
    html[data-schoole-appearance] .table th {
        border-color: var(--sa-border);
    }

    html[data-schoole-appearance] .table-bordered td,
    html[data-schoole-appearance] .table-bordered th {
        border-left-color: transparent;
        border-right-color: transparent;
    }

    /* The red margin line of an exercise book, after the first column. */
    html[data-schoole-appearance] .table > thead > tr > :first-child,
    html[data-schoole-appearance] .table > tbody > tr > :first-child,
    html[data-schoole-appearance] .table > tfoot > tr > :first-child {
        border-right: 2px solid color-mix(in srgb, var(--sa-margin) 55%, transparent);
    }

    html[data-schoole-appearance] .table-striped tbody tr:nth-of-type(odd) {
        background-color: color-mix(in srgb, var(--sa-soft) 45%, transparent);
    }

    html[data-schoole-appearance] .table-hover tbody tr:hover,
    html[data-schoole-appearance] table.dataTable tbody tr:hover {
        background-color: var(--sa-highlight);
        color: inherit;
    }

    /* ---------- Misc AdminLTE ---------- */

    html[data-schoole-appearance] .breadcrumb {
        background: transparent;
        color: var(--sa-muted);
    }

    html[data-schoole-appearance] .main-footer {
        background: var(--sa-surface);
        border-top: 1px solid var(--sa-border);
        color: var(--sa-muted);
    }

    html[data-schoole-appearance] .nav-tabs {
        border-bottom-color: var(--sa-border);
    }

    html[data-schoole-appearance] .nav-tabs .nav-link.active {
        color: var(--sa-ink);
        border-color: var(--sa-border) var(--sa-border) var(--sa-surface);
        box-shadow: inset 0 3px 0 var(--sa-accent);
    }

    html[data-schoole-appearance] .nav-pills .nav-link.active {
        background-color: var(--sa-accent);
        color: #fff;
    }

    html[data-schoole-appearance] .alert {
        border-radius: var(--sa-radius-sm);
        border-width: 0 0 0 4px;
    }

    html[data-schoole-appearance] .login-page,
    html[data-schoole-appearance] .register-page {
        background: var(--sa-canvas);
    }

    html[data-schoole-appearance] .login-logo a,
    html[data-schoole-appearance] .register-logo a {
        color: var(--sa-ink);
    }

    /* ERP components that hard-code a white background (public/css/tpl-theme.css)
       but take their text colour from tokens that turn light in dark mode. */
    html[data-schoole-appearance] body.dark-mode :is(.tpl-btn-ghost, .tpl-card, .tpl-pill, .tpl-opt-box, .tpl-toolbar,
        .tpl-manage-card, .tpl-card-footer, .tpl-view-toggle, .tpl-dt-gcard, .dt-button-collection,
        .select2-container .select2-selection, .select2-dropdown, .select2-search__field),
    html[data-schoole-appearance] body.dark-mode .dataTables_wrapper :is(.dataTables_length select, .dataTables_filter input,
        .dt-buttons .btn, .dataTables_paginate .page-item .page-link) {
        background: var(--sa-surface) !important;
        border-color: var(--sa-border) !important;
        color: var(--sa-text) !important;
    }

    html[data-schoole-appearance] body.dark-mode .select2-container .select2-selection__rendered {
        color: var(--sa-text);
    }

    /* ---------- Marketing pages and school websites ---------- */

    html[data-schoole-appearance] .lp-hero,
    html[data-schoole-appearance] .lp-section-soft {
        background: var(--sa-canvas) !important;
    }

    html[data-schoole-appearance] .lp-hero h1,
    html[data-schoole-appearance] .lp-title,
    html[data-schoole-appearance] .sw-title {
        color: var(--sa-ink);
    }

    html[data-schoole-appearance] .lp-card,
    html[data-schoole-appearance] .sw-card {
        border: 1px solid var(--sa-border);
        border-radius: var(--sa-radius);
        box-shadow: none;
    }

    html[data-schoole-appearance] .lp-btn,
    html[data-schoole-appearance] .sw-btn:not(.sw-btn-outline):not(.sw-btn-glass) {
        background: var(--sa-accent) !important;
        color: #fff !important;
        border-radius: var(--sa-radius-sm);
        box-shadow: none;
    }

    html[data-schoole-appearance] .navbar-style-solid,
    html[data-schoole-appearance] .navbar-style-glass,
    html[data-schoole-appearance] .sw-header {
        background: var(--sa-surface) !important;
        border-bottom: 1px solid var(--sa-border);
        box-shadow: none;
    }

    html[data-schoole-appearance] .footer,
    html[data-schoole-appearance] .sw-topbar,
    html[data-schoole-appearance] .sw-footer {
        background: var(--sa-sidebar) !important;
        color: color-mix(in srgb, var(--sa-chalk) 85%, transparent);
    }

    html[data-schoole-appearance] .footer a,
    html[data-schoole-appearance] .sw-topbar a,
    html[data-schoole-appearance] .sw-footer a {
        color: color-mix(in srgb, var(--sa-chalk) 82%, transparent);
    }

    html[data-schoole-appearance] .swpage-banner .sw-eyebrow::before {
        background: var(--sa-marker);
    }

    /* School-site highlights that put dark text on --sw-accent. */
    html[data-schoole-appearance] .sw-ticker-label,
    html[data-schoole-appearance] .sw-footer-social a:hover {
        background: var(--sa-marker) !important;
        color: #1a1a1a !important;
    }

    html[data-schoole-appearance] footer .footer-bottom,
    html[data-schoole-appearance] footer .footer-bottom :is(p, a) {
        color: color-mix(in srgb, var(--sa-chalk) 68%, transparent);
    }

    html[data-schoole-appearance] .footer a:hover,
    html[data-schoole-appearance] .sw-topbar a:hover,
    html[data-schoole-appearance] .sw-footer a:hover {
        color: #fff;
    }

    /* ---------- Theme selector (modules/Appearance/resources/views/choose.blade.php) ---------- */

    html[data-schoole-appearance] .sa-choice {
        display: block;
        cursor: pointer;
        border: 2px solid var(--sa-border);
        border-radius: var(--sa-radius);
        background: var(--sa-surface);
        padding: 1rem;
        height: 100%;
    }

    html[data-schoole-appearance] .sa-choice:hover,
    html[data-schoole-appearance] .sa-choice:has(input:checked) {
        border-color: var(--sa-accent);
    }

    html[data-schoole-appearance] .sa-choice input {
        accent-color: var(--sa-accent);
    }

    .sa-choice-preview {
        border-radius: var(--sa-radius-sm, 6px);
        overflow: hidden;
        display: flex;
        height: 95px;
        border: 1px solid #d9e2ec;
        margin-bottom: .75rem;
    }

    .sa-choice-preview-sidebar {
        width: 29%;
        background: var(--preview-ink);
        padding: 15px 0;
    }

    .sa-choice-preview-sidebar span {
        display: block;
        height: 7px;
        margin: 0 8px 8px 8px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .45);
    }

    .sa-choice-preview-sidebar span:first-child {
        margin-left: 0;
        border-radius: 0 3px 3px 0;
        border-left: 4px solid var(--preview-marker, #e8b923);
        background: rgba(255, 255, 255, .7);
    }

    .sa-choice-preview-main {
        flex: 1;
        background: var(--preview-canvas);
        padding: 13px;
    }

    .sa-choice-preview-main span {
        display: block;
        width: 80%;
        height: 10px;
        margin: 0 0 10px;
        border-radius: 2px;
        background: #fff;
        box-shadow: inset 12px 0 0 -10px #c4372f;
    }

    .sa-choice-preview-main span:last-child {
        width: 40%;
        background: var(--preview-accent);
        box-shadow: none;
    }
}