/* ── Green Light LLC — Portal Styles ── */

:root {
  --green:          #2E6B3E;
  --green-dark:     #235530;
  --green-light:    rgba(46,107,62,0.08);
  --amber:          #854F0B;
  --amber-bg:       #FAEEDA;
  --amber-border:   rgba(201,168,76,0.4);
  --red:            #A32D2D;
  --red-bg:         #FCEBEB;

  --bg-primary:     #ffffff;
  --bg-secondary:   #f7f7f5;
  --bg-tertiary:    #f0efec;

  --text-primary:   #1a1a18;
  --text-secondary: #6b6b66;
  --text-tertiary:  #a8a8a2;

  --border:         rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);

  --radius:         8px;
  --radius-lg:      12px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }

/* ── Layout ── */
.layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 10;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 14px 12px;
  border-bottom: 0.5px solid var(--border);
}
.logo-icon {
  width: 28px; height: 28px;
  background: var(--green);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-img   { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.logo-name  { font-size: 14px; font-weight: 500; }
.logo-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

.nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.nav-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  padding: 12px 14px 4px;
  font-weight: 500;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .1s;
}
.nav-item:hover { background: var(--bg-secondary); color: var(--text-primary); }
.nav-item.active {
  color: var(--green);
  border-left-color: var(--green);
  background: var(--green-light);
  font-weight: 500;
}
.nav-icon { width: 14px; height: 14px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  background: #C9A84C;
  color: #412402;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 10px;
}
.nav-footer {
  padding: 10px 14px;
  border-top: 0.5px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Main ── */
.main {
  margin-left: 200px;
  padding: 22px 24px;
  flex: 1;
  min-width: 0;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.page-title { font-size: 17px; font-weight: 500; }
.co-badge {
  background: var(--green-light);
  color: var(--green-dark);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

/* ── Flash / Alert ── */
.flash, .alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  margin-bottom: 14px;
}
.flash-success, .alert-success { background: #EAF3DE; border: 0.5px solid #C0DD97; color: #3B6D11; }
.flash-error,   .alert-error   { background: var(--red-bg); border: 0.5px solid #F7C1C1; color: var(--red); }
.alert-warning, .flash-warning {
  background: var(--amber-bg);
  border: 0.5px solid var(--amber-border);
  color: var(--amber);
}
.alert a { color: var(--amber); text-decoration: underline; font-weight: 500; }

/* ── Metrics ── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.metric {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.metric-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-value { font-size: 20px; font-weight: 500; }
.green { color: var(--green); }
.amber { color: var(--amber); }
.red   { color: var(--red); }

/* ── Cards ── */
.cards {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  overflow: hidden;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.card-title { font-size: 13px; font-weight: 500; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 0.5px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
td {
  padding: 8px;
  font-size: 12px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
.sub-text { font-size: 10px; color: var(--text-tertiary); margin-top: 1px; font-family: monospace; }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-neg     { background: #EAF3DE; color: #3B6D11; }
.badge-pos     { background: var(--red-bg); color: #791F1F; }
.badge-held    { background: var(--amber-bg); color: #633806; }
.badge-type    { background: #EEEDFE; color: #3C3489; }
.badge-random  { background: #EEEDFE; color: #3C3489; }
.badge-rs      { background: var(--red-bg); color: #791F1F; }
.badge-followup{ background: #E1F5EE; color: #085041; }
.badge-rtd     { background: #E6F1FB; color: #0C447C; }

/* ── Buttons ── */
.btn {
  padding: 5px 11px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-secondary); }
.btn-primary  { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); }
.btn-release  { background: var(--green); color: #fff; border-color: var(--green); }
.btn-release:hover { background: var(--green-dark); }
.btn-full     { width: 100%; padding: 9px; font-size: 13px; }

/* ── Forms ── */
.form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-bottom: 10px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
select, input[type=text], input[type=email], input[type=tel], input[type=password], textarea {
  width: 100%;
  padding: 7px 9px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(46,107,62,.12);
}
textarea { resize: vertical; min-height: 52px; }

/* ── Order wizard ── */
.steps { display: flex; align-items: center; margin-bottom: 16px; }
.step { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-tertiary); }
.step.active { color: var(--green); font-weight: 500; }
.step.done   { color: var(--text-secondary); }
.step-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
}
.step.active .step-num { background: var(--green); color: #fff; border-color: var(--green); }
.step-line { flex: 1; height: 0.5px; background: var(--border); margin: 0 6px; }

.site-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  margin-bottom: 6px;
}
.site-option:has(input:checked) { border-color: var(--green); background: var(--green-light); }
.site-option input[type=radio] { margin-top: 2px; flex-shrink: 0; }
.site-name  { font-size: 13px; font-weight: 500; }
.site-detail{ font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.pref-badge { font-size: 10px; background: #EAF3DE; color: #3B6D11; padding: 1px 6px; border-radius: 6px; margin-left: 6px; }

.info-box { background: var(--bg-secondary); border-radius: var(--radius); padding: 9px 11px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.review-box { background: var(--bg-secondary); border-radius: var(--radius); padding: 10px 12px; }
.info-row   { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 0.5px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-secondary); }

/* ── Modal ── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 100;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-strong);
  padding: 20px;
  width: 440px; max-width: 95vw;
}
.modal-title { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.modal-sub   { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.warn-box    { background: var(--amber-bg); border: 0.5px solid var(--amber-border); border-radius: var(--radius); padding: 9px 11px; font-size: 12px; color: var(--amber); margin-bottom: 12px; }
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12px; border-bottom: 0.5px solid var(--border); cursor: pointer; }
.checklist-item:last-child { border-bottom: none; }
.checklist-item input { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 12px; font-weight: 500;
  z-index: 200; white-space: nowrap;
}

/* ── Empty state ── */
.empty-state { text-align: center; padding: 28px; font-size: 12px; color: var(--text-secondary); }

/* ── Login ── */
.login-body { background: var(--bg-tertiary); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-wrap { width: 100%; max-width: 380px; padding: 16px; }
.login-card { background: var(--bg-primary); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-logo-icon { width: 36px; height: 36px; background: var(--green); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.login-name { font-size: 15px; font-weight: 500; }
.login-sub  { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.login-card .form-group { margin-bottom: 10px; }
.login-card input { padding: 8px 10px; font-size: 13px; }


/* Phase E preview — panel cell tri-color */
.panel-neg { color: #15803d; font-weight: 600; }
.panel-pos { color: #b91c1c; font-weight: 700; background: rgba(239,68,68,.08); }
.panel-other { color: #999; }


/* ── Notification toast popups (Phase polish 2026-04-28) ── */
#gl-toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 380px;
}
.gl-toast {
  background: #fff;
  border-radius: 8px;
  border-left: 5px solid #94a3b8;
  box-shadow: 0 6px 24px rgba(13, 31, 45, 0.18), 0 1px 3px rgba(0,0,0,0.05);
  padding: 14px 16px 14px 18px;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: gl-toast-slide-in 0.32s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.gl-toast.gl-toast-leaving {
  transform: translateX(420px);
  opacity: 0;
}
.gl-toast:hover { transform: translateX(-4px); }
@keyframes gl-toast-slide-in {
  from { transform: translateX(420px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.gl-toast-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.gl-toast-body {
  flex: 1;
  min-width: 0;
}
.gl-toast-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.gl-toast-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #475569;
}
.gl-toast-pri-high {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: #fef2f2;
  color: #b91c1c;
}
.gl-toast-title {
  color: #0d1f2d;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 3px;
}
.gl-toast-msg {
  color: #475569;
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gl-toast-close {
  background: none;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 4px;
  flex-shrink: 0;
}
.gl-toast-close:hover { color: #0d1f2d; }

/* ══════════════════════════════════════════════════════════════
   Visual polish — colored accent borders, subtle gradients & shine
   Shared by client + admin portals; applies site-wide.
   ══════════════════════════════════════════════════════════════ */

/* Cards — faint gradient face, soft elevation, brand-green top accent */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 0 rgba(46,107,62,.40),
              0 1px 2px rgba(16,24,20,.05),
              0 3px 10px rgba(16,24,20,.035);
  transition: box-shadow .2s ease;
}
.card:hover {
  box-shadow: inset 0 2px 0 rgba(46,107,62,.60),
              0 2px 6px rgba(16,24,20,.07),
              0 10px 26px rgba(16,24,20,.06);
}

/* Primary buttons — vertical gradient + top sheen */
.btn-primary, .btn-release {
  background: linear-gradient(180deg, #3a7f4e 0%, var(--green) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover, .btn-release:hover {
  background: linear-gradient(180deg, #347346 0%, var(--green-dark) 100%);
}

/* Client metric tiles — elevated, green left accent, hover lift */
.metric {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #fbfbf9);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 12px 16px;
  box-shadow: 0 1px 2px rgba(16,24,20,.05);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.metric::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #4ade80, var(--green));
}
.metric:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,20,.09); }
.metric-value { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }

/* Stat cards (dashboard hero numbers) — gradient top bar, corner shine, lift */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px){ .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #fbfcfb);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,20,.05), 0 2px 8px rgba(16,24,20,.03);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sc-a), var(--sc-b));
}
.stat-card::after {
  content: ""; position: absolute; top: -55px; right: -40px; width: 150px; height: 150px;
  background: radial-gradient(circle, var(--sc-glow), transparent 68%);
  pointer-events: none;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16,24,20,.10); }
/* tactile press-in on the clickable dashboard tiles */
a.stat-card:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 3px 8px rgba(16,24,20,.16), 0 1px 2px rgba(16,24,20,.06); transition: transform .06s ease, box-shadow .06s ease; }
.stat-card .stat-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.stat-card .stat-num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--sc-a); }
.stat-card .stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
.sc-green  { --sc-a:#1f9d55; --sc-b:#4ade80; --sc-glow:rgba(74,222,128,.16); }
.sc-blue   { --sc-a:#2563eb; --sc-b:#60a5fa; --sc-glow:rgba(96,165,250,.16); }
.sc-amber  { --sc-a:#d97706; --sc-b:#fbbf24; --sc-glow:rgba(251,191,36,.18); }
.sc-red    { --sc-a:#dc2626; --sc-b:#f87171; --sc-glow:rgba(248,113,113,.16); }
.sc-purple { --sc-a:#7c3aed; --sc-b:#a78bfa; --sc-glow:rgba(167,139,250,.16); }

/* ══════════════════════════════════════════════════════════════
   Universal polish sweep — reaches report tiles, tables, headers,
   nav, forms & score circles on every page. Selectors are scoped to
   .main (or use higher specificity) so they win over per-template
   inline <style> blocks.
   ══════════════════════════════════════════════════════════════ */

/* Report / section tiles & mini-panels — card treatment site-wide */
.main .rp-tile, .main .dq-tile, .main .aq-tile,
.main .clean, .main .mis-card, .main .aq-bulk {
  background: linear-gradient(180deg, #ffffff, #fcfcfa);
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 0 rgba(46,107,62,.38),
              0 1px 2px rgba(16,24,20,.05),
              0 3px 10px rgba(16,24,20,.035);
  transition: transform .18s ease, box-shadow .18s ease;
}
.main .rp-tile:hover, .main .dq-tile:hover, .main .aq-tile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 2px 0 rgba(46,107,62,.55),
              0 8px 20px rgba(16,24,20,.08);
}
/* keep the "active" annual-query tile outline visible over the accent */
.main .aq-tile.active { outline: 2px solid #C9A84C; outline-offset: -1px; }

/* Report tables — soft elevation (they already round their own corners) */
.main table.rp, .main table.dq, .main table.aq {
  box-shadow: 0 1px 2px rgba(16,24,20,.05), 0 3px 10px rgba(16,24,20,.03);
}

/* Tables everywhere — subtle zebra + green row hover.
   Zebra is zero-specificity (:where) so semantic row colors always win. */
.main table tbody tr { transition: background .12s ease; }
:where(.main table tbody tr:nth-child(2n)) { background: rgba(20,30,25,.022); }
.main table tbody tr:hover { background: rgba(46,107,62,.06); }

/* Page headers — clean divider with a green→gold brand accent */
.page-header {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.page-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 62px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), #C9A84C);
}

/* Sidebar active nav — richer highlight + thicker accent bar */
.nav-item.active {
  border-left-width: 3px;
  background: linear-gradient(90deg, rgba(46,107,62,.15), rgba(46,107,62,.03));
  font-weight: 600;
}

/* Form fields — soft inset depth + smooth focus transition */
select, input[type=text], input[type=email], input[type=tel], input[type=password], textarea {
  box-shadow: inset 0 1px 2px rgba(16,24,20,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus, input:focus, textarea:focus {
  box-shadow: inset 0 1px 2px rgba(16,24,20,.03), 0 0 0 3px rgba(46,107,62,.14);
}

/* Badges & pills — faint top sheen for a printed-chip feel */
.badge, .pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* Compliance score circles — colored glow ring */
.main .score-circ { box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.main .score-circ.sc-green { box-shadow: 0 5px 16px rgba(22,163,74,.40); }
.main .score-circ.sc-amber { box-shadow: 0 5px 16px rgba(217,119,6,.40); }
.main .score-circ.sc-red   { box-shadow: 0 5px 16px rgba(220,38,38,.40); }

/* ══════════════════════════════════════════════════════════════
   Premium login screen — brand gradient backdrop + elevated card
   ══════════════════════════════════════════════════════════════ */
.login-body {
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(46,107,62,.30), transparent 60%),
    radial-gradient(760px 480px at 108% 112%, rgba(201,168,76,.14), transparent 55%),
    linear-gradient(180deg, #0f2317 0%, #143020 46%, #0c1c12 100%);
}
.login-wrap { max-width: 400px; }
.login-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #fbfcfb);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 16px;
  padding: 32px 30px;
  box-shadow: 0 26px 64px rgba(0,0,0,.42),
              0 4px 12px rgba(0,0,0,.24),
              inset 0 1px 0 rgba(255,255,255,.7);
  overflow: hidden;
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--green), #4ade80 55%, #C9A84C);
}
.login-logo { margin-bottom: 24px; }
.login-logo-img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.login-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.login-sub  { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.login-card .btn-full { margin-top: 4px; padding: 11px; font-size: 13px; letter-spacing: .01em; }

/* ══════════════════════════════════════════════════════════════
   Depth pass — lift bespoke card/panel containers on pages that
   define their own styles (invoices, orders, training, compliance,
   QuickBooks, DQ-locked, etc.). Elevation + hover only: no bg/border
   change, so it never clashes with a page's own colors.
   ══════════════════════════════════════════════════════════════ */

/* Discrete cards & tiles — soft shadow + gentle hover lift */
.main .card2, .main .lk-card, .main .lk-pcard, .main .tcard, .main .tp-open,
.main .inv-card, .main .qb-status-card, .main .qb-info-card, .main .radar-card,
.main .ci-card, .main .ci-tile, .main .au-card, .main .dn-card,
.main .rp-recent-card, .main .md-card, .main .cr-tile, .main .dg-tile,
.main .ca-tile, .main .xp-tile, .main .rp-pool {
  box-shadow: 0 1px 2px rgba(16,24,20,.05), 0 3px 10px rgba(16,24,20,.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.main .card2:hover, .main .lk-card:hover, .main .lk-pcard:hover, .main .tcard:hover,
.main .tp-open:hover, .main .inv-card:hover, .main .qb-status-card:hover,
.main .qb-info-card:hover, .main .radar-card:hover, .main .ci-card:hover,
.main .ci-tile:hover, .main .au-card:hover, .main .dn-card:hover,
.main .rp-recent-card:hover, .main .md-card:hover, .main .cr-tile:hover,
.main .dg-tile:hover, .main .ca-tile:hover, .main .xp-tile:hover, .main .rp-pool:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16,24,20,.09);
}

/* Section wrappers & panels — elevation only (no lift on big blocks) */
.main .lk-why, .main .ots-wrap, .main .ots-result, .main .emp-sec, .main .drv-sec {
  box-shadow: 0 1px 2px rgba(16,24,20,.05), 0 3px 10px rgba(16,24,20,.035);
}


/* ═══════════════════════════════════════════════════════════════
   Nav + login polish (2026-07-29): colour-coded sections + icons,
   sidebar depth, frosted login card over a large lighthouse logo.
   ═══════════════════════════════════════════════════════════════ */
.sidebar{
  background:linear-gradient(180deg,#ecf4ec 0%,#e4efe5 100%);
  border-right:none;
  box-shadow:inset -1px 0 0 var(--border),7px 0 24px rgba(16,24,20,.06);
}
.logo{box-shadow:0 1px 0 rgba(255,255,255,.7)}
.sidebar .nav-item:hover{background:rgba(46,107,62,.10);color:var(--text-primary)}
.nav-group{--accent:var(--green)}
.nav .nav-group:nth-of-type(1){--accent:#2E6B3E}
.nav .nav-group:nth-of-type(2){--accent:#0E7C86}
.nav .nav-group:nth-of-type(3){--accent:#2563EB}
.nav .nav-group:nth-of-type(4){--accent:#7C3AED}
.nav .nav-group:nth-of-type(5){--accent:#EAB308}
.nav .nav-group:nth-of-type(6){--accent:#BE3455}
.nav .nav-group:nth-of-type(7){--accent:#0891B2}
.nav .nav-group:nth-of-type(8){--accent:#4D7C0F}
.nav-section{
  color:var(--accent);
  font-weight:700;letter-spacing:.09em;
  display:flex;align-items:center;gap:7px;
}
.nav-section::before{
  content:"";width:7px;height:7px;border-radius:2px;flex-shrink:0;
  background:currentColor;box-shadow:0 0 7px currentColor;opacity:.95;
}
.nav-icon{color:var(--accent);opacity:.92;transition:color .12s,opacity .12s,transform .12s}
.nav-item{border-radius:0 8px 8px 0}
.nav-item:hover .nav-icon{opacity:1;transform:translateX(1px)}
.nav-item.active .nav-icon{color:var(--green-dark);opacity:1}
.nav-item.active{box-shadow:inset 0 0 0 1px rgba(46,107,62,.10),0 2px 6px rgba(46,107,62,.12)}

/* Login — frosted glass card over a large lighthouse watermark */
.login-body{overflow:hidden}
.login-body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url(../img/gl_logo.png) no-repeat center 46%;
  background-size:min(780px,90vw);opacity:.72;
}
.login-wrap{position:relative;z-index:1}
.login-card{
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(3px) saturate(1.1);backdrop-filter:blur(3px) saturate(1.1);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 26px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28);
}
.login-name{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.login-sub{color:rgba(255,255,255,.78)}
.login-card .form-label{color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.login-card .form-input{
  background:rgba(8,16,11,.52);border:1px solid rgba(255,255,255,.30);color:#fff;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.login-card .form-input::placeholder{color:rgba(255,255,255,.55)}
.login-logo-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.login-card a{color:#C9A84C !important}
.login-card button[onclick]{color:#C9A84C !important}
.login-card > div[style*="margin-top:20px"]{color:rgba(255,255,255,.75) !important}


/* App-wide: gentle GOLD page behind, opaque LIGHT-GREEN blocks (all pages) */
.main{
  background:
    radial-gradient(1100px 560px at 12% -6%, rgba(46,107,62,.24), transparent 60%),
    linear-gradient(180deg,#abccae 0%, #9cc4a0 100%);
}
.card{
  background:linear-gradient(180deg,#ecf4ec 0%, #e4efe5 100%);
  border-color:rgba(46,107,62,.18);
}
.stat-card{
  background:linear-gradient(180deg,#eef5ee 0%, #e6f0e6 100%);
  border-color:rgba(46,107,62,.16);
}


/* Alert card (e.g. DQ Expiration Alerts) — clear red tint, overrides the app-wide green */
.card.card-alert{
  background:linear-gradient(180deg,#e8f0fb 0%,#dce9f8 100%);
  border-color:rgba(37,99,235,.28);
  box-shadow:inset 0 2px 0 rgba(37,99,235,.60),0 1px 2px rgba(16,24,20,.05),0 3px 10px rgba(16,24,20,.04);
}


/* Scrollbars — dark forest green throughout */
html{scrollbar-color:#234B2C transparent;scrollbar-width:thin}
*{scrollbar-color:#234B2C transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#234B2C;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#2E6B3E;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}


/* Nav labels — darker + bolder for legibility on the green sidebar */
.sidebar .nav-item{color:#1e2a20;font-weight:600}
.sidebar .nav-item.active{color:var(--green-dark);font-weight:700}


/* Dashboard: soft-blue highlight on hovered rows / lines */
.main .card table tbody tr{transition:background .12s ease}
.main .card table tbody tr:hover{background:rgba(37,99,235,.13)}
.main .card a[href]:not(.btn){transition:background .12s ease;border-radius:6px}
.main .card a[href]:not(.btn):hover{background:rgba(37,99,235,.12)}


/* Dashboard: row hover for inline-styled rows (Recent Activity + Background Checks) */
.main .card div[style*="display:flex"][style*="border-bottom"]{transition:background .12s ease}
.main .card div[style*="display:flex"][style*="border-bottom"]:hover{background:rgba(37,99,235,.10);border-radius:6px}

/* Dashboard: pop-up lift on tile links (Clearinghouse + Background Checks tiles) */
.main a[href][style*="border-radius:10px"]{transition:transform .15s ease, box-shadow .15s ease}
.main a[href][style*="border-radius:10px"]:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(16,24,20,.16)}

/* Documents on file: lift the count tiles on hover */
.card-alert[style*="display:flex"] > div:not(:first-child){transition:transform .15s ease, box-shadow .15s ease;border-radius:8px;padding:4px 10px}
.card-alert[style*="display:flex"] > div:not(:first-child):hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(16,24,20,.14);background:rgba(255,255,255,.45)}


/* ═══════════════════════════════════════════════════════════════
   BEAUTY PASS (2026-07-30): site-wide row hover on every nav page,
   green/blue colour scheme on previously-colourless blocks & tiles,
   plus motion-safe entrance + micro-interactions. Appended last so
   it wins ties over earlier rules and per-page <style> blocks.
   ═══════════════════════════════════════════════════════════════ */

/* ---- 1. Universal row hover (tables + inline list rows + clickable rows) ---- */
/* Consistent soft-blue highlight everywhere, matching the dashboard feel. */
.main table tbody tr{transition:background .12s ease}
.main table tbody tr:hover{background:rgba(37,99,235,.10)}
.main .table-wrap tbody tr:hover{background:rgba(37,99,235,.10)}

/* Inline-styled flex rows with a divider — the list-row pattern used across pages */
.main div[style*="display:flex"][style*="border-bottom"],
.main a[style*="display:flex"][style*="border-bottom"]{transition:background .12s ease;border-radius:6px}
.main div[style*="display:flex"][style*="border-bottom"]:hover,
.main a[style*="display:flex"][style*="border-bottom"]:hover{background:rgba(37,99,235,.10)}

/* Clickable list-row anchors inside any card/section */
.main .card a[href]:not(.btn),
.main .card2 a[href]:not(.btn),
.main .sec-body a[href]:not(.btn){transition:background .12s ease;border-radius:6px}
.main .card a[href]:not(.btn):hover,
.main .card2 a[href]:not(.btn):hover,
.main .sec-body a[href]:not(.btn):hover{background:rgba(37,99,235,.12)}

/* ---- 2. Colour scheme on colourless blocks ---- */
/* Section / detail cards inherit the app-wide green card face */
.main .card2, .main .lk-card, .main .lk-pcard, .main .tcard, .main .tp-open,
.main .inv-card, .main .qb-status-card, .main .qb-info-card, .main .radar-card,
.main .au-card, .main .dn-card, .main .rp-recent-card, .main .md-card,
.main .rp-pool{
  background:linear-gradient(180deg,#ecf4ec 0%,#e4efe5 100%);
  border:1px solid rgba(46,107,62,.18);
}

/* Summary tiles — alternate GREEN / BLUE for a lively, intentional scheme.
   Odd tiles green, even tiles blue, each with a matching top accent bar. */
.main .rp-tile, .main .dq-tile, .main .aq-tile, .main .ci-tile,
.main .cr-tile, .main .dg-tile, .main .ca-tile, .main .xp-tile, .main .mis-card{
  background:linear-gradient(180deg,#ecf4ec 0%,#e4efe5 100%);
  border:1px solid rgba(46,107,62,.20);
  border-top:3px solid #2E6B3E;
}
.main .rp-tile:nth-child(even), .main .dq-tile:nth-child(even),
.main .aq-tile:nth-child(even), .main .ci-tile:nth-child(even),
.main .cr-tile:nth-child(even), .main .dg-tile:nth-child(even),
.main .ca-tile:nth-child(even), .main .xp-tile:nth-child(even),
.main .mis-card:nth-child(even){
  background:linear-gradient(180deg,#e8f0fb 0%,#dce9f8 100%);
  border:1px solid rgba(37,99,235,.24);
  border-top:3px solid #2563EB;
}
/* Blue tiles get a blue hover glow instead of the green inset */
.main .rp-tile:nth-child(even):hover, .main .dq-tile:nth-child(even):hover,
.main .aq-tile:nth-child(even):hover, .main .ci-tile:nth-child(even):hover,
.main .cr-tile:nth-child(even):hover, .main .dg-tile:nth-child(even):hover,
.main .ca-tile:nth-child(even):hover, .main .xp-tile:nth-child(even):hover,
.main .mis-card:nth-child(even):hover{
  box-shadow:inset 0 2px 0 rgba(37,99,235,.55),0 8px 20px rgba(16,24,20,.09);
}

/* ---- 3. Section-header label bars (dq-sec / drv-sec style headers) ---- */
.main .dq-sec, .main .drv-sec, .main .emp-sec, .main .sect > h3, .main .sec-head{
  position:relative;padding-left:12px;
}
.main .dq-sec::before, .main .drv-sec::before, .main .emp-sec::before,
.main .sect > h3::before, .main .sec-head::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:1em;border-radius:2px;
  background:linear-gradient(180deg,#2E6B3E,#4ade80);
}

/* ---- 4. Micro-interactions ---- */
/* Button hover lift */
.btn{transition:background .12s ease, transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,24,20,.12)}
.btn:active{transform:translateY(0)}

/* Brand selection colour + smooth scrolling */
::selection{background:rgba(46,107,62,.22)}
html{scroll-behavior:smooth}

/* Keyboard focus ring (accessibility polish) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible{
  outline:2px solid #2563EB;outline-offset:2px;border-radius:6px;
}

/* ---- 5. Motion-safe entrance: cards & tiles rise in on load ---- */
@media (prefers-reduced-motion: no-preference){
  @keyframes gl-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .main .card, .main .stat-card, .main .metric,
  .main .card2, .main .rp-tile, .main .dq-tile, .main .aq-tile, .main .ci-tile,
  .main .cr-tile, .main .dg-tile, .main .ca-tile, .main .xp-tile,
  .main .inv-card, .main .qb-status-card, .main .radar-card, .main .md-card{
    animation:gl-rise .45s cubic-bezier(.2,.8,.3,1) both;
  }
  /* gentle stagger for the first row of siblings in a group */
  .main .card:nth-child(2), .main .metric:nth-child(2), .main .stat-card:nth-child(2),
  .main .rp-tile:nth-child(2), .main .dq-tile:nth-child(2), .main .aq-tile:nth-child(2),
  .main .dg-tile:nth-child(2), .main .ci-tile:nth-child(2), .main .cr-tile:nth-child(2){animation-delay:.05s}
  .main .card:nth-child(3), .main .metric:nth-child(3), .main .stat-card:nth-child(3),
  .main .rp-tile:nth-child(3), .main .dq-tile:nth-child(3), .main .aq-tile:nth-child(3),
  .main .dg-tile:nth-child(3), .main .ci-tile:nth-child(3), .main .cr-tile:nth-child(3){animation-delay:.10s}
  .main .card:nth-child(4), .main .metric:nth-child(4), .main .stat-card:nth-child(4),
  .main .rp-tile:nth-child(4), .main .dq-tile:nth-child(4), .main .aq-tile:nth-child(4),
  .main .dg-tile:nth-child(4), .main .ci-tile:nth-child(4), .main .cr-tile:nth-child(4){animation-delay:.15s}
  .main .card:nth-child(5), .main .stat-card:nth-child(5),
  .main .rp-tile:nth-child(5), .main .dq-tile:nth-child(5), .main .aq-tile:nth-child(5){animation-delay:.20s}
}


/* ═══════════════════════════════════════════════════════════════
   BEAUTY PASS ROUND 2 (2026-07-30): empty states, search glow,
   badge legibility, skeleton shimmer, sticky headers, PRINT sheet,
   and full DARK MODE. Appended last to win ties.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Empty states — friendly, centred, with a soft icon ---- */
.main .empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:40px 24px;text-align:center;
  color:var(--text-secondary);
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.15));
  border:1px dashed rgba(46,107,62,.28);border-radius:var(--radius-lg);
}
.main .empty-state::before{
  content:"✓";width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(46,107,62,.18),rgba(46,107,62,.06));
  border:1px solid rgba(46,107,62,.25);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  color:#2E6B3E;font-size:19px;font-weight:700;line-height:1;
}
.main .empty-state::after{ content:none; }

/* ---- Global search bar — focus glow + gentle grow ---- */
#gl-search-input{transition:box-shadow .16s ease, background .16s ease, transform .16s ease}
#gl-search-input:focus{
  background:rgba(255,255,255,.14) !important;
  box-shadow:0 0 0 3px rgba(46,107,62,.22), 0 2px 8px rgba(16,24,20,.12) !important;
}

/* ---- Badge / pill legibility — consistent weight, padding, sheen ---- */
.badge, .pill{font-weight:600;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* ---- Skeleton shimmer utility (add class .gl-skel to any placeholder) ---- */
@keyframes gl-shimmer{0%{background-position:-320px 0}100%{background-position:320px 0}}
.gl-skel{
  color:transparent !important;border-radius:6px;
  background:linear-gradient(90deg,rgba(46,107,62,.08) 25%,rgba(46,107,62,.16) 37%,rgba(46,107,62,.08) 63%);
  background-size:640px 100%;animation:gl-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){.gl-skel{animation:none}}

/* ---- Sticky table headers on long lists ---- */
/* table-wrap must not clip vertically for sticky to engage */
.main .table-wrap{overflow:visible}
.main table thead th{
  position:sticky;top:0;z-index:3;
  background:#e9f1ea;
  box-shadow:0 1px 0 rgba(46,107,62,.18);
}

/* ═══════════════════ PRINT / DOT-AUDIT STYLESHEET ═══════════════════ */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sidebar, .nav-footer, #gl-toast-stack, .btn, .modal-overlay,
  form#gl-search-form, .co-badge, .gl-theme-toggle{display:none !important}
  .layout{display:block}
  .main{
    margin:0 !important;padding:0 !important;background:#fff !important;
    color:#000 !important;animation:none !important;
  }
  .main .card, .main .card2, .main .stat-card, .main .metric,
  .main .rp-tile, .main .dq-tile, .main .aq-tile, .main .ci-tile,
  .main .cr-tile, .main .dg-tile, .main .ca-tile, .main .xp-tile{
    background:#fff !important;border:1px solid #ccc !important;
    box-shadow:none !important;animation:none !important;transform:none !important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .main table{break-inside:auto}
  .main tr{break-inside:avoid;page-break-inside:avoid}
  .main thead{display:table-header-group}
  .main thead th{position:static !important;background:#f0f0f0 !important;color:#000 !important}
  .page-header{border-bottom:2px solid #000 !important}
  .page-header::after{display:none}
  a{color:#000 !important;text-decoration:none}
  /* Audit header stamp on every printed page */
  .main::before{
    content:"Green Light LLC — Compliance Record";
    display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
    color:#000;border-bottom:1px solid #000;padding-bottom:6px;margin-bottom:12px;
  }
}

/* ═══════════════════════ DARK MODE ═══════════════════════ */
html[data-theme="dark"]{
  --bg-primary:#101a14;
  --bg-secondary:#15221a;
  --bg-tertiary:#0b130e;
  --text-primary:#e7efe9;
  --text-secondary:#9db3a4;
  --text-tertiary:#6d8577;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.20);
  background:#0b130e;
}
html[data-theme="dark"] body{background:#0b130e}

/* App shell */
html[data-theme="dark"] .main{
  background:
    radial-gradient(1100px 560px at 12% -6%, rgba(46,107,62,.16), transparent 60%),
    linear-gradient(180deg,#0e1a12 0%,#0b140e 100%);
}
html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#0f1a13 0%,#0c1610 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06),7px 0 24px rgba(0,0,0,.4);
}
html[data-theme="dark"] .sidebar .nav-item{color:#cfe0d4}
html[data-theme="dark"] .sidebar .nav-item.active{color:#9be6b0}
html[data-theme="dark"] .sidebar .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
html[data-theme="dark"] .logo{box-shadow:0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .logo-name,html[data-theme="dark"] .page-title{color:#e7efe9}

/* Cards & panels */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .main .card2, html[data-theme="dark"] .main .lk-card,
html[data-theme="dark"] .main .lk-pcard, html[data-theme="dark"] .main .tcard,
html[data-theme="dark"] .main .tp-open, html[data-theme="dark"] .main .inv-card,
html[data-theme="dark"] .main .qb-status-card, html[data-theme="dark"] .main .qb-info-card,
html[data-theme="dark"] .main .radar-card, html[data-theme="dark"] .main .au-card,
html[data-theme="dark"] .main .dn-card, html[data-theme="dark"] .main .rp-recent-card,
html[data-theme="dark"] .main .md-card, html[data-theme="dark"] .main .rp-pool{
  background:linear-gradient(180deg,#15231b 0%,#111d16 100%);
  border-color:rgba(255,255,255,.09);
}
html[data-theme="dark"] .main .table-wrap{background:#111d16}

/* Green tiles (odd) */
html[data-theme="dark"] .main .rp-tile, html[data-theme="dark"] .main .dq-tile,
html[data-theme="dark"] .main .aq-tile, html[data-theme="dark"] .main .ci-tile,
html[data-theme="dark"] .main .cr-tile, html[data-theme="dark"] .main .dg-tile,
html[data-theme="dark"] .main .ca-tile, html[data-theme="dark"] .main .xp-tile,
html[data-theme="dark"] .main .mis-card{
  background:linear-gradient(180deg,#16261c 0%,#122019 100%);
  border-color:rgba(255,255,255,.08);border-top-color:#3a7f4e;
}
/* Blue tiles (even) */
html[data-theme="dark"] .main .rp-tile:nth-child(even), html[data-theme="dark"] .main .dq-tile:nth-child(even),
html[data-theme="dark"] .main .aq-tile:nth-child(even), html[data-theme="dark"] .main .ci-tile:nth-child(even),
html[data-theme="dark"] .main .cr-tile:nth-child(even), html[data-theme="dark"] .main .dg-tile:nth-child(even),
html[data-theme="dark"] .main .ca-tile:nth-child(even), html[data-theme="dark"] .main .xp-tile:nth-child(even),
html[data-theme="dark"] .main .mis-card:nth-child(even){
  background:linear-gradient(180deg,#152232 0%,#111b29 100%);
  border-color:rgba(96,165,250,.22);border-top-color:#3b82f6;
}
html[data-theme="dark"] .card.card-alert{
  background:linear-gradient(180deg,#152232 0%,#111b29 100%);
  border-color:rgba(96,165,250,.30);
}

/* Tables, headers, sticky */
html[data-theme="dark"] table thead th{background:#15221a;box-shadow:0 1px 0 rgba(255,255,255,.06)}
html[data-theme="dark"] th{color:#9db3a4}
html[data-theme="dark"] td{border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .main table tbody tr:hover{background:rgba(96,165,250,.14)}
:where(html[data-theme="dark"] .main table tbody tr:nth-child(2n)){background:rgba(255,255,255,.02)}

/* Forms */
html[data-theme="dark"] select,
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=password],
html[data-theme="dark"] textarea{
  background:#0f1a14;border-color:rgba(255,255,255,.16);color:#e7efe9;
}

/* Empty state on dark */
html[data-theme="dark"] .main .empty-state{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.14);
}

/* Metric top accent stays green */
html[data-theme="dark"] .co-badge{background:rgba(46,107,62,.25);color:#9be6b0}

/* Theme toggle button */
.gl-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 auto;
  border:1px solid var(--border-strong);border-radius:7px;
  background:transparent;color:inherit;cursor:pointer;opacity:.8;
  transition:opacity .12s ease, background .12s ease, transform .12s ease;
}
.gl-theme-toggle:hover{opacity:1;background:rgba(46,107,62,.12);transform:translateY(-1px)}
html[data-theme="dark"] .gl-theme-toggle:hover{background:rgba(255,255,255,.08)}

/* ---- Dark mode: brighten the nav section + icon accents so the colour-coding
   pops on the dark sidebar (the light-mode hues were too dark on dark). ---- */
html[data-theme="dark"] .nav .nav-group:nth-of-type(1){--accent:#4ade80}
html[data-theme="dark"] .nav .nav-group:nth-of-type(2){--accent:#2dd4bf}
html[data-theme="dark"] .nav .nav-group:nth-of-type(3){--accent:#60a5fa}
html[data-theme="dark"] .nav .nav-group:nth-of-type(4){--accent:#c084fc}
html[data-theme="dark"] .nav .nav-group:nth-of-type(5){--accent:#fde047}
html[data-theme="dark"] .nav .nav-group:nth-of-type(6){--accent:#fb7185}
html[data-theme="dark"] .nav .nav-group:nth-of-type(7){--accent:#22d3ee}
html[data-theme="dark"] .nav .nav-group:nth-of-type(8){--accent:#a3e635}
html[data-theme="dark"] .nav-section{color:var(--accent)}
html[data-theme="dark"] .nav-icon{color:var(--accent);opacity:1}

/* ══════════════════════════════════════════════════════════════════
   Sitewide polish pass (2026-08-04) — universal title chips + tile pops
   ══════════════════════════════════════════════════════════════════ */

/* Every page title becomes a dark forest-green chip that pops on hover */
.page-title{
  font-size:17px; font-weight:600;
  display:inline-block; padding:8px 16px; border-radius:10px;
  color:#eaf3ec;
  background:linear-gradient(180deg,#2E6B3E 0%,#1f4429 100%);
  border:1px solid rgba(201,168,76,.35);
  box-shadow:inset 0 2px 0 rgba(201,168,76,.40),0 1px 2px rgba(16,24,20,.10),0 3px 10px rgba(16,24,20,.10);
  transition:transform .16s ease, box-shadow .16s ease;
}
.page-title:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 2px 0 rgba(201,168,76,.5),0 12px 26px rgba(16,24,20,.20);
}
html[data-theme="dark"] .page-title{
  color:#eaf3ec;
  background:linear-gradient(180deg,#245038 0%,#173d2a 100%);
  border-color:rgba(201,168,76,.32);
  box-shadow:inset 0 2px 0 rgba(201,168,76,.38),0 3px 10px rgba(0,0,0,.30);
}

/* Every KPI tile pops forward on hover (all pages) */
.stat-card,.cr-tile,.xp-tile,.aq-tile,.dg-tile,.ci-tile,.rp-tile,.dq-tile,.ca-tile{
  transition:transform .16s ease, box-shadow .16s ease;
}
.stat-card:hover,.cr-tile:hover,.xp-tile:hover,.aq-tile:hover,.dg-tile:hover,
.ci-tile:hover,.rp-tile:hover,.dq-tile:hover,.ca-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(13,31,45,.16);
  position:relative; z-index:2;
}

/* Reusable helpers for per-page work */
.gl-blue{
  background:linear-gradient(180deg,#e8f0fb 0%,#dce9f8 100%)!important;
  border-color:rgba(37,99,235,.28)!important;
  box-shadow:inset 0 2px 0 rgba(37,99,235,.55),0 1px 2px rgba(16,24,20,.05),0 3px 10px rgba(16,24,20,.04)!important;
}
html[data-theme="dark"] .gl-blue{
  background:linear-gradient(180deg,#152232 0%,#111b29 100%)!important;
  border-color:rgba(96,165,250,.30)!important;
}
.gl-hi{ transition:background .14s ease, transform .14s ease; }
.gl-hi:hover{ background:rgba(37,99,235,.10); }
html[data-theme="dark"] .gl-hi:hover{ background:rgba(96,165,250,.14); }

/* Generic pop + 4-color tile palette for the per-page polish pass */
.gl-pop{ transition:transform .16s ease, box-shadow .16s ease; }
.gl-pop:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(13,31,45,.16); position:relative; z-index:2; }
.gl-c1{ background:linear-gradient(180deg,#e8f0fb 0%,#dce9f8 100%)!important; border-color:rgba(37,99,235,.30)!important; }
.gl-c2{ background:linear-gradient(180deg,#e9f7ee 0%,#dcefe2 100%)!important; border-color:rgba(22,163,74,.30)!important; }
.gl-c3{ background:linear-gradient(180deg,#fdf4e3 0%,#f8ecd0 100%)!important; border-color:rgba(202,138,4,.35)!important; }
.gl-c4{ background:linear-gradient(180deg,#f1eafb 0%,#e7dcf6 100%)!important; border-color:rgba(147,51,234,.30)!important; }
html[data-theme="dark"] .gl-c1{ background:linear-gradient(180deg,#152232 0%,#111b29 100%)!important; border-color:rgba(96,165,250,.30)!important; }
html[data-theme="dark"] .gl-c2{ background:linear-gradient(180deg,#12241a 0%,#0e1b14 100%)!important; border-color:rgba(74,222,128,.28)!important; }
html[data-theme="dark"] .gl-c3{ background:linear-gradient(180deg,#241f12 0%,#1b170e 100%)!important; border-color:rgba(234,179,8,.30)!important; }
html[data-theme="dark"] .gl-c4{ background:linear-gradient(180deg,#1f1830 0%,#171125 100%)!important; border-color:rgba(192,132,252,.30)!important; }

/* Row hover must win over status-tinted INLINE row backgrounds (overdue/due-soon rows) */
.main table tbody tr:hover,
.main .card table tbody tr:hover,
.main .table-wrap table tbody tr:hover{ background:rgba(37,99,235,.14)!important; }
html[data-theme="dark"] .main table tbody tr:hover{ background:rgba(96,165,250,.16)!important; }

/* ══ Interaction polish (2026-08-05): flash glow-up + button press ══ */
.flash, .alert{
  position:relative; padding-left:14px;
  border-left:4px solid transparent;
  box-shadow:0 2px 8px rgba(16,24,20,.07);
  animation:gl-flash-in .30s cubic-bezier(.2,.9,.4,1.1);
  transition:opacity .35s ease, transform .35s ease;
}
.flash::before, .alert::before{ font-weight:700; font-size:13px; line-height:1; flex:0 0 auto; }
.flash-success::before, .alert-success::before{ content:"✓"; }
.flash-error::before,   .alert-error::before{   content:"✕"; }
.flash-warning::before, .alert-warning::before{ content:"⚠"; }
.flash-success, .alert-success{ border-left-color:#3B6D11; }
.flash-error,   .alert-error{   border-left-color:var(--red,#c0392b); }
.flash-warning, .alert-warning{ border-left-color:var(--amber,#b45309); }
.flash.gl-dismissing, .alert.gl-dismissing{ opacity:0; transform:translateY(-6px); }
.flash .gl-flash-x{ margin-left:auto; cursor:pointer; opacity:.5; font-weight:700; padding:0 2px; line-height:1; transition:opacity .12s ease; }
.flash .gl-flash-x:hover{ opacity:1; }
@keyframes gl-flash-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }

/* Button press feedback (buttons already lift on hover; give them a tactile press) */
.btn:active, button:active, .btn-primary:active, .btn-release:active, .btn-full:active{
  transform:translateY(1px)!important;
  box-shadow:inset 0 2px 5px rgba(16,24,20,.18)!important;
}

/* ══ Dark-mode fixes for custom-styled pages (2026-08-05) ══ */
/* Order a Test + Walk-in (.ot-wrap) */
html[data-theme="dark"] .ot-wrap .section{ background:#15221a; border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .ot-wrap h1,
html[data-theme="dark"] .ot-wrap .section h2{ color:#e7efe9; }
html[data-theme="dark"] .ot-wrap .sub,
html[data-theme="dark"] .ot-wrap .hint{ color:#9db3a4; }
html[data-theme="dark"] .ot-wrap label{ color:#cdd8d0; }
html[data-theme="dark"] .ot-wrap input[type=text],
html[data-theme="dark"] .ot-wrap input[type=date],
html[data-theme="dark"] .ot-wrap select{ background:#0f1a13; border-color:rgba(255,255,255,.15); color:#e7efe9; }
html[data-theme="dark"] .ot-wrap .writein-box,
html[data-theme="dark"] .ot-wrap .walkin-banner{ background:#1e2417; border-color:rgba(201,168,76,.30); color:#e8dfb8; }
html[data-theme="dark"] .ot-wrap .gl-card.match{ background:#1b2416; border-color:#C9A84C; }
html[data-theme="dark"] .ot-wrap .gl-card .gl-detail{ color:#c3d0c6; }
html[data-theme="dark"] .ot-wrap a{ color:#8ab4f8; }

/* Training Portal */
html[data-theme="dark"] .tp-hero{ background:linear-gradient(135deg,#1c2416 0%,#15200f 100%); border-color:#C9A84C; }
html[data-theme="dark"] .tp-title{ color:#eaf3ec; }
html[data-theme="dark"] .tp-sub{ color:#b9c6bd; }
html[data-theme="dark"] .tp-secsub{ color:#8ea393; }
html[data-theme="dark"] .tcard{ background:#15221a; border-color:rgba(255,255,255,.10); }
html[data-theme="dark"] .tcard h3,
html[data-theme="dark"] .tcard .price{ color:#e7efe9; }
html[data-theme="dark"] .tcard .desc{ color:#b9c6bd; }
html[data-theme="dark"] .tp-note{ color:#8ea393; }
html[data-theme="dark"] .tp-note a{ color:#8ab4f8; }

/* ══ ⌘K command palette + click-to-copy (2026-08-05) ══ */
#gl-cmdk{ position:fixed; inset:0; z-index:10000; display:none; align-items:flex-start; justify-content:center; background:rgba(13,31,45,.45); }
#gl-cmdk.open{ display:flex; }
#gl-cmdk .gl-cmdk-box{ margin-top:12vh; width:min(560px,92vw); background:var(--card,#fff); border:1px solid var(--border,#e2e2e2); border-radius:12px; box-shadow:0 24px 60px rgba(13,31,45,.35); overflow:hidden; animation:gl-flash-in .16s ease; }
#gl-cmdk .gl-cmdk-input{ width:100%; box-sizing:border-box; border:0; outline:0; padding:16px 18px; font-size:16px; background:transparent; color:var(--text,#0d1f2d); border-bottom:1px solid var(--border,#eee); }
#gl-cmdk .gl-cmdk-list{ max-height:52vh; overflow:auto; padding:6px; }
#gl-cmdk .gl-cmdk-item{ padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--text,#1c2530); cursor:pointer; }
#gl-cmdk .gl-cmdk-item.sel{ background:linear-gradient(180deg,#2E6B3E,#245c30); color:#fff; }
#gl-cmdk .gl-cmdk-empty{ padding:18px; text-align:center; color:var(--text-secondary,#888); font-size:13px; }
#gl-cmdk .gl-cmdk-foot{ display:flex; gap:14px; justify-content:flex-end; padding:8px 14px; border-top:1px solid var(--border,#eee); font-size:10.5px; color:var(--text-secondary,#8a8a8a); text-transform:uppercase; letter-spacing:.04em; }
html[data-theme="dark"] #gl-cmdk .gl-cmdk-box{ background:#12201a; border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] #gl-cmdk .gl-cmdk-input{ color:#e7efe9; border-bottom-color:rgba(255,255,255,.08); }
code[data-glc]{ transition:background .12s ease; }
code[data-glc]:hover{ background:rgba(46,107,62,.14); }

/* Copyable ID affordance (click-to-copy) */
.gl-copyable{ cursor:pointer; border-bottom:1px dashed rgba(46,107,62,.5); }
.gl-copyable:hover{ background:rgba(46,107,62,.12); border-radius:3px; }
.gl-copyable::after{ content:"⧉"; opacity:0; margin-left:5px; font-size:.85em; transition:opacity .12s ease; }
.gl-copyable:hover::after{ opacity:.65; }
html[data-theme="dark"] .gl-copyable{ border-bottom-color:rgba(96,165,250,.5); }
html[data-theme="dark"] .gl-copyable:hover{ background:rgba(96,165,250,.16); }