/* ���������������������������������������������������������������
 * nlp-datatable.css
 *
 * NextEducation design-system data-table. Applied directly to the
 * existing Angular Material / legacy selectors so EVERY table in
 * the app adopts the new visual language without opt-in wrappers.
 *
 *   md-table-container / .md-table-container   → (transparent shell)
 *   table.md-table / .md-custom-table / .report-table
 *   thead th / .md-column                        → header cells
 *   tbody td / .md-cell                          → body cells
 *   tbody tr / .md-row                           → row-cards
 *   md-table-pagination                          → footer
 *
 * ───────────────────────────────────────────────────────────────
 * Defaults (every md-table picks these up):
 *   • Row-style:  cards   (56 px pill-cards, 8 px spacing, hover lift)
 *   • Header:     simple  (white, 12 px, muted labels)
 *   • Separator:  subtle  (only visible under data-rowstyle="rows") 
 *   • Cell text:  13 px Inter / 400
 *   • Name cell:  14 px Inter / 600 (via .student-name)
 *
 * Per-table opt-in overrides (data-* on the container): 
 *   data-rowstyle="rows"                → flat table with bottom rules
 *   data-header="simple | gray | blue"  → header theme
 *   data-density="compact|comfortable|spacious"
 *   data-separator="none|subtle|strong|zebra"
 *
 * ───────────────────────────────────────────────────────────────
 * Load order: AFTER default_new.css (which imports tokens.css).
 * Wired in index.jsp right after default_new.css.
 * ��������������������������������������������������������������� */


/* ───────────────────────────────────────────────────────────────
 * § 1  ·  CONTAINER
 * The outer shell is transparent so the row-cards (default style)
 * float on the page canvas. When data-rowstyle="rows" kicks in,
 * §5 restores a card-wrapped shell.
 * ─────────────────────────────────────────────────────────────── */
 md-table-container {
    display: flex;
    flex: 1;
    flex-direction: column;
}
md-table-container,
.md-table-container {
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 100%;
  /* Default (cards mode): no outer margin — cards already carry their
   * own breathing room via row shadow / spacing. Rows-mode gets margin
   * below so flat tables have room to sit away from page chrome. */
  margin: 0;
  /* Modest safety-net min-height in case the flex-fill chain below
   * gets blocked by a layout we don't anticipate. Flex does the real
   * work; this just prevents pagination from collapsing. */
  overflow: auto;
}
.md-table-pagination>.buttons>.md-button.md-icon-button {
	padding: 0;
}
/* Rows-mode gets 20 px margin — flat tables need breathing room from
 * page chrome since there's no card shadow to create visual separation. */
md-table-container[data-rowstyle="rows"],
.md-table-container[data-rowstyle="rows"] {
  margin: 20px;
}

/* Flex-fill chain — make <md-content> and every intermediate <div>
 * ancestor of <md-table-container> a flex column so the container's
 * `flex: 1` actually stretches to fill viewport height. Pagination's
 * `margin-top: auto` then floats it to the bottom edge.
 * Uses :has() — Chrome 105+, Firefox 121+, Safari 15.4+.
 * Scoped via :has() so non-table pages are not affected. */
md-content:has(md-table-container),
md-content:has(.md-table-container) {
  display: flex;
  flex-direction: column;
}
/* md-content:has(md-table-container) div:has(md-table-container),
md-content:has(.md-table-container) div:has(.md-table-container) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
} */

/* Bare-table fallback margin — only for rows-mode tables without a
 * <md-table-container> wrapper (mark-entry, mark-entry-excel, new-budget
 * all got data-rowstyle="rows"). Cards-mode bare tables inherit 0. */
table.md-custom-table[data-rowstyle="rows"],
table.md-table[data-rowstyle="rows"],
table.report-table[data-rowstyle="rows"] {
  margin: 20px;
  border-spacing: 0;
}
/* Reset when the table sits inside a container — container's rule wins;
 * avoids stacking 20 + 20 = 40 px around nested rows-mode tables. */
md-table-container table.md-custom-table,
md-table-container table.md-table,
md-table-container table.report-table,
.md-table-container table.md-custom-table,
.md-table-container table.md-table,
.md-table-container table.report-table {
  margin: 0;
  position: relative;
  z-index: 1;
}


/* ───────────────────────────────────────────────────────────────
 * § 2  ·  TABLE BASE
 * ─────────────────────────────────────────────────────────────── */
