:root{font-family:Arial,Helvetica,sans-serif;color:#18365f;background:#f7f5f1;font-synthesis:none;--muted:#647184;--line:#e4e5e8;--blue:#18365f;--accent:#227c70}
.mobile-label{display:none}
[hidden]{display:none!important}
.session-bar{display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;font-size:13px}
.session-bar span{overflow-wrap:anywhere}
body.login-page{display:grid;place-items:center;padding:24px}
main.login-panel{width:100%;max-width:440px;min-width:0;flex:none;padding:32px;background:white;border:1px solid var(--line);border-radius:14px}
.login-panel h1{font-size:36px}
.login-panel>p{line-height:1.6}
.login-form{display:flex;flex-direction:column;width:100%;gap:12px;margin-top:24px}
.login-form input{width:100%;flex:none}
.login-form label{font-size:14px}
#login-message{min-height:24px;font-size:14px;color:#8a3e24}
input{min-width:0}
dialog h2{overflow-wrap:anywhere}
/* Compact student cards reuse the same rows, data and detail buttons. */
@media(max-width:700px){
  body .sidebar{gap:12px;flex-wrap:wrap}
  .table-wrap table{display:block;min-width:0;width:100%}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table-wrap tbody{display:grid;gap:14px;padding:0 16px 16px}
  .table-wrap tbody:empty{padding:0}
  .table-wrap tr{display:block;min-width:0;border:1px solid var(--line);border-radius:10px;padding:16px}
  .table-wrap td{display:block;border:0;padding:0;margin-bottom:14px;white-space:normal;overflow-wrap:anywhere}
  .table-wrap td:last-child{margin-bottom:0;border-top:1px solid var(--line);padding-top:10px}
  .table-wrap .person{align-items:flex-start}
  .table-wrap .person>div{min-width:0}
  .table-wrap .person strong{font-size:15px;line-height:1.5}
  .table-wrap .mobile-label{display:block;margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:600}
  .table-wrap .code{font-size:13px}
  .table-wrap .link-button{min-height:44px;width:100%;text-align:left;padding-inline:0}
  body .pagination{flex-wrap:wrap}
}
*{box-sizing:border-box}body{margin:0;display:flex;min-height:100vh}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--blue);border-radius:8px;background:var(--blue);color:white;padding:11px 17px;font-weight:600}button:disabled{opacity:.45;cursor:default}.secondary{background:white;color:var(--blue);border-color:#cdd4dd}button:hover:not(:disabled){filter:brightness(.94)}:focus-visible{outline:3px solid #de9c38;outline-offset:3px}.sidebar{width:238px;background:#18365f;color:#fff;padding:34px 23px;display:flex;flex-direction:column;flex-shrink:0;min-height:100vh}.brand{display:flex;align-items:center;gap:11px;font-family:Georgia,serif;font-size:23px;line-height:1.1}.brand small{display:block;font:8px Arial,sans-serif;letter-spacing:1.4px;margin-top:8px}.monogram{display:grid;place-items:center;width:43px;height:43px;border:1px solid #8192ad;border-radius:50%;font-size:17px}.nav-label{font-size:10px;letter-spacing:2px;color:#b1bfd4;margin:57px 12px 20px}nav a{display:flex;gap:14px;text-decoration:none;color:white;padding:14px;border-radius:8px;background:#2d496e;font-size:14px}.sidebar-footer{margin-top:auto;padding:80px 10px 0;font-size:12px;line-height:1.7;color:#becbdc}.sidebar-footer strong{font-weight:400;color:#f7f5f1}.sidebar-footer span{font-size:10px;letter-spacing:1px}main{min-width:0;flex:1;padding:0 42px 25px}.topbar{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e2dfd9;font-size:12px;color:var(--muted)}.topbar span span{padding:0 12px}.environment{border:1px solid #c8dcd6;background:#edf6f2;color:#286254;padding:7px 11px;border-radius:20px;font-size:11px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:38px 0 26px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--accent)}h1{font-family:Georgia,serif;font-size:42px;font-weight:400;letter-spacing:-1px;margin:9px 0 12px}.heading p:last-child{font-size:14px;color:var(--muted);margin-bottom:0}.notice{padding:12px 16px;border-left:3px solid #c6aa74;background:#f0ebe1;font-size:12px;line-height:1.6;margin-bottom:26px;color:#625a49}.card{background:white;border:1px solid var(--line);border-radius:13px;box-shadow:0 6px 22px #18365f06;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px}h2{font-size:17px;margin:0 0 8px}.toolbar p{font-size:12px;color:var(--muted);margin:0}form{display:flex;gap:8px}input{padding:11px 13px;border:1px solid #ccd3dd;border-radius:7px;background:#fcfcfc;width:255px;max-width:100%;font-size:13px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{font-size:10px;letter-spacing:1px;text-transform:uppercase;background:#f8f9fb;color:var(--muted);padding:14px 22px;border-block:1px solid var(--line)}td{padding:19px 22px;border-bottom:1px solid #edf0f3;vertical-align:middle}.person{display:flex;align-items:center;gap:12px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eef2f6;color:#506783;font-size:11px;flex-shrink:0}.person strong{display:block;font-size:13px;font-weight:600}.sub{display:block;margin-top:5px;color:var(--muted);font-size:11px}.code{font-size:11px;white-space:nowrap;color:#56677d}.badge{display:inline-block;border-radius:20px;padding:6px 10px;font-size:11px;background:#f1f3f5;color:#536171;white-space:nowrap}.badge.active{background:#eaf5ee;color:#35704a}.badge.pending{background:#faf0dd;color:#8a641c}.link-button{background:none;border:0;color:#285f91;padding:8px;font-size:12px;white-space:nowrap}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 23px;color:var(--muted);font-size:12px}.pagination div{display:flex;gap:8px}.pagination button{padding:8px 12px;font-size:12px}#feedback:not(:empty){padding:30px 24px;line-height:1.6;color:var(--muted);text-align:center}.footnote{font-size:11px;line-height:1.7;color:var(--muted);margin-top:22px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip:focus{position:absolute;background:white;padding:16px;z-index:10}dialog{width:min(530px,calc(100% - 28px));max-height:85vh;border:1px solid var(--line);border-radius:14px;padding:28px;color:var(--blue)}dialog::backdrop{background:#10254080}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}dialog h2{font:30px Georgia,serif;margin-bottom:24px}dl{display:grid;grid-template-columns:120px 1fr;gap:16px;font-size:14px}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}dialog .secondary{font-size:12px}body:has(dialog[open]){overflow:hidden}
@media(max-width:1100px){main{padding-inline:24px}.sidebar{width:200px;padding-inline:18px}.toolbar{align-items:flex-start;flex-direction:column}form{width:100%}input{flex:1;width:auto}td,th{padding-inline:14px}}
@media(max-width:700px){body{display:block}.sidebar{min-height:0;width:100%;padding:17px 20px;flex-direction:row;align-items:center;justify-content:space-between}.brand{font-size:20px}.nav-label,.sidebar-footer{display:none}nav a{padding:10px 14px}.topbar{min-height:65px;flex-wrap:wrap;padding-block:12px}.heading{margin-top:26px;align-items:flex-start;flex-direction:column}h1{font-size:36px}main{padding-inline:16px}.toolbar{padding:18px}.notice{font-size:11px}table{min-width:620px}.environment{font-size:10px}.pagination{padding:16px}dl{grid-template-columns:1fr;gap:8px}dd{margin-bottom:12px}}
:root .heading-actions { display:flex; gap:12px; flex-wrap:wrap; }
#student-editor { width:min(600px, calc(100vw - 28px)); }
.student-form, .student-form fieldset { display:flex; flex-direction:column; gap:14px; min-width:0; }
.student-form fieldset { border:0; padding:0; margin:0; }
.student-form label { display:flex; flex-direction:column; gap:6px; font-size:14px; }
.student-form input, .student-form select, .student-form textarea { width:100%; min-width:0; font:inherit; padding:10px; border:1px solid #c7d3e1; border-radius:8px; }
.student-form textarea { resize:vertical; }
.person-search { display:flex; gap:8px; flex-wrap:wrap; }
.person-search input { flex:1; min-width:140px; }
.person-option { display:block; width:100%; margin:8px 0; text-align:left; white-space:normal; overflow-wrap:anywhere; }
#selected-person, #editor-message { overflow-wrap:anywhere; }
#family, #contact-editor { width:min(620px, calc(100vw - 28px)); }
.family-card { border:1px solid var(--line); border-radius:10px; padding:16px; margin:14px 0; overflow-wrap:anywhere; }
.family-card h3 { margin:0 0 8px; font-size:16px; }
.family-card p { font-size:13px; line-height:1.5; white-space:pre-wrap; }
#contact-context, #contact-selection, #family-student { overflow-wrap:anywhere; }
#contact-end-fields p { font-size:13px; line-height:1.5; }

#enrollments, #enrollment-editor { width:min(640px, calc(100vw - 28px)); }
#enrollments-student, #enrollment-context, #enrollment-selection { overflow-wrap:anywhere; }
#enrollment-options .person-option[aria-pressed="true"] { border:2px solid var(--accent); background:#edf6f2; }

/* Existing enrollment: keep the explanation prominent beside disabled choices. */
#enrollment-options p[id^="enrolled-note-"] {
  background:#fff3cd;
  color:#664d03;
  border:1px solid #e7c66a;
  border-left:4px solid #b7791f;
  border-radius:8px;
  padding:12px 14px;
  margin:8px 0 18px;
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  overflow-wrap:anywhere;
}

/* Treasury balances and transfer history */
.transfer-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;padding:20px;}
.transfer-item {border:1px solid #dfe3e9;border-radius:12px;padding:18px;min-width:0;overflow-wrap:anywhere;}
.transfer-item h3 {margin:0 0 12px;font-size:16px;}
.transfer-item p {white-space:pre-wrap;}
.transfer-history {margin-top:24px;}

/* Main navigation: separate links and identify the current section. */
.sidebar nav {display:flex;flex-direction:column;gap:8px;min-width:0;}
.sidebar nav a {align-items:center;gap:12px;min-height:44px;background:transparent;}
.sidebar nav a:hover {background:#244267;}
.sidebar nav a[aria-current="page"] {background:#2d496e;font-weight:600;}
.sidebar .nav-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;font-size:16px;line-height:1;}
@media(max-width:700px) {
  .sidebar nav {flex-direction:row;flex-wrap:wrap;flex-basis:100%;gap:8px;}
  .sidebar nav a {justify-content:center;flex:1 1 120px;padding:10px 14px;}
}

/* Explicit installment previews */
#receivable-summary ol, .calendar-preview ol {padding-left:22px;}
#receivable-summary li, .calendar-preview li {padding:8px 0;line-height:1.5;overflow-wrap:anywhere;}
.student-form input[readonly] {background:#eef2f6;color:#536171;}

/* Each installment groups its status, receipts and remaining balance. */
#charges .quota-card {background:#fff;border:1px solid #dce2e9;border-left:4px solid #aab5c3;border-radius:12px;padding:18px;margin-top:18px;min-width:0;}
#charges .quota-card--paid {border-left-color:#28734b;}
#charges .quota-card--overdue {border-left-color:#b42332;}
#charges .quota-card--partial {border-left-color:#c47715;}
#charges .quota-card-head {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
#charges .quota-card-head h4 {font-size:14px;line-height:1.5;margin:0;flex:1 1 190px;overflow-wrap:anywhere;}
#charges .quota-status {display:inline-block;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700;line-height:1.4;background:#eef1f5;color:#536171;}
#charges .quota-status--paid {background:#eaf5ee;color:#21613e;}
#charges .quota-status--overdue {background:#fff0f1;color:#a31d2c;}
#charges .quota-status--partial {background:#fff2df;color:#97520a;}
#charges .quota-status--pending {background:transparent;color:var(--muted);padding-inline:0;}
#charges .quota-card>p {margin:8px 0;}
#charges .quota-receipt {background:#f6f8fa;border-radius:8px;padding:10px 12px;margin-top:12px;}
#charges .quota-receipt p {margin:4px 0;font-size:12px;}
#charges .quota-card .quota-balance {border-top:1px solid #e4e8ed;padding-top:12px;margin-top:14px;font-weight:700;font-size:15px;}
#charges .quota-balance--overdue {color:#b42332;}
#charges .quota-balance--partial {color:#97520a;}
#charges .quota-balance--paid {color:#21613e;}
#charges .quota-card>button {margin-top:10px;}
@media(max-width:540px) {
  #charges {padding:20px;}
  #charges-list>.family-card {padding:12px;}
  #charges .quota-card {padding:14px 12px;}
  #charges .quota-card>button {width:100%;white-space:normal;}
}

#admission-form input[type="checkbox"]{width:18px;height:18px;flex:none;align-self:flex-start;}
#admission-message{line-height:1.6;}


#charges .admission-block-notice,
#enrollments-message.admission-block-notice {
  padding:14px 16px;
  margin:18px 0;
  border:1px solid #efb4bc;
  border-left:4px solid #b42332;
  border-radius:8px;
  background:#fff1f2;
  color:#971b29;
  font-size:14px;
  font-weight:600;
  line-height:1.6;
}

#admission-message.review-feedback {
  padding:14px 16px;
  border:1px solid;
  border-left-width:4px;
  border-radius:8px;
  font-weight:600;
}
#admission-message.review-feedback--success {
  color:#21613e;background:#edf7f0;border-color:#28734b;
}
#admission-message.review-feedback--error {
  color:#971b29;background:#fff1f2;border-color:#b42332;
}

