/* Federal Republic of Nigeria — light green admin theme. Primary/success are
   the same "Nigeria green" family on purpose (issued = good = the brand
   color); warning/danger keep their original values (already accessible,
   not part of what needed rebranding). --processing is new — badges for
   "pending" and "processing" used to share one color, which under-
   distinguishes two different states; it also backs the 3rd/4th slots of
   the dashboard's "By Agency" doughnut (with --chart-violet/--chart-orange)
   for a 4-color categorical set, in case more agencies than NIMC/NIPOST are
   added later. dashboard.ejs/reports.ejs read these via getComputedStyle at
   chart-init time (same pattern already used for Chart.defaults.color)
   rather than hardcoding hex in the JS, so charts follow light/dark mode
   automatically. This set — and the dark-mode steps below — were run
   through the dataviz skill's validator (lightness band, chroma floor, CVD
   separation, contrast), not eyeballed. */
:root {
  --bg: #eef6f0;
  --surface: #ffffff;
  --border: #d7e8db;
  --text: #16241a;
  --text-muted: #5c6f61;
  --primary: #0f7a3d;
  --primary-dark: #0b5c2e;
  --success: #0f7a3d;
  --success-bg: #e3f3e7;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --processing: #1a6fa8;
  --processing-bg: #e1eef6;
  /* Chart-fill green — separate from --primary, which is tuned brighter in
     dark mode for text/link contrast and fails the categorical-fill
     lightness band when reused as a chart slice (validated). */
  --chart-green: #0f7a3d;
  --chart-violet: #8a5cc7;
  --chart-orange: #c2761e;
  --neutral-bg: #eef4ef;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15, 60, 30, 0.07), 0 1px 3px rgba(15, 60, 30, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1712;
    --surface: #142016;
    --border: #24352a;
    --text: #e7f2ea;
    --text-muted: #93a89a;
    /* Brighter than the light-mode primary — #0f7a3d only clears ~3.1:1 on
       this dark background (checked against WCAG contrast), too low for
       body-sized link text. #34c169 clears ~7.2:1. */
    --primary: #34c169;
    --primary-dark: #2ba85a;
    --success: #34c169;
    --success-bg: #123a20;
    --warning-bg: #2e2205;
    --danger-bg: #2e0a0a;
    --processing: #2b7ca8;
    --processing-bg: #0d2836;
    --chart-green: #2ba85a;
    --chart-violet: #8f6cc9;
    --chart-orange: #c2761e;
    --neutral-bg: #182619;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

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

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  background: var(--neutral-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.topbar {
  background: var(--primary);
  border-bottom: 3px solid var(--primary-dark);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}
.brand:hover { text-decoration: none; opacity: 0.92; }
.brand-emblem { width: 30px; height: 30px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-eyebrow { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.nav { display: flex; align-items: center; gap: 18px; }
.nav a { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; font-weight: 500; }
.nav a:hover { color: #fff; text-decoration: none; }

.logout-form { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
.user-chip { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }

/* Buttons sitting in the solid-green topbar/sidebar need their own contrast
   pass — the default .btn-primary/.btn-ghost are tuned for the light page
   surface. */
.topbar .btn-primary, .sidebar .btn-primary { background: #fff; color: var(--primary-dark); }
.topbar .btn-primary:hover, .sidebar .btn-primary:hover { background: rgba(255, 255, 255, 0.9); }
.topbar .btn-ghost, .sidebar .btn-ghost { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.35); }
.topbar .btn-ghost:hover, .sidebar .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Authenticated layout: fixed left sidebar + main content column. Public
   pages (landing/login) use the plain .topbar above instead — see
   partials/header.ejs, which picks one or the other based on `username`. */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  padding: 22px 0 16px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 24px; text-decoration: none; }
.sidebar-brand:hover { text-decoration: none; opacity: 0.92; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 500;
}
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; }
.sidebar-footer {
  padding: 16px 20px 0;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-footer .user-chip { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; }

.main-area { flex: 1; min-width: 0; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 12px 16px; gap: 16px; }
  .sidebar-brand { padding: 0; }
  .brand-eyebrow { display: none; }
  .sidebar-nav { flex-direction: row; flex: 1; padding: 0; overflow-x: auto; }
  .sidebar-nav a { white-space: nowrap; }
  .sidebar-footer { flex-direction: row; align-items: center; margin-top: 0; padding: 0 0 0 16px; border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.18); }
  .sidebar-footer .btn-block { width: auto; }
}

.content { max-width: 1140px; margin: 0 auto; padding: 32px 28px 64px; }

.footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { border-color: var(--border); color: var(--text); background: transparent; }
.btn-outline:hover { background: var(--neutral-bg); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { background: var(--neutral-bg); }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-block { width: 100%; }

/* Landing — no card, no fill: an open, letterhead-style hero that sits
   directly on the page background. A short rule under the heading and a
   quiet pull-quote do the work a colored panel was doing before, without
   boxing the page in. */
.hero {
  text-align: center;
  padding: 36px 20px 0;
}
.hero-emblem { display: block; width: 56px; height: 56px; object-fit: contain; margin: 0 auto 14px; }
.hero-eyebrow { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.hero h1 { font-size: 1.9rem; margin: 0; color: var(--text); }
.hero-rule { display: block; width: 48px; height: 3px; background: var(--primary); margin: 16px auto 0; border-radius: 2px; }

/* Login brand panel's eyebrow sits on a solid dark-green background, so it
   needs to stay white there even though the shared .hero-eyebrow default
   (above) is now tuned for a light surface. */
.auth-brand-panel .hero-eyebrow { color: rgba(255, 255, 255, 0.85); }

/* Statutory mandate — quoted legal text.
   .mandate (boxed) is used on the login brand panel's solid dark-green
   background. .mandate-quote (below) is the landing page's plain-typography
   pull-quote, with no background box, for the open letterhead layout. */
.mandate {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 18px 22px;
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 0 10px 10px 0;
}
.mandate-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin-bottom: 8px; }
.mandate p { margin: 0; font-size: 0.86rem; line-height: 1.7; font-style: italic; color: rgba(255, 255, 255, 0.94); }
.mandate-cite { display: block; margin-top: 10px; font-size: 0.74rem; font-style: normal; font-weight: 600; color: rgba(255, 255, 255, 0.7); }

.mandate-quote { max-width: 640px; margin: 18px auto 0; }
.mandate-quote .mandate-label { color: var(--primary); text-align: center; }
.mandate-quote blockquote {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--text-muted);
}
.mandate-quote blockquote::before { content: "\201C"; }
.mandate-quote blockquote::after { content: "\201D"; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success-bg);
  color: var(--primary);
  margin-bottom: 12px;
}
.feature-icon svg { width: 19px; height: 19px; }
.feature-card h3 { margin: 0 0 8px; font-size: 1rem; }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

/* Auth — split panel: brand story on the left, form on the right. Collapses
   to a single column (form only, brand panel hidden) below 760px. */
.auth-shell {
  max-width: 780px;
  margin: 40px auto;
  min-height: 460px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 60, 30, 0.16), 0 4px 14px rgba(15, 60, 30, 0.08);
  overflow: hidden;
}

.auth-brand-panel {
  position: relative;
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 62%, #1a9950 100%);
  color: #fff;
  padding: 40px 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.auth-brand-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 30% 20%, black, transparent 75%);
  opacity: 0.6;
}
.auth-brand-content { position: relative; z-index: 1; }
.auth-brand-emblem { display: block; width: 128px; height: 128px; object-fit: contain; margin: 0 auto 18px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)); }
.auth-brand-content h1 { font-size: 1.5rem; line-height: 1.25; margin: 8px 0 14px; }
.auth-brand-content p { color: rgba(255, 255, 255, 0.88); font-size: 0.92rem; line-height: 1.6; max-width: 340px; margin: 0 0 24px; }

