/* ============================================================ AffiliateTracker — Glass Theme (premium glassmorphism) Activated by [data-theme="glass"] on . Loaded after app.css and dark-theme.css so these declarations win the cascade. Light and Dark themes are untouched here. Design language: - A slow-drifting multi-blob background mesh feeds colour to every frosted panel. - Two surface tiers: foreground panels (cards, modals) sit on stronger blur; sub-surfaces (chips, inputs) on lighter blur to imply depth. - Every floating element gets: outer drop shadow → realistic depth 1px inner stroke → "light reflection" rim top edge highlight → glass refraction cue - Hover lifts cards ~2px with brighter rim. Pure CSS, no JS. ============================================================ */ html[data-theme="glass"] { --primary: #6366F1; --primary-dark: #4F46E5; --primary-light: rgba(99,102,241,.16); --secondary: #10B981; --warning: #F59E0B; --danger: #EF4444; --info: #3B82F6; --bg: transparent; --sidebar-bg: rgba(255,255,255,.50); --card-bg: rgba(255,255,255,.55); --border: rgba(255,255,255,.70); --text: #0F172A; --text-muted: #475569; --text-light: #64748B; /* Multi-layer drop shadow → realistic depth */ --shadow: 0 1px 1px rgba(31,38,135,.04), 0 4px 12px rgba(31,38,135,.08); --shadow-md: 0 2px 4px rgba(31,38,135,.06), 0 10px 30px rgba(31,38,135,.14), 0 24px 48px -16px rgba(31,38,135,.10); /* "Light reflection" rim — used as an inset shadow on panels */ --glass-rim: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.20); color-scheme: light; } /* ── Animated body backdrop ─────────────────────────────── Slowly drifting mesh gradient. The drift keeps the glass refraction visually alive without being distracting and is GPU-cheap (background-position only, no repaint). */ html[data-theme="glass"] body { background: radial-gradient(circle at 10% 15%, rgba(168, 213, 255, .55), transparent 45%), radial-gradient(circle at 88% 8%, rgba(255, 200, 235, .55), transparent 45%), radial-gradient(circle at 70% 75%, rgba(186, 230, 253, .50), transparent 50%), radial-gradient(circle at 20% 92%, rgba(196, 181, 253, .50), transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 237, 213, .35), transparent 60%), linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 45%, #ECFEFF 100%); background-attachment: fixed; background-size: 200% 200%; color: var(--text); min-height: 100vh; animation: glassDrift 30s ease-in-out infinite; } @keyframes glassDrift { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } @media (prefers-reduced-motion: reduce) { html[data-theme="glass"] body { animation: none; } } /* Smooth transitions on chrome (kept lean so tables don't lag) */ html[data-theme="glass"] .sidebar, html[data-theme="glass"] .topbar, html[data-theme="glass"] .card, html[data-theme="glass"] .stat-card, html[data-theme="glass"] .btn, html[data-theme="glass"] .nav-link { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .2s ease; } /* ── Foreground glass surfaces ──────────────────────────── */ html[data-theme="glass"] .sidebar, html[data-theme="glass"] .topbar, html[data-theme="glass"] .card, html[data-theme="glass"] .stat-card, html[data-theme="glass"] .panel, html[data-theme="glass"] .box, html[data-theme="glass"] .widget, html[data-theme="glass"] .dropdown-menu, html[data-theme="glass"] .menu-dropdown, html[data-theme="glass"] .dd-menu, html[data-theme="glass"] .modal-content, html[data-theme="glass"] .modal-dialog { background: rgba(255,255,255,.55) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.65) !important; box-shadow: var(--shadow-md), var(--glass-rim); border-radius: 16px; } /* Floating-card hover micro-interaction */ html[data-theme="glass"] .card:hover, html[data-theme="glass"] .stat-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.85) !important; box-shadow: 0 4px 8px rgba(31,38,135,.10), 0 18px 40px rgba(31,38,135,.18), 0 32px 60px -16px rgba(31,38,135,.12), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.25); } @media (prefers-reduced-motion: reduce) { html[data-theme="glass"] .card:hover, html[data-theme="glass"] .stat-card:hover { transform: none; } } /* No backdrop-filter? Solid fallback so layout still reads well. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-theme="glass"] .sidebar, html[data-theme="glass"] .topbar, html[data-theme="glass"] .card, html[data-theme="glass"] .stat-card, html[data-theme="glass"] .dropdown-menu, html[data-theme="glass"] .modal-content { background: rgba(255,255,255,.90) !important; } } /* ── Sidebar / nav ─────────────────────────────────────── */ html[data-theme="glass"] .sidebar { border-radius: 0 24px 24px 0; border-left: none !important; border-top: none !important; border-bottom: none !important; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.48)) !important; } html[data-theme="glass"] .sidebar-section { color: var(--text-light); letter-spacing:.08em; } html[data-theme="glass"] .nav-link { color: #1E293B; border-radius: 12px; position: relative; } html[data-theme="glass"] .nav-link:hover { background: rgba(99,102,241,.14); color: #3730A3; transform: translateX(2px); } html[data-theme="glass"] .nav-link.active { background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(99,102,241,.10)); color: #3730A3; box-shadow: inset 0 0 0 1px rgba(99,102,241,.35), inset 2px 0 0 0 #6366F1, 0 4px 12px -4px rgba(99,102,241,.30); } /* ── Topbar ───────────────────────────────────────────── */ html[data-theme="glass"] .topbar { border-radius: 0; border-left: none !important; border-right: none !important; border-top: none !important; background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45)) !important; } html[data-theme="glass"] .topbar-title { color: var(--text); font-weight: 700; letter-spacing:-.01em; } html[data-theme="glass"] .user-menu { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.70); color: var(--text); border-radius: 12px; } html[data-theme="glass"] .user-menu:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(99,102,241,.18); } html[data-theme="glass"] .notification-btn { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text-muted); border: 1px solid rgba(255,255,255,.65); border-radius: 10px; } html[data-theme="glass"] .notification-btn:hover { background: rgba(99,102,241,.12); color: var(--primary); border-color: rgba(99,102,241,.45); box-shadow: 0 4px 14px rgba(99,102,241,.20); } html[data-theme="glass"] .dropdown-item { color: var(--text); } html[data-theme="glass"] .dropdown-item:hover { background: rgba(99,102,241,.12); } html[data-theme="glass"] .dropdown-divider { background: rgba(255,255,255,.50); border-color: rgba(255,255,255,.50); } /* ── Card content ─────────────────────────────────────── */ html[data-theme="glass"] .card-header, html[data-theme="glass"] .card-title { color: var(--text); border-color: rgba(255,255,255,.50); } html[data-theme="glass"] .stat-label { color: var(--text-muted); } html[data-theme="glass"] .stat-value { color: var(--text); } html[data-theme="glass"] .stat-sub, html[data-theme="glass"] .text-muted, html[data-theme="glass"] .text-sm.text-muted { color: var(--text-muted) !important; } html[data-theme="glass"] .stat-icon.blue { background: rgba(59,130,246,.18); color: #1D4ED8; } html[data-theme="glass"] .stat-icon.green { background: rgba(16,185,129,.18); color: #047857; } html[data-theme="glass"] .stat-icon.orange { background: rgba(234,88,12,.18); color: #9A3412; } html[data-theme="glass"] .stat-icon.purple { background: rgba(124,58,237,.18); color: #5B21B6; } html[data-theme="glass"] .stat-icon.red { background: rgba(220,38,38,.18); color: #991B1B; } html[data-theme="glass"] .stat-icon.teal { background: rgba(15,118,110,.18); color: #134E4A; } /* ── Tables — semi-transparent rows so mesh peeks through ── */ html[data-theme="glass"] table { color: var(--text); border-radius: 12px; overflow: hidden; } html[data-theme="glass"] thead th, html[data-theme="glass"] table thead th { background: rgba(255,255,255,.62) !important; color: #1E293B !important; border-color: rgba(255,255,255,.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-transform: uppercase; font-size: 11.5px; letter-spacing: .03em; } html[data-theme="glass"] tbody tr:nth-child(odd) td { background: rgba(255,255,255,.40) !important; } html[data-theme="glass"] tbody tr:nth-child(even) td { background: rgba(255,255,255,.28) !important; } html[data-theme="glass"] tbody tr:hover td { background: rgba(99,102,241,.14) !important; } html[data-theme="glass"] td, html[data-theme="glass"] th { border-color: rgba(255,255,255,.45) !important; } html[data-theme="glass"] .tbl-secondary { color: var(--text-muted); } html[data-theme="glass"] .tbl-code { background: rgba(99,102,241,.16); color: #3730A3; border-color: rgba(99,102,241,.30); } /* ── DataTables shell ────────────────────────────────── */ /* The top toolbar (length + search) and bottom bar (info + paginate) carry their own background in app.css — re-tint them to frosted glass so neither edge leaks opaque white when glass mode is active. */ html[data-theme="glass"] .dataTables_wrapper { background: transparent !important; } html[data-theme="glass"] .dataTables_wrapper .dataTables_length, html[data-theme="glass"] .dataTables_wrapper .dataTables_filter, html[data-theme="glass"] .dataTables_wrapper .dataTables_info, html[data-theme="glass"] .dataTables_wrapper .dataTables_paginate { background: rgba(255,255,255,.45) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-color: rgba(255,255,255,.50) !important; color: var(--text-muted) !important; } html[data-theme="glass"] .dataTables_wrapper .dataTables_length label, html[data-theme="glass"] .dataTables_wrapper .dataTables_filter label { color: var(--text-muted) !important; } html[data-theme="glass"] .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--text-light) !important; } html[data-theme="glass"] .dataTables_wrapper .dataTables_length select, html[data-theme="glass"] .dataTables_wrapper .dataTables_filter input { background-color: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text) !important; border: 1px solid rgba(255,255,255,.65) !important; border-radius: 10px !important; background-image: none !important; } html[data-theme="glass"] .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.20); } html[data-theme="glass"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-muted) !important; background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.65) !important; border-radius: 10px !important; margin: 0 2px !important; } html[data-theme="glass"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="glass"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; box-shadow: 0 6px 14px rgba(99,102,241,.30); } /* ── Forms ───────────────────────────────────────────── */ html[data-theme="glass"] input[type="text"], html[data-theme="glass"] input[type="email"], html[data-theme="glass"] input[type="password"], html[data-theme="glass"] input[type="number"], html[data-theme="glass"] input[type="search"], html[data-theme="glass"] input[type="url"], html[data-theme="glass"] input[type="tel"], html[data-theme="glass"] input[type="date"], html[data-theme="glass"] input[type="datetime-local"], html[data-theme="glass"] input[type="time"], html[data-theme="glass"] textarea, html[data-theme="glass"] select, html[data-theme="glass"] .form-control { background-color: rgba(255,255,255,.62) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text) !important; border: 1px solid rgba(255,255,255,.70) !important; border-radius: 10px; } html[data-theme="glass"] input::placeholder, html[data-theme="glass"] textarea::placeholder { color: var(--text-light); } html[data-theme="glass"] input:focus, html[data-theme="glass"] textarea:focus, html[data-theme="glass"] select:focus, html[data-theme="glass"] .form-control:focus { background-color: rgba(255,255,255,.85) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.20); } html[data-theme="glass"] label, html[data-theme="glass"] .form-label, html[data-theme="glass"] .form-group > label { color: var(--text-muted); } /* ── Buttons ──────────────────────────────────────────── */ html[data-theme="glass"] .btn-primary { background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%); border: 1px solid rgba(99,102,241,.55); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.30), inset 0 1px 0 rgba(255,255,255,.20); } html[data-theme="glass"] .btn-primary:hover { background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%); box-shadow: 0 8px 22px rgba(99,102,241,.40), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(-1px); } html[data-theme="glass"] .btn-primary:active { transform: translateY(0); } html[data-theme="glass"] .btn-secondary { background: rgba(255,255,255,.65); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); border: 1px solid rgba(255,255,255,.75); border-radius: 10px; } html[data-theme="glass"] .btn-secondary:hover { background: rgba(255,255,255,.85); border-color: rgba(99,102,241,.40); box-shadow: 0 4px 12px rgba(99,102,241,.12); } html[data-theme="glass"] .btn-outline, html[data-theme="glass"] .btn-outline-primary { color: var(--primary); border-color: rgba(99,102,241,.55); background: rgba(255,255,255,.40); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html[data-theme="glass"] .btn-outline:hover { background: rgba(99,102,241,.10); } html[data-theme="glass"] .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } html[data-theme="glass"] .badge-muted { background: rgba(255,255,255,.55); color: var(--text-muted); } /* ── Alerts (frosted, tinted) ─────────────────────────── */ html[data-theme="glass"] .alert-info { background: rgba(59,130,246,.18); color: #1E3A8A; border: 1px solid rgba(59,130,246,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html[data-theme="glass"] .alert-success { background: rgba(16,185,129,.18); color: #064E3B; border: 1px solid rgba(16,185,129,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html[data-theme="glass"] .alert-warning { background: rgba(245,158,11,.18); color: #78350F; border: 1px solid rgba(245,158,11,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html[data-theme="glass"] .alert-error, html[data-theme="glass"] .alert-danger { background: rgba(239,68,68,.18); color: #7F1D1D; border: 1px solid rgba(239,68,68,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ── Modals ─────────────────────────────────────────── */ html[data-theme="glass"] .modal-header, html[data-theme="glass"] .modal-footer { border-color: rgba(255,255,255,.50); } html[data-theme="glass"] .modal-backdrop { background: rgba(15,23,42,.30); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ── Misc ───────────────────────────────────────────── */ html[data-theme="glass"] hr, html[data-theme="glass"] .divider { border-color: rgba(255,255,255,.50); background: rgba(255,255,255,.50); } html[data-theme="glass"] code, html[data-theme="glass"] pre { background: rgba(255,255,255,.58); color: #1E293B; border: 1px solid rgba(255,255,255,.60); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 8px; } html[data-theme="glass"] h1, html[data-theme="glass"] h2, html[data-theme="glass"] h3, html[data-theme="glass"] h4, html[data-theme="glass"] h5, html[data-theme="glass"] h6 { color: var(--text); } /* Scrollbar polish — semi-transparent so the gradient still reads */ html[data-theme="glass"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="glass"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme="glass"] ::-webkit-scrollbar-thumb { background: rgba(99,102,241,.30); border-radius: 6px; } html[data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.50); } /* ── Theme picker ──────────────────────────────────── */ html[data-theme="glass"] .theme-toggle { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.75); color: var(--text-muted); box-shadow: 0 2px 8px rgba(31,38,135,.08); } html[data-theme="glass"] .theme-toggle:hover { background: rgba(255,255,255,.85); color: var(--primary); border-color: var(--primary); box-shadow: 0 4px 14px rgba(99,102,241,.22); } /* ── Mobile — reduce blur cost on small screens ──── */ @media (max-width: 640px) { html[data-theme="glass"] .sidebar, html[data-theme="glass"] .topbar, html[data-theme="glass"] .card, html[data-theme="glass"] .stat-card, html[data-theme="glass"] .dropdown-menu, html[data-theme="glass"] .modal-content { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); background: rgba(255,255,255,.78) !important; } html[data-theme="glass"] body { animation: none; } } /* =========================================================== ── Full-coverage catch-all (Glass Mode enforcement) ── Page-level