/* Base polish on top of Tailwind CDN. */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ---- login background: subtle radial gradient ---- */
.login-bg {
  background:
    radial-gradient(circle at 20% 0%, #dbeafe 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, #e0e7ff 0%, transparent 50%),
    #f8fafc;
}
.dark .login-bg {
  background:
    radial-gradient(circle at 20% 0%, #1e3a8a40 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, #4c1d9540 0%, transparent 50%),
    #020617;
}

/* ---- settings tabs (left rail) ---- */
.settings-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: #475569;
  width: 100%; text-align: left;
  transition: background 120ms ease, color 120ms ease;
}
.settings-tab:hover { background: #e2e8f0; color: #0f172a; }
.settings-tab.is-active {
  background: #1e3a8a; color: white;
}
.dark .settings-tab { color: #cbd5e1; }
.dark .settings-tab:hover { background: #334155; color: #f1f5f9; }
.dark .settings-tab.is-active { background: #2563eb; color: white; }

/* ---- section headings ---- */
.section-heading {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 10px;
}
.section-heading::before {
  content: ""; display: block;
  width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #3b82f6, #1e3a8a);
}
.dark .section-heading { color: #94a3b8; }

/* ---- camera capture modal ---- */
.cam-stage {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-height: 60vh;
}
.cam-stage video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cam-snap-btn {
  width: 64px; height: 64px;
  border-radius: 9999px;
  background: white;
  border: 4px solid #1e3a8a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
  cursor: pointer;
  transition: transform 100ms ease;
}
.cam-snap-btn:hover { transform: scale(1.05); }
.cam-snap-btn:active { transform: scale(0.95); }
.cam-snap-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dark .cam-snap-btn { border-color: #3b82f6; background: #f1f5f9; }
.cam-flash {
  position: absolute; inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
}
.cam-flash.is-flashing {
  animation: cam-flash 280ms ease-out;
}
@keyframes cam-flash {
  0% { opacity: 0; }
  20% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---- toggle switch ---- */
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 150ms ease;
}
.switch .slider::before {
  content: ""; position: absolute;
  height: 14px; width: 14px;
  left: 3px; bottom: 3px;
  background: white; border-radius: 50%;
  transition: transform 150ms ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .2);
}
.switch input:checked + .slider { background: #2563eb; }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(59, 130, 246, .25); }
.dark .switch .slider { background: #475569; }
.dark .switch input:checked + .slider { background: #3b82f6; }

/* ---- card accent line at top ---- */
.card-accent { position: relative; }
.card-accent::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 3px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 0 0 3px 3px;
  opacity: 0.85;
}

/* ---- dropzone ---- */
.dropzone {
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  transition: all 180ms ease;
}
.dropzone.is-dragover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-1px);
}
.dark .dropzone {
  border-color: #475569;
  background: #1e293b;
}
.dark .dropzone.is-dragover {
  border-color: #60a5fa;
  background: #1e3a8a40;
}

/* ---- spinner ---- */
.spinner {
  width: 16px; height: 16px; border-radius: 9999px;
  border: 2px solid #cbd5e1; border-top-color: #2563eb;
  animation: spin 0.7s linear infinite;
}
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }
.dark .spinner { border-color: #475569; border-top-color: #60a5fa; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- toasts ---- */
.toast {
  background: #0f172a; color: white; padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .25);
  animation: toast-in .25s ease-out;
  max-width: 360px; font-size: 14px;
}
.toast.is-error { background: #b91c1c; }
.toast.is-success { background: #047857; }
.dark .toast { background: #f1f5f9; color: #0f172a; }
.dark .toast.is-error { background: #fecaca; color: #7f1d1d; }
.dark .toast.is-success { background: #a7f3d0; color: #064e3b; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- nav tabs ---- */
.tab-btn { color: #475569; padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.tab-btn.is-active { background: #1e3a8a; color: white; }
.tab-btn:not(.is-active):hover { background: #e2e8f0; }
.dark .tab-btn { color: #cbd5e1; }
.dark .tab-btn.is-active { background: #2563eb; color: white; }
.dark .tab-btn:not(.is-active):hover { background: #334155; }

/* ---- form fields ---- */
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #cbd5e1;
  background: white; color: #0f172a; font-size: 14px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.field label { display: block; font-size: 12px; color: #475569; margin-bottom: 4px; font-weight: 500; }
.dark .field input, .dark .field select, .dark .field textarea {
  background: #0f172a; color: #f1f5f9; border-color: #475569;
}
.dark .field input:focus, .dark .field select:focus, .dark .field textarea:focus {
  border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
}
.dark .field label { color: #94a3b8; }
.dark .field input::placeholder, .dark .field textarea::placeholder { color: #64748b; }

/* ---- badges ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; }
.badge-open { background: #dbeafe; color: #1e40af; }
.badge-submitted { background: #fef3c7; color: #92400e; }
.badge-approved { background: #ddd6fe; color: #5b21b6; }
.badge-processed { background: #d1fae5; color: #065f46; }
.dark .badge-open { background: #1e3a8a40; color: #93c5fd; }
.dark .badge-submitted { background: #78350f40; color: #fcd34d; }
.dark .badge-approved { background: #4c1d9540; color: #c4b5fd; }
.dark .badge-processed { background: #06402840; color: #6ee7b7; }

/* ---- kbd ---- */
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 2px 6px; background: #f1f5f9; border: 1px solid #e2e8f0; border-bottom-width: 2px; border-radius: 4px; }
.dark .kbd { background: #1e293b; border-color: #475569; color: #e2e8f0; }

/* ---- modal backdrop ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
  z-index: 40; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.dark .modal-backdrop { background: rgba(0, 0, 0, .65); }

/* ---- theme toggle ---- */
.theme-toggle {
  width: 32px; height: 32px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #1e293b;
  transition: background 120ms ease;
  font-size: 14px;
}
.theme-toggle:hover { background: #e2e8f0; }
.dark .theme-toggle { background: #1e293b; color: #f1f5f9; }
.dark .theme-toggle:hover { background: #334155; }