/* Ported from app/globals.css, then reworked to fix low-contrast form
   fields and add a light/dark theme. Utility classes (flex, grid, gap-4,
   rounded-full, text-sm, etc.) come from the Tailwind CDN script (see
   partials/head.php) — this file only has the hand-authored "component"
   classes that originally used @apply, since @apply needs a build step
   we don't have here. */

:root {
  color-scheme: light;
  --accent: 179 140 84;
  --accent-dark: 145 108 58;
  --accent-light: 208 176 128;
  --accent-soft: 243 234 219;

  /* Light theme surface tokens */
  --bg-from: 250 249 246;   /* warm off-white */
  --bg-to: 238 236 230;     /* soft accent-tinted gray */
  --text: 20 23 26;
  --text-muted: 90 99 110;
  --card-bg: 255 255 255;
  --card-bg-alpha: 0.72;
  --card-border: 20 23 26;
  --card-border-alpha: 0.08;
  --input-bg: 255 255 255;
  --input-bg-alpha: 0.9;
  --input-border: 20 23 26;
  --input-border-alpha: 0.16;
  --input-text: 15 23 42;
  --pill-bg-alpha: 0.55;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-from: 18 20 24;
  --bg-to: 10 11 14;
  --text: 236 238 240;
  --text-muted: 160 168 178;
  --card-bg: 30 33 38;
  --card-bg-alpha: 0.72;
  --card-border: 255 255 255;
  --card-border-alpha: 0.09;
  --input-bg: 40 43 49;
  --input-bg-alpha: 0.85;
  --input-border: 255 255 255;
  --input-border-alpha: 0.16;
  --input-text: 236 238 240;
  --pill-bg-alpha: 0.12;
}

html[data-accent="emerald"] { --accent: 22 163 74; --accent-dark: 21 128 61; --accent-light: 34 197 94; --accent-soft: 220 252 231; }
html[data-accent="sapphire"] { --accent: 37 99 235; --accent-dark: 29 78 216; --accent-light: 96 165 250; --accent-soft: 219 234 254; }
html[data-accent="burgundy"] { --accent: 159 45 63; --accent-dark: 127 32 48; --accent-light: 190 74 92; --accent-soft: 250 227 231; }

html, body { height: 100%; }
body {
  background: radial-gradient(1200px 800px at 10% -10%, rgb(var(--accent) / 0.10), transparent 60%),
              radial-gradient(1000px 700px at 110% 10%, rgb(var(--accent-light) / 0.10), transparent 55%),
              linear-gradient(180deg, rgb(var(--bg-from)), rgb(var(--bg-to)));
  background-attachment: fixed;
  color: rgb(var(--text));
  min-height: 100vh;
  font-family: "Inter", system-ui, sans-serif;
  transition: background-color .2s, color .2s;
}

::selection { background-color: rgb(var(--accent) / 0.25); }

:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

/* Ambient background blobs — subtler now that body already carries a tint,
   kept mainly for the public booking pages' sense of depth. */
.ambient-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-blobs span { position: absolute; display: block; border-radius: 9999px; filter: blur(90px); opacity: 0.18; animation: ambient-drift 28s ease-in-out infinite alternate; }
html[data-theme="dark"] .ambient-blobs span { opacity: 0.14; }
.ambient-blobs span:nth-child(1) { width: 26rem; height: 26rem; top: -8rem; left: -5rem; background: rgb(var(--accent)); }
.ambient-blobs span:nth-child(2) { width: 24rem; height: 24rem; top: 15%; right: -6rem; background: #60a5fa; animation-delay: -9s; }
.ambient-blobs span:nth-child(3) { width: 22rem; height: 22rem; bottom: -7rem; left: 28%; background: #a78bfa; animation-delay: -18s; }
@keyframes ambient-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(2.5rem, 2rem) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ambient-blobs span { animation: none; } }

/* Glass surface */
.card, .glass-panel {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgb(var(--card-border) / var(--card-border-alpha));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -8px rgb(0 0 0 / 0.10);
  background: rgb(var(--card-bg) / var(--card-bg-alpha));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  color: rgb(var(--text));
}
.card::before, .glass-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(90deg, transparent, rgb(var(--text) / 0.12), transparent);
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: .625rem 1rem; font-size: .875rem; font-weight: 500; transition: all .15s; cursor: pointer; border: none; }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary { color: #fff; background: linear-gradient(180deg, rgb(var(--accent-light)), rgb(var(--accent))); box-shadow: 0 6px 16px -4px rgb(var(--accent) / 0.45); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: .625rem 1rem; font-size: .875rem; font-weight: 500; transition: all .15s; cursor: pointer; border: none; }
.btn-primary:hover { background: linear-gradient(180deg, rgb(var(--accent)), rgb(var(--accent-dark))); }
.btn-primary:disabled { opacity: .5; pointer-events: none; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px;
  padding: .625rem 1rem; font-size: .875rem; font-weight: 500; transition: all .15s; cursor: pointer;
  border: 1px solid rgb(var(--input-border) / 0.22); color: rgb(var(--text));
  background: rgb(var(--input-bg) / var(--input-bg-alpha)); backdrop-filter: blur(12px);
}
.btn-secondary:hover { background: rgb(var(--input-bg) / 1); }
.btn-secondary:disabled { opacity: .5; pointer-events: none; }

.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: .625rem 1rem; font-size: .875rem; font-weight: 500; transition: all .15s; cursor: pointer; border: none; background: rgb(220 38 38 / 0.12); color: #dc2626; }
.btn-danger:hover { background: rgb(220 38 38 / 0.2); }

/* Text fields — this is the fix for "text boxes are not visible": borders
   and backgrounds now use solid, high-contrast tokens instead of
   near-white-on-near-white translucency, in both themes. */
.input, textarea.input, select.input {
  width: 100%; border-radius: 1rem; border: 1.5px solid rgb(var(--input-border) / var(--input-border-alpha));
  padding: .625rem .875rem; font-size: .875rem; color: rgb(var(--input-text)); outline: none;
  background: rgb(var(--input-bg) / var(--input-bg-alpha));
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: rgb(var(--text-muted)); opacity: 0.8; }
.input:focus { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.18); }
input[type="color"].input { padding: .25rem; height: 2.5rem; }

