/* Teacher Portal — installed/mobile-first front-end app.
   Deliberately its own small stylesheet (not admin.css) since this runs
   on the public front-end, outside wp-admin, and needs to look right at
   phone width first — that's the whole point of it being installable. */

.csh-tp-app{
  --bg:#0B1526; --panel:#111E33; --line:#22314B; --text:#EAF0FA; --slate:#8CA0C4;
  --brass:#C9A24B; --brass-dark:#A9822F; --present:#3FBF6B; --absent:#E5637A; --late:#E8B84B; --leave:#7C8FE0; --holiday:#4CC3D9;
  font-family:'Inter',Arial,sans-serif; background:var(--bg); color:var(--text);
  min-height:100vh; box-sizing:border-box; margin:0;
  /* No negative margin. It existed to cancel a wrapper's padding, but
     these portals are served as standalone pages with body{margin:0} —
     there is no wrapper to cancel. On a phone it dragged the app 20px
     past the left edge, and the 20px padding only brought text back to
     x=0, so every label sat flush against the glass.

     Padding now respects the device safe area as well, so text clears
     the rounded corners and camera cut-out on modern phones. */
  padding:16px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  --ink:#060B16; --ink-soft:#C3CEE3; --paper:#0A1220; --card:#121B30; --slate-light:#6E80A6; --active:#2F6FED; --active-bg:#15294C; --left:#A9B7D1; --left-bg:#1B2740; --danger:#E5637A; --danger-dark:#C94A60; --danger-bg:#3A1420; --warn:#E8B84B; --warn-bg:#3A2B0E; --ok:#3FB68B; --ok-dark:#2BA968; --ok-bg:#123322; --info:#4CC3D9; --info-bg:#123138; --leave-bg:#1A2438; --late-bg:#17233D; --absent-bg:#1B2740; --present-bg:#15294C; --holiday-bg:#123138;
}
.csh-tp-app *{ box-sizing:border-box; }
.csh-tp-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.csh-tp-topbar h1{ font-size:19px; margin:0; }
.csh-tp-topbar .sub{ font-size:12px; color:var(--slate); }
.csh-tp-app-icon{ width:28px; height:28px; border-radius:7px; object-fit:cover; vertical-align:middle; margin-right:8px; }
.csh-tp-btn{ font-family:'Inter'; font-weight:700; font-size:13px; border-radius:8px; padding:9px 14px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--text); text-decoration:none; display:inline-block; }
.csh-tp-btn.primary{ background:var(--brass); color:#1a1300; border-color:var(--brass); }
.csh-tp-btn.primary:hover{ background:var(--brass-dark); }
.csh-tp-install-banner{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.csh-tp-install-banner p{ margin:0; font-size:13px; color:var(--slate); }
/* Always 3 tiles per row, even on a narrow phone — auto-fill would drop
   to 1 or 2 below ~480px, which is what left the menu looking like a
   stacked list instead of a grid. Padding/font sizes are trimmed down
   here specifically so three columns stay comfortable at phone width;
   the >=600px rule below restores the roomier desktop sizing. */
.csh-tp-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px; }
.csh-tp-tile{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 6px; cursor:pointer;
  color:var(--text); font-family:'Inter'; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.csh-tp-tile .icon{ font-size:22px; display:block; margin-bottom:6px; }
.csh-tp-tile .label{ font-weight:700; font-size:11.5px; line-height:1.25; }
@media (min-width:600px){
  .csh-tp-tile{ padding:18px 14px; }
  .csh-tp-tile .icon{ font-size:26px; margin-bottom:8px; }
  .csh-tp-tile .label{ font-size:14px; }
}
.csh-tp-empty{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px; text-align:center; color:var(--slate); }
.csh-tp-back{ background:transparent; border:none; color:var(--brass); font-weight:700; font-size:13px; cursor:pointer; padding:0; margin-bottom:14px; }
.csh-tp-field{ margin-bottom:12px; }
.csh-tp-field label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); margin-bottom:4px; font-weight:700; }
.csh-tp-field select, .csh-tp-field input{ width:100%; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:14px; }
.csh-tp-roster{ margin-top:14px; }
.csh-tp-row{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px 4px; border-bottom:1px solid var(--line); position:relative; }
.csh-tp-row-head{ display:flex; align-items:center; gap:10px; width:100%; }
.csh-tp-sr{ font-size:12px; color:var(--slate); font-weight:700; min-width:18px; }
.csh-tp-photo{ width:34px; height:34px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.csh-tp-photo-ph{ width:34px; height:34px; border-radius:8px; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--slate); font-size:16px; flex-shrink:0; }
.csh-tp-status-btns{ display:flex; gap:4px; flex-wrap:nowrap; width:100%; }
.csh-tp-status-btn{
  font-family:'Inter'; font-weight:800; font-size:15px; line-height:1; height:34px; padding:0; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--slate); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:1;
}
.csh-tp-status-btn.active.present{ background:var(--present); color:var(--ok-bg); border-color:var(--present); }
.csh-tp-status-btn.active.absent{ background:var(--absent); color:var(--danger-bg); border-color:var(--absent); }
.csh-tp-status-btn.active.late{ background:var(--late); color:var(--warn-bg); border-color:var(--late); }
.csh-tp-status-btn.active.leave{ background:var(--leave); color:var(--active-bg); border-color:var(--leave); }
.csh-tp-status-btn.active.holiday{ background:var(--holiday); color:var(--info-bg); border-color:var(--holiday); }
.csh-tp-bulk-btns{ display:flex; gap:8px; margin-bottom:14px; }
.csh-tp-bulk-btns .csh-tp-btn{ flex:1; text-align:center; }
.csh-tp-bulk-btns .csh-tp-btn:disabled{ opacity:.5; cursor:not-allowed; }
.csh-tp-bulk-progress{ font-size:12.5px; color:var(--slate); font-weight:600; margin-bottom:10px; }
.csh-tp-row-failed{ outline:2px solid var(--absent); outline-offset:-2px; border-radius:8px; background:rgba(229,99,122,0.08); }

