/* Mustang Mile treasury -- styled to match pto_directory_app:
   Meridian Elementary red & black on white, Open Sans body, Roboto
   Condensed headings, Merriweather for the wordmark, flat cards. The
   palette and component shapes are lifted from that app's style.css so the
   two PTO tools read as one family. */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

:root {
    /* Meridian Elementary: Red & Black */
    --primary-color: #C8102E;
    --primary-hover: #A00C23;
    --secondary-color: #000000;
    --text-color: #333333;
    --text-muted: #666666;
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e0e0e0;
    --border-radius: 4px;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --good: #065f46;
    --warn: #92400e;
    --bad: #b91c1c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.45;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header: white, sticky, wordmark left / working-as right, like the
   directory app's site header. */
.site-header {
    background: white;
    padding: 0.8rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
}

.school-logo { text-decoration: none; }
.school-logo-text { display: flex; flex-direction: column; }
.school-logo-text .main {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: black;
    line-height: 1.1;
}
.school-logo-text .sub {
    font-size: 0.8rem;
    color: #555;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.whoami { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.whoami label {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
}
.whoami select { width: auto; max-width: 16rem; padding: 0.35rem 0.5rem; }

/* Nav: black uppercase condensed links, red on hover -- the directory
   app's nav-links, as a bar under the header. */
.site-nav {
    background: white;
    border-bottom: 1px solid var(--border-color);
    padding: 0.4rem 2rem 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}
.site-nav a {
    text-decoration: none;
    color: black;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    transition: color 0.2s;
}
.site-nav a:hover { color: var(--primary-color); }

.badge {
    background: var(--primary-color);
    color: white;
    border-radius: 9px;
    padding: 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    flex: 1;
}

h1, h2, h3, h4, h5 {
    color: var(--secondary-color);
    font-weight: 700;
    margin-top: 0;
}
h1 {
    font-size: 2rem;
    color: var(--primary-color);
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0.4rem 0 1rem;
}
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }

/* Alerts: same palette as the directory app, warning included. */
.alert {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: 0.95rem;
}
.alert-error   { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.alert-success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.alert-info    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.alert-warning { background: #fef9c3; color: #92400e; border-color: #fde68a; }

/* Flat cards (the directory app's glass-card). */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.2rem 1.4rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.2rem;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}
.tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 0.85rem 1rem;
}
.tile .label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.tile .value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 0.15rem;
    font-family: 'Roboto Condensed', sans-serif;
}
.tile .sub { color: var(--text-muted); font-size: 0.85rem; }

