/* East Port Said National University — Dashboard Brand & Theme */

@font-face {
  font-family: "Cairo";
  src: url("../Cairo/static/Cairo-Regular.1ff28ece1699.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("../Cairo/static/Cairo-Medium.5c7ef9dbb2d1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("../Cairo/static/Cairo-SemiBold.ad6c567a0d3b.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("../Cairo/static/Cairo-Bold.41aa53767df9.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("../Cairo/static/Cairo-ExtraBold.2450944d7eac.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Shared brand tokens ── */
:root {
  --epnu-font-family: "Cairo", system-ui, sans-serif;
  --font-sans: var(--epnu-font-family);
  --font-outfit: var(--epnu-font-family);
  --default-font-family: var(--epnu-font-family);
  --epnu-navy-950: #0d1b2a;
  --epnu-navy-900: #111d2e;
  --epnu-navy-800: #1b3c73;
  --epnu-blue-500: #0077ff;
  --epnu-cyan-400: #00d4ff;
  --epnu-surface-50: #f8fafc;
  --epnu-surface-100: #f1f5f9;
  --epnu-border-200: #e2e8f0;
  --epnu-white: #ffffff;
  --epnu-text-dark: #0d1b2a;
  --epnu-text-muted: #64748b;
  --epnu-card-shadow: 0 18px 45px rgba(13, 27, 42, 0.12);
  --epnu-soft-shadow: 0 10px 30px rgba(13, 27, 42, 0.08);
  --epnu-radius-md: 14px;
  --epnu-radius-lg: 22px;
  --epnu-header-height: 4.25rem;
  --epnu-header-height-mobile: 3.5rem;

  /* TailAdmin brand remapping */
  --color-brand-50: #e6f2ff;
  --color-brand-100: #cce5ff;
  --color-brand-300: #66b3ff;
  --color-brand-400: #3399ff;
  --color-brand-500: #0077ff;
  --color-brand-600: #0066db;
  --color-brand-800: #1b3c73;
  --color-brand-950: #0d1b2a;

  /* ── Light theme (default) ── */
  --epnu-bg-page: var(--epnu-surface-50);
  --epnu-bg-main: var(--epnu-surface-50);
  --epnu-bg-elevated: var(--epnu-white);
  --epnu-bg-muted: var(--epnu-surface-100);
  --epnu-bg-input: var(--epnu-white);
  --epnu-text-primary: var(--epnu-navy-950);
  --epnu-text-secondary: var(--epnu-text-muted);
  --epnu-text-inverse: var(--epnu-white);
  --epnu-border: var(--epnu-border-200);
  --epnu-border-subtle: #eef2f6;
  --epnu-overlay: rgba(13, 27, 42, 0.45);
  --epnu-navbar-bg: rgba(255, 255, 255, 0.94);
  --epnu-navbar-border: var(--epnu-border-200);
  --epnu-footer-bg: var(--epnu-white);
  --epnu-footer-border: var(--epnu-border-200);
  --epnu-footer-text: var(--epnu-navy-950);
  --epnu-footer-muted: var(--epnu-text-muted);
  --epnu-icon-btn-bg: var(--epnu-white);
  --epnu-icon-btn-border: var(--epnu-border-200);
  --epnu-icon-btn-text: var(--epnu-text-muted);
  --epnu-icon-btn-hover-border: var(--epnu-blue-500);
  --epnu-icon-btn-hover-text: var(--epnu-blue-500);
  --epnu-dropdown-bg: var(--epnu-white);
  --epnu-dropdown-border: var(--epnu-border-200);
  --epnu-dropdown-hover: var(--epnu-surface-50);
  --epnu-preloader-bg: var(--epnu-white);
  --epnu-focus-ring: rgba(0, 119, 255, 0.18);

  /* Semantic action colors */
  --epnu-success: #16a34a;
  --epnu-success-hover: #15803d;
  --epnu-success-soft: #f0fdf4;
  --epnu-success-border: #bbf7d0;
  --epnu-warning: #d97706;
  --epnu-warning-hover: #b45309;
  --epnu-warning-soft: #fffbeb;
  --epnu-warning-border: #fde68a;
  --epnu-danger: #dc2626;
  --epnu-danger-hover: #b91c1c;
  --epnu-danger-soft: #fef2f2;
  --epnu-danger-border: #fecaca;
  --epnu-info: #2563eb;
  --epnu-info-hover: #1d4ed8;
  --epnu-info-soft: #eff6ff;
  --epnu-info-border: #bfdbfe;

  /* Sidebar — light */
  --epnu-sidebar-bg: var(--epnu-white);
  --epnu-sidebar-border: var(--epnu-border-200);
  --epnu-sidebar-title: #94a3b8;
  --epnu-sidebar-text: var(--epnu-navy-800);
  --epnu-sidebar-text-muted: #475569;
  --epnu-sidebar-hover-bg: var(--epnu-surface-50);
  --epnu-sidebar-active-bg: #e6f2ff;
  --epnu-sidebar-active-text: var(--epnu-blue-500);
  --epnu-sidebar-active-accent: var(--epnu-blue-500);
  --epnu-sidebar-icon: #64748b;
  --epnu-sidebar-icon-active: var(--epnu-blue-500);
  --epnu-sidebar-dropdown-border: var(--epnu-border-200);
  --epnu-sidebar-item-radius: 10px;
  --epnu-sidebar-icon-well-bg: rgba(100, 116, 139, 0.08);
  --epnu-sidebar-icon-well-active-bg: rgba(0, 119, 255, 0.12);
  --epnu-sidebar-width-expanded: 300px;
  --epnu-sidebar-width-collapsed: 90px;
  --epnu-sidebar-icon-size: 24px;
  --epnu-sidebar-icon-padding: 0.375rem;
}

/* ── Dark theme ── */
.dark {
  color-scheme: dark;

  --epnu-bg-page: var(--epnu-navy-950);
  --epnu-bg-main: var(--epnu-navy-900);
  --epnu-bg-elevated: #162636;
  --epnu-bg-muted: rgba(255, 255, 255, 0.05);
  --epnu-bg-input: rgba(255, 255, 255, 0.04);
  --epnu-text-primary: rgba(255, 255, 255, 0.92);
  --epnu-text-secondary: rgba(255, 255, 255, 0.58);
  --epnu-text-inverse: var(--epnu-white);
  --epnu-border: rgba(255, 255, 255, 0.1);
  --epnu-border-subtle: rgba(255, 255, 255, 0.06);
  --epnu-overlay: rgba(13, 27, 42, 0.72);
  --epnu-navbar-bg: rgba(13, 27, 42, 0.92);
  --epnu-navbar-border: rgba(255, 255, 255, 0.08);
  --epnu-footer-bg: #0a1520;
  --epnu-footer-border: rgba(255, 255, 255, 0.08);
  --epnu-footer-text: rgba(255, 255, 255, 0.92);
  --epnu-footer-muted: rgba(255, 255, 255, 0.58);
  --epnu-icon-btn-bg: rgba(255, 255, 255, 0.04);
  --epnu-icon-btn-border: rgba(255, 255, 255, 0.12);
  --epnu-icon-btn-text: rgba(255, 255, 255, 0.65);
  --epnu-icon-btn-hover-border: var(--epnu-cyan-400);
  --epnu-icon-btn-hover-text: var(--epnu-cyan-400);
  --epnu-dropdown-bg: #162636;
  --epnu-dropdown-border: rgba(255, 255, 255, 0.1);
  --epnu-dropdown-hover: rgba(255, 255, 255, 0.05);
  --epnu-preloader-bg: var(--epnu-navy-950);
  --epnu-focus-ring: rgba(0, 212, 255, 0.2);
  --epnu-success: #4ade80;
  --epnu-success-hover: #22c55e;
  --epnu-success-soft: rgba(34, 197, 94, 0.14);
  --epnu-success-border: rgba(74, 222, 128, 0.28);
  --epnu-warning: #fbbf24;
  --epnu-warning-hover: #f59e0b;
  --epnu-warning-soft: rgba(245, 158, 11, 0.14);
  --epnu-warning-border: rgba(251, 191, 36, 0.28);
  --epnu-danger: #f87171;
  --epnu-danger-hover: #ef4444;
  --epnu-danger-soft: rgba(239, 68, 68, 0.14);
  --epnu-danger-border: rgba(248, 113, 113, 0.28);
  --epnu-info: #60a5fa;
  --epnu-info-hover: #3b82f6;
  --epnu-info-soft: rgba(59, 130, 246, 0.14);
  --epnu-info-border: rgba(96, 165, 250, 0.28);
  --epnu-select-option-bg: var(--epnu-dropdown-bg);
  --epnu-select-option-text: var(--epnu-text-primary);
  --epnu-select-option-active-bg: rgba(0, 119, 255, 0.35);
  --epnu-select-option-active-text: var(--epnu-white);

  /* Sidebar — dark (flat elevated surface) */
  --epnu-sidebar-bg: #162636;
  --epnu-sidebar-border: rgba(255, 255, 255, 0.1);
  --epnu-sidebar-title: rgba(255, 255, 255, 0.5);
  --epnu-sidebar-text: rgba(255, 255, 255, 0.88);
  --epnu-sidebar-text-muted: rgba(255, 255, 255, 0.72);
  --epnu-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --epnu-sidebar-active-bg: rgba(0, 119, 255, 0.2);
  --epnu-sidebar-active-text: var(--epnu-white);
  --epnu-sidebar-active-accent: var(--epnu-cyan-400);
  --epnu-sidebar-icon: rgba(255, 255, 255, 0.6);
  --epnu-sidebar-icon-active: var(--epnu-cyan-400);
  --epnu-sidebar-dropdown-border: rgba(255, 255, 255, 0.12);
  --epnu-sidebar-item-radius: 10px;
  --epnu-sidebar-icon-well-bg: rgba(255, 255, 255, 0.06);
  --epnu-sidebar-icon-well-active-bg: rgba(0, 119, 255, 0.25);
}

/* ── Base & typography ── */
html {
  font-family: var(--epnu-font-family);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: var(--epnu-font-family);
}

body {
  height: 100%;
}

[dir="rtl"] {
  line-height: 1.65;
}

.epnu-body {
  background-color: var(--epnu-bg-page);
  color: var(--epnu-text-primary);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.epnu-body.epnu-sidebar-open {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .epnu-body.epnu-sidebar-open {
    overflow: auto;
  }
}

.epnu-main {
  background-color: var(--epnu-bg-main);
  min-height: 0;
  min-width: 0;
  width: 100%;
  scrollbar-gutter: stable;
  transition: background-color 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Dashboard overview layout.
   The summary cards sit in a horizontal strip on top, and the trend chart gets
   its own full-width row below so all 30 daily date labels have room and never
   get squeezed.

   The container query is scoped to ONLY the cards wrapper (so the strip reflows
   to the content area's real width when the sidebar opens/closes). The chart is
   deliberately kept outside any `container-type` element: a chart inside a size
   query container resize-loops on hover (flicker / jumping height), because
   ApexCharts measures its parent while size containment makes that measurement
   depend on the chart itself.
   --------------------------------------------------------------------------- */
.epnu-overview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.epnu-overview-cards-wrap {
  container-type: inline-size;
  container-name: epnu-cards;
}

.epnu-overview-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.epnu-overview-chart {
  min-width: 0;
}

/* The sidebar animates its width (~320ms) and is in the document flow, so the
   chart containers resize every frame. ApexCharts rebuilding its SVG each frame
   is what flickers, so during the slide we don't redraw — instead JS scales the
   already-rendered chart horizontally (transform) so its WIDTH animates smoothly
   in step with the sidebar, then triggers one crisp redraw once the width
   settles. `will-change` keeps that scaling on the compositor (no flicker). */
#dashboard-daily-chart,
#dashboard-priority-1-chart,
#dashboard-priority-2-chart {
  transform-origin: top left;
  will-change: transform;
}

/* Chart scroll wrapper.
   On desktop the full-width chart already fits, so overflow stays `visible`:
   this is critical because `overflow: auto` would toggle a scrollbar when the
   hover tooltip spills past an edge, which changes the chart's available size
   and sends ApexCharts into a resize loop (flicker / jumping height). Only on
   small phones — where 30 labels genuinely can't fit — do we enable scrolling. */
.epnu-overview-chart-scroll {
  max-width: 100%;
  overflow: visible;
}

/* Chart fills the row; only scrolls horizontally on small phones. Mobile
   sidebar is an overlay (not inline), so a viewport media query measures the
   chart's space accurately here. */
.epnu-overview-chart-canvas {
  width: 100%;
  min-height: 320px;
}

@media (max-width: 640px) {
  .epnu-overview-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .epnu-overview-chart-canvas {
    min-width: 600px;
  }
}

/* ── Faculty priority panels ──────────────────────────────────────────────
   An SVG chart of seven categories whose names run to ~34 characters
   («كلية علوم الحاسب و تقنية المعلومات») cannot be read on a 360px screen in
   any orientation: vertical bars have to tilt the labels, horizontal bars
   truncate them and leave ~200px for the bars themselves. So the chart is a
   desktop-only presentation, and phones get the ranked list below instead —
   real HTML rows, so every name gets a full line, reads naturally in RTL, and
   scales with the reader's font size.

   768px rather than the 640px used elsewhere in this file: that is where the
   panels stop sharing a row, and below it the chart never had the width. */
.epnu-chart-desktop {
  display: none;
}

@media (min-width: 768px) {
  .epnu-chart-desktop {
    display: block;
  }
}

/* Rendered by dashboard_charts_script.html from the same payload that feeds
   the chart, so a filter change updates both presentations together. */
.epnu-barlist {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .epnu-barlist {
    display: none;
  }
}

.epnu-barlist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.epnu-barlist-name {
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--epnu-text-primary);
}

.epnu-barlist-total {
  flex: none;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--epnu-text-primary);
}

/* The two segments are sized against the largest total, not each row's own, so
   bar length compares across faculties the way the chart's did.

   `direction: ltr` against the page's RTL: the bar has to fill from the left
   because the desktop chart it stands in for does. ApexCharts does not honour
   `dir="rtl"`, so its value axis runs left-to-right — without this the same
   number would grow leftward on a phone and rightward on a laptop. The track
   holds no text, so the override cannot affect anything else. */
.epnu-barlist-track {
  display: flex;
  direction: ltr;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--epnu-bg-muted);
}

.epnu-barlist-fill {
  display: block;
  height: 100%;
}

/* Same two colours the chart series use. */
.epnu-barlist-fill--paid {
  background: #12b76a;
}

.epnu-barlist-fill--unpaid {
  background: #f79009;
}

.epnu-barlist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.4375rem;
  font-size: 0.6875rem;
  color: var(--epnu-text-secondary);
}

.epnu-barlist-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.epnu-barlist-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}

.epnu-barlist-dot--paid {
  background: #12b76a;
}

.epnu-barlist-dot--unpaid {
  background: #f79009;
}

.epnu-barlist-empty {
  padding: 1.5rem 0;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--epnu-text-secondary);
}

