:root {
  /* Base shell tokens */
  --ink:        #1b2230;
  --ink-soft:   #5a6478;
  --line:       #e2e6ee;
  --bg:         #f5f7fb;
  --card:       #ffffff;
  --primary:    #1f3a8a;
  --primary-d:  #16306f;
  --accent:     #c8961e;   /* academic gold */
  --danger:     #b3261e;
  --ok-bg:      #e7f4ec;
  --ok-ink:     #1d6b3f;
  --radius:     10px;
  --shadow:     0 1px 2px rgba(20,30,60,.06), 0 4px 16px rgba(20,30,60,.05);

  /* Page-level tokens */
  --navy: #122A43;
  --gold: #B5852E;
  --gold-hover: #9a7026;
  --cream: #F6F2E9;
  --text: #1B2B65;

  /* Status colours */
  --ok-fg: #1d6b3f;
  --ok-bd: #bfe2cd;
  --err-bg: #fdeceb;
  --err-fg: #b3261e;
  --err-bd: #f3c5c1;
  --warn-bg: #fff3cd;
  --warn-fg: #856404;
  --warn-bd: #f0d060;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.25rem;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .2px;
  color: #fff;
  text-decoration: none;
}
.brand-icon { width: 26px; height: 26px; border-radius: 6px; background: #fff2; object-fit: cover; }
.topnav { display: flex; align-items: center; gap: 1rem; }
.topnav a { color: #dfe6ff; text-decoration: none; font-weight: 500; }
.topnav a:hover { color: #fff; }

/* ---- Layout ---- */
.container { max-width: 1180px; margin: 1.5rem auto; padding: 0 1.25rem; }
.page-h1 { font-size: 1.4rem; margin: .2rem 0 1.2rem; }

/* ---- Buttons ---- */
.btn, .btn-primary {
  display: inline-block;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: .5rem .9rem;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #eef1f8; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #2a2204;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; }
.btn-reset { background: #e8ecf3; border-color: #b7c0cf; color: var(--primary); font-weight: 600; }
.btn-reset:hover { background: #dce2ef; }

/* ---- Flash ---- */
.flash {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border: 1px solid #bfe2cd;
  padding: .6rem .9rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 500;
}

/* ---- Filters ---- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  background: var(--card);
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.filters input[type=search], .filters select {
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.filters input[type=search] { min-width: 260px; flex: 1; }
.count { color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 .8rem; }

/* ---- Table ---- */
.table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table.grid { width: 100%; border-collapse: collapse; font-size: .88rem; white-space: nowrap; }
table.grid thead th {
  position: sticky; top: 0;
  background: #eef1f8;
  text-align: left;
  padding: .6rem .7rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
table.grid tbody td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
table.grid tbody tr:hover { background: #f8faff; }
table.grid .empty { text-align: center; color: var(--ink-soft); padding: 2rem; white-space: normal; }
.actions-col { white-space: nowrap; }
.link { color: var(--primary); text-decoration: none; font-weight: 500; background: none; border: none; cursor: pointer; font: inherit; padding: 0 .3rem; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--danger); }
.inline-del { display: inline; }

/* ---- Form ---- */
.entry-form fieldset,
fieldset.entry-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem 1.3rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow);
}
.entry-form legend {
  font-weight: 700;
  color: var(--primary);
  padding: 0 .4rem;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem 1.1rem;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.form-grid input, .form-grid select {
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.form-grid input:focus, .form-grid select:focus,
.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,58,138,.12);
}
.form-grid small { font-weight: 400; color: #98a1b3; font-size: .72rem; }
.form-actions { display: flex; gap: .7rem; align-items: center; margin-top: .4rem; }

/* ---- Footer ---- */
.footer {
  max-width: 1180px;
  margin: 2rem auto 1.5rem;
  padding: 0 1.25rem;
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: .8rem;
}

@media (max-width: 560px) {
  .filters input[type=search] { min-width: 100%; }
  .footer { flex-direction: column; gap: .3rem; }
}

/* ===================================================================
   Excel-like sheet
   =================================================================== */
.formula-bar {
  display: flex; align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .35rem .5rem;
  margin-bottom: .8rem;
}
.formula-bar .filters { all: unset; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; width: 100%; }
.fx {
  font-style: italic; font-weight: 700; color: var(--ink-soft);
  border-right: 1px solid var(--line); padding: 0 .6rem 0 .3rem; margin-right: .2rem;
}
.formula-bar input[type=search], .formula-bar select {
  padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff;
}
.formula-bar input[type=search] { min-width: 240px; flex: 1; }
.formula-bar .count { margin-left: auto; color: var(--ink-soft); font-size: .85rem; }

.sheet-wrap {
  overflow: auto;
  max-height: 72vh;
  border: 1px solid #b7c0cf;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow);
}

/* core grid */
table.sheet {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .82rem;
  white-space: nowrap;
  background:
    /* faint cell grid even past content */
    #fff;
}
table.sheet th, table.sheet td {
  border-right: 1px solid #d6dce6;
  border-bottom: 1px solid #d6dce6;
  padding: .32rem .5rem;
  background-clip: padding-box;
}

/* header: column letters (A B C) */
.sheet thead .col-letters th {
  position: sticky; top: 0; z-index: 6;
  background: #e8ecf3;
  color: #5a6478;
  font-weight: 600;
  text-align: center;
  font-size: .72rem;
  height: 20px;
}
/* header: field names */
.sheet thead .field-row th {
  position: sticky; top: 20px; z-index: 6;
  background: #eef1f8;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid #b7c0cf;
}

/* top-left corner cells (the # / blank box) */
.sheet thead th.corner {
  position: sticky; left: 0; z-index: 8;
  background: #dfe4ec; text-align: center; color: #5a6478;
}
.sheet thead .col-letters th.corner { top: 0; }
.sheet thead .field-row th.corner   { top: 20px; }

/* Excel row-number column (frozen left) */
.sheet td.rownum {
  position: sticky; left: 0; z-index: 4;
  background: #eef1f8;
  color: #5a6478;
  text-align: center;
  font-weight: 600;
  border-right: 2px solid #b7c0cf;
  min-width: 38px;
}

.sheet tbody td { color: var(--ink); }
.sheet tbody tr:hover td { background: #eef6ff; }
.sheet tbody tr:hover td.rownum { background: #dfe9fb; }
.sheet .mono   { font-variant-numeric: tabular-nums; font-family: "Consolas","SF Mono",ui-monospace,monospace; }
.sheet .num    { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .center { text-align: center; }
.sheet .cell-name { font-weight: 600; }
.sheet .empty  { text-align: center; color: var(--ink-soft); padding: 2rem; white-space: normal; }
.sheet .actions-col { white-space: nowrap; text-align: center; }
.sheet th.act-letter { background: #e8ecf3; text-align: center; color: #5a6478; font-weight: 600; font-size: .72rem; position: sticky; top: 0; }

/* ===================================================================
   Top bar: user chip + roles
   =================================================================== */
.user-chip { display: inline-flex; align-items: center; gap: .4rem; color: #dfe6ff; font-weight: 600; }
.role { font-style: normal; font-size: .66rem; text-transform: uppercase; letter-spacing: .5px;
  padding: .1rem .4rem; border-radius: 999px; }
.role-admin { background: var(--accent); color: #2a2204; }
.role-user  { background: #ffffff33; color: #fff; }
.logout { color: #ffd9d6 !important; }

/* ===================================================================
   Login
   =================================================================== */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--primary); }
.login-card {
  background: #fff; width: 340px; max-width: 92vw;
  padding: 2rem 1.8rem; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: .8rem;
}
.login-logo { width: 54px; height: 54px; border-radius: 12px; align-self: center; object-fit: cover; }
.login-card h1 { font-size: 1.15rem; text-align: center; margin: .2rem 0 0; }
.login-sub { text-align: center; color: var(--ink-soft); margin: 0 0 .4rem; font-size: .9rem; }
.login-card label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.login-card input { padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.login-btn { margin-top: .5rem; padding: .6rem; }
.flash-err { background: #fdeceb; color: var(--danger); border: 1px solid #f3c5c1; }

/* ===================================================================
   Cards / bulk upload
   =================================================================== */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 1.2rem 1.4rem; }
.steps { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.7; }
.steps code { background: #eef1f8; padding: .05rem .35rem; border-radius: 4px; font-size: .85em; }
.upload-form { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.upload-form input[type=file] { font: inherit; }

/* ===================================================================
   Grid entry (Excel-style data entry)
   =================================================================== */
.grid-toolbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .55rem .7rem; margin-bottom: .7rem;
}
.grid-toolbar .hint { color: var(--ink-soft); font-size: .75rem; min-width: 0; white-space: nowrap; }
.grid-toolbar #saveAll { margin-left: auto; }

/* editable cells inside the spreadsheet */
table.grid-input td { padding: 0; }
table.grid-input td.rownum { padding: .32rem .5rem; }
table.grid-input input,
table.grid-input select {
  width: 100%; border: none; background: transparent;
  padding: .3rem .35rem; font: inherit; color: var(--ink);
  box-sizing: border-box;
  display: block;
  outline: none;
}
table.grid-input input[type=hidden],
table.grid-input input[type=file] { display: none; }
table.grid-input input:focus,
table.grid-input select:focus {
  background-color: #fffbe9;
}
table.grid-input select { -webkit-appearance: none; appearance: none; cursor: pointer; }

.result { margin-top: 1rem; font-size: .9rem; padding: .2rem 0; }
.result.err  { color: var(--danger); }
.result.warn { color: #8a6d00; }
.result.err b, .result.warn b { color: inherit; }

/* ===================================================================
   Grid entry — dropdown arrow, range selection, file/date cells
   =================================================================== */
/* visible caret on every dropdown (grid + forms) */
table.grid-input select,
.form-grid select,
.filters select,
.formula-bar select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%235a6478'/></svg>");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  padding-right: 1.4rem !important;
}

/* Excel-style range highlight */
table.grid-input td.sel {
  background: #d6e4ff;
  box-shadow: inset 0 0 0 1px #6f9bff;
}
table.grid-input td.sel input,
table.grid-input td.sel select { background-color: transparent; }

/* date + file cells */
table.grid-input input[type=date] { min-width: 0; font-size: .78rem; }
table.grid-input input[type=file] { font-size: .72rem; padding: .25rem .3rem; }
table.grid-input td .fname { display: inline-block; font-size: .7rem; color: var(--ink-soft); padding: 0 .35rem; }
table.grid-input td .fname a { color: var(--ok-ink); }
/* Compact font for tight grid */
table.grid-input { font-size: .78rem; }
table.grid-input input, table.grid-input select { font-size: .78rem; }
table.grid-input .actions-col { white-space: nowrap; }
table.grid-input .btn-sm { padding: .15rem .3rem; font-size: .72rem; }

/* ===================================================================
   Auto-fit grid columns to content  (+ user/password forms, export)
   =================================================================== */
/* Entry page grid: auto width, scrolls horizontally if needed */
table.grid-input {
  width: max-content;
  min-width: 100%;
}
table.grid-input input:not([type=date]):not([type=file]):not([type=hidden]),
table.grid-input select {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
/* Compact column hints via min/max on cells */
table.grid-input td, table.grid-input th { white-space: nowrap; }
table.grid-input td[data-c="0"] { min-width: 120px; } /* Student Name */
table.grid-input td[data-c="1"] { min-width: 100px; } /* Student Code */
table.grid-input td[data-c="2"] { min-width: 62px; }  /* Gender */
table.grid-input td[data-c="3"],
table.grid-input td[data-c="4"] { min-width: 105px; } /* Dates */
table.grid-input td[data-c="5"] { min-width: 100px; } /* Organisation */
table.grid-input td[data-c="6"],
table.grid-input td[data-c="7"],
table.grid-input td[data-c="8"],
table.grid-input td[data-c="9"],
table.grid-input td[data-c="10"] { min-width: 62px; }
table.grid-input td[data-c="11"] { min-width: 90px; } /* PPO Desig */
table.grid-input td[data-c="12"] { min-width: 55px; } /* CTC */

/* Shrink-wrap grid for grid_entry.php (non-entry grid) */
table.sheet:not(.grid-input) { width: auto; }

.btn-export { border-color: var(--ok-ink); color: var(--ok-ink); font-weight: 600; }
.btn-export:hover { background: var(--ok-bg); }

/* user-mgmt + password forms */
.row-form   { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row-form input, .row-form select { padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.stack-form { display: flex; flex-direction: column; gap: .8rem; }
.stack-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.stack-form input { padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.stack-form small { font-weight: 400; color: #98a1b3; font-size: .72rem; }
.inline-form { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.inline-form select, .inline-form input { padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.muted { color: var(--ink-soft); }
.card.pad h3 { font-size: 1rem; }

/* ===================================================================
   Course detail readout bar (shown under programme filter when Credit Based)
   =================================================================== */
.course-readout {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  background: #f8faf5;
  border: 1px solid #d6e0c8;
  border-radius: var(--radius);
  padding: .5rem .8rem;
  margin-bottom: .8rem;
  font-size: .82rem;
  color: var(--ink);
}

/* ===================================================================
   Master tabs
   =================================================================== */
.master-tabs {
  display: flex; gap: 0; margin-bottom: 1rem;
  border-bottom: 2px solid var(--line);
}
.tab-btn {
  padding: .6rem 1.2rem; border: none; background: none;
  font: inherit; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: all .15s;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ===================================================================
   Document status badges
   =================================================================== */
.doc-status {
  display: inline-block; padding: .15rem .5rem; border-radius: 4px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  user-select: none;
}
.doc-no  { color: var(--danger); background: #fdeceb; }
.doc-yes { color: var(--ok-ink); background: var(--ok-bg); }
.doc-na  { color: var(--ink-soft); background: #eee; }

/* ===================================================================
   Small action buttons in grid
   =================================================================== */
.btn-sm {
  padding: .2rem .45rem; font-size: .78rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; cursor: pointer;
  transition: background .12s;
}
.btn-sm:hover { background: #eef1f8; }
.btn-sm.btn-primary { background: var(--accent); border-color: var(--accent); color: #2a2204; }
.btn-sm.btn-danger { color: var(--danger); }
.btn-sm.btn-danger:hover { background: #fdeceb; }

/* ===================================================================
   Read-only fields (course detail display)
   =================================================================== */
.readonly-field {
  background: #f0f2f6 !important;
  color: var(--ink-soft) !important;
  cursor: default;
}

/* ===================================================================
   Modal overlay (search student)
   =================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.4); display: flex;
  align-items: center; justify-content: center;
}
.modal-box {
  background: #fff; border-radius: 12px; padding: 1.5rem;
  width: 500px; max-width: 92vw; max-height: 80vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-box h3 { margin: 0 0 .5rem; }
.search-result:hover { background: #eef6ff; }

/* ===================================================================
   Row highlight for pending mandatory documents
   =================================================================== */
tr.row-doc-pending td {
  background: #fff8e6 !important;
  border-bottom-color: #f0d060;
}
tr.row-doc-pending td.rownum {
  background: #f5e6a0 !important;
  color: #8a6d00;
}

/* hidden element utility */
.hidden-el { visibility: hidden; pointer-events: none; height: 0; overflow: hidden; }

/* doc upload button wrapper */
.doc-upload-btn { cursor: pointer; display: inline-block; }

/* Entry page: near-full width (1 inch margin each side) */
.container-wide { max-width: calc(100% - 192px); padding: 0; }
@media (max-width: 1200px) { .container-wide { max-width: 100%; padding: 0 .5rem; } }
.container-wide .page-h1 { margin-bottom: .8rem; }

/* ==========================================================================
   theme.css — Internship Data Entry System
   Single external stylesheet. All page CSS previously held in inline <style>
   blocks now lives here, scoped by a body-level page class.

   Load order per page:
     assets/style.css   (base shell: layout, buttons, topbar — header.php pages)
     theme.css          (this file)

   Body classes:
     .page-home    index.php, index3.php
     .page-report  report.php
     .page-entry   entry.php
     .page-master  master.php
     .page-users   users.php
     .page-bulk    bulk.php
     .page-login   login.php

   Contents
     1.  Design tokens
     2.  Shared components (toast, modal, utilities)
     3.  Home  — landing page
     4.  Home  — sheet toolbar
     5.  Home  — sheet table + frozen columns
     6.  Home  — column sizing
     7.  Home  — inline edit + upload badges
     8.  Home  — pager / empty state
     9.  Report page
     10. Entry page
     11. Master page
     12. Users page
     13. Bulk upload page
   ========================================================================== */


/* ==========================================================================
   1. PAGE-LOCAL TOKEN OVERRIDES
   ========================================================================== */

body.page-home {
  --border: #d0d5dd;
}

body.page-report {
  --panel: #FCFAF3;
  --wash: #F3EEE0;
  --border: #E4DCC9;
  --green: #1F7A52;
  --red: #B23A2E;
  --slate: #6E7A86;
}

/* Reset for the standalone pages (those that do not load assets/style.css) */
body.page-home, body.page-home * { box-sizing: border-box; margin: 0; padding: 0; }
body.page-home .rtopbar, body.page-home .rtopbar * { margin: revert; padding: revert; box-sizing: border-box; }
body.page-home .rtopbar { padding: 12px 22px; }
body.page-home .rtopnav a { padding: 6px 10px; }
body.page-home .rtopnav .user-chip { padding: 5px 10px; }
body.page-report, body.page-report * { box-sizing: border-box; }

body.page-home {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: #f0f2f5;
  color: var(--text);
}

body.page-report {
  margin: 0;
  background: var(--cream);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--navy);
}


/* ==========================================================================
   2. SHARED COMPONENTS
   ========================================================================== */

/* --- Toast ---------------------------------------------------------------- */

.toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 999; padding: .8rem 2rem; border-radius: 10px;
  font-weight: 600; font-size: .95rem; text-align: center; min-width: 250px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  animation: toastIn .25s ease;
}
.toast-ok  { background: var(--ok-bg);  color: var(--ok-fg);  border: 1px solid var(--ok-bd); }
.toast-err { background: var(--err-bg); color: var(--err-fg); border: 1px solid var(--err-bd); }

body.page-home .toast {
  z-index: 9999; padding: .7rem 1.5rem; border-radius: 8px;
  font-size: .9rem; min-width: 220px; animation: fadeIn .2s;
}
body.page-entry .toast { min-width: 280px; animation: fadeIn .2s; }

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --- Modal shell ---------------------------------------------------------- */

.modal-bg {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .4); align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }

.modal-box {
  background: #fff; border-radius: 12px; padding: 1.5rem 1.8rem;
  width: 480px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal-box h3 { margin: 0 0 1rem; font-size: 1.1rem; color: var(--primary); }

.modal-form { display: flex; flex-direction: column; gap: .7rem; }
.modal-form label {
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
}
.modal-form input, .modal-form select {
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: .88rem;
}
.modal-form input:focus, .modal-form select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 58, 138, .1);
}
.modal-form .row { display: flex; gap: .5rem; }
.modal-form .row > * { flex: 1; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

/* --- Small utilities ------------------------------------------------------ */

.is-hidden { display: none !important; }
.stretch   { flex: 1; }
.nowrap    { white-space: nowrap; }
.t-right   { text-align: right; }
.self-end  { align-self: flex-end; }
.mb-half   { margin-bottom: .5rem; }
.mt-half   { margin-top: .5rem; }

.iw-40  { width: 40px; }
.iw-60  { width: 60px; }
.iw-70  { width: 70px; }
.iw-80  { width: 80px; }
.iw-110 { width: 110px; }
.iw-120 { width: 120px; }
.iw-140 { width: 140px; }
.iw-160 { width: 160px; }
.iw-180 { width: 180px; }
.iw-full { width: 100%; }


/* ==========================================================================
   3. HOME — LANDING PAGE
   ========================================================================== */

body.page-home .landing-hero {
  background: var(--navy); color: #fff; text-align: center; padding: 50px 20px 40px;
}
body.page-home .landing-hero .sub {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 8px;
}
body.page-home .landing-hero h1 {
  font-family: "Fraunces", serif; font-size: 32px; font-weight: 800; margin-bottom: 10px;
}
body.page-home .landing-hero p { font-size: 14px; color: rgba(255, 255, 255, .7); }
body.page-home .landing-hero p a { color: var(--gold); text-decoration: none; font-weight: 600; }

body.page-home .landing-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  max-width: 960px; margin: -30px auto 60px; padding: 0 20px;
  position: relative; z-index: 2;
}
@media (max-width: 700px) {
  body.page-home .landing-panels { grid-template-columns: 1fr; }
}

body.page-home .panel {
  background: #fff; border: 2px solid var(--border); border-radius: 12px;
  padding: 32px; position: relative; transition: box-shadow .2s;
}
body.page-home .panel:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, .1); }
body.page-home .panel.report { border-color: var(--navy); }
body.page-home .panel.admin  { border-color: var(--gold); }

body.page-home .panel-icon {
  width: 44px; height: 44px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;
}
body.page-home .panel.report .panel-icon { background: #E8EAF6; color: var(--navy); }
body.page-home .panel.admin  .panel-icon { background: #FFF3E0; color: var(--gold); }

body.page-home .panel-badge {
  position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 800;
  letter-spacing: 1px; padding: 3px 10px; border-radius: 4px;
}
body.page-home .badge-open       { background: #E8F5E9; color: #2E7D32; }
body.page-home .badge-restricted { background: #FFF3E0; color: #E65100; }

body.page-home .panel h2 {
  font-family: "Fraunces", serif; font-size: 22px; font-weight: 700; margin-bottom: 8px;
}
body.page-home .panel p {
  font-size: 13.5px; color: #6b7280; line-height: 1.6; margin-bottom: 20px;
}

body.page-home .panel-links { display: flex; flex-direction: column; gap: 0; }
body.page-home .panel-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid #f0f0f0; border-radius: 6px; margin-bottom: 6px;
  text-decoration: none; color: var(--text); font-size: 14px; font-weight: 500;
  transition: background .15s;
}
body.page-home .panel-link:hover { background: #f8f9fc; }
body.page-home .panel-link i:first-child {
  margin-right: 10px; color: #9ca3af; width: 18px; text-align: center;
}
body.page-home .panel-link .arrow { color: #ccc; font-size: 12px; }
body.page-home .panel-link .lock  { color: var(--gold); margin-left: 4px; }

body.page-home .panel-footer {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #f0f0f0;
  display: flex; justify-content: space-between; align-items: center;
}
body.page-home .panel-footer span { font-size: 12px; color: #9ca3af; }

body.page-home .btn-panel {
  padding: 10px 22px; border: none; border-radius: 6px; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
body.page-home .btn-report { background: var(--navy); color: #fff; }
body.page-home .btn-report:hover { background: #1a3a5c; }
body.page-home .btn-admin { background: var(--gold); color: #fff; border: none; }
body.page-home .btn-admin:hover { background: var(--gold-hover); }

/* --- Login modal (landing) ------------------------------------------------ */

body.page-home .modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 25, 50, .55); align-items: center; justify-content: center;
}
body.page-home .modal-overlay.open { display: flex; }
body.page-home .modal-box {
  background: #fff; width: 400px; max-width: 92vw; border-radius: 12px;
  padding: 36px 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  text-align: center; position: relative; animation: modalPop .15s ease-out;
}
@keyframes modalPop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

body.page-home .modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 20px; color: #aaa; cursor: pointer;
}
body.page-home .modal-close:hover { color: #333; }
body.page-home .modal-box img { width: 64px; height: 64px; border-radius: 12px; margin-bottom: 12px; }
body.page-home .modal-box h3 {
  font-family: "Fraunces", serif; font-size: 20px; font-weight: 700; margin-bottom: 4px; color: inherit;
}
body.page-home .modal-box .modal-sub { font-size: 12px; color: #9ca3af; margin-bottom: 24px; }

body.page-home .modal-field { text-align: left; margin-bottom: 14px; }
body.page-home .modal-field label {
  display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #6b7280; margin-bottom: 5px;
}
body.page-home .modal-field input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px; outline: none;
}
body.page-home .modal-field input:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18, 42, 67, .1);
}
body.page-home .btn-login {
  width: 100%; padding: 12px; background: var(--gold); color: #fff; border: none;
  border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px;
}
body.page-home .btn-login:hover { background: var(--gold-hover); }
body.page-home .login-error { color: #c62828; font-size: 12.5px; margin-top: 10px; min-height: 18px; }


/* ==========================================================================
   4. HOME — TOP BAR + SHEET TOOLBAR
   ========================================================================== */

/* Home page uses the shared .rtopbar / .rtopnav rules (see UNIFIED TOP BAR). */

body.page-home .main-content { padding: 0; }

body.page-home .sheet-tabs {
  background: #fff; border: 1px solid var(--border); border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 0 16px; display: flex; align-items: center;
}
body.page-home .sheet-tab {
  padding: 10px 16px; font-size: 13px; font-weight: 700;
  color: var(--navy); border-bottom: 3px solid var(--gold);
}

body.page-home .filter-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: #fff; border: 1px solid var(--border); border-top: none; flex-wrap: wrap;
}
body.page-home .filter-form {
  display: flex; gap: 6px; align-items: center; flex: 1; flex-wrap: wrap;
}
body.page-home .per-page {
  display: flex; align-items: center; gap: 3px; font-size: 10px; color: #555;
}
body.page-home .filter-bar .search-icon { color: #9ca3af; font-size: 13px; }
body.page-home .filter-bar input[type=text] {
  border: 1px solid var(--border); border-radius: 5px; padding: 6px 10px;
  font-size: 12px; width: 200px; outline: none;
}
body.page-home .filter-bar input:focus {
  border-color: var(--navy); box-shadow: 0 0 0 2px rgba(31, 58, 138, .08);
}
body.page-home .filter-bar select {
  border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; outline: none;
}
body.page-home .filter-bar .btn {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 5px;
  background: #fff; font-weight: 600; color: var(--text);
  text-decoration: none; cursor: pointer;
}
body.page-home .filter-bar .btn:hover { background: #f0f2f8; }
body.page-home .filter-bar .btn-primary {
  background: var(--gold); color: #fff; border-color: var(--gold);
}
body.page-home .filter-bar .btn-primary:hover { background: var(--gold-hover); }
body.page-home .filter-bar .row-count { color: #6b7280; margin-left: auto; white-space: nowrap; }


/* ==========================================================================
   5. HOME — SHEET TABLE + FROZEN COLUMNS
   ========================================================================== */

body.page-home .sheet-scroll {
  overflow: auto; max-height: calc(100vh - 190px); background: #fff;
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
body.page-home .sheet-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
body.page-home .sheet-scroll::-webkit-scrollbar-track { background: #f0f1f5; }
body.page-home .sheet-scroll::-webkit-scrollbar-thumb { background: #b0b5c5; border-radius: 5px; }

body.page-home .sheet-table {
  width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .76rem; border-left: 1px solid #C5CAE9; border-top: 1px solid #C5CAE9;
}
body.page-home .sheet-table th {
  background: #E8EAF6; padding: 8px 6px; text-align: left; font-weight: 700;
  color: var(--navy); white-space: nowrap; font-size: .72rem; letter-spacing: .2px;
  border: none; border-right: 1px solid #C5CAE9; border-bottom: 1px solid #C5CAE9;
}
body.page-home .sheet-table td {
  padding: 5px 6px; border: none; border-right: 1px solid #E8EAF0;
  border-bottom: 1px solid #E8EAF0; vertical-align: top; font-size: .76rem;
  line-height: 1.4; background: #fff; white-space: nowrap;
}
body.page-home .sheet-table tbody tr:nth-child(even) td { background: #FAFBFE; }
body.page-home .sheet-table tbody tr:hover td { background: #FFF9E6 !important; }

/* Sticky header row */
body.page-home .frz-top { position: sticky; top: 0; z-index: 6; }
body.page-home .sheet-table thead .frz-top { z-index: 7; }
body.page-home .sheet-table thead .frz-l.frz-top { z-index: 12; }
body.page-home .sheet-table thead .frz-r.frz-top { z-index: 12; }

/* Sticky left columns */
body.page-home .frz-l {
  position: sticky; z-index: 4; background: #fff;
  border-right: 1px solid #E8EAF0 !important;
}
body.page-home .sheet-table thead .frz-l {
  z-index: 8; background: #E8EAF6; border-right: 1px solid #C5CAE9 !important;
}
body.page-home .sheet-table tbody tr:nth-child(even) .frz-l { background: #FAFBFE; }
body.page-home .sheet-table tbody tr:hover .frz-l { background: #FFF9E6 !important; }
body.page-home .frz-l-last {
  border-right: 2px solid #C5CAE9 !important;
  box-shadow: 4px 0 8px rgba(0, 0, 0, .08); clip-path: inset(0 -8px 0 0);
}

/* Sticky right column */
body.page-home .frz-r {
  position: sticky; right: 0; z-index: 4; background: #F5F6FA;
  border-left: 2px solid #C5CAE9 !important;
  box-shadow: -4px 0 8px rgba(0, 0, 0, .08); clip-path: inset(0 0 0 -8px);
}
body.page-home .sheet-table thead .frz-r { z-index: 8; background: #E8EAF6; }
body.page-home .sheet-table tbody tr:nth-child(even) .frz-r { background: #F5F6FA; }
body.page-home .sheet-table tbody tr:hover .frz-r { background: #FFF9E6 !important; }


/* ==========================================================================
   6. HOME — COLUMN SIZING
   Frozen-column `left` offsets used to be inline style attributes; they are
   derived from the cumulative widths declared immediately below, so keep the
   two in sync when a column width changes.
   ========================================================================== */

body.page-home .col-rn {
  left: 0; width: 36px; min-width: 36px; text-align: center; font-weight: 700;
  color: var(--navy); background: #F5F6FA !important; font-size: .76rem;
}
body.page-home .fc-type {
  left: 36px; width: 100px; min-width: 100px; max-width: 100px;
  white-space: normal; word-break: break-word;
}
body.page-home .fc-sess { left: 136px; width: 90px; min-width: 90px; max-width: 90px; }
body.page-home .fc-dept { left: 226px; width: 65px; min-width: 65px; max-width: 65px; }
body.page-home .fc-prog {
  left: 291px; width: 160px; min-width: 160px; max-width: 160px;
  white-space: normal; word-break: break-word;
}
body.page-home .fc-name {
  left: 451px; width: 180px; min-width: 180px; max-width: 180px;
  white-space: normal; word-break: break-word; font-weight: 600;
}
body.page-home .fc-code {
  left: 631px; width: 130px; min-width: 130px; max-width: 130px;
  font-family: "IBM Plex Mono", monospace;
}
body.page-home .fc-from { left: 761px; width: 82px; min-width: 82px; max-width: 82px; }

body.page-home .col-actions {
  text-align: center; white-space: nowrap; min-width: 90px; width: 90px;
}
body.page-home .sc { overflow: hidden; text-overflow: ellipsis; }

/* Scrolling data columns */
body.page-home .c-todate   { min-width: 82px; }
body.page-home .c-gender   { min-width: 55px; text-align: center; }
body.page-home th.c-org    { width: 120px; }
body.page-home td.c-org    { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
body.page-home .c-orgtype  { min-width: 65px; text-align: center; }
body.page-home .c-paid     { min-width: 70px; text-align: center; }
body.page-home .c-stipend  { min-width: 65px; text-align: right; }
body.page-home .c-provided { min-width: 60px; text-align: center; }
body.page-home .c-credit   { min-width: 70px; }
body.page-home th.c-credit { text-align: center; }
body.page-home .c-crvalue  { min-width: 45px; text-align: center; }
body.page-home .c-course   { min-width: 110px; white-space: normal; }
body.page-home .c-crcode   { min-width: 65px; }
body.page-home .c-sem      { min-width: 50px; }
body.page-home .c-duration { min-width: 70px; }
body.page-home .c-cert     { min-width: 50px; text-align: center; }
body.page-home .c-ppo      { min-width: 45px; text-align: center; }
body.page-home .c-ppodesig { min-width: 95px; }
body.page-home td.c-ppodesig { max-width: 85px; overflow: hidden; text-overflow: ellipsis; }
body.page-home .c-ctc      { min-width: 55px; text-align: right; }
body.page-home .c-ppoltr   { min-width: 55px; text-align: center; }
body.page-home .c-other    { min-width: 55px; text-align: center; }


/* ==========================================================================
   7. HOME — INLINE EDIT + UPLOAD BADGES
   ========================================================================== */

body.page-home .actions a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px; color: #6b7280;
  text-decoration: none; font-size: .76rem;
}
body.page-home .actions a:hover { background: #f0f2f5; color: var(--navy); }
body.page-home .actions a.del:hover { background: #fce4e4; color: #c62828; }

.upload-badge {
  display: inline-block; padding: 2px 6px; border-radius: 5px; font-size: .68rem;
  font-weight: 700; cursor: pointer; user-select: none; border: 1px solid;
  text-align: center; min-width: 32px;
}
.ub-yes {
  background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); text-decoration: none;
}
.ub-yes-sm { font-size: .65rem; }
.ub-no {
  background: var(--err-bg); color: var(--gold); border-color: var(--err-bd); cursor: default;
}
.ub-upload {
  background: var(--err-bg); color: var(--err-fg); border-color: var(--err-bd);
}
.ub-upload:hover { filter: brightness(.95); }
.ub-uploading {
  background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd);
}
body.page-home .upload-badge {
  display: inline-block; padding: 2px 6px; border-radius: 5px; font-size: .68rem;
  font-weight: 700; cursor: pointer; user-select: none; border: 1px solid;
  text-align: center; min-width: 32px;
}
body.page-home .ub-yes {
  background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); text-decoration: none;
}
body.page-home .ub-yes-sm { font-size: .65rem; }
body.page-home .ub-no {
  background: var(--err-bg); color: var(--gold); border-color: var(--err-bd); cursor: default;
}
body.page-home .ub-upload {
  background: var(--err-bg); color: var(--err-fg); border-color: var(--err-bd);
}
body.page-home .ub-upload:hover { filter: brightness(.95); }
body.page-home .ub-uploading {
  background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd);
}
body.page-home .ro-val { font-size: .72rem; color: #888; font-style: italic; }

body.page-home .doc-file-input { display: none; }

body.page-home .cell-edit select { padding-right: 18px; min-width: 0; text-overflow: ellipsis; }
body.page-home tr.editing td      { background: #FFFDE7 !important; }
body.page-home tr.editing .frz-l  { background: #FFFDE7 !important; }
body.page-home tr.editing .frz-r  { background: #FFFDE7 !important; }
body.page-home tr.editing .cell-display { display: none; }
body.page-home tr.editing .cell-edit    { display: inline-block; }
body.page-home .cell-edit { display: none; }
body.page-home .cell-edit input,
body.page-home .cell-edit select {
  width: 100%; border: 1px solid var(--border); border-radius: 3px;
  padding: .25rem .3rem; font-size: .76rem; appearance: auto; outline: none;
  background: #fff; box-sizing: border-box;
}
body.page-home .cell-edit input:focus,
body.page-home .cell-edit select:focus {
  border-color: var(--navy); box-shadow: 0 0 0 1px rgba(31, 58, 138, .1);
}
body.page-home .cell-edit input[type=file] { padding: 1px; border: none; }

body.page-home .edit-actions { display: flex; gap: 3px; justify-content: center; }
body.page-home .edit-actions button {
  padding: 4px 8px; font-size: .72rem; border-radius: 4px;
  border: none; cursor: pointer; font-weight: 600;
}
body.page-home .btn-save { background: var(--gold); color: #fff; }
body.page-home .btn-save:hover { background: var(--gold-hover); }
body.page-home .btn-cancel { background: #e5e7eb; color: var(--text); }
body.page-home .btn-cancel:hover { background: #d1d5db; }


/* ==========================================================================
   8. HOME — PAGER / EMPTY STATE
   ========================================================================== */

/* ---- Shared pager ---- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 10px 4px;
}
.pager-info { font-size: 11.5px; color: #6b7280; }
.pager-btns { display: flex; gap: 3px; }
.pager-btns .pg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid var(--border, #d0d5dd);
  border-radius: 4px; color: var(--navy); text-decoration: none; background: #fff;
  font-size: 12px;
}
.pager-btns .pg:hover { background: #f0f2f8; }
.pager-btns .pg.active {
  background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700;
}
.pager-btns .pg.disabled { opacity: .4; pointer-events: none; }
.pg-gap { padding: 0 4px; color: #9ca3af; }
.pager-jump {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 6px; font-size: 12px; color: #6b7280;
}
.pager-jump label { font-weight: 500; }
.pager-jump-input {
  width: 48px; height: 28px; text-align: center; border: 1px solid var(--border, #d0d5dd);
  border-radius: 4px; font-size: 12px; padding: 0 4px;
  -moz-appearance: textfield;
}
.pager-jump-input::-webkit-outer-spin-button,
.pager-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager-jump-of { font-size: 11.5px; color: #9ca3af; }
.pager-jump-btn {
  height: 28px; padding: 0 10px; border: 1px solid var(--navy); border-radius: 4px;
  background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.pager-jump-btn:hover { opacity: .85; }

body.page-home .empty-state {
  text-align: center; padding: 50px 20px; color: #9ca3af; font-size: 14px;
  background: #fff; border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 6px 6px;
}
body.page-home .empty-icon {
  font-size: 36px; display: block; margin-bottom: 12px; color: #d0d5dd;
}
body.page-home .empty-link { color: var(--gold); font-weight: 600; }


/* ==========================================================================
   9. REPORT PAGE
   ========================================================================== */

/* Report top bar now comes from the shared .rtopbar block at the end of this
   file — page-specific overrides removed so every page matches. */

body.page-report .rpt { max-width: 1250px; margin: 0 auto; padding: 18px 20px 60px; }
body.page-report .rpt h2 {
  font-family: "Fraunces", serif; font-size: 20px; font-weight: 700; margin-bottom: 14px;
}

/* --- Filters -------------------------------------------------------------- */
body.page-report .rpt-filter {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 18px;
}
body.page-report .rpt-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
body.page-report .ff { display: flex; flex-direction: column; gap: 4px; }
body.page-report .ff label {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600;
  color: var(--slate); text-transform: uppercase; letter-spacing: .3px;
}
body.page-report .ff select,
body.page-report .ff input[type=date] {
  border: 1px solid var(--border); border-radius: 5px; padding: 7px 9px;
  font-size: 13px; font-family: inherit;
}
body.page-report .rpt-apply {
  padding: 8px 18px; background: var(--gold); color: #fff; border: none;
  border-radius: 5px; font-weight: 600; font-size: 13px; cursor: pointer;
}
body.page-report .rpt-reset {
  padding: 8px 16px; background: var(--wash); color: var(--navy); border: none;
  border-radius: 5px; font-weight: 600; font-size: 13px; text-decoration: none;
}

/* --- Summary cards -------------------------------------------------------- */
body.page-report .rpt-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;
}
body.page-report .rcard {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--navy);
  border-radius: 8px; padding: 16px 18px; cursor: pointer; transition: box-shadow .15s;
}
body.page-report .rcard:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
body.page-report .rcard .rc-num {
  font-size: 28px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums;
}
body.page-report .rcard .rc-lbl {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--slate);
  text-transform: uppercase; letter-spacing: .4px; margin-top: 3px;
}
body.page-report .rcard.gold { border-left-color: var(--gold); }
body.page-report .rcard.gold .rc-num { color: var(--gold); }

/* --- Tabs ----------------------------------------------------------------- */
body.page-report .tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid #D6CCB4; margin-bottom: 16px;
}
body.page-report .tab {
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--slate);
  background: none; border: none; border-bottom: 3px solid transparent;
  cursor: pointer; margin-bottom: -2px;
}
body.page-report .tab.active { color: var(--navy); border-bottom-color: var(--gold); }
body.page-report .tab-panel { display: none; }
body.page-report .tab-panel.active { display: block; }

/* --- Charts --------------------------------------------------------------- */
body.page-report .rpt-charts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px;
}
body.page-report .chart-box {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
}
body.page-report .chart-box h3 {
  font-family: "Fraunces", serif; font-size: 13px; font-weight: 700; margin: 0 0 10px;
}
body.page-report .chart-wrap { position: relative; height: 280px; }

/* --- Tables --------------------------------------------------------------- */
body.page-report .rpt-tbl-box {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; margin-bottom: 16px;
}
body.page-report .rpt-tbl-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
body.page-report .rpt-tbl-hd h3 { font-family: "Fraunces", serif; font-size: 14px; margin: 0; }
body.page-report .btn-xlsx {
  background: var(--wash); border: 1px solid var(--border); border-radius: 5px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--navy); text-decoration: none;
}
body.page-report .btn-xlsx:hover { background: #E9E2CF; }
body.page-report .rpt-tbl-scroll { max-height: 400px; overflow: auto; }

body.page-report table.rtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
body.page-report table.rtbl th {
  position: sticky; top: 0; z-index: 2; background: var(--panel);
  padding: 8px 12px; text-align: left; font-weight: 700;
  border-bottom: 2px solid #D6CCB4; font-size: 12px;
}
body.page-report table.rtbl td { padding: 8px 12px; border-bottom: 1px solid var(--wash); }
body.page-report table.rtbl td.num { text-align: center; font-variant-numeric: tabular-nums; }
body.page-report table.rtbl td.total { font-weight: 700; }
body.page-report table.rtbl tbody tr:hover td { background: var(--panel); }
body.page-report table.rtbl tbody tr { cursor: pointer; }
body.page-report table.rtbl tfoot td {
  position: sticky; bottom: 0; font-weight: 800;
  background: var(--wash); border-top: 2px solid #D6CCB4;
}

/* --- Crosstab ------------------------------------------------------------- */
body.page-report .ct-scroll { max-height: 500px; overflow: auto; }
body.page-report table.ctbl {
  border-collapse: separate; border-spacing: 0; font-size: 12.5px;
  width: max-content; min-width: 100%;
}
body.page-report table.ctbl th,
body.page-report table.ctbl td {
  padding: 7px 10px; border-bottom: 1px solid var(--wash);
  border-right: 1px solid var(--wash); text-align: center;
}
body.page-report table.ctbl thead th {
  position: sticky; top: 0; z-index: 3; background: var(--panel); font-weight: 700;
}
body.page-report table.ctbl td:first-child,
body.page-report table.ctbl th:first-child {
  position: sticky; left: 0; background: var(--panel); z-index: 4;
  text-align: left; font-weight: 700;
}
body.page-report table.ctbl thead th:first-child { z-index: 6; }
body.page-report table.ctbl tfoot td {
  position: sticky; bottom: 0; z-index: 5; background: var(--wash); font-weight: 800;
}
body.page-report table.ctbl tfoot td:first-child { z-index: 7; background: var(--wash); }
body.page-report table.ctbl td.cell { cursor: pointer; }
body.page-report table.ctbl td.cell:hover { background: #F6EFDC !important; }

/* --- Drill-down modal ----------------------------------------------------- */
body.page-report .dm-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 25, 50, .55); align-items: center; justify-content: center;
}
body.page-report .dm-overlay.open { display: flex; }
body.page-report .dm {
  background: #fff; width: 960px; max-width: 95vw; max-height: 88vh;
  border-radius: 9px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .32);
}
body.page-report .dm-hd {
  background: var(--navy); color: #fff; padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
}
body.page-report .dm-hd h3 {
  margin: 0; font-size: 15px; font-weight: 700; font-family: "Fraunces", serif;
}
body.page-report .dm-hd .dm-x {
  background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
}
body.page-report .dm-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; background: var(--panel);
  border-bottom: 1px solid var(--border); font-size: 13px;
}
body.page-report .dm-body { overflow: auto; padding: 0; }
body.page-report .dm-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
body.page-report .dm-body th,
body.page-report .dm-body td {
  padding: 8px 12px; border-bottom: 1px solid var(--wash); text-align: left;
}
body.page-report .dm-body th { position: sticky; top: 0; background: var(--panel); font-weight: 700; }
body.page-report .dm-body tbody tr:hover td { background: var(--panel); }
body.page-report .dm-loading { padding: 40px; text-align: center; color: var(--slate); }

/* --- Multi-select --------------------------------------------------------- */
body.page-report .ms { position: relative; }
body.page-report .ms-btn {
  min-width: 140px; border: 1px solid var(--border); background: #fff;
  border-radius: 5px; padding: 7px 10px; font-size: 13px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
body.page-report .ms-caret { font-size: 10px; }
body.page-report .ms-panel {
  display: none; position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  min-width: 200px; max-height: 260px; overflow: auto; padding: 6px;
}
body.page-report .ms.open .ms-panel { display: block; }
body.page-report .ms-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  font-size: 13px; border-radius: 4px; cursor: pointer;
}
body.page-report .ms-item:hover { background: var(--panel); }
body.page-report .ms-item input { width: 15px; height: 15px; }
body.page-report .ms-all {
  font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

@media (max-width: 900px) {
  body.page-report .rpt-cards  { grid-template-columns: 1fr 1fr; }
  body.page-report .rpt-charts { grid-template-columns: 1fr; }
}


/* ==========================================================================
   10. ENTRY PAGE
   ========================================================================== */

body.page-entry main.container { max-width: calc(100% - 192px); padding: 0; }
@media (max-width: 1200px) {
  body.page-entry main.container { max-width: 100%; padding: 0 .5rem; }
}

body.page-entry table.grid-input td { padding: 0; }
body.page-entry table.grid-input input,
body.page-entry table.grid-input select {
  border: none !important; outline: none !important; box-shadow: none !important;
  background: transparent; width: 100%; padding: .3rem .35rem;
  box-sizing: border-box; display: block; font-size: .76rem;
}
body.page-entry table.grid-input input:focus,
body.page-entry table.grid-input select:focus { background-color: transparent !important; }
body.page-entry table.grid-input input[type=hidden],
body.page-entry table.grid-input input[type=file] { display: none !important; }

/* No column-letter row on this page, so the field row is the sticky top row */
body.page-entry #studentGrid thead .field-row th { top: 0 !important; }

body.page-entry .prog-cell {
  background: #f0f2f6 !important; color: var(--ink-soft); font-size: .7rem;
  font-weight: 600; padding: .3rem .4rem !important; white-space: nowrap;
}
body.page-entry tr:hover .prog-cell { background: #e8ecf3 !important; }
body.page-entry .prog-auto {
  font-size: .7rem; font-weight: 600; color: var(--ink-soft);
  padding: .3rem .2rem; display: block;
}
body.page-entry .edit-prog-sel,
body.page-entry .edit-credit-sel,
body.page-entry .edit-course-sel {
  font-size: .72rem !important; padding: .25rem .3rem !important;
  border: 1px solid var(--primary) !important; border-radius: 4px;
  background: #fffbe9 !important; cursor: pointer; width: 100%;
}
body.page-entry .na-cell {
  color: #bbb; font-style: italic; font-size: .7rem;
  text-align: center; padding: .3rem .2rem !important;
}

/* --- Searchable dropdown -------------------------------------------------- */
body.page-entry .cell-dd { position: relative; }
body.page-entry .dd-list {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  max-height: 160px; overflow-y: auto; min-width: 100%; font-size: .78rem;
}
body.page-entry .dd-list.open { display: block; }
body.page-entry .dd-item { padding: .35rem .6rem; cursor: pointer; }
body.page-entry .dd-item:hover { background: #eef1f8; }
body.page-entry .dd-item.active { background: #d6e4ff; font-weight: 600; }

/* --- Upload buttons ------------------------------------------------------- */
body.page-entry .upload-btn {
  display: inline-block; padding: .2rem .5rem; border-radius: 5px;
  font-size: .7rem; font-weight: 700; cursor: pointer; user-select: none;
  border: 1px solid; text-align: center; min-width: 36px;
}
body.page-entry .upload-btn-no  { background: var(--err-bg); color: var(--danger); border-color: var(--err-bd); }
body.page-entry .upload-btn-yes { background: var(--ok-bg);  color: var(--ok-fg);  border-color: var(--ok-bd); }
body.page-entry .upload-btn-na  { background: #f5f5f5; color: #bbb; border-color: #ddd; cursor: default; }
body.page-entry .upload-btn-wait { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
body.page-entry .upload-btn:hover:not(.upload-btn-na) { filter: brightness(.95); }
body.page-entry .upload-link { color: inherit; text-decoration: none; }

/* --- Sortable headers ----------------------------------------------------- */
body.page-entry .sortable { cursor: pointer; user-select: none; position: relative; }
body.page-entry .sortable:hover { background: #dfe4ec !important; }
body.page-entry .sort-icon { font-size: .65rem; color: #aaa; margin-left: 2px; }
body.page-entry .sortable.asc  .sort-icon { color: var(--primary); }
body.page-entry .sortable.asc  .sort-icon::after { content: '▲'; }
body.page-entry .sortable.desc .sort-icon { color: var(--primary); }
body.page-entry .sortable.desc .sort-icon::after { content: '▼'; }
body.page-entry .sortable.asc  .sort-icon,
body.page-entry .sortable.desc .sort-icon { font-size: 0; }

/* --- Column filter inputs ------------------------------------------------- */
body.page-entry .col-filter {
  display: block; width: 100%; border: none; border-top: 1px solid var(--line);
  padding: .2rem .3rem; font-size: .68rem; background: #fff; color: var(--ink);
  outline: none; margin-top: .25rem; border-radius: 3px;
}
body.page-entry .col-filter:focus { box-shadow: 0 0 0 1px var(--primary); }
body.page-entry .col-filter::placeholder { color: #ccc; }

/* --- Page bits ------------------------------------------------------------ */
body.page-entry .modal-box { width: 500px; padding: 1.5rem; }
body.page-entry .modal-box h3 { font-size: 1.1rem; }
body.page-entry .modal-form { gap: .6rem; }
body.page-entry .modal-form input,
body.page-entry .modal-form select { font-size: inherit; }

body.page-entry .toolbar-hint { margin: 0 0 .5rem; font-weight: 600; }
body.page-entry .sheet-wrap-tall { max-height: 65vh; }
body.page-entry .formula-bar-top {
  margin-bottom: 0; border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
body.page-entry .rows-per-page { width: auto; }
body.page-entry .btn-mini { font-size: .78rem; padding: .3rem .6rem; }
body.page-entry .actions-col { white-space: nowrap; }
body.page-entry .status-msg { margin-top: .5rem; }
body.page-entry .course-meta { margin: 0; font-size: .82rem; color: var(--ink-soft); }


/* ==========================================================================
   11. MASTER PAGE
   ========================================================================== */

body.page-master .master-wrap { max-width: 1100px; margin: 0 auto; }

body.page-master .master-tabs {
  display: flex; gap: 0; margin-bottom: 0; background: var(--card);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
}
body.page-master .tab-btn {
  padding: .7rem 1.4rem; border: none; background: #f0f2f6; font: inherit;
  font-weight: 600; font-size: .88rem; color: var(--ink-soft); cursor: pointer;
  border-right: 1px solid var(--line); transition: all .15s;
}
body.page-master .tab-btn:last-child { border-right: none; }
body.page-master .tab-btn:hover { background: #e4e8f0; color: var(--ink); }
body.page-master .tab-btn.active {
  background: var(--card); color: var(--primary); box-shadow: inset 0 3px 0 var(--accent);
}
body.page-master .tab-panel {
  display: none; background: var(--card); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
}
body.page-master .tab-panel.active { display: block; }

body.page-master .master-add {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: #fafbfd;
}
body.page-master .master-add h3 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--primary); margin: 0 0 .7rem; font-weight: 700;
}
body.page-master .add-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
body.page-master .add-field { display: flex; flex-direction: column; gap: .2rem; }
body.page-master .add-field label {
  font-size: .72rem; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .3px;
}
body.page-master .add-field input,
body.page-master .add-field select {
  padding: .42rem .55rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: .85rem; color: var(--ink); background: #fff;
}
body.page-master .add-field input:focus,
body.page-master .add-field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 58, 138, .1);
}

body.page-master .bulk-bar {
  display: flex; gap: .5rem; align-items: center; padding: .6rem 1.2rem;
  border-bottom: 1px solid var(--line); background: #f8faf5;
}
body.page-master .bulk-bar .btn { font-size: .8rem; padding: .35rem .7rem; }
body.page-master .bulk-bar input[type=file] { font-size: .8rem; }
body.page-master .bulk-bar .bulk-status { font-size: .82rem; color: var(--ink-soft); margin-left: .5rem; }

body.page-master .master-table { max-height: 55vh; overflow: auto; }
body.page-master .master-table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
body.page-master .master-table thead th {
  position: sticky; top: 0; z-index: 2; background: #eef1f8; color: var(--ink);
  font-weight: 700; padding: .5rem .7rem; text-align: left; border-bottom: 2px solid #b7c0cf;
}
body.page-master .master-table tbody td { padding: .45rem .7rem; border-bottom: 1px solid var(--line); }
body.page-master .master-table tbody tr:hover td { background: #f5f8ff; }
body.page-master .master-table .num {
  text-align: center; color: var(--ink-soft); font-weight: 600; width: 40px;
}
body.page-master .master-table .mono { font-family: "Consolas", "SF Mono", monospace; font-weight: 600; }
body.page-master .master-table .actions { white-space: nowrap; text-align: right; width: 120px; }
body.page-master .master-table .actions button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 600; padding: .2rem .4rem; border-radius: 4px;
}
body.page-master .master-table .actions .btn-edit { color: var(--primary); }
body.page-master .master-table .actions .btn-edit:hover { background: #eef1f8; }
body.page-master .master-table .actions .btn-del { color: var(--danger); }
body.page-master .master-table .actions .btn-del:hover { background: var(--err-bg); }

body.page-master .badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  font-size: .72rem; font-weight: 600;
}
body.page-master .badge-credit    { background: var(--ok-bg); color: var(--ok-fg); }
body.page-master .badge-noncredit { background: #f0f2f6; color: var(--ink-soft); }

body.page-master .empty-row td {
  text-align: center; color: var(--ink-soft); padding: 1.5rem; font-style: italic;
}
body.page-master .ed-input {
  padding: .3rem .4rem; border: 1px solid var(--primary); border-radius: 4px;
  font: inherit; font-size: .84rem; width: 100%; box-shadow: 0 0 0 2px rgba(31, 58, 138, .1);
}


/* ==========================================================================
   12. USERS PAGE
   ========================================================================== */

body.page-users .um-wrap { max-width: 1100px; margin: 0 auto; }

body.page-users .um-add {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.2rem; margin-bottom: 1rem;
}
body.page-users .um-add h3 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--primary); margin: 0 0 .7rem; font-weight: 700;
}
body.page-users .um-form-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
body.page-users .um-field { display: flex; flex-direction: column; gap: .2rem; }
body.page-users .um-field-grow { flex: 1; min-width: 160px; }
body.page-users .um-field label {
  font-size: .72rem; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .3px;
}
body.page-users .um-field input,
body.page-users .um-field select {
  padding: .42rem .55rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: .85rem; color: var(--ink); background: #fff;
}
body.page-users .um-field input:focus,
body.page-users .um-field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 58, 138, .1);
}

body.page-users .um-table-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
body.page-users .um-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
body.page-users .um-table thead th {
  background: #eef1f8; color: var(--ink); font-weight: 700;
  padding: .55rem .7rem; text-align: left; border-bottom: 2px solid #b7c0cf;
}
body.page-users .um-table tbody td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
body.page-users .um-table tbody tr:hover td { background: #f5f8ff; }
body.page-users .um-table .num {
  text-align: center; color: var(--ink-soft); font-weight: 600; width: 36px;
}
body.page-users .um-table .mono {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace; font-weight: 600;
}
body.page-users .um-table .col-created { font-size: .8rem; }
body.page-users .um-you-tag { color: var(--accent); font-size: .7rem; font-weight: 700; }

body.page-users .role-badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
body.page-users .role-badge-admin { background: var(--accent); color: #2a2204; }
body.page-users .role-badge-user  { background: #e8ecf3; color: var(--ink-soft); }

body.page-users .perm-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
body.page-users .perm-pill {
  display: inline-block; padding: .12rem .4rem; border-radius: 4px;
  font-size: .68rem; font-weight: 600; letter-spacing: .2px;
}
body.page-users .perm-on   { background: var(--ok-bg); color: var(--ok-fg); }
body.page-users .perm-off  { background: #f5f5f5; color: #ccc; text-decoration: line-through; }
body.page-users .perm-warn { background: var(--warn-bg); color: var(--warn-fg); }

body.page-users .um-actions { white-space: nowrap; text-align: right; }
body.page-users .um-actions button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: .78rem; font-weight: 600; padding: .25rem .5rem; border-radius: 4px;
}
body.page-users .um-actions .act-edit  { color: var(--primary); }
body.page-users .um-actions .act-edit:hover  { background: #eef1f8; }
body.page-users .um-actions .act-reset { color: #8a6d00; }
body.page-users .um-actions .act-reset:hover { background: #fff8e6; }
body.page-users .um-actions .act-del   { color: var(--danger); }
body.page-users .um-actions .act-del:hover   { background: var(--err-bg); }
body.page-users .um-actions .act-you   { color: #aaa; font-size: .72rem; font-style: italic; }

body.page-users .perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; }
body.page-users .perm-check {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 500; color: var(--ink); cursor: pointer;
}
body.page-users .perm-check input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--primary);
}
body.page-users .perm-label {
  font-size: .82rem; font-weight: 700; color: var(--primary); margin-top: .3rem;
}
body.page-users .field-note { font-weight: 400; color: #98a1b3; }
body.page-users .reset-note { margin: 0; color: var(--ink-soft); }


/* ==========================================================================
   13. BULK UPLOAD PAGE
   ========================================================================== */

body.page-bulk .bulk-wrap { max-width: 700px; margin: 0 auto; }
body.page-bulk .bulk-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1rem;
}
body.page-bulk .bulk-card h3 { margin: 0 0 1rem; color: var(--primary); }

body.page-bulk .upload-area {
  border: 2px dashed var(--line); border-radius: 10px; padding: 2rem;
  text-align: center; margin: 1rem 0; background: #fafbfd;
}
body.page-bulk .upload-area:hover { border-color: var(--primary); background: #f5f7ff; }
body.page-bulk .upload-area input[type=file] { font-size: 1rem; }
body.page-bulk .upload-area p { margin: 0 0 .5rem; font-weight: 600; }
body.page-bulk .btn-upload { width: 100%; padding: .7rem; font-size: 1rem; }

body.page-bulk .result-box { margin: 1rem 0; padding: 1rem; border-radius: 8px; }
body.page-bulk .result-ok  { background: var(--ok-bg);  border: 1px solid var(--ok-bd);  color: var(--ok-fg); }
body.page-bulk .result-err { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err-fg); }

body.page-bulk .err-list { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .85rem; }
body.page-bulk .err-list li { padding: .2rem 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
body.page-bulk .err-list li::before { content: '⚠ '; }

body.page-bulk .steps { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
body.page-bulk .steps b { color: var(--ink); }

body.page-bulk .btn-download-err {
  display: inline-block; margin-top: .5rem; padding: .4rem 1rem;
  background: var(--err-fg); color: #fff; border-radius: 6px;
  text-decoration: none; font-weight: 600; font-size: .85rem;
}
body.page-bulk .btn-download-err:hover { background: #8c1d17; }

body.page-bulk .bulk-back { text-align: center; margin-top: 1rem; }

/* ==========================================================================
   SORTABLE TABLE COLUMNS
   ========================================================================== */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after {
  content: '\f0dc'; /* fa-sort */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  margin-left: 5px; font-size: .7em; opacity: .35;
}
th.sortable.sort-asc::after  { content: '\f0de'; opacity: .9; } /* fa-sort-up */
th.sortable.sort-desc::after { content: '\f0dd'; opacity: .9; } /* fa-sort-down */

/* ==========================================================================
   UNIFIED TOP BAR — one navbar style for every page (report-bar style).
   Used by topbar_html() in navbar.php, so index.php, report.php and all
   layout_header() pages render an identical bar.
   ========================================================================== */
.rtopbar {
  background: var(--navy); color: #fff; padding: 12px 22px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.rtopbar .brand {
  display: flex; align-items: center; gap: 8px;
  font-family: "Fraunces", serif; font-size: 16px; font-weight: 700;
  color: #fff; text-decoration: none;
}
.rtopbar .brand img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; background: #ffffff22; }
.rtopnav { display: flex; gap: 6px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.rtopnav a {
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 6px 10px; border-radius: 5px; white-space: nowrap;
}
.rtopnav a:hover { background: rgba(255, 255, 255, .12); }
.rtopnav a.active { background: var(--gold); color: #fff; }
.rtopnav a.logout { color: #ffd9d6; }
.rtopnav a.logout:hover { background: rgba(255, 90, 80, .22); }
.rtopnav .user-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .15); padding: 5px 10px; border-radius: 4px;
  font-size: 12.5px; font-weight: 700; color: #fff;
}
.rtopnav .role {
  font-style: normal; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .5px; padding: .1rem .4rem; border-radius: 999px;
}
.rtopnav .role-admin { background: var(--gold); color: #fff; }
.rtopnav .role-user  { background: #ffffff33; color: #fff; }

@media (max-width: 760px) {
  .rtopbar { padding: 10px 14px; }
  .rtopnav { gap: 2px; font-size: 12px; }
  .rtopnav a { padding: 5px 7px; font-size: 12px; }
}

/* ==========================================================================
   ACCOUNT TYPES, MANAGE USERS, DOCUMENT UPLOAD
   ========================================================================== */

/* --- account type badges (used in nav chip, users table, legend) --------- */
.acct-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.acct-admin      { background: #e8eaf6; color: #1a237e; }
.acct-data_entry { background: #e3f2fd; color: #0d47a1; }
.acct-data_entry_doc { background: #e8f5e9; color: #1b5e20; }
.acct-doc_upload { background: #fff3e0; color: #e65100; }
.acct-view_only  { background: #eceff1; color: #455a64; }
.rtopnav .role-admin      { background: var(--gold); color: #fff; }
.rtopnav .role-data_entry { background: #42a5f5; color: #fff; }
.rtopnav .role-data_entry_doc { background: #66bb6a; color: #fff; }
.rtopnav .role-doc_upload { background: #e6842233; color: #ffd9a8; }
.rtopnav .role-view_only  { background: #ffffff33; color: #fff; }

/* --- account type legend table ------------------------------------------ */
.um-legend { margin-bottom: 1rem; }
.um-legend h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--primary); }
.um-legend-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.um-legend-table th {
  background: var(--navy); color: #fff; padding: 6px 9px;
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px;
}
.um-legend-table td { padding: 6px 9px; border-bottom: 1px solid var(--line); }
.um-legend-table .yes { color: var(--ok-fg); font-weight: 700; }
.um-legend-table .no  { color: var(--err-fg); font-weight: 700; }
.um-legend-note { margin: .7rem 0 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }

/* --- department picker --------------------------------------------------- */
.dept-picker {
  margin-top: .8rem; padding: .8rem 1rem; background: #f8f9ff;
  border: 1px solid #c5cae9; border-radius: 8px;
}
.dept-picker h4 { margin: 0 0 .5rem; font-size: .8rem; color: var(--primary); text-transform: uppercase; letter-spacing: .4px; }
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
.dept-grid label {
  display: flex; align-items: center; gap: 6px; font-size: .82rem;
  padding: 3px 6px; border-radius: 4px; cursor: pointer;
}
.dept-grid label:hover { background: #e8eaf6; }
.dept-grid input[type=checkbox] { accent-color: var(--primary); }
.dept-tools { margin-top: .5rem; display: flex; gap: .4rem; }
.btn-xs { padding: .2rem .6rem !important; font-size: .74rem !important; }
.dept-admin-note {
  margin-top: .8rem; padding: .6rem .9rem; border-radius: 6px; font-size: .82rem;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-fg); font-weight: 600;
}
.dept-none { font-size: .78rem; color: #9aa3b2; font-style: italic; }

/* --- department tags in the users table ---------------------------------- */
.dept-tags { display: flex; flex-wrap: wrap; gap: 3px; max-width: 330px; }
.dept-tag {
  background: #e8eaf6; color: #1a237e; padding: 1px 7px;
  border-radius: 3px; font-size: .68rem; font-weight: 600; white-space: nowrap;
}
.dept-tag.dept-all { background: #fff3e0; color: #e65100; }
.status-active   { color: var(--ok-fg);  font-weight: 700; font-size: .78rem; }
.status-inactive { color: var(--err-fg); font-weight: 700; font-size: .78rem; }
.um-empty { text-align: center; color: #9aa3b2; padding: 1.4rem; }
.modal-wide { max-width: 640px; }
.iw-200 { width: 200px; }
.t-center { text-align: center; }

/* --- read-only / scope tags on the records sheet -------------------------- */
.mode-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-fg);
}
.mode-tag.mode-dept { background: #e8eaf6; border-color: #c5cae9; color: #1a237e; }
.act-none { color: #ccd2dd; }

/* --- document upload page ------------------------------------------------ */
.du-intro { margin: 0 0 .9rem; font-size: .86rem; color: var(--ink-soft); }
.du-scope { display: inline-block; margin-left: .5rem; font-weight: 700; color: var(--primary); }
.du-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .7rem .9rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: .8rem;
}
.du-filter input[type=text] { flex: 1 1 240px; padding: .45rem .6rem; border: 1px solid #bbc2d0; border-radius: 5px; font-size: .85rem; }
.du-filter select { padding: .45rem .6rem; border: 1px solid #bbc2d0; border-radius: 5px; font-size: .85rem; }
.du-check { display: flex; align-items: center; gap: 5px; font-size: .82rem; }
.du-check input { accent-color: var(--primary); }

.du-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.du-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.du-table th {
  background: var(--navy); color: #fff; padding: 7px 10px; text-align: left;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .4px;
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.du-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.du-table tr:nth-child(even) td { background: #fafbfe; }
.du-table tr:hover td { background: #eef1fb; }
.du-doc { white-space: nowrap; }
.du-doc .du-file { display: none; }
.du-doc .ub-upload { margin-left: 5px; border: none; cursor: pointer; font-family: inherit; }
.du-empty { text-align: center; color: #9aa3b2; padding: 1.6rem; }

/* ==========================================================================
   DEPARTMENT PICKER — compact, scrollable, searchable
   Overrides .modal-form's column layout, which otherwise stacks each
   checkbox above its label and stretches it to full width.
   ========================================================================== */
.modal-form .dept-picker label,
.dept-picker .dept-grid label {
  flex-direction: row !important;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 6px;
  margin: 0;
}
.modal-form .dept-picker input[type=checkbox],
.dept-picker input[type=checkbox] {
  width: 15px; height: 15px; min-width: 15px;
  padding: 0; margin: 0; border-radius: 3px;
  accent-color: var(--primary); flex: 0 0 auto;
  box-shadow: none;
}

.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid #dfe3f0;
  border-radius: 6px;
}
.dept-grid::-webkit-scrollbar { width: 8px; }
.dept-grid::-webkit-scrollbar-thumb { background: #c5cae9; border-radius: 4px; }

/* search + counter row above the grid */
.dept-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .45rem; flex-wrap: wrap;
}
.dept-head h4 { margin: 0; }
.modal-form .dept-search, .dept-search {
  flex: 1 1 140px; min-width: 120px;
  padding: .3rem .55rem !important; font-size: .8rem !important;
  border: 1px solid #c5cae9 !important; border-radius: 5px !important;
}
.dept-count {
  font-size: .74rem; font-weight: 700; color: var(--primary);
  background: #e8eaf6; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.dept-count.zero { background: var(--err-bg); color: var(--err-fg); }
.dept-grid label.hide { display: none; }

/* the edit modal needs to scroll once the picker is inside it */
.modal-box { max-height: 88vh; overflow-y: auto; }
.modal-wide { width: 620px; }