/*
 * App-specific styles layered on top of Bootstrap 5.3.
 * Bootstrap handles layout, grid, navbar, cards, forms, tables, buttons,
 * alerts and badges. This file only carries the few app-specific bits that
 * Bootstrap does not provide out of the box.
 */

body { background: var(--bs-light); }

/* Brand logo in the navbar: scale to a fixed height, keep aspect ratio. */
.site-logo { height: 40px; width: auto; display: block; }
.navbar-brand { padding-top: 0.15rem; padding-bottom: 0.15rem; }
@media (max-width: 575.98px) { .site-logo { height: 34px; } }

/* Give the app a slightly wider reading column on large monitors for the
   roster / student data tables, matching the previous design intent. */
@media (min-width: 1400px) { .container { max-width: 1180px; } }
@media (min-width: 1800px) { .container { max-width: 1320px; } }

/* Reclaim wasted HORIZONTAL space on phones: shrink the outer container
   gutters and the card/fieldset side padding so content uses nearly the full
   screen width. Vertical padding is kept comfortable. */
@media (max-width: 575.98px) {
    .container, .navbar > .container { padding-left: 0.4rem; padding-right: 0.4rem; }
    main.container { padding-top: 0.75rem !important; padding-bottom: 1rem !important; }
    .card { margin-bottom: 0.75rem !important; border-radius: 0.5rem; }
    /* Asymmetric: keep vertical breathing room, cut the side padding. */
    .card-body { padding: 1rem 0.6rem; }
    fieldset.border { padding: 0.85rem 0.6rem !important; }
    h1, .h1 { font-size: 1.5rem; }
}

/* Key/value summary rows (family summary read-only view). Bootstrap has no
   direct equivalent; stack label above value on narrow screens. */
.kv { display: flex; gap: 0.6rem; padding: 0.15rem 0; }
.kv .k { color: var(--bs-secondary-color); min-width: 120px; flex: 0 0 auto; }
.kv .v { color: var(--bs-body-color); word-break: break-word; }
@media (max-width: 575.98px) {
    .kv { flex-direction: column; gap: 0.1rem; }
    .kv .k { min-width: 0; }
}

/* Registration roster status ticks. */
.tick { color: var(--bs-success); font-weight: 700; }
.cross { color: var(--bs-secondary-color); }

/* Scrollable consent / policy box. */
.consent-box {
    max-height: 220px; overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color); border-radius: 0.375rem;
    padding: 0.75rem; font-size: 0.9rem;
}

.amount-due { font-size: 1.6rem; font-weight: 600; margin: 0.25rem 0; }

/* Sortable table columns: clickable headers with caret indicators. */
.table.sortable th.sortable-col {
    cursor: pointer; user-select: none; position: relative; padding-right: 1.3rem;
}
.table.sortable th.sortable-col::after {
    content: '\2195'; position: absolute; right: 0.55rem; opacity: 0.35; font-size: 0.85em;
}
.table.sortable th.sorted-asc::after { content: '\25B2'; opacity: 0.9; }
.table.sortable th.sorted-desc::after { content: '\25BC'; opacity: 0.9; }

/* Print: hide chrome, flatten cards (registration roster print view). */
.print-only { display: none; }
@media print {
    .site-header, .navbar, .site-footer, .no-print, .no-print * { display: none !important; }
    .print-only { display: block; }
    .card { box-shadow: none !important; border: none !important; }
    .card-body { padding: 0 !important; }
    .no-print-link { color: inherit; text-decoration: none; }
    a[href]:after { content: ""; }
}

/* Registration matrix: students as rows, terms as narrow columns.
   Term headers are rotated to keep each semester column narrow, and the
   student-name column stays pinned to the left while the grid scrolls. */
.matrix-table { border-collapse: separate; border-spacing: 0; width: auto; }
.matrix-table th, .matrix-table td { border-bottom: 1px solid var(--bs-border-color); }

.matrix-name-col {
    position: sticky; left: 0; z-index: 2;
    background: var(--bs-body-bg);
    white-space: nowrap; min-width: 11rem;
    border-right: 1px solid var(--bs-border-color);
}
.matrix-table thead .matrix-name-col { z-index: 3; vertical-align: bottom; }

/* Full-row highlight on hover (light yellow), including the sticky name cell
   which paints its own opaque background over the scrolled content. */
.matrix-table tbody tr:hover td,
.matrix-table tbody tr:hover .matrix-name-col { background: #fff8e1; }

.matrix-term-col {
    height: 8.5rem; padding: 0; vertical-align: bottom; text-align: center;
    width: 2.1rem; min-width: 2.1rem; max-width: 2.1rem;
}
.matrix-term-label {
    display: inline-block;
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap; line-height: 1.1;
    font-weight: 600; font-size: 0.82rem;
    padding: 0.35rem 0;
}

.matrix-cell { text-align: center; padding: 0.3rem 0; }

.matrix-mark { display: inline-block; font-size: 1rem; line-height: 1; }
.matrix-mark.matrix-paid { color: var(--bs-success); font-weight: 700; }
.matrix-mark.matrix-pending { color: var(--bs-warning); }

/* Reports index tiles: subtle lift on hover. */
.report-tile { transition: box-shadow 0.12s ease, transform 0.12s ease; }
a:hover .report-tile { box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.1) !important; transform: translateY(-2px); }
.report-tile h2 { color: var(--bs-body-color); }

/* Age-distribution horizontal bar chart. */
.agehist { display: flex; flex-direction: column; gap: 0.3rem; max-width: 640px; }
.agehist-row { display: flex; align-items: center; gap: 0.6rem; color: inherit; }
a.agehist-row:hover .agehist-bar { filter: brightness(1.08); }
a.agehist-row:hover .agehist-count { text-decoration: underline; }
.agehist-label { flex: 0 0 3.5rem; text-align: right; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.agehist-track { flex: 1 1 auto; background: var(--bs-tertiary-bg); border-radius: 0.25rem; height: 1.15rem; }
.agehist-bar { height: 100%; background: var(--bs-primary); border-radius: 0.25rem; min-width: 2px; }
.agehist-count { flex: 0 0 2.5rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bs-body-color); }