@container epnu-cards (min-width: 700px) {
  .epnu-overview-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Overview KPI numbers ─────────────────────────────────────────────────
   `text-3xl`, `sm:text-4xl` and `tabular-nums` are all absent from the purged
   style.css, so every headline number rendered at body size — and because
   `text-lg` *is* compiled, the «ج.م» suffix came out larger than the amount it
   qualifies. Written by hand so the hierarchy survives. */
.epnu-stat-value {
  font-size: 1.875rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* The revenue figure is the one number that earns a step up on wider screens
   (this is what `sm:text-4xl` was reaching for). */
@media (min-width: 640px) {
  .epnu-stat-value--lead {
    font-size: 2.25rem;
  }
}

/* Six figures plus a unit overflows the card on a 360px phone. */
@media (max-width: 380px) {
  .epnu-stat-value {
    font-size: 1.5rem;
  }
}

.epnu-stat-unit {
  font-size: 1rem;
  font-weight: 600;
}

/* ── Dashboard filter bar ─────────────────────────────────────────────────
   `min-w-[220px]` is another class the purged build never emitted, so on a
   phone the two selects and the reset link all tried to share one row and each
   landed around 150px wide. */
.epnu-dashboard-filter-field {
  flex: 1 1 220px;
  min-width: 0;
}

@media (max-width: 640px) {
  .epnu-dashboard-filter-field {
    flex-basis: 100%;
  }

  /* One full-width row for the actions rather than a stray button hanging off
     the end of the second select. */
  .epnu-dashboard-filter-actions {
    width: 100%;
  }

  .epnu-dashboard-filter-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.epnu-auth-shell {
  background:
    radial-gradient(
      circle at top right,
      rgba(0, 119, 255, 0.08),
      transparent 32rem
    ),
    var(--epnu-bg-page);
  color: var(--epnu-text-primary);
}

.dark .epnu-auth-shell {
  background:
    radial-gradient(
      circle at top right,
      rgba(0, 212, 255, 0.1),
      transparent 30rem
    ),
    linear-gradient(
      135deg,
      var(--epnu-navy-950) 0%,
      var(--epnu-navy-900) 62%,
      #102844 100%
    );
}

.epnu-layout {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100dvh;
}

@media (min-width: 1024px) {
  .epnu-layout {
    height: 100vh;
  }
}

/* ── Sidebar ── */
.epnu-sidebar {
  height: 100%;
  background: var(--epnu-sidebar-bg);
  border-inline-end: 1px solid var(--epnu-sidebar-border);
  box-shadow: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

/* Neutralize TailAdmin collapsed-sidebar hover expand for EPNU sidebar */
.epnu-sidebar.sidebar:hover {
  width: unset;
}

.epnu-sidebar .menu-group-title {
  color: var(--epnu-sidebar-title);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.epnu-sidebar-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--epnu-header-height-mobile);
  margin-top: 0;
  padding-block: 0;
  border-bottom: 1px solid var(--epnu-sidebar-border);
}

.epnu-sidebar-brand-link {
  min-width: 0;
}

.epnu-sidebar-logo-well {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--epnu-bg-muted);
  border: 1px solid var(--epnu-border-subtle);
}

.epnu-sidebar-logo-well img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
}

.epnu-sidebar-header + .epnu-sidebar-nav {
  padding-top: 1rem;
}

.epnu-sidebar .logo-text .epnu-sidebar-brand {
  color: var(--epnu-sidebar-text);
}

.epnu-sidebar .logo-text .epnu-sidebar-tagline {
  color: var(--epnu-sidebar-text-muted);
}

.dark .epnu-sidebar .logo-text .epnu-sidebar-brand,
.dark .epnu-sidebar .logo-text .epnu-sidebar-tagline {
  color: var(--epnu-text-inverse);
}

.dark .epnu-sidebar .logo-text .epnu-sidebar-tagline {
  opacity: 0.7;
}

.epnu-sidebar .menu-item {
  gap: 0.625rem;
  padding-inline: 0.625rem;
  padding-block: 0.5rem;
  border-radius: var(--epnu-sidebar-item-radius);
  width: 100%;
}

.epnu-sidebar .menu-item > svg:not(.menu-item-arrow) {
  flex-shrink: 0;
  box-sizing: content-box;
  width: var(--epnu-sidebar-icon-size);
  height: var(--epnu-sidebar-icon-size);
  padding: var(--epnu-sidebar-icon-padding);
  border-radius: 0.5rem;
  background: transparent;
  transition:
    background-color var(--epnu-duration-fast) ease,
    fill var(--epnu-duration-fast) ease,
    stroke var(--epnu-duration-fast) ease;
}

.epnu-sidebar .menu-item-inactive:hover > svg:not(.menu-item-arrow) {
  background: var(--epnu-sidebar-icon-well-bg);
}

.epnu-sidebar .menu-item-active > svg:not(.menu-item-arrow) {
  background: transparent;
}

.epnu-sidebar a.menu-item.menu-item-inactive {
  color: var(--epnu-sidebar-text-muted);
}

.epnu-sidebar a.menu-item.menu-item-inactive:hover {
  background-color: var(--epnu-sidebar-hover-bg);
  color: var(--epnu-sidebar-text);
}

.epnu-sidebar a.menu-item.menu-item-active,
.epnu-sidebar a.menu-item.menu-item-active:hover {
  background-color: var(--epnu-sidebar-active-bg);
  color: var(--epnu-sidebar-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--epnu-sidebar-active-accent);
}

[dir="rtl"] .epnu-sidebar a.menu-item.menu-item-active,
[dir="rtl"] .epnu-sidebar a.menu-item.menu-item-active:hover {
  box-shadow: inset -3px 0 0 var(--epnu-sidebar-active-accent);
}

.epnu-sidebar .menu-item-icon-inactive {
  fill: var(--epnu-sidebar-icon);
}

.epnu-sidebar .menu-item-icon-active {
  fill: var(--epnu-sidebar-icon-active);
}

.epnu-sidebar .menu-item-icon-stroke-inactive {
  fill: none;
  stroke: var(--epnu-sidebar-icon);
}

.epnu-sidebar .menu-item-icon-stroke-active {
  fill: none;
  stroke: var(--epnu-sidebar-icon-active);
}

.epnu-sidebar .menu-item-arrow-inactive {
  stroke: var(--epnu-sidebar-icon);
}

.epnu-sidebar .menu-item-arrow-active {
  stroke: var(--epnu-sidebar-icon-active);
}

.epnu-sidebar a.menu-dropdown-item.menu-dropdown-item-inactive {
  color: var(--epnu-sidebar-text-muted);
}

.epnu-sidebar a.menu-dropdown-item.menu-dropdown-item-inactive:hover {
  background-color: var(--epnu-sidebar-hover-bg);
  color: var(--epnu-sidebar-text);
}

.epnu-sidebar a.menu-dropdown-item.menu-dropdown-item-active,
.epnu-sidebar a.menu-dropdown-item.menu-dropdown-item-active:hover {
  background-color: var(--epnu-sidebar-active-bg);
  color: var(--epnu-sidebar-active-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--epnu-sidebar-active-accent);
}

[dir="rtl"] .epnu-sidebar a.menu-dropdown-item.menu-dropdown-item-active,
[dir="rtl"] .epnu-sidebar a.menu-dropdown-item.menu-dropdown-item-active:hover {
  box-shadow: inset -2px 0 0 var(--epnu-sidebar-active-accent);
}

.epnu-sidebar .menu-dropdown-item {
  display: flex;
  width: 100%;
  padding-block: 0.375rem;
  padding-inline: 0.625rem;
  font-size: 0.8125rem;
  border-radius: 0.5rem;
}

.epnu-sidebar .menu-dropdown {
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid var(--epnu-sidebar-dropdown-border);
  margin-inline-start: 0.5rem;
}

.epnu-sidebar .menu-group-icon {
  fill: var(--epnu-sidebar-icon);
}

.epnu-sidebar .epnu-sidebar-group-header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--epnu-border-subtle);
}

