/* ===================================================================
   PulseTix — Design System CSS
   Mantenido por: ui-ux-design agent
   Referencia: docs/design/system.md, design-system/tickets/MASTER.md
   Paleta: Dark + Coral (#ff5a5f) — DEC-021
   Estilo: Dark Mode / Minimal / PulseTix
   Tipografía: Plus Jakarta Sans
   =================================================================== */

/* -------------------------------------------------------------------
   GOOGLE FONTS — Plus Jakarta Sans
   ------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ------------------------------------------------------------------- */

:root {
  /* ── Surfaces — DARK ─────────────────────────────────────── */
  --tk-bg-base:        #050816;   /* page background — almost black with navy hint */
  --tk-bg-base-2:      #0a0a14;   /* alt section bg */
  --tk-bg-card:        #13121a;   /* cards, sidebar, panels */
  --tk-bg-card-hover:  #1f1c2e;   /* hover */
  --tk-bg-elevated:    #1a1825;   /* modals, dropdowns */
  --tk-bg-input:       #0e0d18;   /* form inputs */

  /* ── Borders — barely visible ────────────────────────────── */
  --tk-border:         rgba(255, 255, 255, 0.06);
  --tk-border-soft:    rgba(255, 255, 255, 0.04);
  --tk-border-focus:   #ff5a5f;
  --tk-border-strong:  rgba(255, 255, 255, 0.10);

  /* ── Brand — Coral ───────────────────────────────────────── */
  --tk-brand-50:   #fff5f5;
  --tk-brand-100:  #ffe4e4;
  --tk-brand-300:  #ffa8aa;
  --tk-brand-400:  #ff8a8e;
  --tk-brand-500:  #ff5a5f;   /* PRIMARY */
  --tk-brand-600:  #ff4757;   /* gradient end */
  --tk-brand-700:  #dc2626;   /* hover, active */
  --tk-brand-900:  #7f1d1d;
  --tk-brand-glow: rgba(255, 90, 95, 0.30);  /* shadow tint */

  /* Coral gradient for primary CTAs */
  --tk-grad-coral:       linear-gradient(135deg, #ff5a5f 0%, #ff4757 100%);
  --tk-grad-coral-hover: linear-gradient(135deg, #ff4757 0%, #dc2626 100%);

  /* ── Text — high contrast on dark ────────────────────────── */
  --tk-text-primary:    #FFFFFF;          /* H1, important — 21:1 on bg */
  --tk-text-secondary:  #cbd5e1;          /* slate-300 — body — 13.4:1 */
  --tk-text-muted:      #94a3b8;          /* slate-400 — meta — 7.4:1 */
  --tk-text-faint:      #64748b;          /* slate-500 — labels small */
  --tk-text-coral:      #ff5a5f;          /* coral text on dark — 5.2:1 AA */

  /* ── Semantic ────────────────────────────────────────────── */
  --tk-success:      #10b981;
  --tk-success-bg:   rgba(16, 185, 129, 0.12);
  --tk-success-dark: #34d399;
  --tk-danger:       #ef4444;
  --tk-danger-bg:    rgba(239, 68, 68, 0.12);
  --tk-danger-dark:  #f87171;
  --tk-warning:      #f59e0b;
  --tk-warning-bg:   rgba(245, 158, 11, 0.12);
  --tk-warning-dark: #fbbf24;

  /* ── Legacy aliases — many existing views use these ──────── */
  --tk-bg:               var(--tk-bg-base);
  --tk-surface-bg:       var(--tk-bg-base);
  --tk-surface-card:     var(--tk-bg-card);
  --tk-surface-0:        var(--tk-bg-card);
  --tk-surface-1:        var(--tk-bg-base-2);
  --tk-surface-2:        var(--tk-bg-card);
  --tk-surface-3:        var(--tk-bg-card-hover);
  --tk-surface-tag:      rgba(255, 90, 95, 0.12);
  --tk-surface-status:   rgba(16, 185, 129, 0.12);
  --tk-surface-brand:    rgba(255, 90, 95, 0.12);
  --tk-ink-900:          var(--tk-text-primary);
  --tk-ink-700:          var(--tk-text-secondary);
  --tk-ink-500:          var(--tk-text-muted);
  --tk-ink-400:          var(--tk-text-faint);
  --tk-text-inverse:     #0F172A;
  --tk-text-disabled:    var(--tk-text-faint);
  --tk-focus:            var(--tk-brand-500);

  /* ── Legacy gray scale (dark remapped) ───────────────────── */
  --tk-gray-50:  #1f1f29;
  --tk-gray-100: #2a2a36;
  --tk-gray-200: #3a3a48;
  --tk-gray-300: #4a4a58;
  --tk-gray-400: #6a6a78;
  --tk-gray-500: #94a3b8;
  --tk-gray-600: #cbd5e1;
  --tk-gray-700: #e2e8f0;
  --tk-gray-800: #f1f5f9;
  --tk-gray-900: #FFFFFF;

  /* ── Accent aliases (now coral) ──────────────────────────── */
  --tk-accent-400: var(--tk-brand-400);
  --tk-accent-500: var(--tk-brand-500);
  --tk-accent-600: var(--tk-brand-600);
  --tk-brand-800:  var(--tk-brand-700);

  /* ── Legacy semantic aliases ──────────────────────────────── */
  --tk-success-500: var(--tk-success);
  --tk-danger-500:  var(--tk-danger);
  --tk-warning-500: var(--tk-warning);

  /* ── Bootstrap override vars ──────────────────────────────── */
  --bs-primary:          var(--tk-brand-500);
  --bs-primary-rgb:      255, 90, 95;
  --bs-link-color:       var(--tk-brand-500);
  --bs-link-hover-color: var(--tk-brand-400);
  --bs-border-color:     var(--tk-border-strong);
  --bs-body-font-family: var(--tk-font-family);
  --bs-body-color:       var(--tk-text-secondary);
  --bs-body-bg:          var(--tk-bg-base);
  --bs-focus-ring-color: rgba(255, 90, 95, 0.25);

  /* ── Spacing ─────────────────────────────────────────────── */
  --tk-space-1:  0.25rem;
  --tk-space-2:  0.5rem;
  --tk-space-3:  0.75rem;
  --tk-space-4:  1rem;
  --tk-space-5:  1.25rem;
  --tk-space-6:  1.5rem;
  --tk-space-8:  2rem;
  --tk-space-10: 2.5rem;
  --tk-space-12: 3rem;
  --tk-space-16: 4rem;
  --tk-space-20: 5rem;
  --tk-space-24: 6rem;

  /* ── Border Radius ───────────────────────────────────────── */
  --tk-radius-sm:   6px;
  --tk-radius-md:   10px;
  --tk-radius-lg:   14px;
  --tk-radius-xl:   20px;
  --tk-radius-2xl:  28px;
  --tk-radius-pill: 9999px;
  --tk-radius-full: 9999px;

  /* ── Shadows (dark — glow on coral) ──────────────────────── */
  --tk-shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.4);
  --tk-shadow-sm:       0 2px 4px rgba(0, 0, 0, 0.5);
  --tk-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.6);
  --tk-shadow-lg:       0 10px 30px rgba(0, 0, 0, 0.7);
  --tk-shadow-xl:       0 20px 40px rgba(0, 0, 0, 0.8);
  --tk-shadow-coral:    0 4px 16px rgba(255, 90, 95, 0.30);
  --tk-shadow-coral-lg: 0 8px 24px rgba(255, 90, 95, 0.40);

  /* ── Transitions ─────────────────────────────────────────── */
  --tk-duration-fast:   150ms;
  --tk-duration-normal: 200ms;
  --tk-duration-slow:   300ms;
  --tk-ease-default:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Typography ──────────────────────────────────────────── */
  --tk-font-family: 'Plus Jakarta Sans', system-ui, -apple-system,
                    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tk-text-xs:    0.75rem;
  --tk-text-sm:    0.875rem;
  --tk-text-base:  1rem;
  --tk-text-lg:    1.125rem;
  --tk-text-xl:    1.25rem;
  --tk-text-2xl:   1.5rem;
  --tk-text-3xl:   1.875rem;
  --tk-text-4xl:   2.25rem;
  --tk-text-5xl:   3rem;
  --tk-text-6xl:   3.75rem;
  --tk-text-7xl:   4.5rem;

  --tk-font-normal:    400;
  --tk-font-medium:    500;
  --tk-font-semibold:  600;
  --tk-font-bold:      700;
  --tk-font-extrabold: 800;
  --tk-font-black:     900;

  --tk-leading-tight:   1.1;
  --tk-leading-snug:    1.25;
  --tk-leading-normal:  1.5;
  --tk-leading-relaxed: 1.625;
}

