/* ============================================================
   TBCounter app pages — brand skin (ports the marketing site's
   cinematic dark editorial system into the PHP pages).
   Loads AFTER the Tailwind CDN script so component classes win.
   Fonts: Fraunces (display) · Geist (body) · Geist Mono (labels).
   ============================================================ */

:root {
  --tb-bg: #0b0b0d;
  --tb-surface: #131316;
  --tb-surface-2: #1a1a1e;
  --tb-surface-3: #232228;

  --tb-border: rgba(200, 152, 99, 0.10);
  --tb-border-strong: rgba(200, 152, 99, 0.22);
  --tb-border-soft: rgba(255, 255, 255, 0.06);

  --tb-text: #f3eee0;
  --tb-muted: #a8a193;
  --tb-dim: #6b6557;

  --tb-gold: #c89863;
  --tb-gold-bright: #e0b97a;
  --tb-gold-deep: #8a6a3d;
  --tb-crimson: #a8323a;
  --tb-crimson-bright: #d98a90;
  --tb-sage: #6a9377;
  --tb-sage-bright: #9dbfa9;
  --tb-parchment: #f0e6d0;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(200,152,99,0.09), transparent 60%),
    radial-gradient(ellipse 70% 60% at 110% 110%, rgba(200,152,99,0.05), transparent 55%),
    var(--tb-bg);
  background-attachment: fixed;
  color: var(--tb-text);
  font-family: "Geist", "Segoe UI", system-ui, sans-serif;
  font-weight: 350;
  letter-spacing: 0.005em;
}

