/* ========================================================================== Design system — hand authored, no build step, no external CSS dependency. Drop-in: Direction handling uses CSS logical properties (margin-inline, inset-inline, border-start-*) throughout, so RTL and LTR share one stylesheet instead of maintaining a mirrored copy. Set dir="rtl" or dir="ltr" on and every component flips correctly. Contents 01. Tokens 02. Reset and base 03. Typography 04. App shell 05. Sidebar and navigation 06. Cards and surfaces 07. Statistics 08. Buttons 09. Badges and pills 10. Tables and data lists 11. Forms and switches 12. Alerts 13. Conversation bubbles 14. Meters and bars 15. Tabs and pagination 16. Empty states 17. Utilities 18. Dark theme 19. Print and motion preferences ========================================================================== */ /* == 01. Tokens =========================================================== */ :root { /* Neutral ramp. Slightly blue-tinted greys read as "designed" rather than muddy, and keep text comfortable over long sessions. */ --c-bg: #f7f8fa; --c-bg-subtle: #eef0f4; --c-surface: #ffffff; --c-surface-2: #fbfcfd; --c-surface-hover: #f4f6f8; --c-border: #e4e7ec; --c-border-strong: #d3d8e0; --c-text: #1a1f2b; --c-text-soft: #5a6478; --c-text-muted: #8b95a8; --c-text-inverse: #ffffff; /* Brand: a calm indigo-blue. Used for primary actions and active nav. */ --c-brand: #3b5bdb; --c-brand-hover: #324cc0; --c-brand-soft: #edf1fe; --c-brand-border: #c7d3fa; --c-brand-text: #2f47a8; /* Semantic */ --c-ok: #0f9b6c; --c-ok-soft: #e7f7f1; --c-ok-border: #b6e5d3; --c-warn: #b7791f; --c-warn-soft: #fdf6e6; --c-warn-border: #f0dcae; --c-danger: #d1414b; --c-danger-soft: #fdeded; --c-danger-border: #f5c2c5; --c-info: #2a7fb8; --c-info-soft: #eaf5fb; --c-info-border: #b8dcef; --c-accent: #7c5cd6; --c-accent-soft: #f3effc; --c-accent-border: #d9cdf5; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* Elevation. Kept shallow: a soft admin UI should feel flat and calm, with shadow used to separate layers, not to decorate. */ --sh-xs: 0 1px 2px rgba(16, 24, 40, .04); --sh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --sh-md: 0 4px 12px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04); --sh-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 4px 8px rgba(16, 24, 40, .04); /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* Layout */ --sidebar-w: 264px; --topbar-h: 60px; --bottombar-h: 62px; --content-max: 1400px; --transition: 160ms cubic-bezier(.4, 0, .2, 1); /* Arabic first, then Latin, then system. Cairo and Inter are loaded as webfonts in the layout; the fallbacks are deliberately real fonts that exist on Windows, macOS and Android so the page never renders in a default serif while the webfont loads. */ --font-ar: 'Cairo', 'Segoe UI', 'Geeza Pro', 'Noto Sans Arabic', 'Tahoma', system-ui, sans-serif; --font-en: 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; } /* == 02. Reset and base =================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-en); font-size: 14px; line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; min-height: 100dvh; } [dir="rtl"] body { font-family: var(--font-ar); } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: var(--c-brand); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { padding-inline-start: 1.25em; } /* Visible focus for keyboard users only. A form-heavy admin panel is used with the keyboard constantly, so this matters more than usual. */ :focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--c-brand-soft); color: var(--c-brand-text); } /* Thin scrollbars so inner scroll areas do not shout. */ * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-full); } *::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); } /* == 03. Typography ======================================================= */ h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; color: var(--c-text); } h1 { font-size: 22px; letter-spacing: -.01em; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13px; } .page-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .page-lead { color: var(--c-text-soft); font-size: 13.5px; max-width: 68ch; margin-block-start: var(--s-2); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); } .mono { font-family: var(--font-mono); font-size: .92em; } /* Numbers, ids and tokens always read left-to-right, even inside Arabic. */ .ltr { direction: ltr; unicode-bidi: isolate; text-align: start; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-2 { -webkit-line-clamp: 2; } .clamp-3 { -webkit-line-clamp: 3; } /* == 04. App shell ======================================================== */ .shell { min-height: 100vh; min-height: 100dvh; } .shell-main { /* Sidebar is fixed, so the content is offset by its width on desktop. Logical padding means this becomes padding-right under RTL for free. */ padding-inline-start: 0; padding-block-end: calc(var(--bottombar-h) + var(--s-6)); transition: padding var(--transition); } .content { max-width: var(--content-max); margin-inline: auto; padding: var(--s-4); } .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-5); } .page-head-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* == 05. Sidebar and navigation =========================================== */ /* --- mobile top bar --- */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-4); background: color-mix(in srgb, var(--c-surface) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-block-end: 1px solid var(--c-border); } .topbar-spacer { flex: 1; } .brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: 15px; color: var(--c-text); } .brand:hover { text-decoration: none; } .brand-mark { width: 30px; height: 30px; flex: none; border-radius: 9px; background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-accent) 100%); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; box-shadow: var(--sh-sm); } .icon-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); color: var(--c-text-soft); border: 1px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); } .icon-btn:hover { background: var(--c-surface-hover); color: var(--c-text); border-color: var(--c-border); } .icon-btn svg { width: 18px; height: 18px; } /* --- sidebar --- */ .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; width: var(--sidebar-w); display: flex; flex-direction: column; background: var(--c-surface); border-inline-end: 1px solid var(--c-border); /* Off-canvas by default; revealed by the drawer toggle or at >= lg. */ transform: translateX(-100%); transition: transform var(--transition); } [dir="rtl"] .sidebar { transform: translateX(100%); } .sidebar.is-open { transform: translateX(0); } .sidebar-head { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-inline: var(--s-4); border-block-end: 1px solid var(--c-border); flex: none; } .sidebar-body { flex: 1; overflow-y: auto; padding: var(--s-3); } .sidebar-foot { flex: none; padding: var(--s-3); border-block-start: 1px solid var(--c-border); } .nav-group + .nav-group { margin-block-start: var(--s-5); } .nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-muted); padding-inline: var(--s-3); margin-block-end: var(--s-2); } .nav-link { display: flex; align-items: center; gap: var(--s-3); padding: 9px var(--s-3); border-radius: var(--r-md); color: var(--c-text-soft); font-size: 13.5px; font-weight: 500; transition: background var(--transition), color var(--transition); position: relative; } .nav-link:hover { background: var(--c-surface-hover); color: var(--c-text); text-decoration: none; } .nav-link + .nav-link { margin-block-start: 2px; } .nav-link svg { width: 18px; height: 18px; flex: none; opacity: .8; } .nav-link.is-active { background: var(--c-brand-soft); color: var(--c-brand-text); font-weight: 600; } .nav-link.is-active svg { opacity: 1; } /* Active marker on the inline start edge, flips automatically. */ .nav-link.is-active::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 20%; width: 3px; border-radius: var(--r-full); background: var(--c-brand); } .nav-count { margin-inline-start: auto; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--c-bg-subtle); color: var(--c-text-soft); } .nav-link.is-active .nav-count { background: #fff; color: var(--c-brand-text); } .nav-count.is-alert { background: var(--c-danger-soft); color: var(--c-danger); } /* --- user block --- */ .user-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); } .avatar { width: 34px; height: 34px; flex: none; border-radius: var(--r-full); object-fit: cover; background: var(--c-bg-subtle); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--c-text-soft); } .avatar-sm { width: 26px; height: 26px; font-size: 11px; } .avatar-lg { width: 44px; height: 44px; font-size: 16px; } .avatar-sq { border-radius: 9px; } .user-meta { min-width: 0; flex: 1; } .user-name { font-size: 13px; font-weight: 600; } .user-sub { font-size: 11.5px; color: var(--c-text-muted); } /* --- drawer scrim --- */ .scrim { position: fixed; inset: 0; z-index: 50; background: rgba(16, 24, 40, .45); opacity: 0; pointer-events: none; transition: opacity var(--transition); } .scrim.is-open { opacity: 1; pointer-events: auto; } /* --- mobile bottom bar --- */ /* Five primary destinations, thumb-reachable. This is the only navigation on phones, so it must always be present rather than hidden behind a menu. */ .bottombar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; height: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); padding-block-end: env(safe-area-inset-bottom); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-block-start: 1px solid var(--c-border); } .bottombar-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--c-text-muted); padding-block: 6px; } .bottombar-link:hover { text-decoration: none; } .bottombar-link svg { width: 21px; height: 21px; } .bottombar-link.is-active { color: var(--c-brand); } /* == 06. Cards and surfaces =============================================== */ .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); } .card-pad { padding: var(--s-4); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--c-border); } .card-head h2, .card-head h3 { font-size: 14px; } .card-body { padding: var(--s-4); } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-block-start: 1px solid var(--c-border); background: var(--c-surface-2); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); } .card-hover { transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .card-hover:hover { box-shadow: var(--sh-md); border-color: var(--c-border-strong); } .divider { height: 1px; background: var(--c-border); border: 0; margin-block: var(--s-4); } /* == 07. Statistics ======================================================= */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); } .stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-xs); display: flex; flex-direction: column; gap: var(--s-2); transition: box-shadow var(--transition), transform var(--transition); } .stat:hover { box-shadow: var(--sh-sm); } .stat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .stat-label { font-size: 12px; font-weight: 500; color: var(--c-text-soft); line-height: 1.35; } .stat-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--c-bg-subtle); color: var(--c-text-soft); } .stat-icon svg { width: 16px; height: 16px; } .stat-value { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-note { font-size: 11.5px; color: var(--c-text-muted); } /* Tone variants tint only the icon, keeping the number readable. */ .stat--ok .stat-icon { background: var(--c-ok-soft); color: var(--c-ok); } .stat--ok .stat-value { color: var(--c-ok); } .stat--warn .stat-icon { background: var(--c-warn-soft); color: var(--c-warn); } .stat--warn .stat-value { color: var(--c-warn); } .stat--danger .stat-icon { background: var(--c-danger-soft); color: var(--c-danger); } .stat--danger .stat-value { color: var(--c-danger); } .stat--info .stat-icon { background: var(--c-info-soft); color: var(--c-info); } .stat--info .stat-value { color: var(--c-info); } .stat--accent .stat-icon { background: var(--c-accent-soft); color: var(--c-accent); } .stat--accent .stat-value { color: var(--c-accent); } .stat--brand .stat-icon { background: var(--c-brand-soft); color: var(--c-brand); } /* == 08. Buttons ========================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); box-shadow: var(--sh-xs); } .btn:hover { background: var(--c-surface-hover); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn svg { width: 16px; height: 16px; flex: none; } .btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; } .btn--primary { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-text-inverse); } .btn--primary:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); } .btn--meta { background: #1877f2; border-color: #1877f2; color: #fff; } .btn--meta:hover { background: #1568d8; border-color: #1568d8; } .btn--danger { color: var(--c-danger); border-color: var(--c-danger-border); background: var(--c-surface); } .btn--danger:hover { background: var(--c-danger-soft); } .btn--danger-solid { background: var(--c-danger); border-color: var(--c-danger); color: #fff; } .btn--danger-solid:hover { background: #b8353e; border-color: #b8353e; } .btn--ok { color: var(--c-ok); border-color: var(--c-ok-border); } .btn--ok:hover { background: var(--c-ok-soft); } .btn--ok-solid { background: var(--c-ok); border-color: var(--c-ok); color: #fff; } .btn--ok-solid:hover { background: #0c8760; border-color: #0c8760; } .btn--warn { color: var(--c-warn); border-color: var(--c-warn-border); } .btn--warn:hover { background: var(--c-warn-soft); } .btn--ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--c-text-soft); } .btn--ghost:hover { background: var(--c-surface-hover); color: var(--c-text); } .btn--sm { padding: 5px 10px; font-size: 12px; border-radius: var(--r-sm); } .btn--lg { padding: 11px 20px; font-size: 14px; } .btn--block { width: 100%; } .btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); } /* == 09. Badges and pills ================================================= */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-bg-subtle); color: var(--c-text-soft); font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; } .badge--ok { background: var(--c-ok-soft); border-color: var(--c-ok-border); color: var(--c-ok); } .badge--warn { background: var(--c-warn-soft); border-color: var(--c-warn-border); color: var(--c-warn); } .badge--danger { background: var(--c-danger-soft); border-color: var(--c-danger-border); color: var(--c-danger); } .badge--info { background: var(--c-info-soft); border-color: var(--c-info-border); color: var(--c-info); } .badge--accent { background: var(--c-accent-soft); border-color: var(--c-accent-border); color: var(--c-accent); } .badge--brand { background: var(--c-brand-soft); border-color: var(--c-brand-border); color: var(--c-brand-text); } /* Status dot, for at-a-glance health without reading the label. */ .dot { width: 7px; height: 7px; border-radius: var(--r-full); flex: none; background: var(--c-text-muted); } .dot--ok { background: var(--c-ok); } .dot--warn { background: var(--c-warn); } .dot--danger { background: var(--c-danger); } .dot--live { background: var(--c-ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-ok) 60%, transparent); animation: pulse 2s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* == 10. Tables and data lists ============================================ */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table thead th { text-align: start; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); background: var(--c-surface-2); padding: 10px var(--s-3); border-block-end: 1px solid var(--c-border); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .table tbody td { padding: 11px var(--s-3); border-block-end: 1px solid var(--c-border); vertical-align: middle; } .table tbody tr:last-child td { border-block-end: 0; } .table tbody tr { transition: background var(--transition); } .table tbody tr:hover { background: var(--c-surface-hover); } .table .num { font-variant-numeric: tabular-nums; text-align: end; } .table .center { text-align: center; } .table .top td, .table td.top { vertical-align: top; } .table .nowrap { white-space: nowrap; } .cell-title { font-weight: 600; } .cell-sub { font-size: 11.5px; color: var(--c-text-muted); margin-block-start: 2px; } .cell-stack { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } /* Key/value list, used as the mobile replacement for a wide table row. */ .kv { display: grid; gap: var(--s-2); } .kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: 12.5px; } .kv-key { color: var(--c-text-muted); flex: none; } .kv-val { text-align: end; min-width: 0; } /* Mobile card list. Hidden on wide screens where the table is better. */ .record-list { display: grid; gap: var(--s-3); } .record { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-xs); } .record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); margin-block-end: var(--s-2); } /* == 11. Forms and switches =============================================== */ .field { display: block; } .field + .field { margin-block-start: var(--s-3); } .label { display: block; font-size: 12px; font-weight: 600; color: var(--c-text-soft); margin-block-end: 5px; } .hint { font-size: 11.5px; color: var(--c-text-muted); margin-block-start: 5px; } .input, .select, .textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); font-size: 13px; color: var(--c-text); transition: border-color var(--transition), box-shadow var(--transition); } .input:hover, .select:hover, .textarea:hover { border-color: var(--c-text-muted); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); } .input::placeholder, .textarea::placeholder { color: var(--c-text-muted); } .textarea { resize: vertical; min-height: 76px; line-height: 1.6; } .select { appearance: none; padding-inline-end: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 15px; background-position: right 10px center; } [dir="rtl"] .select { background-position: left 10px center; } .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); padding: var(--s-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); } .filter-bar .field { min-width: 140px; flex: 1 1 140px; margin: 0; } .filter-bar .btn { flex: none; } /* Checkbox and radio, restyled without losing native behaviour. */ .check { appearance: none; width: 17px; height: 17px; flex: none; border: 1.5px solid var(--c-border-strong); border-radius: 5px; background: var(--c-surface); display: grid; place-content: center; transition: background var(--transition), border-color var(--transition); } .check:hover { border-color: var(--c-brand); } .check:checked { background: var(--c-brand); border-color: var(--c-brand); } .check:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-inline-end: 0; transform: rotate(-45deg) translateY(-1px); } .check-row { display: flex; align-items: center; gap: var(--s-2); font-size: 12.5px; cursor: pointer; padding-block: 3px; } /* Switch. Used for the many on/off toggles across pages and channels. */ .switch { appearance: none; width: 38px; height: 22px; flex: none; border-radius: var(--r-full); background: var(--c-border-strong); position: relative; cursor: pointer; transition: background var(--transition); } .switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: var(--r-full); background: #fff; box-shadow: var(--sh-sm); transition: transform var(--transition); } .switch:checked { background: var(--c-ok); } .switch:checked::after { transform: translateX(16px); } [dir="rtl"] .switch:checked::after { transform: translateX(-16px); } .switch[disabled] { opacity: .45; cursor: not-allowed; } /* Submit-on-click toggle rendered as a button, for progressive enhancement free forms. Looks like a switch, behaves like a form submit. */ .toggle-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 9px 4px 5px; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-bg-subtle); color: var(--c-text-soft); font-size: 11.5px; font-weight: 600; transition: background var(--transition), border-color var(--transition), color var(--transition); } .toggle-btn::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-text-muted); flex: none; margin-inline-start: 3px; } .toggle-btn:hover { border-color: var(--c-border-strong); } .toggle-btn.is-on { background: var(--c-ok-soft); border-color: var(--c-ok-border); color: var(--c-ok); } .toggle-btn.is-on::before { background: var(--c-ok); } .toggle-btn.is-accent.is-on { background: var(--c-accent-soft); border-color: var(--c-accent-border); color: var(--c-accent); } .toggle-btn.is-accent.is-on::before { background: var(--c-accent); } .toggle-btn[disabled] { opacity: .5; } /* == 12. Alerts =========================================================== */ .alert { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface); font-size: 13px; box-shadow: var(--sh-xs); } .alert + .alert { margin-block-start: var(--s-2); } .alert svg { width: 18px; height: 18px; flex: none; margin-block-start: 1px; } .alert--ok { background: var(--c-ok-soft); border-color: var(--c-ok-border); color: #0a6b4b; } .alert--warn { background: var(--c-warn-soft); border-color: var(--c-warn-border); color: #8a5a12; } .alert--danger { background: var(--c-danger-soft); border-color: var(--c-danger-border); color: #9c2f37; } .alert--info { background: var(--c-info-soft); border-color: var(--c-info-border); color: #1e5f8c; } .alert-stack { margin-block-end: var(--s-4); } /* == 13. Conversation bubbles ============================================= */ .thread { display: flex; flex-direction: column; gap: var(--s-3); max-height: 30rem; overflow-y: auto; padding-inline-end: var(--s-1); } .bubble-row { display: flex; } .bubble-row.is-in { justify-content: flex-start; } .bubble-row.is-out { justify-content: flex-end; } .bubble { max-width: min(78%, 520px); padding: 9px var(--s-3); border-radius: var(--r-lg); font-size: 13px; line-height: 1.65; border: 1px solid transparent; } .bubble-row.is-in .bubble { background: var(--c-bg-subtle); border-color: var(--c-border); border-start-start-radius: var(--r-sm); } .bubble-row.is-out .bubble { background: var(--c-brand-soft); border-color: var(--c-brand-border); color: var(--c-brand-text); border-start-end-radius: var(--r-sm); } .bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; } .bubble-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: 5px; font-size: 10.5px; color: var(--c-text-muted); opacity: .9; } /* Decision trail entries beside the transcript. */ .trace { display: flex; flex-direction: column; gap: var(--s-3); max-height: 30rem; overflow-y: auto; } .trace-item { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3); background: var(--c-surface-2); font-size: 12.5px; } .trace-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-block-end: var(--s-2); } .trace-line { color: var(--c-text-soft); } .trace-line + .trace-line { margin-block-start: 3px; } .trace-line--muted { color: var(--c-text-muted); } .trace-line--error { color: var(--c-danger); } /* == 14. Meters and bars ================================================== */ /* Window countdown. A bar communicates "running out" faster than a number. */ .meter { height: 5px; border-radius: var(--r-full); background: var(--c-bg-subtle); overflow: hidden; } .meter-fill { height: 100%; border-radius: var(--r-full); background: var(--c-ok); transition: width var(--transition); } .meter-fill--warn { background: var(--c-warn); } .meter-fill--danger { background: var(--c-danger); } .meter-fill--empty { background: var(--c-border-strong); } /* Horizontal distribution bars for the "rule vs AI" breakdown. */ .bar-list { display: grid; gap: var(--s-3); } .bar-item { display: grid; gap: 5px; } .bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); font-size: 12.5px; } .bar-value { font-weight: 700; font-variant-numeric: tabular-nums; } .bar-track { height: 7px; border-radius: var(--r-full); background: var(--c-bg-subtle); overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--r-full); background: var(--c-brand); } .bar-fill--accent { background: var(--c-accent); } .bar-fill--ok { background: var(--c-ok); } .bar-fill--warn { background: var(--c-warn); } .bar-fill--muted { background: var(--c-border-strong); } /* == 15. Tabs and pagination ============================================== */ .tabs { display: flex; gap: var(--s-1); padding: 3px; background: var(--c-bg-subtle); border-radius: var(--r-md); overflow-x: auto; width: fit-content; max-width: 100%; } .tab { padding: 6px 13px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; color: var(--c-text-soft); white-space: nowrap; transition: background var(--transition), color var(--transition); } .tab:hover { color: var(--c-text); text-decoration: none; } .tab.is-active { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-xs); } /* Paginator. Markup comes from resources/views/vendor/pagination/custom.blade.php */ .pagination-wrap { margin-block-start: var(--s-4); } .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); } .pager-info { font-size: 12.5px; color: var(--c-text-muted); } .pager-links { display: flex; align-items: center; gap: var(--s-1); } .pager-numbers { display: none; align-items: center; gap: var(--s-1); } .pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding-inline: 10px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text-soft); transition: background var(--transition), border-color var(--transition), color var(--transition); } .pager-btn:hover { background: var(--c-surface-hover); color: var(--c-text); text-decoration: none; } .pager-btn.is-current { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-text-inverse); } .pager-btn.is-disabled { opacity: .45; pointer-events: none; } /* The chevron icon points inline-end by default, so "previous" is flipped. Under RTL the whole axis inverts, which is what these two rules encode. */ .pager-btn svg { transform: rotate(180deg); } [dir="rtl"] .pager-btn svg { transform: rotate(0deg); } .pager-next svg { transform: rotate(0deg); } [dir="rtl"] .pager-next svg { transform: rotate(180deg); } .pager-gap { padding-inline: 6px; color: var(--c-text-muted); font-size: 12.5px; } @media (min-width: 560px) { .pager-numbers { display: flex; } } /* == 16. Empty states ===================================================== */ .empty { padding: var(--s-10) var(--s-4); text-align: center; } .empty-icon { width: 46px; height: 46px; margin-inline: auto; margin-block-end: var(--s-3); border-radius: var(--r-lg); display: grid; place-items: center; background: var(--c-bg-subtle); color: var(--c-text-muted); } .empty-icon svg { width: 22px; height: 22px; } .empty-title { font-size: 14px; font-weight: 600; } .empty-text { font-size: 12.5px; color: var(--c-text-muted); margin-block-start: var(--s-2); max-width: 44ch; margin-inline: auto; } .empty-actions { margin-block-start: var(--s-4); } /* == 15a. Rule list ======================================================= */ .rule-list { display: grid; gap: var(--s-3); } .rule { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3); background: var(--c-surface-2); /* Enabled rules carry a coloured start edge, so a glance down the list shows what is actually live. */ border-inline-start: 3px solid var(--c-border-strong); transition: border-color var(--transition), background var(--transition); } .rule.is-on { background: var(--c-surface); border-inline-start-color: var(--c-ok); } .rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .rule-reply { margin-block-start: var(--s-2); font-size: 12.5px; color: var(--c-text-soft); background: var(--c-bg-subtle); border-radius: var(--r-sm); padding: 7px var(--s-3); } .rule-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-block-start: var(--s-3); padding-block-start: var(--s-2); border-block-start: 1px solid var(--c-border); } .chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-block-start: var(--s-2); } .chip { font-size: 11.5px; font-family: var(--font-mono); padding: 2px 7px; border-radius: var(--r-sm); background: var(--c-brand-soft); color: var(--c-brand-text); border: 1px solid var(--c-brand-border); } .chip--muted { background: var(--c-bg-subtle); color: var(--c-text-muted); border-color: var(--c-border); } /* Two-up form rows that collapse on phones. */ .field-row { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } .field-row .field { margin: 0; } .field-row + .field, .field + .field-row { margin-block-start: var(--s-3); } .check-grid { display: grid; grid-template-columns: 1fr; gap: 2px; } @media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* == 15b. Page cards (pages & channels screen) ============================ */ /* One card per Facebook page. Cards rather than a wide table because each page carries five channel toggles plus controls, which no phone-width table can show without horizontal scrolling. */ .page-cards { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } .page-card { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-4); background: var(--c-surface-2); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .page-card.is-active { background: var(--c-surface); border-color: var(--c-brand-border); box-shadow: var(--sh-sm); } .page-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .page-card-health { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-4); padding-block: var(--s-3); border-block: 1px solid var(--c-border); } .health-item { display: flex; align-items: center; gap: var(--s-2); } .health-key { font-size: 11.5px; color: var(--c-text-muted); } .page-card-section { margin-block-start: var(--s-4); } .chan-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-2); } .chan { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 7px var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); transition: border-color var(--transition), background var(--transition); } .chan.is-on { border-color: var(--c-ok-border); background: var(--c-ok-soft); } .chan.is-unavailable { opacity: .6; } .chan-name { display: flex; align-items: center; gap: var(--s-2); font-size: 12.5px; font-weight: 600; min-width: 0; } .chan-name svg { flex: none; opacity: .65; } .chan.is-on .chan-name { color: var(--c-ok); } .chan.is-on .chan-name svg { opacity: 1; } .page-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-4); padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-border); } @media (min-width: 640px) { .chan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .page-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1600px) { .page-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chan-grid { grid-template-columns: 1fr; } } /* == 16b. Auth screen ===================================================== */ .auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; } .auth-aside { display: none; } .auth-main { display: flex; flex-direction: column; justify-content: center; padding: var(--s-6) var(--s-4); } .auth-box { width: 100%; max-width: 400px; margin-inline: auto; } .auth-brand { display: flex; align-items: center; gap: var(--s-3); margin-block-end: var(--s-8); } .auth-brand .brand-mark { width: 38px; height: 38px; font-size: 17px; border-radius: 11px; } .auth-brand-name { font-size: 16px; font-weight: 700; } .auth-brand-sub { font-size: 12px; color: var(--c-text-muted); } .auth-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .auth-sub { color: var(--c-text-soft); font-size: 13.5px; margin-block-start: var(--s-2); } .auth-form { margin-block-start: var(--s-6); } .auth-form .field + .field { margin-block-start: var(--s-4); } .auth-form .input { padding: 10px 12px; font-size: 14px; } .auth-foot { margin-block-start: var(--s-6); padding-block-start: var(--s-4); border-block-start: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } @media (min-width: 900px) { .auth { grid-template-columns: 1fr 1fr; } /* Brand panel. Only shown where there is room for it to be an asset rather than a wall the user has to scroll past. */ .auth-aside { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-12) var(--s-10); color: #fff; background: radial-gradient(1200px 600px at 20% 10%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(150deg, #3b5bdb 0%, #4b48c9 45%, #7c5cd6 100%); position: relative; overflow: hidden; } .auth-aside::after { content: ''; position: absolute; inset-inline-end: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .07); } .auth-aside-title { font-size: 30px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; max-width: 22ch; } .auth-aside-text { margin-block-start: var(--s-4); font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .82); max-width: 44ch; } .auth-points { margin-block-start: var(--s-8); display: grid; gap: var(--s-4); } .auth-point { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 13.5px; } .auth-point svg { flex: none; margin-block-start: 2px; opacity: .9; } .auth-point-title { font-weight: 600; } .auth-point-text { color: rgba(255, 255, 255, .72); font-size: 12.5px; margin-block-start: 2px; } .auth-aside .brand-mark { background: rgba(255, 255, 255, .18); box-shadow: none; } .auth-note { font-size: 12px; color: rgba(255, 255, 255, .6); position: relative; z-index: 1; } .auth-main { padding: var(--s-12) var(--s-10); } } /* == 17. Utilities ======================================================== */ .grid { display: grid; gap: var(--s-4); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-sidebar { grid-template-columns: 1fr; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .wrap { flex-wrap: wrap; } .flex-1 { flex: 1; min-width: 0; } .gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .mt-2 { margin-block-start: var(--s-2); } .mt-3 { margin-block-start: var(--s-3); } .mt-4 { margin-block-start: var(--s-4); } .mt-5 { margin-block-start: var(--s-5); } .mb-2 { margin-block-end: var(--s-2); } .mb-3 { margin-block-end: var(--s-3); } .mb-4 { margin-block-end: var(--s-4); } .mb-5 { margin-block-end: var(--s-5); } .text-soft { color: var(--c-text-soft); } .text-muted { color: var(--c-text-muted); } .text-ok { color: var(--c-ok); } .text-warn { color: var(--c-warn); } .text-danger { color: var(--c-danger); } .text-accent { color: var(--c-accent); } .text-brand { color: var(--c-brand); } .text-xs { font-size: 11.5px; } .text-sm { font-size: 12.5px; } .text-end { text-align: end; } .text-center { text-align: center; } .bold { font-weight: 700; } .semibold { font-weight: 600; } .tnum { font-variant-numeric: tabular-nums; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .scroll-y { overflow-y: auto; } /* Progressive-enhancement helper: forms that only exist to be submitted by a button elsewhere in the document. */ .form-inline { display: contents; } /* == 18. Responsive ======================================================= */ /* --- >= 480px : roomier phones --- */ @media (min-width: 480px) { .content { padding: var(--s-5); } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } /* --- >= 768px : tablets. Tables become viable. --- */ @media (min-width: 768px) { body { font-size: 14px; } .content { padding: var(--s-6); } h1, .page-title { font-size: 24px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-only { display: initial; } .md-hidden { display: none !important; } /* Wide tables replace the mobile record cards. */ .table-view { display: block; } .card-view { display: none; } } /* --- >= 1024px : sidebar becomes permanent, no drawer --- */ @media (min-width: 1024px) { .sidebar { transform: translateX(0) !important; box-shadow: none; } .shell-main { padding-inline-start: var(--sidebar-w); padding-block-end: var(--s-8); } .topbar { display: none; } .bottombar { display: none; } .scrim { display: none !important; } .sidebar-close { display: none; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .lg-hidden { display: none !important; } } /* --- >= 1280px --- */ @media (min-width: 1280px) { .content { padding: var(--s-8) var(--s-6); } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); } } /* --- >= 1600px : wide monitors get a wider column, not endless whitespace --- */ @media (min-width: 1600px) { :root { --content-max: 1560px; } } /* Mobile defaults for the table/card swap, declared last so the 768px rule above wins on larger screens. */ @media (max-width: 767.98px) { .table-view { display: none; } .card-view { display: block; } .page-head-actions { width: 100%; } .page-head-actions .btn { flex: 1 1 auto; } .filter-bar .btn { width: 100%; } } /* == 19. Dark theme ======================================================= */ /* Opt-in via data-theme="dark" on , which the layout persists in localStorage. Automatic preference is honoured only when the user has not chosen explicitly. */ :root[data-theme="dark"] { --c-bg: #0f1219; --c-bg-subtle: #1a1f2b; --c-surface: #161b24; --c-surface-2: #1a2029; --c-surface-hover: #1f252f; --c-border: #262d3a; --c-border-strong: #37404f; --c-text: #e8ebf0; --c-text-soft: #a3adbe; --c-text-muted: #6e7889; --c-text-inverse: #0f1219; --c-brand: #6b86ec; --c-brand-hover: #7d95ef; --c-brand-soft: #1e2542; --c-brand-border: #33406e; --c-brand-text: #a8b8f5; --c-ok: #34c48f; --c-ok-soft: #12291f; --c-ok-border: #1f4736; --c-warn: #e0a13a; --c-warn-soft: #2a2113; --c-warn-border: #4a3a1c; --c-danger: #f0656f; --c-danger-soft: #2c1719; --c-danger-border: #4d2528; --c-info: #4fa8dd; --c-info-soft: #12242e; --c-info-border: #1e3f52; --c-accent: #a98cf0; --c-accent-soft: #221b34; --c-accent-border: #3b2f59; --sh-xs: 0 1px 2px rgba(0, 0, 0, .25); --sh-sm: 0 1px 3px rgba(0, 0, 0, .35); --sh-md: 0 4px 12px rgba(0, 0, 0, .40); --sh-lg: 0 12px 32px rgba(0, 0, 0, .50); } :root[data-theme="dark"] .alert--ok { color: #7fe0b8; } :root[data-theme="dark"] .alert--warn { color: #f0cd8c; } :root[data-theme="dark"] .alert--danger { color: #f7a3a9; } :root[data-theme="dark"] .alert--info { color: #9dd3f2; } :root[data-theme="dark"] .btn--primary, :root[data-theme="dark"] .btn--ok-solid, :root[data-theme="dark"] .btn--danger-solid { color: #0f1219; } :root[data-theme="dark"] .nav-link.is-active .nav-count { background: var(--c-brand-border); } :root[data-theme="dark"] .switch::after { background: #e8ebf0; } :root[data-theme="dark"] .check:checked::after { border-color: #0f1219; } :root[data-theme="dark"] .brand-mark { color: #0f1219; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } /* == 20. Motion and print ================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .sidebar, .topbar, .bottombar, .scrim, .page-head-actions, .filter-bar, .pagination-wrap { display: none !important; } .shell-main { padding: 0 !important; } .card, .stat { box-shadow: none; border-color: #ccc; } body { background: #fff; } }