table { border-collapse: collapse; width: 100%; background: var(--card-bg); }
th, td { border-bottom: 1px solid #ddd; padding: 0.5rem 0.6rem; text-align: left; }
th {
    background: #f8f9fa;
    color: #333;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
tr:hover td { background: #f9f9f9; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

form.inline { display: inline; }
label {
    display: block;
    margin: 0.6rem 0 0.25rem;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.85rem;
    text-transform: uppercase;
}
input[type=text], input[type=email], input[type=date],
input[type=datetime-local], input[type=number],
input[type=password], input[type=file], select, textarea {
    padding: 0.55rem 0.6rem;
    border-radius: var(--border-radius);
    border: 1px solid #ccc;
    font-size: 0.95rem;
    font-family: inherit;
    width: 100%;
    max-width: 22rem;
    background: #fff;
}
textarea { max-width: 100%; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Buttons: the directory app's .btn -- red, uppercase, sharp corners. */
button, .button {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 2px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}
button:hover, .button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}
button.danger {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
button.danger:hover { background: var(--primary-color); color: white; }
button.small, .button.small { padding: 0.25rem 0.6rem; font-size: 0.75rem; margin: 0; }
button.secondary, .button.secondary {
    background: #f8f9fa;
    color: var(--text-color);
    border: 1px solid #ddd;
}
button.secondary:hover, .button.secondary:hover { background: #e2e6ea; transform: none; }
/* "Download CSV" row under a page heading, and the edit/delete cell. */
.downloads { margin: -0.4rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
td.actions { white-space: nowrap; }
td.actions .button, td.actions form.inline { margin-right: 0.3rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.muted { color: var(--text-muted); }
.right { text-align: right; }
.tag {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 10px;
    font-size: 0.78rem;
    border: 1px solid var(--border-color);
}
.tag.good { color: var(--good); border-color: var(--good); }
.tag.warn { color: var(--warn); border-color: var(--warn); }
.tag.bad  { color: var(--bad);  border-color: var(--bad); }
.tag.family { color: var(--secondary-color); border-color: var(--secondary-color); margin-left: 0.15rem; }
.tag.hand { color: var(--warn); border-color: var(--warn); border-style: dashed; margin-left: 0.15rem; }
.tag.admin { color: white; background: var(--secondary-color); border-color: var(--secondary-color); }

/* The official event-end row on the Daily grid (the grid itself may run a
   few days longer for late-arriving money). */
tr.official-end td { background: #fdf0f2; border-top: 2px solid var(--primary-color); }

/* Dashboard cumulative chart (server-rendered SVG) */
.fundchart { display: block; width: 100%; height: auto; }
.fundchart .grid { stroke: #eee; stroke-width: 1; }
.fundchart .ylab { font-size: 12px; fill: var(--text-muted); text-anchor: end; }
.fundchart .xlab { font-size: 12px; fill: var(--text-muted); text-anchor: middle; }
.fundchart .thisyear { fill: none; stroke: var(--secondary-color); stroke-width: 3; stroke-linejoin: round; }
.fundchart .dot { fill: var(--secondary-color); }
.fundchart .dot:hover { fill: var(--primary-color); }
.fundchart .prior { fill: none; stroke: #d9a3ac; stroke-width: 2.4; stroke-linejoin: round; }
.fundchart .pdot { fill: #d9a3ac; }
.fundchart .pdot:hover { fill: var(--primary-color); }
.fundchart .goal { stroke: var(--primary-color); stroke-width: 1.5; }
.fundchart .goallab { font-size: 12px; fill: var(--primary-color); text-anchor: end; }
.chart-legend .swatch { display: inline-block; width: 18px; height: 4px; vertical-align: middle; border-radius: 2px; }
.chart-legend .swatch.this { background: var(--secondary-color); }
.chart-legend .swatch.goal { background: var(--primary-color); }
.chart-legend .swatch.prior { background: #d9a3ac; }
.chart-legend .swatch.prior2 { background: transparent; height: 0; border-top: 3px dashed #a9b1ba; }
.chart-legend .mm-swatch { display: inline-block; width: 9px; height: 9px; border: 2px solid var(--primary-color); background: #fff; transform: rotate(45deg); vertical-align: middle; margin: 0 4px 0 2px; }
/* The year before last: dashed grey, quieter than last year's pink. */
.fundchart .prior2 { fill: none; stroke: #a9b1ba; stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; }
.fundchart .pdot2 { fill: #a9b1ba; }
/* Each year's Mustang Mile (counting) day is a diamond on its line. */
.fundchart .mm { stroke: var(--primary-color); stroke-width: 2; fill: #fff; }
.fundchart .mmline { stroke: var(--primary-color); stroke-width: 1.2; stroke-dasharray: 4 4; }
.fundchart .mmlab { font-size: 11px; fill: var(--primary-color); text-anchor: middle; letter-spacing: .04em; text-transform: uppercase; }
/* Instant tooltip (table_tools.js): a crosshair plus every year's figure
   at the hovered slot. Replaces the SVG <title> hover, whose delay the
   browser owns. */
.fundchart .cross { stroke: #333; stroke-width: 1; opacity: 0; }
.fundchart .hl { fill: none; stroke: var(--primary-color); stroke-width: 2; opacity: 0; }
.fundchart-wrap { position: relative; }
.fundchart-tip { position: absolute; pointer-events: none; background: #222; color: #fff; padding: 6px 9px; border-radius: 4px; font-size: 12px; line-height: 1.45; min-width: 150px; opacity: 0; z-index: 2; font-variant-numeric: tabular-nums; }
.fundchart-tip .h { font-weight: 700; margin-bottom: 3px; }
.fundchart-tip .r { display: flex; justify-content: space-between; gap: 14px; }

.progressbar { background: #eee; border-radius: 6px; height: 12px; overflow: hidden; }
.progressbar > div { background: var(--primary-color); height: 100%; }

/* Sortable column headings (directory app's .sort-header): the whole cell
   is the click target, so the padding lives on the anchor. */
th.sortable { padding: 0; }
.sort-header {
    display: block;
    padding: 0.5rem 0.6rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.sort-header:hover, .sort-header:focus-visible { background: rgba(0, 0, 0, 0.05); }
.sort-arrow { font-size: 0.75em; margin-left: 0.25rem; }

.filter-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 0.6rem;
}
.filter-bar label { margin: 0; }
.filter-bar select { width: auto; padding: 0.35rem 0.5rem; }
.filter-bar input[type=search] {
    padding: 0.35rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}
.filter-bar .muted { font-size: 0.85rem; }

/* Student picker: search box stacked over the narrowed select. */
.student-picker {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    vertical-align: top;
}
.student-picker .student-picker-search {
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}

.upload-widget {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    background: #fff;
}

/* Footer: the directory app's red band. */
.site-footer {
    background: var(--primary-color);
    color: white;
    padding: 2rem;
    margin-top: auto;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.site-footer h3 {
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.3rem;
    margin: 0 0 0.4rem;
}
.site-footer p { margin: 0; font-size: 0.9rem; opacity: 0.9; }

/* Count sheets (counting day, 2026-09-18): a phone-first entry form, the
   bill-and-coin tally, and the signature list. */
.entry-form input.amount-big {
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
    padding: 0.5rem 0.7rem;
}
.segmented { display: flex; gap: 0; margin-bottom: 0.8rem; }
.segmented label {
    flex: 1;
    margin: 0;
    padding: 0.55rem 0.6rem;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: 600;
    background: #fff;
}
.segmented label:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); }
.segmented label:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; border-left: 0; }
.segmented label:has(input:checked) { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.segmented input[type=radio] { width: auto; margin: 0 0.35rem 0 0; }
table.tally { max-width: 32rem; }
table.tally input[type=number] { width: 6rem; text-align: right; margin: 0; padding: 0.35rem 0.5rem; }
tr.total-row td { border-top: 2px solid #888; }
[data-tally-delta].good { color: var(--good); }
[data-tally-delta].bad { color: var(--bad); }
.signatures { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.signatures li { padding: 0.3rem 0; }
/* Split rows on the entry forms: one student and their share per line. */
details.split-rows summary { cursor: pointer; }
.split-row { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.5rem; }
.split-row .student-picker { flex: 1 1 auto; min-width: 0; }
.split-row input[name^="split_amount_"] { flex: 0 0 6.5em; width: 6.5em; }
.more-row input[name^="more_check_number_"] { flex: 1 1 auto; min-width: 0; }
.more-row input[name^="more_amount_"] { flex: 0 0 6.5em; width: 6.5em; }
details.more-rows summary { cursor: pointer; }
[data-split-more] { margin-bottom: 0.6rem; }

/* The hidden attribute must win over display rules such as
   .split-row { display: flex }, or a hidden split row still shows. */
[hidden] { display: none !important; }
/* "Credited to student" while a split is open: cleared and greyed. */
.student-picker.is-off { opacity: 0.5; }
label.is-off { color: #888; }
/* Collapsible lists (prize qualifiers, the Bling Chain pool): the
   heading is the toggle and carries the count. */
details.qualifiers > summary { cursor: pointer; list-style-position: outside; }
details.qualifiers > summary h2 { display: inline; margin: 0; }
details.qualifiers > summary [data-filter-shown] { margin-left: 0.6rem; font-size: 0.9rem; }
details.qualifiers[open] > summary { margin-bottom: 0.6rem; }
details.instructions summary { cursor: pointer; }
details.instructions h3 { margin: 0.8rem 0 0.3rem; font-size: 1rem; }
details.instructions ul { margin: 0.2rem 0; padding-left: 1.3rem; }
details.instructions p { margin: 0.4rem 0; }
.table-scroll { overflow-x: auto; }