/* Film grain — same trick as the marketing site's .grain overlay. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

::selection { background: rgba(200,152,99,0.30); color: var(--tb-parchment); }

a { transition: color .18s ease, border-color .18s ease, opacity .18s ease; }
a:hover { color: var(--tb-gold-bright); }

/* ── Typography helpers ───────────────────────────────────── */
.display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--tb-text);
}
.display .accent {
  font-style: italic;
  color: var(--tb-gold-bright);
  font-weight: 430;
}
.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--tb-gold);
  font-weight: 500;
}
.code, code, kbd {
  font-family: "Geist Mono", ui-monospace, Consolas, monospace;
  background: var(--tb-surface-2);
  border: 1px solid var(--tb-border);
  color: var(--tb-parchment);
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

/* ── Panels (legacy class name: .glass) ───────────────────── */
.glass, .glass-strong {
  background: linear-gradient(rgba(255,255,255,0.015), rgba(255,255,255,0)) , var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 24px 48px -24px rgba(0,0,0,0.55);
  backdrop-filter: none;
}
.glass-strong { border-color: var(--tb-border-strong); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn, .btn-primary {
  display: inline-block;
  background: var(--tb-gold);
  color: #17110a;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  padding: 0.62rem 1.3rem;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover, .btn-primary:hover {
  background: var(--tb-gold-bright);
  color: #17110a;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(200,152,99,0.45);
}
.btn-secondary {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--tb-border-strong);
  color: var(--tb-text);
  font-size: 0.88rem;
  padding: 0.62rem 1.3rem;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.btn-secondary:hover {
  background: rgba(200,152,99,0.08);
  border-color: var(--tb-gold);
  color: var(--tb-parchment);
}
/* A disabled button must LOOK unavailable, not just refuse the click. The
   "Switch computer (0 left)" state is shown rather than hidden so the user can
   see the control exists and why it is out of reach -- a control that vanishes
   reads as a bug. */
.btn:disabled, .btn-primary:disabled,
.btn-secondary:disabled, .btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-secondary:disabled:hover {
  background: transparent;
  border-color: var(--tb-border-strong);
  color: var(--tb-text);
}
.btn-danger {
  display: inline-block;
  background: rgba(168,50,58,0.14);
  border: 1px solid rgba(168,50,58,0.45);
  color: var(--tb-crimson-bright);
  font-size: 0.88rem;
  padding: 0.62rem 1.3rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s ease;
}
.btn-danger:hover { background: rgba(168,50,58,0.26); }

/* Admin pages use compact buttons inside tables. */
.btn-sm, table .btn, table .btn-secondary, table .btn-danger,
form.inline .btn, form.inline .btn-secondary {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
}

/* ── Forms ────────────────────────────────────────────────── */
/* NOTE: no `width` here — admin forms size inputs with utility classes
   (flex-1, w-24, …); a global width:100% out-specifies them and breaks
   those rows. Standalone forms opt in with .w-full. */
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
select, textarea {
  padding: 0.66rem 0.95rem;
  background: var(--tb-surface-2);
  border: 1px solid var(--tb-border-soft);
  border-radius: 10px;
  color: var(--tb-text);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.92rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input[type=email], input[type=password], input.mono, textarea.mono {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.88rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--tb-gold);
  box-shadow: 0 0 0 3px rgba(200,152,99,0.14);
}
input::placeholder, textarea::placeholder { color: var(--tb-dim); }
label { color: var(--tb-muted); }

/* ── Banners / flashes ────────────────────────────────────── */
.banner-success, .banner-info {
  background: rgba(106,147,119,0.12);
  border: 1px solid rgba(106,147,119,0.40);
  color: var(--tb-sage-bright);
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.banner-danger, .err {
  background: rgba(168,50,58,0.12);
  border: 1px solid rgba(168,50,58,0.45);
  color: var(--tb-crimson-bright);
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ── Pills (status chips) ─────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  text-transform: uppercase;
}
.pill-active  { background: rgba(106,147,119,0.16); color: var(--tb-sage-bright);   border: 1px solid rgba(106,147,119,0.35); }
.pill-warn    { background: rgba(200,152,99,0.14);  color: var(--tb-gold-bright);   border: 1px solid rgba(200,152,99,0.35); }
.pill-danger  { background: rgba(168,50,58,0.16);   color: var(--tb-crimson-bright);border: 1px solid rgba(168,50,58,0.40); }
.pill-faint   { background: rgba(255,255,255,0.05); color: var(--tb-muted);         border: 1px solid var(--tb-border-soft); }

/* ── Admin nav ────────────────────────────────────────────── */
.nav a {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  color: var(--tb-muted);
}
.nav a:hover { background: rgba(200,152,99,0.07); color: var(--tb-text); }
.nav a.active { background: rgba(200,152,99,0.10); color: var(--tb-gold-bright); }

/* ── Tables (admin) ───────────────────────────────────────── */
table { border-collapse: collapse; }
table th {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--tb-dim);
  border-bottom: 1px solid var(--tb-border-strong);
  padding-bottom: 0.5rem;
}
table td { border-bottom: 1px solid var(--tb-border-soft); }
table tr:hover td { background: rgba(200,152,99,0.03); }

/* ── License-key hero (thanks page) ───────────────────────── */
.keycard {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--tb-parchment);
  background: linear-gradient(rgba(200,152,99,0.10), rgba(200,152,99,0.03)), var(--tb-surface-2);
  border: 1px solid var(--tb-border-strong);
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px -20px rgba(200,152,99,0.35);
}

/* ── Header logo lockup (shared) ──────────────────────────── */
.brandmark { display: flex; align-items: center; gap: 0.8rem; }
.brandmark img { width: 40px; height: 40px; object-fit: contain; }
.brandmark .name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--tb-text);
}
.brandmark .sub {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--tb-dim);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tb-bg); }
::-webkit-scrollbar-thumb { background: var(--tb-surface-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--tb-gold-deep); }

/* Buttons never wrap mid-label. */
.btn, .btn-primary, .btn-secondary, .btn-danger { white-space: nowrap; }

/* Admin/portal page headings pick up the editorial display face. */
main h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 450;
  letter-spacing: -0.02em;
}

/* ── Portal tabs ──────────────────────────────────────────── */
.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--tb-border-strong);
  margin-bottom: 1.6rem;
}
.tabs a {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--tb-muted); padding: .6rem .95rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--tb-text); }
.tabs a.active { color: var(--tb-gold-bright); border-bottom-color: var(--tb-gold); }
.tabpane { display: none; }
.tabpane.active { display: block; }

/* ── Responsive: small screens (≤640px) ───────────────────── */
/* Account-portal tabs become a horizontally scrollable strip
   instead of wrapping into ragged rows. */
@media (max-width: 640px) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; }
}