/* Upload Student Image */
.csh-tp-photo-row{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); }
.csh-tp-photo-row:last-child{ border-bottom:none; }
.csh-tp-sr{ font-size:12px; color:var(--slate); font-weight:700; min-width:16px; }
.csh-tp-photo-frame{ width:48px; height:48px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.csh-tp-photo-frame img{ width:100%; height:100%; object-fit:cover; }
.csh-tp-photo-ph{ color:var(--slate); font-size:20px; }
.csh-tp-photo-info{ flex:1; min-width:0; }
.csh-tp-photo-info .name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.csh-tp-photo-info .roll{ font-size:11.5px; color:var(--slate); }
.csh-tp-photo-btn{ flex-shrink:0; font-size:12px; padding:8px 12px; }
.csh-tp-photo-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Attendance summary — a small stat strip plus a two-colour Present vs
   Absent bar, recalculated live from whatever's currently marked (see
   updateAttendanceSummary()) rather than a separate tracked count, so
   it can never show a stale number. */
.csh-tp-summary{ margin-bottom:14px; }
.csh-att-stats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-bottom:10px; }
.csh-att-stat{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 4px; text-align:center; }
.csh-att-stat .v{ display:block; font-size:17px; font-weight:800; }
.csh-att-stat .l{ display:block; font-size:9.5px; color:var(--slate); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.csh-att-stat.total .v{ color:var(--text); }
.csh-att-stat.present .v{ color:var(--ok); }
.csh-att-stat.absent .v{ color:var(--danger); }
.csh-att-stat.late .v{ color:var(--warn); }
.csh-att-stat.leave .v{ color:var(--leave); }
.csh-att-bar{ display:flex; height:14px; border-radius:100px; overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.csh-att-bar-present{ background:var(--ok); transition:width .25s ease; }
.csh-att-bar-absent{ background:var(--danger); transition:width .25s ease; }
.csh-att-bar-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--slate); font-weight:700; margin-top:5px; }
.csh-tp-row .name{ font-weight:700; font-size:14px; }
.csh-tp-row .roll{ font-size:12px; color:var(--slate); }
.csh-tp-saved-tick{ position:absolute; top:12px; right:4px; color:var(--present); font-size:14px; font-weight:700; opacity:0; transition:opacity .2s; }
.csh-tp-saved-tick.show{ opacity:1; }
.csh-tp-loading, .csh-tp-error-box{ padding:20px; text-align:center; color:var(--slate); }
.csh-tp-error-box{ color:var(--absent); }
.csh-tp-table-wrap{ border:1px solid var(--line); border-radius:10px; overflow-x:auto; background:var(--panel); margin-bottom:14px; -webkit-overflow-scrolling:touch; }
.csh-tp-marks-table{ width:100%; border-collapse:collapse; }
.csh-tp-marks-table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate);
  padding:10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:700;
}
.csh-tp-marks-table th .max{ font-size:10px; font-weight:500; text-transform:none; letter-spacing:0; }
.csh-tp-marks-table td{ padding:8px; border-bottom:1px solid var(--line); font-size:13px; color:var(--text); white-space:nowrap; }
.csh-tp-marks-table tbody tr:last-child td{ border-bottom:none; }
.csh-tp-marks-table td.num{ color:var(--slate); text-align:center; }
.csh-tp-marks-table td.name{ font-weight:700; }
.csh-tp-marks-table td.rowtotal{ font-weight:700; color:var(--brass); text-align:center; }
.csh-tp-marks-table input.csh-tp-mark-input{
  width:64px; padding:7px 6px; text-align:center; border-radius:6px;
  border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:14px;
}
/* Keep the student's name visible while scrolling the criteria columns
   sideways on a phone — otherwise it's easy to type marks against the
   wrong row. */
