/* The Admin — custom styles layered on top of Tailwind (Play CDN).
 *
 * Tailwind handles the bulk of layout/spacing via utility classes in the
 * templates; this file adds a small set of component styles (sidebar, cards,
 * tables, status badges) plus a couple of UX niceties (flash auto-dismiss
 * transition, HTMX request indicator). Kept intentionally small.
 */

:root {
  --color-brand: #a8122f;        /* deep red — brand accent */
  --color-brand-dark: #8c0f27;   /* darker red (hover) */
  --color-sidebar: #0f172a;      /* slate-900 */
  --color-sidebar-hover: #1e293b;/* slate-800 */
  --color-sidebar-text: #cbd5e1; /* slate-300 */
  --sidebar-width: 16rem;
}

html,
body {
  height: 100%;
}

body {
  background-color: #f1f5f9; /* slate-100 */
  color: #0f172a;            /* slate-900 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------------------
 * Layout shell
 * ------------------------------------------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------------------- */

.sidebar {
  background-color: var(--color-sidebar);
  color: var(--color-sidebar-text);
  width: var(--sidebar-width);
}

.sidebar-brand {
  color: #fff;
}

.nav-group-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: #64748b; /* slate-500 */
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--color-sidebar-text);
  font-size: 0.9rem;
  line-height: 1.25rem;
  transition: background-color 120ms ease, color 120ms ease;
}

.nav-link:hover {
  background-color: var(--color-sidebar-hover);
  color: #fff;
}

.nav-link.is-active {
  background-color: var(--color-brand);
  color: #fff;
}

.nav-link .nav-icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
}

.nav-child {
  padding-left: 2.25rem;
  font-size: 0.85rem;
}

/* ----------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */

.card {
  background-color: #fff;
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.card-hover {
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.card-hover:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: #f8c7ce; /* accent-200 */
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b; /* slate-500 */
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid #e2e8f0;
  background-color: #f8fafc; /* slate-50 */
}

.data-table tbody td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid #f1f5f9; /* slate-100 */
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background-color: #f8fafc; /* slate-50 */
}

/* ----------------------------------------------------------------------------
 * Mobile/tablet table readability (< lg).
 *
 * On narrow screens a wide data table (e.g. 7 columns) would otherwise compress
 * to the viewport and wrap every cell — names break mid-line and money breaks
 * after the "€", which reads badly. Instead we keep each cell on a single line
 * and let the table's `overflow-x-auto` wrapper scroll horizontally. (Every data
 * table must sit inside such a wrapper, or nowrap would overflow the page.)
 * Desktop (>= lg) keeps the default wrapping behaviour, which already fits.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .data-table th,
  .data-table td,
  table.min-w-full th,
  table.min-w-full td {
    white-space: nowrap;
  }
}

/* ----------------------------------------------------------------------------
 * Status badges
 * ------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1rem;
  white-space: nowrap;
}

.badge-neutral {
  background-color: #f1f5f9;
  color: #475569;
}

.badge-info {
  background-color: #e0f2fe;
  color: #0369a1;
}

.badge-success {
  background-color: #dcfce7;
  color: #15803d;
}

.badge-warning {
  background-color: #fef3c7;
  color: #b45309;
}

.badge-danger {
  background-color: #fee2e2;
  color: #b91c1c;
}

.badge-pending {
  background-color: #ede9fe;
  color: #6d28d9;
}

/* Map domain status values to badge styles. Applied as e.g.
 * <span class="badge status-approved">. */
