/* Verifik theme tokens. NPC seal green primary; light default, complete dark variant.
   daisyUI v4 reads these OKLCH triplets; Tailwind utilities are mapped onto them in base.html. */
[data-theme="light"] {
  color-scheme: light;
  --p: 51.04% 0.128 151.35;  --pc: 100% 0 0;
  --s: 41.37% 0.088 249.10;  --sc: 100% 0 0;
  --a: 78.37% 0.163 75.22;   --ac: 22.04% 0.020 84.29;
  --n: 37.17% 0.039 257.29;  --nc: 100% 0 0;
  --b1: 100% 0 0;
  --b2: 97.47% 0.005 247.88;
  --b3: 91.33% 0.012 252.09;
  --bc: 22.93% 0.009 255.60;
  --su: 52.00% 0.130 152.57; --suc: 100% 0 0;
  --wa: 70.93% 0.162 60.67;  --wac: 22.04% 0.020 84.29;
  --er: 55.12% 0.190 26.06;  --erc: 100% 0 0;
  --in: 54.70% 0.134 243.47; --inc: 100% 0 0;
  --rounded-box: .75rem; --rounded-btn: .5rem; --rounded-badge: 1rem;
}
[data-theme="dark"] {
  color-scheme: dark;
  --p: 69.74% 0.151 153.12;  --pc: 21.81% 0.035 155.62;
  --s: 70.88% 0.100 249.39;  --sc: 19.90% 0.036 257.70;
  --a: 82.10% 0.146 80.46;   --ac: 22.04% 0.020 84.29;
  --n: 84.28% 0.016 257.20;  --nc: 24.97% 0.022 257.28;
  --b1: 22.98% 0.015 261.64;
  --b2: 19.90% 0.014 261.00;
  --b3: 33.00% 0.021 259.39;
  --bc: 92.89% 0.010 252.81;
  --su: 74.84% 0.167 153.55; --suc: 21.81% 0.035 155.62;
  --wa: 76.83% 0.147 68.29;  --wac: 22.04% 0.020 84.29;
  --er: 68.85% 0.164 22.33;  --erc: 20.00% 0.040 25.00;
  --in: 72.23% 0.122 241.76; --inc: 20.00% 0.040 250.00;
  --rounded-box: .75rem; --rounded-btn: .5rem; --rounded-badge: 1rem;
}

html, body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, .font-display { font-family: Outfit, Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
body { -webkit-tap-highlight-color: transparent; }

/* Theme toggle shows the icon for the theme you would switch to. */
[data-theme="dark"] .only-light { display: none; }
[data-theme="light"] .only-dark { display: none; }

/* Scrollbars follow the theme. */
* { scrollbar-color: oklch(var(--b3)) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: oklch(var(--b3)); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* Focus rings visible in both themes. */
:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }

/* Sidebar active link. */
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: .5rem;
  font-size: .9rem; color: oklch(var(--bc) / .8); }
.nav-link:hover { background: oklch(var(--b2)); color: oklch(var(--bc)); }
.nav-link.active { background: oklch(var(--p) / .12); color: oklch(var(--p)); font-weight: 600; }

/* Bottom bar on phones, clear of the iOS home indicator. */
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
.bottom-bar a.active { color: oklch(var(--p)); }
.bottom-bar a.active .bar-pill { background: oklch(var(--p) / .14); }

/* Stat cards and panels. */
.panel { background: oklch(var(--b1)); border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box); }
.kpi-value { font-family: Outfit, Inter, sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.1; }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: oklch(var(--bc) / .6); font-weight: 600; }
.muted { color: oklch(var(--bc) / .65); }

/* Tables: sticky header, readable zebra in both themes. */
.table-sticky thead th { position: sticky; top: 0; z-index: 1; background: oklch(var(--b1)); }
.table-zebra-soft tbody tr:nth-child(even) { background: oklch(var(--b2) / .6); }
.table :where(th) { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: oklch(var(--bc) / .65); }

/* Review. */
.conf-ok { color: oklch(var(--su)); }
.conf-low { color: oklch(var(--wa)); }
.strip-img { max-width: 100%; border: 1px solid oklch(var(--b3)); border-radius: .375rem; background: #fff; }
.field-flagged { border-left: 3px solid oklch(var(--wa)); padding-left: .6rem; }
.field-confirmed { border-left: 3px solid oklch(var(--su) / .6); padding-left: .6rem; }

/* Image viewer. The page photo stays a photo (light) in both themes. */
.viewer { position: relative; overflow: hidden; max-width: 100%; background: oklch(var(--b2)); border-radius: .5rem;
  touch-action: none; user-select: none; }
.viewer img { transform-origin: 0 0; max-width: none; will-change: transform; }
.viewer-tools { position: absolute; right: .5rem; top: .5rem; display: flex; gap: .25rem; z-index: 2; }

/* Page grid tiles on register detail. */
.page-tile { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: .5rem; font-size: .8rem;
  font-weight: 600; border: 1px solid oklch(var(--b3)); }
.page-tile.empty { color: oklch(var(--bc) / .45); border-style: dashed; }

/* HTMX. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }

/* Skeleton shimmer for loading states. */
.skeleton-line { height: .8rem; border-radius: .25rem; background: linear-gradient(90deg, oklch(var(--b2)), oklch(var(--b3)), oklch(var(--b2)));
  background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* One-time secret reveal box. */
.secret-box { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all;
  background: oklch(var(--b2)); border: 1px dashed oklch(var(--wa)); border-radius: .5rem; padding: .75rem; }

[x-cloak] { display: none !important; }

@media print {
  .no-print, .drawer-side, .bottom-bar, header.topbar { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Sign-in page: photo background with a green scrim and frosted-glass surfaces. */
.login-scrim { background: linear-gradient(105deg, rgb(6 38 22 / .78) 0%, rgb(6 38 22 / .45) 45%, rgb(6 30 18 / .35) 70%, rgb(4 24 14 / .6) 100%); }
[data-theme="dark"] .login-scrim { background: linear-gradient(105deg, rgb(3 16 10 / .88) 0%, rgb(3 16 10 / .62) 50%, rgb(3 14 9 / .78) 100%); }
@media (max-width: 1023px) { .login-scrim { background: linear-gradient(180deg, rgb(6 38 22 / .8) 0%, rgb(6 38 22 / .55) 45%, rgb(4 24 14 / .75) 100%); } }
.glass-card { background: oklch(var(--b1) / .78); border: 1px solid rgb(255 255 255 / .45);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .5); }
[data-theme="dark"] .glass-card { background: oklch(var(--b1) / .66); border-color: rgb(255 255 255 / .12);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .08); }
.glass-input { background: oklch(var(--b1) / .7); }
.glass-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.glass-btn { color: #fff; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.glass-btn:hover { background: rgb(255 255 255 / .24); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card { background: oklch(var(--b1) / .96); }
}