/* Sticky-name-column was dropped once a Photo column was added before
   Name — with three plain columns (Sr.#, Photo, Roll No) now ahead of
   it, pinning just Name to the left produced an awkward jump/overlap
   during horizontal scroll instead of a clean effect. Normal scrolling
   reads better here now. */

/* Widths step up with the screen instead of stopping at 640px.
   A 640px cap on a 1600px monitor is what produced the dark bars down
   both sides: the app was still in phone layout, just centred. These
   breakpoints let a desktop behave like a desktop while the phone
   layout below 600px is untouched. */
@media (min-width:600px){
  .csh-tp-app{ max-width:720px; margin:0 auto; padding:24px; }
}
@media (min-width:1000px){
  .csh-tp-app{ max-width:1040px; padding:28px 32px; }
  .csh-tp-tiles{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
}
@media (min-width:1400px){
  .csh-tp-app{ max-width:1280px; padding:32px 40px; }
}

/* Notifications bell + panel */
.csh-tp-top-actions{ display:flex; align-items:center; gap:10px; }
.csh-tp-bell{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:8px 11px; font-size:16px; line-height:1;
  cursor:pointer; color:var(--text); font-family:inherit;
}
.csh-tp-bell-count{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px;
  padding:0 5px; border-radius:9px; background:var(--brass); color:var(--paper);
  font-size:10.5px; font-weight:800; line-height:18px; text-align:center;
}
.csh-tp-notif-box{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  margin-top:12px; overflow:hidden; max-height:60vh; overflow-y:auto;
}
.csh-tp-notif-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; color:var(--brass);
  text-transform:uppercase; letter-spacing:.09em;
  position:sticky; top:0; background:var(--panel); z-index:1;
}
.csh-tp-notif-clear{
  background:none; border:none; color:var(--slate); font-size:11.5px;
  font-weight:600; cursor:pointer; font-family:inherit; text-transform:none; letter-spacing:0;
}
.csh-tp-notif{ padding:11px 14px; border-bottom:1px solid var(--line); }
.csh-tp-notif:last-child{ border-bottom:none; }
.csh-tp-notif.unread{ background:rgba(201,162,77,.07); border-left:3px solid var(--brass); }
.csh-tp-notif .t{ font-size:13px; font-weight:700; color:var(--text); }
.csh-tp-notif .m{ font-size:12px; color:var(--slate); margin-top:3px; line-height:1.45; }
.csh-tp-notif .d{ font-size:10.5px; color:var(--slate); opacity:.7; margin-top:5px; }