.auth-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.auth-feature-list li { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.92); }
.auth-feature-list svg { width: 16px; height: 16px; flex-shrink: 0; color: #fff; background: rgba(255, 255, 255, 0.18); border-radius: 50%; padding: 3px; box-sizing: content-box; }

.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 40px 36px; }
.auth-form-inner { width: 100%; max-width: 300px; }
.auth-form-inner h2 { font-size: 1.3rem; margin: 0 0 4px; }
.auth-form-inner .page-subtitle { margin-bottom: 22px; }
.auth-form-inner .form { margin-bottom: 0; }

.input-icon-wrap { position: relative; display: flex; align-items: center; }
.input-icon-wrap .input-icon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; }
.input-icon-wrap input { width: 100%; padding-left: 38px; }
.input-icon-wrap input#passwordInput { padding-right: 38px; }
.input-icon-btn {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
}
.input-icon-btn:hover { background: var(--neutral-bg); color: var(--text); }
.input-icon-btn svg { width: 17px; height: 17px; }
.input-icon-btn.is-active { color: var(--primary); }

.auth-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.auth-footnote svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; margin: 20px auto; min-height: 0; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { padding: 36px 24px; }
}

.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--text-muted); }
.form input, select {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
}
.form input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 0; }

.alert { padding: 10px 14px; border-radius: 8px; font-size: 0.88rem; margin-bottom: 14px; }
.alert-error { background: var(--danger-bg); color: var(--danger); }

