* { box-sizing: border-box; }
body {
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: #f8f1e2;
    color: #2b1c14;
}
.admin-nav {
    background: #401a12;
    color: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.admin-nav a { color: #ddc9a3; text-decoration: none; }
.admin-nav a:hover { color: #fff; }
.admin-nav .spacer { flex: 1; }
main { max-width: 1300px; margin: 0 auto; padding: 1.5rem; padding-bottom: 3rem; }

/* Site-wide admin date/time footer -- see includes_nav.php, which emits
   this on every admin page. `position: fixed` pins it to the bottom of the
   viewport regardless of scroll position or how tall the page's own
   content is (matching the same reasoning as .actions-dropdown's `fixed`
   positioning above it in this file). Given a lower z-index than
   .actions-dropdown (20) on purpose: on a short or mobile screen, an open
   Actions menu near the bottom of the page is allowed to render on top of
   this bar rather than being pushed up or clipped to avoid it. `main`'s
   extra bottom padding above (and in the mobile breakpoint below) keeps
   ordinary page content -- buttons, table rows, form fields -- from ending
   up hidden behind it. */
.admin-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: #401a12;
    color: #ddc9a3;
    font-size: 0.78rem;
    padding: 0.4rem 1rem;
    text-align: center;
}
.stat-cards { display: flex; gap: 1rem; margin: 1rem 0; }
.stat-cards .card {
    background: #fff;
    border-radius: 6px;
    padding: 1rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}
.stat-cards .card strong { font-size: 1.8rem; }
.button, button {
    background: #6b2b1f;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
/* Wraps every admin-table so it scrolls sideways on narrow screens instead
   of squeezing columns unreadably thin or breaking the page layout --
   mirrors public/assets/style.css's .report-scroll pattern. */
.table-scroll {
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 6px;
}
.table-scroll .admin-table, .table-scroll table.admin-table {
    margin: 0;
}
.admin-table, table.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin: 1rem 0;
}
.admin-table th, .admin-table td {
    border: 1px solid #ddd;
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.admin-table th { background: #eee; }
/* The record list's per-row actions (Edit, Delete, the four certificate
   print links, View public page) used to be a flat "Edit | Delete | ..."
   list of links -- fine at 4 links, unreadable and forced the whole table
   to scroll sideways once it grew to 7. Collapsed into a single "Actions"
   dropdown instead (native <details>/<summary>, no JS framework needed --
   see admin.js for the bit of vanilla JS that closes it when another one
   opens or you click elsewhere), so the table stays exactly as wide as its
   5 data columns regardless of how many actions a row ends up with. */
.actions-menu { position: relative; display: inline-block; }
.actions-menu summary {
    list-style: none;
    cursor: pointer;
    background: #6b2b1f;
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    font-size: 0.9rem;
    user-select: none;
}
.actions-menu summary::-webkit-details-marker { display: none; }
.actions-menu summary::after { content: '\25BE'; margin-left: 0.4em; }
.actions-menu[open] summary { background: #6b2b1f; }
/* Stacked vertically, not the old inline "|"-separated row -- this is the
   whole point of the redesign, so every action is reachable without
   scrolling regardless of how many get added later.
   `position: fixed` (with admin.js's positionActionsDropdown() setting its
   top/left in JS to sit right under the button that opened it) rather than
   `absolute` in the table cell's own flow -- an `absolute` dropdown here
   would get clipped by .table-scroll's `overflow-x: auto` on mobile
   (setting overflow on one axis clips the other axis too, even though
   overflow-y was never touched directly), which is exactly what made this
   menu hard to open on a phone. `fixed` positions relative to the
   viewport instead, so no scrolling ancestor can clip it. */
.actions-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    min-width: 210px;
    z-index: 20;
    overflow: hidden;
}
.actions-dropdown a {
    padding: 0.5rem 0.9rem;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}
.actions-dropdown a:last-child { border-bottom: none; }
.actions-dropdown a:hover { background: #f2f3f5; }
.admin-form { background: #fff; padding: 1rem 1.5rem; border-radius: 6px; max-width: 500px; }
.admin-form label { display: block; margin-bottom: 0.75rem; }
.admin-form input, .admin-form select, .admin-form textarea {
    width: 100%;
    padding: 0.4rem;
    margin-top: 0.2rem;
}
.inline-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.error { color: #a4262c; }
.success { color: #107c10; }
.hint { color: #666; font-size: 0.85rem; margin-top: -0.5rem; }

/* Auto-generated Registration number preview shown on the "add" pedigree
   form (see render_field()'s Registration special-case in
   admin/pedigree_form.php) -- styled like a disabled field so it visually
   reads as "not yours to type into" without actually disabling it (a
   disabled input wouldn't submit its value). */
.registration-preview { background: #f2f3f5; color: #555; cursor: not-allowed; }

/* Pedigree form's "Calculate from Sire & Dam" button (Inbreeding
   Coefficient field) -- a small secondary action sitting right under a
   full-width number input, not a full-size form button, plus the status
   text/result underneath it. Reuses .error/.success for the two outcomes
   rather than introducing new color rules. */
.coi-calc-button { margin-top: 0.4rem; font-size: 0.82rem; padding: 0.35rem 0.75rem; }
.coi-calc-status { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: #666; }
.coi-calc-status.error { color: #a4262c; }
.coi-calc-status.success { color: #107c10; }

/* --- Task Manager (admin/tasks.php, task_form.php) + Calendar
   (admin/calendar.php) --- */

/* Site-wide "N tasks overdue/due today" banner -- see includes_nav.php,
   which only emits this element at all when there's something to flag.
   Amber/warning styling (not the .error red) since an overdue task is a
   nudge to go handle it, not a failure state. */
.task-reminder-banner {
    background: #fdf1d6;
    border-bottom: 1px solid #eecd8a;
    color: #6b4a00;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.task-reminder-banner a { color: #6b4a00; font-weight: 600; }

.task-filter-bar { font-size: 0.92rem; }
.task-filter-bar .preset-active { font-weight: 700; text-decoration: underline; }

/* Row/cell highlighting shared between the task list table and the
   calendar's per-day task chips -- same three states, same meaning,
   wherever a task shows up. */
.admin-table tr.task-overdue td { background: #fbeaea; }
.admin-table tr.task-due-today td { background: #fdf1d6; }
.admin-table tr.task-done td { color: #888; }
.admin-table tr.task-done td:nth-child(2) { text-decoration: line-through; }

.task-flag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.4rem;
    background: #a4262c;
    color: #fff;
}
.task-flag-today { background: #b8860b; }

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
}
.calendar-header h2 { margin: 0; font-size: 1.2rem; }

.calendar-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed;
}
.calendar-table th {
    background: #eee;
    padding: 0.5rem;
    border: 1px solid #ddd;
    font-size: 0.85rem;
}
.calendar-table td {
    border: 1px solid #ddd;
    vertical-align: top;
    height: 90px;
    width: 14.28%;
    padding: 0.3rem;
    font-size: 0.8rem;
}
.calendar-table td.calendar-blank { background: #fafafa; }
.calendar-table td.calendar-today { background: #f5ecd8; border: 2px solid #6b2b1f; }
.calendar-daynum { font-weight: 700; margin-bottom: 0.25rem; }
.calendar-task {
    background: #f2f3f5;
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-task a { color: #222; text-decoration: none; }
.calendar-task a:hover { text-decoration: underline; }
.calendar-task.task-overdue { background: #fbeaea; }
.calendar-task.task-due-today { background: #fdf1d6; }
.calendar-task.task-done { background: #eee; color: #888; text-decoration: line-through; }
.calendar-note {
    background: #eef4f8;
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2c4a5e;
}
.calendar-note a { color: inherit; text-decoration: none; }
.calendar-note a:hover { text-decoration: underline; }
.calendar-add-note {
    display: block;
    font-size: 0.72rem;
    color: #888;
    text-decoration: none;
    margin-top: 0.1rem;
}
.calendar-add-note:hover { text-decoration: underline; color: #555; }

/* Restore Database / Import SQLite's optional "target a different database"
   section -- visually set apart from the rest of the form (file upload,
   confirmation) since it changes what the destructive action actually
   affects. */
.target-db-fieldset {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem 1rem 0.25rem;
    margin: 0.25rem 0 1.25rem;
}
.target-db-fieldset legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.4rem; color: #444; }
.target-db-fieldset .hint { margin-top: 0; margin-bottom: 0.85rem; }
.warning-box {
    background: #fdf1d6;
    border: 1px solid #eecd8a;
    border-left: 4px solid #b8860b;
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
    max-width: 700px;
}
.warning-box p { margin: 0.4rem 0; }
.warning-box p:first-child { margin-top: 0; }
.warning-box p:last-child { margin-bottom: 0; }
.danger-button, button.danger-button {
    background: #a4262c;
}
.danger-button:hover, button.danger-button:hover {
    background: #7e1d22;
}
.protected-badge {
    display: inline-block;
    background: #fdf1d6;
    color: #8a5a00;
    border: 1px solid #eecd8a;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.55rem;
    margin-left: 0.4rem;
    cursor: help;
}
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-form {
    background: #fff;
    padding: 2rem;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 320px;
}
.login-form label { display: block; margin-bottom: 1rem; }
.login-form input { width: 100%; padding: 0.5rem; margin-top: 0.25rem; }

.pedigree-form { max-width: 100%; }
.pedigree-form fieldset {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.25rem 1.5rem;
}
.pedigree-form legend { font-weight: bold; padding: 0 0.5rem; grid-column: 1 / -1; }
.pedigree-form label { margin-bottom: 0.75rem; font-size: 0.9rem; }

/* Current-photo preview shown above the Photo field's filename box (see
   render_field()'s Photo special-case in admin/pedigree_form.php). Capped
   in size so a huge original upload doesn't blow out the field's grid
   column -- this is just a preview, not the full-size photo. */
.photo-thumb { display: block; max-width: 200px; max-height: 150px; width: auto; height: auto; object-fit: contain; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 0.4rem; }

/* --- Reports (admin/reports.php + admin/report_*.php) --- */
.report-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.report-link-card {
    background: #fff;
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}
.report-link-card h2 { margin-top: 0; font-size: 1.1rem; }
.report-link-card p { flex: 1; color: #444; font-size: 0.92rem; }
.report-link-card .button { align-self: flex-start; }

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
/* Plain links only -- a.button inside the header (e.g. the Kentucky
   report's "Download CSV") keeps .button's white text; this rule used to
   turn it maroon-on-maroon and unreadable. */
.report-header a:not(.button) { color: #6b2b1f; }
.report-actions { display: flex; gap: 0.5rem; align-items: center; }
.report-meta { color: #666; font-size: 0.9rem; margin-top: -0.5rem; }
.report-note { color: #666; font-size: 0.85rem; }
.report-note-inline { color: #888; font-weight: normal; font-size: 0.8rem; }

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 2rem;
    align-items: start;
}

.owner-group { margin-bottom: 1.5rem; }
.owner-group h2 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.owner-count { color: #888; font-weight: normal; font-size: 0.9rem; }

/* Horses by Owner report: A-Z quick-jump strip and the pager shown
   above/below the current page's owners (see admin/report_owners.php). */
.owner-az-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.75rem 0;
}
.owner-az-jump a {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    padding: 0.15rem 0.35rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #6b2b1f;
    text-decoration: none;
    font-size: 0.9rem;
}
.owner-az-jump a:hover { background: #f2e9e6; }
.owner-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0;
}
.owner-pager a:not(.button) {
    color: #6b2b1f;
    text-decoration: none;
    padding: 0.2rem 0.5rem;
}
.owner-pager a:not(.button):hover { text-decoration: underline; }
.owner-pager-current {
    font-weight: bold;
    padding: 0.2rem 0.5rem;
    background: #6b2b1f;
    color: #fff;
    border-radius: 4px;
}
.owner-pager-gap { color: #999; }

/* "Quick add contact" popup on admin/pedigree_form.php -- see the
   'contact-ref' case in render_field() and the missingContacts JS. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.modal h3 { margin-top: 0; }
.modal label { display: block; margin-bottom: 0.6rem; }
.modal label input { width: 100%; box-sizing: border-box; }
.modal-actions { display: flex; gap: 0.5rem; margin: 1rem 0 0.5rem; }

/* Read-only single-contact page (admin/contact_view.php). */
.contact-view-group {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem 0.25rem;
}
.contact-view-group legend { font-weight: bold; padding: 0 0.4rem; }
.contact-view-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
}
.contact-view-field dt { color: #666; font-size: 0.85rem; }
.contact-view-field dd { margin: 0 0 0.75rem; }
@media print {
    .contact-view-fields { grid-template-columns: repeat(2, 1fr); }
}

/* Registry Stats' breakdown picker (see assets/reports.js) -- one dropdown
   swaps between the By Sex / By Color / etc. tables below it. */
.report-section-picker {
    display: block;
    margin: 1rem 0;
    font-weight: 600;
    font-size: 0.92rem;
}
.report-section-picker select {
    margin-left: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.92rem;
}

/* Date-range filter bar (admin/report_registrations_certifications.php) --
   a row of quick-preset links plus a small custom From/To form, repeated
   once per section (Registrations, Certifications) since each has its own
   independent range. */
.date-range-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
}
.date-range-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.date-range-presets a {
    padding: 0.3rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #6b2b1f;
    text-decoration: none;
}
.date-range-presets a:hover { background: #f2f3f5; }
.date-range-presets a.preset-active { background: #6b2b1f; color: #fff; border-color: #6b2b1f; }
.date-range-form { margin-bottom: 0; font-size: 0.9rem; }
.date-range-form label { display: flex; align-items: center; gap: 0.35rem; }
.date-range-form input[type="date"] { padding: 0.25rem; }

/* Attrition report (admin/report_attrition.php) -- a server-rendered inline
   SVG line chart (no charting library) comparing horses born per year
   against horses turning the cutoff age per year, plus a hover
   crosshair/tooltip driven by a bit of vanilla JS. Colors are the
   dataviz-skill default categorical slots 1 (blue) and 2 (orange) --
   validated colorblind-safe as an adjacent pair -- rather than the site's
   own navy/gold brand colors, since gold reads too close to the existing
   amber "due today" task-banner color to safely mean something different
   here. */
.attrition-chart-card {
    background: #fff;
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
}
.attrition-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.75rem; font-size: 0.88rem; color: #444; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.legend-born { background: #2a78d6; }
.legend-agedout { background: #eb6834; }
.legend-agedout-projected {
    background: repeating-linear-gradient(90deg, #eb6834 0 5px, transparent 5px 9px);
}
.attrition-chart { width: 100%; height: auto; display: block; }
.attrition-chart .grid-line { stroke: #e1e0d9; stroke-width: 1; }
.attrition-chart .axis-label { fill: #666; font-size: 11px; }
.attrition-chart .today-line { stroke: #999; stroke-width: 1; stroke-dasharray: 3 3; }
.attrition-chart .today-label { fill: #666; font-size: 11px; }
.attrition-chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.attrition-chart .series-born { stroke: #2a78d6; }
.attrition-chart .series-agedout { stroke: #eb6834; }
.attrition-chart .series-agedout.series-projected { stroke-dasharray: 5 4; opacity: 0.85; }
.attrition-chart .hover-col { cursor: crosshair; }
.attrition-chart .crosshair { stroke: #ccc; stroke-width: 1; }
.chart-tooltip {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: #2b1c14;
    color: #fff;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    pointer-events: none;
    min-width: 150px;
    z-index: 5;
}
.chart-tooltip strong { display: block; margin-bottom: 0.3rem; }
.chart-tooltip-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }
.chart-tooltip-row .legend-swatch { flex-shrink: 0; }
.attrition-projected-row td { color: #777; font-style: italic; }

/* Small-screen tuning -- the nav's .spacer forces a line break so the
   right-hand links (Logout, etc.) drop to their own row instead of
   squeezing next to the left-hand links; stat cards and the report/form
   grids collapse to a single column instead of staying cramped side by
   side; page padding shrinks so content isn't pinched against the edges
   of a phone screen. */
@media (max-width: 700px) {
    .admin-nav {
        padding: 0.6rem 1rem;
        gap: 0.5rem 0.8rem;
    }
    .admin-nav .spacer { flex-basis: 100%; height: 0; }
    main { padding: 1rem; padding-bottom: 3rem; }
    .admin-footer { font-size: 0.72rem; padding: 0.35rem 0.6rem; }
    .stat-cards { flex-direction: column; }
    .report-links, .report-grid { grid-template-columns: 1fr; }
    .pedigree-form fieldset { grid-template-columns: 1fr; }
    .date-range-bar { flex-direction: column; align-items: stretch; }
    .inline-form { flex-direction: column; align-items: stretch; }
    .admin-form { max-width: 100%; }
}

/* Reports print cleanly -- no dark nav bar or action buttons on the
   printed page, just the report content itself. */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    main { max-width: none; padding: 0; }
    .stat-cards .card, .report-link-card, .attrition-chart-card { box-shadow: none; border: 1px solid #ccc; }
    .chart-tooltip { display: none !important; }
}

/* Pedigree form "Record History" box -- who entered / last edited the
   record and when (read-only; stamped on save by admin/pedigree_form.php). */
.pedigree-form fieldset.record-history { display: block; background: #faf6ee; }
.record-history p { margin: 0.25rem 0; }