/*
 * PPIS Design System theme for the Filament panels.
 *
 * Implements the "PPIS System Redesign" wireframe (design canvas + token set
 * sampled from the school seal and ppis.edu.ph): Roboto body, Barlow Condensed
 * display headings, purple-900 sidebar, white top bar with the brand gradient
 * rule, paper page background and white 12px-radius cards.
 *
 * DESIGN ONLY. This file recolors and re-types the existing chrome. It does
 * not alter any table or gradebook markup, columns, or behavior — the custom
 * gradebook blades (trimester gradebook, e-Class Record, Annex E) keep their
 * own markup and are untouched. All color overrides are scoped to light mode
 * (html:not(.dark)) so the existing dark-mode styling keeps working.
 *
 * Loaded on every panel through a global HEAD_END render hook registered in
 * App\Providers\AppServiceProvider — after Filament's own styles, so plain
 * equal-specificity rules here win by source order.
 */

/* ---------------------------------------------------------------- tokens */

:root {
    /* Brand */
    --ppis-purple-900: #311464;
    --ppis-purple-800: #4B2A7B;
    --ppis-purple-700: #6B2FA8;
    --ppis-purple-600: #78489A;
    --ppis-purple-500: #8814E8;
    --ppis-purple-400: #A26FDD;
    --ppis-purple-200: #E8DCF1;
    --ppis-purple-100: #F3EDF9;

    --ppis-blue-700: #1A5190;
    --ppis-blue-100: #E4EDF7;

    --ppis-crimson-500: #C62368;
    --ppis-pink-400: #DF88B7;
    --ppis-pink-100: #FBE7F0;

    /* Neutrals */
    --ppis-ink: #1E1B22;
    --ppis-ink-muted: #55505C;
    --ppis-line: #E6E1EC;
    --ppis-paper: #F7F8F4;

    --ppis-gradient-brand-bar: linear-gradient(90deg, #311464 0%, #8814E8 45%, #DF88B7 100%);

    --ppis-font-display: 'Barlow Condensed', 'Roboto', system-ui, sans-serif;
    --ppis-font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ppis-font-motto: 'Lora', Georgia, serif;
}

/*
 * Retint Filament's neutral scale to the design system's warm, purple-leaning
 * neutrals. Filament compiles every gray utility against these RGB-triplet
 * variables, so this one block shifts page background (gray-50 -> paper),
 * hairlines (gray-200 -> line) and secondary text (gray-500/700) everywhere,
 * in both themes, without touching a single blade. Lightness ordering matches
 * the stock zinc scale, so dark mode keeps its contrast.
 */
:root {
    --gray-50: 247, 248, 244;   /* paper */
    --gray-100: 239, 237, 242;  /* surface-2 */
    --gray-200: 230, 225, 236;  /* line */
    --gray-300: 221, 216, 228;  /* field-line */
    --gray-400: 169, 163, 179;
    --gray-500: 138, 132, 148;
    --gray-600: 107, 101, 114;
    --gray-700: 85, 80, 92;     /* ink-muted */
    --gray-800: 59, 54, 66;
    --gray-900: 30, 27, 34;     /* ink */
    --gray-950: 20, 18, 26;
}

/* ------------------------------------------------------------ typography */

/* Roboto everywhere (both themes). */
body.fi-body,
.fi-simple-layout {
    font-family: var(--ppis-font-sans);
}

/* Display headings: Barlow Condensed, tight leading, like the wireframe. */
.fi-header-heading,
.fi-simple-header-heading,
.fi-modal-heading,
.fi-section-header-heading,
.fi-wi-stats-overview-stat-value {
    font-family: var(--ppis-font-display);
    letter-spacing: -0.01em;
}

.fi-header-heading {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
}

.fi-simple-header-heading {
    font-weight: 800;
}

.fi-section-header-heading {
    font-size: 1.25rem;
    font-weight: 700;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800;
}

/* Breadcrumbs become the wireframe's letter-spaced eyebrow line. */
.fi-breadcrumbs-item-label {
    font-family: var(--ppis-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/*
 * Portal label in the top bar (injected at TOPBAR_START): the wireframe's
 * uppercase, letter-spaced panel name beside the brand logo, with its thin
 * divider. Hidden on small screens where the top bar is crowded.
 */
.ppis-portal-label {
    display: none;
    align-self: center;
    border-inline-start: 1px solid var(--ppis-line);
    color: var(--ppis-purple-600);
    font-family: var(--ppis-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    padding-inline-start: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .ppis-portal-label {
        display: block;
    }
}

.dark .ppis-portal-label {
    border-inline-start-color: rgba(255, 255, 255, 0.1);
    color: var(--ppis-purple-400);
}

/* ------------------------------------------- light-mode chrome recolors */

html:not(.dark) .fi-header-heading,
html:not(.dark) .fi-simple-header-heading,
html:not(.dark) .fi-modal-heading,
html:not(.dark) .fi-wi-stats-overview-stat-value {
    color: var(--ppis-purple-900);
}

/* Section titles pick up the wireframe's heading blue. */
html:not(.dark) .fi-section-header-heading {
    color: var(--ppis-blue-700);
}

html:not(.dark) .fi-breadcrumbs-item-label {
    color: var(--ppis-purple-600);
}

/*
 * Top bar and sidebar header: white surface finished with the 4px brand
 * gradient rule, forming one continuous line across the top of the screen.
 */
html:not(.dark) .fi-topbar nav,
html:not(.dark) .fi-sidebar-header {
    border-bottom: 4px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        var(--ppis-gradient-brand-bar) border-box;
}

/* Sidebar: solid purple-900 with pale lavender items, as drawn. */
html:not(.dark) .fi-sidebar {
    background-color: var(--ppis-purple-900);
}

html:not(.dark) .fi-sidebar-nav {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

html:not(.dark) .fi-sidebar-group-label {
    color: var(--ppis-purple-400);
    font-family: var(--ppis-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

html:not(.dark) .fi-sidebar-group-collapse-button {
    color: var(--ppis-purple-400);
}

html:not(.dark) .fi-sidebar-item-label {
    color: var(--ppis-purple-200);
}

html:not(.dark) .fi-sidebar-item-icon {
    color: var(--ppis-purple-400);
}

html:not(.dark) .fi-sidebar-item-button:hover,
html:not(.dark) .fi-sidebar-group-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-button,
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(255, 255, 255, 0.12);
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #ffffff;
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--ppis-pink-400);
}

/* Sub-item connector lines on the purple ground. */
html:not(.dark) .fi-sidebar-item-grouped-border {
    border-color: rgba(255, 255, 255, 0.16);
}

/*
 * Cards keep Filament's structure; the hairline ring moves from cool gray to
 * the design system's lavender line color. Radius already matches (12px).
 */
html:not(.dark) :is(.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-tabs, .fi-tabs) {
    --tw-ring-color: var(--ppis-line);
}

/*
 * Table chrome, colors only — column structure, sorting, filters, actions and
 * every gradebook behavior stay exactly as they are. Header rows take the
 * pale purple tint the wireframe uses on the gradebook and list screens.
 */
html:not(.dark) .fi-ta-header-cell {
    background-color: var(--ppis-purple-100);
}

html:not(.dark) .fi-ta-header-cell-label {
    color: var(--ppis-purple-800);
}

html:not(.dark) .fi-ta-header-cell-sort-icon {
    color: var(--ppis-purple-600);
}