:root{font-family:"Nirmala UI","Vrinda",system-ui,sans-serif;color:#25344a;background:#f4f6fa;font-size:15px;--blue:#275dd7;--muted:#748196;--line:#e8edf4}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select{cursor:pointer}button{border:0;background:none;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #98b8ff;outline-offset:3px}input,select{border:1px solid #dce3ee;border-radius:9px;background:white;padding:10px 12px;color:inherit;max-width:100%}input:focus,select:focus{outline:2px solid #b5ccff}h1,h2,h3,p{margin:0}h1{font-size:27px;line-height:1.6}h2{font-size:19px}h3{font-size:16px}small,.muted{color:var(--muted)}.sidebar{width:236px;background:white;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);padding:30px 19px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 29px}.brand strong{font-size:24px;color:#173777}.mark{width:42px;height:42px;border-radius:13px;background:var(--blue);color:white;display:grid;place-items:center;font-size:23px}.brand small{display:block;font-size:11px;letter-spacing:1px}.nav-label{font-size:11px;color:#9aa5b5;padding:15px}.nav{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 15px;border-radius:9px;margin:4px 0;color:#657187}.nav.active{background:#edf3ff;color:var(--blue);font-weight:700}.icon{width:23px;display:inline-grid;place-items:center;font-size:19px}.sidebar-bottom{margin-top:auto;background:#f6f8fc;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:12px;line-height:1.8}.shell{margin-left:236px}.topbar{height:87px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:18px}.center-title{font-weight:700}.center-title small{font-weight:400;display:block;margin-top:3px}.search{width:280px;background:#f6f8fb}.profile{display:flex;gap:10px;align-items:center}.avatar{background:#e8efff;color:#2e5aba;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;font-weight:700}.profile small{display:block}.main{padding:25px 34px 35px;max-width:1550px;margin:auto}.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#616e83;margin-bottom:23px}.demo-label{display:inline-flex;align-items:center;gap:8px}.dot{width:7px;height:7px;border-radius:50%;background:#e7a62e}.demo-bar select{font-size:12px;padding:7px 10px}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}.heading p{color:#8390a2;margin-top:5px}.date{font-size:13px;border:1px solid var(--line);border-radius:8px;background:white;padding:10px 15px}.btn{padding:11px 18px;border-radius:8px;background:var(--blue);color:white;font-weight:600;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn.secondary{background:white;border:1px solid #dce4f0;color:#435775}.btn.small{font-size:12px;padding:7px 12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:27px}.stat{background:white;border:1px solid var(--line);border-radius:12px;padding:21px}.stat-top{display:flex;justify-content:space-between;align-items:center;color:#77849a;font-size:13px}.stat-icon{padding:7px;border-radius:9px;background:#edf3ff;color:#3e6acb;font-size:19px}.stat:nth-child(2) .stat-icon{background:#f0eefe;color:#8b6acc}.stat:nth-child(3) .stat-icon{background:#eaf8f1;color:#37a473}.stat:nth-child(4) .stat-icon{background:#fff4e8;color:#db9a36}.stat-value{font:700 30px "Nirmala UI",sans-serif;margin:8px 0 5px;color:#24344c}.stat small{font-size:11px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:15px}.text-btn{color:var(--blue);font-size:12px}.classes{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-bottom:26px}.class-card{background:white;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:left;transition:transform .15s,border-color .15s}.class-card:hover{transform:translateY(-3px);border-color:#96b6fb}.class-badge{width:42px;height:42px;display:grid;place-items:center;color:#3669cf;background:#edf3ff;border-radius:10px;font:700 17px system-ui;margin-bottom:15px}.class-card:nth-child(2) .class-badge{color:#8b6acc;background:#f3edff}.class-card:nth-child(3) .class-badge{color:#349b91;background:#e9f7f4}.class-card:nth-child(4) .class-badge{color:#d89138;background:#fff5e6}.class-card:nth-child(5) .class-badge{color:#c67094;background:#fff0f5}.class-count{font-size:24px;font-weight:700;margin:10px 0 2px}.class-count small{font-size:12px;font-weight:400}.class-foot{display:flex;justify-content:space-between;font-size:11px;color:#8d99a9}.grid{display:grid;grid-template-columns:1.65fr 1fr;gap:20px;margin-bottom:22px}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:22px;min-width:0}.quick{display:flex;gap:12px;margin-top:19px}.quick button{flex:1;padding:17px 10px;background:#f8faff;border:1px solid #e2eafa;border-radius:9px;font-size:13px;color:#4166a8}.quick .icon{display:block;margin:auto auto 7px;font-size:23px}.attendance-summary{display:flex;align-items:center;gap:23px;margin-top:20px}.ring{width:105px;height:105px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.ring>div{width:81px;height:81px;background:white;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:21px;font-weight:700}.ring small{font-size:10px;font-weight:400}.legend{font-size:12px;line-height:2.2;flex:1}.legend div{display:flex;justify-content:space-between;gap:18px}.legend i{display:inline-block;width:7px;height:7px;background:#3ca68c;border-radius:50%;margin-right:6px}.legend .absent{background:#eca65e}.legend .pending{background:#dce3ed}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px;text-align:left;white-space:nowrap}th{font-weight:400;color:#8894a6;font-size:12px;padding:13px 10px;background:#fafbfd}td{padding:14px 10px;border-bottom:1px solid #f0f3f8}tr:last-child td{border-bottom:0}.person{display:flex;align-items:center;gap:9px}.person .avatar{width:31px;height:31px;font-size:12px;background:#f0f3fa}.person small{display:block;font-size:10px;margin-top:2px}.pill{font-size:11px;padding:4px 9px;border-radius:5px;background:#eaf7f1;color:#398a6d}.pill.amber{background:#fff4e7;color:#b48237}.admission-item{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #f0f3f8}.admission-item:last-child{border:0}.admission-item .info{flex:1;font-size:13px}.admission-item small{display:block;font-size:11px;margin-top:4px}.footer{display:flex;justify-content:space-between;color:#98a2b2;font-size:11px;margin-top:30px}.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.filters input{flex:1;min-width:180px}.empty{text-align:center;padding:35px;color:#7d8a9e}.note{padding:13px 16px;background:#f0f5ff;color:#62789d;font-size:13px;border-radius:9px;margin-bottom:18px;line-height:1.8}dialog{border:0;border-radius:15px;padding:27px;width:490px;max-width:94vw;box-shadow:0 25px 100px #172b4e33;color:#25344a}dialog::backdrop{background:#1c2e4e66;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-head button{font-size:24px}form label{display:block;font-size:13px;margin:14px 0}form label input,form label select{display:block;width:100%;margin-top:7px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.error{color:#b73535;font-size:13px}.receipt{text-align:center;line-height:2}.receipt hr{border:0;border-top:1px dashed #cad4e6;margin:18px 0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#243f64;color:white;padding:12px 23px;border-radius:9px;z-index:50;display:none}.menu{display:none}.att-row select{padding:6px}.settings-list p{padding:12px 0;line-height:1.9;border-bottom:1px solid var(--line)}@media(min-width:1600px){.main{padding-top:35px}.stat{padding:27px}.class-card{padding:24px}}@media(max-width:1150px){.sidebar{width:205px}.shell{margin-left:205px}.main{padding:22px}.topbar{padding:0 22px}.search{width:210px}.stats{gap:10px}.stat{padding:15px}.stat-value{font-size:25px}.classes{gap:9px}.class-card{padding:14px}.quick{gap:6px}.profile .profile-name{display:none}}@media(max-width:850px){.sidebar{display:none}.shell{margin-left:0}.menu{display:block;font-size:24px}.sidebar.open{display:flex;box-shadow:0 0 0 100vw #1b2d4e55}.topbar{height:78px}.search{width:180px}.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.classes{grid-template-columns:repeat(5,minmax(110px,1fr));overflow:auto;padding-bottom:8px}.demo-bar{flex-wrap:wrap}.heading{align-items:flex-start}.date{font-size:11px;white-space:nowrap}.footer{gap:15px}}@media(max-width:520px){.main{padding:18px 14px}.topbar{padding:0 14px;gap:10px}.topbar .search{display:none}.center-title{font-size:14px}.center-title small{font-size:10px}.profile .avatar{width:32px;height:32px}h1{font-size:23px}.heading p{font-size:12px}.date{display:none}.panel{padding:17px}.stat-value{font-size:26px}.stat-top{font-size:12px}.quick button{font-size:11px;padding:15px 4px}.form-row{grid-template-columns:1fr;gap:0}.footer{flex-direction:column}.demo-bar select{width:100%}}@media print{body>*{display:none!important}dialog[open]{display:block!important;position:static;width:100%;max-width:none;box-shadow:none}dialog button{display:none!important}dialog::backdrop{display:none}}

/* Locally bundled, unmodified Noto Sans Bengali variable font. SIL OFL 1.1. */
@font-face {
  font-family: 'Pathshala Bengali Local';
  src: url('fonts/NotoSansBengali.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
}
:root {
  --font-ui: 'Noto Sans Bengali', 'Pathshala Bengali Local', 'Nirmala UI', 'Vrinda', sans-serif;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  font-synthesis: none;
  --muted: #68778d;
}
button, input, select { font-family: var(--font-ui); line-height: 1.65; }
h1, h2, h3 { font-weight: 650; line-height: 1.55; }
h1 { font-size: 28px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
strong { font-weight: 650; }
.brand strong { font-size: 25px; font-weight: 750; }
.brand small { font: 500 10px/1.5 system-ui, sans-serif; letter-spacing: 1.3px; margin-top: 4px; }
.mark { font-weight: 650; line-height: 1; }
.nav { font-size: 14px; line-height: 1.7; gap: 10px; padding: 12px 13px; }
.nav.active { font-weight: 650; }
.nav-label { font-size: 12px; color: #7a8799; }
.icon, .stat-icon { font-family: 'Segoe UI Symbol', system-ui, sans-serif; }
.center-title { font-size: 16px; font-weight: 650; }
.center-title small, .profile small { font-size: 11px; line-height: 1.65; }
.profile-name { font-size: 13px; font-weight: 500; }
.heading p { font-size: 14px; color: #6d7d92; line-height: 1.8; }
.stat-top { font-size: 13px; line-height: 1.7; color: #66758b; gap: 8px; }
.stat-icon { flex-shrink: 0; }
.stat-value {
  font-family: var(--font-ui);
  font-size: clamp(25px, 2.15vw, 32px);
  font-weight: 650;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin: 12px 0 6px;
}
.stat small { font-size: 11px; line-height: 1.8; display: block; }
.class-card h3 { font-size: 16px; font-weight: 600; }
.class-count { font-size: 27px; font-weight: 650; line-height: 1.5; font-variant-numeric: tabular-nums; }
.class-count small { font-size: 12px; }
.class-foot { font-size: 12px; line-height: 1.7; color: #748298; gap: 6px; }
.btn { font-size: 14px; font-weight: 600; padding: 10px 18px; }
.btn.small, .text-btn { font-size: 12px; font-weight: 500; line-height: 1.7; }
.quick button { font-size: 14px; font-weight: 500; line-height: 1.8; }
.ring > div { font-size: 23px; font-weight: 650; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ring small { font-size: 10px; line-height: 1.6; }
.legend { font-size: 13px; line-height: 2; }
table { font-size: 14px; line-height: 1.7; font-variant-numeric: tabular-nums; }
th { font-size: 12px; font-weight: 500; color: #708097; }
td { padding-top: 15px; padding-bottom: 15px; }
.person small { font: 400 11px/1.6 system-ui, sans-serif; color: #77859a; }
.pill { font-size: 11px; line-height: 1.8; font-weight: 500; display: inline-block; }
.admission-item .info { font-size: 14px; font-weight: 500; }
.admission-item small { font-size: 12px; font-weight: 400; line-height: 1.7; }
form label { font-size: 14px; font-weight: 500; line-height: 1.7; }
form label input, form label select { font-weight: 400; }
input, select { font-size: 14px; padding: 11px 12px; }
.note, .settings-list p { line-height: 1.9; }
.demo-bar, .footer { line-height: 1.8; }
.footer { font-size: 12px; color: #7c899c; }
@media (max-width: 1150px) {
  .nav { font-size: 13px; padding-left: 9px; padding-right: 9px; gap: 8px; }
  .stat-top { font-size: 12px; }
  .class-card h3 { font-size: 14px; }
  .class-foot { font-size: 11px; }
}
@media (max-width: 520px) {
  h1 { font-size: 24px; }
  h2 { font-size: 18px; }
  .center-title { font-size: 14px; }
  .center-title small { font-size: 10px; }
  .heading p { font-size: 13px; }
  .stat-value { font-size: clamp(23px, 6.2vw, 28px); }
  .stat-top { font-size: 12px; gap: 4px; }
  .stat-icon { font-size: 16px; padding: 5px; }
  .stat small { font-size: 10px; }
  .quick button { font-size: 12px; }
  .legend { font-size: 12px; }
  .demo-bar, .demo-bar select { font-size: 11px; }
  .footer { font-size: 11px; }
}


/* Dashboard mobile-first refinement — 2026-10-24.
   Preserves app logic, data, card links, receipts, and the desktop layout. */
html { min-width: 0; }
body, #app, .shell, .main { min-width: 0; }
button { touch-action: manipulation; }
.nav, .class-card, .quick button, .btn { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn:hover, .quick button:hover { box-shadow: 0 5px 14px #275dd71a; }
.btn:active, .quick button:active, .class-card:active { transform: scale(.985); }
.page-dashboard .stat, .page-dashboard .panel, .page-dashboard .class-card { box-shadow: 0 2px 12px #2b43630a; }
.page-dashboard .stat { min-width: 0; }
.page-dashboard .stat-top { min-width: 0; }
.page-dashboard .stat-value { overflow-wrap: anywhere; }
.page-dashboard .panel { min-width: 0; }
.page-dashboard .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
.page-dashboard .admission-item .info { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 850px) {
  .sidebar { width: min(84vw, 300px); max-width: 100%; overflow-y: auto; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .sidebar.open { display: flex; }
  .topbar { min-width: 0; }
  .center-title { min-width: 0; overflow-wrap: anywhere; }
  .main { padding-left: 20px; padding-right: 20px; }
  .page-dashboard .classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 12px; }
  .page-dashboard .class-card { min-width: 0; padding: 16px; }
  .page-dashboard .stats { gap: 13px; }
  .page-dashboard .stat { padding: 17px; }
  .page-dashboard .grid { gap: 16px; }
  .page-dashboard .quick button { min-height: 84px; }
  .page-dashboard .table-wrap { overflow-x: auto; }
}
@media (max-width: 600px) {
  .topbar {
    height: auto; min-height: 120px;
    display: grid; grid-template-columns: 42px minmax(0, 1fr) 36px;
    grid-template-rows: auto auto; gap: 10px 12px;
    padding: 12px 16px; align-content: center;
  }
  .topbar .menu { grid-column: 1; grid-row: 1; width: 42px; min-height: 42px; border-radius: 10px; background: #f0f5ff; color: var(--blue); }
  .topbar .center-title { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 1.4; }
  .topbar .center-title small { font-size: 10px; overflow-wrap: anywhere; }
  .topbar .profile { grid-column: 3; grid-row: 1; }
  .topbar .profile .avatar { width: 35px; height: 35px; }
  .topbar .search { display: block; width: 100%; max-width: none; grid-column: 1 / -1; grid-row: 2; min-height: 43px; }
  .main { padding: 17px 15px 27px; }
  .demo-bar { margin-bottom: 15px; gap: 9px; }
  .demo-bar select { width: 100%; min-height: 42px; }
  .heading { margin-bottom: 16px; }
  .heading h1 { font-size: clamp(20px,5vw,24px); line-height: 1.4; }
  .heading p { line-height: 1.65; }
  .page-dashboard .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
  .page-dashboard .stat { padding: 14px 12px; border-radius: 12px; }
  .page-dashboard .stat-top { align-items: flex-start; font-size: 11px; line-height: 1.55; min-height: 39px; }
  .page-dashboard .stat-icon { padding: 4px; font-size: 15px; }
  .page-dashboard .stat-value { font-size: clamp(17px,5.1vw,27px); line-height: 1.35; margin: 10px 0 6px; }
  .page-dashboard .stat small { font-size: 10px; line-height: 1.55; }
  .page-dashboard .section-head { align-items: flex-start; gap: 9px; }
  .page-dashboard .section-head h2 { font-size: 16px; }
  .page-dashboard .section-head .text-btn { font-size: 11px; flex-shrink: 0; white-space: nowrap; min-height: 30px; }
  .page-dashboard .classes { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
  .page-dashboard .class-card { min-width: 0; padding: 13px; }
  .page-dashboard .class-badge { margin-bottom: 9px; width: 37px; height: 37px; }
  .page-dashboard .class-card h3 { font-size: 13px; }
  .page-dashboard .class-count { margin: 7px 0 2px; font-size: 22px; }
  .page-dashboard .class-foot { font-size: 10px; }
  .page-dashboard .grid { grid-template-columns: minmax(0,1fr); gap: 14px; margin-bottom: 15px; }
  .page-dashboard .panel { padding: 16px; }
  .page-dashboard .quick { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
  .page-dashboard .quick button { padding: 12px 5px; min-width: 0; min-height: 76px; font-size: 11px; line-height: 1.5; }
  .page-dashboard .quick .icon { font-size: 20px; margin-bottom: 5px; }
  .page-dashboard .attendance-summary { gap: 13px; }
  .page-dashboard .ring { width: 93px; height: 93px; }
  .page-dashboard .ring>div { width: 71px; height: 71px; font-size: 20px; }
  .page-dashboard .legend { min-width: 0; font-size: 11px; }
  .page-dashboard .legend div { gap: 7px; }
  .page-dashboard .admission-item { gap: 7px; }
  .page-dashboard .admission-item > small { flex-shrink: 0; font-size: 10px; }
  .footer { margin-top: 20px; }
  .form-actions { flex-wrap: wrap; }
  dialog { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .filters > * { min-height: 43px; }
}
@media (max-width: 350px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .page-dashboard .stat-top { min-height: 54px; }
  .page-dashboard .stat-value { font-size: 18px; }
  .page-dashboard .stat { padding: 10px; }
  .page-dashboard .stat-icon { display: none; }
  .page-dashboard .quick { grid-template-columns: 1fr; }
  .page-dashboard .quick button { min-height: 50px; display: flex; justify-content: flex-start; gap: 11px; padding: 9px 13px; }
  .page-dashboard .quick .icon { margin: 0; }
  .page-dashboard .attendance-summary { align-items: center; flex-direction: column; }
  .page-dashboard .legend { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .class-card, .quick button, .btn { transition: none; }
}


/* Dashboard mobile legibility and payment details — revision 2.
   Desktop layout and all existing application workflows are retained. */
.page-dashboard .payment-mobile { display: none; }

@media (max-width: 600px) {
  .page-dashboard .stat-top { font-size: 12px; min-height: 39px; }
  .page-dashboard .stat-value { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.38; }
  .page-dashboard .stat small { font-size: 11px; line-height: 1.55; }
  .page-dashboard .section-head h2 { font-size: 17px; }
  .page-dashboard .section-head .text-btn { font-size: 12px; min-height: 42px; display: inline-flex; align-items: center; }
  .page-dashboard .class-card h3 { font-size: 14px; }
  .page-dashboard .class-count { font-size: 23px; }
  .page-dashboard .class-foot { font-size: 11px; }

  /* Larger, easier-to-tap quick actions. */
  .page-dashboard .quick { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .page-dashboard .quick button {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-height: 75px; padding: 11px 10px; font-size: 13px; line-height: 1.5;
  }
  .page-dashboard .quick button .icon { margin: 0 0 5px; font-size: 21px; }
  .page-dashboard .quick button:last-child {
    grid-column: 1 / -1; flex-direction: row; min-height: 53px; gap: 9px;
  }
  .page-dashboard .quick button:last-child .icon { margin: 0; }
  .page-dashboard .legend { font-size: 12px; }
  .page-dashboard .admission-item .info { font-size: 13px; }
  .page-dashboard .admission-item small { font-size: 11px; }

  /* Dashboard only: replace the clipped/swipe-only recent-payments table with cards. */
  .page-dashboard .panel .table-wrap { display: none; }
  .page-dashboard .payment-mobile { display: grid; gap: 0; min-width: 0; }
  .page-dashboard .payment-entry { min-width: 0; padding: 14px 0; border-top: 1px solid #edf1f7; }
  .page-dashboard .payment-entry:first-child { border-top: 0; padding-top: 4px; }
  .page-dashboard .payment-entry-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .page-dashboard .payment-entry .person { min-width: 0; flex: 1; gap: 8px; font-size: 13px; }
  .page-dashboard .payment-entry .person > span:last-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
  .page-dashboard .payment-entry .person small { font-size: 11px; }
  .page-dashboard .payment-amount { white-space: nowrap; color: #24344c; font-size: 15px; font-weight: 650; }
  .page-dashboard .payment-entry-bottom { margin-top: 9px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #68778d; }
  .page-dashboard .payment-entry-bottom > span { min-width: 0; }
  .page-dashboard .payment-entry .pill { margin-left: 4px; padding: 3px 7px; font-size: 11px; }
  .page-dashboard .payment-receipt {
    min-width: 112px; min-height: 42px; padding: 7px 12px;
    font-size: 12px; font-weight: 600; background: #edf3ff; color: #275dd7;
    border: 1px solid #d9e5ff; border-radius: 9px; white-space: nowrap;
  }
  .page-dashboard .payment-receipt:focus-visible { outline: 3px solid #98b8ff; outline-offset: 2px; }
}

@media (max-width: 350px) {
  .page-dashboard .quick { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-dashboard .quick button { min-height: 78px; flex-direction: column; gap: 0; }
  .page-dashboard .quick button .icon { margin: 0 0 5px; }
  .page-dashboard .quick button:last-child { min-height: 53px; flex-direction: row; }
  .page-dashboard .quick button:last-child .icon { margin: 0; }
  .page-dashboard .payment-entry-bottom { flex-wrap: wrap; }
}

/* Font-loading reliability patch, 2026-10-24.
   Noto Sans Bengali via Google Fonts; locally-hosted original as offline fallback. */
html, body, #app, button, input, select, textarea, option, table, dialog,
.stat-value, .stat-top, .class-count, .class-card, .quick button, .payment-entry {
  font-family: 'Noto Sans Bengali', 'Pathshala Bengali Local', 'Nirmala UI', 'Vrinda', sans-serif;
}
/* Keep symbol icons visually unchanged. */
.icon, .stat-icon { font-family: 'Segoe UI Symbol', system-ui, sans-serif; }


/* শ্রেণি ও ব্যাচ · mobile-only card grid · 2026-10-24
   Scope is the class/batch page; Dashboard and desktop are unchanged. */
@media (min-width: 601px) and (max-width: 850px) {
  .page-classes .classes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 12px;
    padding-bottom: 0;
  }
  .page-classes .class-card { min-width: 0; width: 100%; }
}
@media (max-width: 600px) {
  .page-classes { min-width: 0; }
  .page-classes .heading { margin-bottom: 16px; }
  .page-classes .heading h1 { font-size: clamp(23px, 6vw, 27px); line-height: 1.45; }
  .page-classes .heading p { font-size: 12px; line-height: 1.65; }
  .page-classes .classes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
    overflow: visible;
  }
  .page-classes .class-card {
    min-width: 0;
    width: 100%;
    min-height: 197px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 17px 15px;
    text-align: left;
    border-radius: 15px;
    border: 1px solid #e0e8f3;
    background: #fff;
    box-shadow: 0 2px 12px #20395e08;
    overflow-wrap: anywhere;
  }
  .page-classes .class-badge {
    width: 51px;
    height: 51px;
    flex: none;
    border-radius: 12px;
    margin: 0 0 12px;
    font-size: 20px;
  }
  .page-classes .class-card h3 {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 650;
  }
  .page-classes .class-count {
    margin: auto 0 10px;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
  }
  .page-classes .class-count small { font-size: 12px; font-weight: 500; }
  .page-classes .class-foot {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    font-size: 11px;
    line-height: 1.65;
  }
  .page-classes .class-card:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "badge title" "badge count" "badge foot";
    align-items: center;
    column-gap: 15px;
    row-gap: 3px;
    min-height: 116px;
    padding: 17px;
  }
  .page-classes .class-card:last-child .class-badge { grid-area: badge; width: 56px; height: 56px; margin: 0; }
  .page-classes .class-card:last-child h3 { grid-area: title; margin: 0; }
  .page-classes .class-card:last-child .class-count { grid-area: count; margin: 0; font-size: 21px; }
  .page-classes .class-card:last-child .class-foot { grid-area: foot; margin: 0; }
  .page-classes .note { padding: 15px; font-size: 13px; line-height: 1.8; }
}
@media (max-width: 350px) {
  .page-classes .classes { gap: 9px; }
  .page-classes .class-card { padding: 13px 11px; }
  .page-classes .class-card h3 { font-size: 14px; }
  .page-classes .class-count { font-size: 23px; }
  .page-classes .class-foot { font-size: 10px; }
}


/* Pathshala: self-hosted Bengali font. No Google Fonts request required.
   Keep all interface text consistently in the same font on desktop and mobile. */
@font-face {
  font-family: 'Pathshala Web Bengali';
  src: url('./fonts/NotoSansBengali.woff2?v=20261024b') format('woff2'),
       url('./fonts/NotoSansBengali.ttf?v=20261024b') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-ui: 'Pathshala Web Bengali', 'Nirmala UI', 'Vrinda', sans-serif;
  font-family: var(--font-ui);
}
html, body, #app, .shell, .sidebar, .topbar, .main,
button, input, select, textarea, table, th, td,
.stat-value, .person small, .class-count, .brand strong,
.center-title, .profile-name, .nav, .note, .pill {
  font-family: var(--font-ui);
}
/* Preserve recognisable symbols/icons while using Bengali font for all readable text. */
.icon, .stat-icon { font-family: 'Segoe UI Symbol', system-ui, sans-serif; }
.brand small { font-family: system-ui, sans-serif; }


/* Li Shadhinata Unicode · privately supplied source fonts.
   IMPORTANT: Lipighor requires email permission before PUBLIC webfont use.
   Do not deploy the TTF files publicly before receiving permission.
   Only Unicode, not ANSI: LiShadhinataUnicode-Regular.ttf / -Italic.ttf. */
@font-face {
  font-family: 'Pathshala Shadhinata';
  src: url('./fonts/LiShadhinataUnicode-Regular.ttf?v=1') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pathshala Shadhinata';
  src: url('./fonts/LiShadhinataUnicode-Italic.ttf?v=1') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  --font-ui: 'Pathshala Shadhinata', 'Pathshala Web Bengali',
             'Pathshala Bengali Local', 'Noto Sans Bengali', 'Nirmala UI', sans-serif;
  font-family: var(--font-ui);
  /* The uploaded Shadhinata family contains regular and italic; synthetic bold
     maintains existing 500/600/700 headings without changing UI structure. */
  font-synthesis: weight;
}
html, body, #app, .shell, .sidebar, .topbar, .main, .panel, .stat,
.heading, .brand strong, .center-title, .profile-name, .nav,
.stat-value, .stat-top, .class-card h3, .class-count,
button, input, select, option, textarea, table, th, td, dialog,
.payment-entry, .payment-entry *, .quick button, .note, .pill,
.footer, .demo-bar, .person, .person small, .font-credit {
  font-family: var(--font-ui);
}
/* Keep the Roman numeral badges and generic icons recognisable. */
.icon, .stat-icon, .class-badge, .brand small {
  font-family: 'Segoe UI Symbol', system-ui, sans-serif;
}
.font-credit a { color: #275dd7; text-decoration: underline; text-underline-offset: 2px; }