/* -------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--tk-font-family);
  font-size: var(--tk-text-base);
  font-weight: var(--tk-font-normal);
  line-height: var(--tk-leading-normal);
  color: var(--tk-text-secondary);
  background-color: var(--tk-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-optical-sizing: auto;
}

/* Headings — white on dark */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--tk-font-family);
  color: var(--tk-text-primary);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--tk-text-4xl); font-weight: var(--tk-font-extrabold);
           line-height: var(--tk-leading-tight); letter-spacing: -0.025em; }
h2, .h2 { font-size: var(--tk-text-3xl); font-weight: var(--tk-font-bold);
           line-height: var(--tk-leading-tight); letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--tk-text-2xl); font-weight: var(--tk-font-bold);
           line-height: var(--tk-leading-snug); }
h4, .h4 { font-size: var(--tk-text-xl);  font-weight: var(--tk-font-semibold); }
h5, .h5 { font-size: var(--tk-text-lg);  font-weight: var(--tk-font-semibold); }
h6, .h6 { font-size: var(--tk-text-base); font-weight: var(--tk-font-semibold); }

a {
  color: var(--tk-brand-500);
  text-decoration: none;
  transition: color var(--tk-duration-normal);
}
a:hover { color: var(--tk-brand-400); }

article p, .tk-prose p {
  max-width: 70ch;
  text-wrap: pretty;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------
   3. BOOTSTRAP OVERRIDES — dark theme + coral
   ------------------------------------------------------------------- */

/* Primary button — coral */
.btn-primary {
  --bs-btn-bg:                 var(--tk-brand-500);
  --bs-btn-border-color:       var(--tk-brand-500);
  --bs-btn-hover-bg:           var(--tk-brand-700);
  --bs-btn-hover-border-color: var(--tk-brand-700);
  --bs-btn-active-bg:          var(--tk-brand-900);
  --bs-btn-color:              #fff;
  --bs-btn-hover-color:        #fff;
}

.btn-outline-primary {
  --bs-btn-color:        var(--tk-brand-500);
  --bs-btn-border-color: var(--tk-brand-500);
  --bs-btn-hover-bg:     var(--tk-brand-500);
  --bs-btn-hover-color:  #fff;
}

/* Pagination */
.page-item.active .page-link {
  background: var(--tk-grad-coral);
  border-color: transparent;
  color: #fff;
}
.page-link {
  background-color: var(--tk-bg-card);
  border-color: var(--tk-border-strong);
  color: var(--tk-text-secondary);
}
.page-link:hover {
  background-color: var(--tk-bg-card-hover);
  border-color: var(--tk-brand-500);
  color: var(--tk-brand-500);
}

/* Global dark overrides — neutralize white Bootstrap components */
.bg-white, .bg-light {
  background-color: var(--tk-bg-card) !important;
  color: var(--tk-text-primary) !important;
}
.text-dark, .text-body { color: var(--tk-text-primary) !important; }
.text-muted             { color: var(--tk-text-muted) !important; }
.text-secondary         { color: var(--tk-text-secondary) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--tk-border-strong) !important;
}

/* Dropdown */
.dropdown-menu {
  background-color: var(--tk-bg-elevated);
  border: 1px solid var(--tk-border-strong);
}
.dropdown-item {
  color: var(--tk-text-secondary);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--tk-bg-card-hover);
  color: var(--tk-text-primary);
}
.dropdown-divider { border-color: var(--tk-border-strong); }

/* Modal */
.modal-content {
  background-color: var(--tk-bg-card);
  border: 1px solid var(--tk-border-strong);
}
.modal-header, .modal-footer {
  border-color: var(--tk-border-strong);
}

/* Alert — dark variants */
.alert {
  border: 1px solid var(--tk-border-strong);
  background-color: var(--tk-bg-card);
  color: var(--tk-text-secondary);
}
.alert-danger   { background-color: var(--tk-danger-bg);  border-color: rgba(239,68,68,0.25);   color: var(--tk-danger-dark); }
.alert-success  { background-color: var(--tk-success-bg); border-color: rgba(16,185,129,0.25);  color: var(--tk-success-dark); }
.alert-warning  { background-color: var(--tk-warning-bg); border-color: rgba(245,158,11,0.25);  color: var(--tk-warning-dark); }

/* Navbar Bootstrap base */
.navbar { background-color: var(--tk-bg-base) !important; }
.nav-link { color: var(--tk-text-secondary) !important; }
.nav-link:hover, .nav-link.active { color: var(--tk-text-primary) !important; }

/* Input group */
.input-group .btn {
  background-color: var(--tk-bg-card);
  border-color: var(--tk-border-strong);
  color: var(--tk-text-secondary);
}

/* Table */
.table { color: var(--tk-text-secondary); }
.table thead th {
  background-color: var(--tk-bg-card);
  color: var(--tk-text-muted);
  border-color: var(--tk-border-strong);
}
.table td, .table th { border-color: var(--tk-border); }
.table-hover tbody tr:hover td { background-color: var(--tk-bg-card-hover); }

/* Card Bootstrap */
.card {
  background-color: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
}
.card-header, .card-footer {
  background-color: var(--tk-bg-card-hover);
  border-color: var(--tk-border);
}

/* Offcanvas */
.offcanvas {
  background-color: var(--tk-bg-elevated);
  color: var(--tk-text-primary);
}
.offcanvas-header { border-bottom-color: var(--tk-border-strong); }
.btn-close { filter: invert(1) brightness(1.5); }

/* -------------------------------------------------------------------
   4. LOGO — PulseTix brand
   ------------------------------------------------------------------- */

.tk-logo-text    { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.tk-logo-primary { color: var(--tk-text-primary); }
.tk-logo-accent  { color: var(--tk-brand-500); }
/* Legacy aliases */
.tk-logo-muted   { color: var(--tk-brand-500); }

/* -------------------------------------------------------------------
   5. BUTTONS — full coral system
   ------------------------------------------------------------------- */

/* ── Base ──────────────────────────────────────────────────────── */
.tk-btn,
button.tk-btn,
a.tk-btn,
input.tk-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--tk-radius-lg);
  border: 1px solid transparent;
  font-family: var(--tk-font-family);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all var(--tk-duration-normal) var(--tk-ease-default);
}

.tk-btn:disabled,
.tk-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tk-btn:focus-visible {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
}

/* ── Primary — coral gradient ──────────────────────────────────── */
.tk-btn-primary,
button.tk-btn-primary,
a.tk-btn-primary,
input.tk-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tk-grad-coral) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: var(--tk-shadow-coral);
}
.tk-btn-primary:hover,
button.tk-btn-primary:hover,
a.tk-btn-primary:hover {
  background: var(--tk-grad-coral-hover) !important;
  color: #FFFFFF !important;
  box-shadow: var(--tk-shadow-coral-lg);
  transform: translateY(-1px);
}
.tk-btn-primary:active { transform: translateY(0); }
.tk-btn-primary:focus-visible {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
}
.tk-btn-primary:disabled,
.tk-btn-primary[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ── CTA — alias for primary (backward compat) ─────────────────── */
.tk-btn-cta,
button.tk-btn-cta,
a.tk-btn-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--tk-grad-coral) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  font-weight: var(--tk-font-bold);
  box-shadow: var(--tk-shadow-coral);
}
.tk-btn-cta:hover,
button.tk-btn-cta:hover,
a.tk-btn-cta:hover {
  background: var(--tk-grad-coral-hover) !important;
  color: #FFFFFF !important;
  box-shadow: var(--tk-shadow-coral-lg);
  transform: translateY(-1px);
}
.tk-btn-cta:active { transform: translateY(0); }

/* ── Secondary — dark filled, coral border on hover ────────────── */
.tk-btn-secondary,
button.tk-btn-secondary,
a.tk-btn-secondary,
input.tk-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--tk-bg-card) !important;
  border-color: var(--tk-border-strong) !important;
  color: var(--tk-text-primary) !important;
}
.tk-btn-secondary:hover,
button.tk-btn-secondary:hover,
a.tk-btn-secondary:hover {
  background-color: var(--tk-bg-card-hover) !important;
  border-color: var(--tk-brand-500) !important;
  color: var(--tk-brand-500) !important;
}
.tk-btn-secondary:focus-visible {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
}
.tk-btn-secondary:disabled,
.tk-btn-secondary[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ── Ghost — text only ──────────────────────────────────────────── */
.tk-btn-ghost,
button.tk-btn-ghost,
a.tk-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--tk-text-secondary) !important;
}
.tk-btn-ghost:hover,
button.tk-btn-ghost:hover,
a.tk-btn-ghost:hover {
  color: var(--tk-text-primary) !important;
  background: var(--tk-bg-card-hover) !important;
}
.tk-btn-ghost:focus-visible {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
}

