/* SchoolMS: application shell. Keep this file small; Bootstrap does the rest. */
:root {
    --app-sidebar-width: 248px;
    --app-sidebar-bg: #152238;
    --app-sidebar-fg: #c9d3e3;
    --app-sidebar-active: #2f6fd6;
    --app-topbar-height: 56px;
    --app-bg: #f4f6f9;
    --bs-primary: #1f5fae;
    --bs-primary-rgb: 31, 95, 174;
    --bs-link-color: #1f5fae;
    --bs-link-color-rgb: 31, 95, 174;
}

body.app { background: var(--app-bg); }

.btn-primary { --bs-btn-bg: #1f5fae; --bs-btn-border-color: #1f5fae; --bs-btn-hover-bg: #194e8f; --bs-btn-hover-border-color: #194e8f; --bs-btn-active-bg: #164480; }
.btn-outline-primary { --bs-btn-color: #1f5fae; --bs-btn-border-color: #1f5fae; --bs-btn-hover-bg: #1f5fae; --bs-btn-hover-border-color: #1f5fae; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { background: var(--app-sidebar-bg); color: var(--app-sidebar-fg); width: var(--app-sidebar-width); }
@media (min-width: 992px) {
    .app-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; flex: 0 0 var(--app-sidebar-width); }
}
/* Below that the sidebar is a slide-in panel (offcanvas) as tall as the screen: the menu scrolls inside it under the fixed
   brand row, or a long menu would be cut off on tablets and phones. */
@media (max-width: 991.98px) {
    .app-sidebar .app-brand { flex: 0 0 auto; }
    .app-sidebar .app-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
/* Bootstrap makes .offcanvas-lg transparent (with !important) on wide screens; the sidebar stays dark. */
.app-sidebar.offcanvas-lg { --bs-offcanvas-width: var(--app-sidebar-width); --bs-offcanvas-bg: var(--app-sidebar-bg); background-color: var(--app-sidebar-bg) !important; }
.app-brand { display: flex; align-items: center; justify-content: space-between; height: var(--app-topbar-height); padding: 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.app-brand-link { color: #fff; font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.app-brand-link .bi { color: #6aa3ff; }
.app-nav { padding: .75rem .5rem 2rem; width: 100%; }
.app-nav-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #7f8ca3; padding: 1rem .75rem .35rem; }
.app-nav .nav-link { color: var(--app-sidebar-fg); border-radius: .375rem; padding: .45rem .75rem; display: flex; gap: .6rem; align-items: center; }
.app-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-nav .nav-link.active { background: var(--app-sidebar-active); color: #fff; }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { position: sticky; top: 0; z-index: 1020; height: var(--app-topbar-height); background: #fff; border-bottom: 1px solid #e3e7ee; display: flex; align-items: center; gap: .75rem; padding: 0 1rem; }
.app-topbar-school { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-branch-switch { display: flex; align-items: center; gap: .35rem; }
.app-branch-switch .form-select { min-width: 10rem; }
.app-content { padding: 1.5rem; max-width: 1400px; width: 100%; }
@media (max-width: 575.98px) { .app-content { padding: 1rem; } }

/* Page pattern: title row, filter bar, card with table */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.4rem; margin: 0; }
.page-header .subtitle { color: #6c757d; font-size: .9rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 10rem; }
.card { border-color: #e3e7ee; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; font-weight: 600; background: #f8f9fb; white-space: nowrap; }
.table thead th a { color: inherit; text-decoration: none; }
.table-actions { white-space: nowrap; text-align: end; }

/* Lists: sortable headers, the footer with paging and rows per page, the filter box of short lists */
.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.sort-link:hover, .sort-link:focus-visible { color: var(--bs-primary); }
.list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
[data-list-part][aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.table-filter { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.table-filter .form-control { max-width: 18rem; }
.table-filter > span { white-space: nowrap; }

/* Phones: each row of a table.table-stack becomes a card of "label: value" lines (site.js labels the cells). */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr { display: block; width: 100%; }
    .table-stack tr { padding: .5rem 0; border-bottom: 1px solid #e3e7ee; }
    .table-stack > :not(caption) > * > * { display: flex; gap: .75rem; align-items: baseline; padding: .2rem .9rem; border-bottom: 0; text-align: start !important; width: auto !important; }
    .table-stack td[data-label]::before { content: attr(data-label); flex: 0 0 38%; font-weight: 400; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; }
    .table-stack td:empty { display: none !important; }
    .table-stack td.table-actions { justify-content: flex-start; flex-wrap: wrap; }
    .filter-bar > * { flex: 1 1 100%; }
    .filter-bar .form-control, .filter-bar .form-select { width: 100%; min-width: 0; }
}

/* Searchable dropdowns (Tom Select) */
.filter-bar .ts-wrapper { min-width: 12rem; }
.ts-dropdown { z-index: 1080; }
.ts-wrapper.single.dropdown-active .ts-control > .item { display: none; }
.form-section-title { font-size: .95rem; font-weight: 600; margin: 1.25rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid #e9ecef; }
.form-label.required::after { content: " *"; color: #dc3545; }
/* The validation summary placeholder is empty until a form has errors. */
.validation-summary-valid { display: none; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #495057; }
.empty-state > .bi { font-size: 2.5rem; color: #9aa5b5; display: block; margin-bottom: .75rem; }
.stat-tile { background: #fff; border: 1px solid #e3e7ee; border-radius: .5rem; padding: 1rem 1.25rem; height: 100%; }
.stat-tile .stat-label { color: #6c757d; font-size: .85rem; }
.stat-tile .stat-value { font-size: 1.6rem; font-weight: 600; }
.badge-soft { background: #eef2f8; color: #3c4a60; font-weight: 500; }
.changes-list { font-size: .82rem; margin: 0; padding-left: 1rem; }
.changes-list .old { color: #b02a37; text-decoration: line-through; }
.changes-list .new { color: #146c43; }
.perm-group { border: 1px solid #e3e7ee; border-radius: .5rem; padding: .75rem 1rem; margin-bottom: .75rem; background: #fff; }
.perm-group h3 { font-size: .9rem; margin-bottom: .5rem; }
.avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e9ecef; }

/* Sign-in pages */
body.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #152238 0%, #1f5fae 100%); padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { font-size: 2.2rem; color: #1f5fae; }

/* Result sheets: numbers centred, names left */
.result-sheet th, .result-sheet td { text-align: center; white-space: nowrap; }

/* Notices */
.notice-body { white-space: pre-line; }
.notice-pinned { border-left: 4px solid #1f5fae; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .15rem .75rem; }

/* Calendar: a month grid on wide screens, a list of days on phones */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #e3e7ee; border-left: 1px solid #e3e7ee; }
.cal-head { padding: .4rem .5rem; font-size: .8rem; font-weight: 600; color: #6c757d; background: #f6f8fb; border-right: 1px solid #e3e7ee; border-bottom: 1px solid #e3e7ee; }
.cal-day { min-height: 6.5rem; padding: .3rem .35rem; border-right: 1px solid #e3e7ee; border-bottom: 1px solid #e3e7ee; background: #fff; position: relative; }
.cal-day.other { background: #fafbfc; color: #adb5bd; }
.cal-day.closed { background: #f3f4f6; }
.cal-day.today .cal-num { background: #1f5fae; color: #fff; border-radius: 50%; }
.cal-num { display: inline-block; min-width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center; font-size: .85rem; font-weight: 600; }
.cal-add { position: absolute; top: .25rem; right: .3rem; font-size: .8rem; opacity: 0; }
.cal-day:hover .cal-add, .cal-add:focus { opacity: 1; }
.cal-item { display: block; font-size: .75rem; line-height: 1.25; padding: .1rem .3rem; margin-top: .15rem; border-radius: .25rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-holiday { background: #fde2e1; color: #8a1c1c; }
.event-exam { background: #fff1c2; color: #6b4e00; }
.event-event { background: #dbeafe; color: #1e3a8a; }
.event-meeting { background: #dcfce7; color: #14532d; }
.cal-legend .cal-item { display: inline-block; margin-right: .35rem; }

/* Printing an ordinary page (for example the cashier's closing): only the content, no menu or bars. */
/* Survey editor: a question's own options show only when "My own options" is chosen. */
.question-row .own-options { display: none; }
.question-row:has(option[value="Custom"]:checked) .own-options { display: flex; }

@media print {
    .app-sidebar, .app-topbar, .toast-container { display: none !important; }
    .app-content { padding: 0; max-width: none; }
    .card { break-inside: avoid; }
}

/* Branding (Platform › Branding, a school's logo): logos in the sidebar and on the sign-in page. */
.app-brand-link { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.app-brand-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-brand-logo { height: 32px; width: 32px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; }
.auth-logo-img { max-height: 72px; max-width: 200px; object-fit: contain; }
.auth-footer { color: rgba(255,255,255,.8); }
.auth-footer a { color: #fff; }

/* The user manual (/help) */
.help-nav { position: sticky; top: 4.5rem; }
.help-content { max-width: 60rem; line-height: 1.6; }
.help-content h1 { font-size: 1.75rem; margin-bottom: 1rem; }
.help-content h2 { font-size: 1.35rem; margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); }
.help-content h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.help-content img { max-width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); margin: .5rem 0 1rem; }
.help-content table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.help-content th, .help-content td { border: 1px solid var(--bs-border-color); padding: .4rem .6rem; vertical-align: top; }
.help-content th { background: var(--bs-tertiary-bg); }
.help-content code { color: inherit; background: var(--bs-tertiary-bg); padding: .1rem .3rem; border-radius: .25rem; }
@media (max-width: 991.98px) { .help-nav { position: static; } }

/* Map pins of schools (site.js, Leaflet): a teardrop in the school's colour with a school cap; a star marks the main campus. */
.school-pin { position: relative; width: 38px; height: 38px; }
.school-pin .pin { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin, #2563eb);
    border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.school-pin .bi { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.05rem; margin-top: -2px; }
.school-pin .star { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #f59e0b; color: #fff;
    border: 2px solid #fff; display: grid; place-items: center; font-size: .6rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.school-pin.big { width: 46px; height: 46px; }
.school-pin.big .bi { font-size: 1.3rem; }
.leaflet-tooltip.school-pin-label { padding: 3px 8px; line-height: 1.25; text-align: center; font-size: .78rem; border-radius: 8px; border: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25); white-space: nowrap; }
.leaflet-tooltip.school-pin-label strong { font-size: .82rem; }
.leaflet-tooltip.school-pin-label span { color: #5d6b82; }