/* Mahir EMS — Parent Portal UI kit
   Design tokens + component classes extracted from the approved mockups.
   Drop into resources/css/ (or public/css/) and load after your reset.
   Every value here matches the mockups exactly — do not round them.

   SOURCE: claude.ai/design project "Student portal ERP mockups",
   design_handoff_parent_portal/portal.css. Shipped verbatim — the handoff marks
   this file (and only this file) as production code; the .dc.html mockups are a
   visual reference and their markup is explicitly not to be copied.

   Namespace is `.pt-*`, which does not collide with the existing `.ep-*`
   (parent-theme.css), `.ems-*` (admin theme) or `.ui-*` (ems-tokens.css) layers,
   so this can land alongside them and be adopted screen by screen. */

/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --pt-page:        #f7f8fb;   /* app background (desktop) */
  --pt-page-mobile: #f4f5f9;
  --pt-surface:     #ffffff;
  --pt-surface-alt: #fafbfd;   /* table header / footer rows */
  --pt-ink-band:    #151a2d;   /* dark chrome: rail, headers, hero cards */
  --pt-ink-band-2:  #1c2338;   /* gradient partner */
  --pt-ink-band-3:  #22183a;   /* gradient partner (violet end) */

  /* Text */
  --pt-text:        #151a2d;
  --pt-text-2:      #3c4257;
  --pt-text-3:      #6b7288;
  --pt-muted:       #8d94a8;
  --pt-muted-2:     #a3aabb;
  --pt-disabled:    #c8cdd8;
  --pt-on-dark:     #ffffff;
  --pt-on-dark-2:   #8d94a8;
  --pt-on-dark-3:   #7f88a3;

  /* Lines */
  --pt-border:      #e8eaf0;   /* card border */
  --pt-border-2:    #f1f3f8;   /* card internal divider */
  --pt-border-3:    #f6f7fb;   /* table row divider */
  --pt-border-dark: #232b40;

  /* Accents — one primary, one secondary. Do not add more. */
  --pt-primary:      #2f5fd0;
  --pt-primary-tint: #eff3fd;
  --pt-primary-tint2:#e6ecfb;
  --pt-primary-line: #dde6fb;
  --pt-primary-lift: #4d86ff;  /* on dark surfaces */

  --pt-accent:       #7c4dff;  /* academics / results */
  --pt-accent-soft:  #a98bff;
  --pt-accent-tint:  #f4f0ff;
  --pt-accent-tint2: #ece5ff;

  /* Status */
  --pt-ok:          #0b7a55;  --pt-ok-tint:   #e2f6ee;  --pt-ok-line:   #b9e6d5;
  --pt-warn:        #d98800;  --pt-warn-text: #8a5a00;  --pt-warn-tint: #fff5e0;
  --pt-warn-line:   #f2d9a0;  --pt-warn-tint2:#fdf3ea;  --pt-warn-line2:#f6e0c6;
  --pt-danger:      #c0270f;  --pt-danger-tint:#fdecea; --pt-danger-line:#f5d3cd;
  --pt-ok-dark:     #3ddc9a;  --pt-danger-dark:#ff8a6b; /* on dark surfaces */
  --pt-chart-idle:  #eef1f7;
  --pt-chart-bar:   #dfe6f8;

  /* Type */
  --pt-font:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --pt-mono:      'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Radii */
  --pt-r-sm: 5px; --pt-r: 8px; --pt-r-md: 12px; --pt-r-lg: 14px; --pt-r-xl: 16px;

  /* Elevation */
  --pt-shadow:      0 1px 2px rgba(20,26,45,.04);
  --pt-shadow-card: 0 2px 8px rgba(20,26,45,.07);
  --pt-shadow-hero: 0 2px 10px rgba(20,26,45,.16);

  /* Spacing — 12px grid. Gaps between cards are always 12px. */
  --pt-1: 4px; --pt-2: 6px; --pt-3: 8px; --pt-4: 12px; --pt-5: 16px; --pt-6: 20px;
}

/* ─── Type scale ─────────────────────────────────────────────────── */
/* Desktop. Mobile bumps body text to 13px and titles to 14/17/22px. */
.pt-h1      { font: 600 19px/1.25 var(--pt-font); letter-spacing:-.4px; color:var(--pt-text); }
.pt-h2      { font: 600 14.5px/1.25 var(--pt-font); letter-spacing:-.25px; color:var(--pt-text); }
.pt-card-title { font: 600 13px/1.25 var(--pt-font); letter-spacing:-.1px; color:var(--pt-text); }
.pt-body    { font: 400 12px/1.45 var(--pt-font); color:var(--pt-text-2); }
.pt-body-sm { font: 400 11.5px/1.45 var(--pt-font); color:var(--pt-text-3); }
.pt-meta    { font: 400 11px/1.4 var(--pt-font); color:var(--pt-muted); }
/* Section/column labels: mono, uppercase, tracked out. Used everywhere. */
.pt-label   { font: 500 9.5px/1 var(--pt-mono); letter-spacing:.8px; color:var(--pt-muted); text-transform:uppercase; }
.pt-col     { font: 500 9px/1 var(--pt-mono);  letter-spacing:.6px; color:var(--pt-muted-2); text-transform:uppercase; }
/* All numerals are mono + tabular so columns align. */
.pt-num     { font-family: var(--pt-mono); font-variant-numeric: tabular-nums; }
.pt-stat    { font: 600 24px/1 var(--pt-font); letter-spacing:-.6px; color:var(--pt-text); }
.pt-stat-lg { font: 600 26px/1 var(--pt-font); letter-spacing:-.9px; color:var(--pt-text); }
.pt-stat-xl { font: 600 42px/.9 var(--pt-font); letter-spacing:-1.8px; }