.epnu-sidebar-nav li {
  width: 100%;
}

/* Collapsed sidebar — desktop */
@media (min-width: 1024px) {
  .epnu-sidebar:not(.epnu-sidebar-collapsed) {
    width: var(--epnu-sidebar-width-expanded);
  }

  .epnu-sidebar:not(.epnu-sidebar-collapsed) .epnu-sidebar-brand-link {
    margin-inline: 0.5rem;
  }

  .epnu-sidebar.epnu-sidebar-collapsed {
    width: var(--epnu-sidebar-width-collapsed);
    padding-inline: 0.75rem;
  }

  .epnu-sidebar.epnu-sidebar-collapsed .menu-item {
    justify-content: center;
    padding-inline: 0.5rem;
  }

  .epnu-sidebar.epnu-sidebar-collapsed .epnu-sidebar-header {
    justify-content: center;
    padding-inline: 0;
  }

  .epnu-sidebar.epnu-sidebar-collapsed .epnu-sidebar-brand-link {
    justify-content: center;
    margin-inline: 0;
    width: 100%;
    gap: 0;
  }

  .epnu-sidebar.epnu-sidebar-collapsed .epnu-sidebar-logo-well {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--epnu-border-subtle);
    background: var(--epnu-bg-muted);
    border-radius: 0.625rem;
  }

  .epnu-sidebar.epnu-sidebar-collapsed .epnu-sidebar-logo-well img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    object-fit: contain;
  }
}

/* ── Navbar ── */
.epnu-navbar {
  background: var(--epnu-navbar-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--epnu-navbar-border);
  box-shadow: var(--epnu-soft-shadow);
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.epnu-navbar-inner {
  min-height: var(--epnu-header-height-mobile);
  flex-wrap: nowrap;
}

@media (min-width: 1024px) {
  .epnu-navbar-inner {
    min-height: var(--epnu-header-height);
  }
}

.epnu-icon-btn {
  background-color: var(--epnu-icon-btn-bg);
  border: 1px solid var(--epnu-icon-btn-border);
  color: var(--epnu-icon-btn-text);
  transition:
    color var(--epnu-duration-fast) ease,
    border-color var(--epnu-duration-fast) ease,
    background-color var(--epnu-duration-fast) ease,
    transform var(--epnu-duration-fast) var(--epnu-ease-out),
    box-shadow var(--epnu-duration-fast) ease;
}

.epnu-icon-btn:hover {
  border-color: var(--epnu-icon-btn-hover-border);
  color: var(--epnu-icon-btn-hover-text);
}

.epnu-icon-btn:active {
  transform: scale(0.94);
}

.epnu-btn-primary {
  background: var(--epnu-blue-500);
  color: var(--epnu-white);
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(0, 119, 255, 0.28);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.epnu-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 119, 255, 0.36);
}

/* ── Dropdowns ── */
.epnu-dropdown {
  background-color: var(--epnu-dropdown-bg);
  border: 1px solid var(--epnu-dropdown-border);
  box-shadow: var(--epnu-card-shadow);
}

.epnu-dropdown-header {
  border-bottom: 1px solid var(--epnu-border);
}

.epnu-dropdown-item {
  color: var(--epnu-text-primary);
}

.epnu-dropdown-item:hover {
  background-color: var(--epnu-dropdown-hover);
}

.epnu-dropdown-muted {
  color: var(--epnu-text-secondary);
}

.epnu-dropdown-divider {
  border-color: var(--epnu-border);
}

/* ── Footer ── */
.epnu-footer {
  background: var(--epnu-footer-bg);
  border-top: 1px solid var(--epnu-footer-border);
  color: var(--epnu-footer-text);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.epnu-footer .epnu-footer-muted {
  color: var(--epnu-footer-muted);
}

.epnu-footer .epnu-footer-text {
  color: var(--epnu-footer-text);
}

.epnu-footer-logo-wrap {
  border: 1px solid var(--epnu-border);
  background-color: var(--epnu-bg-muted);
}

.epnu-footer-divider {
  background-color: var(--epnu-border);
}

/* ── Content ── */
.epnu-card {
  background: var(--epnu-bg-elevated);
  border: 1px solid var(--epnu-border);
  border-radius: var(--epnu-radius-md);
  box-shadow: var(--epnu-soft-shadow);
  color: var(--epnu-text-primary);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.epnu-page-title {
  color: var(--epnu-text-primary);
  font-weight: 700;
}

.epnu-muted {
  color: var(--epnu-text-secondary);
}

.epnu-section-divider {
  border-color: var(--epnu-border-subtle);
}

.epnu-soft-panel {
  background: var(--epnu-bg-muted);
  border: 1px solid var(--epnu-border-subtle);
  border-radius: 0.75rem;
}

.epnu-form-control {
  width: 100%;
  min-height: 2.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--epnu-border);
  background-color: var(--epnu-bg-input);
  color: var(--epnu-text-primary);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.35;
  box-shadow: var(--epnu-soft-shadow);
  outline: none;
  transition:
    background-color var(--epnu-duration-fast) ease,
    border-color var(--epnu-duration-fast) ease,
    box-shadow var(--epnu-duration-fast) ease,
    color var(--epnu-duration-fast) ease;
}

.epnu-form-control::placeholder {
  color: color-mix(in srgb, var(--epnu-text-secondary) 70%, transparent);
}

.epnu-form-control:focus {
  border-color: var(--epnu-blue-500);
  box-shadow: 0 0 0 3px var(--epnu-focus-ring);
}

.dark .epnu-form-control:focus {
  border-color: var(--epnu-cyan-400);
}

.epnu-form-control:disabled,
.epnu-form-control[disabled] {
  cursor: not-allowed;
  opacity: 0.62;
  background-color: var(--epnu-bg-muted);
}

.epnu-form-control[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* Restore native date calendar (TailAdmin hides the indicator globally) */
.epnu-date-input {
  cursor: pointer;
  color-scheme: light;
}

.dark .epnu-date-input {
  color-scheme: dark;
}

.epnu-date-input::-webkit-calendar-picker-indicator {
  display: block !important;
  opacity: 1 !important;
  cursor: pointer;
  -webkit-appearance: auto !important;
  width: 1.25rem;
  height: 1.25rem;
}

/* Native select option list */
select option,
select optgroup {
  background-color: var(--epnu-white);
  color: var(--epnu-navy-800);
}

select.epnu-form-control,
select.epnu-dashboard-trend-range {
  color: var(--epnu-text-primary);
}

.dark select,
.dark select.epnu-form-control,
.dark select.epnu-dashboard-trend-range {
  color: var(--epnu-text-primary);
  background-color: var(--epnu-bg-input);
  color-scheme: dark;
}

.dark select option,
.dark select optgroup {
  background-color: var(--epnu-select-option-bg);
  color: var(--epnu-select-option-text);
}

.dark select option:checked,
.dark select option:hover,
.dark select option:focus {
  background-color: var(--epnu-select-option-active-bg);
  color: var(--epnu-text-primary);
}

.epnu-form-control--trailing-icon {
  padding-inline-end: 2.75rem;
}

.epnu-input-wrap {
  position: relative;
}

.epnu-form-trailing-icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--epnu-text-secondary);
  cursor: pointer;
  transform: translateY(-50%);
}

.epnu-form-trailing-icon:hover {
  color: var(--epnu-text-primary);
}

.epnu-auth-register-cta {
  border-radius: 0.75rem;
  border: 1px dashed var(--epnu-border);
  background: var(--epnu-bg-muted);
  padding: 1rem;
  text-align: center;
}

.epnu-auth-register-cta__text {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--epnu-text-secondary);
}

.epnu-auth-register-cta__link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

.epnu-checkbox {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.375rem;
  border: 1px solid var(--epnu-border);
  background-color: var(--epnu-bg-input);
  color: var(--epnu-blue-500);
  accent-color: var(--epnu-blue-500);
}

