/* ========================================================================== Coupon Ops — design system -------------------------------------------------------------------------- Single-file stylesheet organised in layers: 1. Reset & base — element normalisation 2. Design tokens — light + dark palettes, spacing, radius, shadow, font-size scale (all CSS custom properties so dark mode is a palette swap, not a selector rewrite) 3. Layout shell — .app__shell grid, sidebar, topbar, main 4. Components — cards, buttons, forms, tables, badges, alerts, pagination, timeline, tabs, etc. 5. Feature-specific blocks — dashboard grid, auth screen, campaign header/summary 6. Responsive overrides — consolidated media queries at the bottom so the reading order is "desktop first, adapt later" 7. RTL overrides — the very few places where logical properties cannot express the mirroring Theme switching: - The element carries data-theme="light|dark". The inline bootstrap script in layouts/main.php sets this BEFORE paint by reading localStorage (coupons.theme) so pages never flash the wrong palette on load. - prefers-color-scheme is respected when the user has not made an explicit choice (the bootstrap resolves "auto" to the OS pref). Direction switching: - The element carries dir="ltr|rtl", persisted in localStorage (coupons.dir). Almost all of this file uses CSS Logical Properties (margin-inline-*, padding-inline-*, inset-inline-*, border-inline-*) so the layout mirrors automatically. The "RTL overrides" section handles the small residue logical properties cannot express. Spacing rhythm: the --space-* scale is a 4px base. Prefer tokens over hard-coded pixel values so visual rhythm stays consistent. ========================================================================== */ /* ========================================================================== 1. Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; } html { font-family: var(--font-family); font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color 0.2s ease, color 0.2s ease; } body { background: var(--color-bg); } /* Sprint 10.2 — Arabic typeface override. `:lang(ar)` is a standards pseudo-class that matches any descendant of an element carrying lang="ar". Our layouts set lang on , so this rule cascades to every element on the page when the resolved locale is Arabic. The `:lang(ar)` axis (not `[dir="rtl"]`) is deliberate: a future Hebrew locale would ALSO be RTL but shouldn't use Cairo. */ :lang(ar) { font-family: var(--font-family-ar); } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--color-primary-600); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--color-primary-700); text-decoration: underline; } code, pre { font-family: var(--font-mono); font-size: var(--text-xs); } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: var(--radius-sm); } .text-muted { color: var(--color-text-muted); } /* ========================================================================== 2. Design tokens — light palette (default) ========================================================================== */ :root { /* Brand — indigo/violet, modern SaaS "trust + energy". */ --color-primary-50: #eef2ff; --color-primary-100: #e0e7ff; --color-primary-200: #c7d2fe; --color-primary-300: #a5b4fc; --color-primary-500: #6366f1; --color-primary-600: #4f46e5; --color-primary-700: #4338ca; --color-primary-800: #3730a3; /* Status semantics. */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-500: #10b981; --color-success-600: #059669; --color-success-700: #047857; --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; --color-danger-50: #fef2f2; --color-danger-100: #fee2e2; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-danger-700: #b91c1c; --color-info-50: #eff6ff; --color-info-100: #dbeafe; --color-info-500: #3b82f6; --color-info-600: #2563eb; --color-info-700: #1d4ed8; /* Neutrals — slate family. bg is the page floor; surfaces sit on top. */ --color-bg: #f6f7fb; --color-surface: #ffffff; --color-surface-alt: #f9fafb; --color-surface-muted: #f1f5f9; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --color-text: #0f172a; --color-text-muted: #475569; --color-text-subtle: #64748b; --color-text-invert: #ffffff; /* Sidebar keeps its own palette so it stays dark in light mode (the classic SaaS "inverted" sidebar look) and still reads cleanly in dark mode. */ --color-sidebar-bg: #0b1220; --color-sidebar-surface: #111b2e; --color-sidebar-border: #1e293b; --color-sidebar-text: #94a3b8; --color-sidebar-text-strong: #f8fafc; --color-sidebar-hover-bg: #1e293b; --color-sidebar-active-bg: rgba(99, 102, 241, 0.15); --color-sidebar-active-text: #c7d2fe; --color-sidebar-active-bar: var(--color-primary-500); /* Spacing — 4px base. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Typography. Arabic-friendly fallback chain so RTL text looks native even when Cairo hasn't loaded yet. */ --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", sans-serif; /* Sprint 10.2 — dedicated Arabic family. Inter has no Arabic glyphs, so without Cairo the browser falls through to whatever Arabic font the OS provides, which varies wildly across platforms. Cairo pairs visually with Inter for mixed Latin-in-Arabic strings (user names, brand names) and is loaded conditionally by the layout only when the resolved locale is Arabic. */ --font-family-ar: "Cairo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --leading-tight: 1.25; --leading-base: 1.55; --sidebar-width: 248px; --topbar-height: 64px; --content-max: 1320px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 10px -4px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 20px 40px -20px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08); --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.18); color-scheme: light; } /* ========================================================================== Dark palette -------------------------------------------------------------------------- Swap only the tokens that describe surfaces, text, borders, and shadows. All component rules below consume tokens, so the app re-skins entirely from this single block. ========================================================================== */ html[data-theme="dark"] { --color-bg: #070b14; --color-surface: #0f172a; --color-surface-alt: #111c33; --color-surface-muted: #15213d; --color-border: #1f2a44; --color-border-strong: #2c3a5a; --color-text: #e5e7eb; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; --color-text-invert: #0b1220; --color-sidebar-bg: #05080f; --color-sidebar-surface: #0b1220; --color-sidebar-border: #1f2a44; --color-sidebar-text: #94a3b8; --color-sidebar-text-strong: #f8fafc; --color-sidebar-hover-bg: #111b2e; --color-sidebar-active-bg: rgba(99, 102, 241, 0.18); --color-sidebar-active-text: #e0e7ff; /* 50-weight tints bleach on dark surfaces; use translucent primaries. */ --color-success-50: rgba(16, 185, 129, 0.12); --color-warning-50: rgba(245, 158, 11, 0.14); --color-danger-50: rgba(239, 68, 68, 0.14); --color-info-50: rgba(59, 130, 246, 0.14); --color-primary-50: rgba(99, 102, 241, 0.14); --color-primary-100: rgba(99, 102, 241, 0.22); --color-success-700: #6ee7b7; --color-warning-700: #fcd34d; --color-danger-700: #fca5a5; --color-info-700: #93c5fd; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 6px 14px -4px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 28px 48px -20px rgba(0, 0, 0, 0.65), 0 10px 20px -10px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.32); color-scheme: dark; } /* ========================================================================== 3. Layout shell -------------------------------------------------------------------------- Grid with a fixed-width sidebar column and a flexible main column. `inset-inline-start` pins the sidebar to the leading edge, which is `left` in LTR and `right` in RTL — no extra rules required. ========================================================================== */ .app { min-height: 100vh; background: var(--color-bg); color: var(--color-text); } .app__shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } .app__main { display: flex; flex-direction: column; min-width: 0; /* guard: prevents long tables from breaking grid. */ } .app__content { flex: 1; padding: var(--space-8) var(--space-8) var(--space-12); max-width: var(--content-max); width: 100%; margin-inline: auto; } /* ========================================================================== Sidebar ========================================================================== */ .sidebar { grid-column: 1; background: var(--color-sidebar-bg); color: var(--color-sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-inline-end: 1px solid var(--color-sidebar-border); z-index: 20; } .sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-block-end: 1px solid var(--color-sidebar-border); min-height: var(--topbar-height); } .sidebar__brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)); color: #fff; font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.02em; flex-shrink: 0; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35); } .sidebar__brand-name { color: var(--color-sidebar-text-strong); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.01em; } .sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3); } .sidebar__list { display: flex; flex-direction: column; gap: 2px; } .sidebar__section-label { padding: var(--space-3) var(--space-3) var(--space-1); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-sidebar-text); opacity: 0.6; } .sidebar__link { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-md); color: var(--color-sidebar-text); font-weight: 500; font-size: var(--text-sm); position: relative; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar__link:hover { background: var(--color-sidebar-hover-bg); color: var(--color-sidebar-text-strong); text-decoration: none; } .sidebar__link--active { background: var(--color-sidebar-active-bg); color: var(--color-sidebar-active-text); } .sidebar__link--active::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 20%; height: 60%; width: 3px; border-radius: var(--radius-pill); background: var(--color-sidebar-active-bar); } .sidebar__link-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; } .sidebar__link--active .sidebar__link-icon { opacity: 1; } .sidebar__close { display: none; /* only in drawer mode, see responsive section */ } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 15; backdrop-filter: blur(2px); } /* ========================================================================== Topbar ========================================================================== */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-8); height: var(--topbar-height); background: var(--color-surface); border-block-end: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.5) blur(6px); } .topbar__context { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .topbar__menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .topbar__menu-btn:hover { background: var(--color-surface-muted); color: var(--color-text); } .topbar__page { font-weight: 600; font-size: var(--text-md); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__actions { display: flex; align-items: center; gap: var(--space-2); } .topbar__iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 40px; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .topbar__iconbtn:hover { background: var(--color-surface-muted); color: var(--color-text); border-color: var(--color-border-strong); } .topbar__iconbtn svg { width: 18px; height: 18px; } .topbar__user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); } .topbar__user-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)); color: #fff; font-weight: 600; font-size: var(--text-sm); flex-shrink: 0; box-shadow: var(--shadow-xs); } .topbar__user-info { display: flex; flex-direction: column; line-height: 1.15; } .topbar__user-name { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); } .topbar__user-role { font-size: var(--text-xs); color: var(--color-text-subtle); text-transform: capitalize; } .topbar__logout { display: inline-flex; } /* ========================================================================== Page header ========================================================================== */ .page-header { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; justify-content: space-between; margin-block-end: var(--space-8); } .page-header__text { display: flex; flex-direction: column; gap: var(--space-2); } .page-header__title { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: -0.02em; color: var(--color-text); } .page-header__subtitle { color: var(--color-text-muted); font-size: var(--text-md); max-width: 72ch; } .page-header__actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; } /* ========================================================================== 4. Components ========================================================================== */ /* ---------- Layout utilities ---------- */ .stack { display: flex; flex-direction: column; gap: var(--space-6); } .stack--narrow { max-width: 760px; width: 100%; margin-inline: auto; } .stack--tight { gap: var(--space-3); } .cluster { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .grid { display: grid; gap: var(--space-6); } .grid--metrics { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } /* ---------- Cards ---------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .card__header { padding: var(--space-5) var(--space-6); border-block-end: 1px solid var(--color-border); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-1); } .card__title { font-size: var(--text-lg); line-height: var(--leading-tight); color: var(--color-text); } .card__subtitle { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 72ch; } .card__body { padding: var(--space-5) var(--space-6); } .card__footer { padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--color-border); background: var(--color-surface-alt); display: flex; gap: var(--space-3); justify-content: flex-end; } .card--warning { border-color: color-mix(in srgb, var(--color-warning-500) 35%, var(--color-border)); background: var(--color-warning-50); } .metric-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); position: relative; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .metric-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .metric-card__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); } .metric-card__value { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; color: var(--color-text); font-variant-numeric: tabular-nums; } .metric-card__hint { font-size: var(--text-sm); color: var(--color-text-muted); } .metric-card--good .metric-card__value { color: var(--color-success-700); } .metric-card--bad .metric-card__value { color: var(--color-danger-700); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); height: 40px; border-radius: var(--radius-md); border: 1px solid transparent; font-family: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn--primary { background: var(--color-primary-600); color: #fff; border-color: var(--color-primary-600); box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25); } .btn--primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); color: #fff; } .btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); } .btn--secondary:hover { background: var(--color-surface-muted); color: var(--color-text); } .btn--ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; } .btn--ghost:hover { background: var(--color-surface-muted); color: var(--color-text); } .btn--danger { background: var(--color-danger-600); color: #fff; border-color: var(--color-danger-600); } .btn--danger:hover { background: var(--color-danger-700); border-color: var(--color-danger-700); color: #fff; } .btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); } .btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-md); } .btn--block { width: 100%; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; } .badge--active, .badge--completed { background: var(--color-success-50); color: var(--color-success-700); border-color: color-mix(in srgb, var(--color-success-500) 25%, transparent); } .badge--paused { background: var(--color-warning-50); color: var(--color-warning-700); border-color: color-mix(in srgb, var(--color-warning-500) 25%, transparent); } .badge--inactive, .badge--archived, .badge--expired { background: var(--color-surface-muted); color: var(--color-text-muted); border-color: var(--color-border); } .badge--danger { background: var(--color-danger-50); color: var(--color-danger-700); border-color: color-mix(in srgb, var(--color-danger-500) 25%, transparent); } .badge--info { background: var(--color-info-50); color: var(--color-info-700); border-color: color-mix(in srgb, var(--color-info-500) 25%, transparent); } /* ---------- Forms ---------- */ .form { display: flex; flex-direction: column; gap: var(--space-5); } .form__field { display: flex; flex-direction: column; gap: var(--space-2); } .form__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .form__hint-inline { font-weight: 400; color: var(--color-text-subtle); margin-inline-start: var(--space-1); } .form__input { width: 100%; min-height: 42px; padding: 10px var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); color: var(--color-text); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .form__input::placeholder { color: var(--color-text-subtle); } .form__input:hover:not(:focus):not(:disabled) { border-color: var(--color-text-subtle); } .form__input:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-focus); } .form__input:disabled { background: var(--color-surface-muted); color: var(--color-text-subtle); cursor: not-allowed; } select.form__input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-subtle) 50%), linear-gradient(135deg, var(--color-text-subtle) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: var(--space-8); } html[dir="rtl"] select.form__input { background-position: 18px 50%, 13px 50%; padding-inline-start: var(--space-8); padding-inline-end: var(--space-4); } textarea.form__input { min-height: 96px; padding-block: var(--space-3); resize: vertical; } .form__error { color: var(--color-danger-700); font-size: var(--text-xs); margin: 0; } .form__input[aria-invalid="true"], .form__field--invalid .form__input { border-color: var(--color-danger-500); } .form__hint { color: var(--color-text-subtle); font-size: var(--text-xs); } .form__actions { display: flex; gap: var(--space-3); align-items: center; padding-block-start: var(--space-2); } /* ---------- Alerts ---------- */ .alert { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: var(--text-sm); line-height: var(--leading-base); display: flex; gap: var(--space-3); align-items: flex-start; } .alert--info { background: var(--color-info-50); color: var(--color-info-700); border-color: color-mix(in srgb, var(--color-info-500) 28%, transparent); } .alert--success { background: var(--color-success-50); color: var(--color-success-700); border-color: color-mix(in srgb, var(--color-success-500) 28%, transparent); } .alert--warning { background: var(--color-warning-50); color: var(--color-warning-700); border-color: color-mix(in srgb, var(--color-warning-500) 30%, transparent); } .alert--danger { background: var(--color-danger-50); color: var(--color-danger-700); border-color: color-mix(in srgb, var(--color-danger-500) 28%, transparent); } .flash-stack { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-6); } /* ---------- Tables ---------- */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); } .data-table thead th { font-weight: 600; text-align: start; padding: var(--space-3) var(--space-5); background: var(--color-surface-alt); color: var(--color-text-subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; border-block-end: 1px solid var(--color-border); white-space: nowrap; } .data-table tbody td { padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border); color: var(--color-text); vertical-align: middle; } .data-table tbody tr:last-child td { border-block-end: none; } .data-table tbody tr { transition: background-color 0.15s ease; } .data-table tbody tr:hover { background: var(--color-surface-alt); } .data-table a { color: var(--color-text); } .data-table a:hover { color: var(--color-primary-600); } .data-table strong { font-weight: 600; } .data-table__num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table__num--good { color: var(--color-success-700); font-weight: 600; } .data-table__num--bad { color: var(--color-danger-700); font-weight: 600; } .data-table__muted { color: var(--color-text-subtle); font-size: var(--text-xs); display: block; margin-block-start: 2px; } .data-table__actions { text-align: end; white-space: nowrap; } .data-table__actions .btn { margin-inline-start: var(--space-1); } /* ---------- Empty states ---------- */ .empty-state { padding: var(--space-12) var(--space-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .empty-state__title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); } .empty-state__body { color: var(--color-text-muted); max-width: 44ch; } /* ---------- Filters bar ---------- */ .filters-bar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); align-items: end; box-shadow: var(--shadow-xs); } .filters-bar label, .filters-bar .form__field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .filters-bar__search { grid-column: span 2; } .filters-bar__actions { display: inline-flex; gap: var(--space-2); align-self: end; justify-content: flex-end; } .date-presets { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; padding-block-start: var(--space-1); } /* ---------- Pagination ---------- */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); flex-wrap: wrap; } .pagination__controls { display: inline-flex; gap: var(--space-2); align-items: center; } .pagination__page { color: var(--color-text); font-weight: 600; padding: 0 var(--space-2); } /* ---------- Bulk actions ---------- */ .bulk-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--color-border); background: var(--color-surface-alt); } /* ---------- Tabs ---------- */ .tab-nav { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--color-border); margin-block-end: var(--space-4); overflow-x: auto; } .tab-nav__item { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .tab-nav__item:hover { color: var(--color-text); text-decoration: none; } .tab-nav__item--active { color: var(--color-primary-600); border-block-end-color: var(--color-primary-500); font-weight: 600; } /* ---------- Timeline list ---------- */ .timeline-list { display: flex; flex-direction: column; gap: var(--space-3); } .timeline-list__item { display: grid; grid-template-columns: 140px 1fr auto; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-block-end: 1px dashed var(--color-border); } .timeline-list__item:last-child { border-block-end: none; } .timeline-list__type { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-700); } .timeline-list__text { color: var(--color-text); } .timeline-list__meta { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; } html[data-theme="dark"] .timeline-list__type { color: var(--color-primary-300); } /* ---------- Note list ---------- */ .note-list { display: flex; flex-direction: column; gap: var(--space-3); } .note-list__item { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-sm); } /* ---------- Audit log JSON snapshot ---------- */ .audit-log__snapshot { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text); overflow-x: auto; margin: var(--space-1) 0 0; white-space: pre; } /* ========================================================================== 5. Feature-specific blocks ========================================================================== */ /* ---------- Campaign detail — toolbar, summary, tabs ---------- */ /* Toolbar sits directly under the layout's page-header. The campaign name is already rendered by that header, so the toolbar is just the status badge + action buttons, grouped as a row that wraps cleanly. */ .campaign-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: space-between; margin-block-start: calc(var(--space-6) * -1); /* pull up beneath page header */ } .campaign-toolbar__actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } /* Inline

wrappers around POST buttons — they shouldn't introduce any layout of their own, just host the button. */ .campaign-toolbar .inline-form { display: inline-flex; margin: 0; } /* Summary card uses the native

/: markup for accessibility, styled as a responsive grid of "label over value" pairs. Each pair is wrapped in a .campaign-summary__row div so auto-fit can treat them as grid items. */ .campaign-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4) var(--space-6); margin: 0; } .campaign-summary__row { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } /* Landing-page row spans the full width so long URLs don't break neighbouring columns. */ .campaign-summary__row--wide { grid-column: 1 / -1; } .campaign-summary dt { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); } .campaign-summary dd { margin: 0; font-size: var(--text-md); font-weight: 500; color: var(--color-text); font-variant-numeric: tabular-nums; word-break: break-word; } .campaign-summary__link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Card variant: the tabbed card. Tabs sit flush with the card's top edge (like a file-folder tab row), and the active-tab body flows naturally below with the shared border. */ .card--tabs .tab-nav { margin: 0; padding: 0 var(--space-6); background: var(--color-surface-alt); border-block-end: 1px solid var(--color-border); } .card--tabs .tab-nav__item { padding: var(--space-4) var(--space-4); margin-block-end: 0; } /* Spend/Revenue add-entry forms lay three inputs in a row on desktop, stacking on narrow viewports. Matches the .form__field structure already used throughout the app. */ .form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } /* Note list rows in the Notes tab */ .note-list__meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); margin-block-end: var(--space-2); font-variant-numeric: tabular-nums; } .note-list__author { color: var(--color-text-muted); } /* ---------- Auth / login screen ---------- */ .app--auth { background: var(--color-bg); } .auth-screen { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: radial-gradient(1200px 600px at 20% -10%, rgba(99, 102, 241, 0.18), transparent 50%), radial-gradient(900px 500px at 100% 120%, rgba(16, 185, 129, 0.14), transparent 45%), var(--color-bg); } .auth-card { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-lg); } .auth-card__brand { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-6); } .auth-card__brand-mark { width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)); color: #fff; font-weight: 700; border-radius: var(--radius-md); box-shadow: 0 6px 14px rgba(99, 102, 241, 0.35); } .auth-card__brand-name { font-weight: 600; font-size: var(--text-md); color: var(--color-text); } .auth-card__submit { width: 100%; margin-block-start: var(--space-2); height: 46px; } .auth-card__title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; margin-block-end: var(--space-1); } .auth-card__subtitle { color: var(--color-text-muted); font-size: var(--text-sm); margin-block-end: var(--space-6); } .auth-form { display: flex; flex-direction: column; gap: var(--space-4); } /* ---------- Page header actions partial ---------- */ .page-header-actions { display: flex; justify-content: flex-end; } /* ---------- Sprint 9.5 — permission grid (users form) ---------- Rendered on the users create/edit form. One column per group of catalog keys; each key is a plain checkbox + label pair. Responsive: auto-fit drops to a single column on narrow viewports. */ .permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); padding: var(--space-4); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .permission-grid__group { display: flex; flex-direction: column; gap: var(--space-2); } /* Sprint 9.6 — group header lays out the title + per-group Select all / Clear controls on one row. The title keeps its uppercase "section label" styling; the actions wrap onto the next line on very narrow widths. */ .permission-grid__group-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-1); } .permission-grid__group-actions { display: inline-flex; gap: var(--space-1); } .permission-grid__group-actions .btn { padding: 2px 8px; font-size: var(--text-xs); } .permission-grid__title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); margin: 0; } .permission-grid__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .permission-grid__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; } .permission-grid__item input[type="checkbox"] { accent-color: var(--color-primary-600); width: 16px; height: 16px; flex-shrink: 0; } /* ========================================================================== 6. Responsive overrides -------------------------------------------------------------------------- Breakpoints: <= 1100px laptop — reduce outer padding, stack dashboard to 1 col <= 900px tablet — sidebar becomes a drawer, hamburger shows, timeline rows stack <= 640px mobile — tight padding, single-column filters, tables gain horizontal scroll, form actions stack ========================================================================== */ @media (max-width: 1100px) { .app__content { padding: var(--space-6); } .topbar { padding: 0 var(--space-5); } .dashboard-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { /* Sidebar becomes a drawer pinned to the leading edge. Opened by toggling .app--drawer-open on . */ .app__shell { grid-template-columns: 1fr; } .sidebar { position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 100vh; width: min(84vw, 300px); transform: translateX(-102%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); } html[dir="rtl"] .sidebar { transform: translateX(102%); } .app--drawer-open .sidebar { transform: translateX(0); } .app--drawer-open .sidebar-backdrop { display: block; } .sidebar__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-sidebar-border); color: var(--color-sidebar-text); cursor: pointer; margin-inline-start: auto; } .sidebar__close:hover { background: var(--color-sidebar-hover-bg); color: var(--color-sidebar-text-strong); } .topbar__menu-btn { display: inline-flex; } .topbar__user-role { display: none; } .timeline-list__item { grid-template-columns: 1fr; gap: var(--space-1); } .timeline-list__meta { grid-row: 1; justify-self: start; } } @media (max-width: 640px) { .app__content { padding: var(--space-5) var(--space-4) var(--space-10); } .topbar { padding: 0 var(--space-4); } .page-header__title { font-size: var(--text-xl); } .filters-bar { grid-template-columns: 1fr; padding: var(--space-4); } .filters-bar__search { grid-column: auto; } .filters-bar__actions { justify-content: stretch; } .filters-bar__actions .btn { flex: 1; } .card__header, .card__body { padding: var(--space-4); } .card__footer { padding: var(--space-3) var(--space-4); } .metric-card { padding: var(--space-5); } .metric-card__value { font-size: var(--text-2xl); } /* Cards containing a table have overflow:hidden already; let the table overflow horizontally on narrow screens so dense operational data remains scannable instead of squeezed. */ .card > .data-table, .card > form > .data-table { min-width: 560px; } .card { overflow-x: auto; } .topbar__user-info { display: none; } .topbar__iconbtn .topbar__iconbtn-label { display: none; } .pagination { flex-direction: column; align-items: stretch; gap: var(--space-3); } .form__actions { flex-direction: column; align-items: stretch; } .form__actions .btn { width: 100%; } .page-header { flex-direction: column; align-items: stretch; } .page-header__actions .btn { flex: 1; } } /* ========================================================================== 7. RTL residue -------------------------------------------------------------------------- Logical properties handle nearly everything. The remaining rules here exist because a few patterns rely on viewport-edge coordinates that don't mirror automatically (sidebar transform, select caret bg-image). Those are handled inline above with html[dir="rtl"] selectors. ========================================================================== */ /* ========================================================================== 8. Scrollbar polish ========================================================================== */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-text-subtle) 40%, transparent); border-radius: var(--radius-pill); border: 2px solid var(--color-bg); } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-text-subtle) 60%, transparent); } /* ========================================================================== 9. A11y / utility helpers ========================================================================== */ .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; }