:root {
    --app-navy: #14213d;
    --app-blue: #2457d6;
    --app-cyan: #27a9e1;
    --app-bg: #f4f7fb;
}

body {
    min-height: 100vh;
    background: var(--app-bg);
    color: #1d2939;
    font-family: Leelawadee UI, Noto Sans Thai, Segoe UI, Tahoma, sans-serif;
    font-size: .96rem;
    line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: Leelawadee UI, Noto Sans Thai, Segoe UI, Tahoma, sans-serif;
    letter-spacing: .01em;
}

.app-navbar {
    background: rgba(20, 33, 61, .97);
    box-shadow: 0 4px 20px rgba(15, 23, 42, .12);
}

.brand-mark {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--app-cyan), #fff);
    color: var(--app-navy);
    font-weight: 800;
}

.hero-panel {
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 90% 15%, rgba(39, 169, 225, .34), transparent 28%),
        linear-gradient(135deg, #14213d 0%, #233d75 100%);
    color: #fff;
    border: 0;
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(20, 33, 61, .18);
}

.hero-kicker {
    color: #8edcff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.glass-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 1rem;
    backdrop-filter: blur(8px);
}

.content-card {
    border: 1px solid #e4eaf2;
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgba(15, 23, 42, .06);
}

.tree-filter-group {
    height: 100%;
    min-height: 13rem;
    overflow: hidden;
    border: 1px solid #dbe5f2;
    border-radius: .85rem;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.tree-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .7rem;
    border-bottom: 1px solid #e4ebf5;
    background: #f3f7fd;
}

.filter-step {
    display: inline-grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--app-blue);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
}

.tree-actions {
    display: flex;
    gap: .25rem;
}

.tree-action {
    padding: .1rem .4rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: #47658f;
    font-size: .75rem;
}

.tree-action:hover,
.tree-action:focus-visible {
    background: #dce8fa;
    color: #1c47b6;
    outline: 0;
}

.tree-choices {
    display: grid;
    max-height: 12rem;
    overflow: auto;
    padding: .35rem;
    gap: .1rem;
}

.tree-choice {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .36rem .45rem;
    border-radius: .45rem;
    color: #334155;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1.35;
}

.tree-choice:hover {
    background: #eaf2ff;
}

.tree-choice:has(input:checked) {
    background: #dbeafe;
    color: #173f94;
    font-weight: 600;
}

.tree-choice input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin-top: .1rem;
    accent-color: var(--app-blue);
}

.tree-level {
    padding-left: .3rem;
}

.tree-faculty {
    padding-left: .7rem;
}

.tree-department {
    padding-left: 1.1rem;
}

.tree-empty {
    padding: .8rem;
    color: #667085;
    font-size: .84rem;
    text-align: center;
}

.status-dot {
    width: .75rem;
    height: .75rem;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 0 .3rem rgba(25, 135, 84, .14);
}

.step-number {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: #e9efff;
    color: var(--app-blue);
    font-weight: 700;
}

.upload-zone {
    padding: 2rem;
    text-align: center;
    border: 2px dashed #b8c5d8;
    border-radius: 1rem;
    background: #f8faff;
}

.table-field {
    display: inline-block;
    margin: .18rem;
    padding: .3rem .55rem;
    border: 1px solid #dbe4f0;
    border-radius: .5rem;
    background: #f5f8fc;
    color: #344054;
    font-family: ui-monospace, monospace;
    font-size: .82rem;
}

.form-control:focus {
    border-color: #7195ec;
    box-shadow: 0 0 0 .25rem rgba(36, 87, 214, .14);
}

.btn-primary {
    --bs-btn-bg: var(--app-blue);
    --bs-btn-border-color: var(--app-blue);
    --bs-btn-hover-bg: #1c47b6;
    --bs-btn-hover-border-color: #1c47b6;
}

.report-search {
    width: min(100%, 34rem);
}

.report-table-wrap {
    max-height: calc(100vh - 18rem);
}

.report-table {
    font-size: .84rem;
    min-width: 170rem;
}

.report-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.report-table th,
.report-table td {
    padding: .7rem .6rem;
}

.report-table .student-cell {
    position: sticky;
    left: 0;
    min-width: 13rem;
    background: #fff;
    box-shadow: 4px 0 8px rgba(15, 23, 42, .05);
    z-index: 1;
}

.report-table thead th:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 4;
}

.report-table .debt-cell {
    min-width: 8rem;
}

@media (max-width: 575.98px) {
    .report-search {
        width: 100%;
    }

    .report-table-wrap {
        max-height: calc(100vh - 14rem);
    }
}

