/*
 * Spreely house style for the PubHub admin panel.
 *
 * PubHub is a Spreely tool, so it should not look like a stock Filament
 * install. The values below were read off the live Sngine "sunshine" theme at
 * social.spreely.com rather than copied from a styleguide page — the
 * styleguide.php URL 404s, so the theme's own stylesheets are the only
 * authoritative source there is:
 *
 *   themes/sunshine/stylesheet/style.css          light
 *   themes/sunshine/stylesheet/dark.css           dark
 *   --main-color, set inline in the page head     #63b688
 *
 * Written as plain CSS with custom properties, not as Tailwind utilities.
 * Filament compiles its stylesheet from its own source paths, so a utility
 * class authored in this application is never generated — which is the same
 * reason the dashboard's report tables carry a hand-written stylesheet. This
 * file is registered through FilamentAsset and served as a real stylesheet,
 * loading after Filament's own so these rules win without !important.
 *
 * Only surfaces, type and radii are restyled. Nothing here changes layout,
 * spacing rhythm or component structure: a panel that no longer behaves the
 * way Filament's documentation says it does is a panel nobody can maintain.
 */

:root {
    /* ---- brand ------------------------------------------------------- */

    /* The Spreely green. Filament's own primary ramp is generated from this
       same hex in the panel provider, so buttons and links pick it up; these
       are for the places that need the flat colour. */
    --spreely-green: #63b688;
    --spreely-green-dark: #4e9d71;
    --spreely-green-tint: rgba(99, 182, 136, 0.12);

    /* ---- light surfaces ---------------------------------------------- */

    --spreely-bg: #f9f9f9;
    --spreely-surface: #ffffff;
    --spreely-surface-sunken: #f4f4f4;
    --spreely-border: #e3e4e8;
    --spreely-border-soft: #ededed;

    --spreely-text: #1c1e21;
    --spreely-text-muted: #65676b;

    /* Sngine's card shadow, which is really a hairline plus a faint lift. */
    --spreely-shadow: 0 1px 0 0 #e3e4e8, 0 0 0 1px #f1f1f1;
    --spreely-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.2);

    /* ---- geometry ---------------------------------------------------- */

    /* 8px and 10px carry the theme; 2em is its pill. */
    --spreely-radius: 8px;
    --spreely-radius-lg: 10px;
    --spreely-radius-pill: 2em;

    --spreely-font: 'Poppins', 'Segoe UI Historic', 'Segoe UI', Helvetica, Arial, sans-serif;
    --spreely-font-size: 14.5px;

    /* ---- chrome ------------------------------------------------------ */

    /*
     * The header bar and the wordmark in it.
     *
     * These three are Filament's own values, restated here so the hand-built
     * screens can read the same numbers: --topbar-height (4rem), the sidebar
     * header's padding-inline (spacing × 6), and --text-xl for .fi-logo. The
     * two headers were 64px and 56px tall with a 20px and a 14.5px wordmark,
     * so the logo visibly jumped and shrank on the way between them.
     *
     * Restating rather than importing because Filament's variables are scoped
     * to its own stylesheet, and the monitoring pages never load it.
     */
    --spreely-topbar-height: 4rem;
    --spreely-gutter: 1.5rem;
    --spreely-logo-size: 1.25rem;

    /* ---- status ------------------------------------------------------ */

    /*
     * Good, warning, bad — and their tints.
     *
     * Here rather than in each screen's own stylesheet because there are two
     * of those: the Filament panel and the hand-built monitoring pages, which
     * had drifted to different greens and different reds for the same meaning.
     * "Good" is the brand green, since on a Spreely property green is Spreely's
     * green and nothing else.
     */
    --spreely-ok: #4e9d71;
    --spreely-ok-bg: rgba(99, 182, 136, 0.14);
    --spreely-warn: #b54708;
    --spreely-warn-bg: #fffaeb;
    --spreely-bad: #b42318;
    --spreely-bad-bg: #fef3f2;
}

/*
 * Dark mode.
 *
 * Filament switches on a `dark` class on <html>, Sngine on a body class, so
 * the values are re-declared against Filament's own switch rather than trying
 * to share a selector with the social site.
 */
.dark {
    --spreely-bg: #252525;
    --spreely-surface: #2d2d2d;
    --spreely-surface-sunken: #353535;
    --spreely-border: #3a3a3a;
    --spreely-border-soft: #373737;

    --spreely-text: #e7e7e7;
    --spreely-text-muted: #b6b6b6;

    --spreely-shadow: 0 0 0 1px #373737;
    --spreely-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.45);

    --spreely-green-tint: rgba(99, 182, 136, 0.18);

    --spreely-ok: #7fd3a3;
    --spreely-ok-bg: rgba(99, 182, 136, 0.16);
    --spreely-warn: #fec84b;
    --spreely-warn-bg: rgba(254, 200, 75, 0.14);
    --spreely-bad: #fda29b;
    --spreely-bad-bg: rgba(253, 162, 155, 0.14);
}