.epnu-checkbox:focus-visible {
  outline: 3px solid var(--epnu-focus-ring);
  outline-offset: 2px;
}

.epnu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  border-radius: 0.625rem;
  border: 1px solid transparent;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--epnu-soft-shadow);
  transition:
    transform var(--epnu-duration-fast) var(--epnu-ease-out),
    background-color var(--epnu-duration-fast) ease,
    border-color var(--epnu-duration-fast) ease,
    color var(--epnu-duration-fast) ease,
    box-shadow var(--epnu-duration-fast) ease;
}

.epnu-btn:hover {
  transform: translateY(-1px);
}

.epnu-btn:active {
  transform: translateY(0) scale(0.98);
}

.epnu-btn:disabled,
.epnu-btn[aria-disabled="true"],
.epnu-btn-disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.epnu-btn-primary {
  background: var(--epnu-blue-500);
  border-color: var(--epnu-blue-500);
  color: var(--epnu-white);
  box-shadow: 0 12px 28px rgba(0, 119, 255, 0.24);
}

.epnu-btn-primary:hover {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
  box-shadow: 0 16px 34px rgba(0, 119, 255, 0.32);
}

.epnu-btn-secondary,
.epnu-btn-cancel {
  background: var(--epnu-bg-elevated);
  border-color: var(--epnu-border);
  color: var(--epnu-text-primary);
}

.epnu-btn-secondary:hover,
.epnu-btn-cancel:hover {
  background: var(--epnu-bg-muted);
  border-color: var(--epnu-icon-btn-hover-border);
  color: var(--epnu-icon-btn-hover-text);
}

.epnu-btn-info {
  background: var(--epnu-info-soft);
  border-color: var(--epnu-info-border);
  color: var(--epnu-info);
}

.epnu-btn-info:hover {
  background: var(--epnu-info);
  border-color: var(--epnu-info);
  color: var(--epnu-white);
}

.epnu-btn-success {
  background: var(--epnu-success-soft);
  border-color: var(--epnu-success-border);
  color: var(--epnu-success);
}

.epnu-btn-success:hover {
  background: var(--epnu-success);
  border-color: var(--epnu-success);
  color: var(--epnu-white);
}

.epnu-btn-warning {
  background: var(--epnu-warning-soft);
  border-color: var(--epnu-warning-border);
  color: var(--epnu-warning);
}

.epnu-btn-warning:hover {
  background: var(--epnu-warning);
  border-color: var(--epnu-warning);
  color: var(--epnu-navy-950);
}

.epnu-btn-danger {
  background: var(--epnu-danger);
  border-color: var(--epnu-danger);
  color: var(--epnu-white);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.22);
}

.epnu-btn-danger:hover {
  background: var(--epnu-danger-hover);
  border-color: var(--epnu-danger-hover);
  color: var(--epnu-white);
}

.epnu-btn-danger-soft {
  background: var(--epnu-danger-soft);
  border-color: var(--epnu-danger-border);
  color: var(--epnu-danger);
}

.epnu-btn-danger-soft:hover {
  background: var(--epnu-danger);
  border-color: var(--epnu-danger);
  color: var(--epnu-white);
}

.epnu-alert {
  border-radius: 0.75rem;
  border: 1px solid var(--epnu-border);
  background: var(--epnu-bg-elevated);
  color: var(--epnu-text-primary);
  box-shadow: var(--epnu-soft-shadow);
}

.epnu-alert-success {
  border-color: var(--epnu-success-border);
  background: var(--epnu-success-soft);
  color: var(--epnu-success);
}

.epnu-alert-danger {
  border-color: var(--epnu-danger-border);
  background: var(--epnu-danger-soft);
  color: var(--epnu-danger);
}

.epnu-alert-warning {
  border-color: var(--epnu-warning-border);
  background: var(--epnu-warning-soft);
  color: var(--epnu-warning);
}

.epnu-alert-info {
  border-color: var(--epnu-info-border);
  background: var(--epnu-info-soft);
  color: var(--epnu-info);
}

.epnu-table-wrap {
  overflow-x: auto;
  border-radius: var(--epnu-radius-md);
  border: 1px solid var(--epnu-border);
  background: var(--epnu-bg-elevated);
}

.epnu-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.epnu-table thead tr {
  background: var(--epnu-bg-muted);
}

.epnu-table th {
  color: var(--epnu-text-secondary);
  font-weight: 700;
}

.epnu-table tbody tr {
  border-color: var(--epnu-border-subtle);
}

.epnu-table td {
  color: var(--epnu-text-primary);
}

.epnu-content
  :where(input, select, textarea):not([type="checkbox"]):not(
    [type="radio"]
  ):not([type="file"]):not(.epnu-form-control) {
  background-color: var(--epnu-bg-input);
  border-color: var(--epnu-border);
  color: var(--epnu-text-primary);
}

.epnu-content
  :where(input, select, textarea):not([type="checkbox"]):not(
    [type="radio"]
  ):not([type="file"]):focus {
  border-color: var(--epnu-blue-500);
  box-shadow: 0 0 0 3px var(--epnu-focus-ring);
}

.dark
  .epnu-content
  :where(input, select, textarea):not([type="checkbox"]):not(
    [type="radio"]
  ):not([type="file"]):focus {
  border-color: var(--epnu-cyan-400);
}

.dark .epnu-content :where(select) {
  color-scheme: dark;
}

.epnu-content
  :where(
    .rounded-xl,
    .rounded-2xl
  )[class*="border-gray-200"][class*="bg-white"],
.epnu-content
  :where(
    .rounded-xl,
    .rounded-2xl
  )[class*="border-gray-100"][class*="bg-gray-50"],
.epnu-content
  :where(
    .rounded-xl,
    .rounded-2xl
  )[class*="border-gray-100"][class*="bg-white"] {
  border-color: var(--epnu-border);
  background: var(--epnu-bg-elevated);
  color: var(--epnu-text-primary);
}

.epnu-content :where(.rounded-xl, .rounded-2xl)[class*="bg-gray-50"] {
  background: var(--epnu-bg-muted);
}

/* Auto-theme common legacy gray text utilities inside app content */
.epnu-content :is(.text-gray-900, .text-gray-800, .text-gray-700) {
  color: var(--epnu-text-primary);
}

.epnu-content :is(.text-gray-600, .text-gray-500, .text-gray-400) {
  color: var(--epnu-text-secondary);
}

.epnu-auth-shell :is(.text-gray-900, .text-gray-800, .text-gray-700) {
  color: var(--epnu-text-primary);
}

.epnu-auth-shell :is(.text-gray-600, .text-gray-500, .text-gray-400) {
  color: var(--epnu-text-secondary);
}

/* ── Overlay & preloader ── */
.z-9998 {
  z-index: 9998;
}

.epnu-overlay {
  background-color: var(--epnu-overlay);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--epnu-duration-base) ease,
    visibility var(--epnu-duration-base) ease;
}

.epnu-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.epnu-preloader {
  background-color: var(--epnu-preloader-bg);
}

.epnu-preloader-spinner {
  border-color: var(--epnu-blue-500);
  border-top-color: transparent;
}

/* ── RTL logical utilities ── */
.start-0 {
  inset-inline-start: 0;
}
.start-3 {
  inset-inline-start: 0.75rem;
}
.start-4 {
  inset-inline-start: 1rem;
}
.end-0 {
  inset-inline-end: 0;
}
.end-2\.5 {
  inset-inline-end: 0.625rem;
}
.top-0\.5 {
  top: 0.125rem;
}
.ms-1 {
  margin-inline-start: 0.25rem;
}
.ms-3 {
  margin-inline-start: 0.75rem;
}
.ps-12 {
  padding-inline-start: 3rem;
}
.ps-10 {
  padding-inline-start: 2.5rem;
}
.pe-14 {
  padding-inline-end: 3.5rem;
}

[dir="rtl"] .menu-item-arrow {
  right: auto;
  left: 0.625rem;
}

/* ── Semantic utilities ── */
.text-epnu-primary {
  color: var(--epnu-text-primary);
}
.text-epnu-secondary {
  color: var(--epnu-text-secondary);
}
.text-epnu-navy {
  color: var(--epnu-navy-950);
}
.text-epnu-muted {
  color: var(--epnu-text-muted);
}
.text-epnu-cyan-400 {
  color: var(--epnu-cyan-400);
}
.bg-epnu-surface {
  background-color: var(--epnu-surface-50);
}
.bg-epnu-navy {
  background-color: var(--epnu-navy-950);
}
.bg-epnu-cyan {
  background-color: var(--epnu-cyan-400);
}
.bg-epnu-blue\/10 {
  background-color: rgba(0, 119, 255, 0.1);
}
.border-epnu-border {
  border-color: var(--epnu-border);
}
.border-epnu-subtle {
  border-color: var(--epnu-border-subtle);
}
.bg-epnu-elevated {
  background-color: var(--epnu-bg-elevated);
}
.bg-epnu-muted {
  background-color: var(--epnu-bg-muted);
}
.bg-epnu-input {
  background-color: var(--epnu-bg-input);
}
.bg-epnu-page {
  background-color: var(--epnu-bg-page);
}
.bg-epnu-secondary {
  background-color: var(--epnu-text-secondary);
}

.divide-epnu-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--epnu-border);
}

.epnu-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--epnu-text-primary);
}

.epnu-page-desc {
  font-size: 0.875rem;
  color: var(--epnu-text-secondary);
}

.epnu-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--epnu-text-primary);
}

.epnu-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--epnu-text-secondary);
}

.epnu-card {
  border: 1px solid var(--epnu-border);
  background: var(--epnu-bg-elevated);
  color: var(--epnu-text-primary);
}

.epnu-surface-card {
  border: 1px solid var(--epnu-border);
  background: var(--epnu-bg-elevated);
  color: var(--epnu-text-primary);
  min-width: 0;
}

/* Latin values with no break opportunity (email, username) — wrap inside the
   card instead of spilling over the next grid cell, and keep LTR order while
   sitting on the RTL start edge. */
.epnu-value-ltr {
  direction: ltr;
  text-align: right;
  overflow-wrap: anywhere;
}

/* List cards (certificates, admissions, faculties grids) */
.epnu-list-grid {
  align-items: stretch;
}

