:root {
    --color-bg: #f4f6f5;
    --color-surface: #ffffff;
    --color-border: #dde3e0;
    --color-text: #1f2a24;
    --color-muted: #5b6b62;
    --color-primary: #4a7c59;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--color-bg); color: var(--color-text); }
.public-shell { max-width: 1000px; margin: 0 auto; padding: 24px; }
a { color: var(--color-primary); }
table { border-collapse: collapse; width: 100%; background: var(--color-surface); margin-bottom: 24px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 13px; }
th { background: #eef2ef; }
table.data-table th.sortable { cursor: pointer; user-select: none; }
table.data-table th.sortable:hover { background: #e3e9e4; }
table.data-table th.sortable::after { content: ''; display: inline-block; margin-left: 6px; width: 0; height: 0; }
table.data-table th.sortable.sort-asc,
table.data-table th.sortable.sort-desc { background: #dce8e0; color: var(--color-primary); }
table.data-table th.sortable.sort-asc::after { content: '\25B2'; font-size: 10px; vertical-align: middle; }
table.data-table th.sortable.sort-desc::after { content: '\25BC'; font-size: 10px; vertical-align: middle; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 16px 20px; margin-bottom: 20px; }
.text-muted { color: var(--color-muted); }

/* Division status on the public Division List (class = div-status-<div_status in lower case>). */
.div-status-unassigned { color: var(--color-muted); }
.div-status-on-deck { color: #b35400; font-weight: 600; }
.div-status-running { color: #2e7d32; font-weight: 600; }
.div-status-ended { color: #8b1a1a; font-weight: 600; }   /* also Turned-In and Completed, which the public sees as Ended */
.table-scroll { overflow-x: auto; }
select, input { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 4px; }

@media (max-width: 860px) {
    .public-shell { padding: 16px; }
    /* Keeps each table's own row/column layout intact but lets the table box itself
       scroll horizontally, so wide tables stay usable without a phone-specific redesign. */
    table.data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    input[type=text], input[type=number], select { font-size: 16px; }
}

/* Printing a public page (e.g. Clinic Schedule): drop the buttons/links, use the full sheet. */
@media print {
    .no-print { display: none; }
    .public-shell { max-width: none; padding: 0; }
}