/*
 * There is deliberately no prefers-color-scheme fallback here.
 *
 * It is tempting, for the hand-built screens that set their theme from an
 * inline script. It is also a trap: Filament marks dark mode with a class on
 * <html> and marks light mode with *nothing at all* — the element carries only
 * "fi" — so any `html:not(.dark)` media query would fire on a light panel
 * viewed on a machine set to dark, swapping these tokens to their dark values
 * while Filament's own stylesheet stayed light. Dark cards, dark text.
 *
 * The standalone layout guarantees a class instead, which is the honest fix:
 * reading the stored preference can throw, but asking the media query cannot.
 */

/* -------------------------------------------------------------------- type */

/*
 * Poppins throughout, at Sngine's own 14.5px. Filament sizes most of its
 * interface in rem off the root, so the base size is set on the body and
 * everything scales from it rather than being overridden component by
 * component.
 */
body,
.fi-body {
    font-family: var(--spreely-font);
    font-size: var(--spreely-font-size);
    background-color: var(--spreely-bg);
    color: var(--spreely-text);
}

/*
 * Poppins is a geometric face and sets noticeably heavier than Inter at the
 * same weight, so headings come down a step. Left at Filament's weights they
 * read as shouting.
 */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- surfaces */

.fi-main {
    background-color: var(--spreely-bg);
}

/*
 * Cards, tables, widgets and the sidebar all resolve to the same panel
 * treatment on Spreely: white, hairline border, 10px corner, almost no
 * shadow. Filament's default is a heavier ring and a larger radius.
 */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel,
.fi-fo-repeater-item {
    background-color: var(--spreely-surface);
    border: 1px solid var(--spreely-border);
    border-radius: var(--spreely-radius-lg);
    box-shadow: var(--spreely-shadow);
}

.fi-modal-window,
.fi-dropdown-panel {
    box-shadow: var(--spreely-shadow-raised);
}

.fi-sidebar,
.fi-topbar > nav {
    background-color: var(--spreely-surface);
    border-color: var(--spreely-border);
}

/* Section headers sit on the sunken tone, as panel headers do on Spreely. */
.fi-section-header {
    border-bottom: 1px solid var(--spreely-border-soft);
}

/* ---------------------------------------------------------------- controls */

/*
 * Inputs and buttons at 8px. Filament's default rounding is larger, and next
 * to Spreely's cards it reads as a different product.
 */
.fi-input-wrp,
.fi-btn,
.fi-dropdown-list-item,
.fi-ta-search-field .fi-input-wrp {
    border-radius: var(--spreely-radius);
}

.fi-input-wrp {
    border-color: var(--spreely-border);
}

/* Badges and tags keep the pill, which is the theme's most recognisable
   shape and the one place a larger radius is right. */
.fi-badge {
    border-radius: var(--spreely-radius-pill);
}

/*
 * The active navigation item. Spreely marks the current section with a green
 * wash rather than a solid fill, which stays legible against both surfaces.
 */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--spreely-green-tint);
    color: var(--spreely-green-dark);
}

.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    color: var(--spreely-green);
}

/* ------------------------------------------------------------------ tables */

/*
 * Row separators only, no zebra. The dashboard's own report tables already
 * work this way, and two different table treatments in one panel is worse
 * than either.
 */
.fi-ta-row {
    border-color: var(--spreely-border-soft);
}

.fi-ta-header-cell {
    background-color: var(--spreely-surface);
    color: var(--spreely-text-muted);
    font-weight: 500;
}

/* ------------------------------------------------- the hand-built reporting */

/*
 * The dashboard widgets carry their own stylesheet, written before this one
 * existed and with its greys hard-coded. Pointing its tokens at the ones
 * above keeps a single source of truth: change a value here and the report
 * tables follow, rather than drifting a shade at a time.
 */
.ph-table td {
    border-top-color: var(--spreely-border-soft);
}

.ph-table th,
.ph-muted,
.ph-note,
.ph-row-metrics {
    color: var(--spreely-text-muted);
}

.ph-strong,
.ph-row-metrics b {
    color: var(--spreely-text);
}

.ph-rows > div {
    border-top-color: var(--spreely-border-soft);
}

/* The report tag that means "good" adopts the brand green, since on this
   panel green is Spreely's green and nothing else. */
.ph-green {
    background: var(--spreely-green-tint);
    color: var(--spreely-green-dark);
}

.dark .ph-green {
    color: var(--spreely-green);
}

.ph-ok {
    color: var(--spreely-green-dark);
}

.dark .ph-ok {
    color: var(--spreely-green);
}

/* --------------------------------------------------------------------- misc */

/*
 * Filament renders the brand name as text; Spreely sets its wordmark in the
 * brand green at a medium weight.
 *
 * Size and leading are set from the shared token rather than left to
 * Filament's own --text-xl, so that this rule and the monitoring pages'
 * header are reading the same number and cannot fall out of step.
 */
.fi-logo {
    color: var(--spreely-green-dark);
    font-size: var(--spreely-logo-size);
    line-height: var(--spreely-logo-size);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.dark .fi-logo {
    color: var(--spreely-green);
}