/* ================= PHONE LAYOUT (all portals) =================
   Loaded last. Only applies on small screens; the computer view is unchanged. */
.sidebar > .mnav-toggle{display:none !important;}
@media (max-width:760px){
  /* top bar: one slim line */
  .topbar-inner{padding:8px 12px !important;gap:8px !important;}
  .brand-block .crest{width:34px !important;height:34px !important;}
  .brand-text .name{font-size:.98rem !important;}
  .brand-text .sub{display:none !important;}
  .rightbar{gap:6px !important;}
  .rightbar .who{font-size:.72rem !important;padding:4px 9px !important;max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  button.linkbtn{padding:5px 10px !important;font-size:.78rem !important;}

  main{padding:12px 10px 34px !important;}
  .dash{gap:12px !important;}

  /* menu: one "Menu" button; tap to open the list of sections */
  .sidebar{display:block !important;overflow:visible !important;padding:8px !important;border-radius:14px !important;}
  .sidebar > .mnav-toggle{display:flex !important;align-items:center;gap:10px;width:100%;padding:11px 12px !important;border:0;border-radius:10px;
    background:rgba(255,255,255,.1) !important;color:#fff !important;font-weight:800 !important;font-size:.95rem !important;cursor:pointer;flex-direction:row !important;justify-content:flex-start !important;text-align:left !important;}
  .mnav-toggle .mn-ico{font-size:1.15rem;line-height:1;}
  .mnav-toggle .mn-cur{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mnav-toggle .mn-arr{font-size:.75rem;opacity:.8;transition:transform .15s;}
  .sidebar.open .mnav-toggle .mn-arr{transform:rotate(180deg);}
  .sidebar:not(.open) > button:not(.mnav-toggle),
  .sidebar:not(.open) > .side-divider,
  .sidebar:not(.open) > .side-label{display:none !important;}
  .sidebar.open{display:grid !important;grid-template-columns:1fr 1fr;gap:4px;}
  .sidebar.open > .mnav-toggle,.sidebar.open > .side-label,.sidebar.open > .side-divider,.sidebar.open > .tc-switch{grid-column:1/-1;}
  .sidebar.open > button:not(.mnav-toggle){width:100% !important;white-space:normal !important;font-size:.82rem !important;padding:10px 8px !important;
    flex-direction:row !important;justify-content:flex-start !important;text-align:left !important;border-right:0 !important;border-left:3px solid transparent;}
  .sidebar.open > button.active{border-left-color:var(--gold) !important;}
  .tc-switch{margin:8px 0 0 !important;flex-direction:row !important;flex-wrap:wrap;}
  .tc-switch button{flex:1 1 45%;}

  /* cards and headings */
  .card{padding:16px 14px !important;border-radius:14px !important;margin-bottom:14px !important;}
  .card h2{font-size:1.05rem !important;flex-wrap:wrap;}
  .card > p.desc{font-size:.8rem !important;margin-bottom:12px !important;}

  /* number boxes: two per row, smaller */
  .stat-grid{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-bottom:14px !important;}
  .stat{padding:11px 12px !important;border-radius:12px !important;}
  .stat .num{font-size:1.18rem !important;}
  .stat .label{font-size:.7rem !important;}

  /* forms: one field per line, buttons easy to tap */
  .row-flex{gap:10px !important;}
  .row-flex > .field{max-width:none !important;flex:1 1 100% !important;min-width:0 !important;}
  .field input,.field select,.field textarea{font-size:16px !important;}      /* stops the phone from zooming in */
  .btn{min-height:42px;}

  /* attendance: name on top, three big buttons below */
  .att-row:has(.toggle-btn){flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding:12px !important;}
  .att-row:has(.toggle-btn) .toggles{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px !important;}
  .att-row .toggle-btn{padding:11px 4px !important;font-size:.85rem !important;text-align:center;}
  /* test marks: name left, marks box right */
  .att-row:has(.marksInput){padding:10px 12px !important;gap:10px;}
  .att-row .marksInput{width:84px !important;font-size:16px !important;}

  /* tables: compact; wide tables scroll sideways inside their box */
  table{font-size:.8rem !important;}
  th,td{padding:8px 7px !important;}
  .fee-table td,.fee-table th{padding:7px 5px !important;}

  footer.foot{font-size:.68rem !important;padding:12px !important;}
}
.f-mro{display:none;}
@media (max-width:760px){
  /* monthly fees sheet: each student becomes a small card */
  .fee-table:not(.mf-table):not(.fpl-table) thead,.fee-table:not(.mf-table):not(.fpl-table) tfoot{display:none;}
  .fee-table:not(.mf-table):not(.fpl-table) tbody tr[data-id]{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px 4px;border-bottom:1px solid var(--line);}
  .fee-table:not(.mf-table):not(.fpl-table) tbody tr[data-id] > td{padding:0 !important;border:0 !important;text-align:left !important;background:none !important;}
  .fee-table .f-roll,.fee-table .f-father,.fee-table .f-month{display:none;}
  .fee-table .f-name{grid-column:1/-1;font-size:.95rem;}
  .fee-table .f-mro{display:block;font-size:.74rem;color:var(--muted);font-weight:500;margin-top:1px;}
  .fee-table td[data-l]::before{content:attr(data-l);display:block;font-size:.68rem;font-weight:700;color:var(--muted);margin-bottom:3px;}
  .fee-table td[data-l] input{max-width:none !important;width:100% !important;min-width:0 !important;}
  .fee-table td.fP{font-size:1rem;align-self:center;}
}