/* ========================================================= AppHub — Global Styles Light/Dark theme driven by [data-bs-theme] on , layered on top of Bootstrap 5's own color modes. ========================================================= */ :root { --ah-bg: #f7f8fa; --ah-surface: #ffffff; --ah-surface-alt: #f1f3f6; --ah-border: #e3e6eb; --ah-text: #1c1f26; --ah-text-muted: #6b7280; --ah-primary: #4f46e5; --ah-primary-hover: #4338ca; --ah-accent: #06b6d4; --ah-radius: 0.75rem; --ah-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --ah-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.08); } [data-bs-theme="dark"] { --ah-bg: #0f1115; --ah-surface: #171a21; --ah-surface-alt: #1e222b; --ah-border: #2a2f3a; --ah-text: #e8eaed; --ah-text-muted: #9aa1ac; --ah-primary: #6366f1; --ah-primary-hover: #818cf8; --ah-accent: #22d3ee; --ah-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --ah-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); } /* ---- Extra accent palette (dashboard stat icons / badges) ---- */ :root { --ah-amber: #b45309; --ah-amber-bg: rgba(180, 83, 9, 0.1); --ah-cyan-fg: #0e7490; --ah-cyan-bg: rgba(6, 182, 212, 0.1); --ah-purple: #6d28d9; --ah-purple-bg: rgba(109, 40, 217, 0.1); --ah-green: #15803d; --ah-green-bg: rgba(21, 128, 61, 0.1); --ah-red: #b91c1c; --ah-red-bg: rgba(185, 28, 28, 0.1); --ah-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ah-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } [data-bs-theme="dark"] { --ah-amber: #ffb454; --ah-amber-bg: rgba(255, 180, 84, 0.12); --ah-cyan-fg: #5eead4; --ah-cyan-bg: rgba(94, 234, 212, 0.12); --ah-purple: #9f8cff; --ah-purple-bg: rgba(159, 140, 255, 0.12); --ah-green: #4ade80; --ah-green-bg: rgba(74, 222, 128, 0.12); --ah-red: #ff6b6b; --ah-red-bg: rgba(255, 107, 107, 0.12); } html, body { height: 100%; } body { background-color: var(--ah-bg); color: var(--ah-text); transition: background-color 0.2s ease, color 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } a { text-decoration: none; } /* ---- Navbar ---- */ .app-navbar { background-color: var(--ah-surface); border-bottom: 1px solid var(--ah-border); box-shadow: var(--ah-shadow); } .app-navbar .nav-link { color: var(--ah-text-muted); font-weight: 500; } .app-navbar .nav-link.active, .app-navbar .nav-link:hover { color: var(--ah-primary); } .app-navbar .navbar-brand { color: var(--ah-text); } .profile-icon-btn { width: 34px; height: 34px; font-size: 0.95rem; } /* ---- Theme toggle icon swap ---- */ .theme-icon-light { display: none; } [data-bs-theme="dark"] .theme-icon-dark { display: none; } [data-bs-theme="dark"] .theme-icon-light { display: inline-block; } /* ---- Surfaces / Cards ---- */ .card, .app-card, .surface { background-color: var(--ah-surface); border: 1px solid var(--ah-border); border-radius: var(--ah-radius); box-shadow: var(--ah-shadow); } .bg-surface-alt { background-color: var(--ah-surface-alt) !important; } /* ---- Buttons ---- */ .btn-primary { background-color: var(--ah-primary); border-color: var(--ah-primary); } .btn-primary:hover { background-color: var(--ah-primary-hover); border-color: var(--ah-primary-hover); } /* ---- Hero ---- */ .hero { padding: 5rem 0; background: linear-gradient(180deg, var(--ah-surface-alt) 0%, var(--ah-bg) 100%); border-bottom: 1px solid var(--ah-border); } /* ---- Footer ---- */ .app-footer { background-color: var(--ah-surface); border-top: 1px solid var(--ah-border); } .footer-link { color: var(--ah-text-muted); } .footer-link:hover { color: var(--ah-primary); } /* ---- Text helpers ---- */ .text-muted-ah { color: var(--ah-text-muted) !important; } /* ---- Admin layout ---- */ .admin-sidebar { background-color: var(--ah-surface); border-right: 1px solid var(--ah-border); min-height: 100vh; } .admin-sidebar .nav-link { color: var(--ah-text-muted); border-radius: 0.5rem; padding: 0.6rem 0.9rem; margin-bottom: 0.15rem; } .admin-sidebar .nav-link.active, .admin-sidebar .nav-link:hover { background-color: var(--ah-surface-alt); color: var(--ah-primary); } .admin-topbar { background-color: var(--ah-surface); border-bottom: 1px solid var(--ah-border); } .stat-card { background-color: var(--ah-surface); border: 1px solid var(--ah-border); border-radius: var(--ah-radius); padding: 1.25rem; } /* ============================================== Dashboard: overview header ============================================== */ .dash-welcome { color: var(--ah-text-muted); font-family: var(--ah-font-mono); font-size: 0.85rem; } .status-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ah-font-mono); font-size: 0.75rem; color: var(--ah-cyan-fg); background-color: var(--ah-surface-alt); border: 1px solid var(--ah-border); padding: 6px 12px; border-radius: 20px; white-space: nowrap; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--ah-cyan-fg); box-shadow: 0 0 6px var(--ah-cyan-fg); animation: ah-pulse 2s infinite; } @keyframes ah-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ============================================== Dashboard: stat cards ============================================== */ .stat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .stat-icon.amber { background-color: var(--ah-amber-bg); color: var(--ah-amber); } .stat-icon.cyan { background-color: var(--ah-cyan-bg); color: var(--ah-cyan-fg); } .stat-icon.purple { background-color: var(--ah-purple-bg); color: var(--ah-purple); } .stat-icon.green { background-color: var(--ah-green-bg); color: var(--ah-green); } .stat-icon.red { background-color: var(--ah-red-bg); color: var(--ah-red); } .stat-trend { font-family: var(--ah-font-mono); font-size: 0.72rem; padding: 3px 9px; border-radius: 12px; white-space: nowrap; } .stat-trend.up { color: var(--ah-green); background-color: var(--ah-green-bg); } .stat-trend.down { color: var(--ah-red); background-color: var(--ah-red-bg); } .stat-trend.neutral { color: var(--ah-text-muted); background-color: var(--ah-surface-alt); } .stat-val { font-family: var(--ah-font-display); font-weight: 700; font-size: 1.65rem; line-height: 1.2; } .stat-lbl { font-size: 0.8rem; color: var(--ah-text-muted); margin-top: 2px; } /* ============================================== Dashboard: panels ============================================== */ .panel { background-color: var(--ah-surface); border: 1px solid var(--ah-border); border-radius: var(--ah-radius); padding: 1.35rem; margin-bottom: 1.5rem; } .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; gap: 10px; } .panel-head h2 { font-family: var(--ah-font-display); font-weight: 600; font-size: 1.02rem; margin: 0; } .panel-note { font-family: var(--ah-font-mono); font-size: 0.76rem; color: var(--ah-text-muted); white-space: nowrap; } /* ---- Mini bar chart (pure CSS) ---- */ .chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; } .chart-bars .bar { flex: 1; min-height: 4px; background: linear-gradient(180deg, var(--ah-accent), transparent 130%); border-radius: 5px 5px 0 0; position: relative; } .chart-bars .bar.today { background: linear-gradient(180deg, var(--ah-primary), transparent 130%); } .chart-bars .bar .bar-count { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--ah-font-mono); font-size: 0.68rem; color: var(--ah-text-muted); white-space: nowrap; } .chart-labels { display: flex; gap: 8px; margin-top: 8px; } .chart-labels span { flex: 1; text-align: center; font-family: var(--ah-font-mono); font-size: 0.68rem; color: var(--ah-text-muted); } /* ---- Compact data table (apps overview) ---- */ .tbl-dash { width: 100%; font-size: 0.86rem; } .tbl-dash th { text-align: left; color: var(--ah-text-muted); font-family: var(--ah-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--ah-border); white-space: nowrap; } .tbl-dash td { padding: 12px 10px; border-bottom: 1px solid var(--ah-border); vertical-align: middle; } .tbl-dash tr:last-child td { border-bottom: none; } .tbl-app { display: flex; align-items: center; gap: 10px; } .tbl-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--ah-font-display); font-weight: 700; font-size: 0.78rem; flex-shrink: 0; } .tbl-icon.amber { background-color: var(--ah-amber-bg); color: var(--ah-amber); } .tbl-icon.cyan { background-color: var(--ah-cyan-bg); color: var(--ah-cyan-fg); } .tbl-icon.purple { background-color: var(--ah-purple-bg); color: var(--ah-purple); } .tbl-icon.green { background-color: var(--ah-green-bg); color: var(--ah-green); } .tbl-icon.red { background-color: var(--ah-red-bg); color: var(--ah-red); } .tbl-app .name { font-weight: 600; color: var(--ah-text); } .tbl-app .meta { font-size: 0.72rem; color: var(--ah-text-muted); font-family: var(--ah-font-mono); } .badge-status { font-family: var(--ah-font-mono); font-size: 0.7rem; padding: 3px 10px; border-radius: 12px; white-space: nowrap; } .badge-status.published { color: var(--ah-green); background-color: var(--ah-green-bg); } .badge-status.draft { color: var(--ah-text-muted); background-color: var(--ah-surface-alt); } .badge-status.archived { color: var(--ah-red); background-color: var(--ah-red-bg); } .row-actions a { color: var(--ah-text-muted); font-size: 0.8rem; margin-right: 12px; } .row-actions a:hover { color: var(--ah-primary); } /* ---- Recent leads / comments list ---- */ .list-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--ah-border); gap: 12px; } .list-item:last-child { border-bottom: none; } .list-item .who { font-weight: 600; font-size: 0.87rem; color: var(--ah-text); } .list-item .snippet { color: var(--ah-text-muted); font-size: 0.81rem; margin-top: 3px; } .list-item .when { font-family: var(--ah-font-mono); font-size: 0.7rem; color: var(--ah-text-muted); white-space: nowrap; } .pill-new { font-family: var(--ah-font-mono); font-size: 0.64rem; color: var(--ah-amber); background-color: var(--ah-amber-bg); padding: 2px 8px; border-radius: 10px; margin-left: 7px; } .mod-actions { display: flex; gap: 6px; flex-shrink: 0; } .mod-btn { width: 27px; height: 27px; border-radius: 7px; border: 1px solid var(--ah-border); background-color: transparent; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--ah-text-muted); padding: 0; } .mod-btn.approve:hover { border-color: var(--ah-green); color: var(--ah-green); } .mod-btn.reject:hover { border-color: var(--ah-red); color: var(--ah-red); } /* ---- Empty / placeholder state (content pending design pass) ---- */ .placeholder-block { border: 1px dashed var(--ah-border); border-radius: var(--ah-radius); padding: 3rem 1.5rem; text-align: center; color: var(--ah-text-muted); background-color: var(--ah-surface-alt); }