.status-draft { background-color: #f1f5f9; color: #475569; }
.status-pending { background-color: #fef3c7; color: #b45309; }
.status-approved { background-color: #dcfce7; color: #15803d; }
.status-partially_approved { background-color: #d1fae5; color: #047857; }
.status-rejected { background-color: #fee2e2; color: #b91c1c; }
.status-fulfilling { background-color: #e0f2fe; color: #0369a1; }
.status-partially_fulfilled { background-color: #dbeafe; color: #1d4ed8; }
.status-fulfilled { background-color: #dcfce7; color: #166534; }
.status-cancelled { background-color: #f1f5f9; color: #64748b; }
.status-in_transit { background-color: #e0f2fe; color: #0369a1; }
.status-completed { background-color: #dcfce7; color: #166534; }

/* Priority chips. */
.priority-low { background-color: #f1f5f9; color: #475569; }
.priority-normal { background-color: #e0f2fe; color: #0369a1; }
.priority-high { background-color: #fef3c7; color: #b45309; }
.priority-urgent { background-color: #fee2e2; color: #b91c1c; }

/* ----------------------------------------------------------------------------
 * Buttons (lightweight; templates mostly use Tailwind utilities)
 * ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--color-brand);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-brand-dark);
}

.btn-secondary {
  background-color: #fff;
  color: #334155;
  border-color: #cbd5e1;
}

.btn-secondary:hover {
  background-color: #f8fafc;
}

.btn-danger {
  background-color: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background-color: #b91c1c;
}

/* ----------------------------------------------------------------------------
 * Flash messages (auto-dismiss transition handled by app.js)
 * ------------------------------------------------------------------------- */

.flash {
  transition: opacity 300ms ease, transform 300ms ease;
}

.flash.flash-hide {
  opacity: 0;
  transform: translateY(-0.5rem);
}

/* ----------------------------------------------------------------------------
 * HTMX request indicator
 * ------------------------------------------------------------------------- */

.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
 * Modal
 * ------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  /* Scroll the whole overlay when the dialog is taller than the viewport
   * (short phones / on-screen keyboard up). `margin: auto` on the dialog keeps
   * it centred when there's room yet leaves the top reachable when there isn't —
   * plain `align-items: center` would clip the top with no way to scroll to it. */
  overflow-y: auto;
}

.modal-backdrop > * {
  margin: auto;
}

[hidden] {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * Theme toggle icon (sun/moon) — shown based on the .dark class, no JS needed.
 * ------------------------------------------------------------------------- */

.theme-icon-dark {
  display: none;
}
html.dark .theme-icon-light {
  display: none;
}
html.dark .theme-icon-dark {
  display: inline-flex;
}

/* ----------------------------------------------------------------------------
 * Dark mode (class strategy; toggled by app.js, persisted in localStorage).
 * Centralised here so templates need no per-element `dark:` variants. The
 * `.dark .utility` selectors out-specify the base Tailwind utilities used inline.
 * ------------------------------------------------------------------------- */

.dark body {
  background-color: #0b1120; /* slate-950-ish */
  color: #e2e8f0;            /* slate-200 */
}

/* Surfaces */
.dark .card {
  background-color: #111827; /* gray-900 */
  border-color: #1f2937;     /* gray-800 */
  box-shadow: none;
}
.dark .card-hover:hover {
  border-color: var(--color-brand);
}

/* Tables */
.dark .data-table thead th {
  background-color: #0b1120;
  color: #94a3b8;
  border-bottom-color: #1f2937;
}
.dark .data-table tbody td {
  border-bottom-color: #1f2937;
}
.dark .data-table tbody tr:hover {
  background-color: #1a2436;
}

/* Buttons */
.dark .btn-secondary {
  background-color: #1f2937;
  color: #e2e8f0;
  border-color: #374151;
}
.dark .btn-secondary:hover {
  background-color: #273244;
}

/* Form controls — catch-all so inputs stay legible regardless of utilities. */
.dark input,
.dark select,
.dark textarea {
  background-color: #0f172a;
  color: #e2e8f0;
  border-color: #374151;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b;
}

/* Common inline text/background/border utilities used across templates. */
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-gray-900,
.dark .text-gray-800 {
  color: #f1f5f9;
}
.dark .text-slate-700,
.dark .text-slate-600,
.dark .text-gray-700,
.dark .text-gray-600 {
  color: #cbd5e1;
}
.dark .text-slate-500,
.dark .text-slate-400,
.dark .text-gray-500 {
  color: #94a3b8;
}
.dark .bg-white {
  background-color: #111827;
}
.dark .bg-slate-50,
.dark .bg-slate-100,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  background-color: #0f172a;
}
.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover {
  background-color: #1a2436;
}
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: #1f2937;
}

/* Accent text + highlight-row fills in dark mode. Tailwind's light accent
 * utilities (text-red-600, bg-red-50, …) aren't auto-adjusted, so a highlighted
 * row (e.g. an overdue trainer carries bg-red-50) kept its light pink fill while
 * its text flipped to near-white — white-on-pink, unreadable. Lighten accent
 * text to the 400 level and turn light accent fills into subtle dark tints. */
.dark .text-red-500,
.dark .text-red-600,
.dark .text-red-700 { color: #f87171; }
.dark .text-emerald-500,
.dark .text-emerald-600,
.dark .text-emerald-700,
.dark .text-green-600,
.dark .text-green-700 { color: #34d399; }
.dark .text-amber-600,
.dark .text-amber-700,
.dark .text-yellow-600,
.dark .text-yellow-700 { color: #fbbf24; }

.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
.dark .bg-amber-50,
.dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.12); }
.dark .bg-green-50,
.dark .bg-emerald-50 { background-color: rgba(34, 197, 94, 0.12); }
.dark .bg-blue-50,
.dark .bg-indigo-50 { background-color: rgba(14, 165, 233, 0.12); }

/* Badges + status/priority chips — translucent fills so they read in the dark. */
.dark .badge-neutral { background-color: #1f2937; color: #cbd5e1; }
.dark .badge-info { background-color: rgba(14, 165, 233, 0.15); color: #7dd3fc; }
.dark .badge-success { background-color: rgba(34, 197, 94, 0.15); color: #86efac; }
.dark .badge-warning { background-color: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.dark .badge-danger { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.dark .badge-pending { background-color: rgba(139, 92, 246, 0.18); color: #c4b5fd; }
.dark .status-draft,
.dark .status-cancelled { background-color: #1f2937; color: #cbd5e1; }
.dark .status-pending { background-color: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.dark .status-approved,
.dark .status-partially_approved,
.dark .status-fulfilled,
.dark .status-completed { background-color: rgba(34, 197, 94, 0.15); color: #86efac; }
.dark .status-rejected { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.dark .status-fulfilling,
.dark .status-in_transit,
.dark .status-partially_fulfilled { background-color: rgba(14, 165, 233, 0.15); color: #7dd3fc; }
.dark .priority-low { background-color: #1f2937; color: #cbd5e1; }
.dark .priority-normal { background-color: rgba(14, 165, 233, 0.15); color: #7dd3fc; }
.dark .priority-high { background-color: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.dark .priority-urgent { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; }

/* Misc */
.dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.6); }