/* Scanfun — BuenPlan Design System 2025
   Fonts: Lato (body) + Poppins (headings)
   Primary: #7c3aed (purple)  |  Dark: #1c1e22
*/
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Poppins:wght@500;600;700;800&display=swap");

:root {
    --bg:           #f4f4f6;
    --bg-card:      #ffffff;
    --fg:           #24282d;
    --fg-muted:     #535865;
    --fg-subtle:    #8c92a1;
    --accent:       #7c3aed;
    --accent-dark:  #6d28d9;
    --accent-btn:   #5b21b6;
    --accent-btn-hover: #4c1d95;
    --accent-light: #f5f3ff;
    --accent-mid:   #c4b5fd;
    --accent-grad:  linear-gradient(135deg, #3b0764 0%, #7c3aed 55%, #c4b5fd 100%);
    --accent-glow:  rgba(124,58,237,0.25);
    --dark:         #1c1e22;
    --dark-mid:     #24282d;
    --dark-light:   #2e3138;
    --border:       #d8dadf;
    --border-hover: rgba(124,58,237,0.4);
    --radius:       0.875rem;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
    --shadow-lg:    0 10px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
    font-family: Poppins, Lato, sans-serif;
}
a { color: inherit; text-decoration: none; }

/* ===== KEN BURNS / EVENT IMAGE ANIMATIONS ===== */
@keyframes kb1 { 0% { transform: scale(1) translate(0%,0%); }     100% { transform: scale(1.14) translate(-2.5%,-1.5%); } }
@keyframes kb2 { 0% { transform: scale(1.08) translate(-1.5%,0%); } 100% { transform: scale(1) translate(2.5%,1.5%); } }
@keyframes kb3 { 0% { transform: scale(1) translate(2%,-1%); }    100% { transform: scale(1.12) translate(-1.5%,2%); } }
@keyframes kb4 { 0% { transform: scale(1.1) translate(0%,1.5%); } 100% { transform: scale(1) translate(-2%,-1%); } }
@keyframes kb5 { 0% { transform: scale(1) translate(-1%,2%); }    100% { transform: scale(1.13) translate(2%,-2%); } }
@keyframes kb6 { 0% { transform: scale(1.06) translate(1.5%,-1.5%); } 100% { transform: scale(1) translate(-2%,1%); } }
@keyframes gradient-drift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
.event-img-wrap { position: relative; overflow: hidden; }
.event-img-animated { width:100%; height:100%; object-fit:cover; animation: kb1 14s ease-in-out infinite alternate; will-change:transform; backface-visibility:hidden; transform-origin:center center; }
.event-img-placeholder { width:100%; height:100%; background: linear-gradient(135deg,#7c3aed,#6d28d9,#5b21b6,#7c3aed); background-size:400% 400%; animation:gradient-drift 10s ease infinite; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.25rem; }
.event-img-placeholder .placeholder-day   { font-size:2.5rem; font-weight:900; color:#fff; line-height:1; font-family:Poppins,sans-serif; }
.event-img-placeholder .placeholder-month { font-size:0.75rem; font-weight:700; color:rgba(255,255,255,0.75); letter-spacing:0.15em; text-transform:uppercase; }
.event-card:nth-child(1) .event-img-animated { animation-name:kb1; animation-duration:14s; }
.event-card:nth-child(2) .event-img-animated { animation-name:kb2; animation-duration:17s; animation-delay:-6s; }
.event-card:nth-child(3) .event-img-animated { animation-name:kb3; animation-duration:12s; animation-delay:-9s; }
.event-card:nth-child(4) .event-img-animated { animation-name:kb4; animation-duration:19s; animation-delay:-4s; }
.event-card:nth-child(5) .event-img-animated { animation-name:kb5; animation-duration:15s; animation-delay:-12s; }
.event-card:nth-child(6) .event-img-animated { animation-name:kb6; animation-duration:13s; animation-delay:-7s; }
.event-card:nth-child(7) .event-img-animated { animation-name:kb2; animation-duration:16s; animation-delay:-3s; }
.event-card:nth-child(8) .event-img-animated { animation-name:kb4; animation-duration:18s; animation-delay:-10s; }
.event-glass-info { position:absolute; bottom:0; left:0; right:0; padding:1.5rem 1.25rem 1.25rem; background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.4) 55%,transparent 100%); color:#fff; }
.event-glass-info .event-title { font-size:1rem; font-weight:700; font-family:Poppins,sans-serif; line-height:1.3; margin-bottom:0.3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-glass-info .event-meta  { font-size:0.8125rem; color:rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-glass-info .event-price { font-size:0.875rem; font-weight:700; color:#f5f3ff; margin-top:0.4rem; }
.event-date-badge { display:inline-flex; align-items:center; background:rgba(124,58,237,0.9); backdrop-filter:blur(8px); border-radius:999px; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:0.2rem 0.65rem; color:#fff; margin-bottom:0.5rem; width:fit-content; }
.fade-in { opacity:0; transform:translateY(20px); transition:opacity 0.55s ease,transform 0.55s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ===== BUTTONS ===== */
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.6rem 1.35rem;
    background: var(--accent-grad);
    color:#fff; font-size:0.9rem; font-weight:700;
    font-family: Poppins, sans-serif;
    letter-spacing:0.01em;
    border:none; border-radius:var(--radius);
    cursor:pointer; text-decoration:none;
    transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 2px 14px rgba(124,58,237,0.35);
    white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(124,58,237,0.45); filter:brightness(1.08); }
.btn-primary:active { transform:translateY(0); box-shadow:0 2px 8px rgba(124,58,237,0.2); }

.btn-secondary {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.6rem 1.35rem;
    background:#fff; color:#7c3aed;
    font-size:0.9rem; font-weight:600;
    font-family: Poppins, sans-serif;
    border:1.5px solid rgba(124,58,237,0.35); border-radius:var(--radius);
    cursor:pointer; text-decoration:none;
    transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
    box-shadow:var(--shadow-sm);
    white-space:nowrap;
}
.btn-secondary:hover { border-color:rgba(124,58,237,0.65); background:#f5f3ff; transform:translateY(-1px); box-shadow:var(--shadow-md); }

.btn-ghost {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.6rem 1.1rem;
    background:transparent; color:var(--fg-muted);
    font-size:0.9rem; font-weight:500;
    border:1px solid var(--border); border-radius:var(--radius);
    cursor:pointer; text-decoration:none;
    transition:all 0.2s ease; white-space:nowrap;
}
.btn-ghost:hover { background:#f4f4f6; color:var(--fg); border-color:#b0b5bf; }

.btn-danger {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.6rem 1.35rem;
    background:#fff1f2; color:#dc2626;
    font-size:0.9rem; font-weight:600;
    border:1.5px solid rgba(220,38,38,0.3); border-radius:var(--radius);
    cursor:pointer; text-decoration:none; transition:all 0.2s ease; white-space:nowrap;
}
.btn-danger:hover { background:#fee2e2; border-color:rgba(220,38,38,0.5); }

.btn-success {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.6rem 1.35rem;
    background:#f0fdf4; color:#16a34a;
    font-size:0.9rem; font-weight:600;
    border:1.5px solid rgba(22,163,74,0.3); border-radius:var(--radius);
    cursor:pointer; text-decoration:none; transition:all 0.2s ease; white-space:nowrap;
}
.btn-success:hover { background:#dcfce7; border-color:rgba(22,163,74,0.5); }

.btn-sm { padding:0.375rem 0.875rem !important; font-size:0.8125rem !important; border-radius:0.625rem !important; }
.btn-lg { padding:0.8rem 1.75rem !important; font-size:1rem !important; border-radius:1rem !important; }

/* ===== CARDS ===== */
.card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
    border-color:rgba(124,58,237,0.25);
    box-shadow:var(--shadow-md), 0 0 0 1px rgba(124,58,237,0.08);
}

/* ===== INPUTS ===== */
.input-field, .input {
    display:block; width:100%;
    padding:0.6rem 0.875rem;
    background:#fff;
    border:1.5px solid #d8dadf;
    border-radius:0.625rem;
    color:var(--fg);
    font-size:0.9rem; font-family: Lato, sans-serif;
    transition:border-color 0.2s ease,box-shadow 0.2s ease;
    outline:none;
    -webkit-appearance:none; appearance:none;
}
.input-field::placeholder, .input::placeholder { color:var(--fg-subtle); }
.input-field:focus, .input:focus {
    border-color:rgba(124,58,237,0.6);
    box-shadow:0 0 0 3px rgba(124,58,237,0.1);
}
.input-field:disabled, .input:disabled { opacity:0.5; cursor:not-allowed; background:#f4f4f6; }
select.input-field, select.input {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c3aed' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 0.75rem center;
    padding-right:2.25rem; cursor:pointer;
}
textarea.input-field, textarea.input { resize:vertical; min-height:6rem; }
.input-label { display:block; margin-bottom:0.4rem; font-size:0.8125rem; font-weight:600; color:var(--fg-muted); letter-spacing:0.01em; }

/* ===== BADGES ===== */
.badge { display:inline-flex; align-items:center; padding:0.2rem 0.65rem; border-radius:999px; font-size:0.7125rem; font-weight:700; letter-spacing:0.03em; white-space:nowrap; }
.badge-gray    { background:#f4f4f5; color:#52525b; border:1px solid #e4e4e7; }
.badge-active  { background:#f5f3ff; color:#5b21b6; border:1px solid rgba(124,58,237,0.3); }
.badge-violet  { background:#f5f3ff; color:#7c3aed; border:1px solid rgba(124,58,237,0.2); }
.badge-info    { background:#f5f3ff; color:#1d4ed8; border:1px solid rgba(29,78,216,0.2); }
.badge-success { background:#f0fdf4; color:#15803d; border:1px solid rgba(21,128,61,0.2); }
.badge-warning { background:#fffbeb; color:#b45309; border:1px solid rgba(180,83,9,0.2); }
.badge-error   { background:#fff1f2; color:#dc2626; border:1px solid rgba(220,38,38,0.2); }

/* ===== SIDEBAR ===== */
.sidebar {
    position:fixed; top:0; left:0; bottom:0; width:240px;
    background: var(--dark);
    border-right:1px solid rgba(255,255,255,0.06);
    box-shadow:2px 0 20px rgba(0,0,0,0.25);
    display:flex; flex-direction:column;
    z-index:40;
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.sidebar-logo { padding:1.25rem 1.25rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.sidebar-nav {
    flex:1; overflow-y:auto; padding:0.75rem;
    display:flex; flex-direction:column; gap:0.125rem;
}
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.3); border-radius:999px; }
.sidebar-link {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.6rem 0.875rem;
    border-radius:0.625rem;
    color:rgba(255,255,255,0.55);
    font-size:0.875rem; font-weight:500;
    text-decoration:none;
    transition:all 0.18s ease;
    border:1px solid transparent;
    position:relative;
}
.sidebar-link:hover { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.9); border-color:rgba(255,255,255,0.06); }
.sidebar-link.active {
    background:rgba(124,58,237,0.15); color:#c4b5fd;
    border-color:rgba(124,58,237,0.25);
    font-weight:600;
}
.sidebar-link.active::before {
    content:""; position:absolute; left:0; top:25%; bottom:25%;
    width:3px; border-radius:999px;
    background:linear-gradient(180deg,#7c3aed,#c4b5fd);
}
.sidebar-link svg { width:1.1rem; height:1.1rem; flex-shrink:0; }
.sidebar-footer { padding:0.75rem; border-top:1px solid rgba(255,255,255,0.08); }
.sidebar-section-label { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.25); padding:0.5rem 0.875rem 0.25rem; }

/* ===== LAYOUT ===== */
.main-content { margin-left:240px; min-height:100vh; transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1); }
.page-content { padding:2rem; max-width:1200px; }
.page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.75rem; }
.page-header h1 { font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color:var(--fg); font-family:Poppins,sans-serif; }

/* Mobile header */
.mobile-header { display:none; position:fixed; top:0; left:0; right:0; height:3.75rem; background:var(--dark); border-bottom:1px solid rgba(255,255,255,0.06); box-shadow:var(--shadow-sm); align-items:center; justify-content:space-between; padding:0 1rem; z-index:50; }
.hamburger-btn { width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); border-radius:0.5rem; cursor:pointer; color:rgba(255,255,255,0.75); transition:all 0.2s ease; }
.hamburger-btn:hover { background:rgba(124,58,237,0.2); color:#c4b5fd; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(3px); z-index:39; }

@media (max-width:1023px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .sidebar-overlay.active { display:block; }
    .mobile-header { display:flex; }
    .main-content { margin-left:0; padding-top:3.75rem; }
    .page-content { padding:1.25rem 1rem; }
}

/* ===== TABLE ===== */
.table-container { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; overflow-y:visible; box-shadow:var(--shadow-sm); }
.table-container table { width:100%; border-collapse:collapse; min-width:520px; }
.table-container th { padding:0.75rem 1rem; background:#f5f3ff; font-size:0.7125rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#5b21b6; text-align:left; border-bottom:1px solid rgba(124,58,237,0.12); white-space:nowrap; }
.table-container td { padding:0.75rem 1rem; font-size:0.875rem; color:#535865; border-bottom:1px solid #f4f4f5; vertical-align:middle; }
.table-container tr:last-child td { border-bottom:none; }
.table-container tr:hover td { background:#f5f3ff; }
.table-container a.block:hover { background:#f5f3ff !important; }
.table-container a.block { border-bottom:1px solid #f4f4f5; }
.table-container a.block:last-child { border-bottom:none; }

/* ===== STAT CARDS ===== */
.grid-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
.stat-card { padding:1.25rem; display:flex; flex-direction:column; gap:0.3rem; }
.stat-label { font-size:0.75rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#7c3aed; }
.stat-value { font-size:1.75rem; font-weight:800; letter-spacing:-0.03em; color:var(--fg); line-height:1; font-family:Poppins,sans-serif; }

/* ===== ALERTS ===== */
.alert { padding:0.875rem 1rem; border-radius:0.75rem; font-size:0.875rem; display:flex; align-items:flex-start; gap:0.625rem; border:1px solid transparent; }
.alert-info    { background:#f5f3ff; border-color:#bfdbfe; color:#1d4ed8; }
.alert-success { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.alert-warning { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.alert-error   { background:#fff1f2; border-color:#fecdd3; color:#dc2626; }

/* ===== MODAL ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; padding:1rem; }
.modal { background:#fff; border:1px solid var(--border); border-radius:1.25rem; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,0.22); animation:modal-in 0.25s ease; }
@keyframes modal-in { from { opacity:0; transform:scale(0.93) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-header { padding:1.5rem 1.5rem 0; font-size:1.125rem; font-weight:700; color:var(--fg); font-family:Poppins,sans-serif; }
.modal-body { padding:1.25rem 1.5rem; }
.modal-footer { padding:0 1.5rem 1.5rem; display:flex; gap:0.75rem; justify-content:flex-end; }

/* ===== SPINNER ===== */
.spinner { width:1.25rem; height:1.25rem; border:2px solid rgba(124,58,237,0.2); border-top-color:#7c3aed; border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== EMPTY STATE ===== */
.empty-state { padding:3.5rem 2rem; text-align:center; color:var(--fg-subtle); }
.empty-state h3 { font-size:1rem; font-weight:600; margin-bottom:0.375rem; color:var(--fg-muted); font-family:Poppins,sans-serif; }
.empty-state p  { font-size:0.875rem; line-height:1.6; }
.empty-state svg { color:rgba(124,58,237,0.35); }

.text-gradient { background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 50%,#5b21b6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; padding:0.75rem 1.25rem; border-radius:0.75rem; font-size:0.875rem; font-weight:500; z-index:9999; box-shadow:0 8px 32px rgba(0,0,0,0.18); animation:toast-in 0.3s ease; max-width:90vw; border:1px solid transparent; }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.toast-success { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.toast-error   { background:#fff1f2; color:#dc2626; border-color:#fecdd3; }
.toast-info    { background:#f5f3ff; color:#5b21b6; border-color:rgba(124,58,237,0.3); }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#f4f4f6; }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.25); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(124,58,237,0.45); }

/* ===== UTILITIES ===== */
.divider { border:none; border-top:1px solid var(--border); margin:1rem 0; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; }
.max-w-6xl { max-width:72rem; } .mx-auto { margin-left:auto; margin-right:auto; }
.px-6 { padding-left:1.5rem; padding-right:1.5rem; } .h-full { height:100%; }
.flex { display:flex; } .items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-2 { gap:0.5rem; } .gap-3 { gap:0.75rem; } .gap-4 { gap:1rem; } .gap-6 { gap:1.5rem; }
.flex-wrap { flex-wrap:wrap; } .min-h-screen { min-height:100vh; } .text-center { text-align:center; }
.mb-6 { margin-bottom:1.5rem; } .mb-4 { margin-bottom:1rem; } .mb-2 { margin-bottom:0.5rem; } .mb-8 { margin-bottom:2rem; }
.mt-4 { margin-top:1rem; } .p-4 { padding:1rem; } .p-6 { padding:1.5rem; }
.block { display:block; } .w-full { width:100%; }
.font-medium { font-weight:500; } .font-semibold { font-weight:600; } .font-bold { font-weight:700; }
.text-sm { font-size:0.875rem; } .text-xs { font-size:0.75rem; } .text-lg { font-size:1.125rem; }
.text-xl { font-size:1.25rem; } .text-2xl { font-size:1.5rem; }
.cursor-pointer { cursor:pointer; }
.ml-1 { margin-left:0.25rem; } .ml-2 { margin-left:0.5rem; } .mr-2 { margin-right:0.5rem; }
.hidden { display:none !important; } .overflow-hidden { overflow:hidden; }
.rounded-xl { border-radius:0.75rem; } .rounded-full { border-radius:999px; }
.grid { display:grid; } .grid-cols-2 { grid-template-columns:repeat(2,1fr); } .grid-cols-3 { grid-template-columns:repeat(3,1fr); }

/* ===== SCAN STATES ===== */
.scan-result-apto { background:#f0fdf4; color:#15803d; border:1.5px solid #bbf7d0; border-radius:var(--radius); padding:1rem; font-weight:600; text-align:center; }
.scan-result-no-apto { background:#fff1f2; color:#dc2626; border:1.5px solid #fecdd3; border-radius:var(--radius); padding:1rem; font-weight:600; text-align:center; }
.upload-area { border:2px dashed rgba(124,58,237,0.3); border-radius:var(--radius); padding:2rem; text-align:center; cursor:pointer; transition:all 0.2s ease; background:#f5f3ff; }
.upload-area:hover { border-color:rgba(124,58,237,0.6); background:#ede9fe; }
.scanner-wrap { border-radius:var(--radius); overflow:hidden; border:1.5px solid var(--border); background:#f9f9fb; }
.ticket-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.ticket-card:hover { border-color:rgba(124,58,237,0.25); }
.ticket-card .ticket-header { padding:0.75rem 1rem; background:#f5f3ff; border-bottom:1px solid rgba(124,58,237,0.1); font-size:0.8rem; font-weight:700; color:#7c3aed; letter-spacing:0.05em; text-transform:uppercase; }
::selection { background:rgba(124,58,237,0.15); color:#5b21b6; }

/* ===== TAILWIND OVERRIDES ===== */
.bg-white { background:#fff !important; }
.bg-gray-50 { background:#f9fafb !important; }
.bg-gray-100 { background:#f3f4f6 !important; }
.bg-green-50 { background:#f0fdf4 !important; }
.bg-green-100 { background:#dcfce7 !important; }
.bg-red-100 { background:#fee2e2 !important; }
.bg-purple-100 { background:#f5f3ff !important; }
.bg-gray-900 { background:#f5f3ff !important; color:#5b21b6 !important; }
/* Amber/Yellow → purple warning tones */
.bg-yellow-50  { background:#f5f3ff !important; }
.bg-yellow-100 { background:#ede9fe !important; }
.bg-amber-50   { background:#f5f3ff !important; }
.bg-amber-100  { background:#ede9fe !important; }
.bg-amber-200  { background:#ddd6fe !important; }
.border-amber-200  { border-color:rgba(124,58,237,0.25) !important; }
.hover\:bg-amber-100:hover { background:#ede9fe !important; }
.text-amber-500  { color:#7c3aed !important; }
.text-amber-600  { color:#6d28d9 !important; }
.text-amber-700  { color:#5b21b6 !important; }
.text-amber-800  { color:#4c1d95 !important; }
.text-yellow-600 { color:#6d28d9 !important; }
.text-yellow-800 { color:#4c1d95 !important; }
/* Text colors */
.text-gray-400 { color:#9ca3af !important; } .text-gray-500 { color:#6b7280 !important; }
.text-gray-600 { color:#4b5563 !important; } .text-gray-700 { color:#374151 !important; }
.text-gray-800 { color:#1f2937 !important; } .text-gray-900 { color:#111827 !important; }
.text-white { color:#fff !important; }
.text-purple-600 { color:#7c3aed !important; } .text-blue-600 { color:#7c3aed !important; }
.text-green-600 { color:#16a34a !important; } .text-green-700 { color:#15803d !important; }
.text-red-600 { color:#dc2626 !important; } .text-red-500 { color:#ef4444 !important; }
.text-green-500 { color:#22c55e !important; } .text-blue-500 { color:#7c3aed !important; }
.text-indigo-600 { color:#7c3aed !important; } .text-violet-500 { color:#7c3aed !important; }
.text-purple-700 { color:#6d28d9 !important; } .text-purple-800 { color:#5b21b6 !important; }
.text-blue-700 { color:#6d28d9 !important; } .text-blue-800 { color:#5b21b6 !important; }
.hover\:text-blue-800:hover { color:#5b21b6 !important; }
.hover\:text-purple-800:hover { color:#5b21b6 !important; }
.bg-blue-50 { background:#f5f3ff !important; } .bg-purple-50 { background:#f5f3ff !important; }
.bg-blue-100 { background:#f5f3ff !important; }
.border-purple-400 { border-color:#7c3aed !important; }
.hover\:border-purple-400:hover { border-color:#7c3aed !important; }
.hover\:border-orange-300:hover { border-color:#7c3aed !important; }
.border-gray-100 { border-color:#f3f4f6 !important; }
.border-gray-200 { border-color:#e5e7eb !important; }
.border-gray-300 { border-color:#d1d5db !important; }
.border   { border:1px solid var(--border) !important; }
.border-b { border-bottom:1px solid var(--border) !important; }
.border-t { border-top:1px solid var(--border) !important; }
.divide-y > * + * { border-top:1px solid #f3f4f6 !important; }
.shadow    { box-shadow:var(--shadow-sm) !important; }
.shadow-md { box-shadow:var(--shadow-md) !important; }
.shadow-lg { box-shadow:var(--shadow-lg) !important; }
.rounded    { border-radius:0.375rem; } .rounded-md { border-radius:0.5rem; } .rounded-lg { border-radius:0.75rem; }
label { color:var(--fg-muted) !important; }

/* ===== SIDEBAR LOGO ===== */
.sidebar-logo img { width:120px; height:auto; display:block; }
.user-info { font-size:0.75rem; color:rgba(255,255,255,0.4); margin-top:0.35rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subtitle { font-size:0.875rem; color:var(--fg-muted); margin-top:0.2rem; }

/* ===== EVENT CARD REUSABLE CLASSES ===== */
.ev-card-row       { display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem; flex-wrap:wrap; }
.ev-card-info      { min-width:0; flex:1; }
.ev-card-title     { font-weight:600; font-size:0.9375rem; }
.ev-card-meta      { font-size:0.8125rem; color:var(--fg-subtle); }
.ev-card-metrics   { display:flex; gap:1.25rem; flex-shrink:0; flex-wrap:wrap; }
.ev-card-metric    { text-align:center; }
.ev-card-metric-lbl{ font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent); }
.ev-card-metric-val{ font-size:1.1rem; font-weight:800; }
.ev-card-metric-sub{ font-size:0.75rem; font-weight:500; color:var(--fg-subtle); }

/* ===== RESPONSIVE TABLE / CARDS (safe for JS-injected HTML) ===== */
.js-table-wrap { display:none; }
.js-cards-wrap { display:block; }
@media (min-width:768px) {
    .js-table-wrap { display:block; }
    .js-cards-wrap { display:none; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width:640px) {
    .page-header { flex-direction:column; align-items:flex-start; }
    .page-header > * { width:100%; }
    .page-header .btn-primary, .page-header .btn-secondary, .page-header .btn-ghost { width:auto; }
    .grid-stats { grid-template-columns:repeat(2,1fr); }
    .stat-value { font-size:1.4rem; }
    .flex.flex-wrap.gap-3 { gap:0.5rem; }
    .flex.flex-wrap.gap-3 .input-field { min-width:0 !important; width:100% !important; }
    .flex.flex-wrap.gap-3 select.input-field { width:100% !important; }
    .modal .grid-cols-2.gap-4,
    .card .grid-cols-2.gap-4 { grid-template-columns: 1fr !important; }
    .modal { border-radius:0.875rem; }
    .table-container td { word-break:break-word; max-width:200px; }
    .empty-state { padding:2.5rem 1rem; }
}