/* Koko & Co theme for the Wagtail admin.
   Palette and fonts come from the Koko & Co site (koko/company). Only Wagtail's own
   colour and font tokens are overridden, so the theme survives Wagtail upgrades. */

:root {
    --koko-black: #0a0709;
    --koko-plum: #1a0f1e;
    --koko-plum-raised: #24162a;
    --koko-purple: #7b6baa;
    --koko-lavender: #c9bde0;
    --koko-white: #f4f0f8;
    --koko-gold: #c9a961;
    --koko-border: rgb(201 189 224 / 0.15);

    /* Focus outlines in Koko purple (lavender in dark mode) instead of Wagtail's teal. */
    --w-color-focus: var(--koko-purple);

    --w-font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* "Primary" is the sidebar and other framing: Koko plum. */
    --w-color-primary-hue: 284;
    --w-color-primary-saturation: 33.3%;
    --w-color-primary-lightness: 8.8%;
    --w-color-primary-200-hue: 284;
    --w-color-primary-200-saturation: 30%;
    --w-color-primary-200-lightness: 15%;

    /* "Secondary" is buttons, links and focus: Koko purple and its tints. */
    --w-color-secondary-hue: 255.2;
    --w-color-secondary-saturation: 27%;
    --w-color-secondary-lightness: 54.3%;
    --w-color-secondary-600-hue: 255.2;
    --w-color-secondary-600-saturation: 27%;
    --w-color-secondary-600-lightness: 44%;
    --w-color-secondary-400-hue: 256;
    --w-color-secondary-400-saturation: 32%;
    --w-color-secondary-400-lightness: 64%;
    --w-color-secondary-100-hue: 260.6;
    --w-color-secondary-100-saturation: 36.1%;
    --w-color-secondary-100-lightness: 81%;
    --w-color-secondary-75-hue: 262;
    --w-color-secondary-75-saturation: 38%;
    --w-color-secondary-75-lightness: 88%;
    --w-color-secondary-50-hue: 270;
    --w-color-secondary-50-saturation: 36.4%;
    --w-color-secondary-50-lightness: 95.7%;
}

/* Light theme: Koko's off-white page and plum ink, with the plum sidebar kept for identity.
   Text colours are measured against the off-white page (WCAG AA): text #3B2A44 11.7:1,
   meta #6E6382 4.95:1, links #5E4E96 6.2:1; field borders #8A7EA4 3.3:1 (UI minimum 3:1).
   Koko purple stays for buttons (white text on it is 4.6:1). "System default" starts here
   and the dark block below takes over on devices in dark mode. */
.w-theme-light,
.w-theme-system {
    --w-color-surface-page: var(--koko-white);
    --w-color-surface-header: #ffffff;
    --w-color-surface-dashboard-panel: #ffffff;
    --w-color-surface-field: #ffffff;
    --w-color-surface-info-panel: #eee9f6;
    --w-color-text-context: #3b2a44;
    --w-color-text-label: var(--koko-plum);
    --w-color-text-meta: #6e6382;
    --w-color-text-link-default: #5e4e96;
    --w-color-text-link-hover: #4f4185;
    --w-color-border-furniture: rgb(123 107 170 / 0.2);
    --w-color-border-field-default: #8a7ea4;
    --w-color-border-field-hover: #6e6382;
}

/* Dark theme (the default for new users): Koko black and plum surfaces, lavender text. */
.w-theme-dark {
    --w-color-surface-page: var(--koko-black);
    --w-color-surface-header: var(--koko-black);
    --w-color-surface-menus: var(--koko-plum);
    --w-color-surface-menu-item-active: var(--koko-plum-raised);
    --w-color-surface-dashboard-panel: var(--koko-plum);
    --w-color-surface-info-panel: var(--koko-plum);
    --w-color-surface-field: var(--koko-plum);
    --w-color-surface-field-inactive: #140b17;
    --w-color-surface-tooltip: var(--koko-plum-raised);
    --w-color-text-context: var(--koko-white);
    --w-color-text-label: var(--koko-lavender);
    --w-color-text-meta: #a99cc4;
    --w-color-text-label-menus-default: var(--koko-lavender);
    --w-color-text-label-menus-active: var(--koko-white);
    --w-color-text-link-default: var(--koko-lavender);
    --w-color-text-link-hover: var(--koko-white);
    --w-color-border-furniture: var(--koko-border);
    --w-color-border-field-default: rgb(201 189 224 / 0.25);
    --w-color-border-field-hover: rgb(201 189 224 / 0.45);
    --w-color-focus: var(--koko-lavender);
}