.student-care-body { background: linear-gradient(135deg, #edf8ff 0%, #f8fcff 48%, #e7f7ff 100%); }
.student-care-hero { padding: 2rem; border-radius: 1.25rem; background: linear-gradient(115deg, #04215d, #0e65c8 62%, #34b9e6); color: #fff; box-shadow: 0 16px 34px rgba(12, 71, 143, .24); }
.student-care-hero .hero-kicker { color: #bcefff; }
.care-filter-card, .care-section { padding: 1rem; border: 1px solid #cce7f4; border-radius: 1rem; background: rgba(255, 255, 255, .93); box-shadow: 0 8px 24px rgba(26, 90, 135, .07); }
.care-filter-grid { --bs-gutter-x: .75rem; --bs-gutter-y: .6rem; }.care-filter-grid > .col { min-width: 12.5rem; }.care-filter-grid .form-label { display: block; min-height: 1.5rem; margin-bottom: .25rem; color: #173d64; font-size: .86rem; }.care-filter-grid .form-control, .care-filter-grid .form-select, .care-filter-grid .care-multiselect summary { height: 2.45rem; }
.care-filter-label { display: block; min-height: 1.5rem; margin-bottom: .25rem; color: #173d64; font-size: .86rem; font-weight: 700; }
@media (min-width: 1400px) { .care-filter-grid { flex-wrap: nowrap; }.care-filter-grid > .col { flex: 1 1 0; min-width: 0; } }
.care-list-header { min-height: 5.8rem; }.care-list-heading { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }.care-list-search { width: min(100%, 20rem); }.care-list-search .form-label, .care-list-page-size .form-label { color: #173d64; font-size: .82rem; font-weight: 700; }.care-list-search .form-control { height: 2.45rem; border-color: #b9d5fa; }.care-list-page-size { width: 10rem; }.care-list-page-size .form-select { height: 2.1rem; border-color: #b9d5fa; }.care-pagination .page-link { color: #0d56ba; }.care-pagination .page-item.active .page-link { background: #145bd7; border-color: #145bd7; color: #fff !important; }
.care-filter-title, .care-section-title { color: #063bc1; font-weight: 800; font-size: 1.06rem; }
.care-section-title { margin-bottom: .7rem; }
.care-section-title span { float: right; color: #39729b; font-size: .8rem; font-weight: 500; }
.care-check-list { display: grid; max-height: 8rem; overflow: auto; margin-top: .35rem; padding: .35rem .5rem; border: 1px solid #c9def8; border-radius: .55rem; background: #f8fcff; gap: .2rem; }
.care-check-list label { font-size: .86rem; color: #28435f; cursor: pointer; }
.care-check-list input { accent-color: #145bd7; }
.care-multiselect { position: relative; }.care-multiselect summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.45rem; padding: .55rem .7rem; border: 1px solid #b9d5fa; border-radius: .55rem; background: #fff; color: #063bc1; cursor: pointer; font-weight: 700; list-style: none; }.care-multiselect summary::-webkit-details-marker { display: none; }.care-multiselect summary::after { content: '⌄'; margin-left: .5rem; font-size: 1.1rem; }.care-multiselect summary span { margin-left: auto; padding-right: .45rem; color: #6180a1; font-size: .75rem; font-weight: 500; }.care-multiselect[open] summary { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #eef6ff; }.care-multiselect > div { position: absolute; z-index: 10; width: 100%; max-height: 15rem; overflow: auto; padding: .45rem; border: 1px solid #b9d5fa; border-top: 0; border-radius: 0 0 .55rem .55rem; background: #fff; box-shadow: 0 12px 22px rgba(26, 90, 135, .18); }.care-multiselect label { display: block; padding: .34rem .4rem; color: #28435f; cursor: pointer; font-size: .86rem; }.care-multiselect label:hover { background: #eef6ff; }.care-multiselect input { accent-color: #145bd7; }
.care-multiselect .care-select-all { position: sticky; top: -.45rem; z-index: 1; margin: -.45rem -.45rem .25rem; padding: .5rem .85rem; border-bottom: 1px solid #c9def8; background: #f1f7ff; color: #063bc1; font-weight: 800; }
.care-summary-card { position: relative; min-height: 9rem; padding: 1rem 1.15rem; border: 1px solid; border-radius: .9rem; text-align: center; overflow: hidden; }.care-summary-icon { position: absolute; top: .7rem; left: .85rem; width: 3.1rem; height: 3.1rem; color: currentColor; opacity: .22; pointer-events: none; }.care-summary-icon svg { display: block; width: 100%; height: 100%; }
.care-summary-card div { font-size: 1.25rem; font-weight: 800; }.care-summary-card strong { display: block; font-size: 2.1rem; line-height: 1.25; }.care-summary-card small { font-weight: 700; }
.care-total { border-color: #b7d8f4; background: #eef8ff; color: #123f78; }.care-before { border-color: #9fe5cf; background: #f0fff9; color: #058d6a; }.care-overdue { border-color: #ffd098; background: #fff8ed; color: #f05c0b; }
.care-group-card { display: flex; min-height: 11.7rem; flex-direction: column; justify-content: space-between; align-items: center; gap: .35rem; padding: .65rem .5rem .75rem; border: 2px solid; border-radius: .8rem; text-align: center; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); transition: transform .15s ease, box-shadow .15s ease; }.care-group-card:hover { transform: translateY(-3px); box-shadow: 0 .45rem .9rem rgba(22,73,120,.12); }.care-group-card b { display: grid; width: 3.05rem; height: 3.05rem; place-items: center; border-radius: 50%; background: var(--group-accent); box-shadow: 0 .22rem .45rem rgba(0,0,0,.1); color: #fff; font-size: 1.85rem; line-height: 1; }.care-group-card span { display: flex; min-height: 3.9rem; flex-direction: column; justify-content: center; font-size: 1.12rem; font-weight: 800; line-height: 1.28; }.care-group-card span em, .care-group-card span i { display: block; font-style: normal; }.care-group-card span i { font-size: 1.25rem; }.care-group-card strong { font-size: 2.15rem; line-height: 1.05; }
.group-1 { --group-accent: #009e71; border-color: #62d99b; background: linear-gradient(155deg, #8ff1b5 0%, #effff5 70%); color: #008f66; }.group-2 { --group-accent: #78bd17; border-color: #b0e97c; background: linear-gradient(155deg, #c9f69a 0%, #f8ffef 70%); color: #70aa1a; }.group-3 { --group-accent: #ffb900; border-color: #ffe26a; background: linear-gradient(155deg, #fff09c 0%, #fffdf2 70%); color: #e7a900; }.group-4 { --group-accent: #ff5b12; border-color: #ffac60; background: linear-gradient(155deg, #ffb265 0%, #fff5ec 70%); color: #ff500a; }.group-5 { --group-accent: #f20c42; border-color: #ff8299; background: linear-gradient(155deg, #ff7b96 0%, #fff2f5 70%); color: #ed1649; }.group-6 { --group-accent: #db0c29; border-color: #f54c60; background: linear-gradient(155deg, #f2233d 0%, #fff1f3 73%); color: #e5112d; }.care-group-card.active { outline: 3px solid rgba(21, 91, 215, .34); outline-offset: 2px; }
@media (max-width: 767.98px) { .care-group-card { min-height: 9.8rem; }.care-group-card b { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }.care-group-card span { min-height: 3rem; font-size: .92rem; }.care-group-card span i { font-size: 1.05rem; }.care-group-card strong { font-size: 1.65rem; } }
.care-section .table-responsive { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }.care-table { min-width: 66rem; font-size: .88rem; }.care-table thead th { color: #073fb1; background: #e9f6ff; white-space: nowrap; }.care-table th:last-child, .care-table td:last-child { min-width: 10.75rem; white-space: nowrap; }.care-badge { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: .3rem; padding: .2rem .45rem .2rem .25rem; border-radius: .35rem; font-size: .75rem; font-weight: 800; line-height: 1.25; white-space: nowrap; }.care-badge b { display: grid; width: 1.28rem; height: 1.28rem; flex: 0 0 1.28rem; place-items: center; border-radius: 50%; background: var(--group-accent, #64748b); color: #fff; font-size: .75rem; line-height: 1; }.care-badge.group-0 { background: #eff2f5; color: #52606d; }.care-note { padding: .75rem 1rem; border-radius: .6rem; background: #fff3cd; color: #725b1d; font-size: .86rem; }
@media (max-width: 767.98px) { .care-list-header { min-height: auto; }.care-table { min-width: 62rem; font-size: .82rem; }.care-table th:last-child, .care-table td:last-child { min-width: 10.25rem; }.care-badge { font-size: .72rem; }.care-pagination { padding-inline: .75rem !important; } }
/* Keep payment-classification cards visually equal when labels or totals wrap on narrow screens. */
.care-group-grid > .col { display: flex; }
.care-group-grid .care-group-card { width: 100%; height: 100%; justify-content: center; }
.care-group-grid .care-group-card strong { display: flex; min-height: 2.1em; align-items: center; justify-content: center; }
@media (max-width: 767.98px) {
    .care-group-grid .care-group-card strong { min-height: 2.2em; }
}
.care-student-link { color: #1765c1; text-decoration: none; }
.care-student-link:hover, .care-student-link:focus { color: #073fb1; text-decoration: underline; }
.student-detail-main { max-width: 72rem; }
.student-detail-card { overflow: hidden; border: 1px solid #cbe6f5; border-radius: 1rem; background: rgba(255,255,255,.96); box-shadow: 0 10px 26px rgba(26,90,135,.09); }
.student-detail-heading { display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; background: linear-gradient(90deg, #e9f8ff, #f9fdff); color: #083da8; font-size: 1.15rem; font-weight: 800; }
.student-detail-heading-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .5rem; background: #114eb4; color: #fff; }.student-detail-heading-icon svg { width: 1.2rem; height: 1.2rem; }
.student-detail-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; padding: 1.25rem; }
.student-detail-avatar { display: grid; width: 8rem; height: 8rem; place-items: center; border: .4rem solid #d8f2ff; border-radius: 50%; background: linear-gradient(145deg, #c5ecff, #2787ca); box-shadow: 0 8px 18px rgba(13,94,165,.18); color: #063b87; font-size: 2.2rem; font-weight: 800; }.student-detail-avatar { position: relative; overflow: hidden; }.student-detail-avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: #0d589f; }.student-detail-avatar-fallback svg { width: 55%; height: 55%; }.student-detail-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.student-detail-name { margin: 0 0 .2rem; color: #083ba1; font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 800; }
.student-detail-code { margin-bottom: .75rem; color: #235fbd; font-weight: 700; }
.student-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.5rem; }
.student-detail-grid dt { color: #4b6c91; font-size: .8rem; font-weight: 700; }.student-detail-grid dd { margin: .08rem 0 0; color: #163c75; font-weight: 700; }
.student-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem; margin: 1rem; }.student-detail-stat { padding: .85rem; border: 1px solid #cfe6f5; border-radius: .75rem; background: #f7fcff; text-align: center; }.student-detail-stat span { display: block; color: #54708c; font-size: .8rem; font-weight: 700; }.student-detail-stat strong { color: #cb1740; font-size: 1.35rem; }.student-detail-stat.due strong { color: #e57309; }.student-detail-stat.overdue strong { color: #d41136; }
.student-detail-table { min-width: 45rem; }.student-detail-table thead th { color: #073fb1; background: #e9f6ff; white-space: nowrap; }
@media (max-width: 575.98px) { .student-detail-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }.student-detail-avatar { width: 6.75rem; height: 6.75rem; }.student-detail-grid { grid-template-columns: 1fr; text-align: left; }.student-detail-summary { grid-template-columns: 1fr; }.student-detail-table { min-width: 39rem; } }
.care-summary-link { display: block; height: 100%; color: inherit; text-decoration: none; } .care-summary-link .care-summary-card { transition: transform .15s ease, box-shadow .15s ease; } .care-summary-link:hover .care-summary-card, .care-summary-link:focus-visible .care-summary-card { transform: translateY(-3px); box-shadow: 0 .45rem .9rem rgba(22,73,120,.12); } .care-summary-link:hover, .care-summary-link:focus { color: inherit; } .care-summary-card.active { outline: 3px solid rgba(21,91,215,.3); outline-offset: 2px; }

.payment-risk-body { color-scheme: only light; }.risk-chart-section { color-scheme: only light; }.risk-due-chart { display: grid; grid-template-columns: minmax(27rem, 30rem) minmax(16rem, 28rem); align-items: center; justify-content: center; gap: 1.5rem 2.5rem; padding: .8rem .25rem .25rem; }.risk-donut { position: relative; display: grid; width: min(100%, 28rem); aspect-ratio: 21 / 17; place-items: center; border-radius: 50%; filter: drop-shadow(0 .6rem 1.2rem rgba(11, 79, 126, .13)); }.risk-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; }.risk-donut-track { fill: none; stroke: #d8e8f3; stroke-width: 44; }.risk-donut-pointer { fill: none; stroke-width: 2; }.risk-donut-label { font-family: inherit; font-size: 15px; font-weight: 800; }.risk-donut-label-percent { font-size: 12.5px; font-weight: 700; }.risk-donut-center { fill: #123f78; }.risk-donut > div { position: absolute; z-index: 1; top: 50%; left: 48.8%; display: flex; width: 25.2%; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%, -50%); text-align: center; }.risk-donut span { display: block; color: #fff; font-size: clamp(.72rem, 2.3vw, .92rem); font-weight: 800; line-height: 1.15; white-space: nowrap; }.risk-donut strong { display: block; color: #fff; font-size: clamp(1rem, 3.3vw, 1.25rem); line-height: 1.18; white-space: nowrap; }.risk-due-legend { display: grid; gap: .45rem; }.risk-due-legend-header { display: grid; grid-template-columns: .8rem minmax(4.3rem, 1fr) auto 3.4rem; align-items: end; gap: .45rem; padding-bottom: .2rem; border-bottom: 1px solid #d5e8f5; color: #285387; font-size: .92rem; }.risk-due-legend-header b { text-align: right; white-space: nowrap; }.risk-due-legend-item { display: grid; grid-template-columns: .8rem minmax(4.3rem, 1fr) auto 3.4rem; align-items: center; gap: .45rem; color: #23496f; font-size: .92rem; }.risk-due-legend-item i { width: .75rem; height: .75rem; border-radius: 50%; }.risk-group-dot-1 { background: #009e71; }.risk-group-dot-2 { background: #78bd17; }.risk-group-dot-3 { background: #ffb900; }.risk-group-dot-4 { background: #ff5b12; }.risk-group-dot-5 { background: #f20c42; }.risk-group-dot-6 { background: #db0c29; }.risk-due-legend-item b { color: #123f78; font-weight: 800; }.risk-due-legend-item em { color: #4d7596; font-size: .84rem; font-style: normal; text-align: right; }.risk-due-note { margin-top: .6rem; color: #52708f; font-size: .82rem; text-align: center; }
@media (max-width: 991.98px), (max-height: 600px) and (orientation: landscape) { .risk-due-chart { grid-template-columns: 1fr; gap: 1rem; }.risk-donut { width: min(100%, 25rem); justify-self: center; }.risk-due-legend { width: min(100%, 20rem); justify-self: center; } }
/* Executive payment-risk donut: clear mobile-first presentation. */
.risk-due-chart { grid-template-columns: minmax(20rem, 25rem) minmax(17rem, 23rem); gap: 1.25rem 2.25rem; padding: 1rem .25rem .35rem; }
.risk-donut { width: min(100%, 25rem); aspect-ratio: 10 / 9; filter: drop-shadow(0 .85rem 1.4rem rgba(11, 79, 126, .14)); }
.risk-donut-halo { fill: #f5faff; stroke: #dcecf7; stroke-width: 1; }
.risk-donut-track { stroke: #e5f0f7; stroke-width: 42; }
.risk-donut-slice { animation: risk-donut-reveal .9s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--risk-delay); }
.risk-donut-center-ring { fill: #d9eaf6; }
.risk-donut-center { fill: #123f78; }
.risk-donut > div { top: 50%; left: 50%; width: 33%; }
.risk-donut span { font-size: clamp(.78rem, 2.5vw, .96rem); }
.risk-donut strong { font-size: clamp(1.05rem, 3.55vw, 1.35rem); }
.risk-due-legend { width: min(100%, 23rem); justify-self: center; gap: .55rem; padding: 1rem 1.1rem; border: 1px solid #d8e9f4; border-radius: 1rem; background: linear-gradient(145deg, #fff, #f5faff); box-shadow: 0 .5rem 1.2rem rgba(20, 86, 133, .06); }
.risk-due-legend-header { padding-bottom: .45rem; font-size: .96rem; }
.risk-due-legend-item { min-height: 1.35rem; font-size: .95rem; }
.risk-due-legend-item i { width: .8rem; height: .8rem; box-shadow: 0 .1rem .25rem rgba(20, 59, 97, .16); }
.risk-due-legend-item em { font-size: .88rem; }
@keyframes risk-donut-reveal { from { stroke-dashoffset: var(--risk-start); } to { stroke-dashoffset: var(--risk-end); } }
@media (prefers-reduced-motion: reduce) { .risk-donut-slice { animation: none; stroke-dashoffset: var(--risk-end); } }
@media (max-width: 991.98px), (max-height: 600px) and (orientation: landscape) { .risk-due-chart { grid-template-columns: 1fr; gap: 1rem; }.risk-donut { width: min(100%, 24rem); }.risk-due-legend { width: min(100%, 23rem); } }
.risk-donut-piece { cursor: pointer; outline: none; }
.risk-donut-piece .risk-donut-slice { transition: stroke-width .18s ease, filter .18s ease; }
.risk-donut-piece:hover .risk-donut-slice, .risk-donut-piece:focus .risk-donut-slice, .risk-donut-piece.is-active .risk-donut-slice { stroke-width: 49; filter: brightness(1.05) saturate(1.12); }
.risk-donut-piece:focus .risk-donut-slice { filter: brightness(1.06) saturate(1.15) drop-shadow(0 0 .2rem rgba(12, 62, 105, .4)); }
.risk-donut-inner-label { fill: #123f78; font-family: inherit; font-size: 13px; font-weight: 900; pointer-events: none; }
.risk-donut-outer-label { font-family: inherit; font-size: 13px; font-weight: 900; pointer-events: none; }
.risk-donut-pointer { stroke-width: 2.25; pointer-events: none; }
.risk-donut-tooltip { position: absolute; z-index: 3; top: .7rem; left: 50%; min-width: 7.8rem; padding: .38rem .7rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(18,63,120,.96); box-shadow: 0 .45rem 1rem rgba(9,50,91,.22); color: #fff; font-size: .82rem; font-weight: 800; text-align: center; transform: translateX(-50%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .risk-donut-piece .risk-donut-slice { transition: none; } }
.risk-donut-piece { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.risk-donut-piece .risk-donut-slice { transition: stroke-width .2s ease, filter .2s ease; }
.risk-donut-piece:hover .risk-donut-slice, .risk-donut-piece:focus .risk-donut-slice, .risk-donut-piece.is-active .risk-donut-slice { stroke-width: 47; filter: brightness(1.06) saturate(1.18) drop-shadow(0 .18rem .25rem rgba(9, 50, 91, .2)); }
.risk-donut-inner-label { font-size: 12px; font-weight: 900; letter-spacing: -.02em; paint-order: stroke; stroke: rgba(255,255,255,.68); stroke-width: 2.4px; stroke-linejoin: round; }
.risk-donut-outer-label { font-size: 12px; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.risk-donut-tooltip { position: fixed; z-index: 1080; min-width: 8rem; padding: .48rem .78rem; border: 1px solid rgba(255,255,255,.52); border-radius: .7rem; background: #123f78; box-shadow: 0 .55rem 1.4rem rgba(9,50,91,.28); color: #fff; font-size: .86rem; font-weight: 800; text-align: center; transform: translate(12px, calc(-100% - 12px)); pointer-events: none; }
.risk-donut-piece .risk-donut-slice { animation: risk-donut-path-in .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--risk-delay); transform-box: view-box; transform-origin: 200px 180px; }
.risk-donut-piece:hover .risk-donut-slice, .risk-donut-piece:focus .risk-donut-slice, .risk-donut-piece.is-active .risk-donut-slice { stroke-width: 0; }
@keyframes risk-donut-path-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .risk-donut-piece .risk-donut-slice { animation: none; } }
/* Do not let device dark mode recolor the executive dashboard. */
html:has(.payment-risk-body), .payment-risk-body { color-scheme: light only !important; forced-color-adjust: none; }
.payment-risk-body, .payment-risk-body .care-section, .payment-risk-body .care-filter-card, .payment-risk-body .risk-due-legend { -webkit-text-fill-color: currentColor; }
.payment-risk-body svg { color-scheme: light only !important; forced-color-adjust: none; }
@media (prefers-color-scheme: dark) {
  .payment-risk-body { background: linear-gradient(135deg, #edf8ff 0%, #f8fcff 48%, #e7f7ff 100%) !important; color: #123f78 !important; }
  .payment-risk-body .care-section, .payment-risk-body .care-filter-card { background: rgba(255,255,255,.96) !important; border-color: #cce7f4 !important; color: #123f78 !important; }
  .payment-risk-body .care-section-title, .payment-risk-body .risk-due-legend-header, .payment-risk-body .risk-due-legend-item { color: #123f78 !important; }
  .payment-risk-body .risk-due-legend { background: linear-gradient(145deg, #fff, #f5faff) !important; border-color: #d8e9f4 !important; color: #23496f !important; }
  .payment-risk-body .risk-due-legend-item b { color: #123f78 !important; }
  .payment-risk-body .risk-due-legend-item em, .payment-risk-body .risk-due-note { color: #4d7596 !important; }
  .payment-risk-body .risk-donut-halo { fill: #f5faff !important; stroke: #dcecf7 !important; }
  .payment-risk-body .risk-donut-track { stroke: #e5f0f7 !important; }
}
.risk-donut-tooltip { background: rgba(18,63,120,.76); border-color: rgba(255,255,255,.62); box-shadow: 0 .55rem 1.4rem rgba(9,50,91,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translate(0, -50%); }
.risk-donut-tooltip.risk-tooltip-left { transform: translate(-100%, -50%); }
.risk-donut-tooltip { min-width: 0; max-width: 8.4rem; padding: .2rem .38rem; border: 1px solid rgba(255,255,255,.3); border-radius: .22rem; background: rgba(8,18,34,.72); box-shadow: 0 .18rem .55rem rgba(0,0,0,.2); color: #fff; font-size: .62rem; font-weight: 700; line-height: 1.18; white-space: nowrap; transform: translate(-50%, -50%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.risk-donut-tooltip { max-width: 7rem; padding: .16rem .28rem; border-radius: .16rem; background: rgba(0,0,0,.66); box-shadow: none; font-size: .56rem; line-height: 1.12; }
/* Keep the compact tooltip directly over the selected donut segment. */
.risk-donut-tooltip { position: absolute; z-index: 5; transform: translate(-50%, -50%); }
/* Compact rectangular segment detail, intentionally more prominent than chart labels. */
.risk-donut-tooltip { min-width: 0; max-width: none; padding: .2rem .42rem; border: 1px solid rgba(255,255,255,.42); border-radius: .08rem; background: rgba(4,18,36,.74); box-shadow: 0 .16rem .42rem rgba(0,0,0,.22); font-size: .76rem; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; }
.risk-donut-tooltip { display: block; width: max-content; min-width: 8.6rem; max-width: none; box-sizing: border-box; padding: .28rem .46rem; border-radius: 0; font-size: .92rem; font-weight: 800; line-height: 1.05; white-space: nowrap; }
.risk-donut-tooltip { border-radius: .28rem; }

.risk-donut-tooltip { display: grid; width: 8rem; min-width: 0; aspect-ratio: 16 / 9; place-items: center; padding: .22rem .35rem; text-align: center; white-space: normal; }
.risk-donut-tooltip { width: 8rem !important; min-width: 8rem !important; height: 4.5rem !important; min-height: 4.5rem !important; aspect-ratio: auto !important; display: grid !important; place-items: center !important; box-sizing: border-box; }
.risk-donut-center, .risk-donut-center-ring, .risk-donut > div:not(.risk-donut-tooltip) { pointer-events: none; }

.risk-donut-tooltip[hidden] { display: none !important; }

.risk-due-chart { grid-template-columns: minmax(19rem, 23rem) minmax(15rem, 19rem) minmax(25rem, 1fr); align-items: start; }
.risk-faculty-chart { min-width: 0; padding: .85rem 1rem; border: 1px solid #d8e9f4; border-radius: 1rem; background: linear-gradient(145deg, #fff, #f5faff); box-shadow: 0 .5rem 1.2rem rgba(20, 86, 133, .06); }
.risk-faculty-heading { display: flex; justify-content: space-between; gap: .75rem; color: #083da8; font-size: 1rem; font-weight: 800; }.risk-faculty-heading span { color: #52708f; font-size: .75rem; font-weight: 600; }
.risk-faculty-key { display: flex; flex-wrap: wrap; gap: .28rem .65rem; margin: .55rem 0 .7rem; color: #23496f; font-size: .73rem; }.risk-faculty-key span { display: inline-flex; align-items: center; gap: .25rem; }.risk-faculty-key i { width: .65rem; height: .65rem; border-radius: 50%; }
.risk-faculty-rows { display: grid; gap: .42rem; }.risk-faculty-row { display: grid; grid-template-columns: minmax(7rem, 1.15fr) minmax(12rem, 2.7fr) auto; align-items: center; gap: .5rem; }.risk-faculty-name { overflow: hidden; color: #23496f; font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.risk-faculty-row > strong { min-width: 2.8rem; color: #123f78; font-size: .8rem; text-align: right; }
.risk-faculty-bar { display: flex; min-width: 0; height: 1.65rem; overflow: hidden; border-radius: .3rem; background: #edf5f9; box-shadow: inset 0 0 0 1px #e1edf4; }.risk-faculty-segment { display: grid; width: var(--faculty-width); min-width: 0; place-items: center; overflow: hidden; color: #123f78; font-size: .7rem; font-weight: 900; text-shadow: 0 1px rgba(255,255,255,.65); }.risk-faculty-segment.group-1 { background: linear-gradient(90deg, #8ff1b5, #effff5); }.risk-faculty-segment.group-2 { background: linear-gradient(90deg, #c9f69a, #f8ffef); }.risk-faculty-segment.group-3 { background: linear-gradient(90deg, #fff09c, #fffdf2); }.risk-faculty-segment.group-4 { background: linear-gradient(90deg, #ffb265, #fff5ec); }.risk-faculty-segment.group-5 { background: linear-gradient(90deg, #ff7b96, #fff2f5); }.risk-faculty-segment.group-6 { background: linear-gradient(90deg, #f2233d, #fff1f3); }
@media (max-width: 1399.98px) { .risk-due-chart { grid-template-columns: minmax(19rem, 24rem) minmax(16rem, 22rem); }.risk-faculty-chart { grid-column: 1 / -1; max-width: 52rem; justify-self: center; width: 100%; } }
@media (max-width: 700px) { .risk-faculty-row { grid-template-columns: 1fr auto; gap: .25rem .5rem; }.risk-faculty-bar { grid-column: 1 / -1; grid-row: 2; }.risk-faculty-name { font-size: .72rem; }.risk-faculty-row > strong { font-size: .76rem; } }
/* Two equal chart panels: due groups on the left, faculties on the right. */
.risk-chart-section > .care-section-title { display: none; }
.risk-due-chart { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: stretch; padding: 0; }
.risk-due-panel, .risk-faculty-chart { min-width: 0; padding: .85rem 1rem; border: 1px solid #cce7f4; border-radius: 1rem; background: rgba(255,255,255,.96); box-shadow: 0 .5rem 1.2rem rgba(20,86,133,.06); }
.risk-due-panel { display: grid; grid-template-columns: minmax(15rem, 1.1fr) minmax(13rem, .9fr); align-items: center; gap: .8rem; }
.risk-panel-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; color: #083da8; font-size: 1rem; font-weight: 800; }.risk-panel-heading span { color: #52708f; font-size: .75rem; font-weight: 600; }
.risk-due-panel .risk-donut { width: min(100%, 23rem); justify-self: center; }.risk-due-panel .risk-due-legend { width: 100%; padding: .35rem .45rem; border: 0; box-shadow: none; }
.risk-faculty-chart { width: 100%; }.risk-faculty-chart .risk-faculty-heading { font-size: 1rem; }
@media (max-width: 1199.98px) { .risk-due-chart { grid-template-columns: 1fr; }.risk-due-panel, .risk-faculty-chart { max-width: 58rem; width: 100%; justify-self: center; } }
@media (max-width: 600px) { .risk-due-panel { grid-template-columns: 1fr; }.risk-due-panel .risk-due-legend { max-width: 23rem; justify-self: center; } }
.risk-faculty-segment { width: auto; flex: 0 0 var(--faculty-width); }
.risk-faculty-segment { flex-shrink: 0 !important; }

.risk-faculty-bar { display: grid; grid-auto-flow: column; }
.risk-faculty-segment { width: auto !important; min-width: 0; }
.risk-faculty-bar { position: relative; display: block; }
.risk-faculty-segment { position: absolute; inset-block: 0; display: grid; place-items: center; overflow: hidden; }
/* Faculty distribution: table cells make each populated group fill its exact percentage. */
.risk-faculty-bar { display: table !important; position: static !important; width: 100%; height: 1.65rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: hidden; background: transparent; }
.risk-faculty-bar tbody, .risk-faculty-bar tr { display: table-row !important; }
.risk-faculty-bar .risk-faculty-segment { position: static !important; display: table-cell !important; height: 1.65rem; padding: 0; vertical-align: middle; text-align: center; white-space: nowrap; }
.risk-faculty-bar .group-1 { background: #20a77e; } .risk-faculty-bar .group-2 { background: #7fc438; } .risk-faculty-bar .group-3 { background: #ffb331; } .risk-faculty-bar .group-4 { background: #ff5136; } .risk-faculty-bar .group-5 { background: #ed0b4f; } .risk-faculty-bar .group-6 { background: #d70032; color: #fff; text-shadow: none; }

/* Override legacy width:auto!important and restore the per-group gradients. */
.risk-faculty-bar .risk-faculty-segment.group-1 { background: linear-gradient(90deg,#009e71,#78dfbc) !important; }
.risk-faculty-bar .risk-faculty-segment.group-2 { background: linear-gradient(90deg,#7cbf31,#c9f18b) !important; }
.risk-faculty-bar .risk-faculty-segment.group-3 { background: linear-gradient(90deg,#ffb12c,#ffe276) !important; }
.risk-faculty-bar .risk-faculty-segment.group-4 { background: linear-gradient(90deg,#ff4c35,#ff9d70) !important; }
.risk-faculty-bar .risk-faculty-segment.group-5 { background: linear-gradient(90deg,#ed0b4f,#f884a9) !important; }
.risk-faculty-bar .risk-faculty-segment.group-6 { background: linear-gradient(90deg,#d70032,#f15877) !important; }

/* The faculty bars are a strict flex track: populated segment bases always total 100%. */
.risk-faculty-bar { display: flex !important; position: static !important; width: 100%; min-width: 0; height: 1.65rem; overflow: hidden; }
.risk-faculty-bar .risk-faculty-segment { position: static !important; display: grid !important; flex-grow: 0 !important; flex-shrink: 0 !important; min-width: 0; height: 1.65rem; place-items: center; overflow: hidden; }

/* SVG bars use fixed coordinates, matching the donut's reliable rendering model. */
.risk-faculty-bar { display: block !important; position: static !important; width: 100%; height: 1.65rem; overflow: hidden; background: transparent; }
.risk-faculty-svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.risk-faculty-svg-text { fill: #123f78; font-size: 15px; font-weight: 900; dominant-baseline: middle; }
.risk-faculty-svg-text.is-light { fill: #fff; }

/* Keep text outside the stretched SVG so Thai and numerals retain their natural proportions. */
.risk-faculty-bar { position: relative !important; }
.risk-faculty-value { position: absolute; top: 50%; z-index: 1; transform: translate(-50%, -50%); color: #123f78; font-size: .72rem; font-weight: 900; line-height: 1; pointer-events: none; }
.risk-faculty-value.is-light { color: #fff; text-shadow: 0 1px 1px rgba(90,0,15,.3); }
.risk-faculty-name { display: block; overflow: visible; padding: .2rem 0; line-height: 1.35; text-overflow: clip; }

/* SVG labels are scaled horizontally to retain normal numeral proportions in the responsive bar. */
.risk-faculty-svg-text { font-family: Arial, Tahoma, sans-serif; font-size: 15px; font-weight: 800; pointer-events: none; }

/* High-contrast SVG label: navy ink plus a white halo remains readable over every gradient. */
.risk-faculty-svg-text { fill: #082f68; stroke: rgba(255,255,255,.9); stroke-width: 1.4px; paint-order: stroke fill; }
.risk-faculty-svg-text.is-light { fill: #082f68; stroke: rgba(255,255,255,.9); }

.risk-faculty-toggle { cursor:pointer; }.risk-faculty-toggle:focus-visible { outline:2px solid #145bd7; outline-offset:3px; border-radius:.35rem; }.risk-department-panel { grid-column:1 / -1; margin:.1rem 0 .45rem 1rem; padding:.55rem .7rem; border-left:3px solid #b8dbee; background:#f7fbfe; }.risk-department-row { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(10rem,2.7fr) auto; gap:.5rem; align-items:center; margin:.28rem 0; font-size:.72rem; color:#23496f; }.risk-department-row svg { width:100%; height:1.2rem; border-radius:.25rem; overflow:hidden; }.risk-department-row b { color:#123f78; text-align:right; }
@media(max-width:700px){.risk-department-row{grid-template-columns:1fr auto}.risk-department-row svg{grid-column:1/-1;grid-row:2}}

/* Mobile SVG is narrower than it is tall; enlarge labels to compensate for horizontal scaling. */
@media (max-width: 600px) { .risk-faculty-svg-text { font-size: 22px; stroke-width: 1px; } .risk-department-row .risk-faculty-svg-text { font-size: 19px; } }

/* With dynamic horizontal scaling active, keep mobile numerals compact. */
@media (max-width: 600px) { .risk-faculty-svg-text { font-size: 17px; } .risk-department-row .risk-faculty-svg-text { font-size: 15px; } }

/* Match mobile segment labels to the total shown at the end of each row. */
@media (max-width: 600px) { .risk-faculty-svg-text { font-size: 12px; } .risk-department-row .risk-faculty-svg-text { font-size: 11px; } }

@media (max-width: 600px) { .risk-faculty-svg-text { font-size: 14px; } .risk-department-row .risk-faculty-svg-text { font-size: 12px; } }

/* Keep faculty totals identical to desktop typography on narrow screens. */
@media (max-width: 600px) { .risk-faculty-row > strong { font-family: inherit; font-size: .8rem; font-weight: 800; } }

.risk-department-host[hidden] { display: none !important; }

/* Keep the level and student-status charts paired on desktop; the due-date note is its own full-width block. */
.risk-secondary-charts { display: grid; gap: .75rem; }
@media (min-width: 1200px) { .risk-secondary-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .risk-secondary-charts > div { min-width: 0; } }

.risk-secondary-section { padding: .75rem; }

/* Payment-risk legend: the same gradient language as the six risk groups. */
.risk-note-panel { padding: .85rem 1rem 1rem; }
.risk-note-title { margin: 0 0 .7rem; color: #083da8; font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 900; }
.risk-note-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.risk-note-item { display: flex; min-width: 0; align-items: center; gap: .55rem; padding: .55rem .6rem; border: 2px solid; border-radius: .55rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.risk-note-item b { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; place-items: center; border-radius: 50%; background: var(--group-accent); box-shadow: 0 .18rem .35rem rgba(0,0,0,.1); color: #fff; font-size: 1.35rem; line-height: 1; }
.risk-note-item span { display: grid; min-width: 0; }.risk-note-item strong { font-size: .95rem; line-height: 1.1; }.risk-note-item small { font-size: .73rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 1199.98px) { .risk-note-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .risk-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .risk-note-item { gap: .42rem; padding: .48rem; } .risk-note-item b { width: 2rem; height: 2rem; flex-basis: 2rem; font-size: 1.15rem; } .risk-note-item strong { font-size: .84rem; } .risk-note-item small { font-size: .65rem; } }
/* Refined risk-note panel, aligned with the dashboard typography and group cards. */
.risk-note-panel { padding: 1rem 1.1rem 1.1rem; }
.risk-note-title { font-family: Leelawadee UI, Noto Sans Thai, Segoe UI, Tahoma, sans-serif; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; }
.risk-note-grid { gap: .45rem; }
.risk-note-item { min-height: 4.7rem; padding: .65rem .7rem; border-radius: .6rem; }
.risk-note-item b { width: 2.55rem; height: 2.55rem; flex-basis: 2.55rem; font-size: 1.5rem; }
.risk-note-item strong { font-family: Leelawadee UI, Noto Sans Thai, Segoe UI, Tahoma, sans-serif; font-size: 1.05rem; font-weight: 900; }
.risk-note-item small { font-family: Leelawadee UI, Noto Sans Thai, Segoe UI, Tahoma, sans-serif; font-size: .8rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 1399.98px) { .risk-note-item { gap: .45rem; padding: .55rem; } .risk-note-item b { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; font-size: 1.3rem; } .risk-note-item strong { font-size: .95rem; } .risk-note-item small { font-size: .71rem; } }

/* Compact the risk legend further on phones without clipping its descriptions. */
@media (max-width: 575.98px) { .risk-note-panel { padding: .8rem .9rem .9rem; } .risk-note-title { margin-bottom: .55rem; font-size: 1.1rem; } .risk-note-grid { gap: .35rem; } .risk-note-item { min-height: 4rem; gap: .35rem; padding: .4rem; } .risk-note-item b { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; font-size: 1.05rem; } .risk-note-item strong { font-size: .78rem; } .risk-note-item small { font-size: .6rem; line-height: 1.12; white-space: normal; } }

/* Center the two-line legend copy vertically within each compact card. */
.risk-note-item span { align-content: center; }
@media (max-width: 575.98px) { .risk-note-item span { transform: translateY(1px); } }

/* Slightly shorter legend cards on phones. */
@media (max-width: 575.98px) { .risk-note-item { min-height: 3.55rem; padding-block: .28rem; } }

/* Student expense check mockup. */
.expense-check-body, .expense-result-body { min-height: 100vh; background: linear-gradient(135deg, #e9f9ff, #f8fcff 55%, #def5ff); }
.expense-check-main { width: min(100% - 2rem, 58rem); margin: 3rem auto; }
.expense-check-hero { position: relative; overflow: hidden; padding: 2.5rem 2rem; border-radius: 1.3rem 1.3rem 0 0; background: linear-gradient(118deg, #062a70 0%, #0757bc 57%, #2fc4e1 100%); color: #fff; box-shadow: 0 1rem 2.4rem rgba(12,75,143,.16); }
.expense-check-hero::after { position: absolute; right: -2rem; bottom: -6rem; width: 19rem; height: 19rem; border: 1.1rem solid rgba(255,207,87,.75); border-radius: 50%; content: ''; transform: rotate(-20deg); }
.expense-check-kicker { display: block; margin-bottom: .3rem; color: #ffe083; font-size: .76rem; font-weight: 900; letter-spacing: .16em; }.expense-check-hero h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; }.expense-check-hero p { position: relative; z-index: 1; margin: .35rem 0 0; font-size: 1.05rem; font-weight: 700; }
.expense-check-card { padding: 2.25rem 1.5rem 2rem; border: 1px solid #b9e7f8; border-top: 0; border-radius: 0 0 1.3rem 1.3rem; background: rgba(255,255,255,.96); box-shadow: 0 1rem 2.4rem rgba(12,75,143,.12); text-align: center; }.expense-check-icon { display: grid; width: 4.5rem; height: 4.5rem; margin: -4.5rem auto .7rem; place-items: center; border: .35rem solid #e3f7ff; border-radius: 50%; background: linear-gradient(145deg, #0b79ce, #044a9f); box-shadow: 0 .55rem 1rem rgba(1,61,143,.2); color: #ffd25d; font-size: 2.35rem; font-weight: 900; }.expense-check-card h2 { margin: 0; color: #073fa7; font-size: 1.55rem; font-weight: 900; }.expense-check-card > p { margin: .35rem 0 1rem; color: #537092; }.expense-check-mockup { width: fit-content; margin: 0 auto 1rem; padding: .28rem .7rem; border-radius: 999px; background: #fff4d7; color: #8a6100; font-size: .76rem; font-weight: 800; }.expense-check-alert { max-width: 31rem; margin: 0 auto 1rem; text-align: left; }.expense-check-form { display: grid; width: min(100%, 31rem); margin: auto; gap: .55rem; text-align: left; }.expense-check-form label { color: #234c80; font-size: .9rem; font-weight: 800; }.expense-check-form input { width: 100%; padding: .75rem .9rem; border: 1px solid #acd8f2; border-radius: .6rem; outline: 0; color: #123f78; font-size: 1.12rem; font-weight: 800; letter-spacing: .08em; }.expense-check-form input:focus { border-color: #1476d5; box-shadow: 0 0 0 .2rem rgba(20,118,213,.16); }.expense-check-form button { padding: .72rem 1rem; border: 0; border-radius: .6rem; background: linear-gradient(135deg, #136bd0, #0649aa); box-shadow: 0 .35rem .65rem rgba(8,74,163,.2); color: #fff; font-weight: 900; }
.expense-result-main { width: min(100% - 2rem, 76rem); margin: 2rem auto 3rem; }.expense-result-hero { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.6rem; border-radius: 1.15rem 1.15rem 0 0; background: linear-gradient(110deg, #072d72, #0d65c4 62%, #2dc8df); color: #fff; }.expense-result-hero span { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 900; }.expense-result-hero small { font-weight: 700; }
.expense-profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(16rem, .85fr); align-items: center; gap: 1.4rem; padding: 1.35rem; border: 1px solid #bfeafa; background: rgba(255,255,255,.95); }.expense-profile-photo { position: relative; display: grid; width: 9.5rem; height: 9.5rem; place-items: center; overflow: hidden; border: .45rem solid #d9f5ff; border-radius: 50%; background: linear-gradient(145deg, #b8efff, #227fc8); color: #0a579e; font-size: 3.3rem; }.expense-profile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.expense-profile-info h1 { margin: 0 0 .5rem; color: #063b9b; font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 900; }.expense-profile-info dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.3rem; margin: 0; }.expense-profile-info dt { color: #527195; font-size: .76rem; font-weight: 800; }.expense-profile-info dd { margin: .05rem 0 0; color: #123f78; font-weight: 800; }.expense-profile-message { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .45rem .7rem; padding: 1rem; border-radius: .8rem; background: linear-gradient(135deg, #edfaff, #d3f4ff); color: #073fa7; }.expense-profile-message span { grid-row: span 2; font-size: 2.6rem; }.expense-profile-message strong { font-size: 1.15rem; line-height: 1.18; }.expense-profile-message small { font-weight: 700; }
.expense-group-panel { padding: 1.25rem; border: 1px solid #bfeafa; border-top: 0; border-radius: 0 0 1.15rem 1.15rem; background: rgba(255,255,255,.96); }.expense-group-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }.expense-group-panel-heading > div { display: flex; align-items: center; gap: .65rem; }.expense-group-panel-heading span { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .55rem; background: #0752ae; color: #fff; font-size: 1.25rem; }.expense-group-panel-heading h2 { margin: 0; color: #073fa7; font-size: clamp(1.25rem, 2.5vw, 1.8rem); font-weight: 900; }.expense-group-panel-heading > small { color: #315aa2; font-weight: 800; }.expense-total-line { margin: .8rem 0; padding: .5rem .75rem; border-radius: .55rem; background: #eff9ff; color: #315a86; text-align: right; font-weight: 700; }.expense-total-line strong { margin-left: .35rem; color: #d4123d; font-size: 1.15rem; }.expense-group-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; }.expense-group-card { display: grid; min-width: 0; justify-items: center; gap: .35rem; padding: .72rem .35rem .6rem; border: 2px solid; border-radius: .75rem; text-align: center; }.expense-group-card b { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 50%; background: var(--group-accent); box-shadow: 0 .22rem .4rem rgba(0,0,0,.12); color: #fff; font-size: 1.6rem; }.expense-group-card > span { min-height: 3rem; color: inherit; font-size: .9rem; font-weight: 900; line-height: 1.2; }.expense-group-card em { display: block; font-style: normal; }.expense-group-card > strong { color: #073b9b; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.1; }.expense-group-card > strong small { display: block; margin-top: .1rem; font-size: .75rem; }.expense-without-due { margin: .85rem 0 0; color: #77601e; font-size: .86rem; text-align: center; }.expense-without-due strong { color: #b04d11; }
@media (max-width: 991.98px) { .expense-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.expense-profile-card { grid-template-columns: auto minmax(0, 1fr); }.expense-profile-message { grid-column: 1 / -1; }.expense-profile-message { justify-self: stretch; } }
@media (max-width: 575.98px) { .expense-check-main, .expense-result-main { width: min(100% - 1rem, 36rem); margin-block: 1rem 2rem; }.expense-check-hero { padding: 2rem 1.2rem; }.expense-check-card { padding-inline: 1rem; }.expense-result-hero { align-items: start; flex-direction: column; padding: 1rem; }.expense-profile-card { grid-template-columns: 1fr; justify-items: center; padding: 1rem; text-align: center; }.expense-profile-photo { width: 7rem; height: 7rem; }.expense-profile-info dl { grid-template-columns: 1fr; text-align: left; }.expense-profile-message { width: 100%; text-align: left; }.expense-group-panel { padding: .9rem; }.expense-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }.expense-group-card { padding-block: .55rem; }.expense-group-card > span { min-height: auto; }.expense-group-panel-heading > small { font-size: .72rem; } }
/* Match the crisp two-pixel group-card borders used by the dashboard cards. */
.expense-group-card { border-width: 2px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 1px rgba(255,255,255,.42); }
.expense-group-card.group-1 { border-color: #62d99b !important; }
.expense-group-card.group-2 { border-color: #b0e97c !important; }
.expense-group-card.group-3 { border-color: #ffe26a !important; }
.expense-group-card.group-4 { border-color: #ffac60 !important; }
.expense-group-card.group-5 { border-color: #ff8299 !important; }
.expense-group-card.group-6 { border-color: #f54c60 !important; }
/* Keep the student profile typography identical to student-finance-detail.php. */
.expense-profile-card { gap: 1.2rem; padding: 1.25rem; }
.expense-profile-photo { width: 8rem; height: 8rem; border-width: .4rem; font-size: 2.2rem; }
.expense-profile-info h1 { margin: 0 0 .2rem; font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 800; }
.expense-profile-info dl { gap: .65rem 1.5rem; }
.expense-profile-info dt { font-size: .8rem; font-weight: 700; }
.expense-profile-info dd { margin: .08rem 0 0; font-weight: 700; }
.expense-profile-message strong { font-size: 1rem; font-weight: 800; }.expense-profile-message small { font-size: .8rem; font-weight: 700; }
@media (max-width: 575.98px) { .expense-profile-photo { width: 6.75rem; height: 6.75rem; } .expense-profile-info dl { grid-template-columns: 1fr; text-align: left; } }
/* A larger portrait is the visual anchor of the expense-check profile. */
@media (min-width: 576px) { .expense-profile-photo { width: 10rem; height: 10rem; } }
/* Monetary totals use the same group colour and type scale as dashboard group totals. */
.expense-group-card > strong { color: inherit; font-size: 2.15rem; font-weight: 800; line-height: 1.05; }
.expense-group-card > strong small { color: inherit; font-size: .82rem; font-weight: 800; }
@media (max-width: 767.98px) { .expense-group-card > strong { font-size: 1.65rem; } .expense-group-card > strong small { font-size: .72rem; } }
/* Use the same horizontal canvas and six-card scale as student-finance-dashboard.php. */
@media (min-width: 576px) {
    .expense-result-main { width: calc(100% - 3rem); max-width: none; }
    .expense-group-card { min-height: 11.7rem; padding: .65rem .5rem .75rem; border-radius: .8rem; gap: .35rem; }
    .expense-group-card b { width: 3.05rem; height: 3.05rem; font-size: 1.85rem; }
    .expense-group-card > span { display: flex; min-height: 3.9rem; flex-direction: column; justify-content: center; font-size: 1.12rem; font-weight: 800; line-height: 1.28; }
}
@media (max-width: 767.98px) {
    .expense-group-card { min-height: 9.8rem; }
    .expense-group-card b { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
    .expense-group-card > span { min-height: 3rem; font-size: .92rem; }
}
.expense-overview-section { margin-bottom: 0; }
.expense-overview-money { white-space: nowrap; }
@media (max-width: 575.98px) { .expense-overview-money { font-size: clamp(1.45rem, 8vw, 2.1rem) !important; } }
/* Expense-category donut: tuition uses coral; other expenses use violet. */
.expense-overview-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(20rem, .9fr); align-items: stretch; gap: .75rem; }
.expense-overview-section, .expense-category-panel { min-width: 0; }
.expense-category-panel .care-section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }.expense-category-panel .care-section-title small { margin-left: auto; color: #39729b; font-size: .8rem; font-weight: 500; }.expense-category-icon { float: none !important; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .45rem; background: #0752ae; color: #fff !important; font-size: 1rem !important; }
.expense-category-chart { display: grid; grid-template-columns: minmax(8.8rem, 10.5rem) minmax(0, 1fr); align-items: center; justify-content: center; gap: .8rem; min-height: 10.5rem; }.expense-donut { position: relative; display: grid; width: 100%; max-width: 10.5rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(#ff5969 0 var(--tuition-percent), #8e63e8 var(--tuition-percent) 100%); box-shadow: 0 .45rem 1rem rgba(51, 63, 138, .13); }.expense-donut::after { position: absolute; width: 53%; height: 53%; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #eff4fb; content: ''; }.expense-donut > div { position: relative; z-index: 1; display: grid; justify-items: center; color: #083c9d; line-height: 1.03; text-align: center; }.expense-donut strong { font-size: clamp(1.15rem, 2.2vw, 1.65rem); font-weight: 900; }.expense-donut span { font-size: .9rem; font-weight: 800; }.expense-category-legend { display: grid; gap: .9rem; }.expense-category-item { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; gap: .55rem; }.expense-category-item i { width: 1.75rem; height: 1.75rem; border-radius: 50%; box-shadow: 0 .18rem .35rem rgba(28,48,110,.13); }.expense-category-item.tuition i { background: #ff5969; }.expense-category-item.other i { background: #8e63e8; }.expense-category-item span { display: grid; color: #23496f; font-size: .88rem; font-weight: 800; line-height: 1.15; }.expense-category-item strong { color: #083c9d; font-size: 1.25rem; font-weight: 900; }.expense-category-item small { color: #58769a; font-size: .73rem; font-weight: 700; }
@media (max-width: 1199.98px) { .expense-overview-layout { grid-template-columns: 1fr; }.expense-category-panel { width: min(100%, 34rem); justify-self: center; }.expense-category-chart { grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr); } }
@media (max-width: 575.98px) { .expense-category-panel { width: 100%; }.expense-category-chart { grid-template-columns: minmax(8rem, 9.5rem) minmax(0, 1fr); gap: .55rem; }.expense-category-item strong { font-size: 1.08rem; }.expense-category-item span { font-size: .8rem; } }
/* Reuse Payment Risk SVG donut mechanics for the expense-category chart. */
.expense-category-chart { grid-template-columns: minmax(11rem, 12.5rem) minmax(0, 1fr); }
.risk-donut.expense-svg-donut { width: min(100%, 12.5rem); aspect-ratio: 10 / 9; justify-self: center; }
.risk-donut.expense-svg-donut > div:not(.risk-donut-tooltip) { width: 35%; }
@media (max-width: 575.98px) { .expense-category-chart { grid-template-columns: minmax(9.5rem, 11rem) minmax(0, 1fr); } .risk-donut.expense-svg-donut { width: min(100%, 11rem); } }
/* Keep long monetary totals inside the category-donut centre without obscuring slices. */
.risk-donut.expense-svg-donut > div:not(.risk-donut-tooltip) { width: 40%; }
.risk-donut.expense-svg-donut strong { font-size: clamp(.68rem, 1.55vw, 1.05rem); letter-spacing: -.045em; }
/* Expense category donut: prioritise readable values over the centre caption. */
.expense-category-chart { grid-template-columns: minmax(13.5rem, 15.5rem) minmax(0, 1fr); }
.risk-donut.expense-svg-donut { width: min(100%, 15.5rem); }
.risk-donut.expense-svg-donut > .expense-donut-total { width: 38%; }
.risk-donut.expense-svg-donut .expense-donut-total strong { font-size: clamp(.72rem, 1.35vw, .94rem); line-height: 1.05; letter-spacing: -.035em; }
.risk-donut.expense-svg-donut .expense-donut-total span { font-size: clamp(.58rem, 1vw, .68rem); line-height: 1.05; }
.risk-donut.expense-svg-donut .risk-donut-inner-label,
.risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 14px; }
@media (max-width: 575.98px) {
  .expense-category-chart { grid-template-columns: minmax(11.5rem, 13rem) minmax(0, 1fr); }
  .risk-donut.expense-svg-donut { width: min(100%, 13rem); }
}
/* Expense category donut: size and labels for the wider chart. */
.expense-category-chart { grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr); }
.risk-donut.expense-svg-donut { width: min(100%, 17rem); }
.risk-donut.expense-svg-donut .risk-donut-inner-label { font-size: 16px; stroke-width: 3px; }
.risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 15px; stroke-width: 3.5px; }
@media (max-width: 575.98px) {
  .expense-category-chart { grid-template-columns: minmax(12.5rem, 14rem) minmax(0, 1fr); }
  .risk-donut.expense-svg-donut { width: min(100%, 14rem); }
  .risk-donut.expense-svg-donut .risk-donut-inner-label { font-size: 14px; }
  .risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 13px; }
}
/* The expense-category donut is intentionally static. */
.risk-donut.expense-svg-donut .expense-donut-piece { pointer-events: none; }
.risk-donut.expense-svg-donut .risk-donut-inner-label,
.risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 16px; font-weight: 900; }
@media (max-width: 575.98px) {
  .risk-donut.expense-svg-donut .risk-donut-inner-label,
  .risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 14px; }
}
/* Expense donut centre uses a light background for legible totals. */
.risk-donut.expense-svg-donut .risk-donut-center-ring { fill: #d9edf8; }
.risk-donut.expense-svg-donut .risk-donut-center { fill: #fff; }
.risk-donut.expense-svg-donut .expense-donut-total strong,
.risk-donut.expense-svg-donut .expense-donut-total span { color: #123f78; }
.risk-donut.expense-svg-donut .expense-donut-total strong { font-size: clamp(.82rem, 1.55vw, 1.04rem); }
.risk-donut.expense-svg-donut .expense-donut-total span { font-size: clamp(.64rem, 1.15vw, .76rem); }
.risk-donut.expense-svg-donut .risk-donut-inner-label,
.risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 17px; }
@media (max-width: 575.98px) {
  .risk-donut.expense-svg-donut .expense-donut-total strong { font-size: .9rem; }
  .risk-donut.expense-svg-donut .expense-donut-total span { font-size: .68rem; }
  .risk-donut.expense-svg-donut .risk-donut-inner-label,
  .risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 15px; }
}
/* Keep the expense donut centre visually flat. */
.risk-donut.expense-svg-donut .risk-donut-center-ring,
.risk-donut.expense-svg-donut .risk-donut-center { fill: #fff; }
/* Increase the expense donut values without overflowing the centre. */
.risk-donut.expense-svg-donut .expense-donut-total strong { font-size: clamp(.95rem, 1.7vw, 1.18rem); }
.risk-donut.expense-svg-donut .expense-donut-total span { font-size: clamp(.72rem, 1.25vw, .84rem); }
.risk-donut.expense-svg-donut .risk-donut-inner-label,
.risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 21px; }
@media (max-width: 575.98px) {
  .risk-donut.expense-svg-donut .expense-donut-total strong { font-size: 1rem; }
  .risk-donut.expense-svg-donut .expense-donut-total span { font-size: .74rem; }
  .risk-donut.expense-svg-donut .risk-donut-inner-label,
  .risk-donut.expense-svg-donut .risk-donut-outer-label { font-size: 17px; }
}
/* Keep overview panels compact instead of stretching the shorter panel. */
.expense-overview-layout { align-items: start; }
.risk-donut.expense-svg-donut { aspect-ratio: 5 / 4; }
/* Restore the expense donut height while keeping adjacent panels compact. */
.risk-donut.expense-svg-donut { aspect-ratio: 10 / 9; }
/* Reduce surrounding panel whitespace without changing donut dimensions. */
.expense-overview-section,
.expense-category-panel { padding-top: .65rem; padding-bottom: .65rem; }
.expense-category-panel .care-section-title { margin-bottom: .4rem; }
/* Further compact the expense panels while retaining the donut size. */
.expense-overview-section,
.expense-category-panel { padding-top: .4rem; padding-bottom: .4rem; }
.expense-category-panel .care-section-title { margin-bottom: .2rem; }
/* Near-edge compact layout for the expense overview panels. */
.expense-overview-section,
.expense-category-panel { padding-top: .18rem; padding-bottom: .18rem; }
.expense-category-panel .care-section-title { margin-bottom: 0; }
/* Match the two overview panels in each desktop row. */
.expense-overview-layout { align-items: stretch; }
/* Give both overview headings comfortable space from the top edge. */
.expense-overview-section,
.expense-category-panel { padding-top: .65rem; }
/* Separate the due-date grouping from the student profile card. */
.expense-group-panel { margin-top: 1rem; border-top: 1px solid #bfeafa; border-radius: 1.15rem; }
.expense-group-panel-heading span svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
/* Restore breathing room around the due-date panel heading. */
.expense-group-panel { padding: 1.5rem 1.25rem 1.25rem; }
.expense-group-panel-heading { margin-bottom: .85rem; }
/* SVG heading icons for the expense overview and category panels. */
.expense-overview-icon { display: inline-grid; width: 2rem; height: 2rem; margin-right: .5rem; place-items: center; vertical-align: middle; border-radius: .45rem; background: #0752ae; color: #fff; }
.expense-overview-icon svg,
.expense-category-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
/* Pending expense table on the student expense result page. */
.expense-pending-section { padding: 1rem; }
.expense-pending-table { min-width: 48rem; }
.expense-pending-table th:first-child,
.expense-pending-table td:first-child { width: 4.5rem; text-align: center; }
.expense-pending-table th:nth-child(3) { min-width: 10rem; }
.expense-pending-amount { color: #e6113a; font-weight: 900; white-space: nowrap; }
.expense-pending-empty { padding: .75rem 1rem; border-radius: .55rem; background: #eff9ff; color: #527195; text-align: center; }
@media (max-width: 575.98px) { .expense-pending-section { padding: .8rem; } }
/* Wallet icon for the pending-expense heading. */
.expense-pending-icon { display: inline-grid; width: 2rem; height: 2rem; margin-right: .5rem; place-items: center; vertical-align: middle; border-radius: .45rem; background: #0752ae; color: #fff; }
.expense-pending-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
/* Balanced layout for phones held horizontally. */
@media (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) {
  .expense-overview-section .row { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .expense-overview-section .col-md-4 { width: 33.333333%; flex: 0 0 33.333333%; }
  .expense-overview-section .care-summary-card { min-height: 7.1rem; padding: .65rem .35rem; }
  .expense-overview-section .care-summary-icon { top: .45rem; left: .45rem; width: 2.3rem; height: 2.3rem; }
  .expense-overview-section .care-summary-card div { font-size: 1rem; }
  .expense-overview-section .expense-overview-money { font-size: clamp(1.18rem, 3vw, 1.55rem) !important; }
  .expense-overview-section .care-summary-card small { font-size: .72rem; }
  .expense-category-panel { width: 100%; }
  .expense-category-chart { grid-template-columns: minmax(12rem, 13rem) minmax(0, 1fr); min-height: 0; }
  .risk-donut.expense-svg-donut { width: min(100%, 13rem); }
  .expense-category-item strong { font-size: 1.1rem; }
}
/* On tablet and mobile, keep both overview blocks the same width. */
@media (max-width: 1199.98px) {
  .expense-category-panel { width: 100%; justify-self: stretch; }
}
/* Preserve a readable donut legend on narrow portrait phones. */
@media (max-width: 575.98px) and (orientation: portrait) {
  .expense-category-chart { grid-template-columns: minmax(9rem, 10rem) minmax(0, 1fr); gap: .45rem; }
  .risk-donut.expense-svg-donut { width: min(100%, 10rem); }
  .expense-category-legend { gap: .7rem; }
  .expense-category-item { grid-template-columns: 1.45rem minmax(0, 1fr); gap: .4rem; }
  .expense-category-item i { width: 1.4rem; height: 1.4rem; }
  .expense-category-item span { font-size: .76rem; }
  .expense-category-item strong { font-size: clamp(.9rem, 4.2vw, 1.05rem); white-space: nowrap; }
  .expense-category-item small { font-size: .68rem; }
}
/* Cover landscape phones whose CSS width exceeds the usual phone breakpoint. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 575px) {
  .expense-overview-section .row { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .expense-overview-section .col-md-4 { width: 33.333333%; flex: 0 0 33.333333%; }
  .expense-overview-section .care-summary-card { min-height: 7.1rem; padding: .65rem .35rem; }
  .expense-overview-section .care-summary-icon { top: .45rem; left: .45rem; width: 2.3rem; height: 2.3rem; }
  .expense-overview-section .care-summary-card div { font-size: 1rem; }
  .expense-overview-section .expense-overview-money { font-size: clamp(1.18rem, 3vw, 1.55rem) !important; }
  .expense-overview-section .care-summary-card small { font-size: .72rem; }
  .expense-category-panel { width: 100%; justify-self: stretch; }
  .expense-category-chart { grid-template-columns: minmax(12rem, 13rem) minmax(0, 1fr); min-height: 0; }
  .risk-donut.expense-svg-donut { width: min(100%, 13rem); }
  .expense-category-item strong { font-size: 1.1rem; }
}
/* Fluid percentage-based sizing for every expense-result viewport. */
.expense-category-chart { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; gap: clamp(.45rem, 2vw, .8rem); }
.risk-donut.expense-svg-donut { width: min(100%, 17rem); }
.expense-category-legend,
.expense-category-item span { min-width: 0; }
.expense-category-item strong { font-size: clamp(.9rem, 3.3vw, 1.25rem); }
@media (max-width: 991.98px) {
  .expense-result-body .app-navbar .container-fluid { display: flex; flex-wrap: nowrap; gap: .5rem; min-width: 0; }
  .expense-result-body .app-navbar .navbar-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .expense-result-body .app-navbar .btn { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Keep the overview-card border spacing balanced in every orientation. */
.expense-overview-section { padding-top: .65rem; padding-bottom: .65rem; }
.expense-overview-section .row { --bs-gutter-y: .75rem; }
/* Clarify that automatic penalties are excluded from the overview totals. */
.expense-overview-note { margin-top: .7rem; color: #667d94; font-size: .78rem; font-weight: 700; line-height: 1.35; text-align: center; }
/* Align the overview note with the first summary card. */
.expense-overview-note { text-align: left; }
/* Real touch devices reserve their own line for summary icons. */
@media (pointer: coarse) and (max-width: 991.98px) {
  .expense-overview-section .care-summary-card { display: flex; min-width: 0; flex-direction: column; align-items: center; }
  .expense-overview-section .care-summary-icon { position: static; display: block; width: 2rem; height: 2rem; margin: 0 auto .15rem; flex: 0 0 auto; }
  .expense-overview-section .expense-overview-money { max-width: 100%; font-size: clamp(1.18rem, 6.5vw, 1.8rem) !important; line-height: 1.12; }
}
/* Equal-height, vertically centred summary cards on touch devices. */
@media (pointer: coarse) and (max-width: 991.98px) {
  .expense-overview-section .row > [class*='col-'] { display: flex; }
  .expense-overview-section .care-summary-card { width: 100%; min-height: 9.65rem; justify-content: center; gap: .12rem; }
  .expense-overview-section .care-total:not(:has(small))::after { display: block; min-height: 1.2rem; content: ''; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 575px) {
  .expense-overview-section .care-summary-card { min-height: 8.1rem; }
}
/* Keep touch-device summary icons at the familiar upper-left position. */
@media (pointer: coarse) and (max-width: 991.98px) {
  .expense-overview-section .care-summary-icon { position: absolute; top: .55rem; left: .65rem; display: block; width: 1.85rem; height: 1.85rem; margin: 0; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 575px) {
  .expense-overview-section .care-summary-icon { top: .4rem; left: .45rem; width: 1.55rem; height: 1.55rem; }
}
/* Slightly larger upper-left summary icons on touch devices. */
@media (pointer: coarse) and (max-width: 991.98px) {
  .expense-overview-section .care-summary-icon { width: 2.1rem; height: 2.1rem; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 575px) {
  .expense-overview-section .care-summary-icon { width: 1.75rem; height: 1.75rem; }
}
/* Keep six-figure mobile summary totals safely inside their cards. */
@media (pointer: coarse) and (max-width: 991.98px) {
  .expense-overview-section .expense-overview-money { font-size: clamp(1.12rem, 5.7vw, 1.65rem) !important; letter-spacing: -.025em; }
}