/* deltatee — 70s retro CRT design tokens + base (component patterns from pbpadel) */
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Inter:wght@400;500;600;700&family=VT323&display=swap');

:root {
  /* 70s palette */
  --clr-sun: #d4622a;        /* burnt orange — primary */
  --clr-sun-hover: #b84f1e;
  --clr-mustard: #e0a526;
  --clr-avocado: #7a8b3f;
  --clr-cream: #f6efdc;      /* page background */
  --clr-surface: #fdf8ec;    /* cards */
  --clr-raised: #f1e7cd;
  --clr-bark: #3a2a1c;       /* headings / strong text */
  --clr-text: #4a3526;
  --clr-text-muted: #8a7461;
  --clr-line: #e3d5b8;
  --clr-phosphor: #2fbf71;   /* CRT green accent (success/online) */
  --clr-crt: #ffb000;        /* amber terminal accent */
  --clr-error: #c0392b;
  --clr-error-bg: #f9ded9;
  --clr-success-bg: #e2efd9;

  --ff-base: 'Inter', system-ui, sans-serif;
  --ff-display: 'Righteous', var(--ff-base);
  --ff-crt: 'VT323', 'Courier New', monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-hero: clamp(2.2rem, 5.5vw, 3.8rem);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(58, 42, 28, 0.10);
  --shadow-sm: 0 2px 8px rgba(58, 42, 28, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--clr-cream);
  color: var(--clr-text);
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--clr-bark); font-family: var(--ff-display); font-weight: 400; letter-spacing: 0.5px; }
h1 { font-size: var(--fs-hero); margin: 0 0 0.5rem; }
h2 { font-size: var(--fs-2xl); margin: 0 0 0.75rem; }
h3 { font-size: var(--fs-xl); margin: 0 0 0.5rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--clr-sun); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1060px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 0;
}
.brand {
  font-family: var(--ff-display);
  font-size: 1.5rem; color: var(--clr-bark); text-decoration: none;
  display: flex; align-items: center; gap: 0.55rem;
}
.brand img { height: 34px; width: auto; }
.brand .sun-dot { color: var(--clr-sun); }
.nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-links a { color: var(--clr-text); font-weight: 500; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; border: none;
  background: var(--clr-sun); color: #fff;
  font-family: var(--ff-base); font-size: var(--fs-base); font-weight: 600;
  padding: 0.7rem 1.5rem; border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.1s ease;
  text-decoration: none;
}
.btn:hover { background: var(--clr-sun-hover); text-decoration: none; transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--clr-surface); color: var(--clr-bark); border: 1.5px solid var(--clr-line); }
.btn-secondary:hover { background: var(--clr-raised); }
.btn-danger { background: var(--clr-error); }
.btn-danger:hover { background: #a93226; }
.btn-sm { padding: 0.45rem 1rem; font-size: var(--fs-sm); }

/* ---------- cards ---------- */
.card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.card + .card { margin-top: 1rem; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--clr-bark); margin: 0.9rem 0 0.3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], select {
  width: 100%; padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--clr-line); border-radius: var(--radius-sm);
  background: #fffdf6; color: var(--clr-text);
  font-family: var(--ff-base); font-size: var(--fs-base);
}
input:focus, select:focus { outline: 2px solid var(--clr-mustard); border-color: var(--clr-mustard); }
.hint { font-size: var(--fs-xs); color: var(--clr-text-muted); margin-top: 0.25rem; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.badge-pending_payment { background: var(--clr-raised); color: var(--clr-text-muted); }
.badge-queued { background: #faf0d3; color: #8a6414; }
.badge-booked { background: var(--clr-success-bg); color: #4a6b1f; }
.badge-booked::before { content: "● "; color: var(--clr-phosphor); }
.badge-cancel_requested, .badge-failed { background: var(--clr-error-bg); color: var(--clr-error); }
.badge-cancelled { background: var(--clr-raised); color: var(--clr-text-muted); }
.badge-active { background: var(--clr-success-bg); color: #4a6b1f; }
.badge-invalid { background: var(--clr-error-bg); color: var(--clr-error); }
.badge-pending { background: #faf0d3; color: #8a6414; }

/* ---------- alerts ---------- */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin: 0.75rem 0; font-size: var(--fs-sm); }
.alert-error { background: var(--clr-error-bg); color: var(--clr-error); }
.alert-ok { background: var(--clr-success-bg); color: #4a6b1f; }
.alert-info { background: #f3ecda; color: var(--clr-text); }

/* ---------- CRT flavor ---------- */
.crt-time { font-family: var(--ff-crt); font-size: 1.4em; color: var(--clr-crt); letter-spacing: 1px; }
.scanlines { position: relative; overflow: hidden; }
.scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.045) 0 2px, transparent 2px 4px);
}

/* ---------- tables / lists ---------- */
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--clr-line);
}
.list-row:last-child { border-bottom: none; }

/* ---------- chips (partner picker) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--clr-raised); border: 1px solid var(--clr-line);
  padding: 0.3rem 0.4rem 0.3rem 0.8rem; border-radius: 999px; font-size: var(--fs-sm);
}
.chip button {
  border: none; background: var(--clr-bark); color: var(--clr-cream);
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1;
}

.search-results { border: 1px solid var(--clr-line); border-radius: var(--radius-sm); margin-top: 0.35rem; background: #fffdf6; max-height: 220px; overflow-y: auto; }
.search-results .sr {
  display: flex; justify-content: space-between; padding: 0.5rem 0.8rem; cursor: pointer;
  border-bottom: 1px solid var(--clr-line); font-size: var(--fs-sm);
}
.search-results .sr:hover { background: var(--clr-raised); }
.search-results .sr:last-child { border-bottom: none; }

/* ---------- footer ---------- */
.footer {
  margin-top: 4rem; padding: 2rem 0 3rem;
  color: var(--clr-text-muted); font-size: var(--fs-sm);
  border-top: 1px solid var(--clr-line);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--clr-phosphor); margin-right: 0.4rem; }
.status-dot.off { background: var(--clr-text-muted); }
.status-dot.warn { background: var(--clr-crt); }