/* ── Accent — alias for primary (backward compat) ──────────────── */
.btn-accent, .tk-btn-accent {
  background: var(--tk-grad-coral);
  border-color: transparent;
  color: #FFFFFF;
  font-weight: var(--tk-font-semibold);
  border-radius: var(--tk-radius-lg);
  cursor: pointer;
  transition: all var(--tk-duration-normal) var(--tk-ease-default);
}
.btn-accent:hover, .tk-btn-accent:hover {
  background: var(--tk-grad-coral-hover);
  color: #FFFFFF;
  box-shadow: var(--tk-shadow-coral);
}

/* ── Danger ─────────────────────────────────────────────────────── */
.tk-btn-danger,
button.tk-btn-danger,
a.tk-btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--tk-danger) !important;
  border-color: var(--tk-danger) !important;
  color: #FFFFFF !important;
}
.tk-btn-danger:hover,
button.tk-btn-danger:hover,
a.tk-btn-danger:hover {
  background-color: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}
.tk-btn-danger:focus-visible {
  outline: 2px solid var(--tk-danger);
  outline-offset: 2px;
}
.tk-btn-danger:disabled,
.tk-btn-danger[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ── Danger outline ─────────────────────────────────────────────── */
.tk-btn-danger-outline,
button.tk-btn-danger-outline,
a.tk-btn-danger-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  border-color: var(--tk-danger) !important;
  color: var(--tk-danger-dark) !important;
}
.tk-btn-danger-outline:hover,
button.tk-btn-danger-outline:hover,
a.tk-btn-danger-outline:hover {
  background-color: var(--tk-danger-bg) !important;
}
.tk-btn-danger-outline:focus-visible {
  outline: 2px solid var(--tk-danger);
  outline-offset: 2px;
}

/* ── Sizes ──────────────────────────────────────────────────────── */
.tk-btn-sm {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: 10px;
}
.tk-btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  border-radius: 16px;
}
.tk-btn-xl {
  padding: 1rem 2rem;
  font-size: 1.0625rem;
  border-radius: var(--tk-radius-2xl);
}

/* ── Icon-only ──────────────────────────────────────────────────── */
.tk-btn-icon {
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--tk-radius-md);
  flex-shrink: 0;
}
.tk-btn-icon.tk-btn-sm {
  width: 2rem;
  height: 2rem;
}

/* ── Pill ──────────────────────────────────────────────────────── */
.tk-btn-pill { border-radius: var(--tk-radius-pill); }

/* Combinations — ghost icon in tables */
.tk-btn-ghost.tk-btn-icon {
  color: var(--tk-text-muted);
}
.tk-btn-ghost.tk-btn-icon:hover {
  background-color: var(--tk-bg-card-hover) !important;
  color: var(--tk-brand-500) !important;
}
.tk-btn-danger-outline.tk-btn-icon:hover {
  background-color: var(--tk-danger-bg) !important;
  color: var(--tk-danger-dark) !important;
}

/* -------------------------------------------------------------------
   6. ACCESSIBILITY — focus rings
   ------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--tk-brand-500) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--tk-brand-500) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.15) !important;
  outline: none !important;
}

/* -------------------------------------------------------------------
   7. NAVBAR (customer)
   ------------------------------------------------------------------- */

.tk-navbar {
  height: 64px;
  background: var(--tk-bg-base) !important;
  border-bottom: 1px solid var(--tk-border) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tk-navbar .navbar-brand {
  font-size: var(--tk-text-lg);
  font-weight: var(--tk-font-bold);
  color: var(--tk-text-primary);
  text-decoration: none;
  transition: opacity var(--tk-duration-fast);
}
.tk-navbar .navbar-brand:hover { opacity: 0.8; }

.tk-navbar .nav-link {
  color: var(--tk-text-muted) !important;
  font-size: var(--tk-text-sm);
  font-weight: var(--tk-font-medium);
  padding: var(--tk-space-2) var(--tk-space-3);
  border-radius: var(--tk-radius-md);
  transition: color var(--tk-duration-fast), background-color var(--tk-duration-fast);
}
.tk-navbar .nav-link:hover {
  color: var(--tk-text-primary) !important;
  background-color: var(--tk-bg-card-hover);
}
.tk-navbar .nav-link.active {
  color: var(--tk-text-primary) !important;
  font-weight: var(--tk-font-semibold);
}

/* Search form in navbar */
.tk-search-form .form-control {
  background: var(--tk-bg-input);
  border-color: var(--tk-border-strong);
  color: var(--tk-text-primary);
  border-radius: var(--tk-radius-pill) 0 0 var(--tk-radius-pill);
  font-size: var(--tk-text-sm);
}
.tk-search-form .btn {
  border-radius: 0 var(--tk-radius-pill) var(--tk-radius-pill) 0;
  background: var(--tk-bg-card);
  border-color: var(--tk-border-strong);
  color: var(--tk-text-secondary);
}

/* Cart badge */
.tk-cart-badge {
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  background: var(--tk-brand-500);
}

/* Mobile nav offcanvas */
.tk-mobile-nav {
  background-color: var(--tk-bg-elevated) !important;
}

/* -------------------------------------------------------------------
   8. HERO — PulseTix dark style
   ------------------------------------------------------------------- */

.tk-hero {
  position: relative;
  padding: 6rem 1rem 4rem;
  text-align: center;
  background: var(--tk-bg-base);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 90, 95, 0.10) 0%, transparent 60%);
}

.tk-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background: rgba(255, 90, 95, 0.12);
  border: 1px solid rgba(255, 90, 95, 0.30);
  border-radius: var(--tk-radius-pill);
  color: var(--tk-brand-500);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.tk-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: var(--tk-leading-tight);
  letter-spacing: -0.03em;
  color: var(--tk-text-primary);
  margin: 0 auto 1.25rem;
  max-width: 14ch;
  text-wrap: balance;
}

.tk-hero__title-accent {
  background: var(--tk-grad-coral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Legacy hero subtitle (from old design — remap to lead style) */
.tk-hero__subtitle {
  font-size: 1.0625rem;
  color: var(--tk-text-secondary);
  max-width: 38rem;
  margin: 0 auto 2rem;
  line-height: 1.5;
  opacity: 1;
}

.tk-hero__lead {
  font-size: 1.0625rem;
  color: var(--tk-text-secondary);
  max-width: 38rem;
  margin: 0 auto 2rem;
  line-height: 1.5;
}

.tk-hero__ctas {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.tk-hero__cats {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tk-hero .container {
  position: relative;
  z-index: 1;
}

/* Stats hero */
.tk-stats-hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tk-space-6);
  margin-top: var(--tk-space-12);
  padding-top: var(--tk-space-8);
  border-top: 1px solid var(--tk-border-strong);
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 576px) {
  .tk-stats-hero { grid-template-columns: repeat(4, 1fr); }
}

.tk-stats-hero__number,
.tk-stats-hero__num {
  font-size: var(--tk-text-4xl);
  font-weight: var(--tk-font-extrabold);
  color: var(--tk-text-primary);
  line-height: 1;
  display: block;
  letter-spacing: -0.02em;
}
.tk-stats-hero__label {
  font-size: var(--tk-text-sm);
  color: var(--tk-text-muted);
  display: block;
  margin-top: var(--tk-space-1);
}

/* -------------------------------------------------------------------
   9. SEARCH PILL — dark style
   ------------------------------------------------------------------- */

.tk-search-pill {
  display: flex;
  align-items: center;
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-pill);
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  max-width: 32rem;
  margin: 0 auto;
  transition: border-color var(--tk-duration-normal);
}
.tk-search-pill:focus-within {
  border-color: var(--tk-brand-500);
}

.tk-search-pill__input,
input.tk-search-pill__input {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  color: var(--tk-text-primary) !important;
  outline: none !important;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  box-shadow: none !important;
}
.tk-search-pill__input::placeholder { color: var(--tk-text-muted); }

.tk-search-pill__input--location {
  flex: 0 1 180px;
  padding-left: var(--tk-space-4);
}

.tk-search-pill__divider {
  width: 1px;
  height: 24px;
  background: var(--tk-border-strong);
  flex-shrink: 0;
  margin: 0 var(--tk-space-3);
}

.tk-search-pill__btn {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--tk-grad-coral);
  border-radius: 50%;
  border: 0;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--tk-duration-fast), box-shadow var(--tk-duration-fast);
}
.tk-search-pill__btn:hover {
  transform: scale(1.05);
  box-shadow: var(--tk-shadow-coral);
}
.tk-search-pill__btn:focus-visible {
  outline: 2px solid var(--tk-brand-400);
  outline-offset: 2px;
}

