@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Space+Grotesk:wght@400;600;700&display=swap'); /* ─── Viewport meta fix (add this to your HTML if not there already) ─ */ /* */ /* ─── Dark mode (default) ────────────────────────────────────────────────── */ :root { --bg: #0a0d14; --bg2: #0f1420; --bg3: #151c2e; --card: #111827; --card2: #1a2235; --border: rgba(255,255,255,.07); --border2: rgba(255,255,255,.12); --text: #e8edf5; --muted: #6b7a99; --muted2: #8899bb; --blue: #3b82f6; --blue-glow: rgba(59,130,246,.35); --indigo: #6366f1; --purple: #a855f7; --cyan: #06b6d4; --green: #10b981; --red: #ef4444; --amber: #f59e0b; --grad1: linear-gradient(135deg, #3b82f6, #6366f1); --grad2: linear-gradient(135deg, #06b6d4, #3b82f6); --grad3: linear-gradient(135deg, #a855f7, #ec4899); --grad-green: linear-gradient(135deg, #10b981, #06b6d4); --grad-amber: linear-gradient(135deg, #f59e0b, #ef4444); --sidebar-w: 270px; --radius: 12px; --radius-lg: 18px; --shadow: 0 4px 24px rgba(0,0,0,.4); --shadow-glow: 0 0 40px rgba(59,130,246,.15); /* Theme toggle icon */ --theme-icon: "☀️"; } /* ─── Light mode ─────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f0f4f8; --bg2: #e4ecf5; --bg3: #d9e4f0; --card: #ffffff; --card2: #f5f8fc; --border: rgba(0,0,0,.08); --border2: rgba(0,0,0,.14); --text: #0f172a; --muted: #64748b; --muted2: #475569; --blue-glow: rgba(59,130,246,.2); --shadow: 0 4px 24px rgba(0,0,0,.1); --shadow-glow: 0 0 40px rgba(59,130,246,.08); --theme-icon: "🌙"; } /* Light mode specific overrides */ [data-theme="light"] tr:hover td { background: rgba(0,0,0,.02); } [data-theme="light"] .nav-item:hover::before { opacity: .05; } [data-theme="light"] body::before { opacity: 0.15; } [data-theme="light"] .modal-overlay { background: rgba(0,0,0,.4); } /* ─── System preference fallback (if no data-theme set) ─────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f0f4f8; --bg2: #e4ecf5; --bg3: #d9e4f0; --card: #ffffff; --card2: #f5f8fc; --border: rgba(0,0,0,.08); --border2: rgba(0,0,0,.14); --text: #0f172a; --muted: #64748b; --muted2: #475569; --blue-glow: rgba(59,130,246,.2); --shadow: 0 4px 24px rgba(0,0,0,.1); } } /* ─── Theme toggle button ────────────────────────────────────────────────── */ .theme-toggle { background: var(--bg3); border: 1px solid var(--border2); color: var(--muted2); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--blue); color: var(--blue); } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior: smooth; } body { font-family: 'Cairo', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; overflow-x: hidden; /* Prevent zoom on input focus on iOS */ -webkit-text-size-adjust: 100%; } /* ─── Prevent mobile zoom on inputs ──────────────────────────────────────── */ input, select, textarea, .form-control { font-size: 16px !important; /* 16px = no zoom on iOS */ } /* Override font-size back to design size visually using transform or just let it be */ /* For visual consistency we keep 16px min on mobile, scale down slightly on bigger screens */ @media (min-width: 600px) { input, select, textarea, .form-control { font-size: 14px !important; } } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } /* ─── Noise texture overlay ──────────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.4; } /* ─── Animations ─────────────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes slideIn { from { transform:translateX(-20px); opacity:0; } to { transform:none; opacity:1; } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } } @keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } } @keyframes glow { 0%,100% { box-shadow:0 0 20px var(--blue-glow); } 50% { box-shadow:0 0 40px rgba(99,102,241,.4); } } @keyframes floatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } } @keyframes scaleIn { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } } @keyframes blob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} } .animate-fade-up { animation: fadeUp .4s ease both; } .animate-fade-in { animation: fadeIn .3s ease both; } .animate-scale-in { animation: scaleIn .3s cubic-bezier(.34,1.56,.64,1) both; } /* ─── Auth ───────────────────────────────────────────────────────────────── */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; position: relative; } .auth-wrapper::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 15% 20%, rgba(37,211,102,.08) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 85% 80%, rgba(99,102,241,.06) 0%, transparent 60%); } .auth-box { position: relative; z-index: 1; width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border2); border-radius: 20px; padding: 38px 32px; box-shadow: 0 8px 40px rgba(0,0,0,.15); animation: scaleIn .4s cubic-bezier(.34,1.56,.64,1) both; } .auth-head { text-align: center; margin-bottom: 28px; } .auth-head h1 { font-size: 21px; font-weight: 900; color: var(--text); margin: 0; } .auth-logo-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #25d366, #128c7e); border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: white; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(37,211,102,.3); } .a-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .a-hint { font-size: 12px; color: var(--muted); margin: 6px 0 16px; } .a-field { position: relative; margin-bottom: 12px; } .a-icon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; } .a-field input { width: 100%; padding: 13px 40px 13px 14px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 11px; color: var(--text); font-size: 15px; font-family: inherit; direction: ltr; text-align: right; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; } .a-field input:focus { outline: none; border-color: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.1); } .a-field input::placeholder { color: var(--muted); } .a-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, #25d366, #128c7e); color: white; font-weight: 700; font-size: 15px; font-family: inherit; border: none; border-radius: 11px; cursor: pointer; box-shadow: 0 3px 14px rgba(37,211,102,.3); transition: opacity .2s, transform .1s; } .a-btn:hover { opacity: .9; } .a-btn:active { transform: scale(.98); } .a-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .a-otp { width: 100%; padding: 15px 10px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 11px; color: var(--text); font-size: 28px; font-weight: 800; text-align: center; letter-spacing: 12px; font-family: monospace; direction: ltr; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; } .a-otp:focus { outline: none; border-color: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.1); } .a-badge { display: flex; align-items: center; gap: 7px; background: rgba(37,211,102,.08); border: 1px solid rgba(37,211,102,.2); border-radius: 99px; padding: 5px 12px; font-size: 13px; color: var(--text); direction: ltr; margin-bottom: 16px; width: fit-content; } .a-link { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; font-family: inherit; padding: 0; transition: color .15s; } .a-link:hover { color: var(--text); } .a-link.bold { color: #25d366; font-weight: 600; } .a-resend { text-align: center; margin-top: 14px; font-size: 13px; color: var(--muted); } /* hide old compat classes */ .auth-bg, .auth-blob, .auth-logo, .auth-logo-mark, .auth-panel-left, .auth-panel-right, .auth-card, .auth-step-indicator, .auth-step-dot, .auth-card-header, .phone-chip, .auth-panel-left::before { display: none !important; } /* ─── Layout ─────────────────────────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; } /* ─── Sidebar ────────────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--card); border-left: 1px solid var(--border); position: fixed; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; z-index: 100; overflow: hidden; transition: box-shadow .3s; } .sidebar::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%); pointer-events: none; } .sidebar-header { padding: 22px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .logo-mark { width: 40px; height: 40px; background: var(--grad1); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: white; box-shadow: 0 4px 12px var(--blue-glow); flex-shrink: 0; } .sidebar-brand { font-size: 16px; font-weight: 900; color: var(--text); } .sidebar-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } .sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; } .nav-section { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: 10px 10px 4px; margin-top: 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--muted2); cursor: pointer; border: none; background: none; width: 100%; text-align: right; font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 600; transition: all .2s; position: relative; overflow: hidden; /* Improve tap target on mobile */ min-height: 44px; } .nav-item::before { content: ''; position: absolute; inset: 0; background: var(--grad1); opacity: 0; transition: opacity .2s; border-radius: 10px; } .nav-item:hover { color: var(--text); } .nav-item:hover::before { opacity: .08; } .nav-item.active { color: white; background: var(--grad1); box-shadow: 0 4px 16px var(--blue-glow); } .nav-item.active::before { opacity: 0; } .nav-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.06); flex-shrink: 0; font-size: 15px; } [data-theme="light"] .nav-icon { background: rgba(0,0,0,.05); } .nav-item.active .nav-icon { background: rgba(255,255,255,.2); } .nav-badge { margin-right: auto; background: var(--red); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 20px; min-width: 20px; text-align: center; } .sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); } .user-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg3); border-radius: 10px; border: 1px solid var(--border); } .user-avatar { width: 36px; height: 36px; background: var(--grad1); border-radius: 10px; color: white; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-chip-name { font-weight: 700; font-size: 13px; color: var(--text); } .user-chip-role { font-size: 11px; color: var(--muted); } .logout-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px; border-radius: 6px; transition: color .2s; margin-right: auto; /* Better tap target */ min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; } .logout-btn:hover { color: var(--red); } /* ─── Mobile top bar ─────────────────────────────────────────────────────── */ .mobile-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px; background: var(--card); border-bottom: 1px solid var(--border); z-index: 99; padding: 0 16px; align-items: center; justify-content: space-between; gap: 12px; } .mobile-menu-btn { background: var(--bg3); border: 1px solid var(--border2); color: var(--text); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Overlay behind open sidebar on mobile */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* ─── Main content ───────────────────────────────────────────────────────── */ .main { margin-right: var(--sidebar-w); flex: 1; padding: 32px; min-height: 100vh; } /* ─── Page header ────────────────────────────────────────────────────────── */ .page-header { margin-bottom: 28px; } .page-title { font-size: 26px; font-weight: 900; color: var(--text); line-height: 1.2; } .page-sub { color: var(--muted); font-size: 14px; margin-top: 4px; } /* ─── Cards ──────────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s; } .card:hover { border-color: var(--border2); } .card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .card-body { padding: 22px; } /* ─── Stat cards ─────────────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; animation: fadeUp .4s ease both; } .stat-card:hover { transform: translateY(-2px); border-color: var(--border2); } .stat-card::after { content: ''; position: absolute; bottom: -20px; left: -20px; width: 80px; height: 80px; border-radius: 50%; opacity: .07; } .stat-card.blue::after { background: var(--blue); } .stat-card.indigo::after { background: var(--indigo); } .stat-card.green::after { background: var(--green); } .stat-card.amber::after { background: var(--amber); } .stat-card.red::after { background: var(--red); } .stat-card.purple::after { background: var(--purple); } .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; } .stat-icon.blue { background: rgba(59,130,246,.15); } .stat-icon.indigo { background: rgba(99,102,241,.15); } .stat-icon.green { background: rgba(16,185,129,.15); } .stat-icon.amber { background: rgba(245,158,11,.15); } .stat-icon.red { background: rgba(239,68,68,.15); } .stat-icon.purple { background: rgba(168,85,247,.15); } .stat-num { font-size: 30px; font-weight: 900; color: var(--text); line-height: 1; } .stat-lbl { font-size: 13px; color: var(--muted); margin-top: 4px; font-weight: 600; } /* ─── Forms ──────────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 13px; font-weight: 700; color: var(--muted2); margin-bottom: 8px; } .form-control { width: 100%; padding: 11px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: 'Cairo', sans-serif; transition: border-color .2s, box-shadow .2s; /* font-size handled globally above for zoom prevention */ } .form-control:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); } .form-control::placeholder { color: var(--muted); } select.form-control option { background: var(--card); color: var(--text); } .range-wrap { display: flex; align-items: center; gap: 12px; } input[type=range] { flex: 1; -webkit-appearance: none; height: 4px; background: var(--bg3); border-radius: 2px; outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; /* bigger for touch */ border-radius: 50%; background: var(--grad1); cursor: pointer; box-shadow: 0 2px 8px var(--blue-glow); } .range-val { min-width: 40px; text-align: center; font-weight: 700; color: var(--blue); font-size: 15px; } /* ─── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: all .2s; font-family: 'Cairo', sans-serif; white-space: nowrap; text-decoration: none; position: relative; overflow: hidden; /* Minimum tap target */ min-height: 44px; } .btn::after { content: ''; position: absolute; inset: 0; background: white; opacity: 0; transition: opacity .15s; } .btn:hover:not(:disabled)::after { opacity: .06; } .btn:active:not(:disabled) { transform: scale(.97); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--grad1); color: white; box-shadow: 0 4px 14px var(--blue-glow); } .btn-danger { background: var(--red); color: white; } .btn-success { background: var(--green); color: white; } .btn-ghost { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); } .btn-ghost:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); } .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; min-height: 36px; } .btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 6px; min-height: 32px; } /* ─── Tables ─────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; } th { padding: 12px 14px; background: var(--bg2); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr { transition: background .15s; } tr:hover td { background: rgba(255,255,255,.02); } /* ─── Badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .badge-blue { background: rgba(59,130,246,.15); color: #2563eb; border: 1px solid rgba(59,130,246,.2); } .badge-green { background: rgba(16,185,129,.15); color: #059669; border: 1px solid rgba(16,185,129,.2); } .badge-red { background: rgba(239,68,68,.15); color: #dc2626; border: 1px solid rgba(239,68,68,.2); } .badge-amber { background: rgba(245,158,11,.15); color: #d97706; border: 1px solid rgba(245,158,11,.2); } .badge-purple { background: rgba(168,85,247,.15); color: #9333ea; border: 1px solid rgba(168,85,247,.2); } .badge-cyan { background: rgba(6,182,212,.15); color: #0891b2; border: 1px solid rgba(6,182,212,.2); } .badge-gray { background: rgba(107,114,128,.15); color: #6b7280; border: 1px solid rgba(107,114,128,.2); } .badge-admin { background: var(--grad1); color: white; border: none; } .badge-success { background: rgba(16,185,129,.15); color: #059669; border: 1px solid rgba(16,185,129,.2); } .badge-danger { background: rgba(239,68,68,.15); color: #dc2626; border: 1px solid rgba(239,68,68,.2); } /* Light mode — badges need lighter bg, darker text for contrast */ [data-theme="light"] .badge-blue { color: #1d4ed8; } [data-theme="light"] .badge-green { color: #047857; } [data-theme="light"] .badge-red { color: #b91c1c; } [data-theme="light"] .badge-amber { color: #b45309; } [data-theme="light"] .badge-purple { color: #7c3aed; } [data-theme="light"] .badge-cyan { color: #0e7490; } [data-theme="light"] .badge-gray { color: #374151; } /* ─── Alerts ─────────────────────────────────────────────────────────────── */ .alert { padding: 13px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid; animation: fadeIn .3s ease; } .alert-error { background: rgba(239,68,68,.08); color: #ef4444; border-color: rgba(239,68,68,.2); } .alert-success { background: rgba(16,185,129,.08); color: #10b981; border-color: rgba(16,185,129,.2); } .alert-info { background: rgba(59,130,246,.08); color: #3b82f6; border-color: rgba(59,130,246,.2); } .alert-warning { background: rgba(245,158,11,.08); color: #f59e0b; border-color: rgba(245,158,11,.2); } [data-theme="light"] .alert-error { color: #b91c1c; } [data-theme="light"] .alert-success { color: #065f46; } [data-theme="light"] .alert-info { color: #1d4ed8; } [data-theme="light"] .alert-warning { color: #92400e; } /* ─── Spinner ────────────────────────────────────────────────────────────── */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.2); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; } .spinner-blue { border-color: rgba(59,130,246,.2); border-top-color: var(--blue); } .loading-center { display: flex; align-items: center; justify-content: center; padding: 60px; flex-direction: column; gap: 12px; color: var(--muted); } /* ─── Skeleton shimmer ───────────────────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--card2) 50%, var(--bg3) 75%); background-size: 400% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } /* ─── Post cards ─────────────────────────────────────────────────────────── */ .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .post-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; animation: fadeUp .4s ease both; } .post-card:hover { transform: translateY(-4px); border-color: rgba(59,130,246,.3); box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(59,130,246,.1); } [data-theme="light"] .post-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.1), 0 0 0 1px rgba(59,130,246,.1); } .post-img { position: relative; overflow: hidden; } .post-img img { width: 100%; max-height: 200px; object-fit: cover; display: block; transition: transform .4s; } .post-card:hover .post-img img { transform: scale(1.04); } .post-type-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: white; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); } .post-body { padding: 16px; } .post-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 10px; } .post-msg { font-size: 14px; line-height: 1.6; color: var(--muted2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-stats { display: flex; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); } .post-stat { display: flex; align-items: center; gap: 4px; } .post-actions { display: flex; gap: 8px; margin-top: 12px; } /* ─── Page items ─────────────────────────────────────────────────────────── */ .pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; } .page-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; cursor: pointer; transition: all .25s; position: relative; overflow: hidden; animation: fadeUp .4s ease both; } .page-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad1); transform: scaleX(0); transition: transform .3s; } .page-card:hover { border-color: rgba(59,130,246,.3); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.25); } [data-theme="light"] .page-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.08); } .page-card:hover::before { transform: scaleX(1); } .page-card.selected { border-color: var(--blue); background: rgba(59,130,246,.05); } .page-card.selected::before { transform: scaleX(1); } .page-card-icon { width: 48px; height: 48px; background: var(--grad1); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: white; margin-bottom: 12px; box-shadow: 0 4px 14px var(--blue-glow); } .page-card-name { font-size: 15px; font-weight: 700; color: var(--text); } .page-card-id { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: monospace; } /* ─── Promote modal ──────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; animation: fadeIn .2s ease; } .modal { background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius-lg); width: 100%; max-width: 760px; box-shadow: 0 24px 80px rgba(0,0,0,.5); animation: scaleIn .3s cubic-bezier(.34,1.56,.64,1) both; overflow: hidden; } [data-theme="light"] .modal { box-shadow: 0 24px 80px rgba(0,0,0,.15); } .modal-header { padding: 22px 26px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(99,102,241,.06)); } .modal-title { font-size: 18px; font-weight: 900; color: var(--text); display: flex; align-items: center; gap: 10px; } .modal-close { background: var(--bg3); border: 1px solid var(--border); color: var(--muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .2s; } .modal-close:hover { color: var(--red); border-color: var(--red); } .modal-body { padding: 26px; } .modal-footer { padding: 18px 26px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } /* ─── Map container ──────────────────────────────────────────────────────── */ #promo-map { height: 280px; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; margin-top: 10px; } /* ─── Gender pills ───────────────────────────────────────────────────────── */ .gender-pills { display: flex; gap: 8px; } .gender-pill { flex: 1; padding: 10px; border: 1px solid var(--border2); border-radius: 10px; background: var(--bg2); color: var(--muted2); cursor: pointer; text-align: center; font-size: 13px; font-weight: 700; transition: all .2s; font-family: 'Cairo', sans-serif; min-height: 44px; } .gender-pill:hover { border-color: var(--blue); color: var(--blue); } .gender-pill.selected { background: var(--grad1); border-color: transparent; color: white; } /* ─── Objective pills ────────────────────────────────────────────────────── */ .obj-pills { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .obj-pill { padding: 14px 10px; border: 1px solid var(--border2); border-radius: 10px; background: var(--bg2); color: var(--muted2); cursor: pointer; text-align: center; font-size: 12px; font-weight: 700; transition: all .2s; font-family: 'Cairo', sans-serif; } .obj-pill .obj-icon { font-size: 22px; display: block; margin-bottom: 6px; } .obj-pill:hover { border-color: var(--blue); color: var(--blue); } .obj-pill.selected { background: var(--grad1); border-color: transparent; color: white; } /* ─── Budget slider ──────────────────────────────────────────────────────── */ .budget-display { text-align: center; font-size: 36px; font-weight: 900; color: var(--text); margin: 10px 0; } .budget-display span { font-size: 20px; color: var(--muted); } /* ─── Location tags ──────────────────────────────────────────────────────── */ .location-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .location-tag { display: flex; align-items: center; gap: 6px; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.2); color: #2563eb; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } [data-theme="light"] .location-tag { color: #1d4ed8; } .location-tag-remove { cursor: pointer; opacity: .7; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; } .location-tag-remove:hover { opacity: 1; color: var(--red); } /* ─── Wallet card ────────────────────────────────────────────────────────── */ .wallet-hero { background: var(--grad1); border-radius: var(--radius-lg); padding: 32px; position: relative; overflow: hidden; margin-bottom: 24px; } .wallet-hero::before { content: ''; position: absolute; top: -40px; left: -40px; width: 200px; height: 200px; background: rgba(255,255,255,.06); border-radius: 50%; } .wallet-hero::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 250px; height: 250px; background: rgba(255,255,255,.04); border-radius: 50%; } .wallet-label { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 600; margin-bottom: 6px; } .wallet-amount { font-size: 48px; font-weight: 900; color: white; line-height: 1; } .wallet-currency { font-size: 22px; color: rgba(255,255,255,.8); } /* ─── Status badge mapping ───────────────────────────────────────────────── */ .status-pending { @extend .badge-amber; } .status-approved { @extend .badge-green; } .status-rejected { @extend .badge-red; } .status-running { @extend .badge-blue; } .status-paused { @extend .badge-gray; } .status-completed { @extend .badge-purple; } /* ─── Campaign card ──────────────────────────────────────────────────────── */ .campaign-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s; animation: fadeUp .4s ease both; } .campaign-card:hover { border-color: var(--border2); } .campaign-header { padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border); } .campaign-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg3); } .campaign-body { padding: 16px 20px; } .campaign-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* ─── Payment method card ────────────────────────────────────────────────── */ .pm-card { background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: border-color .2s; } .pm-card:hover { border-color: var(--border2); } .pm-address { font-family: monospace; font-size: 12px; color: var(--muted2); white-space: pre-wrap; margin-top: 6px; } /* ─── File upload ────────────────────────────────────────────────────────── */ .file-drop { border: 2px dashed var(--border2); border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: all .2s; color: var(--muted); font-size: 14px; } .file-drop:hover, .file-drop.drag-over { border-color: var(--blue); background: rgba(59,130,246,.04); color: var(--blue); } .file-drop input { display: none; } /* ─── Tabs ───────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; background: var(--bg2); border-radius: 12px; padding: 4px; margin-bottom: 20px; overflow-x: auto; } .tab { flex: 1; text-align: center; padding: 9px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); border: none; background: none; transition: all .2s; font-family: 'Cairo', sans-serif; white-space: nowrap; min-height: 40px; } .tab.active { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.2); } [data-theme="light"] .tab.active { box-shadow: 0 2px 8px rgba(0,0,0,.08); } /* ─── Search box ─────────────────────────────────────────────────────────── */ .search-wrap { position: relative; } .search-wrap .form-control { padding-right: 40px; } .search-icon { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--muted); pointer-events: none; } /* ─── Grid helpers ───────────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } /* ─── Misc utilities ─────────────────────────────────────────────────────── */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .ml-auto, .mr-auto { margin-left: auto; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .text-center { text-align: center; } .text-muted { color: var(--muted); } .text-sm { font-size: 12px; } .font-bold { font-weight: 700; } .w-full { width: 100%; } .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; } .empty-state { text-align: center; padding: 60px 24px; color: var(--muted); } .empty-icon { font-size: 52px; margin-bottom: 14px; display: block; } .empty-state h3 { font-size: 16px; color: var(--muted2); margin-bottom: 6px; } .empty-state p { font-size: 13px; } /* ─── Pagination Bar ─────────────────────────────────────────────────────── */ #pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--border); margin-top: 8px; flex-wrap: wrap; gap: 10px; } /* ─── Link Request Notice ────────────────────────────────────────────────── */ .link-request-notice { background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(99,102,241,.1)); border: 1px solid rgba(59,130,246,.3); border-radius: 16px; padding: 32px; text-align: center; margin: 24px 0; } .link-request-notice h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--text); } .link-request-notice p { color: var(--muted); margin-bottom: 20px; } /* ─── Site settings logo preview ────────────────────────────────────────── */ .logo-preview-card { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 16px; } /* ══════════════════════════════════════════════════════════════════════════ */ /* ─── RESPONSIVE — Tablet (≤ 1024px) ─────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); } .posts-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } /* ══════════════════════════════════════════════════════════════════════════ */ /* ─── RESPONSIVE — Mobile (≤ 900px) ──────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { :root { --sidebar-w: 0px; } /* Sidebar slides in from right */ .sidebar { width: 270px; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: -8px 0 40px rgba(0,0,0,.4); } /* Show mobile topbar */ .mobile-topbar { display: flex; } /* Push content below topbar */ .main { margin-right: 0; padding: 16px; padding-top: calc(56px + 16px); /* account for topbar */ } /* Grids collapse to single column */ .grid-2, .grid-3 { grid-template-columns: 1fr; } .obj-pills { grid-template-columns: 1fr 1fr; } .pages-grid { grid-template-columns: 1fr 1fr; } .posts-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } /* Auth card smaller padding */ .auth-card { padding: 28px 20px; } /* Page title smaller */ .page-title { font-size: 20px; } /* Modal full-width on mobile */ .modal-overlay { padding: 16px; align-items: flex-end; } .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; overflow-y: auto; } .modal-body { padding: 18px; } .modal-header { padding: 16px 18px; } .modal-footer { padding: 14px 18px; flex-wrap: wrap; } /* Wallet */ .wallet-hero { padding: 20px; } .wallet-amount { font-size: 36px; } /* Tabs scroll horizontally */ .tabs { flex-wrap: nowrap; overflow-x: auto; } /* Gender pills wrap */ .gender-pills { flex-wrap: wrap; } /* Budget display smaller */ .budget-display { font-size: 28px; } /* Card headers may wrap */ .card-header { flex-wrap: wrap; } /* Pagination stacks */ #pagination-bar { flex-direction: column; align-items: flex-start; } /* Link request notice padding */ .link-request-notice { padding: 20px 16px; } .link-request-notice h3 { font-size: 16px; } } /* ══════════════════════════════════════════════════════════════════════════ */ /* ─── RESPONSIVE — Small phones (≤ 480px) ────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .pages-grid { grid-template-columns: 1fr; } .obj-pills { grid-template-columns: 1fr 1fr; } .page-title { font-size: 18px; } /* Buttons full-width on small screens when stacked */ .modal-footer .btn { flex: 1; justify-content: center; } /* Post actions wrap */ .post-actions { flex-wrap: wrap; } /* Campaign meta wrap */ .campaign-meta { gap: 6px; } /* Wallet */ .wallet-amount { font-size: 30px; } /* Card body smaller padding */ .card-body { padding: 14px; } }