/* Page header */
.breadcrumb { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
.breadcrumb:hover { color: var(--primary); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.page-subtitle { margin: 6px 0 0; color: var(--text-muted); font-size: 0.92rem; }
.page-subtitle strong { color: var(--text); }
.page-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.08); }

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-icon-neutral { background: var(--neutral-bg); color: var(--text-muted); }
.stat-icon-primary { background: rgba(15, 122, 61, 0.12); color: var(--primary); }
.stat-icon-success { background: var(--success-bg); color: var(--success); }
.stat-icon-warning { background: var(--warning-bg); color: var(--warning); }
.stat-icon-danger { background: var(--danger-bg); color: var(--danger); }
.stat-icon-processing { background: var(--processing-bg); color: var(--processing); }

.stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.15; }
.stat-label { color: var(--text-muted); font-size: 0.8rem; }
.stat-sub { font-size: 0.74rem; color: var(--text-muted); opacity: 0.8; }
.stat-issued .stat-value { color: var(--success); }
.stat-pending .stat-value { color: var(--warning); }
.stat-failed .stat-value { color: var(--danger); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* Record detail: main narrative column (personal info, address, map,
   contacts) + a compact "at a glance" side rail (photo, ID, payment,
   certificate) — the standard wide-detail-page split. Address History
   stays outside the grid, full width, since it's a table. */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-main > .panel, .detail-side > .panel { margin-bottom: 0; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.photo-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.photo-placeholder {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--neutral-bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.photo-placeholder svg { width: 32px; height: 32px; opacity: 0.6; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.panel h2 { font-size: 1rem; margin: 0 0 14px; }
.panel-sub { font-weight: 500; color: var(--text-muted); font-size: 0.78rem; margin-left: 6px; }
.panel-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-header-row h2 { margin: 0; }
.link-more { font-size: 0.85rem; font-weight: 600; }

/* Chart.js needs an explicit-height positioned ancestor + maintainAspectRatio:
   false, otherwise it keeps growing to fill whatever space is available. */
.chart-box { position: relative; height: 240px; }
.chart-box-sm { position: relative; height: 200px; }

/* Generated token result */
.token-result { border-left: 3px solid var(--primary); }
.token-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--neutral-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
}
.token-box code {
  flex: 1;
  background: none;
  padding: 0;
  font-size: 0.78rem;
  word-break: break-all;
  line-height: 1.5;
}
.hint { color: var(--text-muted); font-size: 0.82rem; margin: 0; }

.kv-list, .link-list { list-style: none; margin: 0; padding: 0; }
.kv-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.kv-list li:last-child { border-bottom: none; }
.kv-list span { color: var(--text-muted); }
.link-list li { padding: 6px 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; word-break: break-all; }