/* Push notification opt-in prompt */
.csh-tp-push-prompt{
  /* Deliberately loud. The quiet version of this row was missed by every
     parent and teacher on the site — the server had sent thirty
     notifications and not one phone had ever subscribed, because nobody
     noticed the thing they had to tap. It is the one control in the app
     that does nothing until it is pressed, so it is allowed to shout. */
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:linear-gradient(180deg, var(--active-bg), var(--panel));
  border:2px solid var(--brass); border-radius:14px;
  padding:16px 18px; margin:14px 0 4px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.csh-tp-push-prompt::before{
  content:"\01F514"; font-size:26px; line-height:1; flex-shrink:0;
}
.csh-tp-push-prompt .txt{ display:flex; flex-direction:column; gap:3px; min-width:180px; flex:1; }
.csh-tp-push-prompt .txt strong{ font-size:15px; font-weight:800; color:var(--text); }
.csh-tp-push-prompt .txt span{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.csh-tp-push-prompt .btns{ display:flex; gap:8px; }
.csh-tp-push-prompt button{
  font-family:inherit; font-size:14px; font-weight:800; border-radius:10px;
  padding:12px 22px; cursor:pointer; white-space:nowrap;
}
.csh-tp-push-enable{ background:var(--brass); color:var(--paper); border:none; }
.csh-tp-push-enable:disabled{ opacity:.6; cursor:default; }
.csh-tp-push-dismiss{ background:transparent; color:var(--slate); border:1px solid var(--line); }

/* ---------------------------------------------------------------
   Marks grid on a phone.

   The grid has one column per marking component plus Sr #, Photo,
   Roll No and Name. On a ~380px screen that is far wider than the
   viewport, so the teacher scrolls right to reach the mark boxes —
   and the names scroll away with everything else, leaving a column
   of empty boxes with no way to tell whose row is whose.

   Two changes fix it: the Name column is pinned to the left edge so
   it stays put while the marks scroll under it, and the three columns
   that are not needed while marking (Sr #, Photo, Roll No) are hidden
   on narrow screens to give the marks room. The roll number is folded
   into the name cell so nothing is actually lost.
   --------------------------------------------------------------- */
.csh-tp-marks-table td.name .rollsub{
  display:inline-block; margin-left:6px; font-size:11px; font-weight:600; color:var(--slate);
}
.csh-tp-marks-table th.namecol, .csh-tp-marks-table td.name{
  position:sticky; left:0; z-index:2;
  background:var(--panel);
  border-right:1px solid var(--line);
  max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
.csh-tp-marks-table thead th.namecol{ z-index:3; }
.csh-tp-marks-table tbody tr:nth-child(odd) td.name{ background:var(--panel); }

@media (max-width: 760px){
  /* All four identifying columns stay and are pinned together as one
     block, so Sr #, Photo, Roll No and Name all remain on screen while
     the marks scroll under them.
     Each needs its own `left` offset equal to the widths before it —
     pinning them all at left:0 would stack them on top of one another,
     which is the overlap this whole fix exists to remove. Widths are
     therefore fixed rather than automatic: the offsets have to match
     the real widths exactly. Total 224px, leaving the rest for marks. */
  .csh-tp-marks-table{ width:auto; min-width:100%; }
  .csh-tp-marks-table th.sr,    .csh-tp-marks-table td.sr{    position:sticky; left:0;     width:30px;  min-width:30px;  max-width:30px;  }
  .csh-tp-marks-table th.photo, .csh-tp-marks-table td.photo{ position:sticky; left:30px;  width:34px;  min-width:34px;  max-width:34px;  }
  .csh-tp-marks-table th.roll,  .csh-tp-marks-table td.roll{  position:sticky; left:64px;  width:48px;  min-width:48px;  max-width:48px;  }
  .csh-tp-marks-table th.namecol, .csh-tp-marks-table td.name{ left:112px; width:112px; min-width:112px; max-width:112px; }

  .csh-tp-marks-table th.sr, .csh-tp-marks-table th.photo, .csh-tp-marks-table th.roll{ z-index:3; }
  .csh-tp-marks-table td.sr, .csh-tp-marks-table td.photo, .csh-tp-marks-table td.roll{
    z-index:2; background:var(--panel);
  }
  /* Only the last pinned column carries the divider, so the block reads
     as one unit rather than four ruled boxes. */
  .csh-tp-marks-table th.sr, .csh-tp-marks-table td.sr,
  .csh-tp-marks-table th.photo, .csh-tp-marks-table td.photo,
  .csh-tp-marks-table th.roll, .csh-tp-marks-table td.roll{ border-right:none; }

  .csh-tp-marks-table td.name{ font-size:12px; padding:6px 5px; line-height:1.25; white-space:normal; }
  /* The roll number already has its own pinned column here, so the copy
     folded into the name cell would just be a duplicate. */
  .csh-tp-marks-table td.name .rollsub{ display:none; }
  .csh-tp-marks-table td.photo img.csh-tp-photo,
  .csh-tp-marks-table td.photo .csh-tp-photo-ph{ width:24px; height:24px; font-size:14px; }
  .csh-tp-marks-table th{ font-size:9px; padding:7px 4px; }
  .csh-tp-marks-table td{ padding:6px 4px; font-size:12px; }
  .csh-tp-marks-table td.num{ font-size:11px; }
  .csh-tp-marks-table input.csh-tp-mark-input{ width:52px; font-size:15px; }
  /* Total stays. It is how a teacher checks their own entry as they go,
     and it is one narrow column — not worth reclaiming. */
}

/* ---- Camera / Gallery chooser ----
   Attached to document.body so it sits above the app, which means it is
   outside .csh-tp-app and cannot inherit its colours. Values are stated
   here rather than referenced, for the same reason the Parent Portal pay
   sheet had to carry its own palette. */
.csh-tp-sheet{
  /* This element is appended to document.body so it can sit above the
     screen, which puts it OUTSIDE the root the palette is declared on.
     Every var() below it would otherwise resolve to nothing: the box
     loses its background and border and the page shows straight through
     it, with the text on top unreadable.

     The palette is therefore repeated here. Keep it in step with the
     root block at the top of this file. */
  --ink:#060B16; --text:#E8EDF9; --ink-soft:#C3CEE3; --paper:#0A1220; --card:#121B30;
  --panel:#111E33; --bg:#0B1526; --brass:#4C8DFF; --brass-dark:#2F6FED;
  --slate:#92A3C4; --slate-light:#6E80A6; --line:#24314C;
  --active:#2F6FED; --active-bg:#15294C; --left:#A9B7D1; --left-bg:#1B2740;
  --danger:#E5637A; --danger-dark:#C94A60; --danger-bg:#3A1420;
  --warn:#E8B84B; --warn-bg:#3A2B0E; --ok:#3FB68B; --ok-dark:#2BA968; --ok-bg:#123322;
  --info:#4CC3D9; --info-bg:#123138; --leave:#7C8FE0; --leave-bg:#1A2438;
  --late:#E8B84B; --late-bg:#17233D; --absent:#E5637A; --absent-bg:#1B2740;
  --present:#3FBF6B; --present-bg:#15294C; --holiday:#4CC3D9; --holiday-bg:#123138;

  position:fixed; inset:0; z-index:100000; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(4,8,16,.72); font-family:'Inter',Arial,sans-serif;
}
.csh-tp-sheet-box{
  width:100%; max-width:520px; background:var(--card); border:1px solid var(--line);
  border-radius:16px 16px 0 0; padding:10px 12px calc(14px + env(safe-area-inset-bottom));
}
.csh-tp-sheet-head{
  text-align:center; font-size:12.5px; font-weight:700; color:var(--slate);
  padding:8px 4px 12px;
}
.csh-tp-sheet-btn{
  display:block; width:100%; margin-bottom:8px; padding:15px 14px;
  font-family:inherit; font-size:15px; font-weight:700; text-align:left;
  color:var(--text); background:var(--paper); border:1px solid var(--line);
  border-radius:12px; cursor:pointer;
}
.csh-tp-sheet-btn:active{ background:#16233A; }
.csh-tp-sheet-btn.cancel{ text-align:center; color:var(--slate); background:transparent; margin-top:4px; }

/* ---- Student Birthdays ---- */
#csh-tp-bd-body .csh-tp-bd-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:800;
  color:var(--brass); margin:16px 2px 8px;
}
#csh-tp-bd-body .csh-tp-bd-row{
  display:flex; align-items:center; gap:12px; padding:11px 13px; margin-bottom:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
#csh-tp-bd-body .csh-tp-bd-row.today{ border-color:var(--brass); background:rgba(201,162,75,.08); }
#csh-tp-bd-body .csh-tp-bd-face{
  width:46px; height:46px; flex-shrink:0; border-radius:50%; overflow:hidden;
  background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
#csh-tp-bd-body .csh-tp-bd-face img{ width:100%; height:100%; object-fit:cover; }
#csh-tp-bd-body .csh-tp-bd-info{ flex:1; min-width:0; }
#csh-tp-bd-body .csh-tp-bd-info .name{
  font-size:14px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#csh-tp-bd-body .csh-tp-bd-info .meta{ font-size:11.5px; color:var(--slate); margin-top:2px; }
#csh-tp-bd-body .csh-tp-bd-when{ text-align:center; flex-shrink:0; min-width:54px; }
#csh-tp-bd-body .csh-tp-bd-when .badge{
  display:inline-block; padding:4px 10px; border-radius:100px;
  background:var(--brass); color:var(--paper); font-size:11px; font-weight:800;
}
#csh-tp-bd-body .csh-tp-bd-when .days{ display:block; font-size:19px; font-weight:800; color:var(--text); }
#csh-tp-bd-body .csh-tp-bd-when .lbl{
  display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--slate);
}
#csh-tp-bd-body .csh-tp-bd-when .age{ font-size:10px; color:var(--slate); margin-top:3px; }
#csh-tp-root .csh-tp-screen-title{ font-size:19px; font-weight:800; color:var(--text); margin:10px 2px 4px; }