/* Mobile — stack */
@media (max-width: 575.98px) {
  .tk-search-pill {
    flex-direction: column;
    border-radius: var(--tk-radius-xl);
    padding: var(--tk-space-3);
    gap: var(--tk-space-2);
    align-items: stretch;
  }
  .tk-search-pill__input,
  .tk-search-pill__input--location {
    flex: 1 1 auto;
    border-radius: var(--tk-radius-md);
    border: 1px solid var(--tk-border-strong) !important;
    padding: 10px 12px;
    background: var(--tk-bg-input) !important;
  }
  .tk-search-pill__divider { display: none; }
  .tk-search-pill__btn {
    width: 100%;
    height: 44px;
    border-radius: var(--tk-radius-lg);
  }
}

/* -------------------------------------------------------------------
   10. CARDS — dark mode
   ------------------------------------------------------------------- */

.tk-card {
  background-color: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
  transition: border-color var(--tk-duration-normal), transform var(--tk-duration-normal);
}
.tk-card:hover {
  border-color: var(--tk-border-strong);
}

/* -------------------------------------------------------------------
   11. EVENT CARD — dark + coral
   ------------------------------------------------------------------- */

.tk-event-card {
  background-color: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
  overflow: hidden;
  transition: transform var(--tk-duration-normal) var(--tk-ease-default),
              border-color var(--tk-duration-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}
.tk-event-card:hover {
  transform: translateY(-4px);
  border-color: var(--tk-brand-500);
}
.tk-event-card:focus-within {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
}

/* Link wrapper */
.tk-event-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.tk-event-card__link:focus-visible {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
  border-radius: var(--tk-radius-xl);
}

.tk-event-card__img-wrap {
  position: relative;
  flex-shrink: 0;
}

.tk-event-card__image,
.tk-event-card__img {
  aspect-ratio: 16 / 11;
  background: var(--tk-bg-card-hover);
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Placeholder gradient — coral */
.tk-event-card__image-placeholder {
  aspect-ratio: 16 / 11;
  background: linear-gradient(135deg, var(--tk-bg-card-hover) 0%, var(--tk-bg-elevated) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tk-text-faint);
}

/* Badge: top-left coral pill */
.tk-event-card__badge,
.tk-event-card__multi-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--tk-grad-coral);
  color: #FFFFFF;
  padding: 0.25rem 0.75rem;
  border-radius: var(--tk-radius-pill);
  font-size: var(--tk-text-xs);
  font-weight: 700;
  z-index: 1;
}

.tk-event-card__body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-1);
}

.tk-event-card__cat {
  color: var(--tk-brand-500);
  font-size: var(--tk-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.tk-event-card__title {
  font-size: var(--tk-text-lg);
  font-weight: 700;
  color: var(--tk-text-primary);
  margin: 0 0 var(--tk-space-2);
  line-height: var(--tk-leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tk-event-card__meta {
  font-size: var(--tk-text-sm);
  color: var(--tk-text-muted);
  display: flex;
  align-items: center;
  gap: var(--tk-space-1);
  margin: 0;
  line-height: 1.4;
}

/* Footer with price */
.tk-event-card__footer {
  margin-top: auto;
  padding-top: var(--tk-space-3);
  border-top: 1px solid var(--tk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.25rem;
}

.tk-event-card__price {
  font-size: var(--tk-text-lg);
  font-weight: 700;
  color: var(--tk-text-primary);
}
.tk-event-card__price small {
  color: var(--tk-text-muted);
  font-weight: 400;
  font-size: var(--tk-text-xs);
}

.tk-event-card__arrow {
  color: var(--tk-brand-500);
  opacity: 0;
  transition: opacity var(--tk-duration-fast), transform var(--tk-duration-fast);
}
.tk-event-card:hover .tk-event-card__arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* -------------------------------------------------------------------
   12. PILLS — PulseTix filter pills
   ------------------------------------------------------------------- */

.tk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--tk-radius-pill);
  font-size: var(--tk-text-sm);
  font-weight: 600;
  background: var(--tk-bg-card);
  color: var(--tk-text-secondary);
  border: 1px solid var(--tk-border-strong);
  cursor: pointer;
  transition: all var(--tk-duration-normal);
  text-decoration: none;
}
.tk-pill:hover {
  color: var(--tk-text-primary);
  border-color: var(--tk-brand-500);
  background: var(--tk-bg-card-hover);
}
.tk-pill.is-active {
  background: var(--tk-grad-coral);
  border-color: transparent;
  color: #FFFFFF;
}
.tk-pill i, .tk-pill .ph {
  color: var(--tk-brand-500);
}
.tk-pill.is-active i,
.tk-pill.is-active .ph {
  color: #FFFFFF;
}

/* Category filter (legacy class — remap to tk-pill style) */
.tk-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
  padding-bottom: var(--tk-space-4);
}
.tk-category-filter__item {
  padding: 0.4375rem 0.875rem;
  border-radius: var(--tk-radius-pill);
  font-size: var(--tk-text-sm);
  font-weight: 600;
  text-decoration: none;
  background: var(--tk-bg-card);
  color: var(--tk-text-secondary);
  border: 1px solid var(--tk-border-strong);
  cursor: pointer;
  transition: all var(--tk-duration-normal);
}
.tk-category-filter__item:hover {
  background: var(--tk-bg-card-hover);
  color: var(--tk-text-primary);
  border-color: var(--tk-brand-500);
}
.tk-category-filter__item.is-active {
  background: var(--tk-grad-coral);
  color: #FFFFFF;
  border-color: transparent;
}

/* Status pills */
.tk-pill-status,
.tk-pill-status-onsale,
.tk-pill-status-soldout {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--tk-radius-pill);
  font-size: var(--tk-text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.tk-pill-status--onsale,
.tk-pill-status-onsale {
  background: var(--tk-success-bg);
  color: #34d399;
}
.tk-pill-status--soldout,
.tk-pill-status-soldout {
  background: var(--tk-danger-bg);
  color: #f87171;
}
.tk-pill-status--badge {
  background: var(--tk-grad-coral);
  color: #FFFFFF;
}

/* Badge system (legacy) */
.tk-badge {
  font-size: var(--tk-text-xs);
  font-weight: var(--tk-font-semibold);
  padding: 3px 8px;
  border-radius: var(--tk-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tk-badge-category,
.tk-pill-category {
  background: rgba(255, 90, 95, 0.12);
  color: var(--tk-brand-400);
  font-size: var(--tk-text-xs);
  font-weight: var(--tk-font-semibold);
  padding: 4px 10px;
  border-radius: var(--tk-radius-pill);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Event status badges */
.tk-badge-published  { background: var(--tk-success-bg);  color: var(--tk-success-dark); }
.tk-badge-draft      { background: var(--tk-bg-card);      color: var(--tk-text-muted); }
.tk-badge-cancelled  { background: var(--tk-danger-bg);    color: var(--tk-danger-dark); }
.tk-badge-finished   { background: var(--tk-bg-card);      color: var(--tk-text-muted); }
.tk-badge-soldout    { background: var(--tk-danger-bg);    color: var(--tk-danger-dark); }
.tk-badge-scheduled  { background: rgba(255,90,95,0.12);   color: var(--tk-brand-400); }
.tk-badge-onsale     { background: var(--tk-success-bg);   color: var(--tk-success-dark); }

/* Ticket status badges */
.tk-badge-ticket-issued    { background: rgba(255,90,95,0.12);   color: var(--tk-brand-400); }
.tk-badge-ticket-valid     { background: var(--tk-success-bg);   color: var(--tk-success-dark); }
.tk-badge-ticket-used      { background: var(--tk-bg-card);      color: var(--tk-text-muted); }
.tk-badge-ticket-refunded  { background: var(--tk-warning-bg);   color: var(--tk-warning-dark); }
.tk-badge-ticket-cancelled { background: var(--tk-danger-bg);    color: var(--tk-danger-dark); }
.tk-badge-ticket-expired   { background: var(--tk-bg-card);      color: var(--tk-text-faint); }

/* -------------------------------------------------------------------
   13. SECTION HEADERS
   ------------------------------------------------------------------- */

.tk-section-title {
  font-size: var(--tk-text-2xl);
  font-weight: var(--tk-font-bold);
  color: var(--tk-text-primary);
  display: flex;
  align-items: center;
  gap: var(--tk-space-2);
  margin: 0;
}
.tk-section-title__link {
  font-size: var(--tk-text-base);
  color: var(--tk-brand-500);
  text-decoration: none;
  font-weight: var(--tk-font-medium);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--tk-duration-fast);
}
.tk-section-title__link:hover { color: var(--tk-brand-400); }

.tk-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tk-space-4);
}

/* -------------------------------------------------------------------
   14. FORMS — dark inputs
   ------------------------------------------------------------------- */

.form-label, label {
  color: var(--tk-text-secondary);
  font-weight: 500;
  font-size: var(--tk-text-sm);
  margin-bottom: var(--tk-space-1);
}

.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select {
  background-color: var(--tk-bg-input) !important;
  border: 1px solid var(--tk-border-strong) !important;
  color: var(--tk-text-primary) !important;
  border-radius: var(--tk-radius-md) !important;
  padding: 0.625rem 0.875rem !important;
  font-family: var(--tk-font-family);
  transition: border-color var(--tk-duration-fast);
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--tk-text-muted);
}
.form-text {
  color: var(--tk-text-muted);
  font-size: var(--tk-text-xs);
}
.invalid-feedback { font-size: var(--tk-text-xs); }

/* Tabular numbers in data cells */
[data-numeric], .font-tabular {
  font-variant-numeric: tabular-nums;
}

/* Bootstrap select arrow — replace default dark SVG with a light-gray one
   so it's visible on the dark background used throughout the app. */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a8b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Ensure option elements in dark selects are readable across browsers */
.form-select option,
select option {
  background-color: var(--tk-bg-elevated);
  color: var(--tk-text-primary);
}

/* -------------------------------------------------------------------
   15. TOGGLE — iOS-style (admin settings)
   ------------------------------------------------------------------- */

.tk-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.tk-toggle input { opacity: 0; width: 0; height: 0; }
.tk-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--tk-gray-200);
  border-radius: 9999px;
  transition: background-color 0.3s;
}
.tk-toggle__slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: var(--tk-shadow-sm);
}
.tk-toggle input:checked + .tk-toggle__slider {
  background: var(--tk-grad-coral);
}
.tk-toggle input:checked + .tk-toggle__slider::before {
  transform: translateX(20px);
}
.tk-toggle input:focus-visible + .tk-toggle__slider {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   16. ADMIN SIDEBAR — PulseTix dark
   ------------------------------------------------------------------- */

.tk-admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--tk-bg-card);
  border-right: 1px solid var(--tk-border);
  color: var(--tk-text-primary);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width var(--tk-duration-slow) var(--tk-ease-default);
}
.tk-admin-sidebar.collapsed { width: 64px; }