.label { display: block; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--text-muted)); margin-bottom: .375rem; }

.pill { display: inline-flex; align-items: center; gap: .375rem; border-radius: 9999px; padding: .25rem .625rem; font-size: .75rem; font-weight: 500; border: 1px solid rgb(var(--input-border) / 0.16); background: rgb(var(--input-bg) / var(--pill-bg-alpha)); color: rgb(var(--text)); }

select.input option { background-color: rgb(var(--input-bg)); color: rgb(var(--input-text)); }

.nav-pill { display: flex; align-items: center; gap: .75rem; border-radius: 9999px; padding: .625rem .875rem; font-size: .875rem; font-weight: 500; transition: all .15s; text-decoration: none; }
.nav-pill[data-active="true"] { color: #fff; background: linear-gradient(180deg, rgb(var(--accent-light)), rgb(var(--accent))); box-shadow: 0 6px 16px -4px rgb(var(--accent) / 0.45); }
.nav-pill[data-active="false"] { color: rgb(var(--text-muted)); }
.nav-pill[data-active="false"]:hover { background: rgb(var(--input-bg) / 0.5); }

@media print {
  body * { visibility: hidden; }
  #report-print-area, #report-print-area * { visibility: visible; }
  #report-print-area { position: absolute; inset: 0; padding: 1rem; }
  .no-print { display: none !important; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* Small additions for elements that don't map to a component class above */
.status-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 9999px; padding: .2rem .625rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.status-PENDING { background: #fef3c7; color: #92400e; }
.status-CONFIRMED { background: #dcfce7; color: #166534; }
.status-CANCELLED { background: #fee2e2; color: #991b1b; }
.status-NOW { background: #dbeafe; color: #1e40af; }
.status-EXPIRED { background: #f1f5f9; color: #64748b; }
html[data-theme="dark"] .status-PENDING { background: rgb(146 64 14 / 0.35); color: #fde68a; }
html[data-theme="dark"] .status-CONFIRMED { background: rgb(22 101 52 / 0.35); color: #bbf7d0; }
html[data-theme="dark"] .status-CANCELLED { background: rgb(153 27 27 / 0.35); color: #fecaca; }
html[data-theme="dark"] .status-NOW { background: rgb(30 64 175 / 0.35); color: #bfdbfe; }
html[data-theme="dark"] .status-EXPIRED { background: rgb(255 255 255 / 0.08); color: rgb(var(--text-muted)); }

.slot-btn { padding: .5rem .75rem; border-radius: .75rem; border: 1.5px solid rgb(var(--input-border) / var(--input-border-alpha)); background: rgb(var(--input-bg) / var(--input-bg-alpha)); color: rgb(var(--text)); font-size: .875rem; cursor: pointer; transition: all .15s; }
.slot-btn:hover { border-color: rgb(var(--accent) / 0.6); }
.slot-btn[data-selected="true"] { color: #fff; background: linear-gradient(180deg, rgb(var(--accent-light)), rgb(var(--accent))); border-color: transparent; }

.step-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: rgb(var(--input-border) / 0.2); }
.step-dot[data-active="true"] { background: rgb(var(--accent)); width: 1.5rem; }

/* Theme toggle button (sun/moon) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 9999px; border: 1px solid rgb(var(--input-border) / 0.18);
  background: rgb(var(--input-bg) / var(--input-bg-alpha)); cursor: pointer; font-size: 1rem; line-height: 1;
}
.theme-toggle:hover { border-color: rgb(var(--accent) / 0.5); }

/* Language switcher */
.lang-select { min-width: 5.5rem; }

/* RTL (Arabic admin) support: mirror directional utilities that Tailwind's
   CDN build doesn't auto-flip. Layout logic (flex/grid order) already
   mirrors correctly under dir="rtl" natively; these two rules cover the
   couple of hardcoded-direction spots. */
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
html[dir="rtl"] .status-badge { direction: ltr; display: inline-flex; }

/* Embedded mode (e.g. inside the salon site's booking modal iframe): the
   embedding page already shows its own title bar and close button, so our
   own page header and outer page padding would just be redundant chrome. */
html[data-embedded="true"] .page-header { display: none; }
html[data-embedded="true"] .page-wrap { padding-top: 1rem; padding-bottom: 1rem; }