#enrollments .enrollment-state {font-weight:400;}
#enrollments .enrollment-state--pending {color:#b42332;}
#enrollments .enrollment-state--confirmed {color:#97520a;}
#enrollments .enrollment-state--active {color:#21613e;}
#enrollments .enrollment-state--neutral {color:#626b76;}

/* Account movement enquiry and compact transfer feedback. */
.treasury-total {padding:0 20px 20px;margin:0;font-size:20px;font-weight:600;}
#account-ledger {width:min(1100px,calc(100vw - 28px));}
#account-ledger .ledger-filters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:12px;width:100%;}
.ledger-summary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0;}
.ledger-summary p {margin:0 0 8px;font-size:13px;}
.ledger-scroll {overflow-x:auto;}
.ledger-table {width:100%;}
.ledger-table td:nth-child(n+3),.ledger-table th:nth-child(n+3) {text-align:right;white-space:nowrap;}
.ledger-table td {vertical-align:top;}
.ledger-table details {min-width:180px;max-width:420px;overflow-wrap:anywhere;}
.ledger-table summary {cursor:pointer;}
.ledger-table details p {white-space:pre-wrap;}
.ledger-in {color:#21613e;}.ledger-out {color:#b42332;}
#editor #transfer-form>.notice {margin:4px 0;}
#editor #editor-message {margin:0;line-height:1.5;}
#editor #editor-message:empty {display:none;}
#editor #editor-message:not(:empty) {padding:12px 14px;color:#971b29;background:#fff1f2;border:1px solid #efb4bc;border-left:4px solid #b42332;border-radius:8px;}
@media(max-width:700px) {
  #account-ledger {padding:18px;}
  #account-ledger .ledger-filters {grid-template-columns:1fr 1fr;}
  .ledger-summary {grid-template-columns:1fr 1fr;}
  .ledger-summary .transfer-item {padding:12px;}
}


/* Expense entry: clear obligations, payments and feedback. */
#expense-editor,#expense-detail {width:min(680px,calc(100vw - 28px));}
.expense-fields {display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.expense-hint {font-size:12px;line-height:1.5;margin:0;color:var(--muted);}
.expense-message:empty,#expense-feedback:empty {display:none;}
.expense-message,#expense-feedback {padding:12px 14px;background:#edf7f0;border-radius:8px;line-height:1.5;overflow-wrap:anywhere;}
.expense-message--error {color:#971b29!important;background:#fff1f2!important;border-left:4px solid #b42332;}
#expense-form [hidden],#pay-form[hidden] {display:none!important;}
#expense-form .notice,#pay-form .notice {margin:0;}
#detail-body>p {overflow-wrap:anywhere;white-space:pre-wrap;}
#detail-body .transfer-item {margin:12px 0;}
#pay-form {margin-top:20px;}
.expense-state {font-weight:400;}
.expense-state--paid {color:#21613e;}.expense-state--partially_paid {color:#97520a;}.expense-state--pending {color:#b42332;}
@media(max-width:540px){.expense-fields {grid-template-columns:1fr;}#expense-editor,#expense-detail{padding:18px;}}

.planning-section{margin-bottom:24px}.planning-dialog{width:min(850px,calc(100vw - 28px))}.planning-dialog details{border-top:1px solid var(--line);padding:16px 0}.planning-dialog summary{cursor:pointer;padding:8px 0;font-weight:600}.planning-dialog form{margin-top:14px}.planning-dialog .transfer-item{margin-bottom:12px}.planning-dialog input[type=checkbox]{width:auto;align-self:flex-start}.form-message:not(:empty),#message:not(:empty){padding:12px 16px;border-radius:8px;background:#edf6f2;line-height:1.5}.expense-message--error{color:#b42332!important}#budget-entries{max-height:300px;overflow:auto}#card-history{margin-block:18px}

.statement-match-attention { color: #b42332; }


/* Search and selection share one student control. */
.student-combobox { position: relative; }
.student-combobox-control { display: flex; gap: 0; }
.student-combobox-control input { flex: 1; min-width: 0; border-radius: 8px 0 0 8px; }
.student-combobox-control button { flex: 0 0 42px; padding: 8px; border-radius: 0 8px 8px 0; }
.student-combobox-list { position: absolute; left: 0; right: 0; z-index: 20; max-height: 230px; overflow-y: auto; background: #fff; color: #18365f; border: 1px solid #bdcbe0; border-radius: 8px; box-shadow: 0 4px 12px #18365f22; }
.student-combobox-list[hidden] { display: none; }
.student-combobox-option { padding: 10px 12px; cursor: pointer; overflow-wrap: anywhere; }
.student-combobox-option:hover, .student-combobox-option[aria-selected="true"] { background: #eaf0f8; }
.student-combobox-list > .expense-hint { padding: 10px 12px; }

/* Compact expense and payment lists retain their columns on narrow screens. */
.expense-table-scroll {overflow-x:auto;}
.expense-list-table {min-width:960px;}
.expense-list-table td {padding:12px 16px;vertical-align:top;}
.expense-list-table th {padding:12px 16px;}
.expense-list-table td:nth-child(2) {min-width:220px;max-width:360px;overflow-wrap:anywhere;}
.expense-list-table td:nth-child(3) {max-width:220px;overflow-wrap:anywhere;}
.expense-list-table td:first-child,.expense-list-table td:nth-child(4) {white-space:nowrap;}
.expense-number {text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.expense-list-table th:nth-child(5),.expense-list-table th:nth-child(6) {text-align:right;}
.expense-list-table button {padding:8px 12px;font-size:12px;white-space:nowrap;}
.expense-payments-table {min-width:540px;}
.expense-payments-table td,.expense-payments-table th {padding:12px 10px;vertical-align:top;}
.expense-payments-table th:nth-child(3) {text-align:right;}
#detail-body h3 {font-size:17px;margin:22px 0 14px;}
#detail-body dl {grid-template-columns:150px minmax(0,1fr);gap:10px 16px;}
#expense-filter {font:inherit;padding:8px;border:1px solid #c7d3e1;border-radius:8px;background:white;color:inherit;}
@media(max-width:540px){#detail-body dl {grid-template-columns:1fr;gap:6px;}#detail-body dd {margin-bottom:8px;}}


.statement-list-table {min-width:760px;}
.statement-list-table td,.statement-list-table th {padding:12px 16px;vertical-align:top;}
.statement-list-table td:nth-child(2) {max-width:380px;overflow-wrap:anywhere;}
#statement-view {font:inherit;padding:8px;border:1px solid #c7d3e1;border-radius:8px;background:white;color:inherit;}
#statement-list-message {padding:12px 20px;}
#statement-list-message:empty {display:none;}
.statement-preview-table {min-width:720px;width:100%;}
.statement-preview-table td,.statement-preview-table th {padding:10px 12px;vertical-align:top;}
.statement-preview-table td:first-child,.statement-preview-amount {white-space:nowrap;}
.statement-preview-table th:nth-child(4),.statement-preview-amount {text-align:right;}
.statement-preview-table details {min-width:200px;max-width:340px;overflow-wrap:anywhere;}
.statement-preview-table summary {cursor:pointer;}
.statement-preview-table details p {margin:8px 0;white-space:pre-wrap;}
.statement-preview-table td:last-child {max-width:220px;overflow-wrap:anywhere;}
.statement-preview-pagination {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0;}
.statement-preview-pagination span {margin-right:auto;}
.statement-preview-table .statement-match-warning {color:#c00;}

/* Unread task indicator shared by the ERP navigation and task heading. */
.task-unread-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#b42332;color:#fff;font:700 12px/1 Arial,sans-serif;letter-spacing:0;vertical-align:middle;flex-shrink:0}.task-unread-count[hidden]{display:none}.sidebar nav a:has(.task-unread-count){align-items:center;gap:8px}.heading h1 .task-unread-count{vertical-align:middle}