/*
 * Anjal Analytics — app stylesheet (self-hosted, no CDN).
 *
 * Committed to a single LIGHT theme on purpose (internal tool): an honest
 * single-look commit beats a half-done auto dark flip. Palette + chrome are the
 * data-viz reference values (see docs — light surface #fcfcfb). If a dark theme
 * is ever wanted, add validated dark steps, don't just invert.
 */

:root {
    /* Surfaces & ink */
    --surface:    #fcfcfb;
    --plane:      #f9f9f7;
    --ink:        #0b0b0b;
    --ink-2:      #52514e;
    --muted:      #898781;
    --grid:       #e1e0d9;
    --baseline:   #c3c2b7;
    --border:     rgba(11, 11, 11, 0.10);

    /* Series (validated categorical slots) */
    --paid:       #2a78d6; /* blue  */
    --free:       #eb6834; /* orange */
    --deact:      #d03b3b; /* status critical — deactivations (negative) */
    --net:        #52514e; /* neutral ink line */
    --good:       #006300; /* positive delta text */

    --radius: 10px;
    --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 1px 3px rgba(11, 11, 11, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * Column flex so the cross-site bar sits at the BOTTOM of the viewport on a
 * short page instead of floating directly under the content. .wrap grows to
 * absorb the slack (see below).
 */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--plane);
    line-height: 1.5;
}

a { color: var(--paid); }
code { background: var(--grid); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* ---- Top bar ---- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.topbar .brand {
    font-weight: 650; font-size: 1.05rem;
    color: var(--ink); text-decoration: none;
}
.topbar .brand:hover { text-decoration: underline; }
.nav-links { display: flex; gap: 4px; margin-left: 20px; }
.nav-links a {
    padding: 5px 12px; border-radius: 999px; text-decoration: none;
    color: var(--ink-2); font-size: 0.92rem;
}
.nav-links a:hover { background: var(--plane); }
.nav-links a.active { background: var(--paid); color: #fff; }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-right .who { color: var(--muted); font-size: 0.9rem; }
.btn {
    padding: 6px 13px; border: 1px solid var(--border); background: var(--surface);
    color: var(--ink-2); border-radius: 8px; cursor: pointer; font-size: 0.9rem;
}
.btn:hover { background: var(--plane); }

/* ---- Page ---- */
/* flex: 1 — the growing box that pushes .sitebar to the bottom of a short page. */
.wrap { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px 20px 56px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 1.5rem; margin: 0 0 4px; }
.subtle { color: var(--muted); font-size: 0.9rem; }

/* ---- Range selector ---- */
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 22px; }
.toolbar a {
    padding: 6px 13px; border-radius: 999px; text-decoration: none;
    border: 1px solid var(--border); color: var(--ink-2); font-size: 0.9rem; background: var(--surface);
}
.toolbar a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- KPI cards ---- */
.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 24px;
}
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi-card .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-card .value { font-size: 1.65rem; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-card .sub { color: var(--ink-2); font-size: 0.85rem; margin-top: 2px; }
.pos { color: var(--good); }
.neg { color: var(--deact); }

/* ---- Cards / charts ---- */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 18px 12px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.card h2 { font-size: 1.05rem; margin: 0 0 2px; }
.card .hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 12px; }
.chart-box { position: relative; height: 340px; }
/* A card flagging a data-quality caveat. Orange from the validated palette, not
   red: this is "read this before trusting the column", not a failure. The rule is
   on the leading edge only, so it reads as an aside rather than an alert box. */
.card.notice { border-left: 3px solid var(--free); }

/* ---- Trials panel ---- */
/* Two cards side by side on a wide screen, stacked below ~880px. The cards keep
   their own margin-bottom, so the grid gap only has to cover the horizontal
   space. Used by the Website dashboard, where several panels are narrow enough
   to pair up and reading them side by side is the point. */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 20px; }

.trial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.mini { display: flex; gap: 18px; flex-wrap: wrap; }
.mini .stat .n { font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.mini .stat .k { color: var(--muted); font-size: 0.82rem; }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.9rem; }
.bar-row .k { width: 84px; color: var(--ink-2); }
.bar-row .track { flex: 1; height: 8px; background: var(--grid); border-radius: 999px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--paid); border-radius: 999px; }
.bar-row .n { width: 32px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---- Data table ---- */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th, .data-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
.data-table th:first-child, .data-table td:first-child { text-align: left; font-variant-numeric: normal; }
.data-table thead th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; border-bottom: 1px solid var(--baseline); }
.data-table tbody tr:hover { background: var(--plane); }

/* ---- Login ---- */
.center-narrow { max-width: 340px; margin: 8vh auto 0; }

/* ---- Cross-site bar (templates/partials/footer.php) ---- */
.sitebar { background: var(--surface); border-top: 1px solid var(--border); }
.sitebar-inner {
    max-width: 1080px; /* lines up with .wrap above it */
    margin: 0 auto;
    padding: 14px 20px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
    font-size: 0.85rem; color: var(--muted);
}
.sitebar-brand { font-weight: 650; color: var(--ink-2); }
/* Overrides the global blue link colour: these are chrome, not content links. */
.sitebar a { color: var(--ink-2); text-decoration: none; }
.sitebar a:hover { color: var(--ink); text-decoration: underline; }
.sitebar-current { color: var(--muted); }
.sitebar-note { color: var(--baseline); }
.sitebar-copy { margin-left: auto; }

/* ---- Narrow-screen navigation ----
 *
 * A native <details> disclosure, not a scripted menu. app.js is loaded by the
 * individual chart templates rather than by the layout, so it is absent on
 * several pages; a JavaScript hamburger would be dead on exactly the pages with
 * no charts. <summary> also gets focus and keyboard operation for free.
 *
 * Hidden entirely on wide screens, where .nav-links carries the same links.
 */
.nav-menu { display: none; }

@media (max-width: 560px) {
    /* The horizontal row does not fit; the menu below replaces it.
     *
     * Until Aug 2026 this rule stood ALONE — the links were hidden and nothing
     * took their place, so a phone had no navigation at all and no way back to
     * Home short of editing the URL. */
    .nav-links { display: none; }

    .topbar { padding: 10px 14px; gap: 10px; }
    /* The signed-in name is not worth the width when it costs a nav item. */
    .nav-right .who { display: none; }

    .nav-menu { display: block; position: relative; }
    .nav-menu > summary {
        list-style: none;               /* drop the disclosure triangle */
        cursor: pointer;
        padding: 6px 11px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink-2);
        font-size: 1.05rem;
        line-height: 1;
        user-select: none;
    }
    .nav-menu > summary::-webkit-details-marker { display: none; }
    .nav-menu > summary:hover { background: var(--plane); }
    .nav-menu[open] > summary { background: var(--ink); color: #fff; border-color: var(--ink); }

    /* The panel floats over the page rather than pushing it down, so opening the
       menu never reflows the content behind it. */
    .nav-menu-list {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 30;
        min-width: 190px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 6px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 0 4px 14px rgba(11, 11, 11, 0.12);
    }
    .nav-menu-list a {
        padding: 9px 12px;
        border-radius: 8px;
        text-decoration: none;
        color: var(--ink-2);
        font-size: 0.95rem;
        white-space: nowrap;
    }
    .nav-menu-list a:hover { background: var(--plane); }
    .nav-menu-list a.active { background: var(--paid); color: #fff; }

    .chart-box { height: 280px; }

    /* Two cards side by side never fits a phone; let them stack. */
    .grid-2 { grid-template-columns: 1fr; }

    /* The copyright is the first thing worth losing when the bar wraps. */
    .sitebar-copy { margin-left: 0; }
}