/* Sat Vision Admin — Modern UI - Fluid, responsive, dark-mode ready - Works with your existing markup - No build step required */ /* ---------- CSS Variables ---------- */ :root { --bg: #0b1220; --bg-soft: #0f172a; --panel: #111827; --muted: #94a3b8; --text: #e5e7eb; --text-strong: #f8fafc; --primary: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --border: #1f2937; --ring: rgba(59,130,246,0.5); --card-radius: 16px; --btn-radius: 12px; --shadow: 0 10px 30px rgba(0,0,0,0.35); --shadow-soft: 0 6px 20px rgba(0,0,0,0.25); } /* Light mode (optional toggle via .theme-light on ) */ .theme-light { --bg: #f8fafc; --bg-soft: #f1f5f9; --panel: #ffffff; --muted: #64748b; --text: #0f172a; --text-strong: #0b1220; --primary: #2563eb; --primary-600: #1d4ed8; --primary-700: #1e40af; --success: #059669; --warning: #d97706; --danger: #dc2626; --border: #e5e7eb; --ring: rgba(37,99,235,0.25); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font: 14px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 600px at 70% -10%, #172554 0%, transparent 60%), var(--bg); } /* ---------- Layout ---------- */ .container { width: min(1300px, 92vw); margin: 28px auto; } .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px auto 8px; width: min(1200px, 92vw); } .brand { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-soft); } .brand .logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #60a5fa); } .brand h1 { font-size: 16px; margin: 0; letter-spacing: 0.2px; color: var(--text-strong); } /* Top toolbar row */ .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 18px; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow); } /* ---------- Headings ---------- */ h2 { font-size: 22px; margin: 0 0 18px; letter-spacing: 0.2px; color: var(--text-strong); } /* ---------- Buttons ---------- */ .btn { --bgc: var(--panel); --fg: var(--text); display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--bgc); color: var(--fg); text-decoration: none; cursor: pointer; transition: transform .06s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .btn:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 6px 18px rgba(59,130,246,0.18); } .btn:active { transform: translateY(0); } .btn-primary { --bgc: linear-gradient(180deg, var(--primary), var(--primary-600)); border-color: transparent; color: #fff; } .btn-primary:hover { box-shadow: 0 12px 26px rgba(59,130,246,0.35); } .btn-danger { --bgc: linear-gradient(180deg, #ef4444, #dc2626); border-color: transparent; color: #fff; } .btn-success { --bgc: linear-gradient(180deg, #10b981, #059669); border-color: transparent; color: #fff; } .btn-ghost { --bgc: transparent; } .btn-sm { padding: 8px 10px; font-size: 13px; border-radius: 10px; } .btn-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; } /* ---------- Forms ---------- */ .input, .select { width: 100%; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: var(--text); outline: none; transition: box-shadow .2s ease, border-color .2s ease; } .input:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); } .form-row { display: flex; gap: 12px; flex-wrap: wrap; } .form-row > * { flex: 1; min-width: 200px; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: var(--panel); } .badge-success { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); color: #34d399; } .badge-danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35); color: #f87171; } .badge-muted { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.35); color: var(--muted); } /* ---------- Table ---------- */ .table-responsive { overflow: auto; border-radius: 14px; border: 1px solid var(--border); } table[role="grid"] { width: 100%; border-collapse: collapse; background: transparent; } table[role="grid"] thead th { position: sticky; top: 0; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); text-align: left; font-weight: 600; color: var(--muted); padding: 14px 14px; border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } table[role="grid"] td { padding: 14px; border-bottom: 1px solid var(--border); } table[role="grid"] tbody tr:hover { background: rgba(255,255,255,0.03); } table[role="grid"] tbody tr:last-child td { border-bottom: 0; } /* Action links inside tables */ .table-actions a { text-decoration: none; color: var(--primary); padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; } .table-actions a:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); } /* ---------- Cards / Panels ---------- */ .panel { padding: 18px; } .panel + .panel { margin-top: 16px; } .stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 960px) { .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } } .stat { padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); } .stat h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); } .stat .value { font-size: 22px; font-weight: 700; } /* ---------- Alerts ---------- */ .alert { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); } .alert-success { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.12); color: #34d399; } .alert-danger { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.12); color: #f87171; } /* ---------- Footer ---------- */ .footer { margin: 40px auto 24px; width: min(1200px, 92vw); color: var(--muted); font-size: 12px; text-align: center; } /* ---------- Dark mode toggle helper ---------- */ .theme-toggle { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 8px 12px; } /* Animated floating glow */ body::before { content: ""; position: fixed; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--primary) 0%, transparent 70%); top: -200px; left: -200px; opacity: 0.12; animation: floatGlow 14s ease-in-out infinite alternate; z-index: 0; } @keyframes floatGlow { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,60px) scale(1.15); } } /* ====================================================== 🌈 UNIVERSAL FORM & LINK STYLES (applies to all pages) ====================================================== */ /* ---------- Text Inputs, Textareas, and Selects ---------- */ input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=search], textarea, select { width: 100%; padding: 10px 12px; font-size: 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); } /* Disabled state */ input:disabled, button:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; } /* ---------- Buttons ---------- */ button, input[type=submit], input[type=button] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel), var(--bg-soft)); color: var(--text); cursor: pointer; transition: all 0.2s ease; } button:hover, input[type=submit]:hover, input[type=button]:hover { border-color: var(--primary); color: var(--text-strong); background: linear-gradient(180deg, var(--primary), var(--primary-600)); color: #fff; box-shadow: 0 6px 16px rgba(59,130,246,0.25); } button:active { transform: scale(0.98); } /* Primary variant */ button.primary, input[type=submit].primary { background: linear-gradient(180deg, var(--primary), var(--primary-700)); border: none; color: #fff; } button.primary:hover { box-shadow: 0 10px 24px rgba(59,130,246,0.35); } /* ---------- Links ---------- */ a { color: var(--primary); text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } a:hover { color: var(--primary-600); text-decoration: underline; } a:active { opacity: 0.8; } /* ---------- Tables clickable links ---------- */ .table-actions a { font-weight: 500; color: var(--primary); border: 1px solid transparent; padding: 6px 10px; border-radius: 8px; transition: all 0.15s ease; } .table-actions a:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); } /* ---------- Checkbox & Radio ---------- */ input[type=checkbox], input[type=radio] { accent-color: var(--primary); } /* ---------- Submit group spacing ---------- */ form button, form input[type=submit] { margin-top: 10px; } /* ================================ USERS PAGE & TABLE STYLING ================================ */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .table th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); padding: 10px 12px; } .table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; } .table-hover tbody tr:hover { background: rgba(59,130,246,0.05); } .badge { display: inline-block; padding: 3px 8px; border-radius: 6px; background: rgba(59,130,246,0.1); color: var(--primary); font-size: 13px; } .status { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 13px; font-weight: 500; } .status.active { background: rgba(34,197,94,0.1); color: #22c55e; } .status.inactive { background: rgba(239,68,68,0.1); color: #ef4444; } .x { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .btn-sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid var(--border); transition: all 0.2s ease; } .btn-sm:hover { border-color: var(--primary); color: var(--primary); } .btn-sm.secondary:hover { background: rgba(59,130,246,0.1); } .btn-sm.warning { color: #f59e0b; border-color: rgba(245,158,11,0.25); } .btn-sm.warning:hover { background: rgba(245,158,11,0.1); } .inline-form { display: inline-block; margin: 0; } .select-renew { border-radius: 8px; font-size: 13px; padding: 4px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--border); cursor: pointer; } .select-renew:hover { border-color: var(--primary); } /* Search input */ input[name="q"]{ width: 100%; max-width: 420px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); font-size: 14px; line-height: 1.2; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* Placeholder color */ input[name="q"]::placeholder{ color: var(--muted); } /* Hover */ input[name="q"]:hover{ border-color: rgba(59,130,246,.35); /* primary-ish */ } /* Focus ring */ input[name="q"]:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59,130,246,.15); } /* Disabled */ input[name="q"]:disabled{ opacity: .6; cursor: not-allowed; } /* Optional: put a search icon inside (wrap input in .search-wrap) */ .search-wrap{ position: relative; display: inline-block; width: 100%; max-width: 420px; } .search-wrap input[name="q"]{ padding-left: 40px; } .search-wrap .search-icon{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; opacity: .6; fill: currentColor; color: var(--muted); } .table{ margin-top: 2em; } /* ======== ADMIN RESPONSIVE NAV ======== */ .menu-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 36px; height: 32px; background: transparent; border: 1px solid var(--border, #374151); border-radius: 8px; cursor: pointer; transition: all .3s ease; } .menu-btn span { width: 20px; height: 2px; background: var(--text, #f9fafb); border-radius: 2px; transition: all .3s ease; } .menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-btn.active span:nth-child(2) { opacity: 0; } .menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Mobile Toolbar Dropdown */ @media (max-width: 768px) { .menu-btn { display: flex; } .toolbar { position: absolute; top: 58px; right: 10px; background: var(--card-bg, #1f2937); border: 1px solid var(--border, #374151); border-radius: 12px; flex-direction: column; align-items: flex-start; padding: 10px; gap: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: none; animation: fadeIn .25s ease; z-index: 999; } .toolbar.open { display: flex; } .toolbar a, .toolbar button { width: 100%; text-align: left; } .header { flex-wrap: wrap; justify-content: space-between; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* =========================== 📱 FULL RESPONSIVENESS FIX =========================== */ /* Large screens (≤1280px) */ @media (max-width: 1280px) { .container, .header { width: 95vw; } .stat-grid { grid-template-columns: repeat(3, 1fr); } } /* Tablets (≤1024px) */ @media (max-width: 1024px) { .toolbar { flex-wrap: wrap; } .brand h1 { font-size: 15px; } .container { margin: 20px auto; width: 94vw; } .stat-grid { grid-template-columns: repeat(2, 1fr); } table[role="grid"] th, table[role="grid"] td { padding: 10px; font-size: 13px; } } /* Mobile phones (≤768px) */ @media (max-width: 768px) { .menu-btn { display: flex; } .toolbar { position: absolute; top: 60px; right: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; flex-direction: column; align-items: flex-start; padding: 12px; gap: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: none; animation: fadeIn .25s ease; z-index: 999; } .toolbar.open { display: flex; } .toolbar a, .toolbar button { width: 100%; text-align: left; } .header { flex-wrap: wrap; justify-content: space-between; } .brand { width: 100%; justify-content: space-between; } .container { width: 94vw; margin: 16px auto; } .footer { font-size: 11px; } h2 { font-size: 18px; } } /* Small phones (≤480px) */ @media (max-width: 480px) { body { font-size: 13px; } .brand h1 { font-size: 14px; } .btn { padding: 8px 10px; font-size: 13px; } .stat-grid { grid-template-columns: 1fr; } .toolbar { right: 4px; top: 54px; } .table-actions { justify-content: flex-start; } .container { margin: 10px auto; width: 96vw; } } /* ============================================================= ✨ Super Duper Modern Additions (2025) - Fluid typography + spacing scale - Prefers-reduced-motion support - High-contrast mode support - Color-scheme hint for form controls - Container queries for cards/tables - Responsive sidebar + sticky header helpers - Utility classes (layout, spacing, flex, grid) - Skeleton loaders + toast notifications - Better scrollbar styling ============================================================= */ /* ---- Global capabilities ---- */ :root { /* Fluid type + scale */ --step--2: clamp(0.64rem, calc(0.61rem + 0.15vw), 0.80rem); --step--1: clamp(0.80rem, calc(0.74rem + 0.22vw), 0.95rem); --step-0: clamp(0.95rem, calc(0.86rem + 0.33vw), 1.10rem); --step-1: clamp(1.10rem, calc(1.00rem + 0.45vw), 1.30rem); --step-2: clamp(1.30rem, calc(1.16rem + 0.60vw), 1.60rem); --step-3: clamp(1.60rem, calc(1.36rem + 0.80vw), 2.00rem); --step-4: clamp(2.00rem, calc(1.60rem + 1.06vw), 2.50rem); --radius-lg: 18px; --radius-xl: 24px; --ring-strong: 0 0 0 5px rgba(59,130,246,.20); --elev-1: 0 8px 24px rgba(0,0,0,.25); --elev-2: 0 12px 36px rgba(0,0,0,.30); --glass: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } :root { color-scheme: dark light; } /* Smooth transitions but respect reduced motion */ @media (prefers-reduced-motion: no-preference) { * { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; } html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* High contrast (forced colors) */ @media (forced-colors: active) { :root { --border: GrayText; --ring: Highlight; } a, .btn, button { forced-color-adjust: auto; } } /* ---- Fluid type usage ---- */ h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } body, input, button, select, textarea { font-size: var(--step-0); } /* ---- Sticky header helper ---- */ .sticky-header { position: sticky; top: 0; z-index: 50; background: var(--bg, #0b1220); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border, #1f2937); } /* ---- Sidebar layout (optional) ---- */ .layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; } @media (max-width: 1024px) { .layout { grid-template-columns: 1fr; } .sidebar { order: 2; } } .sidebar { position: sticky; top: 86px; align-self: start; border: 1px solid var(--border); border-radius: var(--card-radius, 16px); background: var(--panel); box-shadow: var(--shadow-soft, 0 6px 20px rgba(0,0,0,.25)); padding: 14px; } /* ---- Container Queries (progressive enhancement) ---- */ @container (min-width: 700px) { .stat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @container (min-width: 980px) { .stat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } /* Enable container query for main container if browser supports it */ @supports (container-type: inline-size) { .container { container-type: inline-size; } } /* ---- Scrollbar styling ---- */ * { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.4) transparent; } *::-webkit-scrollbar { height: 10px; width: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 12px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.55); } /* ---- Skeleton loaders ---- */ .skeleton { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02), rgba(255,255,255,.06)); border-radius: 12px; min-height: 12px; } .skeleton::after { content: \"\"; position: absolute; inset: 0; animation: shimmer 1.6s infinite linear; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ---- Toast notifications ---- */ .toast { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 9999; } .toast .toast-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--elev-1); animation: fadeIn .25s ease, slideUp .35s ease; } .toast .toast-item.success { border-color: rgba(16,185,129,.4); color: #34d399; } .toast .toast-item.danger { border-color: rgba(239,68,68,.4); color: #f87171; } @keyframes slideUp { from { transform: translateY(8px); } to { transform: translateY(0); } } /* ---- Utilities ---- */ .hide { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .center { display: grid; place-items: center; } .grid { display: flex; align-items:center; justify-content:flex-start; gap: 2em; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } } .flex { display: flex; gap: 10px; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:10px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}.mt-5{margin-top:32px} .mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}.mb-5{margin-bottom:32px} .p-0{padding:0}.p-1{padding:6px}.p-2{padding:10px}.p-3{padding:16px}.p-4{padding:24px}.p-5{padding:32px} /* ---- Cards 2.0 with glass + hover lift ---- */ .card-neo { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px; box-shadow: var(--elev-1); backdrop-filter: blur(10px); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .card-neo:hover { transform: translateY(-4px); box-shadow: var(--elev-2); border-color: rgba(59,130,246,.35); } /* ---- Avatar / chip ---- */ .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .chip { display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-size:12px;color:var(--text);} /* ---- Inline loading button state ---- */ .btn.is-loading { position: relative; pointer-events: none; opacity: .8; } .btn.is-loading::after { content: \"\"; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Print styles ---- */ @media print { .menu-btn, .toolbar, .footer { display: none !important; } .card, .panel, table { box-shadow: none !important; } body { background: #fff !important; color: #000 !important; } } .header { position: relative; /* important: anchors toolbar positioning */ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; z-index: 1000; /* keep it above content */ } .menu-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; z-index: 1001; /* above the toolbar */ } .menu-btn span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all .3s ease; } .menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-btn.active span:nth-child(2) { opacity: 0; } .menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* mobile toolbar dropdown */ @media (max-width: 768px) { .menu-btn { display: flex; } .toolbar { display: none; position: absolute; top: 60px; right: 10px; flex-direction: column; align-items: flex-start; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 999; /* make sure it floats above */ animation: fadeIn .25s ease; } .toolbar.open { display: flex; } } /* small animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #60a5fa); display: flex; align-items: center; justify-content: center; overflow: hidden; /* ensures image stays inside */ border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .logo img { width: 100%; height: 100%; object-fit: cover; /* keeps aspect ratio, fills box */ border-radius: inherit; /* keeps same round corners */ display: block; } /* Add these styles to your CSS file */ .active-enabled { background-color: green; text-align: center; } .active-disabled { background-color: red; text-align: center; }