.epnu-list-grid > * {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.epnu-list-grid .epnu-list-card {
  flex: 1 1 auto;
}

.epnu-list-grid > [class*="col-span"]:not(.min-w-0) {
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .cert-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .cert-col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
}

.epnu-list-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
}

.epnu-list-card__body {
  flex: 1 1 auto;
}

.epnu-list-card__actions {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.75rem;
  /* Four actions on one row squash to unreadable slivers in a narrow card.
     Wrapping with a real min-width lets them fall into 2×2 on their own, at
     whatever width that happens to be — no breakpoint to keep in sync with the
     grid's column count. */
  flex-wrap: wrap;
}

/* A real basis rather than `flex: 1 1 auto` + min-width: an equal basis keeps
   the buttons equal-width once wrapped, which `auto` (content-sized) would not.
   This overrides the flex-1 utility the templates put on each button — style.css
   is loaded before this file, so the component class wins. */
.epnu-list-card__actions > * {
  flex: 1 1 6.5rem;
}

.epnu-list-card__actions .epnu-btn {
  min-height: 2rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Opt-in third column. .epnu-list-grid itself is shared by five pages, so the
   rule cannot live on the base class. (Replaces `lg:grid-cols-3`, which the
   purged style.css never emitted — only lg:grid-cols-2 made it in.) */
@media (min-width: 1024px) {
  .epnu-list-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Label/value tiles inside a detail modal. auto-fit rather than a fixed column
   count, same as .reg-info-grid — a hard grid-cols-2 gives a 360px phone two
   150px columns and wraps every Arabic label. */
.epnu-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

/* Two-column form body, collapsing to one on narrow screens. Replaces
   `md:grid-cols-2` / `md:col-span-2`, neither of which exists in the purged
   build — which is why these forms were stuck at one column even on desktop. */
.epnu-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .epnu-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .epnu-form-grid__full {
    grid-column: 1 / -1;
  }
}

.epnu-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Full-width submit/cancel on a phone rather than two small targets hugging
   the start edge. */
@media (max-width: 640px) {
  .epnu-form-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Nested formset rows (admission branch rows) */
.epnu-nested-formset-row {
  border: 1px solid color-mix(in srgb, var(--epnu-border) 60%, transparent);
  border-radius: 0.5rem;
  background: var(--epnu-bg-muted);
  padding: 0.75rem;
}

.epnu-nested-formset-row :is(input, select, textarea):not([type="checkbox"]) {
  background-color: var(--epnu-bg-input);
  border-color: var(--epnu-border);
  color: var(--epnu-text-primary);
}

.dark .epnu-nested-formset-row :is(select) {
  color-scheme: dark;
}

.epnu-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid var(--epnu-border-subtle);
  background: var(--epnu-bg-muted);
  color: var(--epnu-text-primary);
}

.epnu-badge-required {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background: var(--epnu-danger-soft);
  color: var(--epnu-danger);
  border: 1px solid var(--epnu-danger-border);
}

.epnu-badge-optional {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background: var(--epnu-bg-muted);
  color: var(--epnu-text-secondary);
  border: 1px solid var(--epnu-border);
}

.epnu-badge-editing {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  background: var(--epnu-warning-soft);
  color: var(--epnu-warning);
  border: 1px solid var(--epnu-warning-border);
  white-space: nowrap;
}

.epnu-badge-editing-active {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  background: var(--epnu-warning-soft);
  color: var(--epnu-warning);
  border: 1px solid var(--epnu-warning-border);
  box-shadow: 0 2px 8px
    color-mix(in oklab, var(--epnu-warning) 18%, transparent);
}

.epnu-badge-editing-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
  animation: epnu-editing-pulse 1.6s ease-in-out infinite;
}

@keyframes epnu-editing-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

.epnu-table-row-editing {
  background: var(--epnu-warning-soft);
}

.epnu-btn-edit {
  background: var(--epnu-warning);
  border-color: var(--epnu-warning);
  color: #ffffff;
  box-shadow: 0 8px 20px
    color-mix(in oklab, var(--epnu-warning) 32%, transparent);
}

.epnu-btn-edit:hover {
  background: var(--epnu-warning-hover);
  border-color: var(--epnu-warning-hover);
  color: #ffffff;
}

.dark .epnu-btn-edit,
.dark .epnu-btn-edit:hover {
  color: var(--epnu-navy-950);
}

.epnu-form-submit-wrap {
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  padding-top: 0.5rem;
}

.epnu-form-submit-wrap .epnu-btn {
  width: 100%;
}

.epnu-form-actions-row {
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.epnu-form-actions-row .epnu-btn {
  flex: 1;
}

.epnu-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  border: 1px solid var(--epnu-border-subtle);
  background: var(--color-brand-50);
  color: var(--color-brand-500);
}

.dark .epnu-profile-avatar {
  border-color: color-mix(in oklab, var(--color-brand-500) 25%, transparent);
  background: color-mix(in oklab, var(--color-brand-500) 18%, transparent);
  color: var(--color-brand-400);
}

.epnu-profile-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--color-brand-500) 22%, transparent);
  background: color-mix(in oklab, var(--color-brand-500) 10%, transparent);
  color: var(--color-brand-800);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25rem;
}

.epnu-profile-role-badge::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--color-brand-500);
}

.dark .epnu-profile-role-badge {
  border-color: color-mix(in oklab, var(--color-brand-400) 30%, transparent);
  background: color-mix(in oklab, var(--color-brand-500) 16%, transparent);
  color: var(--color-brand-400);
}

.dark .epnu-profile-role-badge::before {
  background: var(--color-brand-400);
}

.epnu-empty-state {
  color: var(--epnu-text-secondary);
  border: 1px dashed var(--epnu-border);
  background: var(--epnu-bg-muted);
}

.shadow-epnu {
  box-shadow: var(--epnu-card-shadow);
}
.fill-epnu-secondary {
  fill: var(--epnu-text-secondary);
}
.stroke-epnu-secondary {
  stroke: var(--epnu-text-secondary);
}

.dark .text-epnu-navy,
.dark .text-epnu-primary {
  color: var(--epnu-text-primary);
}

.dark .text-epnu-muted,
.dark .text-epnu-secondary {
  color: var(--epnu-text-secondary);
}

/* ── Accessibility ── */
:focus-visible {
  outline: 3px solid var(--epnu-cyan-400);
  outline-offset: 3px;
}

.dark :focus-visible {
  outline-color: var(--epnu-cyan-400);
}

/* ── Motion tokens ── */
:root {
  --epnu-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --epnu-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --epnu-duration-fast: 0.2s;
  --epnu-duration-base: 0.32s;
  --epnu-duration-slow: 0.45s;
}

/* ── Sidebar animations ── */
.epnu-sidebar-animate {
  transition:
    transform var(--epnu-duration-base) var(--epnu-ease-out),
    translate var(--epnu-duration-base) var(--epnu-ease-out),
    width var(--epnu-duration-base) var(--epnu-ease-out),
    box-shadow var(--epnu-duration-base) ease,
    border-color var(--epnu-duration-base) ease,
    /* Listed here rather than on the open/closed rules: those are more specific
       and a `transition` there would replace this whole list, taking the slide
       with it. visibility interpolates discretely — it flips to `visible`
       immediately but holds `visible` until the transition ends — which is
       exactly the timing the drawer needs, so no per-state delay is required. */
    visibility var(--epnu-duration-base) linear;
  will-change: transform;
}

.epnu-sidebar .logo,
.epnu-sidebar .logo-text,
.epnu-sidebar .logo-icon,
.epnu-sidebar .menu-item-text,
.epnu-sidebar .menu-group-title,
.epnu-sidebar .menu-group-icon {
  transition:
    opacity var(--epnu-duration-fast) ease,
    transform var(--epnu-duration-fast) var(--epnu-ease-out);
}

.epnu-sidebar .menu-item {
  transition:
    background-color var(--epnu-duration-fast) ease,
    color var(--epnu-duration-fast) ease,
    box-shadow var(--epnu-duration-fast) ease;
}

.epnu-sidebar .menu-item:active {
  transform: none;
}

.epnu-sidebar .menu-item-icon-active,
.epnu-sidebar .menu-item-icon-inactive {
  transition: fill var(--epnu-duration-fast) ease;
}

.epnu-sidebar .menu-item-icon-stroke-active,
.epnu-sidebar .menu-item-icon-stroke-inactive {
  transition: stroke var(--epnu-duration-fast) ease;
}

.epnu-sidebar .menu-item-arrow {
  transition:
    transform var(--epnu-duration-base) var(--epnu-ease-out),
    stroke var(--epnu-duration-fast) ease;
  transform-origin: center;
}

.epnu-sidebar .menu-item-arrow-active {
  transform: rotate(180deg);
}

[dir="rtl"] .epnu-sidebar .menu-item-arrow-active {
  transform: rotate(180deg);
}

.epnu-sidebar .menu-dropdown-item {
  transition:
    background-color var(--epnu-duration-fast) ease,
    color var(--epnu-duration-fast) ease;
}

.epnu-sidebar .menu-dropdown-item:hover {
  padding-inline-start: 0.625rem;
}

/* Submenu expand/collapse */
.epnu-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--epnu-duration-base) var(--epnu-ease-out);
}

.epnu-submenu.epnu-submenu-open {
  grid-template-rows: 1fr;
}

.epnu-submenu-inner {
  overflow: hidden;
  min-height: 0;
}

/* ── Navbar animations ── */
.epnu-navbar {
  transition:
    background var(--epnu-duration-base) ease,
    border-color var(--epnu-duration-base) ease,
    box-shadow var(--epnu-duration-base) ease;
}

.epnu-user-avatar {
  background: var(--epnu-bg-muted);
}

.dark .epnu-user-avatar img {
  filter: invert(1);
}

.epnu-user-chevron {
  transition: transform var(--epnu-duration-base) var(--epnu-ease-out);
  transform-origin: center;
}

.epnu-user-chevron.is-open {
  transform: rotate(180deg);
}

.epnu-navbar-actions {
  flex-direction: row;
  flex-wrap: nowrap;
}

@media (min-width: 1024px) {
  .epnu-user-trigger {
    white-space: nowrap;
  }
}

