/* ════════════════════════════════════════════════════════════════════════════ Admin design kit (served at /pub/admin/admin.css) Tokens + components shared by every admin portal (Pointcoin /admin-portal, /dose/admin-portal, /homebit/admin-portal, /winzos/admin-portal). Flat surfaces, hairline borders, brand-tinted chrome (navy by default), validated categorical chart palette. No decorative gradients. Brand = . ════════════════════════════════════════════════════════════════════════════ */ /* DaisyUI 4 theme overrides (OKLCH components) so btn-primary, toggles, links etc. match the kit: primary = navy chrome, info = series blue. */ [data-theme="light"] { --p: 22.40% 0.0509 260.52; /* #0d1b33 */ --pc: 100% 0 0; --in: 57.53% 0.1626 255.53; /* #2a78d6 */ --inc: 100% 0 0; --su: 62.10% 0.2073 142.56; /* #0ca30c */ --wa: 76.44% 0.1612 75.12; /* #eda100 */ --er: 57.48% 0.1862 25.23; /* #d03b3b */ --b1: 99.08% 0.0013 106.42; /* #fcfcfb */ --b2: 96.63% 0.0040 106.47; /* #f4f4f1 */ --b3: 90.55% 0.0095 100.00; /* #e1e0d9 */ --bc: 14.96% 0 89.88; /* #0b0b0b */ --rounded-btn: 0.6rem; --rounded-box: 0.9rem; } .adm { color-scheme: light; /* --navy / --navy-2 are the chrome tokens (sidebar, primary buttons, seg, pager, tabs, toasts); brand blocks below re-tint them per admin. */ --navy: #0d1b33; --navy-2: #16274a; --accent: #6da7ec; /* active-nav inset line */ --chrome-rgb: 13, 27, 51; /* --navy as r,g,b for translucent shadows/scrim */ --surface-1: #fcfcfb; --page: #f4f4f1; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7; --hair: #f0efec; --border: rgba(11, 11, 11, 0.10); --series-1: #2a78d6; --series-2: #eb6834; --good: #0ca30c; --good-text: #006300; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text-primary); background: var(--page); min-height: 100vh; } /* ── Brands: per-admin chrome tint () ───────── pointcoin = defaults above. --p is DaisyUI primary (OKLCH) so btn-primary, toggles and checkboxes follow the chrome color. */ body.adm[data-brand="dose"] { --navy: #5b1d45; --navy-2: #7a2a5c; --accent: #ff6b98; --chrome-rgb: 91, 29, 69; --p: 34.17% 0.1033 344.32; /* #5b1d45 deep berry (Dose pink #ff6b98 family) */ } body.adm[data-brand="homebit"] { --navy: #1f4b58; --navy-2: #2b6272; --accent: #7cc3d6; --chrome-rgb: 31, 75, 88; --p: 38.78% 0.0528 220.07; /* #1f4b58 deep teal (HomeBit #4A90A4 family) */ } body.adm[data-brand="winzos"] { --navy: #6B2F86; --navy-2: #7E3A9C; --accent: #FCD34D; --chrome-rgb: 107, 47, 134; --p: 42.77% 0.1464 313.74; /* #6B2F86 Winzos deep purple */ } /* ── Shell: fixed navy sidebar + scrolling main column ─────────────────────── */ .adm-shell { display: flex; min-height: 100vh; } .adm-sidebar { position: fixed; inset: 0 auto 0 0; width: 236px; z-index: 50; background: var(--navy); color: #fff; display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, 0.06); transform: translateX(0); transition: transform 0.2s ease; } .adm-main { flex: 1; min-width: 0; margin-left: 236px; } .adm-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; font-weight: 700; letter-spacing: -0.01em; } .adm-brand img { width: 26px; height: 26px; border-radius: 7px; } .adm-brand small { display: block; font-weight: 500; font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; } .adm-nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; } .adm-nav-group { margin-top: 14px; } .adm-nav-label { padding: 0 10px 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.42); } .adm-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: rgba(255, 255, 255, 0.78); text-decoration: none; } .adm-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .adm-nav a.active { background: rgba(255, 255, 255, 0.11); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); } .adm-nav a svg { width: 16px; height: 16px; opacity: 0.85; flex-shrink: 0; } .adm-nav .adm-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #fab219; color: #0b0b0b; } .adm-sidebar-foot { padding: 12px 18px 16px; font-size: 11px; color: rgba(255, 255, 255, 0.45); border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Signed-in staff + sign out (admin.bajaar.com session) */ .adm-staff { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.8); margin-bottom: 6px; min-width: 0; } .adm-staff span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-staff svg, .adm-staff-actions svg { width: 13px; height: 13px; flex-shrink: 0; } .adm-staff-actions { display: flex; gap: 12px; margin-bottom: 8px; } .adm-staff-actions a, .adm-staff-actions button { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: rgba(255, 255, 255, 0.65); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; } .adm-staff-actions a:hover, .adm-staff-actions button:hover { color: #fff; } /* Mobile: sidebar slides in over content */ .adm-topbar { display: none; } .adm-scrim { display: none; } @media (max-width: 1023px) { .adm-sidebar { transform: translateX(-100%); } .adm-shell.nav-open .adm-sidebar { transform: translateX(0); } .adm-shell.nav-open .adm-scrim { display: block; position: fixed; inset: 0; background: rgba(var(--chrome-rgb), 0.35); z-index: 40; } .adm-main { margin-left: 0; } .adm-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 35; } } /* ── Page header + sticky filter row ───────────────────────────────────────── */ .adm-page-head { background: var(--surface-1); border-bottom: 1px solid var(--border); } .adm-page-head-inner { max-width: 1600px; margin: 0 auto; padding: 20px 24px 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } .adm-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; } .adm-eyebrow a { color: var(--text-secondary); text-decoration: none; } .adm-eyebrow a:hover { color: var(--text-primary); text-decoration: underline; } .adm-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .adm-subtitle { font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; } .adm-content { max-width: 1600px; margin: 0 auto; padding: 24px; } .filter-bar { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); background: rgba(244, 244, 241, 0.9); border-bottom: 1px solid var(--border); } @media (max-width: 1023px) { .filter-bar { top: 48px; } } .filter-bar-inner { max-width: 1600px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* ── Panels, KPI tiles ─────────────────────────────────────────────────────── */ .panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .panel-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .panel-sub { font-size: 12.5px; color: var(--text-secondary); } .kpi-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .kpi-foot { font-size: 12px; color: var(--text-muted); } a.kpi-link { display: block; color: inherit; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; } a.kpi-link:hover { box-shadow: 0 6px 20px rgba(var(--chrome-rgb), 0.08); transform: translateY(-1px); } .kpi-spark { height: 36px; margin-top: 6px; } /* Segmented control (range presets, view toggles) */ .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-1); } .seg button { padding: 6px 12px; font-size: 13px; color: var(--text-secondary); } .seg button + button { border-left: 1px solid var(--border); } .seg button.on { background: var(--navy); color: #fff; font-weight: 600; } .chart { width: 100%; } .loading-hold { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; } /* ── Tables (sortable) ─────────────────────────────────────────────────────── */ table.dt { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; } table.dt th { position: sticky; top: 0; background: var(--surface-1); font-weight: 600; font-size: 12px; color: var(--text-secondary); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; } table.dt th.sortable { cursor: pointer; user-select: none; } table.dt th.num, table.dt td.num { text-align: right; font-variant-numeric: tabular-nums; } table.dt th .arrow { opacity: 0.35; margin-left: 4px; } table.dt th.sorted .arrow { opacity: 1; color: var(--text-primary); } table.dt td { padding: 8px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; vertical-align: middle; } table.dt td.wrap { white-space: normal; min-width: 180px; } table.dt tr:hover td { background: #f7f7f4; } table.dt tr.clickable { cursor: pointer; } table.dt tr.selected td { background: #eef5fd; } table.dt tr.low-n td { color: var(--text-muted); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .truncate-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .bar-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .bar-track { width: 70px; height: 6px; background: var(--hair); border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; background: var(--series-1); border-radius: 4px; } .split { display: flex; width: 110px; height: 6px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--surface-1); } .split span { display: block; height: 100%; } /* Pager */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; font-size: 12.5px; color: var(--text-secondary); } .pager button { padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); } .pager button[disabled] { opacity: 0.4; cursor: default; } .pager button.on { background: var(--navy); color: #fff; border-color: var(--navy); } /* Bulk-action bar */ .bulk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #eef5fd; border: 1px solid rgba(42, 120, 214, 0.3); font-size: 13px; } /* ── Pills + status (status always carries a dot/icon + label, never color alone) ─ */ .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); background: #fff; white-space: nowrap; } .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; } .status::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--text-muted); } .status.good::before { background: var(--good); } .status.warning::before { background: var(--warning); } .status.serious::before { background: var(--serious); } .status.critical::before { background: var(--critical); } .status.info::before { background: var(--series-1); } /* Live indicator */ .live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good); animation: adm-pulse 1.8s infinite; } .live-dot.off { background: var(--text-muted); animation: none; } @keyframes adm-pulse { 0% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(12, 163, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); } } /* Toasts */ .adm-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; } .adm-toast { min-width: 240px; max-width: 420px; padding: 10px 14px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 13px; box-shadow: 0 10px 30px rgba(var(--chrome-rgb), 0.25); display: flex; align-items: center; gap: 8px; animation: adm-toast-in 0.2s ease-out; } .adm-toast.error { background: #7f1d1d; } .adm-toast.success::before, .adm-toast.error::before, .adm-toast.info::before { content: ''; width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; } .adm-toast.success::before { background: var(--good); } .adm-toast.error::before { background: #fca5a5; } .adm-toast.info::before { background: #86b6ef; } @keyframes adm-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Tabs (underline style) */ .adm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--grid); overflow-x: auto; } .adm-tabs button { padding: 9px 12px; font-size: 13.5px; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .adm-tabs button:hover { color: var(--text-primary); } .adm-tabs button.on { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--navy); } /* Key/value definition lists in detail views */ .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; } .kv dt { color: var(--text-secondary); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* Empty state */ .empty { text-align: center; padding: 36px 12px; color: var(--text-muted); font-size: 13px; }