.tk-admin-sidebar__brand {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--tk-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--tk-text-primary);
}
.tk-admin-sidebar__brand:hover { color: var(--tk-brand-400); }

.tk-admin-sidebar__nav {
  flex: 1;
  padding: 1rem 0.5rem;
}

.tk-admin-sidebar__section-label {
  font-size: var(--tk-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tk-text-faint);
  padding: 0.75rem 0.75rem 0.5rem;
}

.tk-admin-sidebar__nav .nav-link,
.tk-admin-sidebar__nav-link {
  color: var(--tk-text-secondary) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: var(--tk-text-sm);
  font-weight: var(--tk-font-medium);
  transition: all var(--tk-duration-fast);
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
.tk-admin-sidebar__nav .nav-link:hover,
.tk-admin-sidebar__nav-link:hover {
  background: var(--tk-bg-card-hover);
  color: var(--tk-text-primary) !important;
}
.tk-admin-sidebar__nav .nav-link.active,
.tk-admin-sidebar__nav-link.active {
  background: var(--tk-bg-card-hover) !important;
  color: var(--tk-text-primary) !important;
  border-left: 3px solid var(--tk-brand-500) !important;
  padding-left: calc(0.75rem - 3px) !important; /* compensate border to keep text aligned */
}
.tk-admin-sidebar__nav .nav-link.active i,
.tk-admin-sidebar__nav .nav-link.active ph-icon,
.tk-admin-sidebar__nav-link.active i,
.tk-admin-sidebar__nav-link.active ph-icon {
  color: var(--tk-brand-500);
}
.tk-admin-sidebar__nav .nav-link:focus-visible,
.tk-admin-sidebar__nav-link:focus-visible {
  outline: 2px solid var(--tk-brand-400);
  outline-offset: -2px;
}

/* Topbar */
.tk-admin-topbar {
  background: var(--tk-bg-card);
  border-bottom: 1px solid var(--tk-border);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Content area */
.tk-admin-content {
  background: var(--tk-bg-base);
  padding: 1.5rem;
  flex: 1;
}

/* -------------------------------------------------------------------
   17. KPI CARDS (Dashboard)
   ------------------------------------------------------------------- */

.tk-kpi-card {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
  padding: 1.25rem;
}
.tk-kpi-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.tk-kpi-card__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: rgba(255, 90, 95, 0.12);
  color: var(--tk-brand-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tk-kpi-card__delta {
  background: rgba(255, 90, 95, 0.12);
  color: var(--tk-brand-500);
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: var(--tk-text-xs);
  font-weight: 700;
}
.tk-kpi-card__label {
  color: var(--tk-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--tk-text-xs);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.tk-kpi-card__value {
  color: var(--tk-text-primary);
  font-size: var(--tk-text-3xl);
  font-weight: 800;
  line-height: 1;
}

/* -------------------------------------------------------------------
   18. ADMIN TABLE
   ------------------------------------------------------------------- */

.tk-admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tk-admin-table thead th,
.tk-admin-table th {
  background: var(--tk-bg-card);
  color: var(--tk-text-muted);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: var(--tk-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom: 1px solid var(--tk-border-strong);
  white-space: nowrap;
}
.tk-admin-table td {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--tk-border);
  color: var(--tk-text-secondary);
  font-size: var(--tk-text-sm);
  vertical-align: middle;
}
.tk-admin-table tr:hover td {
  background: var(--tk-bg-card-hover);
}
.tk-admin-table tbody tr:focus-within {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: -2px;
}

/* -------------------------------------------------------------------
   19. CHECKOUT SIDEBAR — dark
   ------------------------------------------------------------------- */

.tk-checkout-sidebar {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-xl);
  padding: var(--tk-space-6);
}
.tk-checkout-sidebar__title {
  font-size: var(--tk-text-sm);
  font-weight: var(--tk-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tk-text-muted);
  margin-bottom: var(--tk-space-4);
}
.tk-checkout-sidebar__event {
  display: flex;
  align-items: flex-start;
  gap: var(--tk-space-3);
  margin-bottom: var(--tk-space-4);
}
.tk-checkout-sidebar__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--tk-radius-md);
  flex-shrink: 0;
  background: var(--tk-bg-card-hover);
}
.tk-checkout-sidebar__divider {
  border: none;
  border-top: 1px solid var(--tk-border-strong);
  margin: var(--tk-space-4) 0;
}
.tk-checkout-sidebar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--tk-text-sm);
  color: var(--tk-text-muted);
  margin-bottom: var(--tk-space-2);
}
.tk-checkout-sidebar__total {
  font-size: var(--tk-text-lg);
  font-weight: var(--tk-font-bold);
  color: var(--tk-text-primary);
  margin-top: var(--tk-space-2);
}

/* Step badge */
.tk-step-badge {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tk-grad-coral);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--tk-font-semibold);
  font-size: var(--tk-text-sm);
  flex-shrink: 0;
}

/* Payment method boxes */
.tk-payment-method {
  border: 2px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-lg);
  padding: var(--tk-space-4);
  cursor: pointer;
  transition: border-color var(--tk-duration-fast), background-color var(--tk-duration-fast);
  display: flex;
  align-items: center;
  gap: var(--tk-space-3);
  margin-bottom: var(--tk-space-3);
  background: var(--tk-bg-input);
}
.tk-payment-method:hover {
  border-color: var(--tk-brand-500);
  background: var(--tk-bg-card-hover);
}
.tk-payment-method.is-active {
  border-color: var(--tk-brand-500);
  background: var(--tk-bg-card-hover);
}
.tk-payment-method input[type="radio"] {
  accent-color: var(--tk-brand-500);
}

/* Checkout nav */
.tk-checkout-nav {
  display: flex;
  gap: var(--tk-space-3);
  margin-top: var(--tk-space-6);
  padding-top: var(--tk-space-4);
  border-top: 1px solid var(--tk-border);
}
.tk-checkout-nav .tk-btn-secondary { flex: 0 0 auto; min-width: 100px; }
.tk-checkout-nav .tk-btn-primary   { flex: 1 1 auto; }

/* Checkout section */
.tk-checkout-section {
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-lg);
  padding: var(--tk-space-6);
  margin-bottom: var(--tk-space-4);
  background: var(--tk-bg-card);
}

/* -------------------------------------------------------------------
   20. MINI CALENDAR — dark
   ------------------------------------------------------------------- */

