@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --radius-xl: 0.25rem;
}

@layer base {
  /* v3-style default border colour (v4 defaults to currentColor) */
  *, ::before, ::after {
    border-color: var(--line);
  }
}

/* ============ Design tokens ============ */
/* Brand: primary #0B1626 (deep navy), secondary #E8F0F7 (mist) */
:root {
  color-scheme: light;
  --bg: #F1F2F4;
  --surface: #ffffff;
  --ink: #0B1626;
  --muted: #5b6b7f;
  --line: #d8dbe0;
  --accent: #0B1626;
  --accent-hover: #1c3049;
  --ring: rgba(11, 22, 38, 0.28);
  --danger: #dc2626;
  --ok: #15803d;
}
.dark {
  color-scheme: dark;
  --bg: #0B1626;
  --surface: #111f33;
  --ink: #E8F0F7;
  --muted: #9db0c4;
  --line: #22374f;
  --accent: #a9c6e4;
  --accent-hover: #c8dcf0;
  --ring: rgba(169, 198, 228, 0.4);
  --danger: #f87171;
  --ok: #4ade80;
}

/* ============ Base ============ */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: rgba(11, 22, 38, 0.18);
}
.dark ::selection {
  background: rgba(232, 240, 247, 0.25);
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Subtle scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ============ Components ============ */
/* NOTE: component classes live in the `components` layer so that Tailwind
   utilities (including responsive variants like `lg:hidden`) always win
   over them. Unlayered author CSS would override ALL layered utilities. */
@layer components {
.card {
  @apply rounded border p-5 shadow-sm;
  background: var(--surface);
  border-color: var(--line);
}
@media (max-width: 640px) {
  .card { @apply p-4; }
}

.page-title {
  @apply text-xl font-bold tracking-tight;
  font-size: 1.35rem;
  line-height: 1.75rem;
}
@media (min-width: 1024px) {
  .page-title { font-size: 1.5rem; line-height: 2rem; }
}

.btn, .btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: scale(0.98); }
.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary {
  @apply text-white shadow-sm;
  background: #0B1626;
}
.btn-primary:hover { background: #1c3049; }
.dark .btn-primary { background: #E8F0F7; color: #0B1626; }
.dark .btn-primary:hover { background: #ffffff; }
.btn-ghost {
  @apply border;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(100, 116, 139, 0.12); }
.btn-danger {
  @apply border font-semibold;
  border-color: rgba(220, 38, 38, 0.4);
  color: var(--danger);
  background: transparent;
}
.btn-danger:hover { background: rgba(220, 38, 38, 0.08); }
.btn-sm { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.75rem; border-radius: 0.25rem; }
/* Tall action button — matches the 3.5rem floating-label input/select height in form rows */
.btn-tall { height: 3.5rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.btn-icon { width: 2.5rem; padding-left: 0; padding-right: 0; border-radius: 0.25rem; }
/* Borderless square icon button (used for row actions & theme toggle) */
.btn-plain {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  color: var(--ink);
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn-plain:hover { background: rgba(100, 116, 139, 0.12); }
.btn-plain:active { transform: scale(0.92); }
/* High-contrast light button for use on dark imagery */
.btn-light {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: #E8F0F7;
  color: #0B1626;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn-light:hover { background: #ffffff; }
.btn-light:active { transform: scale(0.98); }

.input {
  @apply w-full border px-3 text-sm transition;
  min-height: 2.5rem;
  border-radius: 0.25rem;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}
.dark .input {
  border-color: #334155;
  background: #1e293b;
  color: #f1f5f9;
}
.input::placeholder { color: #94a3b8; }
.input:hover { border-color: #94a3b8; }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
select.input {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}
.dark select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* Must repeat the longhands here: .dark .input (0,2,0) outranks
     select.input (0,1,1) and its background shorthand resets them. */
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}
textarea.input { min-height: 2.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
input[type="checkbox"].input, input[type="radio"].input {
  min-height: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  accent-color: #0B1626;
}

/* Floating-label fields: label rests as placeholder, floats up when filled/focused */
.ff { position: relative; }
.ff > .input { height: 3.5rem; padding-top: 1.5rem; padding-bottom: 0.35rem; }
.ff > textarea.input { height: auto; min-height: 6rem; padding-top: 1.7rem; }
.ff > label {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--muted);
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease;
  max-width: calc(100% - 1.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
}
.ff > textarea.input ~ label, .ff > textarea.input + label { top: 1.35rem; transform: none; }
.ff.floated > label, .ff:focus-within > label {
  top: 0.6rem;
  transform: none;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ff > select.input { cursor: pointer; }

/* Active navigation item (sidebar) */
.nav-active {
  background: #0B1626;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(11, 22, 38, 0.3);
}
.dark .nav-active {
  background: #E8F0F7;
  color: #0B1626;
}

.label {
  @apply mb-1 block text-[11px] font-semibold uppercase tracking-wider;
  color: var(--muted);
}

.badge {
  @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold leading-5;
}

.alert-error {
  @apply rounded-xl border px-3 py-2 text-sm;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.07);
  color: var(--danger);
}
.alert-ok {
  @apply rounded-xl border px-3 py-2 text-sm;
  border-color: rgba(21, 128, 61, 0.3);
  background: rgba(21, 128, 61, 0.07);
  color: var(--ok);
}
.hint { @apply text-xs; color: var(--muted); }
.field-error { @apply text-xs mt-1 font-medium; color: var(--danger); }

/* Tables */
.table-wrap { @apply overflow-x-auto rounded-xl border; border-color: var(--line); background: var(--surface); }
table.table { @apply w-full border-collapse text-sm; min-width: 640px; }
table.table th {
  @apply px-3 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wider;
  color: var(--muted);
  white-space: nowrap;
}
table.table thead th { border-bottom: 1px solid var(--line); }
table.table td { @apply px-3 py-3 align-top; border-top: 1px solid var(--line); }
table.table tbody tr:first-child td { border-top: none; }
table.table tbody tr:nth-child(odd) { background: rgba(100, 116, 139, 0.05); }
table.table tbody tr:hover { background: rgba(100, 116, 139, 0.1); }
} /* end @layer components */

/* ============ Dark-mode contrast for inline status colors ============ */
/* NOTE: intentionally unlayered — these must override utilities in dark mode. */
.dark .bg-slate-50 { background-color: #1e293b; }
.dark .bg-slate-100 { background-color: #1e293b; }
.dark .bg-slate-200 { background-color: #334155; }
.dark .bg-gray-100 { background-color: #1e293b; }
.dark .bg-gray-100.text-gray-600, .dark .text-gray-600 { color: #cbd5e1; }
.dark .bg-blue-50 { background-color: rgba(30, 58, 138, 0.5); }
.dark .bg-blue-100 { background-color: rgba(30, 58, 138, 0.55); }
.dark .bg-amber-100 { background-color: rgba(120, 53, 15, 0.55); }
.dark .bg-red-100 { background-color: rgba(127, 29, 29, 0.55); }
.dark .bg-green-100 { background-color: rgba(20, 83, 45, 0.55); }
.dark .bg-purple-100 { background-color: rgba(76, 29, 149, 0.55); }
.dark .text-blue-800 { color: #bfdbfe; }
.dark .text-amber-800 { color: #fde68a; }
.dark .text-red-800 { color: #fecaca; }
.dark .text-green-800 { color: #bbf7d0; }
.dark .text-purple-800 { color: #ddd6fe; }
.dark .text-slate-400 { color: #94a3b8; }
.dark .text-slate-500 { color: #94a3b8; }
.dark .text-slate-600 { color: #cbd5e1; }
.dark .text-slate-700 { color: #e2e8f0; }
.dark .text-red-600, .dark .text-red-700 { color: #fca5a5; }
.dark .text-green-700 { color: #86efac; }
.dark .border-slate-200, .dark .border-slate-100 { border-color: #1e293b; }
.dark .hover\:bg-slate-100:hover { background-color: #1e293b; }
.dark .hover\:bg-slate-50:hover { background-color: #1e293b; }
.dark .bg-white { background-color: #0f172a; }

/* Links */
a { text-underline-offset: 2px; }
.link { color: var(--accent); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* Logo marquee (landing) */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-x 32s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

/* ============ Motion safety ============ */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}