/* ============================================================
   YKYMF dark reskin — OVERLAY for the ticket system.
   Loaded AFTER each page's inline <style>, so it wins.
   Only colours, borders, shadows and fonts are overridden —
   never layout — so the existing structure/behaviour is intact.
   Matches the studio site design (assets/ykymf.css).
   ============================================================ */

:root {
  --bg: #0a0b10;
  --panel: #13141d;
  --panel-strong: #171826;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.09);
  --ink: #edeef4;
  --muted: #b7bacb;
  --accent: #c6ff3d;
  --accent-2: #9ce015;
  --accent-ink: #0a0b10;
  --accent-soft: rgba(198, 255, 61, 0.14);
  --danger: #ff5a7a;
  --danger-soft: rgba(255, 90, 122, 0.14);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ---- Canvas + type ---- */
html {
  background:
    radial-gradient(60% 50% at 82% -6%, var(--accent-soft), transparent 60%),
    radial-gradient(46% 40% at 6% 8%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(180deg, #0e0f16 0%, #0a0b10 45%) !important;
  background-attachment: fixed;
}
body {
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  color: var(--ink) !important;
}
h1, h2, h3, .card h2, .ticket-settings-heading {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  color: #fff !important;
  letter-spacing: -0.01em;
}
.eyebrow, label, .pill, .ticket-table thead th, .settings-table th, .small-note, .brand-tag {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
.eyebrow { color: var(--accent) !important; }
a { color: var(--accent); }

/* ---- Surfaces ---- */
.hero {
  background: linear-gradient(180deg, var(--panel), var(--panel-strong)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.hero::after { background: var(--accent-soft) !important; filter: none !important; }
.hero p, .card p.sub, .ticket-subject p, .ticket-dates, .small-note,
.message-body, .account-copy span, .support-card p, .login-contact-row dt {
  color: var(--muted) !important;
}

.card, .support-card, .login-contact-panel, .account-bar,
.ticket-table-wrap, .settings-table-wrap, .supported-apps li,
.turnstile-wrap, .inline-alert {
  background: linear-gradient(180deg, var(--panel), var(--panel-strong)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(8px);
}
.supported-apps li { box-shadow: none !important; }

/* ---- Flash / alert states ---- */
.flash {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.flash.ok, .inline-alert {
  background: var(--accent-soft) !important;
  border-color: rgba(198, 255, 61, 0.3) !important;
  color: var(--ink) !important;
}
.flash.err, .config-warning {
  background: var(--danger-soft) !important;
  border-color: rgba(255, 90, 122, 0.32) !important;
  color: var(--ink) !important;
}
.error-list { color: var(--danger) !important; }

/* ---- Form controls ---- */
form input[type="text"], form input[type="email"], form select, form textarea, input, select, textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
form input:focus, form select:focus, form textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
::placeholder { color: var(--muted) !important; opacity: 1; }
option { background: var(--panel-strong); color: var(--ink); }

/* ---- Buttons ---- */
.btn { box-shadow: none !important; }
.btn-blue { background: var(--accent) !important; color: var(--accent-ink) !important; }
.btn-blue:hover { background: var(--accent-2) !important; }
.btn-gray {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.btn-gray:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-green { background: #43e08a !important; color: #052e1a !important; }
.btn-amber { background: #ffc23a !important; color: #241704 !important; }
.btn-red {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255, 90, 122, 0.4) !important;
}
.btn-red:hover { background: rgba(255, 90, 122, 0.12) !important; }
.avatar-accent { background: #2a2c3a !important; color: var(--accent) !important; }

/* ---- Tables ---- */
.ticket-table thead th, .settings-table th {
  color: var(--muted) !important;
  border-color: var(--line) !important;
  background: transparent !important;
}
.ticket-table tbody td, .settings-table td { border-color: var(--line) !important; color: var(--ink); }
.ticket-subject strong, .message-head strong, .account-copy strong { color: #fff !important; }

/* ---- Pills / badges (semantic, dark-friendly) ---- */
.pill { background: rgba(255, 255, 255, 0.05) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.pill.status-open { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.pill.status-resolved, .pill.kind-suggestion { background: rgba(67, 224, 138, 0.14) !important; color: #43e08a !important; border-color: rgba(67, 224, 138, 0.4) !important; }
.pill.status-closed, .pill.status-cancelled { background: rgba(255, 255, 255, 0.05) !important; color: var(--muted) !important; }
.pill.kind-bug { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: rgba(255, 90, 122, 0.4) !important; }
.pill.kind-assistance { background: rgba(91, 200, 255, 0.14) !important; color: #5bc8ff !important; border-color: rgba(91, 200, 255, 0.4) !important; }

/* ---- Conversation messages ---- */
.message { border: 1px solid var(--line) !important; background: rgba(255, 255, 255, 0.02) !important; }
.message.user { background: var(--accent-soft) !important; border-color: rgba(198, 255, 61, 0.28) !important; }
.message.admin { background: rgba(91, 200, 255, 0.10) !important; border-color: rgba(91, 200, 255, 0.28) !important; }
.message.system, .message.message-event { background: rgba(255, 255, 255, 0.03) !important; }

/* ---- Links ---- */
.login-contact-row a, .login-contact-row dd a, .card a, .hero a { color: var(--accent) !important; }
.login-contact-divider { border-color: var(--line) !important; }

/* ============================================================
   Tailwind utility overrides — the nav + user dropdown.
   !important beats Tailwind's runtime-injected utilities
   regardless of load order.
   ============================================================ */
#tickets-top-nav, .top-nav-shell {
  background: rgba(10, 11, 16, 0.85) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}
#tickets-top-nav .bg-gray-900, .bg-gray-900 { background: rgba(255, 255, 255, 0.06) !important; }
.bg-white { background: var(--panel-strong) !important; }
.text-gray-900, .text-gray-700, .text-gray-500 { color: var(--ink) !important; }
.text-gray-400, .text-gray-300, .text-gray-200 { color: var(--muted) !important; }
.bg-gray-100, .hover\:bg-gray-100:hover { background: rgba(255, 255, 255, 0.06) !important; }
.border-gray-100, .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }
.ring-black\/10 { --tw-ring-color: var(--line) !important; }
.ring-indigo-500, .focus\:ring-indigo-500:focus { --tw-ring-color: var(--accent) !important; }
.ring-offset-gray-800 { --tw-ring-offset-color: #0a0b10 !important; }
.border-white\/10 { border-color: var(--line) !important; }

/* Admin badge — keep a gold tone, tuned for dark */
.bg-amber-500\/10 { background: rgba(255, 194, 58, 0.12) !important; }
.bg-amber-100 { background: rgba(255, 194, 58, 0.14) !important; }
.text-amber-200 { color: #ffc23a !important; }
.text-amber-800 { color: #ffd88a !important; }
.border-amber-400\/40 { border-color: rgba(255, 194, 58, 0.4) !important; }