.tk-calendar {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
  padding: var(--tk-space-4);
  max-width: 320px;
}
.tk-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tk-space-4);
}
.tk-calendar__month {
  font-weight: var(--tk-font-semibold);
  font-size: var(--tk-text-base);
  color: var(--tk-text-primary);
}
.tk-calendar__nav-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--tk-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color var(--tk-duration-fast);
}
.tk-calendar__nav-btn:hover {
  background: var(--tk-bg-card-hover);
  color: var(--tk-brand-500);
}
.tk-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.tk-calendar__col-header {
  font-size: 11px;
  font-weight: var(--tk-font-semibold);
  text-align: center;
  color: var(--tk-text-muted);
  padding: var(--tk-space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tk-calendar__day {
  width: 100%; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: var(--tk-text-sm);
  color: var(--tk-text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background-color var(--tk-duration-fast), color var(--tk-duration-fast);
  margin: 0 auto;
}
.tk-calendar__day:hover:not(:disabled):not(.is-selected) {
  background: var(--tk-bg-card-hover);
  color: var(--tk-brand-500);
}
.tk-calendar__day.is-today:not(.is-selected) {
  border: 2px solid var(--tk-brand-500);
  color: var(--tk-brand-500);
  font-weight: var(--tk-font-semibold);
}
.tk-calendar__day.is-selected {
  background: var(--tk-grad-coral);
  color: #ffffff;
  font-weight: var(--tk-font-semibold);
}
.tk-calendar__day:disabled,
.tk-calendar__day.is-disabled {
  color: var(--tk-text-faint);
  cursor: not-allowed;
  pointer-events: none;
}
.tk-calendar__day.has-event::after {
  content: '';
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--tk-brand-500);
  margin: 0 auto;
  margin-top: 1px;
}
.tk-calendar__day.is-selected.has-event::after {
  background: rgba(255,255,255,0.7);
}

/* Time-slot cards */
.tk-timeslot-card {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-lg);
  padding: var(--tk-space-4);
  cursor: pointer;
  transition: border-color var(--tk-duration-fast), background-color var(--tk-duration-fast);
  user-select: none;
}
.tk-timeslot-card:hover {
  border-color: var(--tk-brand-500);
  background: var(--tk-bg-card-hover);
}
.tk-timeslot-card.is-selected {
  border: 2px solid var(--tk-brand-500);
  background: var(--tk-bg-card-hover);
}
.tk-timeslot-card.is-soldout { opacity: 0.6; cursor: not-allowed; }
.tk-timeslot-card__time {
  font-size: var(--tk-text-lg);
  font-weight: var(--tk-font-semibold);
  color: var(--tk-text-primary);
}
.tk-timeslot-card__price {
  font-size: var(--tk-text-sm);
  color: var(--tk-text-muted);
  margin-top: var(--tk-space-1);
}

/* -------------------------------------------------------------------
   21. SEAT MAP
   ------------------------------------------------------------------- */

.tk-seat-circle {
  width: 20px; height: 20px;
  border-radius: 50%;
  background-color: var(--tk-gray-200);
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--tk-duration-fast) var(--tk-ease-default),
              background-color var(--tk-duration-fast),
              box-shadow var(--tk-duration-fast);
  position: relative;
  font-size: 0;
}
.tk-seat-circle:hover:not(:disabled):not(.is-sold):not(.is-held):not(.is-disabled) {
  transform: scale(1.35);
  background-color: var(--tk-brand-400);
  z-index: 1;
}
.tk-seat-circle:focus-visible {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
  z-index: 2;
}
.tk-seat-circle.is-labeled {
  background-color: var(--tk-bg-card);
  border: 1px solid var(--tk-border-strong);
  font-size: 8px;
  color: var(--tk-text-muted);
  font-weight: var(--tk-font-semibold);
}

@keyframes seatPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.80); }
  70%  { transform: scale(1.20); }
  100% { transform: scale(1); }
}

.tk-seat-circle.is-selected {
  background: var(--tk-grad-coral) !important;
  border: none;
  animation: seatPop 200ms var(--tk-ease-default);
}
.tk-seat-circle.is-selected::after {
  content: '';
  position: absolute;
  width: 6px; height: 4px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.tk-seat-circle.is-held,
.tk-seat-circle.is-sold {
  background-color: var(--tk-gray-300) !important;
  cursor: not-allowed;
  border: none;
}
.tk-seat-circle.is-disabled {
  background-color: var(--tk-gray-200) !important;
  cursor: not-allowed;
  opacity: 0.4;
}

.tk-seatmap-filter {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10;
}
.tk-seatmap-filter-dropdown {
  border-color: var(--tk-border-strong);
  border-radius: var(--tk-radius-md);
  font-size: var(--tk-text-sm);
  background-color: var(--tk-bg-elevated);
  color: var(--tk-text-primary);
  min-width: 200px;
  box-shadow: var(--tk-shadow-md);
}
.tk-seatmap-zoom-controls {
  position: absolute; bottom: 0.75rem; left: 0.75rem;
  z-index: 10;
  display: flex; flex-direction: column; gap: 4px;
}
.tk-seatmap-zoom-controls button {
  width: 34px; height: 34px;
  border-radius: var(--tk-radius-md);
  border: 1px solid var(--tk-border-strong);
  background: var(--tk-bg-card);
  color: var(--tk-text-primary);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--tk-shadow-sm);
  cursor: pointer;
  transition: background-color var(--tk-duration-fast);
}
.tk-seatmap-zoom-controls button:hover {
  background-color: var(--tk-bg-card-hover);
  color: var(--tk-brand-500);
  border-color: var(--tk-brand-500);
}

/* -------------------------------------------------------------------
   22. HOLD TIMER
   ------------------------------------------------------------------- */

.tk-hold-timer {
  background: rgba(255, 90, 95, 0.08);
  border: 1px solid rgba(255, 90, 95, 0.20);
  border-radius: var(--tk-radius-md);
  padding: var(--tk-space-3) var(--tk-space-4);
  font-size: var(--tk-text-sm);
  font-weight: var(--tk-font-medium);
  color: var(--tk-brand-400);
  display: flex;
  align-items: center;
  gap: var(--tk-space-3);
}
.tk-hold-timer.warning {
  background: var(--tk-warning-bg);
  border-color: rgba(245, 158, 11, 0.30);
  color: var(--tk-warning-dark);
}
.tk-hold-timer__bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 90, 95, 0.20);
  border-radius: 2px;
  overflow: hidden;
}
.tk-hold-timer__bar-fill {
  height: 100%;
  background: var(--tk-grad-coral);
  border-radius: 2px;
  transition: width 1s linear;
}
.tk-hold-timer.warning .tk-hold-timer__bar-fill {
  background: var(--tk-warning);
}

/* -------------------------------------------------------------------
   23. TICKET QR CARD
   ------------------------------------------------------------------- */

.tk-ticket-card {
  background: var(--tk-bg-card);
  border: 2px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-xl);
  overflow: hidden;
  max-width: 360px;
  margin: 0 auto;
}
.tk-ticket-card__header {
  background: var(--tk-grad-coral);
  color: #FFFFFF;
  padding: var(--tk-space-4) var(--tk-space-6);
  text-align: center;
}
.tk-ticket-card__body {
  padding: var(--tk-space-6);
  text-align: center;
}
.tk-ticket-card__separator {
  border: none;
  border-top: 2px dashed var(--tk-border-strong);
  margin: var(--tk-space-4) 0;
}
.tk-ticket-card__qr {
  display: inline-block;
  padding: var(--tk-space-3);
  background: white;
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-md);
  margin-bottom: var(--tk-space-4);
}
.tk-ticket-card__number {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--tk-text-xs);
  color: var(--tk-text-muted);
  letter-spacing: 0.05em;
}
.tk-ticket-card--used .tk-ticket-card__header {
  background: var(--tk-bg-elevated);
}
.tk-ticket-card--used .tk-ticket-card__qr { opacity: 0.4; }

/* -------------------------------------------------------------------
   24. SKELETON LOADING — dark shimmer
   ------------------------------------------------------------------- */

@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

.tk-skeleton {
  background: linear-gradient(90deg,
    var(--tk-bg-card)       25%,
    var(--tk-bg-card-hover) 50%,
    var(--tk-bg-card)       75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--tk-radius-sm);
}
.tk-skeleton-card {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: var(--tk-radius-xl);
}

/* -------------------------------------------------------------------
   25. TOAST / ALERT CONTAINER
   ------------------------------------------------------------------- */

.tk-toast-container {
  position: fixed;
  top: var(--tk-space-4);
  right: var(--tk-space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--tk-space-2);
  max-width: 400px;
  width: calc(100% - 2rem);
}

/* -------------------------------------------------------------------
   26. FOOTER — dark
   ------------------------------------------------------------------- */