/* Dropdown pop animation (Alpine x-transition) */
.epnu-dropdown-enter {
  transition:
    opacity var(--epnu-duration-fast) ease,
    transform var(--epnu-duration-base) var(--epnu-ease-out);
}

.epnu-dropdown-enter-start {
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
}

.epnu-dropdown-enter-end {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.epnu-dropdown-leave {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.epnu-dropdown-leave-start {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.epnu-dropdown-leave-end {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .epnu-sidebar-animate,
  .epnu-sidebar .menu-item,
  .epnu-sidebar .menu-item-arrow,
  .epnu-submenu,
  .epnu-overlay,
  .epnu-icon-btn,
  .epnu-dropdown-enter,
  .epnu-dropdown-leave {
    transition: none !important;
    animation: none !important;
  }

  .epnu-sidebar-animate {
    will-change: auto;
  }
}

/* ── Mobile responsive ── */
@media (max-width: 1023px) {
  .epnu-sidebar.epnu-sidebar-mobile-closed {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    pointer-events: none;
    /* pointer-events alone still leaves the off-screen drawer in the tab order.
       The transition timing is declared on .epnu-sidebar-animate — see the note
       there for why it cannot live on this rule. */
    visibility: hidden;
  }

  .epnu-sidebar.epnu-sidebar-mobile-open {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    pointer-events: auto;
    visibility: visible;
  }

  /* The drawer is position:fixed, so it already floats over the page — but the
     page kept scrolling underneath it, which is what made it feel like the
     sidebar moved the layout. .epnu-body.epnu-sidebar-open sets overflow:hidden
     on <body>, and body is not the scroll container: .epnu-main is (see
     getScroller() in staff_registrations_filter_js). Freeze the real one, the
     same way body.reg-modal-open does in registrations.css. */
  body.epnu-sidebar-open .epnu-main {
    overflow: hidden;
  }

  .epnu-sidebar-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .epnu-sidebar {
    width: min(var(--epnu-sidebar-width-expanded), 88vw);
    height: 100dvh;
    max-height: 100dvh;
    padding-inline: 1rem;
    box-shadow: var(--epnu-card-shadow);
  }

  .epnu-sidebar-header {
    min-height: var(--epnu-header-height-mobile);
  }

  .epnu-sidebar .menu-item {
    padding-block: 0.625rem;
  }

  .epnu-navbar-mobile-user {
    text-align: center;
  }

  .epnu-mobile-user-name,
  .epnu-mobile-user-role {
    display: block;
  }

  .epnu-dropdown {
    position: fixed !important;
    inset-inline: 1rem !important;
    top: 4.25rem !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none;
    margin-top: 0;
  }

  .epnu-dropdown.epnu-dropdown-notifications {
    max-height: min(70vh, 480px);
    height: auto;
  }

  .epnu-content {
    padding: 1rem !important;
  }

  .epnu-page-title,
  .epnu-page-heading {
    font-size: 1.125rem;
    line-height: 1.6rem;
  }

  .epnu-footer {
    padding-block: 0.25rem;
  }

  .epnu-footer-inner {
    gap: 1rem !important;
    padding-inline: 1rem !important;
    padding-block: 1rem !important;
  }

  .epnu-footer-brand-text {
    font-size: 0.8125rem;
  }

  .epnu-sidebar {
    z-index: 9999;
  }
}

@media (max-width: 1023px) {
  .epnu-user-trigger .epnu-user-info,
  .epnu-user-chevron {
    display: none;
  }
}

@media (min-width: 1024px) {
  .epnu-sidebar {
    flex-shrink: 0;
  }

  .epnu-sidebar-header {
    min-height: var(--epnu-header-height);
    border-bottom-color: var(--epnu-navbar-border);
  }
}

/* Toast notifications */
.epnu-toast-stack {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  right: auto;
  z-index: 999999;
  display: flex;
  width: min(calc(100vw - 2rem), 24rem);
  max-width: 24rem;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.epnu-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid #e5e7eb;
  border-inline-start-width: 4px;
  border-inline-start-style: solid;
  border-radius: 0.75rem;
  background-color: #ffffff;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1f2937;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  direction: rtl;
  animation: epnu-toast-in 0.3s ease-out both;
}

.dark .epnu-toast {
  background-color: #111827;
  border-color: #374151;
  color: #f3f4f6;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.epnu-toast--success {
  border-inline-start-color: #22c55e;
  background-color: #f0fdf4;
}

.epnu-toast--error {
  border-inline-start-color: #ef4444;
  background-color: #fef2f2;
}

.epnu-toast--warning {
  border-inline-start-color: #f97316;
  background-color: #fff7ed;
}

.epnu-toast--info {
  border-inline-start-color: #3b82f6;
  background-color: #eff6ff;
}

.dark .epnu-toast--success {
  background-color: #052e16;
  border-inline-start-color: #22c55e;
}

.dark .epnu-toast--error {
  background-color: #450a0a;
  border-inline-start-color: #ef4444;
}

.dark .epnu-toast--warning {
  background-color: #431407;
  border-inline-start-color: #f97316;
}

.dark .epnu-toast--info {
  background-color: #172554;
  border-inline-start-color: #3b82f6;
}

.epnu-toast__icon {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.epnu-toast--success .epnu-toast__icon {
  background: #dcfce7;
  color: #16a34a;
}

.epnu-toast--error .epnu-toast__icon {
  background: #fee2e2;
  color: #dc2626;
}

.epnu-toast--warning .epnu-toast__icon {
  background: #ffedd5;
  color: #ea580c;
}

.epnu-toast--info .epnu-toast__icon {
  background: #dbeafe;
  color: #2563eb;
}

.dark .epnu-toast--success .epnu-toast__icon {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.dark .epnu-toast--error .epnu-toast__icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.dark .epnu-toast--warning .epnu-toast__icon {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

.dark .epnu-toast--info .epnu-toast__icon {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.epnu-toast__text {
  min-width: 0;
  flex: 1;
  padding-top: 0.125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.epnu-toast--success .epnu-toast__text {
  color: #166534;
}

.epnu-toast--error .epnu-toast__text {
  color: #991b1b;
}

.epnu-toast--warning .epnu-toast__text {
  color: #9a3412;
}

.epnu-toast--info .epnu-toast__text {
  color: #1e40af;
}

.dark .epnu-toast--success .epnu-toast__text {
  color: #86efac;
}

.dark .epnu-toast--error .epnu-toast__text {
  color: #fca5a5;
}

.dark .epnu-toast--warning .epnu-toast__text {
  color: #fdba74;
}

.dark .epnu-toast--info .epnu-toast__text {
  color: #93c5fd;
}

.epnu-toast-close {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0.25rem;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 0.375rem;
}

.epnu-toast-close:hover {
  background: #f3f4f6;
  color: #4b5563;
}

.dark .epnu-toast-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
}

.epnu-toast.is-leaving {
  animation: epnu-toast-out 0.2s ease-in forwards;
}

@media (max-width: 640px) {
  .epnu-toast-stack {
    left: 1rem;
    right: auto;
    width: min(calc(100vw - 2rem), 24rem);
  }
}

@keyframes epnu-toast-in {
  from {
    opacity: 0;
    transform: translate(-0.75rem, 0.75rem);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes epnu-toast-out {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(-0.75rem, 0.75rem);
  }
}

/* ── Certificate Details Modal ── */
.cert-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--epnu-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s ease;
}

.cert-modal-backdrop[x-cloak],
.cert-modal-backdrop[style*="display: none"] {
  display: none !important;
}

.cert-modal-panel {
  position: relative;
  width: 100%;
  max-width: 52rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--epnu-radius-lg);
  border: 1px solid var(--epnu-border);
  background: var(--epnu-bg-elevated);
  color: var(--epnu-text-primary);
  padding: 1.5rem;
  box-shadow:
    var(--epnu-card-shadow),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  text-align: right;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* Narrower variant for modals that are mostly a short detail grid — the 52rem
   default leaves them looking hollow. (Replaces `max-w-2xl`, which the purged
   style.css never emitted, so it was silently doing nothing.) */
.cert-modal-panel--md {
  max-width: 42rem;
}

/* For panels that bring their own padded sections (a bordered header strip over
   a scrolling body). Without this the panel's 1.5rem and the section's own p-6
   stack into a 40px gutter on each side of a 360px screen. */
.cert-modal-panel--flush {
  padding: 0;
}

/* On a phone a centred dialog with 1rem of backdrop padding and 1.5rem of its
   own wastes a quarter of the width on margins. Dock it to the bottom instead
   and let it own the screen — the close button and the scroll behaviour are
   unchanged. */
@media (max-width: 640px) {
  .cert-modal-backdrop {
    padding: 0.5rem 0.5rem 0;
    align-items: flex-end;
  }

  .cert-modal-panel,
  .cert-modal-panel--md {
    max-width: none;
    max-height: 92dvh;
    border-radius: 1rem 1rem 0 0;
  }

  .cert-modal-panel:not(.cert-modal-panel--flush) {
    padding: 1rem;
  }
}

.cert-modal-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--epnu-text-primary);
}

.cert-modal-label {
  font-size: 0.6875rem;
  color: var(--epnu-text-secondary);
}

.cert-modal-muted {
  font-size: 0.75rem;
  color: var(--epnu-text-secondary);
}

.cert-modal-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid var(--epnu-border-subtle);
  background: var(--epnu-bg-muted);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--epnu-text-primary);
  box-shadow: var(--epnu-soft-shadow);
}

.cert-modal-item {
  border-radius: 0.75rem;
  border: 1px solid var(--epnu-border-subtle);
  background: var(--epnu-bg-muted);
  color: var(--epnu-text-primary);
  box-shadow: var(--epnu-soft-shadow);
}

.cert-modal-item-index {
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: var(--epnu-bg-input);
  color: var(--epnu-text-secondary);
  font-size: 0.625rem;
  font-family: ui-monospace, monospace;
}

.cert-modal-item-name {
  font-weight: 500;
  color: var(--epnu-text-primary);
}

.cert-modal-divider {
  border-top: 1px solid var(--epnu-border-subtle);
}

.cert-modal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 1px dashed var(--epnu-border);
  border-radius: 0.75rem;
  background: var(--epnu-bg-muted);
  color: var(--epnu-text-secondary);
  font-size: 0.75rem;
}

/* When the modal is open, prevent parent scrolling and overflow clipping */
body.cert-modal-open .epnu-main {
  overflow: visible !important;
}

body.cert-modal-open .epnu-layout {
  overflow: visible !important;
}

body.cert-modal-open {
  overflow: hidden !important;
}

/* Close button positioning */
.cert-modal-close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem;
  color: var(--epnu-text-secondary);
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}

.cert-modal-close:hover {
  color: var(--epnu-text-primary);
  background: var(--epnu-bg-muted);
}

/* Scrollbar styling inside modal */
.cert-modal-panel::-webkit-scrollbar {
  width: 6px;
}

.cert-modal-panel::-webkit-scrollbar-track {
  background: transparent;
}

.cert-modal-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.dark .cert-modal-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Confirm dialog ───────────────────────────────────────────────────────
   In-app stand-in for window.confirm(): a scrim, a small panel with an icon,
   a question and two actions. Same chrome as .cert-modal-panel above, kept
   separate because the caller shows/hides it with the .hidden / .flex
   utilities — .cert-modal-backdrop hard-codes display:flex and would win
   against them. Nothing here may set `display` for the same reason.

   Colors go through the --epnu-* tokens rather than Tailwind color utilities:
   style.css is a purged build, so bg-white survives while dark:bg-epnu-surface,
   bg-black/50 and bg-green-50 do not. A dark: variant that silently no-ops is
   how the publish-nominees dialog ended up a white panel carrying the theme's
   light-on-dark text.
   ───────────────────────────────────────────────────────────────────────── */
.epnu-confirm-scrim {
  position: absolute;
  inset: 0;
  background: var(--epnu-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.epnu-confirm-panel {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem;
  border-radius: var(--epnu-radius-lg);
  border: 1px solid var(--epnu-border);
  background: var(--epnu-bg-elevated);
  color: var(--epnu-text-primary);
  box-shadow:
    var(--epnu-card-shadow),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  text-align: right;
}

.epnu-confirm-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Rounded tile behind the icon. --epnu-success-* is a pale green on light and a
   translucent green on dark, so the tile reads as a tint in both themes. */
.epnu-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  border: 1px solid var(--epnu-success-border);
  background: var(--epnu-success-soft);
  color: var(--epnu-success);
}
.epnu-confirm-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.epnu-confirm-body {
  flex: 1;
  min-width: 0;
}

.epnu-confirm-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epnu-text-primary);
}