/* Optional subjects — mirrors the admin Enter Marks screen so a teacher
   and an administrator looking at the same class see the same thing. */
#csh-tp-root tr.csh-tp-not-sitting td{ opacity:.5; }
#csh-tp-root td.csh-tp-locked{ text-align:center; color:var(--slate); font-weight:700; }
#csh-tp-root .csh-tp-opt-tag{
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:100px;
  background:rgba(146,163,196,.18); color:var(--slate);
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  white-space:nowrap;
}
#csh-tp-root .csh-tp-opt-note{
  margin:10px 0 0; padding:10px 13px; border-radius:9px; font-size:12px; line-height:1.5;
  background:rgba(146,163,196,.10); border-left:3px solid var(--slate); color:var(--slate);
}

/* Absent cells — same meaning and colour as the admin screen. */
#csh-tp-root td.csh-tp-mark-cell{ white-space:nowrap; }
#csh-tp-root td.csh-tp-abs-cell{ text-align:center; }
#csh-tp-root button.csh-tp-ab{
  font-family:inherit; font-size:10px; font-weight:800; letter-spacing:.04em; cursor:pointer;
  background:transparent; color:var(--slate); border:1px solid var(--line);
  border-radius:5px; padding:4px 7px; margin-left:4px; vertical-align:middle;
}
#csh-tp-root button.csh-tp-ab.on{
  background:rgba(232,184,75,.18); border-color:var(--late); color:var(--late);
  margin-left:0; padding:7px 14px; font-size:12px;
}