table.md-table,
table.md-custom-table,
table.report-table {
  width: 100%;
  background: transparent;
  font-size: 13px;
  color: var(--color-text-primary, #0F172A);
  border-collapse: separate;
  border-spacing: 0 8px;
  padding: 0 16px 8px;
  overflow: unset;
}
table.md-custom-table.md-table td.md-cell{
	text-align:left;
}
table.md-table md-checkbox, 
table.md-custom-table md-checkbox, 
table.report-table md-checkbox {
    border-spacing: 0;
}

/* ───────────────────────────────────────────────────────────────
 * § 3  ·  HEADER CELLS
 * Defaults = "simple" theme (white, 12 px muted). Variants set
 * CSS variables via [data-header="gray|blue"] below.
 * ─────────────────────────────────────────────────────────────── */
table.md-custom-table > thead > tr > th,
table.md-custom-table th.md-column,
.md-custom-table thead th,
.report-table thead th,
.report-table th.md-column,
table.md-table > thead > tr > th {
  background: var(--th-bg, transparent);
  color: var(--th-color, var(--color-text-muted, #7e8b9e));
  font-weight: var(--th-weight, 500);
  font-size: var(--th-size, 13px);
  text-transform: var(--th-case, none);
  letter-spacing: var(--th-tracking, 0);
  padding: var(--th-pad, 14px 16px);
  border-bottom: 1px solid var(--th-border, var(--color-border-subtle, #F1F5F9));
  border-top: none !important;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 9;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
table.md-table th.md-column.md-sort:hover{
	color: #0F172A;
}
table.md-table thead.md-head, table.md-custom-table thead.md-head, table.report-table thead.md-head {
    position: sticky;
    top: 0;
    z-index: 9;
    background: radial-gradient(1200px 600px at 85% -10%, rgba(37, 99, 235, 0.05), transparent 60%), var(--color-surface-app, #F8FAFC);
}
/* Sort icon */
.md-custom-table thead th md-icon,
.md-custom-table thead th .md-sort-icon,
table.md-table th.md-column .md-sort-icon {
  color: currentColor !important;
  opacity: 0.55 !important;
  font-size: 16px;
  min-height: 16px;
  min-width: 16px;
  vertical-align: middle;
}
.md-custom-table thead th.md-sorted .md-sort-icon,
.md-custom-table thead th[sorted] .md-sort-icon,
table.md-table th.md-column.md-sorted .md-sort-icon {
  color: var(--color-accent-600, #2563EB);
  opacity: 1 !important;
}

/* Header theme: gray (dark slate) */
md-table-container[data-header="gray"],
.md-table-container[data-header="gray"] {
  --th-bg: #1E293B;
  --th-color: rgba(255, 255, 255, 0.88);
  --th-weight: 600;
  --th-size: 12px;
  --th-case: none;
  --th-tracking: 0;
  --th-font: var(--font-family-display, "Outfit", sans-serif);
  --th-pad: 12px 16px;
  --th-border: #0F172A;
}

/* Header theme: blue (brand gradient) */
md-table-container[data-header="blue"],
.md-table-container[data-header="blue"] {
  --th-bg: linear-gradient(180deg,
    var(--color-accent-700, #1D4ED8),
    var(--color-accent-600, #2563EB));
  --th-color: rgba(255, 255, 255, 0.92);
  --th-weight: 600;
  --th-size: 11px;
  --th-case: uppercase;
  --th-tracking: 0.08em;
  --th-border: var(--color-accent-700, #1D4ED8);
}

/* Dark-header hover / sort-icon whites */
md-table-container[data-header="blue"] .md-sort-icon,
md-table-container[data-header="gray"] .md-sort-icon,
.md-table-container[data-header="blue"] .md-sort-icon,
.md-table-container[data-header="gray"] .md-sort-icon {
  color: rgba(255, 255, 255, 0.85) !important;
}
md-table-container[data-header="blue"] thead th:hover,
md-table-container[data-header="gray"] thead th:hover,
.md-table-container[data-header="blue"] thead th:hover,
.md-table-container[data-header="gray"] thead th:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}


/* ───────────────────────────────────────────────────────────────
 * § 4  ·  ROW-CARDS (default)
 * Each tr is a 56 px pill-card. Hover = lift + accent-tinted
 * shadow. Selected = accent fill + ring outline.
 * ─────────────────────────────────────────────────────────────── */
.md-custom-table tbody tr,
table.md-custom-table > tbody > tr,
.report-table tbody tr,
table.md-table > tbody > tr.md-row {
  background: var(--color-surface-base, #fff) !important;
  border: 1px solid var(--color-border-default, #E2E8F0) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  height: 56px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s, background 0.12s;
}
/* No internal cell borders in cards mode — whole row shares the border */
.md-custom-table tbody tr > td,
table.md-custom-table > tbody > tr > td,
.report-table tbody tr > td,
table.md-table > tbody > tr > td {
  padding: 4px 16px !important;
  border: none !important;
  background: transparent !important;
  font-size: 13px;
  color: var(--color-text-secondary, #475569);
  font-weight: 400;
  line-height: 1.4;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}
/* First / last cells round the row's corners cleanly */
.md-custom-table tbody tr > td:first-child,
.report-table tbody tr > td:first-child,
table.md-table > tbody > tr > td:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.md-custom-table tbody tr > td:last-child,
.report-table tbody tr > td:last-child,
table.md-table > tbody > tr > td:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Hover — card lifts with accent-tinted shadow */
.md-custom-table tbody tr:hover,
table.md-custom-table > tbody > tr:hover,
.report-table tbody tr:hover,
table.md-table > tbody > tr.md-row:hover {
  border-color: var(--color-accent-300, #93C5FD) !important;
  box-shadow:
    0 4px 16px -4px rgba(37, 99, 235, 0.15),
    0 2px 4px rgba(15, 23, 42, 0.04) !important;
  transform: translateY(-1px);
  background: var(--color-surface-base, #fff) !important;
}

/* Selected (md-selected) — accent fill + ring outline */
.md-custom-table tbody tr.md-selected,
table.md-custom-table > tbody > tr.md-selected,
table.md-table > tbody > tr.md-row.md-selected {
  background: var(--color-accent-50, #EFF6FF) !important;
  border-color: var(--color-accent-500, #3B82F6) !important;
  box-shadow:
    0 0 0 1px var(--color-accent-500, #3B82F6),
    0 4px 16px -4px rgba(37, 99, 235, 0.2) !important;
}

/* No-results row inside a cards table */
.md-custom-table tbody tr.no-results,
.report-table tbody tr.no-results {
  background: transparent !important;
  border: 1px dashed var(--color-border-default, #E2E8F0) !important;
  box-shadow: none !important;
  cursor: default;
  height: auto;
}
.md-custom-table tbody tr.no-results:hover {
  transform: none;
  box-shadow: none !important;
}
.md-custom-table .no-results,
.md-custom-table tbody tr.no-results td,
.report-table tbody tr.no-results td {
  font-size: 13px;
  color: var(--color-text-muted, #94A3B8);
  text-align: center;
  padding: 32px 16px !important;
}

/* Checkbox column (narrow) */
.md-custom-table .md-checkbox-column .md-icon,
.md-custom-table .md-checkbox-cell .md-icon {
    border-radius: 50%;
    border-width: 0;
    overflow: hidden;
}
.md-custom-table .md-checkbox-column md-checkbox.md-checked .md-icon::after,
.md-custom-table .md-checkbox-cell md-checkbox.md-checked .md-icon::after {
    top: 3px;
    width: 6px;
    height: 12px;
    border-color: #fff;
    left: 7px;
    content: "";
}
.md-custom-table .md-checkbox-cell md-checkbox .md-container,
table.md-table th.md-column md-checkbox {
	border-spacing: 0;
}
.md-custom-table .md-checkbox-cell md-checkbox .md-container::before {
	background-color: #E0E0E0;
}
.md-custom-table .md-checkbox-column md-checkbox .md-container::before {
    background: var(--secondary-bg-color);
    border: 1px dashed rgba(0,0,0,.54);
}
table.md-table.md-row-select td.md-cell:first-child, 
table.md-table.md-row-select th.md-column:first-child{
	padding: 10px 16px;
}
/* Preserve existing yellow highlight row-override */
table.md-table tbody.md-body > tr.md-row.yellow-bg:hover { background: #FDEFB7 !important; }


/* ───────────────────────────────────────────────────────────────
 * § 5  ·  ROW-STYLE OPT-OUT — data-rowstyle="rows"
 * Restores a flat table (wrapping card shell + inline rows with
 * horizontal separators). Kept for dense, high-density screens.
 * ─────────────────────────────────────────────────────────────── */
md-table-container[data-rowstyle="rows"],
.md-table-container[data-rowstyle="rows"] {
  background: var(--color-surface-base, #fff);
  border: 1px solid var(--color-border-default, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.04));
  overflow: auto;
}
md-table-container[data-rowstyle="rows"] table.md-custom-table,
md-table-container[data-rowstyle="rows"] table.report-table,
md-table-container[data-rowstyle="rows"] table.md-table,
.md-table-container[data-rowstyle="rows"] table.md-custom-table,
.md-table-container[data-rowstyle="rows"] table.report-table,
.md-table-container[data-rowstyle="rows"] table.md-table {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
}

md-table-container[data-rowstyle="rows"] .md-custom-table tbody tr, 
md-table-container[data-rowstyle="rows"] table.md-custom-table > tbody > tr, 
md-table-container[data-rowstyle="rows"] table.md-table > tbody > tr.md-row {
    border-bottom: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
    transform: none;
    box-shadow: none !important;
    outline: 0 !important;
    position: relative;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

md-table-container[data-rowstyle="rows"] table.md-table tbody.md-body > tr.md-row:not([disabled]):hover, 
md-table-container[data-rowstyle="rows"] table.md-table tbody.md-body>tr.md-row:hover {
    background-color: rgba(var(--primarybgcolorlight), .031) !important;
}

md-table-container[data-rowstyle="rows"] table.md-table tbody.md-body > tr.md-row:hover td:first-of-type::after, 
md-table-container[data-rowstyle="rows"] table.md-table tbody.md-body > tr.md-row.md-selected td:first-of-type::after {
    visibility: visible;
    opacity: 1;
}
md-table-container[data-rowstyle="rows"] table.md-table tbody.md-body > tr.md-row td:first-of-type::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: #2563EB;
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: opacity 0.15s;
    /* z-index: 1; */
    visibility: hidden;
}

md-table-container[data-rowstyle="rows"] table.md-custom-table > thead > tr > th,
md-table-container[data-rowstyle="rows"] table.report-table > thead > tr > th,
md-table-container[data-rowstyle="rows"] table.md-table > thead > tr > th {
    background: #fff;
}

/* Restore sticky header in rows-mode */
md-table-container[data-rowstyle="rows"] thead th,
.md-table-container[data-rowstyle="rows"] thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--th-bg, var(--color-surface-base, #fff));
  padding: var(--th-pad, 12px 16px);
  border-bottom: 1px solid var(--th-border, var(--color-border-default, #E2E8F0)) !important;
}
/* Rows in rows-mode: flat, separator-driven */
md-table-container[data-rowstyle="rows"] tbody tr,
.md-table-container[data-rowstyle="rows"] tbody tr {
  background: var(--color-surface-base, #fff) !important;
  border: none !important;
  border-bottom: 1px solid var(--row-sep, var(--color-border-subtle, #F1F5F9)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto;
}
md-table-container[data-rowstyle="rows"] tbody tr:last-child,
.md-table-container[data-rowstyle="rows"] tbody tr:last-child {
  border-bottom: none !important;
}
md-table-container[data-rowstyle="rows"] tbody tr > td,
.md-table-container[data-rowstyle="rows"] tbody tr > td {
  border-radius: 0 !important;
}
md-table-container[data-rowstyle="rows"] tbody tr:hover,
.md-table-container[data-rowstyle="rows"] tbody tr:hover {
  background: var(--color-accent-50, #EFF6FF) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none;
}
md-table-container[data-rowstyle="rows"] tbody tr.md-selected,
.md-table-container[data-rowstyle="rows"] tbody tr.md-selected {
  background: var(--color-accent-50, #EFF6FF) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Row-separator variants — only effective under rowstyle="rows" */
md-table-container[data-rowstyle="rows"][data-separator="none"]   tbody tr,
.md-table-container[data-rowstyle="rows"][data-separator="none"]  tbody tr { --row-sep: transparent; }
md-table-container[data-rowstyle="rows"][data-separator="strong"] tbody tr,
.md-table-container[data-rowstyle="rows"][data-separator="strong"] tbody tr { --row-sep: var(--color-border-default, #E2E8F0); }
md-table-container[data-rowstyle="rows"][data-separator="zebra"]  tbody tr:nth-child(even),
.md-table-container[data-rowstyle="rows"][data-separator="zebra"] tbody tr:nth-child(even) {
  background: var(--color-surface-sunken, #F1F5F9) !important;
}


/* ───────────────────────────────────────────────────────────────
 * § 6  ·  DENSITY (row-height tiers)
 * ─────────────────────────────────────────────────────────────── */
/* Each tier drives height + td padding + td font-size + th padding
 * + th font-size together, so the visual density actually matches
 * what the legacy module CSS files (examination, payroll, accounting,
 * fee, inventory, etc) used to produce. Just changing height alone
 * did not reproduce the legacy feel. */
md-table-container[data-density="compact"]     tbody tr,
.md-table-container[data-density="compact"]    tbody tr { height: 36px !important; border-radius: 4px !important; }
md-table-container[data-density="compact"]     tbody tr > td,
.md-table-container[data-density="compact"]    tbody tr > td { padding: 4px 12px; font-size: 12px; line-height: 1.35; }
md-table-container[data-density="compact"]     thead th,
.md-table-container[data-density="compact"]    thead th { padding: 6px 12px; font-size: 11px; }

md-table-container[data-density="comfortable"] tbody tr,
.md-table-container[data-density="comfortable"] tbody tr { height: 48px !important; }
md-table-container[data-density="comfortable"] tbody tr > td,
.md-table-container[data-density="comfortable"] tbody tr > td { padding: 8px 16px; font-size: 13px; line-height: 1.4; }
md-table-container[data-density="comfortable"] thead th,
.md-table-container[data-density="comfortable"] thead th { padding: 10px 16px; font-size: 12px; }

md-table-container[data-density="spacious"]    tbody tr,
.md-table-container[data-density="spacious"]   tbody tr { height: 64px !important; border-radius: 8px !important; }
md-table-container[data-density="spacious"]    tbody tr > td,
.md-table-container[data-density="spacious"]   tbody tr > td { padding: 12px 20px; font-size: 14px; line-height: 1.45; }
md-table-container[data-density="spacious"]    thead th,
.md-table-container[data-density="spacious"]   thead th { padding: 12px 20px; font-size: 12px; }


/* ───────────────────────────────────────────────────────────────
 * § 6A ·  INLINE-INPUT DENSITY  (compact data-entry grids)
 * When data-density="compact" is on the container AND rows contain
 * md-input-container / md-select (fee cancel/refund, examination
 * marks, payroll salary register), shrink those to fit the 40 px
 * row. Without this the row blows out to 48+ px from input chrome.
 * ─────────────────────────────────────────────────────────────── */
md-table-container[data-density="compact"] td md-input-container,
.md-table-container[data-density="compact"] td md-input-container,
md-table-container[data-density="compact"] td md-select,
.md-table-container[data-density="compact"] td md-select {
  margin: 0 !important;
  min-height: 24px;
  height: 24px;
}
md-table-container[data-density="compact"] td input,
.md-table-container[data-density="compact"] td input,
md-table-container[data-density="compact"] td md-select .md-select-value,
.md-table-container[data-density="compact"] td md-select .md-select-value {
  height: 24px !important;
  min-height: 24px !important;
  font-size: 12px;
  padding: 0 6px;
}


/* ───────────────────────────────────────────────────────────────
 * § 6B ·  ZEBRA SEPARATOR (top-level modifier)
 * data-rowstyle="rows" already supports zebra in § 5. This promotes
 * it so cards-mode tables (accounting ledger/budget) can stripe
 * without flipping to flat rows.
 * ─────────────────────────────────────────────────────────────── */
md-table-container[data-separator="zebra"]:not([data-rowstyle="rows"]) tbody tr:nth-child(even),
.md-table-container[data-separator="zebra"]:not([data-rowstyle="rows"]) tbody tr:nth-child(even) {
  background: var(--color-surface-sunken, #F1F5F9) !important;
}


/* ───────────────────────────────────────────────────────────────
 * § 6C ·  NUMERIC-COLUMN ALIGNMENT  (data-align="numeric")
 * Opt individual columns in with class="num" — right-aligned,
 * tabular figures for money / counts. Safe on both cards and rows.
 * Used by: payroll, accounting, fee, onlinepayment.
 * ─────────────────────────────────────────────────────────────── */
md-table-container[data-align="numeric"] tbody td.num,
md-table-container[data-align="numeric"] thead th.num,
.md-table-container[data-align="numeric"] tbody td.num,
.md-table-container[data-align="numeric"] thead th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}


/* ───────────────────────────────────────────────────────────────
 * § 6D ·  STICKY FIRST COLUMN  (data-sticky="first")
 * Freezes the leftmost column during horizontal scroll — used by
 * mark-entry grids, salary matrices, budget matrices.
 * ─────────────────────────────────────────────────────────────── */
md-table-container[data-sticky="first"] tbody td:first-child,
.md-table-container[data-sticky="first"] tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 8;
  /* Must beat § 4's `td { background: transparent !important }` —
   * otherwise sibling cells scroll visibly THROUGH the sticky column. */
  background: var(--color-surface-base, #fff);
  box-shadow: 1px 0 0 var(--color-border-subtle, #F1F5F9);
}
/* Selected-row tint must carry through to the sticky cell too */
md-table-container[data-sticky="first"] tbody tr.md-selected td:first-child,
.md-table-container[data-sticky="first"] tbody tr.md-selected td:first-child {
  background: var(--color-accent-50, #EFF6FF) !important;
}
md-table-container[data-sticky="first"] thead th:first-child,
.md-table-container[data-sticky="first"] thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 10; /* above body sticky cells */
  background: var(--th-bg, var(--color-surface-app, #F8FAFC)) !important;
  box-shadow: 1px 0 0 var(--color-border-subtle, #F1F5F9);
}


/* ───────────────────────────────────────────────────────────────
 * § 6E ·  HEADER-SHADOW VARIANT  (data-header="shadow")
 * Recreates the legacy inventory / concept-library look — white
 * header with a soft 2 px drop shadow as the only separation.
 * ─────────────────────────────────────────────────────────────── */
md-table-container[data-header="shadow"] thead th,
.md-table-container[data-header="shadow"] thead th {
  background: var(--color-surface-base, #fff) !important;
  color: var(--color-text-primary, #0F172A) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-bottom: none !important;
}


/* ───────────────────────────────────────────────────────────────
 * § 6F ·  MARKUP-AGNOSTIC TOKEN ATTRS
 * Many legacy templates render only <table class="md-custom-table">
 * (or .md-table / .report-table) WITHOUT an <md-table-container>
 * wrapper — e.g. student-list, some fee/inventory/admission pages.
 * Mirror every §6 / §6A-E token onto the <table> node itself so
 * data-* attrs work regardless of whether a container wraps the table.
 * The author puts the attr on whichever outer element is available.
 * ─────────────────────────────────────────────────────────────── */

/* ── §6  Density ── */
table.md-custom-table[data-density="compact"] tbody tr,
table.md-table[data-density="compact"]        tbody tr,
table.report-table[data-density="compact"]    tbody tr { height: 36px !important; border-radius: 4px !important; }
table.md-custom-table[data-density="compact"] tbody tr > td,
table.md-table[data-density="compact"]        tbody tr > td,
table.report-table[data-density="compact"]    tbody tr > td { padding: 4px 12px !important; font-size: 12px; line-height: 1.35; }
table.md-custom-table[data-density="compact"] thead th,
table.md-table[data-density="compact"]        thead th,
table.report-table[data-density="compact"]    thead th { padding: 6px 12px !important; font-size: 11px; }

table.md-custom-table[data-density="comfortable"] tbody tr,
table.md-table[data-density="comfortable"]        tbody tr,
table.report-table[data-density="comfortable"]    tbody tr { height: 48px !important; }
table.md-custom-table[data-density="comfortable"] tbody tr > td,
table.md-table[data-density="comfortable"]        tbody tr > td,
table.report-table[data-density="comfortable"]    tbody tr > td { padding: 8px 16px !important; font-size: 13px; line-height: 1.4; }
table.md-custom-table[data-density="comfortable"] thead th,
table.md-table[data-density="comfortable"]        thead th,
table.report-table[data-density="comfortable"]    thead th { padding: 10px 16px !important; font-size: 12px; }

table.md-custom-table[data-density="spacious"] tbody tr,
table.md-table[data-density="spacious"]        tbody tr,
table.report-table[data-density="spacious"]    tbody tr { height: 64px !important; border-radius: 8px !important; }
table.md-custom-table[data-density="spacious"] tbody tr > td,
table.md-table[data-density="spacious"]        tbody tr > td,
table.report-table[data-density="spacious"]    tbody tr > td { padding: 12px 20px !important; font-size: 14px; line-height: 1.45; }
table.md-custom-table[data-density="spacious"] thead th,
table.md-table[data-density="spacious"]        thead th,
table.report-table[data-density="spacious"]    thead th { padding: 12px 20px !important; font-size: 12px; }

/* ── §6A  Inline-input density (compact) ── */
table.md-custom-table[data-density="compact"] td md-input-container,
table.md-table[data-density="compact"]        td md-input-container,
table.report-table[data-density="compact"]    td md-input-container,
table.md-custom-table[data-density="compact"] td md-select,
table.md-table[data-density="compact"]        td md-select,
table.report-table[data-density="compact"]    td md-select {
  margin: 0 !important;
  min-height: 24px;
  height: 24px;
}
table.md-custom-table[data-density="compact"] td input,
table.md-table[data-density="compact"]        td input,
table.report-table[data-density="compact"]    td input,
table.md-custom-table[data-density="compact"] td md-select .md-select-value,
table.md-table[data-density="compact"]        td md-select .md-select-value,
table.report-table[data-density="compact"]    td md-select .md-select-value {
  height: 24px !important;
  min-height: 24px !important;
  font-size: 12px;
  padding: 0 6px;
}

/* ── §6B  Zebra (cards-mode, non-rows) ── */
table.md-custom-table[data-separator="zebra"]:not([data-rowstyle="rows"]) tbody tr:nth-child(even),
table.md-table[data-separator="zebra"]:not([data-rowstyle="rows"])        tbody tr:nth-child(even),
table.report-table[data-separator="zebra"]:not([data-rowstyle="rows"])    tbody tr:nth-child(even) {
  background: var(--color-surface-sunken, #F1F5F9) !important;
}

/* ── §6C  Numeric-column alignment ── */
table.md-custom-table[data-align="numeric"] tbody td.num,
table.md-table[data-align="numeric"]        tbody td.num,
table.report-table[data-align="numeric"]    tbody td.num,
table.md-custom-table[data-align="numeric"] thead th.num,
table.md-table[data-align="numeric"]        thead th.num,
table.report-table[data-align="numeric"]    thead th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ── §6D  Sticky first column ── */
table.md-custom-table[data-sticky="first"] tbody td:first-child,
table.md-table[data-sticky="first"]        tbody td:first-child,
table.report-table[data-sticky="first"]    tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 8;
  background: var(--color-surface-base, #fff) !important;
  box-shadow: 1px 0 0 var(--color-border-subtle, #F1F5F9);
}
table.md-custom-table[data-sticky="first"] tbody tr.md-selected td:first-child,
table.md-table[data-sticky="first"]        tbody tr.md-selected td:first-child,
table.report-table[data-sticky="first"]    tbody tr.md-selected td:first-child {
  background: var(--color-accent-50, #EFF6FF) !important;
}
table.md-custom-table[data-sticky="first"] thead th:first-child,
table.md-table[data-sticky="first"]        thead th:first-child,
table.report-table[data-sticky="first"]    thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--th-bg, var(--color-surface-app, #F8FAFC)) !important;
  box-shadow: 1px 0 0 var(--color-border-subtle, #F1F5F9);
}

/* ── §6E  Header-shadow variant ── */
table.md-custom-table[data-header="shadow"] thead th,
table.md-table[data-header="shadow"]        thead th,
table.report-table[data-header="shadow"]    thead th {
  background: var(--color-surface-base, #fff) !important;
  color: var(--color-text-primary, #0F172A) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-bottom: none !important;
}

/* ── §5  Row-style = rows (when attr lives on the table, not container) ── */
table.md-custom-table[data-rowstyle="rows"] tbody tr,
table.md-table[data-rowstyle="rows"]        tbody tr,
table.report-table[data-rowstyle="rows"]    tbody tr {
  background: var(--color-surface-base, #fff) !important;
  border: none !important;
  border-bottom: 1px solid var(--row-sep, var(--color-border-subtle, #F1F5F9)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto;
}
table.md-custom-table[data-rowstyle="rows"] tbody tr:last-child,
table.md-table[data-rowstyle="rows"]        tbody tr:last-child,
table.report-table[data-rowstyle="rows"]    tbody tr:last-child {
  border-bottom: none !important;
}
table.md-custom-table[data-rowstyle="rows"][data-separator="none"]   tbody tr,
table.md-table[data-rowstyle="rows"][data-separator="none"]          tbody tr,
table.report-table[data-rowstyle="rows"][data-separator="none"]      tbody tr { --row-sep: transparent; }
table.md-custom-table[data-rowstyle="rows"][data-separator="strong"] tbody tr,
table.md-table[data-rowstyle="rows"][data-separator="strong"]        tbody tr,
table.report-table[data-rowstyle="rows"][data-separator="strong"]    tbody tr { --row-sep: var(--color-border-default, #E2E8F0); }
table.md-custom-table[data-rowstyle="rows"][data-separator="zebra"]  tbody tr:nth-child(even),
table.md-table[data-rowstyle="rows"][data-separator="zebra"]         tbody tr:nth-child(even),
table.report-table[data-rowstyle="rows"][data-separator="zebra"]     tbody tr:nth-child(even) {
  background: var(--color-surface-sunken, #F1F5F9) !important;
}


/* ───────────────────────────────────────────────────────────────
 * § 7  ·  PAGINATION  (md-table-pagination)
 * ─────────────────────────────────────────────────────────────── */
md-table-pagination {
  /* Sticky-bottom: pagination always hugs the bottom of the table
   * container. When the container is a flex column with leftover
   * vertical space (few rows), `margin-top: auto` pushes it to the
   * bottom. When the container scrolls, `position: sticky; bottom: 0`
   * keeps it pinned at the viewport's bottom edge while rows scroll.
   * z-index 10 keeps it above the sticky-header z-index (9) but below
   * the sticky-first-column header (10). */
  position: sticky;
  bottom: 0;
  z-index: 9;
  margin-top: auto;

  background: white;
  border-top: 1px solid var(--color-border-default, #E2E8F0);
  color: var(--color-text-muted, #94A3B8);
  font-size: 13px;
  min-height: 52px;
  padding: 8px 16px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
md-table-pagination .md-label,
md-table-pagination .label {
  font-size: 13px;
  color: var(--color-text-muted, #94A3B8);
}
md-table-pagination md-select .md-select-value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border-default, #E2E8F0) !important;
  padding: 0 16px 0 10px !important;
  border-radius: var(--radius-md, 8px);
  min-height: 28px !important;
  height: 28px;
  background: var(--color-surface-base, #fff);
}
md-table-pagination md-select.md-focused .md-select-value {
  border-color: var(--color-accent-500, #3B82F6) !important;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(37, 99, 235, 0.15));
}
md-table-pagination .md-icon-button {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: var(--radius-md, 8px);
  margin: 0 2px;
  transition: background 0.12s, color 0.12s;
}
md-table-pagination .md-icon-button:hover {
  background: var(--color-surface-sunken, #F1F5F9) !important;
}
md-table-pagination .md-icon-button md-icon {
  color: var(--color-text-secondary, #475569);
}
md-table-pagination .md-icon-button[disabled] md-icon {
  color: var(--color-text-disabled, #CBD5E1);
  opacity: 0.5;
}


/* ───────────────────────────────────────────────────────────────
 * § 8  ·  CELL-CONTENT HELPERS  (usable in any template)
 * ─────────────────────────────────────────────────────────────── */

/* Person/name cell — avatar (photo OR .gc_inner letter) + name + id */
.student-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.student-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.student-name {
  font-weight: 600;
  color: var(--color-text-primary, #0F172A);
  font-size: 14px;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-id {
  font-size: 11px;
  color: var(--color-text-muted, #94A3B8);
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: none;
}

/* Avatar wrap — relative container so the online dot can overlay */
.avatar-wrap {
  position: relative;
  flex: none;
  display: inline-block;
}
/* Photo span AND letter avatar: shared 36 × 36 round shape + ring.
 * NO background here — .alphabet_* rules in default_new.css supply
 * the per-letter colour for .gc_inner. */
.avatar-wrap .profile-img,
.avatar-wrap > .gc_inner,
.md-custom-table td > span.profile-img,
.report-table td > span.profile-img {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  line-height: 36px !important;
  margin: 0;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none !important;
  box-shadow:
    0 0 0 2px var(--color-surface-base, #fff),
    0 0 0 3px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.15s, transform 0.15s;
}
/* Photo span fallback colour — shows behind the <img> while loading */
.avatar-wrap .profile-img,
.md-custom-table td > span.profile-img,
.report-table td > span.profile-img {
  background: var(--color-accent-50, #EFF6FF);
}
.avatar-wrap .profile-img img,
.md-custom-table .profile-img img,
.report-table .profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Letter avatar typography — background colour from .alphabet_a…z */
.avatar-wrap > .gc_inner,
.student-cell > .gc_inner {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff !important;
  line-height: 1;
  background-clip: padding-box;
  margin: 0 !important; /* Removed margin right for table letter profile icon */
}
/* Hover: both photo and letter lift into an accent ring */
tr:hover .avatar-wrap .profile-img,
tr:hover .avatar-wrap > .gc_inner,
tr:hover .md-custom-table td > span.profile-img,
tr:hover .report-table td > span.profile-img {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px var(--color-surface-base, #fff),
    0 0 0 3px var(--color-accent-300, #93C5FD);
}
/* Legacy alphabet circle (still used outside .avatar-wrap) */
.gc_inner[class*="alphabet_"] {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Online / offline status dot */
.avatar-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-surface-base, #fff);
  background: #10B981;                              /* Active = green */
  box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.06);
  z-index: 2;
}
.avatar-dot.offline  { background: var(--color-text-muted, #94A3B8); }
.avatar-dot.pending  { background: #F59E0B; }
.avatar-dot.warning  { background: #EF4444; }

/* Density nudges for avatars */
[data-density="compact"] .avatar-wrap .profile-img,
[data-density="compact"] .avatar-wrap > .gc_inner {
  width: 28px !important; height: 28px !important;
  min-width: 28px !important; min-height: 28px !important;
  line-height: 28px !important;
  font-size: 12px;
}
[data-density="spacious"] .avatar-wrap .profile-img,
[data-density="spacious"] .avatar-wrap > .gc_inner {
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important;
  line-height: 44px !important;
  font-size: 16px;
}

/* ─── Legacy name-cell pattern ─────────────────────────────────
 * Most production templates emit the classic two-span pattern
 * inside the first <td> of a row:
 *
 *   <td>
 *     <span class="profile-img"><img src="..."></span>
 *     <span>FULL NAME <label>Adm No: 123</label></span>
 *   </td>
 *
 * We restore the design-system layout for those templates
 * without touching their markup:
 *   • avatar and name sit on the same line (flex-row via inline-block)
 *   • avatar gets a 12 px right gap from the name block
 *   • the sibling <span> becomes an inline-flex column so the
 *     name goes above the <label>
 *   • the <label> gets mono + muted id styling
 *   • the default "profile-img.jpg" placeholder image is faded
 *     out in favour of a baked-in blue silhouette background
 * ─────────────────────────────────────────────────────────────── */

/* Avatar gets right margin so the name doesn't collide with it */
.md-custom-table td > span.profile-img,
.report-table td > span.profile-img,
table.md-table td > span.profile-img {
  margin-right: 12px;
  vertical-align: middle;
  /* Built-in silhouette background — shows when the placeholder
   * JPG is faded below. Real photos (non-placeholder src) cover it. */
  background: var(--color-accent-50, #EFF6FF)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")
    no-repeat center / 20px 20px;
}
/* Fade the default placeholder JPG so the silhouette shows through */
.md-custom-table .profile-img img[src$="profile-img.jpg"],
.report-table .profile-img img[src$="profile-img.jpg"],
.md-custom-table .profile-img img[src*="/profile-img.jpg"],
.report-table .profile-img img[src*="/profile-img.jpg"] {
  opacity: 0;
}

/* Name block (the <span> right after .profile-img) becomes an
 * inline-flex column so "Name" sits above the <label> child,
 * both vertically centred against the avatar. */
.md-custom-table td > span.profile-img + span,
.report-table td > span.profile-img + span,
table.md-table td > span.profile-img + span {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  vertical-align: middle;
  line-height: 1.25; 
  font-weight: 600;
  color: var(--color-text-primary, #0F172A);
  font-size: 14px;
  letter-spacing: -0.005em;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* <label> inside the sibling span → mono, muted, small */
.md-custom-table td > span > label,
.report-table td > span > label,
table.md-table td > span > label {
  display: block; 
  font-size: 11px;
  color: var(--color-text-muted, #94A3B8);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: none;
}
.md-custom-table td > span,
.report-table td > span { vertical-align: middle; }

/* ──── Dates ──── */
.td-date {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary, #475569);
}
.td-date .day { color: var(--color-text-primary, #0F172A); font-weight: 600; }
.td-date .mo  { color: var(--color-text-secondary, #475569); margin: 0 2px 0 4px; }
.td-date .yr  { color: var(--color-text-muted, #94A3B8); font-size: 12px; margin-left: 2px; }

/* ──── Class pill ──── */
.class-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full, 999px);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--pill-bg, var(--color-surface-sunken, #F1F5F9));
  color: var(--pill-fg, var(--color-text-secondary, #475569));
  border: 1px solid var(--pill-br, transparent);
  white-space: nowrap;
}
/* Color-coded classes (mirrors Student-List mock) */
.class-pill[data-cls="III"]     { --pill-bg: #FEF3C7; --pill-fg: #92400E; --pill-br: #FDE68A; }
.class-pill[data-cls="VI"]      { --pill-bg: #DBEAFE; --pill-fg: #1E40AF; --pill-br: #BFDBFE; }
.class-pill[data-cls="VII"]     { --pill-bg: #DCFCE7; --pill-fg: #166534; --pill-br: #BBF7D0; }
.class-pill[data-cls="VI CBSE"] { --pill-bg: #EDE9FE; --pill-fg: #5B21B6; --pill-br: #DDD6FE; }

/* ──── Department pill (staff) ──── */
.dept-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full, 999px);
  font-size: 12px;
  font-weight: 600;
  background: var(--pill-bg, var(--color-surface-sunken, #F1F5F9));
  color: var(--pill-fg, var(--color-text-secondary, #475569));
  border: 1px solid var(--pill-br, transparent);
  white-space: nowrap;
}
.dept-pill[data-dept*="Teaching" i],
.dept-pill[data-dept*="Academic" i]      { --pill-bg: #DBEAFE; --pill-fg: #1E40AF; --pill-br: #BFDBFE; }
.dept-pill[data-dept*="Administration" i],
.dept-pill[data-dept*="Admin" i]         { --pill-bg: #EDE9FE; --pill-fg: #5B21B6; --pill-br: #DDD6FE; }
.dept-pill[data-dept*="Support" i],
.dept-pill[data-dept*="Maintenance" i]   { --pill-bg: #DCFCE7; --pill-fg: #166534; --pill-br: #BBF7D0; }
.dept-pill[data-dept*="Finance" i],
.dept-pill[data-dept*="Accounts" i]      { --pill-bg: #FEF3C7; --pill-fg: #92400E; --pill-br: #FDE68A; }
.dept-pill[data-dept*="Transport" i]     { --pill-bg: #FFE4E6; --pill-fg: #9F1239; --pill-br: #FECDD3; }
.dept-pill[data-dept*="Hostel" i]        { --pill-bg: #E0F2FE; --pill-fg: #075985; --pill-br: #BAE6FD; }
.dept-pill[data-dept*="Library" i]       { --pill-bg: #F3E8FF; --pill-fg: #6B21A8; --pill-br: #E9D5FF; }

/* ──── Section text (two-tone) ──── */
.section-text { color: var(--color-text-secondary, #475569); font-size: 13px; }
.section-text .muted { color: var(--color-text-muted, #94A3B8); }
.section-text.deleted { color: var(--color-danger, #EF4444); }
.section-text.deleted .muted { color: var(--color-danger-border, #FCA5A5); }

/* ──── Gender chip ──── */
.gender-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary, #475569);
}
.gender-chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.gender-chip.male   .dot { background: #3B82F6; }
.gender-chip.female .dot { background: #EC4899; }
.gender-chip.other  .dot { background: #A855F7; }

/* ──── Contact name (with italic empty state) ──── */
.contact-name {
  font-weight: 500;
  color: var(--color-text-secondary, #475569);
}
.contact-name.empty {
  color: var(--color-text-muted, #94A3B8);
  font-style: italic;
  font-weight: 400;
}

/* ──── Phone cell ──── */
.phone-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary, #475569);
}
.phone-ic {
  color: var(--color-text-muted, #94A3B8);
  flex: none;
  transition: color 0.12s;
}
.phone-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  font-weight: 500;
  color: var(--color-text-primary, #0F172A);
}
tr:hover .phone-ic { color: var(--color-accent-600, #2563EB); }
.phone-empty {
  color: var(--color-text-muted, #94A3B8);
}


/* ───────────────────────────────────────────────────────────────
 * § 9  ·  ACTION BUTTONS (right-aligned table cells)
 * ─────────────────────────────────────────────────────────────── */

/* Right-aligned cell wrapper */
.td-actions {
  text-align: right;
  padding-right: 12px !important;
  white-space: nowrap;
}
.md-custom-table td.text-right,
.report-table td.text-right,
table.md-table td.text-right {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary, #0F172A);
  letter-spacing: 0.01em;
}

/* Hover-reveal row-action strip */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.15s, transform 0.15s;
  margin-right: 4px;
}
tr:hover .row-actions { opacity: 1; transform: translateX(0); }
.row-act-btn {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--radius-md, 8px) !important;
  border: 1px solid var(--color-border-default, #E2E8F0) !important;
  background: var(--color-surface-base, #fff) !important;
  color: var(--color-text-muted, #94A3B8) !important;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.row-act-btn:hover {
  background: var(--color-accent-50, #EFF6FF) !important;
  color: var(--color-accent-700, #1D4ED8) !important;
  border-color: var(--color-accent-200, #BFDBFE) !important;
  transform: translateY(-1px);
}
.row-act-btn md-icon {
  font-size: 16px;
  width: 16px; 
  height: 16px;
  min-width: 16px; 
  min-height: 16px;
  line-height: 16px;
  color: inherit;
}

/* Gradient "Coaching / Hierarchy" pill — the common accent action */
.coaching-btn,
.nlp-dt-pill-btn,
.nlp-lift-pill,
md-button.coaching-btn,
md-button.nlp-dt-pill-btn,
md-button.nlp-lift-pill,
.md-custom-table td.text-right md-button.md-primary.no-bg,
.report-table td.text-right md-button.md-primary.no-bg,
table.md-table td.text-right md-button.md-primary.no-bg {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
  padding: 0 12px !important;
  margin: 0 0 0 4px !important;
  border-radius: var(--radius-full, 999px) !important;
  background: linear-gradient(180deg,
    var(--color-accent-50, #EFF6FF),
    var(--color-accent-100, #DBEAFE)) !important;
  color: var(--color-accent-700, #1D4ED8) !important;
  border: 1px solid var(--color-accent-200, #BFDBFE) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.coaching-btn:hover,
.nlp-dt-pill-btn:hover,
.nlp-lift-pill:hover,
md-button.coaching-btn:hover,
md-button.nlp-dt-pill-btn:hover,
md-button.nlp-lift-pill:hover,
.md-custom-table td.text-right md-button.md-primary.no-bg:hover,
.report-table td.text-right md-button.md-primary.no-bg:hover,
table.md-table td.text-right md-button.md-primary.no-bg:hover {
  background: linear-gradient(180deg,
    var(--color-accent-100, #DBEAFE),
    var(--color-accent-200, #BFDBFE)) !important;
  border-color: var(--color-accent-300, #93C5FD) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.25);
}
.coaching-btn svg,
.nlp-lift-pill svg,
md-button.coaching-btn svg,
md-button.nlp-lift-pill svg { flex: none; }
.md-custom-table td.text-right md-button.md-primary.no-bg .md-ripple-container,
.report-table td.text-right md-button.md-primary.no-bg .md-ripple-container,
md-button.coaching-btn .md-ripple-container,
md-button.nlp-lift-pill .md-ripple-container {
  border-radius: var(--radius-full, 999px) !important;
}

.coaching-btn md-icon{ font-size:14px; line-height:14px; width:14px;height:14px;min-width:14px;min-height:14px;}
/* More (kebab) button — reveals on row hover */
.more-btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-md, 8px);
  border: none;
  background: transparent;
  color: var(--color-text-muted, #94A3B8);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
tr:hover .more-btn { opacity: 1; }
.more-btn:hover {
  background: var(--color-surface-sunken, #F1F5F9);
  color: var(--color-text-primary, #0F172A);
}


/* ───────────────────────────────────────────────────────────────
 * § 10 ·  FILTER-TOOLBAR ICON BUTTONS (.add-wrap)
 * 36 × 36 rounded-square replacement for Angular Material's
 * circular md-icon-button. Scoped to .add-wrap so the rest of
 * the app's toolbars aren't affected.
 * ─────────────────────────────────────────────────────────────── */
.add-wrap md-button.md-icon-button,
.add-wrap md-button.md-icon-button.mar0,
.add-wrap md-button.md-icon-button.iconBorder,
.add-wrap md-button.md-icon-button.searchTooltip {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 4px !important;
  border-radius: var(--radius-md, 8px) !important;
  background: var(--color-surface-base, #fff) !important;
  border: 1px solid var(--color-border-default, #E2E8F0) !important;
  box-shadow: none !important;
  color: var(--color-text-secondary, #475569) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.add-wrap md-button.md-icon-button:hover,
.add-wrap md-button.md-icon-button:focus {
  background: var(--color-surface-sunken, #F1F5F9) !important;
  color: var(--color-text-primary, #0F172A) !important;
  border-color: var(--color-border-strong, #CBD5E1) !important;
}
.add-wrap md-button.md-icon-button:active {
  background: var(--color-accent-50, #EFF6FF) !important;
  color: var(--color-accent-700, #1D4ED8) !important;
  border-color: var(--color-accent-200, #BFDBFE) !important;
}
.add-wrap md-button.md-icon-button md-icon,
.add-wrap md-button.md-icon-button i.material-icons,
.add-wrap md-button.md-icon-button i {
  color: currentColor !important;
  font-size: 18px !important;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  line-height: 18px;
}
.add-wrap md-button.md-icon-button md-icon svg { width: 18px; height: 18px; }
.add-wrap md-button.md-icon-button .md-ripple-container {
  border-radius: var(--radius-md, 8px) !important;
}


/* ───────────────────────────────────────────────────────────────
 * § 11 ·  STAFF-LIST AMBIENT BACKDROP  (.nlp-staff-list opt-in)
 * Adds the Student-List mock's soft radial backdrop so the cards
 * float on a subtle blue/indigo wash. Does NOT change any cell
 * or row chrome — that all comes from §1–§9.
 * ─────────────────────────────────────────────────────────────── */
.nlp-staff-list {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(37,  99, 235, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(99, 102, 241, 0.05), transparent 55%),
    var(--color-surface-app, #F8FAFC);
  min-height: 100%;
}
/* Student-List variant — same ambient */
.studentList {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(37, 99, 235, 0.05), transparent 60%),
    var(--color-surface-app, #F8FAFC);
}


/* ───────────────────────────────────────────────────────────────
 * § 12 ·  COLUMN-HIDE & ROW-HIGHLIGHT UTILITIES
 * ─────────────────────────────────────────────────────────────── */
.hidden-col { display: none !important; }

/* Dues-highlight row — set via data-highlight="on" on the container
 * and data-dues="yes" on each affected <tr>. */
md-table-container[data-highlight="on"] tbody tr[data-dues="yes"],
.md-table-container[data-highlight="on"] tbody tr[data-dues="yes"] {
  background: color-mix(in oklch, var(--color-danger, #EF4444) 6%, transparent) !important;
}
md-table-container[data-highlight="on"] tbody tr[data-dues="yes"] .student-name::after,
.md-table-container[data-highlight="on"] tbody tr[data-dues="yes"] .student-name::after {
  content: "• Dues";
  font-size: 11px;
  color: var(--color-danger, #EF4444);
  font-weight: 600;
  margin-left: 8px;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────
   § 7  STATUS BADGE SYSTEM
   ───────────────────────────────────────────────────────────────── */
.erp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 18px;
  vertical-align: middle;
}
.erp-badge--active   { background: var(--erp-active-bg);   color: var(--erp-active-text);   border-color: var(--erp-active-border);   }
.erp-badge--inactive { background: var(--erp-inactive-bg); color: var(--erp-inactive-text); border-color: var(--erp-inactive-border); }
.erp-badge--pending  { background: var(--erp-pending-bg);  color: var(--erp-pending-text);  border-color: var(--erp-pending-border);  }
.erp-badge--approved { background: var(--erp-approved-bg); color: var(--erp-approved-text); border-color: var(--erp-approved-border); }
.erp-badge--rejected { background: var(--erp-rejected-bg); color: var(--erp-rejected-text); border-color: var(--erp-rejected-border); }
.erp-badge--draft    { background: var(--erp-draft-bg);    color: var(--erp-draft-text);    border-color: var(--erp-draft-border);    }
.erp-badge--warning  { background: var(--erp-warning-bg);  color: var(--erp-warning-text);  border-color: var(--erp-warning-border);  }
.erp-badge--info     { background: #EFF6FF;  color: #1D4ED8;  border-color: #BFDBFE;  }
.erp-badge--success  { background: var(--erp-active-bg);   color: var(--erp-active-text);   border-color: var(--erp-active-border);   }

/* Dot indicator inside badge */
.erp-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
  flex-shrink: 0;
}
/* Suppress dot for icon-only badges */
.erp-badge.no-dot::before { display: none; }

/* default fix-head override */
table.md-custom-table.clone, table.md-table.clone {
    display: none !important;
}
table.md-table thead.md-head[fix-head],
table.md-custom-table thead.md-head[fix-head] {
    visibility: visible !important;
}
body:has(table.md-custom-table.clone) md-table-container table.md-custom-table,
body:has(table.md-table.clone) md-table-container table.md-table  {
    margin-top: 0 !important;
}

/* ───────────────────────────────────────────────────────────────
 * § 13 ·  DARK THEME
 * ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] md-table-container[data-rowstyle="rows"],
[data-theme="dark"] .md-table-container[data-rowstyle="rows"] {
  background: var(--color-surface-base, #111318);
  border-color: var(--color-border-default, #1F232E);
  box-shadow: none;
}
[data-theme="dark"] md-table-container:not([data-rowstyle="rows"]) tbody tr,
[data-theme="dark"] .md-table-container:not([data-rowstyle="rows"]) tbody tr {
  background: var(--color-surface-base, #111318) !important;
  border-color: var(--color-border-default, #1F232E) !important;
}
[data-theme="dark"] .md-custom-table tbody tr:hover,
[data-theme="dark"] .report-table tbody tr:hover {
  background: color-mix(in oklch, var(--color-accent-600, #2563EB) 14%, transparent) !important;
}
[data-theme="dark"] md-table-pagination {
  border-top-color: var(--color-border-default, #1F232E);
}
[data-theme="dark"] .dept-pill[data-dept*="Teaching" i],
[data-theme="dark"] .dept-pill[data-dept*="Academic" i]  { --pill-bg: rgba(59,130,246,0.15); --pill-fg: #93C5FD; --pill-br: rgba(59,130,246,0.3); }
[data-theme="dark"] .dept-pill[data-dept*="Admin" i]     { --pill-bg: rgba(139,92,246,0.15); --pill-fg: #C4B5FD; --pill-br: rgba(139,92,246,0.3); }
[data-theme="dark"] .dept-pill[data-dept*="Support" i]   { --pill-bg: rgba(16,185,129,0.15); --pill-fg: #6EE7B7; --pill-br: rgba(16,185,129,0.3); }
[data-theme="dark"] .dept-pill[data-dept*="Finance" i]   { --pill-bg: rgba(245,158,11,0.15); --pill-fg: #FCD34D; --pill-br: rgba(245,158,11,0.3); }

/* ═══════════════════════════════════════════════════════════════════
 *  APPEND TO END OF: webapp/css/nlp-datatable.css
 *  ─────────────────────────────────────────────────────────────────
 *  Cross-module data-* primitives. No new classes, no new parent
 *  classes — every selector is attribute-based so existing markup
 *  is unaffected and any module can opt in by adding a data-* attr.
 *
 *  All colors reuse tokens already declared earlier in this file
 *  (--color-success, --color-danger, --color-warning, --color-info,
 *   --color-text-muted, --color-border-default, etc.) — falling back
 *  to literal hex only where a token isn't available.
 * ═══════════════════════════════════════════════════════════════ */


/* ─── Two-line stacked cell ──────────────────────────────────────
 *   <td><span data-cell="stack">
 *     <em>28 Apr 2026</em><i>14:32:08</i>
 *   </span></td>
 * Primary line on top, muted secondary line below. Works inside any
 * <td> regardless of host classes. <em>/<strong> = primary;
 * <i>/<small> = secondary (italic style is reset). */
[data-cell="stack"] {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  vertical-align: middle;
  min-width: 0;
}
[data-cell="stack"] > em,
[data-cell="stack"] > strong {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-default, #0F172A);
  letter-spacing: -0.005em;
}
[data-cell="stack"] > i,
[data-cell="stack"] > small {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-text-muted, #94A3B8);
  letter-spacing: 0.01em;
}

/* ─── Mono code cell ─────────────────────────────────────────────
 *   <span data-cell="code">TXN20260428001</span>
 * For transaction IDs, payment IDs, references. */
[data-cell="code"] {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--color-text-default, #0F172A);
  font-weight: 500;
}

/* ─── Numeric / amount cell ──────────────────────────────────────
 *   <span data-num="amount">₹ 12,450.00</span>
 *   <span data-num="amount" data-tone="muted">—</span>
 * Tabular figures, semibold, right-aligned. */
[data-num="amount"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-default, #0F172A);
  letter-spacing: -0.005em;
  text-align: right;
}
[data-num="amount"][data-tone="muted"] {
  color: var(--color-text-muted, #94A3B8);
  font-weight: 400;
}

/* ─── Empty / NA placeholder ─────────────────────────────────────
 *   <span data-cell="na">NA</span>
 * Consistent dim placeholder anywhere in a table. */
[data-cell="na"] {
  color: var(--color-text-muted, #94A3B8);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
}


/* ─── Status pill (data-pill) ────────────────────────────────────
 *   <span data-pill="success">Successful</span>
 *   <span data-pill="failed"  data-pill-style="dot">Failed</span>
 *   <span data-pill="warning" data-pill-style="solid">Anomaly</span>
 *
 * Tones:    success | failed | warning | info | pending | neutral
 * Styles:   (default = subtle bg) | dot | solid
 *
 * Renders as <span> or <em>; host class is irrelevant. */
[data-pill] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 16px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
  font-style: normal;
}
[data-pill]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  flex: 0 0 auto;
}

/* Subtle (default) — light tint bg + 1px border */
[data-pill="success"] { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
[data-pill="failed"]  { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
[data-pill="warning"] { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
[data-pill="info"]    { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
[data-pill="pending"] { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
[data-pill="neutral"] { background: #F1F5F9; color: #334155; border-color: #E2E8F0; }

/* Dot-only — transparent bg, just the leading dot + label.
 * Use in dense tables where many pills compete for attention. */
[data-pill][data-pill-style="dot"] {
  background: transparent;
  border-color: transparent;
  padding: 0;
}
[data-pill="success"][data-pill-style="dot"] { color: #166534; }
[data-pill="failed"][data-pill-style="dot"]  { color: #991B1B; }
[data-pill="warning"][data-pill-style="dot"] { color: #92400E; }
[data-pill="info"][data-pill-style="dot"],
[data-pill="pending"][data-pill-style="dot"] { color: #1E40AF; }
[data-pill="neutral"][data-pill-style="dot"] { color: #475569; }

/* Solid (filled) — high-emphasis flags */
[data-pill][data-pill-style="solid"] { color: #fff; border-color: transparent; }
[data-pill="success"][data-pill-style="solid"] { background: var(--color-success, #22C55E); }
[data-pill="failed"][data-pill-style="solid"]  { background: var(--color-danger,  #EF4444); }
[data-pill="warning"][data-pill-style="solid"] { background: var(--color-warning, #F59E0B); color: #78350F; }
[data-pill="info"][data-pill-style="solid"],
[data-pill="pending"][data-pill-style="solid"] { background: var(--color-info,    #3B82F6); }


/* ─── Compact tag (rectangular) ──────────────────────────────────
 *   <span data-tag>Pre-paid</span>
 *   <span data-tag="warning">Late</span>
 * Smaller, less prominent than a pill — module flags, channel
 * labels, mode markers. */
[data-tag] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 16px;
  border: 1px solid var(--color-border-default, #E2E8F0);
  background: #F8FAFC;
  color: var(--color-text-muted, #475569);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
[data-tag="warning"] { color: #92400E; background: #FEF3C7; border-color: #FDE68A; }
[data-tag="success"] { color: #166534; background: #DCFCE7; border-color: #BBF7D0; }
[data-tag="danger"]  { color: #991B1B; background: #FEE2E2; border-color: #FECACA; }
[data-tag="info"]    { color: #1E40AF; background: #DBEAFE; border-color: #BFDBFE; }


/* ─── Row tone strip ─────────────────────────────────────────────
 *   <tr data-row-tone="failed">…</tr>
 * Adds a 2px coloured bar to the leading edge of the row to encode
 * status tone at-a-glance. Works on any table with a leading cell
 * that has horizontal padding (every table in this stylesheet
 * already has at least 16px). */
tr[data-row-tone] > td:first-child { position: relative; }
tr[data-row-tone] > td:first-child::after {
  content: "";
  position: absolute;
  top: 6px; bottom: 6px; left: 0;
  width: 2px;
  border-radius: 2px;
  background: transparent;
}
tr[data-row-tone="success"] > td:first-child::after { background: var(--color-success, #22C55E); }
tr[data-row-tone="failed"]  > td:first-child::after { background: var(--color-danger,  #EF4444); }
tr[data-row-tone="warning"] > td:first-child::after,
tr[data-row-tone="aborted"] > td:first-child::after { background: var(--color-warning, #F59E0B); }
tr[data-row-tone="info"]    > td:first-child::after,
tr[data-row-tone="pending"] > td:first-child::after { background: var(--color-info,    #3B82F6); }
tr[data-row-tone="anomaly"] > td:first-child::after { background: #B45309; }


/* ─── Hover-revealed row action ──────────────────────────────────
 *   <button data-row-act aria-label="View"><md-icon>visibility</md-icon></button>
 * Small icon button that fades in only when the row is hovered.
 * Uses [data-row-act] so no new class needs to be introduced. */
[data-row-act] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted, #94A3B8);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
tr:hover [data-row-act] { opacity: 1; }
[data-row-act]:hover {
  background: #fff;
  color: var(--color-info, #3B82F6);
  box-shadow: 0 0 0 1px var(--color-border-default, #E2E8F0);
}
[data-row-act] > md-icon,
[data-row-act] > .material-icons {
  width: 14px; height: 14px;
  font-size: 14px;
  color: inherit;
}



/* ════════════════════════════════════════════════════════════
 * § Class-section chip 
 * ════════════════════════════════════════════════════════════ */
.class-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}