.tk-footer {
  font-size: var(--tk-text-sm);
  margin-top: auto;
  background-color: var(--tk-bg-base-2);
  border-top: 1px solid var(--tk-border);
  color: var(--tk-text-muted);
}
.tk-footer a {
  color: var(--tk-text-muted);
  transition: color var(--tk-duration-fast);
}
.tk-footer a:hover { color: var(--tk-brand-500); }
.tk-footer__brand { color: var(--tk-text-primary); }

/* Bootstrap bg-dark override in footer context */
.bg-dark {
  background-color: var(--tk-bg-base-2) !important;
}

/* -------------------------------------------------------------------
   27. BOXOFFICE HEADER
   ------------------------------------------------------------------- */

.tk-boxoffice-header {
  background: var(--tk-bg-card);
  border-bottom: 1px solid var(--tk-border);
  color: var(--tk-text-primary);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.tk-boxoffice-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tk-text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--tk-text-base);
}
.tk-boxoffice-header__brand:hover { color: var(--tk-brand-400); }
.tk-boxoffice-main {
  min-height: calc(100vh - 60px);
  background: var(--tk-bg-base);
}

/* -------------------------------------------------------------------
   28. CAROUSEL
   ------------------------------------------------------------------- */

.tk-carousel-section { margin-bottom: var(--tk-space-8); }

.tk-carousel {
  display: flex;
  gap: var(--tk-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--tk-border-strong) transparent;
  padding-bottom: 1rem;
}
.tk-carousel > * {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

.tk-carousel-controls {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.tk-carousel-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tk-border-strong);
  background: var(--tk-bg-card);
  color: var(--tk-text-secondary);
  font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color var(--tk-duration-fast), border-color var(--tk-duration-fast);
}
.tk-carousel-btn:hover {
  background: var(--tk-bg-card-hover);
  border-color: var(--tk-brand-500);
  color: var(--tk-brand-500);
}
.tk-carousel-btn:focus-visible {
  outline: 2px solid var(--tk-brand-500);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------
   29. UTILITIES
   ------------------------------------------------------------------- */

.tk-text-mono       { font-family: 'Courier New', Courier, monospace; }
.tk-text-brand      { color: var(--tk-brand-500); }
.tk-text-brand-dark { color: var(--tk-brand-400); }
.tk-text-muted      { color: var(--tk-text-muted) !important; }
.tk-bg-surface      { background-color: var(--tk-bg-card); }
.tk-bg-brand        { background-color: rgba(255, 90, 95, 0.12); }
.tk-border-class    { border: 1px solid var(--tk-border); }
.tk-rounded         { border-radius: var(--tk-radius-md); }
.tk-shadow          { box-shadow: var(--tk-shadow-sm); }

/* Coral glow utility */
.tk-glow-coral { box-shadow: var(--tk-shadow-coral); }

/* -------------------------------------------------------------------
   30. PRINT STYLES
   ------------------------------------------------------------------- */

@media print {
  .tk-navbar,
  .tk-footer,
  .tk-hold-timer,
  .no-print { display: none !important; }

  body { background: white; color: #000; }

  .tk-ticket-card {
    border: 2px solid #000;
    max-width: 100%;
    page-break-inside: avoid;
  }
  .tk-ticket-card__header { background: #000 !important; color: white !important; }
  .tk-ticket-card__qr { border: 1px solid #000; }
}

/* -------------------------------------------------------------------
   31. VENUE LIST CARD — split-view (Admin/Venues/Index)
   ------------------------------------------------------------------- */

.tk-venue-list-card {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
  overflow: hidden;
}
.tk-venue-list-card__head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--tk-border);
  color: var(--tk-text-secondary);
  font-size: 0.875rem;
}
.tk-venue-list { padding: 0.5rem; }

/* ── List toolbar (search + filters) — shared by admin listings ── */
.tk-list-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}
.tk-list-toolbar__search {
  position: relative;
  width: 100%;
}
.tk-list-toolbar__search > i {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tk-text-muted);
  font-size: 1rem;
  pointer-events: none;
  z-index: 2;
}
.tk-list-toolbar__search > .form-control {
  padding-left: 2.5rem !important;
  height: 2.5rem;
}
.tk-list-toolbar__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--tk-text-secondary);
}
.tk-list-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tk-list-toolbar__filters label {
  margin: 0;
  color: var(--tk-text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.tk-list-toolbar__filters .form-select {
  min-width: 11rem;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  font-size: 0.875rem;
}

/* ── User listing (admin/users) ── */
.tk-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tk-brand-500), var(--tk-brand-700, #d63b40));
  color: #fff;
  font-weight: 600;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.tk-role-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.tk-role-superadmin {
  background: rgba(255, 90, 95, 0.12);
  color: var(--tk-brand-500);
  border-color: rgba(255, 90, 95, 0.35);
}
.tk-role-organizer {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.35);
}
.tk-role-boxoffice {
  background: rgba(245, 158, 11, 0.12);
  color: var(--tk-warning, #f59e0b);
  border-color: rgba(245, 158, 11, 0.35);
}
.tk-role-doorvalidator {
  background: rgba(16, 185, 129, 0.12);
  color: var(--tk-success, #10b981);
  border-color: rgba(16, 185, 129, 0.35);
}
.tk-role-customer {
  background: var(--tk-surface-2, rgba(255,255,255,0.06));
  color: var(--tk-text-secondary);
  border-color: var(--tk-border, rgba(255,255,255,0.08));
}

/* ── Individual venue row ── */
.tk-venue-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem;
  border-radius: var(--tk-radius-md);
  color: inherit;
  transition: background-color var(--tk-duration-normal);
  border-left: 3px solid transparent;
  flex-wrap: nowrap;
}
.tk-venue-row:hover {
  background: var(--tk-bg-card-hover);
  color: inherit;
}
.tk-venue-row.is-selected {
  background: var(--tk-bg-card-hover);
  border-left: 3px solid var(--tk-brand-500);
}

/* Clickable area within the row (avatar + main text). Lives next to the
   action buttons but doesn't wrap them, so we keep valid HTML (no <a> in <a>). */
.tk-venue-row__clickable {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}
.tk-venue-row__clickable:hover {
  color: inherit;
}

/* Avatar circle */
.tk-venue-row__avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: rgba(255, 90, 95, 0.12);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tk-brand-500);
  font-size: 1.25rem;
}

/* Main text area */
.tk-venue-row__main { flex: 1; min-width: 0; }

.tk-venue-row__name {
  font-weight: 700;
  color: var(--tk-text-primary);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  display: inline-block;
  vertical-align: middle;
}

/* Country / type pill badge */
.tk-venue-row__type {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border-strong);
  color: var(--tk-text-secondary);
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* Meta line: city + hall count */
.tk-venue-row__meta {
  display: flex;
  gap: 1rem;
  color: var(--tk-text-muted);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.tk-venue-row__meta i {
  margin-right: 0.25rem;
  vertical-align: -1px;
  color: var(--tk-text-faint);
}

/* Action buttons on the right */
.tk-venue-row__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.tk-venue-row__delete-btn {
  color: var(--tk-danger) !important;
}
.tk-venue-row__delete-btn:hover {
  background: var(--tk-danger-bg) !important;
  color: var(--tk-danger) !important;
}

/* ── Empty state ── */
.tk-empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tk-text-muted);
}
.tk-empty-state i {
  font-size: 2.5rem;
  color: var(--tk-text-faint);
  margin-bottom: 0.5rem;
  display: inline-block;
}

/* -------------------------------------------------------------------
   PART 1 — Venue inline edit: zone pill
   ------------------------------------------------------------------- */

.tk-zone-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  background: var(--tk-bg-card-hover);
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-pill);
  font-size: 0.8125rem;
  color: var(--tk-text-primary);
  flex: 1 1 auto;
  min-width: 0;
}
.tk-zone-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tk-brand-500);
  flex-shrink: 0;
}
.tk-zone-pill__name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-zone-pill__capacity {
  background: var(--tk-bg-base);
  color: var(--tk-text-muted);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* -------------------------------------------------------------------
   PART 2 — Section block (shared across admin views)
   ------------------------------------------------------------------- */

.tk-section-block {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.tk-section-block__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tk-text-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.tk-section-block__title i {
  color: var(--tk-brand-500);
  font-size: 1.125rem;
}

/* -------------------------------------------------------------------
   Toggle row (for settings blocks)
   ------------------------------------------------------------------- */

.tk-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: var(--tk-bg-card-hover);
  border: 1px solid var(--tk-border-soft);
  border-radius: var(--tk-radius-md);
  margin-bottom: 0.75rem;
}
.tk-toggle-row__label {
  font-weight: 500;
  color: var(--tk-text-primary);
  font-size: 0.9375rem;
}
.tk-toggle-row__hint {
  display: block;
  font-size: 0.75rem;
  color: var(--tk-text-muted);
  margin-top: 0.125rem;
}

/* -------------------------------------------------------------------
   Event list row (admin Eventos index)
   ------------------------------------------------------------------- */

.tk-event-list-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--tk-border-soft);
  transition: background var(--tk-duration-fast);
}
.tk-event-list-row:last-child {
  border-bottom: none;
}
.tk-event-list-row:hover {
  background: var(--tk-bg-card-hover);
}