/* "System default" on a device in dark mode gets the same. */
@media (prefers-color-scheme: dark) {
    .w-theme-system {
        --w-color-surface-page: var(--koko-black);
        --w-color-surface-header: var(--koko-black);
        --w-color-surface-menus: var(--koko-plum);
        --w-color-surface-menu-item-active: var(--koko-plum-raised);
        --w-color-surface-dashboard-panel: var(--koko-plum);
        --w-color-surface-info-panel: var(--koko-plum);
        --w-color-surface-field: var(--koko-plum);
        --w-color-surface-field-inactive: #140b17;
        --w-color-surface-tooltip: var(--koko-plum-raised);
        --w-color-text-context: var(--koko-white);
        --w-color-text-label: var(--koko-lavender);
        --w-color-text-meta: #a99cc4;
        --w-color-text-label-menus-default: var(--koko-lavender);
        --w-color-text-label-menus-active: var(--koko-white);
        --w-color-text-link-default: var(--koko-lavender);
        --w-color-text-link-hover: var(--koko-white);
        --w-color-border-furniture: var(--koko-border);
        --w-color-border-field-default: rgb(201 189 224 / 0.25);
        --w-color-border-field-hover: rgb(201 189 224 / 0.45);
        --w-color-focus: var(--koko-lavender);
    }
}

/* Headings in Koko's serif, like koko.co.ke. */
.w-header h1, .w-header__title, .w-panel__heading, .welcome h1, .w-h1, .w-h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
}

/* Sidebar wordmark (replaces the Wagtail bird). */
.koko-wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--koko-white);
    font-family: "Playfair Display", Georgia, serif;
    line-height: 1;
    text-decoration: none;
}
.koko-wordmark__name { font-size: 1.15rem; white-space: nowrap; }
.koko-wordmark__amp { color: var(--koko-gold); font-style: italic; }
.koko-wordmark__product {
    margin-top: 0.35rem;
    font-family: "Poppins", sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--koko-lavender);
}
/* Collapsed sidebar: just the "K&" monogram. */
.sidebar--slim .koko-wordmark__name { font-size: 1.3rem; }
.sidebar--slim .koko-wordmark__rest, .sidebar--slim .koko-wordmark__product { display: none; }

/* Help boxes ("The root level is where...") use Wagtail's blue info colour; give them Koko tones.
   Only these boxes: the info colour itself is also used for status messages, so it stays. */