/* ─── Card ───────────────────────────────────────────────────────── */
.pt-card {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-r-md);
  box-shadow: var(--pt-shadow);
  overflow: hidden;
}
.pt-card__head {
  display:flex; align-items:baseline; justify-content:space-between;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--pt-border-2);
}
.pt-card__body { padding: 13px 16px 14px; }
/* Dark hero card (fee due, result summary) */
.pt-card--hero {
  background: linear-gradient(140deg, var(--pt-ink-band-2), var(--pt-ink-band) 55%, var(--pt-ink-band-3));
  border: 0; box-shadow: var(--pt-shadow-hero); color: var(--pt-on-dark);
}
/* Attention card: 3px left rule, no coloured fill */
.pt-card--flag { position:relative; border-color: var(--pt-warn-line); }
.pt-card--flag::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--pt-warn); }

/* ─── Metric tile strip (replaces the old donut row) ─────────────── */
.pt-stats { display:grid; gap:1px; background:var(--pt-border);
            border:1px solid var(--pt-border); border-radius:var(--pt-r-md); overflow:hidden; }
.pt-stats > * { background: var(--pt-surface); padding: 11px 13px; }
.pt-stats--4 { grid-template-columns: repeat(4,1fr); }
.pt-stats--6 { grid-template-columns: repeat(6,1fr); }

/* ─── Progress + bars ────────────────────────────────────────────── */
.pt-bar        { height:4px; border-radius:2px; background:var(--pt-chart-idle); overflow:hidden; }
.pt-bar > span { display:block; height:100%; border-radius:2px; background:var(--pt-primary); }
.pt-bar--md    { height:6px; border-radius:3px; }
.pt-bar--academic > span { background: var(--pt-accent); }
.pt-bar--warn > span     { background: var(--pt-warn); }
.pt-bar--danger > span   { background: var(--pt-danger); }
/* Comparison row: student bar with a class-average tick */
.pt-compare      { position:relative; height:8px; }
.pt-compare__track{ position:absolute; inset:2px 0; background:var(--pt-border-2); border-radius:2px; }
.pt-compare__val  { position:absolute; left:0; top:2px; height:4px; border-radius:2px; background:var(--pt-accent); }
.pt-compare__avg  { position:absolute; top:-2px; width:1.5px; height:12px; background:var(--pt-text); }

/* ─── Table ──────────────────────────────────────────────────────── */
.pt-table            { width:100%; border-collapse:collapse; }
.pt-table thead th   { font: 500 9px/1 var(--pt-mono); letter-spacing:.6px; text-transform:uppercase;
                       color:var(--pt-muted-2); text-align:left; padding:6px 16px;
                       background:var(--pt-surface-alt); border-bottom:1px solid var(--pt-border-2); }
.pt-table tbody td   { font: 400 12px var(--pt-font); color:var(--pt-text);
                       padding:8px 16px; border-bottom:1px solid var(--pt-border-3); }
