:root { --primary: #00f2fe; --secondary: #4facfe; --bg: #0f172a; --card-bg: rgba(30, 41, 59, 0.7); --text: #f8fafc; --text-muted: #94a3b8; --accent: #f43f5e; --success: #10b981; --glass-border: rgba(255, 255, 255, 0.1); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Light Theme Variables */ body.light-theme, html.light-theme-pre body { --bg: #f1f5f9; --card-bg: rgba(255, 255, 255, 0.7); --text: #1e293b; --text-muted: #64748b; --glass-border: rgba(0, 0, 0, 0.05); } /* Apply bg instantly on before body paints — prevents dark flash */ html.light-theme-pre { background-color: #f1f5f9; } body.light-theme .nav-pill:hover { background: rgba(0, 0, 0, 0.05); } body.light-theme input { background: rgba(255, 255, 255, 0.8); color: #1e293b; border: 1px solid rgba(0, 0, 0, 0.1); } body.light-theme .logout-btn:hover { background: rgba(239, 68, 68, 0.05); } /* Light theme button fixes for sending tab */ body.light-theme .btn-outline { border-color: rgba(0, 0, 0, 0.15); color: var(--text); } body.light-theme .btn-outline:hover { background: rgba(0, 0, 0, 0.03); } /* Ensure text visibility in light mode for utility action buttons */ body.light-theme .utility-actions-title { color: var(--text) !important; } body.light-theme .utility-actions-group .btn { color: var(--text); } /* Light mode fixes for filter buttons section */ body.light-theme .filter-badge { background: rgba(0, 0, 0, 0.08) !important; color: var(--text) !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; } body.light-theme #table-search { background: rgba(0, 0, 0, 0.05) !important; color: var(--text) !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; } body.light-theme #table-search::placeholder { color: var(--text-muted); } /* Light mode stats boxes */ body.light-theme .stats-box { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } body.light-theme .stats-box-value { color: var(--text) !important; } /* Light mode table styling */ body.light-theme table tbody tr { background: rgba(0, 0, 0, 0.02); } body.light-theme table tbody tr:hover { background: rgba(0, 0, 0, 0.04); } body.light-theme table td { color: var(--text); border-bottom-color: rgba(0, 0, 0, 0.08); } body.light-theme table th { border-bottom-color: rgba(0, 0, 0, 0.1); } /* Light mode guest note styling */ body.light-theme .guest-note { background: rgba(245, 158, 11, 0.15) !important; border-right-color: #f59e0b !important; } /* Light mode entry tab inputs */ body.light-theme .batch-name, body.light-theme .batch-phone, body.light-theme .batch-count { background: rgba(0, 0, 0, 0.05) !important; color: var(--text) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } body.light-theme .batch-name::placeholder, body.light-theme .batch-phone::placeholder, body.light-theme .batch-count::placeholder { color: var(--text-muted); } /* Light mode entry search input */ body.light-theme #entry-search { background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: var(--text) !important; } body.light-theme #entry-search::placeholder { color: var(--text-muted); } /* Light mode entry table */ body.light-theme .entry-guest-row { border-bottom-color: rgba(0, 0, 0, 0.08) !important; } body.light-theme .entry-guest-row td { color: var(--text); } /* Light mode file input */ body.light-theme input[type="file"] { background: rgba(0, 0, 0, 0.05) !important; color: var(--text) !important; } /* Shell & Layout */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .main-header { position: sticky; top: 0; z-index: 1000; margin: 1rem auto; width: calc(100% - 2rem); max-width: 1400px; padding: 0 !important; border-radius: 20px !important; background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); overflow: hidden; } .header-content { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; gap: 0.75rem; } /* Brand Section */ .brand-section { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; } .header-logo { width: 45px; height: 45px; object-fit: contain; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .brand-title { font-size: 1.25rem; margin: 0; line-height: 1; } .brand-tagline { font-size: 0.65rem; color: var(--text-muted); margin: 2px 0 0 0; } /* Main Navigation */ .main-nav { display: flex; flex-wrap: nowrap; gap: 0.3rem; background: rgba(255, 255, 255, 0.03); padding: 0.3rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.05); min-width: 0; flex-shrink: 1; } .nav-pill { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.7rem; border-radius: 12px; color: var(--text-muted); text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; font-size: 0.78rem; white-space: nowrap; flex-shrink: 1; min-width: 0; } .nav-pill:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); } .nav-pill.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #000; box-shadow: 0 4px 15px rgba(0, 242, 254, 0.3); } .nav-pill svg { transition: stroke 0.3s ease; } .nav-pill.active svg { stroke: #000; } /* User Action Area */ .user-action-area { display: flex; align-items: center; gap: 1.2rem; flex: 0 0 auto; justify-content: flex-end; } .user-meta { text-align: right; display: flex; flex-direction: column; } .user-greeting { font-size: 0.65rem; color: var(--text-muted); } .user-badge-container { display: flex; align-items: center; gap: 0.5rem; margin-top: 2px; } .user-name { font-size: 0.85rem; font-weight: 700; color: var(--text); } .user-badge { font-size: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .badge-superadmin { background: rgba(0, 242, 254, 0.1); color: var(--primary); border: 1px solid rgba(0, 242, 254, 0.3); } .badge-admin { background: rgba(79, 172, 254, 0.1); color: var(--secondary); border: 1px solid rgba(79, 172, 254, 0.3); } .logout-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(239, 68, 68, 0.2); color: #f87171; transition: all 0.2s ease; text-decoration: none; } .logout-btn:hover { background: rgba(239, 68, 68, 0.1); border-color: #f87171; transform: scale(1.05); } /* Feedback & Alerts */ .feedback-container { margin-bottom: 2rem; } .alert { padding: 1rem 1.2rem; border-radius: 16px; display: flex; align-items: center; gap: 0.8rem; border: 1px solid transparent; font-size: 0.9rem; font-weight: 600; } .alert-success { background: rgba(16, 185, 129, 0.08); color: #10b981; border-color: rgba(16, 185, 129, 0.2); } .alert-danger { background: rgba(244, 63, 94, 0.08); color: #f43f5e; border-color: rgba(244, 63, 94, 0.2); } /* Responsiveness */ /* Media Queries - Ordered by size */ @media (max-width: 1280px) { .nav-pill span { display: none; } .nav-pill { padding: 0.6rem; } } @media (max-width: 850px) { /* Keep header single row — just hide tagline */ .brand-tagline { display: none; } } @media (max-width: 768px) { .container { padding: 1rem; } .glass-card { padding: 1.25rem; } /* Table Mobile View - Stacked */ table, thead, tbody, th, td, tr, .entry-row { display: block; width: 100% !important; } #batch-entry-table thead { display: none; } #batch-entry-table .entry-row { margin-bottom: 1rem; background: rgba(255,255,255,0.03); padding: 0.8rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); } #batch-entry-table td { padding: 0.4rem 0 !important; width: 100% !important; display: block !important; border: none !important; } #batch-entry-table td:before { display: block; font-size: 0.65rem; color: var(--text-muted); margin-bottom: 0.2rem; content: attr(data-label); font-weight: 600; text-align: right; } #batch-entry-table td:last-child:before { display: none; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { margin-bottom: 2rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 1rem; background: rgba(255,255,255,0.02); } td { border: none; padding: 0.75rem 0.5rem !important; position: relative; text-align: left; min-height: 2.5rem; display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.03) !important; } td:before { display: inline-block; font-weight: 800; color: var(--primary); content: attr(data-label); text-align: right; font-size: 0.75rem; white-space: nowrap; flex-shrink: 0; } td:last-child { border-bottom: none; padding-top: 1rem; padding-right: 0; text-align: center; } td:last-child:before { display: none; } .btn { width: 100%; margin-bottom: 0.5rem; } header h1 { font-size: 1.8rem; } } @media (max-width: 600px) { #sender-float-bar { flex-direction: column; gap: 0.8rem; padding: 1rem; bottom: 1rem; border-radius: 16px; text-align: center; } #sender-float-bar > div { text-align: center !important; } } @media (max-width: 480px) { .nav-pill span { display: none; } .nav-pill { padding: 0.8rem; } } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } html, body { overflow-x: hidden; width: 100%; position: relative; } body { background-color: var(--bg); color: var(--text); min-height: 100vh; background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%); background-attachment: fixed; transition: background-color 0.3s ease, color 0.3s ease; } body.light-theme { background-image: radial-gradient(at 0% 0%, hsla(210, 40%, 98%, 1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(210, 40%, 90%, 1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(210, 40%, 95%, 1) 0, transparent 50%); } .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 1rem; } /* Glassmorphism Card */ .glass-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2rem; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; margin-bottom: 1rem; } .gradient-text { background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: none; text-decoration: none; gap: 0.5rem; } .btn-primary { background: linear-gradient(to right, var(--primary), var(--secondary)); color: #000; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 242, 254, 0.4); } .btn-outline { background: transparent; border: 1px solid var(--glass-border); color: var(--text); } .btn-outline:hover { background: rgba(255, 255, 255, 0.05); } /* Forms */ .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; color: var(--text-muted); font-size: 0.875rem; } input { width: 100%; background: rgba(15, 23, 42, 0.5); border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.75rem 1rem; color: white; outline: none; transition: border-color 0.2s; } input:focus { border-color: var(--primary); } /* Table */ table { width: 100%; border-collapse: collapse; margin-top: 2rem; } tbody tr { background: rgba(255, 255, 255, 0.03); transition: background 0.15s ease; } tbody tr:hover { background: rgba(255, 255, 255, 0.07); } th { text-align: right; padding: 1rem; color: var(--text-muted); font-size: 0.875rem; border-bottom: 1px solid var(--glass-border); } td { text-align: right; padding: 1rem; border-bottom: 1px solid var(--glass-border); } .status-badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; } .status-pending { background: rgba(234, 179, 8, 0.1); color: #eab308; } .status-accepted { background: rgba(16, 185, 129, 0.1); color: #10b981; } .status-rejected { background: rgba(244, 63, 94, 0.1); color: #f43f5e; } .status-checked_in { background: #6366f1; color: white; } /* QR Code Section */ #qrcode { background: white; padding: 1rem; border-radius: 12px; display: inline-block; margin-top: 1rem; } .qr-container { text-align: center; margin-top: 2rem; } /* Mobile adjustments */ @keyframes slideUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #sender-float-bar { display: none; position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1e1e1e, #111); border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 24px; padding: 0.8rem 1.5rem; z-index: 10000; box-shadow: 0 10px 50px rgba(0,0,0,0.8); align-items: center; gap: 1.5rem; backdrop-filter: blur(15px); width: auto; max-width: 95vw; animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Invite page ─────────────────────────────────────────────────── */ .invite-content { text-align: center; padding: 3rem 1rem; } .actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; } #success-section { display: none; animation: inviteFadeIn 0.5s ease; } @keyframes inviteFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .envelope-wrapper { perspective: 1200px; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 0; } .envelope-card { transform-origin: center center; animation: cardOpen 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; } @keyframes cardOpen { 0% { opacity: 0; transform: scale(0.3) rotateY(90deg); } 40% { opacity: 1; transform: scale(1.05) rotateY(-5deg); } 70% { transform: scale(0.97) rotateY(2deg); } 100% { opacity: 1; transform: scale(1) rotateY(0deg); } } .countdown-container { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; } .countdown-box { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(79, 172, 254, 0.25); border-radius: 12px; padding: 0.8rem 1rem; min-width: 70px; text-align: center; } .countdown-box .num { font-size: 1.8rem; font-weight: 800; color: #4facfe; background: linear-gradient(135deg, #4facfe, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; text-shadow: none; } @supports not (-webkit-background-clip: text) { .countdown-box .num { color: #4facfe; -webkit-text-fill-color: #4facfe; } } .countdown-box .label { font-size: 0.65rem; color: #94a3b8; margin-top: 0.3rem; font-weight: 600; } /* ── Dashboard feature cards ─────────────────────────────────────── */ .feat-card { transition: all .2s; cursor: pointer; } .feat-card:hover { transform: translateY(-2px); filter: brightness(1.2); } .feat-off:hover { border-color: rgba(255,255,255,.18) !important; color: #94a3b8 !important; } label:has(input[type=checkbox]:checked) .feat-card { box-shadow: 0 4px 16px rgba(0,0,0,.3); } /* ── Utility Classes ─────────────────────────────────────────────── */ .hidden-mobile { display: inline-flex; } @media (max-width: 768px) { .hidden-mobile { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ DESIGN SYSTEM ADDITIONS — added during UI/design audit May 2026 ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } html { overflow-x: hidden; max-width: 100%; } :root { --surface: #1e293b; } body.light-theme { --surface: #ffffff; --card-bg: rgba(255,255,255,0.85); } body.light-theme { background-image: radial-gradient(at 0% 0%, hsla(210,40%,98%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(210,40%,90%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(210,40%,95%,1) 0, transparent 50%); } html.light-theme-pre { background-color: #f1f5f9; } html.light-theme-pre body { background-color: #f1f5f9; background-image: none; } body.light-theme .main-nav, html.light-theme-pre body .main-nav { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } body.light-theme .glass-card { box-shadow: 0 2px 12px rgba(0,0,0,0.08); } body.light-theme .subtab-bar { border-bottom-color: rgba(0,0,0,0.1); } body.light-theme select { background: rgba(255,255,255,0.9) !important; color: var(--text) !important; border: 1px solid rgba(0,0,0,0.15) !important; } body.light-theme textarea { background: rgba(255,255,255,0.85) !important; color: var(--text) !important; border: 1px solid rgba(0,0,0,0.12) !important; } body.light-theme .btn { color: var(--text) !important; } body.light-theme .btn-primary { color: #0f172a !important; } body.light-theme .btn-primary:hover { color: #0f172a !important; } body.light-theme .btn-outline { border-color: rgba(0,0,0,0.18) !important; color: var(--text) !important; background: rgba(255,255,255,0.75); } body.light-theme .btn-outline:hover { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.28) !important; color: var(--text) !important; } body.light-theme .btn-danger { color: #dc2626 !important; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.22) !important; } body.light-theme .btn-danger:hover { background: rgba(239,68,68,0.15); color: #b91c1c !important; } body.light-theme .btn-sm { color: var(--text) !important; } body.light-theme .flash-error { color: #b91c1c !important; background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.25) !important; } body.light-theme .flash-warning { color: #92400e !important; background: rgba(245,158,11,0.1) !important; border-color: rgba(245,158,11,0.3) !important; } body.light-theme .scan-log-item { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.07) !important; } body.light-theme .prov-log-card { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; } body.light-theme #sender-float-bar { background: linear-gradient(135deg,#ffffff,#f1f5f9) !important; border-color: rgba(16,185,129,0.4) !important; } body.light-theme .stg-sel, body.light-theme .toggle-wrap { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.1) !important; color: var(--text) !important; } body.light-theme #scan-search { background: rgba(0,0,0,0.04) !important; color: var(--text) !important; border-color: rgba(0,0,0,0.12) !important; } body.light-theme #dd-search { background: rgba(0,0,0,0.04) !important; color: var(--text) !important; border-color: rgba(0,0,0,0.12) !important; } body.light-theme .stg-box { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); } body.light-theme .recep-pill--open { color: #059669; background: rgba(16,185,129,0.08); } body.light-theme .recep-pill--closed { color: #475569; } body.light-theme .text-green { color: #059669; } body.light-theme .text-purple { color: #4f46e5; } body.light-theme .text-amber { color: #b45309; } body.light-theme .text-danger { color: #dc2626; } body.light-theme .event-banner--expired .event-banner-name { color: #dc2626; } body.light-theme .recep-shortcut-sub--open { color: #059669; } @media (max-width: 680px) { .main-header { margin: 0.4rem; width: calc(100% - 0.8rem); border-radius: 14px; } .header-content { flex-wrap: wrap; padding: 0.4rem 0.75rem 0; gap: 0.25rem; flex-direction: row; } .brand-section { flex: 0 0 auto; gap: 0.5rem; justify-content: flex-start; width: auto; } .brand-info { display: none; } .header-logo { width: 32px; height: 32px; } .user-action-area { flex: 1; gap: 0.5rem; justify-content: flex-end; width: auto; } .user-greeting { display: none; } .user-name { font-size: 0.72rem; } .user-badge { font-size: 0.52rem; padding: 0.1rem 0.3rem; } .logout-btn, #theme-toggle { width: 30px; height: 30px; border-radius: 8px; } .main-nav { order: 10; width: 100%; justify-content: flex-start; flex-direction: row; padding: 0.3rem 0.5rem; gap: 0.1rem; border-top: 1px solid var(--glass-border); border-radius: 0 0 14px 14px; background: transparent; margin: 0.25rem 0 0; overflow-x: auto; scrollbar-width: none; } .main-nav::-webkit-scrollbar { display: none; } .nav-pill { padding: 0.45rem 0.6rem; font-size: 0.72rem; border-radius: 8px; flex-shrink: 0; } .nav-pill span { display: inline; font-size: 0.68rem; } .container { padding: 0 0.5rem 1.5rem; } } .btn { font-family: Cairo,sans-serif; letter-spacing: 0.01em; white-space: nowrap; color: var(--text) !important; text-decoration: none !important; } .btn:visited { color: var(--text) !important; } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn-primary { color: #0f172a !important; box-shadow: 0 2px 10px rgba(0,242,254,0.2); } .btn-primary:visited { color: #0f172a !important; } .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,242,254,0.4); filter: brightness(1.05); color: #0f172a !important; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-outline:hover:not(:disabled) { transform: translateY(-1px); } .btn-outline:disabled { opacity: 0.45; cursor: not-allowed; } .btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; border-radius: 10px; } .btn-danger { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #f87171 !important; } .btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); color: #fca5a5 !important; transform: translateY(-1px); } input { font-family: Cairo,sans-serif; font-size: 0.85rem; color: var(--text); } input[type="hidden"] { width: auto !important; display: none !important; } .modal-overlay { display: none; position: fixed !important; inset: 0; background: rgba(0,0,0,0.85); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .modal-panel { background: var(--surface); border: 1.5px solid var(--glass-border); border-radius: 16px; padding: 0; box-shadow: 0 25px 60px rgba(0,0,0,0.5); } .modal-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem 0.6rem; border-bottom: 1px solid var(--glass-border); color: var(--text); } .modal-close-btn { background: var(--card-bg); border: 1px solid var(--glass-border); color: var(--text-muted); border-radius: 8px; width: 30px; height: 30px; font-size: 1rem; cursor: pointer; font-family: Cairo,sans-serif; display: flex; align-items: center; justify-content: center; } .modal-actions { display: flex; gap: 0.75rem; } .modal-panel-sm { width: 100%; max-width: 380px; } .modal-panel-md { width: 100%; max-width: 520px; } .modal-panel-flex { display: flex; flex-direction: column; max-height: 80vh; } .modal-panel-body { padding: 0.6rem 1.25rem; } .modal-panel-scroll { overflow-y: auto; flex: 1; padding: 0 1.25rem 1rem; } .modal-panel-centered { text-align: center; padding: 1.5rem; } .flash-success { margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: 10px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #10b981; font-size: 0.82rem; } .flash-error { margin-bottom: 1rem; padding: 1rem; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.3); border-radius: 12px; color: #fca5a5; font-size: 0.85rem; } .flash-warning { margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: 10px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); color: #d97706; font-size: 0.82rem; } .dash-stats-row { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: nowrap; } .dash-charts-row { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .dash-stat-card { flex: 1 1 150px; min-width: 0; text-align: center; padding: 1rem; } .dash-stat-card-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; } .dash-stat-card-value { font-size: 1.5rem; font-weight: 800; } .dash-stat-card-sub { font-size: 0.7rem; opacity: 0.8; } @media (max-width: 700px) { .dash-stats-row { flex-wrap: wrap; } .dash-stat-card { flex: 1 1 calc(50% - 0.5rem); } } @media (max-width: 600px) { .dash-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.8rem !important; } } .border-l-primary { border-left: 4px solid var(--primary); } .border-l-green { border-left: 4px solid #10b981; } .border-l-purple { border-left: 4px solid #6366f1; } .border-l-amber { border-left: 4px solid #f59e0b; } .border-l-danger { border-left: 4px solid #ef4444; } .chart-wrap { position: relative; width: 100%; } .chart-wrap-220 { position: relative; width: 100%; height: 220px; } .chart-wrap-250 { position: relative; width: 100%; height: 250px; } .user-badge-col { display: flex; flex-direction: column; align-items: flex-end; } .badge-superadmin { background: rgba(0,242,254,0.1); color: var(--primary); border: 1px solid rgba(0,242,254,0.3); } .badge-admin { background: rgba(79,172,254,0.1); color: var(--secondary); border: 1px solid rgba(79,172,254,0.3); } .logout-form { margin: 0; display: inline-flex; align-items: center; flex-shrink: 0; } .logout-btn-reset { background: none; cursor: pointer; } .header-icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; } .header-icon-btn-scan { color: #818cf8; border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.05); } .nav-pill-exit { border: 1px solid rgba(239,68,68,0.3); color: #f87171 !important; } .nav-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .event-banner { text-align: center; margin-bottom: 1.2rem; padding: 0.8rem 1rem; border-radius: 12px; background: linear-gradient(135deg,rgba(99,102,241,0.08) 0%,rgba(16,185,129,0.08) 100%); border: 1px solid rgba(99,102,241,0.12); } .event-banner--expired { background: linear-gradient(135deg,rgba(239,68,68,0.1) 0%,rgba(220,38,38,0.08) 100%); border-color: rgba(239,68,68,0.3); } .event-banner-name { font-size: 1.3rem; font-weight: 800; font-family: Cairo,sans-serif; color: var(--text); } .event-banner--expired .event-banner-name { color: #ef4444; } .event-banner-date { font-size: 0.68rem; margin-top: 0.25rem; direction: ltr; color: var(--text-muted); } .recep-shortcut-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.5rem; cursor: pointer; transition: border-color 0.2s; text-decoration: none; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } .recep-shortcut-card--open { border-color: rgba(16,185,129,0.35); background: linear-gradient(135deg,rgba(16,185,129,0.07) 0%,rgba(99,102,241,0.07) 100%); } .recep-shortcut-card:hover { border-color: rgba(255,255,255,0.18); } .recep-shortcut-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,0.06); } .recep-shortcut-icon--open { background: rgba(16,185,129,0.15); } .recep-shortcut-title { font-size: 0.88rem; font-weight: 700; color: var(--text); } .recep-shortcut-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; } .recep-shortcut-sub--open { color: #10b981; font-weight: 600; } .recep-live-dot { display: inline-block; width: 6px; height: 6px; background: #10b981; border-radius: 50%; margin-left: 4px; vertical-align: middle; animation: pulse-d 2s infinite; } .recep-stat-card { text-align: center; padding: 1rem 0.75rem; border-radius: 12px; cursor: pointer; transition: border-color 0.15s; } .recep-stat-card--indigo { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); } .recep-stat-card--amber { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); } .recep-stat-card--red { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); } .recep-stat-card--neutral { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .recep-stat-card--indigo:hover { border-color: rgba(99,102,241,0.6); } .recep-stat-card--amber:hover { border-color: rgba(245,158,11,0.6); } .recep-stat-card--red:hover { border-color: rgba(239,68,68,0.6); } .recep-stat-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .recep-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 20px; } .recep-pill--open { color: #10b981; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); } .recep-pill--closed { color: #64748b; background: rgba(100,116,139,0.08); border: 1px solid rgba(100,116,139,0.2); } .recep-pill-dot { width: 7px; height: 7px; background: #10b981; border-radius: 50%; animation: pulse-dot 2s infinite; } .scan-row-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.4rem; } .scan-row-item + .scan-row-item { border-top: 1px solid rgba(255,255,255,0.04); } .scan-row-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(99,102,241,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .scan-row-count-badge { background: rgba(99,102,241,0.15); color: #6366f1; font-weight: 800; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 6px; } .scan-row-time { font-size: 0.58rem; color: var(--text-muted); flex-shrink: 0; min-width: 50px; direction: ltr; } .scan-count-badge-sm { font-size: 0.6rem; background: rgba(99,102,241,0.15); color: #6366f1; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700; } .dd-guest-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); } body.light-theme .dd-guest-row { border-bottom-color: rgba(0,0,0,0.06); } .dd-count-badge { font-size: 0.65rem; background: rgba(99,102,241,0.12); color: #6366f1; padding: 0.15rem 0.45rem; border-radius: 6px; white-space: nowrap; } .dd-partial-badge { font-size: 0.6rem; background: rgba(245,158,11,0.15); color: #f59e0b; padding: 0.1rem 0.35rem; border-radius: 4px; margin-right: 4px; white-space: nowrap; } .dd-wa-link { display: inline-flex; align-items: center; gap: 3px; font-size: 0.62rem; color: #25d366; text-decoration: none; padding: 0.15rem 0.4rem; border: 1px solid rgba(37,211,102,0.3); border-radius: 5px; white-space: nowrap; } .dd-wa-link:hover { background: rgba(37,211,102,0.08); } .dd-title { font-size: 0.95rem; font-weight: 800; } .dd-subtitle { font-size: 0.65rem; color: var(--text-muted); margin-top: 1px; } .stg-box { background: rgba(255,255,255,0.02); padding: 1.5rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); } .stg-box--accent { background: rgba(79,172,254,0.05); border-color: rgba(79,172,254,0.2); } .stg-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.4rem; } select.stg-sel { width: 100%; padding: 0.4rem; font-size: 0.75rem; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; } .toggle-wrap { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); padding: 0.8rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); } .toggle-track { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; padding: 10px 0; box-sizing: content-box; cursor: pointer; } .toggle-track input { opacity: 0; width: 0; height: 0; margin: 0; position: absolute; } .toggle-track:focus-within .toggle-slider { outline: 2px solid var(--primary); outline-offset: 2px; } .auth-card { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 32px; padding: 2.5rem 1.75rem; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,0.6); } .btn-login { width: 100%; padding: 0.75rem; border-radius: 10px; border: none; font-weight: 800; cursor: pointer; background: linear-gradient(to right, var(--primary), var(--secondary)); color: #000; margin-top: 1rem; font-family: Cairo,sans-serif; font-size: 0.9rem; } .btn-login:disabled { opacity: 0.6; cursor: not-allowed; } .btn-login:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .text-green { color: #10b981; } .text-purple { color: #6366f1; } .text-amber { color: #f59e0b; } .text-danger { color: #ef4444; } .text-wa { color: #25d366; } .bg-success-subtle { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); } .bg-danger-subtle { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); } .bg-amber-subtle { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); } .bg-purple-subtle { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); } .bg-surface-subtle { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } body.light-theme .bg-success-subtle { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); } body.light-theme .bg-danger-subtle { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.15); } body.light-theme .bg-purple-subtle { background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.15); } .stat-val-xl { font-size: 2rem; font-weight: 800; line-height: 1; } .stat-val-lg { font-size: 1.5rem; font-weight: 800; } .stat-lbl-xs { font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; } .stat-sub-xs { font-size: 0.6rem; margin-top: 2px; } .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-block { display: block; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } .align-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-xs { gap: 4px; } .gap-sm { gap: 0.5rem; } .gap-md { gap: 1rem; } .gap-lg { gap: 1.5rem; } .min-w-0 { min-width: 0; } .nowrap { white-space: nowrap; } .text-center { text-align: center; } .text-xs { font-size: 0.85rem; } .text-sm { font-size: 0.82rem; } .text-xxs { font-size: 0.65rem; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary); } .font-bold { font-weight: 700; } .font-800 { font-weight: 800; } .m-0 { margin: 0; } .mb-sm { margin-bottom: 0.5rem; } .mb-md { margin-bottom: 1rem; } .mb-lg { margin-bottom: 1.5rem; } .mb-xl { margin-bottom: 2rem; } .mt-sm { margin-top: 0.5rem; } .mt-md { margin-top: 1rem; } .mt-lg { margin-top: 1.5rem; } .auto-fit-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 0.7rem; } .section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .fade-in { animation: fadeIn 0.5s ease; } .prov-log-list { display: flex; flex-direction: column; gap: 0.8rem; } .prov-log-card { background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 1rem; } .subtab-bar { display: flex; gap: 0.3rem; padding: 0.35rem; background: rgba(255,255,255,0.03); border-radius: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 1.5rem; } .subtab { padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer; color: var(--text-muted); background: none; border: none; font-family: Cairo,sans-serif; } .subtab.active { background: linear-gradient(135deg,var(--primary),var(--secondary)); color: #000; } .status-full-label { font-size: .7rem; color: #ef4444; } .status-partial-label { font-size: .7rem; color: #f59e0b; } .count-pick-btn { min-width: 64px; min-height: 64px; border-radius: 14px; font-size: 1.6rem; font-weight: 800; cursor: pointer; border: 2px solid rgba(79,172,254,0.35); background: rgba(79,172,254,0.08); color: var(--primary); font-family: Cairo,sans-serif; } .count-pick-btn--max { background: var(--primary); border-color: var(--primary); color: #0f172a; } @keyframes pulse-d { 0%,100%{opacity:1} 50%{opacity:.3} } @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} } /* ── Audit log filter bar ─────────────────────────────────────────── */ .audit-filter-bar { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; } .audit-filter-row { display: flex; gap: 0.5rem; align-items: center; } .audit-filter-dates { display: flex; gap: 0.5rem; } @media (max-width: 600px) { .audit-filter-dates { flex-direction: column; } } /* ── Platform stats bar (customers page) ─────────────────────────── */ .stats-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; align-items: stretch; } .stat-item { flex: 1 1 80px; min-width: 70px; border-radius: 14px; padding: 0.7rem 0.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; } .stat-item-value { font-size: 1.3rem; font-weight: 800; line-height: 1; } .stat-item-label { font-size: 0.6rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; } body.light-theme .stat-item { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.12) !important; } @media (max-width: 600px) { .stat-item { flex: 1 1 calc(33% - 0.5rem); min-width: 60px; padding: 0.5rem 0.3rem; } .stat-item-value { font-size: 1.1rem; } } /* ── Footer ───────────────────────────────────────────────────────── */ .main-footer { text-align: center; padding: 2rem 1rem; margin-top: 2rem; border-top: 1px solid var(--glass-border); color: var(--text-muted); font-size: 0.72rem; line-height: 1.8; } .main-footer a { color: var(--primary); text-decoration: none; transition: opacity 0.2s; } .main-footer a:hover { opacity: 0.75; } body.light-theme .main-footer { border-top-color: rgba(0,0,0,0.08); } /* ── Toast notifications ──────────────────────────────────────────── */ .toast-container { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; width: max-content; max-width: 90vw; }