.help-block.help-info {
    background-color: #eee9f6;
    color: #3b2a44;
    border: 1px solid rgb(123 107 170 / 0.25);
}
.help-block.help-info .icon-help { color: #5e4e96; }
.w-theme-dark .help-block.help-info {
    background-color: var(--koko-plum-raised);
    color: var(--koko-lavender);
    border-color: var(--koko-border);
}
.w-theme-dark .help-block.help-info .icon-help { color: var(--koko-lavender); }
@media (prefers-color-scheme: dark) {
    .w-theme-system .help-block.help-info {
        background-color: var(--koko-plum-raised);
        color: var(--koko-lavender);
        border-color: var(--koko-border);
    }
    .w-theme-system .help-block.help-info .icon-help { color: var(--koko-lavender); }
}

/* ---------- Simple home screen for school staff (schools/dashboard.py, #45) ----------
   Big, plain, one task per card. Colours come from Wagtail's tokens, so light and dark both work. */
.school-home { max-width: 70rem; padding: 2.5rem clamp(1.25rem, 4vw, 3.75rem) 4rem; font-size: 1.05rem; }
.school-home-head h1 { margin: 0 0 0.4rem; font-size: 2.2rem; }
.school-home-head p { margin: 0 0 2rem; color: var(--w-color-text-label); font-size: 1.1rem; }
.school-card { margin-bottom: 2.5rem; padding: 1.75rem; border-radius: 16px; background: var(--w-color-surface-page); box-shadow: 0 0 0 1px var(--w-color-border-furniture); }
.school-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.school-card-head h2 { margin: 0; font-size: 1.6rem; }
.school-roles { margin: 0.2rem 0 0; color: var(--w-color-text-label); font-size: 0.95rem; }
.school-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.school-subhead { margin: 2rem 0 0.9rem; font-size: 1.15rem; }
.school-help { margin: -0.4rem 0 1rem; color: var(--w-color-text-label); font-size: 0.95rem; }

.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.task {
    display: flex; align-items: flex-start; gap: 0.9rem; height: 100%; padding: 1.1rem 1.2rem; border-radius: 14px;
    color: var(--w-color-text-context); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--w-color-border-furniture);
    transition: box-shadow 0.15s, transform 0.15s;
}
.task:hover, .task:focus-visible { box-shadow: inset 0 0 0 2px var(--w-color-secondary); transform: translateY(-2px); color: var(--w-color-text-context); }
.task-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: color-mix(in srgb, var(--w-color-secondary) 14%, transparent); color: var(--w-color-secondary); }
.task-icon .icon { width: 1.3rem; height: 1.3rem; }
.task b { display: block; font-size: 1.05rem; }
.task b + span { display: block; margin-top: 0.15rem; color: var(--w-color-text-label); font-size: 0.9rem; line-height: 1.4; }

.status { display: inline-block; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.status--live { background: #e3f4ea; color: #1d6b43; }
.status--pending { background: #fff1cc; color: #6b4e00; }
.status--draft { background: #fde8e6; color: #9a2a1c; }
.status--changes { background: #fff1cc; color: #6b4e00; }
.status--muted { background: var(--w-color-surface-field-inactive, #eee); color: var(--w-color-text-label); font-weight: 500; }

/* Pages as a tree: each level indented with a guide line, like folders */
.page-tree, .page-tree ul { margin: 0; padding: 0; list-style: none; }
.page-tree ul { margin-left: 1.35rem; padding-left: 1.1rem; border-left: 2px solid var(--w-color-border-furniture); }
.page-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0.35rem 0; padding: 0.7rem 0.9rem;
    border-radius: 12px; box-shadow: inset 0 0 0 1px var(--w-color-border-furniture);
}
.page-row:hover { box-shadow: inset 0 0 0 1.5px var(--w-color-secondary); }
.page-node--home > .page-row { background: color-mix(in srgb, var(--w-color-secondary) 10%, transparent); }
.page-row-icon { display: inline-flex; color: var(--w-color-secondary); }
.page-row-icon .icon { width: 1.15rem; height: 1.15rem; }
.page-row-title { color: var(--w-color-text-context); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.page-row-title:hover { text-decoration: underline; }
.page-row-actions { display: flex; gap: 1rem; margin-left: auto; font-size: 0.92rem; }
.page-row-actions a { color: var(--w-color-text-link-default, var(--w-color-secondary)); font-weight: 500; }

/* Google Sites import (siteimport, #46) */
.siteimport { max-width: 52rem; font-size: 1.02rem; }
.siteimport-lede { font-size: 1.1rem; margin-bottom: 1.25rem; }
.siteimport-steps { margin: 0 0 1.5rem; padding-left: 1.25rem; line-height: 1.8; }
.siteimport-pages { margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.siteimport-pages li {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin: 0.35rem 0;
    margin-left: calc(var(--depth, 0) * 1.5rem); padding: 0.65rem 0.9rem; border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--w-color-border-furniture);
}
.siteimport-pages span { color: var(--w-color-text-label); font-size: 0.9rem; }