.pt-table tbody tr:last-child td { border-bottom:0; }
.pt-table .num       { font-family:var(--pt-mono); font-variant-numeric:tabular-nums; text-align:right; }
.pt-table tr.is-flagged td { background:#fffcf5; }
.pt-table--zebra tbody tr:nth-child(even) td { background:var(--pt-surface-alt); }

/* ─── Status pill ────────────────────────────────────────────────── */
.pt-pill { display:inline-flex; align-items:center; gap:5px;
           font: 500 9.5px/1 var(--pt-mono); letter-spacing:.5px; text-transform:uppercase;
           padding:3px 7px; border-radius:var(--pt-r-sm); white-space:nowrap; }
.pt-pill--ok     { color:var(--pt-ok);        background:var(--pt-ok-tint); }
.pt-pill--warn   { color:var(--pt-warn-text); background:var(--pt-warn-tint); }
.pt-pill--danger { color:var(--pt-danger);    background:var(--pt-danger-tint); }
.pt-pill--info   { color:var(--pt-primary);   background:var(--pt-primary-tint2); }
.pt-pill--leave  { color:#5b3bb8;             background:var(--pt-accent-tint); }
.pt-pill--muted  { color:var(--pt-muted);     background:var(--pt-border-2); }

/* ─── Buttons — 30px desktop, 46-50px mobile ─────────────────────── */
.pt-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
          height:30px; padding:0 12px; border-radius:var(--pt-r); cursor:pointer;
          font: 500 12px var(--pt-font); border:1px solid var(--pt-border);
          background:var(--pt-surface); color:var(--pt-text-2); }
.pt-btn:hover          { background:#f5f6f9; }
.pt-btn--primary       { background:var(--pt-primary); border-color:var(--pt-primary); color:#fff; }
.pt-btn--primary:hover { background:#254db0; }
.pt-btn--dark          { background:var(--pt-ink-band); border-color:var(--pt-ink-band); color:#fff; }
.pt-btn--dark:hover    { background:#2b3252; }
.pt-btn--lg            { height:50px; border-radius:13px; font-size:16px; font-weight:600; width:100%; }

/* ─── Segmented control (Month/Term/Year, All/Unpaid/Paid) ───────── */
.pt-seg { display:inline-flex; gap:0; padding:2px; background:#f4f6fa;
          border:1px solid var(--pt-border); border-radius:var(--pt-r); }
.pt-seg > * { font: 400 11.5px var(--pt-font); color:var(--pt-muted);
              padding:4px 11px; border-radius:var(--pt-r-sm); cursor:pointer; }
.pt-seg > .is-active { color:var(--pt-text); background:#fff; font-weight:500;
                       box-shadow:0 1px 2px rgba(20,26,45,.06); }

/* ─── Tabs (desktop content tabs) ────────────────────────────────── */
.pt-tabs { display:flex; align-items:center; gap:2px; padding:0 12px;
           background:var(--pt-surface); border-bottom:1px solid var(--pt-border); }
.pt-tabs a { padding:9px 11px; font: 400 12.5px var(--pt-font); color:var(--pt-text-3); text-decoration:none; }
.pt-tabs a:hover      { color:var(--pt-text); }
.pt-tabs a.is-active  { font-weight:600; color:var(--pt-primary); box-shadow:inset 0 -2px 0 var(--pt-primary); }

/* ─── Icon rail (58px, dark) ─────────────────────────────────────── */
.pt-rail { width:58px; background:var(--pt-ink-band); display:flex; flex-direction:column;
           align-items:center; padding:12px 0; gap:4px; }
.pt-rail__logo { width:30px; height:30px; border-radius:9px; margin-bottom:10px;
                 background:linear-gradient(135deg, var(--pt-primary-lift), var(--pt-accent-soft)); }
.pt-rail a { width:38px; height:36px; border-radius:9px; display:grid; place-items:center;
             font: 500 10px var(--pt-mono); color:var(--pt-on-dark-3); text-decoration:none; }
.pt-rail a:hover     { background:rgba(255,255,255,.07); color:#fff; }
.pt-rail a.is-active { background:rgba(255,255,255,.13); color:#fff; font-weight:600; }

/* ─── Attendance calendar ────────────────────────────────────────── */
.pt-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.pt-cal__dow  { font:500 9px var(--pt-mono); letter-spacing:.6px; color:var(--pt-muted-2);
                text-align:center; padding-bottom:2px; text-transform:uppercase; }
.pt-cal__dow--off { color:#dfe3ed; }
.pt-cal__day  { height:44px; border-radius:7px; padding:6px 7px; background:var(--pt-surface-alt);
                border:1px solid var(--pt-border-2); font:500 11px var(--pt-mono); }
.pt-cal__day--out     { background:var(--pt-page); border-style:dashed; }
.pt-cal__day--present { background:var(--pt-primary-tint); border-color:var(--pt-primary-line); color:var(--pt-primary); }
.pt-cal__day--absent  { background:#fdeeec; border-color:var(--pt-danger-line); color:var(--pt-danger); }
.pt-cal__day--late    { background:var(--pt-warn-tint2); border-color:var(--pt-warn-line2); color:var(--pt-warn-text); }
.pt-cal__day--leave   { background:var(--pt-accent-tint); border-color:#e2d8ff; color:#5b3bb8; }
.pt-cal__day--today   { background:var(--pt-ink-band); border-color:var(--pt-ink-band); color:#fff; font-weight:600; }
@media (max-width: 640px) { .pt-cal__day { height:38px; border-radius:9px; padding:0;
    display:grid; place-items:center; border:0; font-size:12px; } }

/* ─── Mobile: sticky action bar + tab bar ────────────────────────── */
.pt-sticky { position:sticky; bottom:0; padding:12px 16px 14px;
             background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
             border-top:1px solid var(--pt-border); }
.pt-tabbar { position:sticky; bottom:0; display:grid; grid-template-columns:repeat(5,1fr);
             padding:8px 12px 6px; background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
             border-top:1px solid var(--pt-border); }
.pt-tabbar a { height:48px; display:flex; flex-direction:column; align-items:center;
               justify-content:center; gap:4px; text-decoration:none;
               font:400 9.5px var(--pt-font); color:var(--pt-muted); }
.pt-tabbar a.is-active { color:var(--pt-text); font-weight:500; }