/* ====================================================================
   DJZ — DjangoZen Design System
   --------------------------------------------------------------------
   Tokens, fluid typography, container queries, and overrides that live
   alongside the Tailwind utilities used in templates. Keep this file
   small — anything reusable should be a Tailwind utility or a DJZ
   component.
   ==================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Colour tokens (mirrored in tailwind.config inline) */
  --djz-ink-900: #0c1424;
  --djz-ink-800: #1a2030;
  --djz-ink-700: #2a3142;
  --djz-ink-50:  #f6f8fb;
  --djz-brand-500: #2a6cff;
  --djz-brand-700: #143fb3;
  --djz-gold-600: #b88914;

  /* Fluid typography scale (uses clamp). */
  --djz-fs-xs:  clamp(0.72rem, 0.7vw + 0.6rem, 0.8rem);
  --djz-fs-sm:  clamp(0.82rem, 0.7vw + 0.7rem, 0.9rem);
  --djz-fs-base:clamp(0.92rem, 0.6vw + 0.8rem, 1.0rem);
  --djz-fs-lg:  clamp(1.05rem, 1vw + 0.9rem, 1.2rem);
  --djz-fs-xl:  clamp(1.25rem, 1.4vw + 1rem, 1.5rem);
  --djz-fs-2xl: clamp(1.55rem, 2vw + 1rem, 2rem);
  --djz-fs-3xl: clamp(2rem,    2.6vw + 1rem, 2.75rem);

  /* Spacing rhythm */
  --djz-radius-card: 1rem;
  --djz-radius-pill: 9999px;
  --djz-shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 4px 24px -8px rgba(15,23,42,0.08);
}

/* Smooth focus rings everywhere */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--djz-brand-500);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Hide scrollbar visual noise on side panels */
.djz-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.djz-scroll::-webkit-scrollbar-thumb { background: #d6dbe4; border-radius: 999px; }
.djz-scroll { scrollbar-width: thin; scrollbar-color: #d6dbe4 transparent; }

/* Container-query aware page wrapper:
   when the main column is wide enough we expand cards to a 12-col grid. */
.djz-page { container-type: inline-size; }

@container (min-width: 880px) {
  .djz-grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 1180px) {
  .djz-grid-cards { gap: 1.25rem; }
}

/* Tabular figures everywhere money or counts appear */
.djz-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Print styles for invoices / folios */
@media print {
  body { background: white; }
  aside, header, footer, .no-print { display: none !important; }
  main { padding: 0 !important; }
  .djz-print-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* Alpine cloak — avoids flicker before x-show / x-data initialise */
[x-cloak] { display: none !important; }

/* Guest-name privacy mode — activated by .privacy-on on <body>.
   Front Desk can toggle the eye icon in the navbar to mask guest names
   across all public-facing lists without logging out or changing role. */
.privacy-on .djz-guest-name {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.2s ease;
  border-radius: 3px;
  display: inline-block;
}

/* Custom scrollbar for sidebar nav */
nav.djz-nav { overflow-y: auto; scrollbar-width: thin; }

/* Subtle table row hover */
tbody.djz-rows > tr { transition: background-color 0.12s ease; }
tbody.djz-rows > tr:hover { background-color: var(--djz-ink-50); }
.dark tbody.djz-rows > tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
.dark tbody.djz-rows > tr:hover > td,
.dark tbody.djz-rows > tr:hover > td * {
  color: inherit;
}

/* ====================================================================
   DJZ Component Library
   Stand-alone components usable WITHOUT Tailwind by referencing the
   `djz-*` class names. Mirror utility-class output so existing
   Tailwind-based templates continue to work.
   ==================================================================== */

/* Card */
.djz-card {
  background: #ffffff;
  border: 1px solid var(--djz-ink-50);
  border-radius: var(--djz-radius-card);
  box-shadow: var(--djz-shadow-card);
  padding: 1.25rem 1.5rem;
}
.dark .djz-card {
  background: var(--djz-ink-900);
  border-color: var(--djz-ink-700);
}

/* Stat */
.djz-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid var(--djz-ink-50);
  border-radius: var(--djz-radius-card);
}
.dark .djz-stat { background: var(--djz-ink-900); border-color: var(--djz-ink-700); }
.djz-stat .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #94a3b8;
}
.djz-stat .value {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--djz-ink-900);
}
.dark .djz-stat .value { color: white; }