/* Theme picker */
#csh-tp-root .csh-tp-theme{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
#csh-tp-root .csh-thm-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
#csh-tp-root .csh-thm-label{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); }
/* Collapsed by default: the swatches only appear once "Change Theme"
   is tapped, instead of taking up space on the menu at all times. */
#csh-tp-root button.csh-thm-toggle{
  display:flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:9px 16px;
}
#csh-tp-root button.csh-thm-toggle.open{ border-color:var(--brass); }
#csh-tp-root .csh-thm-toggle-arrow{ font-size:10px; color:var(--slate); transition:transform .15s ease; }
#csh-tp-root button.csh-thm-toggle.open .csh-thm-toggle-arrow{ transform:rotate(180deg); }
#csh-tp-root .csh-thm-list{ display:none; gap:8px; flex-wrap:wrap; margin-top:2px; }
#csh-tp-root .csh-thm-list.csh-thm-list-open{ display:flex; }
#csh-tp-root button.csh-thm-btn{
  display:flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:7px 14px 7px 7px;
}
#csh-tp-root button.csh-thm-btn.on{ border-color:var(--brass); box-shadow:inset 0 0 0 1px var(--brass); }
#csh-tp-root .csh-thm-swatch{ display:inline-flex; border-radius:100px; overflow:hidden; border:1px solid var(--line); }
#csh-tp-root .csh-thm-swatch i{ display:block; width:12px; height:18px; }
#csh-tp-root .csh-thm-msg{ font-size:11.5px; color:var(--danger); }

/* ---- Desktop refinements ----
   The marks and attendance grids are the reason to have the extra
   width; they were being squeezed into a phone column on a monitor. */