.tk-event-list-row__thumb {
  width: 80px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--tk-radius-md);
  overflow: hidden;
  background: var(--tk-bg-card-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tk-text-faint);
  font-size: 1.5rem;
}
.tk-event-list-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tk-event-list-row__main {
  flex: 1;
  min-width: 0;
}

.tk-event-list-row__title {
  font-weight: 700;
  color: var(--tk-text-primary);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.tk-event-list-row__title:hover {
  color: var(--tk-brand-500);
}

.tk-event-list-row__status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
.tk-event-status-draft {
  background: var(--tk-bg-card-hover);
  color: var(--tk-text-muted);
  border: 1px solid var(--tk-border-strong);
}
.tk-event-status-cancelled {
  background: var(--tk-danger-bg);
  color: var(--tk-danger-dark);
}
.tk-event-status-finished {
  background: rgba(148, 163, 184, 0.12);
  color: var(--tk-text-muted);
}

.tk-event-list-row__meta {
  display: flex;
  gap: 0.875rem;
  font-size: 0.8125rem;
  color: var(--tk-text-muted);
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.tk-event-list-row__meta i {
  margin-right: 0.25rem;
  vertical-align: -1px;
  color: var(--tk-text-faint);
}

.tk-event-list-row__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------
   Coupon row (admin Cupones index)
   ------------------------------------------------------------------- */

.tk-coupon-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--tk-border-soft);
  transition: background var(--tk-duration-fast);
}
.tk-coupon-row:last-child {
  border-bottom: none;
}
.tk-coupon-row:hover {
  background: var(--tk-bg-card-hover);
}

.tk-coupon-row__main {
  flex: 1;
  min-width: 0;
}

.tk-coupon-row__code {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--tk-text-primary);
  letter-spacing: 0.04em;
}

.tk-coupon-row__status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
.tk-coupon-status-inactive {
  background: rgba(148, 163, 184, 0.12);
  color: var(--tk-text-muted);
  border: 1px solid var(--tk-border-strong);
}

.tk-coupon-row__meta {
  display: flex;
  gap: 0.875rem;
  font-size: 0.8125rem;
  color: var(--tk-text-muted);
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.tk-coupon-row__meta i {
  margin-right: 0.25rem;
  vertical-align: -1px;
  color: var(--tk-text-faint);
}

.tk-coupon-row__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------
   KPI delta badge
   ------------------------------------------------------------------- */

.tk-kpi-delta-up {
  background: rgba(255, 90, 95, 0.15);
  color: var(--tk-brand-500);
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.tk-kpi-delta-up::before { content: "+"; }

/* -------------------------------------------------------------------
   32. EVENT CARD V2 — redesigned customer catalog card (mockup 2026-05)
   Replaces the carousel layout with a clean 3-column grid.
   Old .tk-event-card classes are kept intact (still used in admin views).
   ------------------------------------------------------------------- */

.tk-event-card-v2 {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s var(--tk-ease-default), border-color .2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tk-event-card-v2:hover {
  transform: translateY(-2px);
  border-color: var(--tk-brand-500);
}

/* Image area */
.tk-event-card-v2__image-wrap {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--tk-bg-elevated);
  text-decoration: none;
}
.tk-event-card-v2__image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--tk-ease-default);
}
.tk-event-card-v2:hover .tk-event-card-v2__image {
  transform: scale(1.03);
}
.tk-event-card-v2__image-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--tk-text-faint);
}

/* Highlight badge — top-left coral pill */
.tk-event-card-v2__badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--tk-grad-coral);
  color: #ffffff;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(255, 90, 95, .40);
  pointer-events: none;
}

/* Card body */
.tk-event-card-v2__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Category label */
.tk-event-card-v2__category {
  color: var(--tk-brand-500);
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 .5rem 0;
}

/* Event title */
.tk-event-card-v2__title {
  margin: 0 0 .75rem 0;
  font-size: 1.125rem; font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tk-event-card-v2__title a {
  color: var(--tk-text-primary);
  text-decoration: none;
}
.tk-event-card-v2__title a:hover { color: var(--tk-brand-500); }

/* Date / location meta rows */
.tk-event-card-v2__meta {
  display: flex; align-items: center; gap: .5rem;
  color: var(--tk-text-muted); font-size: .875rem;
  margin-bottom: .375rem;
  line-height: 1.4;
}
.tk-event-card-v2__meta i { color: var(--tk-text-faint); font-size: 16px; flex-shrink: 0; }

/* Footer */
.tk-event-card-v2__footer {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--tk-border);
}
.tk-event-card-v2__price small {
  display: block;
  color: var(--tk-text-muted); font-size: .75rem; font-weight: 400;
}
.tk-event-card-v2__price strong {
  font-size: 1.5rem; font-weight: 700;
  color: var(--tk-text-primary);
  line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero slider (rotating events with imagery + CTAs)
   ═══════════════════════════════════════════════════════════════════════ */

.tk-hero-slider {
    position: relative;
    margin: 1.5rem auto 0;
    max-width: 1100px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--tk-bg-elevated);
    border: 1px solid var(--tk-border);
}

.tk-hero-slider__track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 360px;
}

.tk-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .6s ease;
    overflow: hidden;
}

.tk-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

.tk-hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.tk-hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5, 8, 22, 0.20) 0%,
        rgba(5, 8, 22, 0.60) 60%,
        rgba(5, 8, 22, 0.90) 100%
    );
    z-index: 1;
}

.tk-hero-slide__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem 3rem;
    text-align: left;
    color: white;
}

.tk-hero-slide__eyebrow {
    color: var(--tk-brand-500);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
}

.tk-hero-slide__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    color: white;
    max-width: 32ch;
}

.tk-hero-slide__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.tk-hero-slide__meta i {
    margin-right: 0.375rem;
    vertical-align: -2px;
    color: var(--tk-brand-500);
}

.tk-hero-slide__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Navigation arrows */
.tk-hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(11, 18, 36, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
    font-size: 1.25rem;
}

.tk-hero-slider__nav:hover {
    background: var(--tk-brand-500);
    border-color: var(--tk-brand-500);
}

.tk-hero-slider__nav--prev { left: 1rem; }
.tk-hero-slider__nav--next { right: 1rem; }

/* Dots */
.tk-hero-slider__dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

.tk-hero-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}

.tk-hero-slider__dot:hover { background: rgba(255, 255, 255, 0.65); }
.tk-hero-slider__dot.is-active {
    background: var(--tk-brand-500);
    transform: scale(1.25);
}

/* Mobile adjustments */
@media (max-width: 720px) {
    .tk-hero-slider__track { min-height: 280px; aspect-ratio: 4 / 5; }
    .tk-hero-slide__content { padding: 1.5rem; }
    .tk-hero-slide__title { font-size: 1.5rem; }
    .tk-hero-slide__meta { gap: 0.75rem; font-size: 0.8125rem; }
    .tk-hero-slider__nav { width: 36px; height: 36px; }
    .tk-hero-slider__nav--prev { left: 0.5rem; }
    .tk-hero-slider__nav--next { right: 0.5rem; }
}

/* -------------------------------------------------------------------
   33. PAYMENT METHOD PICKER — radio-card pattern (Pay.cshtml)
   ------------------------------------------------------------------- */

.tk-payment-method-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--tk-border);
    border-radius: 12px;
    cursor: pointer;
    background: var(--tk-bg-card);
    transition: border-color .15s, background-color .15s;
    flex: 1;
    user-select: none;
}
.tk-payment-method-card:hover {
    border-color: var(--tk-brand-500);
    background: var(--tk-bg-card-hover);
}
.tk-payment-method-card.is-active {
    border: 2px solid var(--tk-brand-500);
    background: var(--tk-bg-card-hover);
}
.tk-payment-method-card:focus-within {
    outline: 2px solid var(--tk-brand-500);
    outline-offset: 2px;
}

.tk-payment-method-card__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 90, 95, 0.12);
    color: var(--tk-brand-500);
    font-size: 1.375rem;
    flex-shrink: 0;
}
.tk-payment-method-card__label {
    font-weight: 600;
    color: var(--tk-text-primary);
    font-size: .9375rem;
}
.tk-payment-method-card__hint {
    color: var(--tk-text-muted);
    font-size: .8125rem;
}