/* Buttons */
.djz-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 0.625rem;
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.djz-btn-primary {
  background: var(--djz-brand-500);
  color: white;
}
.djz-btn-primary:hover { background: var(--djz-brand-700); }
.djz-btn-secondary {
  background: var(--djz-ink-50);
  color: var(--djz-ink-900);
}
.dark .djz-btn-secondary { background: var(--djz-ink-800); color: white; }
.djz-btn-ghost { background: transparent; color: var(--djz-ink-700); }
.djz-btn-ghost:hover { background: var(--djz-ink-50); }
.djz-btn-danger { background: #e11d48; color: white; }
.djz-btn-danger:hover { background: #be123c; }

/* Badges (tonal) */
.djz-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  border-radius: var(--djz-radius-pill);
  letter-spacing: 0.02em;
}
.djz-badge-neutral { background: #f1f5f9; color: #475569; }
.djz-badge-success { background: #d1fae5; color: #065f46; }
.djz-badge-info    { background: #dbeafe; color: #1e40af; }
.djz-badge-warning { background: #fef3c7; color: #92400e; }
.djz-badge-danger  { background: #fee2e2; color: #991b1b; }
.djz-badge-gold    { background: #fef9c3; color: #78350f; }
.dark .djz-badge-neutral { background: rgba(100,116,139,0.20); color: #cbd5e1; }
.dark .djz-badge-success { background: rgba(16,185,129,0.18);  color: #6ee7b7; }
.dark .djz-badge-info    { background: rgba(59,130,246,0.18);   color: #93c5fd; }
.dark .djz-badge-warning { background: rgba(245,158,11,0.18);   color: #fcd34d; }
.dark .djz-badge-danger  { background: rgba(225,29,72,0.18);    color: #fda4af; }
.dark .djz-badge-gold    { background: rgba(184,137,20,0.20);   color: #fde68a; }

/* Stat icon tones */
.djz-stat-icon-gold                { background: #fef3c7; color: #92400e; }
.dark .djz-stat-icon-gold          { background: rgba(234,179,8,0.22); color: #fde68a; }

/* Inputs */
.djz-input,
.djz-select,
.djz-textarea {
  width: 100%;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--djz-ink-50);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--djz-ink-900);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.dark .djz-input,
.dark .djz-select,
.dark .djz-textarea {
  background: var(--djz-ink-800);
  border-color: var(--djz-ink-700);
  color: #e6e8ee;
}
.djz-input:focus,
.djz-select:focus,
.djz-textarea:focus {
  border-color: var(--djz-brand-500);
  box-shadow: 0 0 0 3px rgba(42, 108, 255, 0.15);
}

/* Section header */
.djz-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--djz-ink-50);
}
.dark .djz-section-header { border-bottom-color: var(--djz-ink-700); }
.djz-section-header h1,
.djz-section-header h2 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 700;
  font-size: var(--djz-fs-xl);
  color: var(--djz-ink-900);
  margin: 0;
}
.dark .djz-section-header h1,
.dark .djz-section-header h2 { color: white; }
.djz-section-header .subtitle { font-size: var(--djz-fs-sm); color: #64748b; margin-top: 2px; }

/* Property switcher (compact dropdown) */
.djz-prop-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 0.5rem;
  border: 1px solid var(--djz-ink-50);
  background: #ffffff;
  font-size: 13px;
  color: var(--djz-ink-700);
}
.dark .djz-prop-switch {
  border-color: var(--djz-ink-700);
  background: var(--djz-ink-800);
  color: white;
}

/* KPI row */
.djz-kpi-row {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Tonal alerts / callouts */
.djz-alert {
  padding: 12px 16px;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  border-left: 3px solid;
}
.djz-alert-info    { border-color: #6366f1; background: rgba(99,102,241,0.08); color: #1e293b; }
.djz-alert-success { border-color: #10b981; background: rgba(16,185,129,0.08); color: #064e3b; }
.djz-alert-warning { border-color: #f59e0b; background: rgba(245,158,11,0.08); color: #78350f; }
.djz-alert-danger  { border-color: #e11d48; background: rgba(225,29,72,0.08);  color: #881337; }
.dark .djz-alert-info,
.dark .djz-alert-success,
.dark .djz-alert-warning,
.dark .djz-alert-danger { color: inherit; }

/* HTMX request indicator helper */
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ============================================================
   Dark mode tokens — applied via the .dark class on <html>.
   ============================================================ */
.dark .djz-card,
.dark [class*="bg-white"]:not(input):not(select):not(textarea):not(button) {
  /* Defensive — most surfaces use Tailwind dark: utilities directly,
     but very old templates that hard-coded bg-white still get a sane look. */
}

.dark ::placeholder { color: #6b7280; }

/* Inputs in dark mode — Tailwind forms plugin defaults to white bg */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="tel"],
.dark input[type="url"],
.dark select,
.dark textarea {
  background-color: #1a2030;
  border-color: #2a3142;
  color: #e6e8ee;
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  background-color: #0c1424;
  border-color: #5390ff;
}

/* Native date / time picker calendar icon — invert so it's visible on
   dark backgrounds. Chromium-only selector, Firefox handles natively. */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.85);
  cursor: pointer;
  opacity: 0.85;
}
.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ============================================================
   Sidebar collapsed mode — driven by .djz-sb-collapsed on <html>.
   The aside tag uses inline width via Alpine `:style`; we just
   tweak nested elements that don't already conditionally render.
   ============================================================ */
html.djz-sb-collapsed [data-sb-text] { display: none; }

/* Smooth body transitions when toggling theme so it doesn't strobe */
body { transition: background-color 0.18s ease, color 0.18s ease; }