@media (min-width:1000px){
  #csh-tp-root .csh-tp-tiles{ max-width:none; }
  /* The attendance list is one card per student. Two across on a wide
     screen halves the scrolling for a class of forty. */
  #csh-tp-root #csh-tp-roster{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 20px; align-items:start;
  }
}
@media (min-width:1400px){
  #csh-tp-root #csh-tp-roster{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ===== Subject Progress ===== */
#csh-tp-root .csh-tp-sp-year{ margin-bottom:22px; }
#csh-tp-root .csh-tp-sp-yearhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brass); padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
#csh-tp-root .csh-tp-sp-overall{ color:var(--text); letter-spacing:0; font-size:13px; }
#csh-tp-root .csh-tp-sp-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
#csh-tp-root .csh-tp-sp-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 14px;
}
#csh-tp-root .csh-tp-sp-name{
  font-size:13px; font-weight:700; color:var(--text); margin-bottom:9px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#csh-tp-root .csh-tp-sp-bar{
  height:8px; border-radius:100px; background:var(--bg);
  border:1px solid var(--line); overflow:hidden;
}
#csh-tp-root .csh-tp-sp-bar span{ display:block; height:100%; border-radius:100px; }
#csh-tp-root .csh-tp-sp-bar span.high{ background:var(--ok); }
#csh-tp-root .csh-tp-sp-bar span.mid{  background:var(--brass); }
#csh-tp-root .csh-tp-sp-bar span.low{  background:var(--warn); }
#csh-tp-root .csh-tp-sp-bar span.poor{ background:var(--danger); }
#csh-tp-root .csh-tp-sp-bar span.none{ background:var(--slate); }
#csh-tp-root .csh-tp-sp-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:8px;
}
#csh-tp-root .csh-tp-sp-meta strong{ font-size:15px; font-weight:800; color:var(--text); }
#csh-tp-root .csh-tp-sp-meta span{ font-size:11.5px; color:var(--slate); }
#csh-tp-root .csh-tp-sp-absent{ font-size:10.5px; color:var(--warn); font-weight:700; margin-top:6px; }
@media (max-width:420px){ #csh-tp-root .csh-tp-sp-grid{ grid-template-columns:1fr; } }
#csh-tp-root .csh-tp-credit{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:10.5px; color:var(--slate); text-align:center; opacity:.8;
}

/* ===== Exam Time Table ===== */
#csh-tp-root .csh-tp-exam-btn{
  display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; margin-bottom:8px; color:var(--text); font-weight:700;
  font-size:14px; cursor:pointer;
}
#csh-tp-root .csh-tp-exam-btn .sub{ font-size:11.5px; color:var(--slate); font-weight:500; }
#csh-tp-root .csh-tp-exam-btn:hover{ border-color:var(--brass); }
#csh-tp-root .csh-tp-ds-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;
}
#csh-tp-root .csh-tp-ds-toolbar .csh-tp-back{ margin-bottom:0; }
#csh-tp-root .csh-tp-ds-print{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brass); color:#fff; border:none; border-radius:8px;
  font-size:12.5px; font-weight:700; padding:7px 14px; cursor:pointer;
}
#csh-tp-root .csh-tp-ds-print:hover{ opacity:.9; }
#csh-tp-root .csh-tp-ds-exam{ margin-bottom:22px; }
#csh-tp-root .csh-tp-ds-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brass); padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid var(--line);
}
#csh-tp-root .csh-tp-ds-head span{ color:var(--slate); letter-spacing:0; text-transform:none; font-weight:600; }
#csh-tp-root .csh-tp-ds-table{
  width:100%; border-collapse:collapse; background:var(--panel); font-size:13px; min-width:380px;
}
#csh-tp-root .csh-tp-ds-table th, #csh-tp-root .csh-tp-ds-table td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--line);
}
#csh-tp-root .csh-tp-ds-table th{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate); background:var(--bg, rgba(0,0,0,.02));
}
#csh-tp-root .csh-tp-ds-table td{ color:var(--text); font-weight:600; }
#csh-tp-root .csh-tp-ds-table th.sr, #csh-tp-root .csh-tp-ds-table td.sr{
  width:44px; text-align:center; color:var(--slate); font-weight:700;
}
#csh-tp-root .csh-tp-ds-table tbody tr:last-child td{ border-bottom:none; }

/* ===== Academic Calendar (student holidays) =====
   Shares its class names with the Parent Portal's copy of the same
   screen, but each portal styles them with its own variables so the
   two apps stay independently themeable. */