/* Tabs (e.g. Operational / Financial under Reports) */
.tab-nav { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.tab-nav a {
  padding: 10px 4px;
  margin-right: 20px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-nav a:hover { color: var(--text); text-decoration: none; }
.tab-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.filter-bar input, .filter-bar select {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
}
.input-sm { width: 110px; }

/* Table */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.table-wrap-flat { overflow-x: auto; background: none; border: none; border-radius: 0; box-shadow: none; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th, .data-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tbody tr:hover { background: var(--neutral-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }
.empty-state { text-align: center; color: var(--text-muted); padding: 32px !important; white-space: normal; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; text-transform: capitalize; }
.badge-issued { background: var(--success-bg); color: var(--success); }
.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-processing { background: var(--processing-bg); color: var(--processing); }
.badge-failed { background: var(--danger-bg); color: var(--danger); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; font-size: 0.88rem; color: var(--text-muted); }
.pagination a { font-weight: 600; }

/* Export menu (e.g. CSV/Excel) — a native <details>/<summary> dropdown, no
   JS state management needed beyond closing it on an outside click. */
.export-menu { position: relative; display: inline-block; }
.export-menu summary { list-style: none; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu summary::after { content: ''; }
.export-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.08);
  min-width: 190px;
  z-index: 20;
  overflow: hidden;
}
.export-menu-list a { display: block; padding: 10px 14px; color: var(--text); font-size: 0.88rem; font-weight: 500; }
.export-menu-list a:hover { background: var(--neutral-bg); text-decoration: none; }

.alert-success { background: var(--success-bg); color: var(--success); }

/* Configuration */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 20px;
  align-items: start;
}
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-form { display: inline; }
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { background: var(--danger-bg); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; }

/* Dialogs (native <dialog>) — one small JS layer (open/close by id, close
   on backdrop click) rather than a modal library, matching the export
   menu's native-element approach above. */
dialog.dialog {
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  width: min(420px, calc(100vw - 48px));
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.24), 0 4px 10px rgba(16, 24, 40, 0.12);
}
dialog.dialog::backdrop { background: rgba(13, 23, 18, 0.55); }
dialog.dialog h3 { margin: 0 0 18px; font-size: 1.1rem; }
dialog.dialog .form input:disabled { background: var(--neutral-bg); color: var(--text-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* Public QR-scan verification page (GET /verify/:rin) — a standalone
   document (verify.ejs doesn't include partials/header or footer), no nav
   chrome at all, so this content IS the entire page. Top-aligned rather
   than vertically centered — centering a shorter-than-viewport card leaves
   a dead gap above the seal that grows with screen height; anchoring near
   the top keeps the card the first thing seen regardless of viewport size.
   The green frame echoes the certificate PDF's own bordered layout, so the
   digital verification visually reads as "the same document," not a
   generic result page. */
.verify-wrap { display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; padding: 28px 16px; }
.verify-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 3px solid var(--primary);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 60, 30, 0.16), 0 4px 14px rgba(15, 60, 30, 0.08);
  padding: 28px 28px 30px;
  text-align: center;
}
.verify-seal { width: 100px; height: 100px; object-fit: contain; margin: 0 auto 16px; display: block; }

@media (max-width: 560px) {
  .verify-wrap { padding: 16px; }
  .verify-card { max-width: none; padding: 24px 20px 26px; }
}

.verify-status { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 16px 18px; border-radius: 12px; margin-bottom: 26px; }
.verify-status svg { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; }
.verify-status-title { display: block; font-size: 1rem; font-weight: 700; }
.verify-status-sub { display: block; font-size: 0.84rem; margin-top: 2px; }
.verify-status--ok { background: var(--success-bg); color: var(--success); }
.verify-status--ok .verify-status-sub { color: var(--text-muted); }
.verify-status--fail { background: var(--danger-bg); color: var(--danger); }
.verify-status--fail .verify-status-sub { color: var(--text-muted); }

.verify-details { display: flex; flex-direction: column; gap: 14px; text-align: left; margin: 0 0 24px; }
.verify-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.verify-details > div:last-child { border-bottom: none; padding-bottom: 0; }
.verify-details dt { margin: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.verify-details dd { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--text); text-align: right; }

.verify-rin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; color: var(--text-muted); letter-spacing: 0.02em; margin: 0; word-break: break-all; }