.epnu-confirm-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--epnu-text-secondary);
}

/* row-reverse so the confirming action sits on the start (right) edge in RTL. */
.epnu-confirm-actions {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ── Phase 2: form + typography component classes ───────────────────────── */

/* Field validation errors */
.epnu-field-error {
  font-size: 0.75rem; /* text-xs */
  line-height: 1rem;
  font-weight: 500; /* font-medium */
  color: var(--epnu-error-500, #f04438);
}

.epnu-field-error-list {
  margin-top: 0.25rem; /* mt-1 */
  font-size: 0.75rem; /* text-xs */
}

.epnu-field-error-list > * + * {
  margin-top: 0.25rem; /* space-y-1 */
}

/* Field labels */
.epnu-field-label {
  display: block;
  margin-bottom: 0.375rem; /* mb-1.5 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  font-weight: 500; /* font-medium */
  color: var(--epnu-text-secondary);
}

.epnu-field-label-sm {
  display: block;
  margin-bottom: 0.25rem; /* mb-1 */
  font-size: 0.75rem; /* text-xs */
  line-height: 1rem;
  font-weight: 600; /* font-semibold */
  color: var(--epnu-text-secondary);
}

/* Headings & subtitles */
.epnu-page-heading {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  font-weight: 700; /* font-bold */
  color: var(--epnu-text-primary);
}

.epnu-card-title {
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  font-weight: 700; /* font-bold */
  color: var(--epnu-text-primary);
}

.epnu-subtitle {
  margin-top: 0.25rem; /* mt-1 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: var(--epnu-text-secondary);
}

/* Table header cell (right-aligned). Centered headers keep their own utilities. */
.epnu-th {
  padding: 1rem 1.25rem; /* py-4 px-5 */
  text-align: right;
  font-size: 12px; /* text-theme-xs */
  line-height: 18px;
  font-weight: 600; /* font-semibold */
  color: var(--epnu-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CERTIFICATES PAGES (list + create/update form)

   style.css is a purged Tailwind build and never emitted most of what these
   two templates were written against: `space-y-2/3/4`, `mt-4`, `min-w-0`,
   `shrink-0`, `sm:grid-cols-3`, `md:grid-cols-2`, `md:grid-cols-5`,
   `md:col-span-1`, `sm:mt-0`, `md:mt-0`, `max-w-sm`, `bg-brand-500/10` and the
   arbitrary `text-[10px]` / `text-[11px]` sizes. The result was formset rows
   with no gap between them, chips and badges at inherited body size, and flex
   rows with no way to shrink — which is what pushed the cards, the modal and
   the form past a phone's viewport. Layout for both pages lives here instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Message stack — `space-y-4` is another one the build drops, so two messages
   at once used to sit flush against each other. */
.cert-messages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ── List page: header + filter bar ─────────────────────────────────────── */
.cert-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cert-page-head__text {
  flex: 1 1 16rem;
  min-width: 0;
}

.cert-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.cert-filter-form__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--epnu-text-primary);
}

.cert-filter-form__label svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--epnu-text-secondary);
}

/* Replaces `flex-1 max-w-sm`: a real basis so the select keeps a usable width
   beside the label on desktop, and owns the whole row once it wraps. */
.cert-filter-form__field {
  position: relative;
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 24rem;
}

@media (max-width: 640px) {
  .cert-page-head > .epnu-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .cert-filter-form__field {
    max-width: none;
  }
}

/* ── List page: card internals ──────────────────────────────────────────── */
.cert-card-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--color-brand-500) 10%, transparent);
  padding: 0.1875rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-brand-500);
  overflow-wrap: anywhere;
}

.cert-card-title {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epnu-text-primary);
  overflow-wrap: anywhere;
}

/* Horizontal rule between a card/modal title and the block under it. The
   templates sized these with `my-3` / `my-4`, and the purged build emits
   neither (only `my-6` survived) — so the rule sat flush against the heading
   above it and the counters below with no air on either side. */
.cert-divider {
  height: 0;
  margin: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--epnu-border-subtle);
}

.cert-divider--lg {
  margin: 1rem 0;
}

/* Three counters on one line. They wrap rather than overflow, and each stays
   whole (`white-space: nowrap`) so a number never splits off its unit.

   padding-bottom because this row is the last child of .epnu-list-card__body,
   which has none of its own — without it the counters sit right on top of the
   rule that opens the التفاصيل / تعديل strip. (A margin would collapse out of
   the body; padding cannot.) .epnu-list-card__body is shared by five pages, so
   the spacing belongs here rather than on it. */
.cert-card-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding-bottom: 0.875rem;
}

/* The template asked for `text-[11px]`, which the purged build never emitted —
   so these had always rendered at the inherited ~14px. Sizing them at a literal
   11px made them smaller than the design had ever actually shown. 13px keeps
   them clearly subordinate to the 14px bold .cert-card-title without
   disappearing against it. */
.cert-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--epnu-text-secondary);
}

.cert-card-stat svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--color-brand-500);
}

.cert-card-stat b {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--epnu-text-primary);
}

/* `col-span-1` and `sm:col-span-2` are both absent from the build, so the
   empty state used to sit in a single column beside empty space. */
.cert-empty-card {
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
}

/* ── Details modal ──────────────────────────────────────────────────────── */
/* `shrink-0` is not in the build; these icons must not squash beside a long
   Arabic heading. */
.cert-modal-section-title svg {
  flex: 0 0 auto;
}

/* Clears the absolutely-positioned close button. The panel is RTL, so its
   title flows toward the physical left — the side the button sits on. */
.cert-modal-head {
  padding-inline-end: 2.5rem;
}

.cert-modal-head__title {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--epnu-text-primary);
  overflow-wrap: anywhere;
}

/* Sections stack full width in reading order. Splitting them into two columns
   (what the template's `md:grid-cols-2` asked for) pairs a list whose length
   tracks the document count against one that is almost always two short
   blocks — so the taller side dictates the panel height and the other strands
   a column of dead space. Give each list its own columns instead. */
.cert-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.cert-modal-section {
  min-width: 0;
}

/* auto-fill, not auto-fit: with auto-fit a single document would stretch to
   the full panel width, which reads as a heading rather than a list item.
   Eight items become three short rows on a desktop panel and one column on a
   phone, with no breakpoint to keep in sync. */
.cert-modal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Default `stretch` on purpose: side-by-side items keep equal heights when one
   of them wraps a long name, so a row of bordered tiles has a flat bottom edge
   instead of a ragged one. Each item centres its own content anyway. */

.cert-modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.cert-modal-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Row inside a modal list: name on the start edge, badge on the end edge.
   Without min-width:0 the name block refuses to shrink and shoves the badge
   off the panel; with it, a long Arabic document name wraps instead. */
.cert-modal-item--row,
.cert-modal-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cert-modal-item--row {
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
}

.cert-modal-item__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 8rem;
  min-width: 0;
}

.cert-modal-item__main .cert-modal-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cert-modal-item--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem;
  font-size: 0.75rem;
}

.cert-modal-item__range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--epnu-border-subtle);
}

.cert-modal-item__range-value {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.6875rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  color: var(--color-brand-500);
  background: color-mix(in oklab, var(--color-brand-500) 8%, transparent);
}

/* The shared badge components carry no type scale of their own — every caller
   sized them with `text-[10px]`, which the purged build dropped. */
.cert-modal-item .epnu-badge-required,
.cert-modal-item .epnu-badge-optional {
  flex: 0 0 auto;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.cert-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--epnu-border-subtle);
}

@media (max-width: 640px) {
  .cert-modal-head {
    padding-inline-end: 2.25rem;
  }

  .cert-modal-head__title {
    font-size: 1.0625rem;
  }

  .cert-modal-body {
    gap: 1.25rem;
  }

  /* Two full-width actions stacked beat two half-width ones that no longer fit
     their labels — "تعديل الشهادة" and "إغلاق" side by side overflow the
     bottom-sheet panel once its padding is taken out of 360px. */
  .cert-modal-actions > * {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ── Create / update form ───────────────────────────────────────────────── */
/* .epnu-content already spends 1rem a side on a phone; the card's own p-6 on
   top of that left a 360px screen ~272px of usable field width. */
@media (max-width: 640px) {
  .cert-form-card {
    padding: 1rem;
  }
}

.cert-form-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--epnu-border);
}