.csh-tp-app .csh-cal-month{
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brass); margin:16px 0 8px;
}
.csh-tp-app .csh-cal-month:first-child{ margin-top:4px; }
.csh-tp-app .csh-cal-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
.csh-tp-app .csh-cal-row.today{ border-color:var(--brass); background:rgba(201,162,75,.08); }
.csh-tp-app .csh-cal-date{
  width:46px; flex-shrink:0; text-align:center; border-radius:10px; padding:5px 0;
  background:var(--holiday-bg); border:1px solid var(--line);
}
.csh-tp-app .csh-cal-date .d{ display:block; font-size:17px; font-weight:800; line-height:1.1; color:var(--text); }
.csh-tp-app .csh-cal-date .m{ display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.csh-tp-app .csh-cal-info{ flex:1; min-width:0; }
.csh-tp-app .csh-cal-info .name{ font-size:14px; font-weight:700; color:var(--text); }
.csh-tp-app .csh-cal-info .meta{ font-size:11.5px; color:var(--slate); margin-top:2px; }
.csh-tp-app .csh-cal-badge{
  flex-shrink:0; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--brass); border-radius:999px; padding:3px 9px;
}

/* ===== Mark Attendance — Academic Calendar lock =====
   Shown when the loaded date is already a Holiday on the Academic
   Calendar; every status button on the roster is disabled at the same
   time — see loadRoster() in assets/js/teacher-portal.js. */
.csh-tp-app .csh-tp-cal-banner{
  display:flex; align-items:flex-start; gap:10px; margin:10px 0;
  padding:11px 14px; border-radius:10px;
  background:var(--holiday-bg); border:1px solid var(--holiday);
  color:var(--text); font-size:13px;
}
.csh-tp-app .csh-tp-cal-banner-icon{ font-size:17px; line-height:1.3; flex-shrink:0; }
.csh-tp-app .csh-tp-cal-banner strong{ color:var(--holiday); }
.csh-tp-app .csh-tp-status-btn:disabled{ opacity:.4; cursor:not-allowed; }
.csh-tp-app .csh-tp-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Leave Request (shared look with the other portal) */
.csh-lv-form{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:16px; }
.csh-lv-form textarea{ width:100%; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:14px; font-family:inherit; resize:vertical; }
.csh-lv-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.csh-lv-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); margin:0 0 12px; font-weight:600; }
.csh-lv-check[hidden]{ display:none; }
.csh-lv-days{ font-size:12.5px; color:var(--slate); margin:0 0 12px; font-weight:600; }
.csh-lv-h{ font-size:15px; margin:4px 0 10px; color:var(--text); }
.csh-lv-card{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.csh-lv-card.pending{ border-left-color:#E8B84B; } .csh-lv-card.approved{ border-left-color:#3FB68B; } .csh-lv-card.rejected{ border-left-color:#E5637A; }
.csh-lv-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--text); }
.csh-lv-badge{ font-size:11px; font-weight:800; padding:3px 10px; border-radius:100px; background:var(--line); color:var(--slate); }
.csh-lv-badge.pending{ background:rgba(232,184,75,.15); color:#E8B84B; }
.csh-lv-badge.approved{ background:rgba(63,182,139,.15); color:#3FB68B; }
.csh-lv-badge.rejected{ background:rgba(229,99,122,.15); color:#E5637A; }
.csh-lv-meta{ font-size:12px; color:var(--slate); margin-top:4px; }
.csh-lv-reason{ font-size:13px; color:var(--text); margin-top:6px; white-space:pre-wrap; }
.csh-lv-remarks{ font-size:12.5px; color:var(--slate); margin-top:6px; font-style:italic; }
.csh-lv-cancel{ margin-top:10px; }
.csh-lv-note{ background:rgba(232,184,75,.12); border:1px solid rgba(232,184,75,.45); color:var(--text); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.5; margin-bottom:12px; }
.csh-lv-badge.partial{ background:rgba(76,195,217,.16); color:#4CC3D9; }
.csh-lv-part{ display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 4px; }
.csh-lv-part span{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; }
.csh-lv-part span.ok{ background:rgba(63,182,139,.16); color:#3FB68B; }
.csh-lv-part span.no{ background:rgba(229,99,122,.14); color:#E5637A; text-decoration:line-through; }