/* Koala Tree custom styles */
#sidebar { transition: width 0.3s; min-width: 280px; flex-shrink: 0; }
#wrapper > .flex-grow-1 { min-width: 0; }
#sidebar .nav-link { font-size: 0.9rem; }
@media (max-width: 768px) {
    #sidebar { width: 0 !important; min-width: 0 !important; height: 100dvh; min-height: 0 !important; overflow-x: hidden; overflow-y: auto; position: fixed; top: 0; z-index: 1000; }
    #sidebar.show { width: 280px !important; min-width: 280px !important; }
    .sidebar-toggle { display: block !important; }
    #wrapper > .flex-grow-1 > .container-fluid { padding-top: 4.5rem !important; }
}
.sidebar-toggle { display: none; }
.stat-card { border-left: 4px solid; }
.stat-card.primary { border-left-color: #0d6efd; }
.stat-card.success { border-left-color: #198754; }
.stat-card.warning { border-left-color: #ffc107; }
.stat-card.danger { border-left-color: #dc3545; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; }
.table th { white-space: nowrap; font-size: 0.85rem; text-transform: uppercase; color: #6c757d; }
.card > .table :is(th, td):first-child,
.card > .card-body > .table :is(th, td):first-child,
.card > .table-responsive > .table :is(th, td):first-child,
.card-body.p-0 > .table :is(th, td):first-child,
.card-body.p-0 > .table-responsive > .table :is(th, td):first-child { padding-left: 1rem; }
.card > .table :is(th, td):last-child,
.card > .card-body > .table :is(th, td):last-child,
.card > .table-responsive > .table :is(th, td):last-child,
.card-body.p-0 > .table :is(th, td):last-child,
.card-body.p-0 > .table-responsive > .table :is(th, td):last-child { padding-right: 1rem; }
.admin-form { max-width: 64rem; }
.form-label { font-weight: 500; }
.cursor-pointer { cursor: pointer; }

/* Web Message previews only; originals remain available through the photo links. */
.message-attachments { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; max-width: 732px; }
.message-attachments > .message-attachment-photo { display: block; flex: 0 1 360px; width: 360px; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #dee2e6; border-radius: 8px; background: #f8f9fa; }
.message-attachment-photo > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.message-attachments > a:not(.message-attachment-photo) { max-width: 100%; overflow-wrap: anywhere; }

/* Only the three School Admin Finance workspaces opt in to these layouts. */
.finance-page .finance-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1.5rem; margin-bottom: 1rem; }
.finance-page .finance-meta dt { color: #6c757d; font-size: .8rem; font-weight: 500; }
.finance-page .finance-meta dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.finance-page .text-end { font-variant-numeric: tabular-nums; }
.finance-page .table { vertical-align: middle; }
.finance-page .table th { white-space: normal; }
.finance-page .table .badge { white-space: normal; text-align: left; line-height: 1.4; }
.finance-page .table tr:has(input[type="checkbox"]:checked) > td { --bs-table-bg: #eaf2ff; }
.finance-page .finance-filter > div { flex: 0 1 220px; min-width: 0; }
.finance-page .finance-filter > .btn { flex: 0 0 auto; }
.finance-page .finance-rate-grid { min-width: 620px; }
.finance-month-field { display: flex; align-items: stretch; gap: .25rem; min-width: 0; }
.finance-month-field > input { min-width: 0; }
.finance-month-field > button { flex: 0 0 auto; }
.finance-month-picker { position: fixed; z-index: 1200; width: 20rem; max-width: calc(100vw - 16px); padding: .75rem; background: #fff; border: 1px solid #adb5bd; border-radius: .5rem; box-shadow: 0 .25rem 1rem #0003; }
.finance-month-year { display: flex; align-items: end; gap: .5rem; margin-bottom: .75rem; }
.finance-month-year label { flex: 1; min-width: 0; font-size: .875rem; }
.finance-month-year input { width: 100%; }
.finance-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; }
.finance-months [aria-pressed="true"] { background: #0d6efd; color: #fff; }
.finance-month-picker button:focus-visible, .finance-month-field button:focus-visible { outline: 3px solid #212529; outline-offset: 2px; }
.finance-page [data-finance-money] { text-align: right; font-variant-numeric: tabular-nums; }
.finance-page .finance-actions { background: #fff; border: 1px solid #dee2e6; border-radius: .375rem; padding: 1rem; }
@media (max-width: 575.98px) {
    .finance-page .finance-filter > div { flex-basis: 100%; }
}

/* Staff capability controls: contain the app shell and reflow the former wide matrix. */
.staff-capability-list { display: grid; gap: 1rem; }
.staff-capability-card { min-width: 0; overflow: hidden; }
.staff-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.staff-scope-panel { min-width: 0; padding: 0.75rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa; }
.staff-scope-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; }
.staff-scope-form .form-select { min-width: 0; }
.staff-capability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; }
.staff-capability-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.7rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #fff; }
.staff-capability-label { min-width: 0; font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; }
.staff-capability-state { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.3rem; flex: 0 0 auto; max-width: 60%; font-size: 0.75rem; text-align: right; }
.staff-capability-toggle { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; white-space: nowrap; }

@media (max-width: 575.98px) {
    .staff-scope-grid, .staff-capability-grid { grid-template-columns: 1fr; }
    .staff-scope-form { grid-template-columns: 1fr; }
    .staff-scope-form .btn { width: 100%; }
    .staff-capability-state { max-width: 55%; }
}

/* Attendance person picker (check-in dropoff / checkout pickup) */
.ap-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0.75rem; }
.ap-option { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border: 1.5px solid #dee2e6; border-radius: 0.6rem; margin: 0; transition: border-color .12s, background-color .12s; background: #fff; min-width: 0; }
.ap-option:not(.disabled):hover { border-color: #0d6efd; }
.ap-option.selected, .ap-option:has(input.ap-radio:checked) { border-color: #0d6efd; background: #eaf2ff; }
.ap-option.disabled { background: #f8f9fa; }
.ap-select { display: flex; flex: 1 1 8rem; flex-direction: column; min-width: 0; gap: 0.5rem; align-self: stretch; justify-content: center; cursor: pointer; }
.ap-option.disabled .ap-select { cursor: not-allowed; }
.ap-choice { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.9rem; flex-wrap: wrap; }
.ap-radio { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: #0d6efd; }
.ap-photo-column { flex: 0 0 96px; width: 96px; }
.ap-avatar, .reference-photo-frame { position: relative; flex: 0 0 auto; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #e9ecef; }
.ap-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #e9ecef; }
.reference-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.reference-photo-control { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.reference-photo-editor { flex: 1 1 14rem; min-width: 0; }
.reference-photo-control > details { flex-basis: 100%; }
.reference-photo-editor summary { cursor: pointer; }

.ap-initials { font-weight: 600; color: #495057; font-size: 1.5rem; }
.ap-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; gap: 0.2rem; }
.ap-name { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.ap-rel { font-size: 0.875rem; color: #6c757d; overflow-wrap: anywhere; }
.ap-badge { font-size: 0.8rem; color: #765500; background: #fff3cd; border-radius: 0.5rem; padding: 0.2rem 0.4rem; align-self: flex-start; overflow-wrap: anywhere; max-width: 100%; }
.ap-view-photo { display: block; flex: 0 0 96px; background: transparent; border: 0; color: #0756cc; padding: 0; width: 96px; font-size: 0.875rem; overflow-wrap: anywhere; }
.ap-view-label { display: flex; align-items: center; justify-content: center; text-decoration: underline; padding: 0.35rem 0; min-height: 44px; }
.ap-option-manual .ap-avatar { background: #f1f3f5; }
.ap-photo-dialog { width: min(900px, calc(100% - 24px)); max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 1rem; border: 0; border-radius: 12px; background: #111827; color: #fff; }
.ap-photo-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.ap-photo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ap-photo-title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; min-width: 0; flex: 1 1 140px; }
.ap-photo-close { color: #fff; background: transparent; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0.5rem 0.75rem; min-height: 44px; }
.ap-photo-status { margin: 0.75rem 0 0; }
.ap-photo-status:empty { display: none; }
.ap-photo-content img { display: block; width: 100%; max-height: 75dvh; object-fit: contain; margin-top: 0.75rem; }
.ap-photo-content img[hidden], .ap-avatar img[hidden] { display: none; }

/* Check-in roster cards (sectioned) */
.rc-section { margin-bottom: 1.5rem; }
.rc-section-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; font-weight: 700; margin-bottom: 0.5rem; }
.rc-section-title .rc-count { background: #e9ecef; color: #495057; border-radius: 1rem; padding: 0 0.5rem; font-size: 0.75rem; margin-left: 0.25rem; }
.rc-class-label { font-size: 0.78rem; font-weight: 600; color: #adb5bd; margin: 0.5rem 0 0.4rem; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; margin-bottom: 0.4rem; }
.rc-card { display: flex; gap: 0.7rem; align-items: center; padding: 0.6rem 0.75rem; background: #fff; border: 1px solid #e9ecef; border-left: 4px solid #ced4da; border-radius: 0.6rem; }
.rc-card.in { border-left-color: #198754; }
.rc-card.notin { border-left-color: #ffc107; }
.rc-card.out { border-left-color: #adb5bd; background: #fcfcfd; }
.rc-card.pending { border-left-color: #0d6efd; background: #f5f9ff; }
.rc-photo { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #e9ecef; }
.rc-photo img { width: 100%; height: 100%; object-fit: cover; }
.rc-initials { font-weight: 600; color: #495057; }
.rc-body { min-width: 0; flex: 1; }
.rc-top { line-height: 1.2; }
.rc-name { font-weight: 600; color: #212529; text-decoration: none; }
.rc-name:hover { text-decoration: underline; }
.rc-meta { font-size: 0.8rem; color: #6c757d; margin-top: 0.1rem; }
.rc-actions { margin-top: 0.45rem; }
.rc-actions .btn { padding: 0.15rem 0.6rem; }

/* Check-in roster filter bar */
/* Browser print is shared by invoices, receipts and child statements; no stored PDF copy. */
@media print {
  body:has(.invoice-document,.billing-statement,.receipt-document) :is(#sidebar,.sidebar-toggle,.billing-actions,.invoice-proof-panel,.alert,button,form,nav,details) { display:none!important; }
  body:has(.invoice-document,.billing-statement,.receipt-document) :is(#wrapper,#page-content-wrapper,.container-fluid) { display:block!important;width:100%!important;margin:0!important;padding:0!important; }
  body:has(.invoice-document,.billing-statement,.receipt-document) .card { border:0!important;break-inside:avoid; }
  body:has(.invoice-document,.billing-statement,.receipt-document) a { color:inherit;text-decoration:none; }
  body:has(.invoice-document,.billing-statement,.receipt-document) .table-responsive { overflow:visible; }
}

.roster-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.roster-filter-bar .rfb-date { width: auto; flex: 0 0 auto; }
.roster-filter-bar .rfb-search { flex: 1 1 220px; min-width: 150px; }
.roster-filter-bar .rfb-class, .roster-filter-bar .rfb-status { width: auto; flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .roster-filter-bar { flex-direction: column; align-items: stretch; }
  .roster-filter-bar .rfb-date,
  .roster-filter-bar .rfb-search,
  .roster-filter-bar .rfb-class,
  .roster-filter-bar .rfb-status,
  .roster-filter-bar .rfb-go,
  .roster-filter-bar .rfb-reset { width: 100%; }
}
/* Rich Post/Broadcast spacing: 8px per paragraph; an explicit blank adds 8px, not a line box. */
.post-rich { line-height: 1.5; }
.post-rich > p, .post-rich > ul, .post-rich > ol { margin-top: 0; margin-bottom: 8px; }
.post-rich > p, .post-rich li { white-space: pre-wrap; }
.post-rich > .post-blank { height: 8px; line-height: 8px; margin: 0; }

/* Shared Post/Broadcast editor. Keep its spacing aligned with the safe read view above. */
.kp-editor { border: 1px solid #ced4da; border-radius: .375rem; overflow: hidden; }
.kp-toolbar { display: flex; gap: .25rem; padding: .4rem; background: #f8f9fa; border-bottom: 1px solid #e9ecef; flex-wrap: wrap; }
.kp-area { min-height: 160px; padding: .6rem .75rem; outline: none; }
.kp-area p, .kp-area div { margin: 0 0 8px; white-space: pre-wrap; }
.kp-area li { white-space: pre-wrap; }
.kp-area .kp-blank { margin: 0; line-height: 8px; }
.kp-area ul, .kp-area ol { margin: 0 0 8px 1.25rem; }

/* Standalone login and recovery; other pages retain their existing styles. */
.kt-auth, .kt-auth * { box-sizing: border-box; }
.kt-auth { min-height: 100vh; min-height: 100dvh; margin: 0; padding: 24px; display: flex; flex-direction: column; background: #FFF8EF; color: #503B2A; font: 1rem/1.5 system-ui, sans-serif; }
.kt-auth main { width: 100%; max-width: 26.25rem; margin: auto; }
.kt-auth .kt-auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 1.5rem; font-size: 1.75rem; font-weight: 700; }
.kt-auth .kt-auth-brand img { width: 65px; height: 60px; object-fit: contain; flex-shrink: 0; }
.kt-auth .kt-auth-brand span { min-width: 0; overflow-wrap: anywhere; }
.kt-auth h1 { margin: 0 0 0.5rem; font-size: 1.875rem; line-height: 1.2; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.kt-auth .kt-auth-intro { margin: 0 0 1.5rem; color: #5C4936; text-align: center; }
.kt-auth .kt-auth-card { padding: 24px; border: 1px solid #F0DFC8; border-radius: 1.25rem; background: #FFFFFF; box-shadow: 0 0.25rem 1rem #503B2A0A; }
.kt-auth .form-label { display: block; margin-bottom: 0.5rem; font-size: 1rem; font-weight: 600; }
.kt-auth .form-control { width: 100%; min-width: 0; min-height: 3.25rem; padding: 0.75rem; border: 1px solid #8A7460; border-radius: 0.75rem; background: #FFFFFF; color: #503B2A; font: inherit; }
.kt-auth .mb-3 { margin-bottom: 1rem; }
.kt-auth .btn-primary { --bs-btn-hover-bg: #E89535; --bs-btn-hover-border-color: #E89535; --bs-btn-hover-color: #4A3115; --bs-btn-active-bg: #E89535; --bs-btn-active-border-color: #E89535; --bs-btn-active-color: #4A3115; width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem; border: 1px solid #F2A144; border-radius: 0.75rem; background: #F2A144; color: #4A3115; font: inherit; font-weight: 700; }
.kt-auth .btn-primary:hover, .kt-auth .btn-primary:active { background: #E89535; border-color: #E89535; color: #4A3115; }
.kt-auth .btn-primary:disabled { background: #F2A144; border-color: #F2A144; color: #4A3115; opacity: 0.65; }
.kt-auth .kt-auth-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1rem; margin-top: 1rem; }
.kt-auth .kt-auth-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0; color: #3E7A52; text-underline-offset: 0.2em; }
.kt-auth .kt-auth-links a:hover { color: #503B2A; }
.kt-auth :is(input, button, a):focus-visible { outline: 3px solid #3E7A52; outline-offset: 3px; box-shadow: none; }
.kt-auth .form-control:focus { border-color: #3E7A52; box-shadow: none; }
.kt-auth .alert { overflow-wrap: anywhere; }