.cert-form-card__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 15rem;
  min-width: 0;
}

.cert-form-card__heading > div:last-child {
  min-width: 0;
}

.cert-form-card__icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: var(--color-brand-500);
  background: color-mix(in oklab, var(--color-brand-500) 10%, transparent);
}

.cert-form-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.cert-form-card__hint {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--epnu-text-secondary);
}

@media (max-width: 640px) {
  /* Full width beats a button hugging the far edge under a two-line heading. */
  .cert-form-card__head > .epnu-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Vertical rhythm between formset rows — `space-y-*` is not in the build, so
   without this the rows sit flush against one another. */
.cert-formset-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Each row is its own panel rather than a naked grid over a hairline divider —
   the same treatment .epnu-reg-formset-card gives the registration formsets.
   On a phone, where a row is a tall stack of full-width fields, a shared rule
   is not enough to tell one row from the next. */
.cert-formset-row {
  display: grid;
  gap: 0.75rem 1rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--epnu-border-subtle);
  border-radius: 0.875rem;
  background: var(--epnu-bg-muted);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cert-formset-row:hover {
  border-color: var(--epnu-border);
  box-shadow: var(--epnu-soft-shadow);
}

/* One text field plus a delete button, at every width. */
.cert-formset-row--branch {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

/* Replaces `sm:grid-cols-3` / `md:grid-cols-5`, neither of which the build
   emits — both row types were stuck in a single column even on a desktop.
   auto-fit keeps them stacked on a phone and spreads them from ~30rem up. */
.cert-formset-row--doc,
.cert-formset-row--score {
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.cert-formset-field {
  min-width: 0;
}

/* Checkbox and sort order share one cell. Letting the checkbox size to its
   content and capping the number field stops the two from squeezing each
   other into an unreadable sliver. */
.cert-formset-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  min-width: 0;
}

/* min-height matches .epnu-form-control so a bottom-aligned checkbox lines up
   with the input beside it instead of hanging off its lower edge. The whole
   label is the hit target, which matters more on a phone than on a mouse. */
.cert-formset-inline__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--epnu-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.cert-formset-inline__check .epnu-checkbox {
  flex: 0 0 auto;
}

.cert-formset-inline__order {
  flex: 1 1 5rem;
  min-width: 0;
  max-width: 8rem;
}

.cert-formset-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
}

.cert-formset-actions .epnu-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* The row panel now nests inside the card's own padding; trimming it keeps
     the fields from being squeezed twice on a 360px screen. */
  .cert-formset-row {
    padding: 0.875rem;
  }

  /* Alone on its own row, the delete button reads better spanning it than
     stranded against the far edge under a full-width text field. */
  .cert-formset-row--doc .cert-formset-actions .epnu-btn,
  .cert-formset-row--score .cert-formset-actions .epnu-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.cert-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  /* "تحديث الشهادة وتفاصيلها" beside "إلغاء والعودة" is wider than a 360px
     screen, and this row had no flex-wrap to fall back on. */
  .cert-form-actions > * {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CERTIFICATE CATEGORIES (create-list + update pages, shared list table)

   Same story as the certificates pages above: the purged build never emitted
   what these three templates were written against — `lg:grid-cols-3`,
   `lg:col-span-1`, `lg:col-span-2`, `space-y-4`, `pt-2`, `flex-row`, `w-4`,
   `py-1.5`, `py-2.5`, `gap-1.5`, `divide-epnu-border` and the
   `text-epnu-*` colours. So the form card and the list card never sat side by
   side at any width, the form's labels and inputs ran together with no gap,
   and the row action buttons lost their icon spacing. Layout lives here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Both cards full width, form above list, at every size. The markup asked for
   a 1/3 + 2/3 split, but the form holds a single field — beside a full-height
   datatable that column is mostly empty space, so the form is a compact bar
   across the top instead. */
.cert-category-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}

/* .epnu-content already spends 1rem a side on a phone; the card's own p-6 on
   top of that left a 360px screen ~272px of usable width. */
.cert-category-card {
  padding: 1.5rem;
  min-width: 0;
}

@media (max-width: 640px) {
  .cert-category-card {
    padding: 1rem;
  }
}

.cert-category-card__title {
  margin-bottom: 1rem;
}

/* Update page: title beside the "تعديل نشط" badge. Wraps rather than letting
   the badge hang off the edge once the column narrows. */
.cert-category-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--epnu-border);
}

.cert-category-card__head > .epnu-card-title {
  min-width: 0;
}

/* One row: the field takes the free width, the buttons sit at their natural
   size on the end. `flex-end` lines the buttons up with the bottom of the
   input rather than with its label. Replaces `space-y-6` / `space-y-4`, only
   the first of which is in the build. */
.cert-category-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

.cert-category-form__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  flex: 1 1 20rem;
  min-width: 0;
}

/* Each field wrapper from partials/_form_field.html. A basis rather than a
   width so a second field would share the row instead of overflowing it. */
.cert-category-form__fields > * {
  flex: 1 1 16rem;
  min-width: 0;
}

/* One button (create) or two (update). */
.cert-category-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* Match .epnu-form-control's 2.75rem so the bar reads as one row, and keep a
   floor under the width so "حفظ الفئة" isn't a cramped little chip. */
.cert-category-form__actions > * {
  min-height: 2.75rem;
  min-width: 9rem;
  justify-content: center;
  text-align: center;
}

/* Below the wrap point the bar is a stack again: label, full-width input,
   full-width buttons.

   The flex bases above have to be cleared, not just re-flowed: in a column
   container flex-basis sizes the main axis, which is now the *height*, so the
   20rem and 16rem widths would come back as 20rem and 16rem of empty vertical
   space under a single text input. */
@media (max-width: 640px) {
  .cert-category-form,
  .cert-category-form__fields {
    flex-direction: column;
    align-items: stretch;
  }

  .cert-category-form__fields,
  .cert-category-form__fields > * {
    flex: 0 0 auto;
  }

  .cert-category-form__actions > * {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* The datatable chrome brings its own 1.5rem top margin, which doubles up on
   the heading's margin-bottom inside the card. */
.cert-category-card .datatable-wrapper {
  margin-top: 0;
}

/* ── Shared list table ──────────────────────────────────────────────────── */
.cert-cat-table-wrap {
  overflow-x: auto;
  min-width: 0;
}

.cert-cat-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
}

.cert-cat-table thead tr {
  border-bottom: 1px solid var(--epnu-border);
}

.cert-cat-table__th {
  padding: 1rem 1.25rem;
  text-align: right;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--epnu-text-secondary);
  white-space: nowrap;
}

.cert-cat-table__th--center {
  text-align: center;
}

.cert-cat-table tbody tr {
  border-bottom: 1px solid var(--epnu-border-subtle);
}

.cert-cat-table__cell {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.cert-cat-table__cell--id {
  font-weight: 500;
  color: var(--epnu-text-primary);
  white-space: nowrap;
}

/* The name is the row's headline, so it gets the primary colour. Scoped past
   `.datatable-container table tbody td`, which otherwise decides the colour of
   every cell in here. */
.cert-cat-table tbody td.cert-cat-table__cell--name {
  color: var(--epnu-text-primary);
}

/* Name plus the optional "قيد التعديل" badge. `mr-2` on the badge was the old
   spacing; a wrapping flex row keeps the two apart at every width and lets a
   long category name break instead of widening the table. */

.cert-cat-table__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cert-cat-table__cell--actions {
  text-align: center;
  white-space: nowrap;
}

.cert-cat-table__empty {
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--epnu-text-secondary);
}

/* `py-1.5`, `gap-1.5` and `w-4` are all absent from the build, so these came
   out at the full .epnu-btn size with the icon jammed against the label. */
.cert-cat-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.cert-cat-action svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

/* Row highlight for the category being edited has to outrank both
   .cert-cat-table's own row rule and the datatable hover state, or the
   "قيد التعديل" row loses its colour the moment the pointer crosses it. */
.cert-cat-table tbody tr.epnu-table-row-editing,
.cert-cat-table tbody tr.epnu-table-row-editing:hover {
  background: var(--epnu-warning-soft);
}

/* Three columns of `px-5` padding leave a 360px screen about 170px for the
   actual content, so the table stops being a table on a phone: each row
   becomes its own card and each cell carries its own label. Sorting goes with
   the hidden header, but the datatable search and pagination still work. */
@media (max-width: 640px) {
  .cert-cat-table,
  .cert-cat-table tbody,
  .cert-cat-table tr {
    display: block;
    width: 100%;
  }

  .cert-cat-table thead {
    display: none;
  }

  .cert-cat-table tbody tr {
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--epnu-border-subtle);
    border-radius: 0.875rem;
    background: var(--epnu-bg-muted);
  }

  .cert-cat-table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Element selector rather than the cell class: a `.cert-cat-table td` rule
     would outrank a bare `.cert-cat-table__cell` one and undo it. */
  .cert-cat-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.375rem 0;
    text-align: right;
  }

  .cert-cat-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--epnu-text-secondary);
  }

  /* Shrink-to-fit so a long name wraps onto its own lines beside the label
     instead of stretching the card. */
  .cert-cat-table__name {
    flex: 0 1 auto;
  }

  /* The actions cell carries no data-label — a "العمليات" caption next to a
     lone button is noise, the button says what it does. It spans the row
     instead, which is also a far bigger tap target. */
  .cert-cat-table td.cert-cat-table__cell--actions {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--epnu-border-subtle);
  }

  .cert-cat-table__cell--actions > .cert-cat-action {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .cert-cat-table td.cert-cat-table__empty {
    display: block;
    padding: 1.5rem 0;
  }
}

/* Once the rows are cards of their own, the datatable's bordered, shadowed
   shell is a second frame around a frame inside the list card. Scoped to this
   page — everywhere else the container is still what makes the table scroll. */
@media (max-width: 640px) {
  .cert-category-card .datatable-container {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: visible;
  }
}