/* ============================================================================= Credit Dashboard — Design System v2 styles.css — reset/base + all components (design-system.md §2–§4). Loaded AFTER /css/tokens.css. References ONLY design tokens (--c-* / --sp-* / --r-* / --sh-* / --fs-* / --fw-* / --lh-* / --ls-* / --bw-* / --z-* / --dur-* / --ease-* / --grad-* / --layout-*). No hardcoded hex. Themes via [data-theme] on (handled in tokens.css). ========================================================================== */ /* ----------------------------------------------------------------------------- 1. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); letter-spacing: var(--ls-normal); background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--c-text); } a { color: var(--c-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--c-accent-hover); } img, svg, video { display: block; max-width: 100%; } svg { fill: currentColor; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; padding: 0; } ::selection { background: var(--c-selection); } :focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); } /* Scrollbars (subtle, theme-aware) */ * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--c-text-faint); } /* Numeric helpers */ .tnum, .num, .kpi-value, .balance-figure, .delta { font-variant-numeric: var(--fnum-tabular); } /* ----------------------------------------------------------------------------- 2. UTILITIES -------------------------------------------------------------------------- */ .hidden, [hidden] { display: none !important; } .muted { color: var(--c-text-muted); } .faint { color: var(--c-text-faint); } .mono { font-family: var(--font-mono); } /* attenuated secondary text — smaller + muted, for calmer hierarchy */ .quiet { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: var(--fw-regular); line-height: var(--lh-normal); } /* coherent vertical rhythm: stack children with a uniform gap */ .stack { display: flex; flex-direction: column; gap: var(--sp-5); } .stack-sm { display: flex; flex-direction: column; gap: var(--sp-3); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .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; } .eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); line-height: var(--lh-none); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-text-muted); } .pos { color: var(--c-success); } .neg { color: var(--c-danger); } .warn { color: var(--c-warning); } .error, .field-error { color: var(--c-danger); font-size: var(--fs-xs); } /* ----------------------------------------------------------------------------- 2b. PROGRESSIVE DISCLOSURE — "Options avancees" (details.adv / summary.adv) Collapsed by default. Holds secondary / advanced controls so each screen shows only the essentials up front. Use ONE per screen section. -------------------------------------------------------------------------- */ .adv { border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-md); background: var(--c-panel); } .adv > summary.adv, .adv > summary { display: flex; align-items: center; gap: var(--sp-2); list-style: none; cursor: pointer; padding: var(--sp-2-5) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); border-radius: var(--r-md); transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .adv > summary::-webkit-details-marker { display: none; } .adv > summary:hover { color: var(--c-text); background: var(--c-panel-2); } .adv > summary:focus-visible { box-shadow: var(--sh-focus); } /* chevron — rotates when open */ .adv > summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: var(--bw-thick) solid currentColor; border-bottom: var(--bw-thick) solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-standard); margin-left: 1px; } .adv[open] > summary::before { transform: rotate(45deg); } .adv[open] > summary { border-bottom: var(--bw-hair) solid var(--c-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: var(--c-text); } /* body wrapper — direct child div holds the advanced controls */ .adv > .adv-body, .adv[open] > :not(summary) { padding: var(--sp-4); } .adv > .adv-body { display: flex; flex-direction: column; gap: var(--sp-4); } /* ----------------------------------------------------------------------------- 3. APP SHELL (§2) -------------------------------------------------------------------------- */ .app-shell { display: grid; grid-template-columns: var(--layout-sidebar-w) 1fr; grid-template-rows: 100vh; min-height: 100vh; } .app-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; } .content { flex: 1; overflow-y: auto; padding: var(--layout-gutter); } .content-inner { max-width: var(--layout-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-8); } /* ---- Sidebar (§2.2) ---- */ .sidebar { display: flex; flex-direction: column; background: var(--c-panel); border-right: var(--bw-hair) solid var(--c-border); z-index: var(--z-sidebar); height: 100vh; overflow-y: auto; padding: var(--sp-4) var(--sp-3); gap: var(--sp-2); } .sidebar-brand { display: flex; align-items: center; gap: var(--sp-2-5); padding: var(--sp-2) var(--sp-3) var(--sp-4); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--c-text); } .sidebar-brand .logo-dot { width: 12px; height: 12px; border-radius: var(--r-circle); background: var(--grad-accent); flex: none; box-shadow: 0 0 0 4px var(--c-accent-soft); } .sidebar-nav { display: flex; flex-direction: column; gap: var(--sp-1); } .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2-5) var(--sp-3); border-radius: var(--r-md); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; position: relative; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .nav-item .nav-icon { width: 18px; height: 18px; flex: none; } .nav-item .nav-label { flex: 1; min-width: 0; } .nav-item .nav-count { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); background: var(--c-danger-soft); color: var(--c-danger); border-radius: var(--r-pill); padding: 1px 7px; line-height: var(--lh-tight); } .nav-item:hover { background: var(--c-panel-2); color: var(--c-text); } .nav-item.active, .nav-item[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); } .sidebar-spacer { flex: 1; } .sidebar-foot { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: var(--bw-hair) solid var(--c-border); } .sidebar-user { display: flex; align-items: center; gap: var(--sp-2-5); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); } /* ---- Topbar (§2.3) ---- */ .topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--layout-topbar-h); padding: 0 var(--layout-gutter); background: var(--c-panel); border-bottom: var(--bw-hair) solid var(--c-border); box-shadow: var(--sh-1); flex: none; } .topbar-scrolled { background: color-mix(in srgb, var(--c-panel) 82%, transparent); backdrop-filter: var(--c-backdrop-blur); -webkit-backdrop-filter: var(--c-backdrop-blur); } .topbar-left { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; } .topbar-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } .freshness-chip { font-size: var(--fs-xs); color: var(--c-text-faint); } .topbar-actions { display: flex; align-items: center; gap: var(--sp-2); } /* sidebar toggle (mobile) lives in topbar */ .sidebar-toggle { display: none; } /* ---- Off-canvas drawer scrim for mobile sidebar ---- */ .sidebar-scrim { display: none; position: fixed; inset: 0; background: var(--c-overlay-scrim); z-index: calc(var(--z-sidebar) - 1); } /* ----------------------------------------------------------------------------- 4. KPI STAT CARD (§3.1) -------------------------------------------------------------------------- */ .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } .kpi { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--c-panel); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-1); } .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .kpi-label { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-text-muted); } .kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--c-accent-soft); color: var(--c-accent); } .kpi-icon svg { width: 16px; height: 16px; } .kpi-value { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--c-text); } .kpi-foot { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); flex-wrap: wrap; } .kpi-sub { color: var(--c-text-faint); } .kpi-foot .sparkline { margin-left: auto; } .delta { display: inline-flex; align-items: center; gap: var(--sp-0\.5); font-weight: var(--fw-semibold); } .delta-up { color: var(--c-success); } .delta-down { color: var(--c-danger); } /* Polarity inversion for balance metrics: a drop is bad, a rise is good. */ .kpi[data-polarity="balance"] .delta-up { color: var(--c-success); } .kpi[data-polarity="balance"] .delta-down { color: var(--c-danger); } /* Cost metrics: a rise is bad. */ .kpi[data-polarity="cost"] .delta-up { color: var(--c-danger); } .kpi[data-polarity="cost"] .delta-down { color: var(--c-success); } /* ----------------------------------------------------------------------------- 5. PROVIDER CARD (§3.2) -------------------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); } .card { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--c-panel); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .card:hover { border-color: var(--c-border-strong); } .card:focus-within { box-shadow: var(--sh-focus); } .card[data-status="ko"] { box-shadow: var(--sh-1), inset 3px 0 0 var(--c-danger); } .card[data-low="true"] { box-shadow: var(--sh-1), inset 3px 0 0 var(--c-warning); } .card[data-low="true"] .balance-figure { color: var(--c-warning); } .card[data-status="ko"][data-low="true"] { box-shadow: var(--sh-1), inset 3px 0 0 var(--c-danger); } .card[data-disabled], .card.disabled { opacity: 0.55; filter: saturate(0.7); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .card-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .card-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .provider-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--c-panel-2); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); flex: none; } .card[data-kind="live"] .provider-logo { background: var(--c-kind-live-soft); color: var(--c-kind-live); } .card[data-kind="consumption"] .provider-logo { background: var(--c-kind-consumption-soft); color: var(--c-kind-consumption); } .card[data-kind="manual"] .provider-logo { background: var(--c-kind-manual-soft); color: var(--c-kind-manual); } .card-balance { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-1) 0; } .balance-figure { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); } /* On a calm card face the SOLDE dominates: secondary key/value rows belong in the drawer. When a view must keep one inline, mark it .card-secondary so it reads quietly and never competes with the balance figure. */ .card-secondary { font-size: var(--fs-xs); color: var(--c-text-muted); } .balance-unit { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); } .card-meta { display: flex; flex-direction: column; gap: var(--sp-1-5); } .kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); } .kv dt { color: var(--c-text-muted); } .kv dd { color: var(--c-text); font-weight: var(--fw-semibold); font-variant-numeric: var(--fnum-tabular); } .drift-note { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); background: var(--c-warning-soft); border: var(--bw-hair) solid var(--c-warning-border); color: var(--c-warning); border-radius: var(--r-md); padding: var(--sp-2); } .card-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); } .card-foot .btn:not(.btn-icon) { flex: 1; } /* ----------------------------------------------------------------------------- 6. BADGES (§3.3) + STATUS DOT (§3.4) -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-none); padding: 2px 8px; border-radius: var(--r-pill); border: var(--bw-hair) solid var(--c-border); color: var(--c-text-muted); white-space: nowrap; } .badge-live { background: var(--c-kind-live-soft); border-color: var(--c-success-border); color: var(--c-kind-live); } .badge-consumption { background: var(--c-kind-consumption-soft); border-color: var(--c-accent-border); color: var(--c-kind-consumption); } .badge-manual { background: var(--c-kind-manual-soft); border-color: var(--c-warning-border); color: var(--c-kind-manual); } .badge-status { padding-left: 6px; } .badge-ok { background: var(--c-success-soft); border-color: var(--c-success-border); color: var(--c-success); } .badge-ko { background: var(--c-danger-soft); border-color: var(--c-danger-border); color: var(--c-danger); } .badge-low { background: var(--c-warning-soft); border-color: var(--c-warning-border); color: var(--c-warning); } .badge-info { background: var(--c-info-soft); border-color: var(--c-info-border); color: var(--c-info); } /* severity badges (alerts) */ .badge-critical { background: var(--c-danger-soft); border-color: var(--c-danger-border); color: var(--c-danger); } .badge-warning { background: var(--c-warning-soft); border-color: var(--c-warning-border); color: var(--c-warning); } .status-dot { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--c-text-faint); flex: none; position: relative; } .badge .status-dot { width: 6px; height: 6px; } .status-ok { background: var(--c-success); } .status-ko { background: var(--c-danger); } .status-low { background: var(--c-warning); } .status-stale { background: var(--c-text-faint); } /* live pulse for in-flight refresh */ .status-dot.pulse::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-circle); background: inherit; animation: dot-pulse var(--dur-slower) var(--ease-decelerate) infinite; } @keyframes dot-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } } /* ----------------------------------------------------------------------------- 7. BUTTONS (§3.5) -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); border: var(--bw-hair) solid transparent; background: transparent; color: var(--c-text); cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); } .btn:active { transform: translateY(1px); } .btn:focus-visible { box-shadow: var(--sh-focus); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-contrast); } .btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); } .btn-primary:active { background: var(--c-accent-active); border-color: var(--c-accent-active); } .btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-text); } .btn-ghost:hover { background: var(--c-panel-2); border-color: var(--c-border-strong); } .btn-ghost:active { background: var(--c-panel); } .btn-subtle { background: var(--c-panel-2); border-color: transparent; color: var(--c-text); } .btn-subtle:hover { background: var(--c-elevated); } .btn-danger { background: transparent; border-color: var(--c-danger-border); color: var(--c-danger); } .btn-danger:hover { background: var(--c-danger-soft); } .btn-icon { width: 34px; height: 34px; padding: 0; border-color: var(--c-border); color: var(--c-text); } .btn-icon:hover { background: var(--c-panel-2); border-color: var(--c-border-strong); } .btn-sm { padding: var(--sp-1-5) var(--sp-3); font-size: var(--fs-xs); } .btn-sm.btn-icon { width: 28px; height: 28px; } .btn-sm.btn-icon svg { width: 15px; height: 15px; } .btn-lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); } /* loading state — keep width, swap label for spinner */ .btn[data-loading] { position: relative; color: transparent !important; pointer-events: none; } .btn[data-loading]::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--r-circle); color: var(--c-accent-contrast); animation: spin var(--dur-slower) linear infinite; } .btn-ghost[data-loading]::after, .btn-danger[data-loading]::after, .btn-icon[data-loading]::after { color: var(--c-text); } @keyframes spin { to { transform: rotate(360deg); } } /* spinning refresh icon */ .spin svg, svg.spin { animation: spin var(--dur-slower) linear infinite; } /* ----------------------------------------------------------------------------- 8. INPUTS & FORM FIELDS (§3.6) -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--sp-1-5); } .field-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-muted); } .field-hint { font-size: var(--fs-xs); color: var(--c-text-faint); line-height: var(--lh-relaxed); } .field-error { font-size: var(--fs-xs); color: var(--c-danger); } .input, .select, .textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea { width: 100%; background: var(--c-panel-2); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-sm); padding: var(--sp-2-5) var(--sp-3); font-size: var(--fs-sm); color: var(--c-text); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--c-text-faint); } .input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--sh-focus); } /* inputs sitting on an elevated surface (drawer/modal) use the deeper bg */ .elevated .input, .elevated input, .elevated select, .elevated textarea, .drawer .input, .modal-box .input { background: var(--c-bg); } textarea { resize: vertical; min-height: 70px; line-height: var(--lh-normal); } [aria-invalid="true"], .input.invalid { border-color: var(--c-danger); } [aria-invalid="true"]:focus, .input.invalid:focus { box-shadow: 0 0 0 var(--bw-focus) var(--c-bg), 0 0 0 4px var(--c-danger-soft); } .input-secret { font-family: var(--font-mono); letter-spacing: var(--ls-wide); } .input-group { display: flex; align-items: stretch; gap: var(--sp-2); } .input-group .input { flex: 1; } .row { display: flex; gap: var(--sp-3); } .row > * { flex: 1; min-width: 0; } /* ----------------------------------------------------------------------------- 9. DRAWER (§3.7) -------------------------------------------------------------------------- */ .drawer-root { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; } .drawer-root[data-open] { display: block; } .drawer-scrim { position: absolute; inset: 0; background: var(--c-overlay-scrim); opacity: 0; animation: scrim-in var(--dur-slow) var(--ease-standard) forwards; } @keyframes scrim-in { to { opacity: 1; } } .drawer { position: absolute; top: 0; right: 0; height: 100%; width: var(--layout-drawer-w); max-width: 100%; display: flex; flex-direction: column; background: var(--c-panel); border-left: var(--bw-hair) solid var(--c-border); box-shadow: var(--sh-4); transform: translateX(100%); animation: drawer-in var(--dur-slow) var(--ease-decelerate) forwards; } @keyframes drawer-in { to { transform: translateX(0); } } .drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-elevated); border-bottom: var(--bw-hair) solid var(--c-border); } .drawer-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } .drawer .tabs { position: sticky; top: 0; z-index: 1; background: var(--c-panel); padding: 0 var(--sp-5); margin: 0; } .drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); } /* ----------------------------------------------------------------------------- 10. MODAL (centered dialog — add tool, confirm) -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-12) var(--sp-4); overflow-y: auto; } .modal-backdrop, .modal-scrim { position: fixed; inset: 0; background: var(--c-overlay-scrim); animation: scrim-in var(--dur-base) var(--ease-standard) forwards; } .modal-box { position: relative; z-index: 1; width: 520px; max-width: 100%; background: var(--c-panel); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); animation: modal-in var(--dur-base) var(--ease-decelerate); } @keyframes modal-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); } .modal-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); } .modal-close { background: transparent; border: none; color: var(--c-text-muted); cursor: pointer; width: 32px; height: 32px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; } .modal-close:hover { background: var(--c-panel-2); color: var(--c-text); } .modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: var(--sp-2); } /* ----------------------------------------------------------------------------- 11. TABS (§3.8) -------------------------------------------------------------------------- */ .tabs { display: flex; gap: var(--sp-3); border-bottom: var(--bw-hair) solid var(--c-border); flex-wrap: wrap; } .tab { padding: var(--sp-2-5) var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); background: transparent; border: none; border-bottom: var(--bw-focus) solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--dur-fast) var(--ease-standard); } .tab:hover { color: var(--c-text); } .tab.active, .tab[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-accent); } /* segmented control (chart range, §3.10) */ .seg { display: inline-flex; gap: var(--sp-0\.5); padding: var(--sp-0\.5); background: var(--c-panel-2); border-radius: var(--r-md); } .seg-btn { padding: var(--sp-1) var(--sp-2-5); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-muted); background: transparent; border: none; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .seg-btn:hover { color: var(--c-text); } .seg-btn[aria-pressed="true"], .seg-btn.active { background: var(--c-elevated); color: var(--c-text); box-shadow: var(--sh-1); } /* ----------------------------------------------------------------------------- 12. TABLE (§3.9) -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); background: var(--c-panel); } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .table th { position: sticky; top: 0; z-index: var(--z-sticky); text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-text-muted); background: var(--c-panel); padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw-hair) solid var(--c-border); white-space: nowrap; } .table td { padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw-hair) solid var(--c-border-subtle); color: var(--c-text); } .table tbody tr:last-child td { border-bottom: none; } /* calm table: no zebra striping — rely on hairlines + hover only */ .table tbody tr:hover { background: var(--c-panel-2); } .table th.num, .table td.num { text-align: right; font-variant-numeric: var(--fnum-tabular); } .table td.mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-muted); } .table td.pos { color: var(--c-success); } .table td.neg { color: var(--c-danger); } /* sortable header button */ .table th .th-sort { display: inline-flex; align-items: center; gap: var(--sp-1); background: transparent; border: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; } .table th .th-sort:hover { color: var(--c-text); } .table th[aria-sort] .th-sort .caret { opacity: 1; } .table th .caret { opacity: 0.4; font-size: var(--fs-2xs); } /* ledger-type chip */ .tag { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 1px 7px; border-radius: var(--r-xs); border: var(--bw-hair) solid var(--c-border); color: var(--c-text-muted); white-space: nowrap; } .tag-topup { background: var(--c-success-soft); border-color: var(--c-success-border); color: var(--c-ledger-topup); } .tag-adjustment { background: var(--c-warning-soft); border-color: var(--c-warning-border); color: var(--c-ledger-adjustment); } .tag-checkpoint { background: var(--c-info-soft); border-color: var(--c-info-border); color: var(--c-ledger-checkpoint); } /* compact list rows (secrets, etc.) */ .list { display: flex; flex-direction: column; gap: var(--sp-2); } .li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2-5) var(--sp-3); background: var(--c-panel-2); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-sm); } .li small { color: var(--c-text-muted); } /* raw JSON / code */ pre { background: var(--c-bg); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3); overflow: auto; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-normal); max-height: 320px; color: var(--c-text-muted); } code { font-family: var(--font-mono); font-size: 0.9em; } /* ----------------------------------------------------------------------------- 13. CHART CONTAINER (§3.10) + DATA-VIZ (§4) -------------------------------------------------------------------------- */ .chart { display: flex; flex-direction: column; gap: var(--sp-4); background: var(--c-panel); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); } .chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .chart-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } .chart-canvas { width: 100%; min-height: 120px; position: relative; } .chart-canvas svg { width: 100%; height: auto; display: block; } .chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-muted); } .legend-item { display: inline-flex; align-items: center; gap: var(--sp-1-5); } .legend-item i { width: 10px; height: 10px; border-radius: var(--r-xs); background: var(--dot, var(--c-series-1)); flex: none; } /* data-viz primitives (used by charts.js SVG output) */ .viz-grid { stroke: var(--c-viz-grid); } .viz-axis { stroke: var(--c-viz-axis); } .viz-label { fill: var(--c-viz-label); font-size: var(--fs-2xs); font-variant-numeric: var(--fnum-tabular); } .viz-threshold { stroke: var(--c-warning); stroke-dasharray: 4 4; } .viz-series-1 { stroke: var(--c-series-1); } .viz-series-2 { stroke: var(--c-series-2); } .viz-series-3 { stroke: var(--c-series-3); } .viz-series-4 { stroke: var(--c-series-4); } .viz-series-5 { stroke: var(--c-series-5); } .viz-series-6 { stroke: var(--c-series-6); } .viz-series-7 { stroke: var(--c-series-7); } .viz-series-8 { stroke: var(--c-series-8); } .sparkline { display: block; } .sparkline path.spark-line { fill: none; stroke: var(--c-series-1); stroke-width: 1.5; } .sparkline path.spark-fill { fill: var(--grad-spark-fill); stroke: none; } .sparkline .spark-dot { fill: var(--c-series-1); } .chart-empty { display: flex; align-items: center; justify-content: center; min-height: 160px; color: var(--c-text-faint); font-size: var(--fs-sm); border: var(--bw-hair) dashed var(--c-border); border-radius: var(--r-md); } /* ----------------------------------------------------------------------------- 14. TOAST (§3.11) -------------------------------------------------------------------------- */ .toast-stack { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); max-width: 360px; } .toast { position: relative; display: flex; align-items: flex-start; gap: var(--sp-2-5); background: var(--c-elevated); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-3); overflow: hidden; animation: toast-in var(--dur-base) var(--ease-decelerate); } .toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-accent); } .toast-success::before { background: var(--c-success); } .toast-warning::before { background: var(--c-warning); } .toast-danger::before { background: var(--c-danger); } .toast-info::before { background: var(--c-info); } .toast-icon { flex: none; line-height: var(--lh-tight); } .toast-success .toast-icon { color: var(--c-success); } .toast-warning .toast-icon { color: var(--c-warning); } .toast-danger .toast-icon { color: var(--c-danger); } .toast-info .toast-icon { color: var(--c-info); } .toast-body { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); min-width: 0; } .toast-body strong { font-weight: var(--fw-semibold); color: var(--c-text); } .toast-body span { color: var(--c-text-muted); } .toast-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--c-accent); opacity: 0.5; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .toast[data-leaving] { animation: toast-out var(--dur-fast) var(--ease-accelerate) forwards; } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } /* legacy single-toast (kept for compat with v1 helper) */ .toast.ok::before { background: var(--c-success); } .toast.err::before { background: var(--c-danger); } /* ----------------------------------------------------------------------------- 15. TOOLTIP (§3.12) -------------------------------------------------------------------------- */ .tooltip { position: absolute; z-index: var(--z-tooltip); max-width: 240px; background: var(--c-elevated); color: var(--c-text); font-size: var(--fs-xs); padding: var(--sp-1-5) var(--sp-2); border-radius: var(--r-sm); border: var(--bw-hair) solid var(--c-border); box-shadow: var(--sh-3); pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); } .tooltip[data-show] { opacity: 1; } /* ----------------------------------------------------------------------------- 16. SKELETON (§3.13) -------------------------------------------------------------------------- */ .skeleton { position: relative; overflow: hidden; background: var(--c-skeleton-base); border-radius: var(--r-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, var(--c-skeleton-shimmer) 50%, transparent 100% ); transform: translateX(-100%); animation: shimmer var(--dur-slower) var(--ease-standard) infinite; } @keyframes shimmer { to { transform: translateX(100%); } } .skeleton-text { height: 10px; width: 80%; border-radius: var(--r-xs); } .skeleton-line { height: 12px; width: 100%; border-radius: var(--r-xs); } .skeleton-figure { height: 34px; width: 140px; border-radius: var(--r-sm); } .skeleton-card { height: 220px; border-radius: var(--r-lg); background: var(--c-skeleton-base); } /* ----------------------------------------------------------------------------- 17. EMPTY STATE (§3.14) -------------------------------------------------------------------------- */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); max-width: 420px; margin: 0 auto; padding: var(--sp-16) var(--sp-4); } .empty-art { color: var(--c-text-faint); margin-bottom: var(--sp-2); } .empty-art svg { width: 56px; height: 56px; margin: 0 auto; } .empty-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); } .empty-sub { color: var(--c-text-muted); font-size: var(--fs-base); } .empty-actions { margin-top: var(--sp-2); } .empty-allclear .empty-art { color: var(--c-success); } /* ----------------------------------------------------------------------------- 18. THEME SWITCH (§3.15) -------------------------------------------------------------------------- */ .theme-switch { display: inline-flex; align-items: center; background: transparent; border: none; padding: var(--sp-1); cursor: pointer; } .theme-switch-track { position: relative; width: 44px; height: 24px; border-radius: var(--r-pill); background: var(--c-panel-2); border: var(--bw-hair) solid var(--c-border); transition: background var(--dur-fast) var(--ease-standard); } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--r-circle); background: var(--c-elevated); box-shadow: var(--sh-1); display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); transition: transform var(--dur-base) var(--ease-spring); } .theme-switch-thumb svg { width: 12px; height: 12px; } .theme-switch[aria-checked="true"] .theme-switch-thumb { transform: translateX(20px); } .theme-switch:focus-visible .theme-switch-track { box-shadow: var(--sh-focus); } /* ----------------------------------------------------------------------------- 19. ALERT / BANNER (§3.16) -------------------------------------------------------------------------- */ .banner { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: var(--bw-hair) solid var(--c-border); position: relative; font-size: var(--fs-sm); color: var(--c-text); overflow: hidden; } .banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-info); } .banner-icon { flex: none; } .banner-body { flex: 1; min-width: 0; } .banner-body strong { font-weight: var(--fw-semibold); } .banner-actions { display: flex; gap: var(--sp-2); flex: none; } .banner-info { background: var(--c-info-soft); border-color: var(--c-info-border); } .banner-info .banner-icon { color: var(--c-info); } .banner-info::before { background: var(--c-info); } .banner-warning { background: var(--c-warning-soft); border-color: var(--c-warning-border); } .banner-warning .banner-icon { color: var(--c-warning); } .banner-warning::before { background: var(--c-warning); } .banner-danger { background: var(--c-danger-soft); border-color: var(--c-danger-border); } .banner-danger .banner-icon { color: var(--c-danger); } .banner-danger::before { background: var(--c-danger); } .banner-success { background: var(--c-success-soft); border-color: var(--c-success-border); } .banner-success .banner-icon { color: var(--c-success); } .banner-success::before { background: var(--c-success); } /* ----------------------------------------------------------------------------- 19b. ALERTS FEED (calm vertical list — Alertes view) One quiet row per event. Left rail conveys severity; no heavy fills. -------------------------------------------------------------------------- */ .feed { display: flex; flex-direction: column; border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); background: var(--c-panel); overflow: hidden; } .feed-item { position: relative; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); border-bottom: var(--bw-hair) solid var(--c-border-subtle); } .feed-item:last-child { border-bottom: none; } .feed-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-text-faint); } .feed-item[data-severity="critical"]::before { background: var(--c-danger); } .feed-item[data-severity="warning"]::before { background: var(--c-warning); } .feed-item[data-severity="info"]::before { background: var(--c-info); } .feed-item[data-read="true"] { opacity: 0.7; } .feed-icon { flex: none; color: var(--c-text-muted); line-height: var(--lh-tight); } .feed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .feed-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); } .feed-meta { font-size: var(--fs-xs); color: var(--c-text-faint); } .feed-actions { flex: none; display: flex; align-items: center; gap: var(--sp-2); } /* ----------------------------------------------------------------------------- 19c. SETTINGS SECTIONS (calm stacked panels — Reglages view) Each setting group is a quiet panel with a clear title + one-line help. -------------------------------------------------------------------------- */ .setting { display: flex; flex-direction: column; gap: var(--sp-4); background: var(--c-panel); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); } .setting-head { display: flex; flex-direction: column; gap: var(--sp-1); } .setting-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } .setting-desc { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: var(--lh-relaxed); } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } /* ----------------------------------------------------------------------------- 20. AUTH VIEW (login / setup — premium centered card) -------------------------------------------------------------------------- */ .auth-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: radial-gradient(120% 120% at 50% 0%, var(--c-accent-soft) 0%, transparent 55%), var(--c-bg); } .auth-card { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--c-panel); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-4); padding: var(--sp-8); } .auth-card h1 { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); } .auth-card .auth-sub { color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: calc(var(--sp-2) * -1); } .auth-card label { display: flex; flex-direction: column; gap: var(--sp-1-5); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-muted); } /* ----------------------------------------------------------------------------- 21. PAGE / SECTION HEADERS, FILTER BARS -------------------------------------------------------------------------- */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .page-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } .section-head { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } /* Compact controls bar: a search field + at most one sort/filter, spaced out. Keep it to those two essentials; push anything else into details.adv. */ .toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .toolbar .input, .toolbar .select { width: auto; min-width: 220px; } .toolbar .select { min-width: 160px; } .toolbar-spacer { flex: 1; } /* generic surfaces */ .panel { background: var(--c-panel); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); } .hint { font-size: var(--fs-xs); color: var(--c-text-muted); background: var(--c-panel-2); border: var(--bw-hair) solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-2-5) var(--sp-3); line-height: var(--lh-relaxed); } /* ============================================================================= 22. RESPONSIVE (desktop / tablet / mobile) ========================================================================== */ /* tablet: collapse sidebar to icons (§2.1, < 960px) */ @media (max-width: 960px) { .app-shell { grid-template-columns: var(--layout-sidebar-w-collapsed) 1fr; } .sidebar { padding: var(--sp-4) var(--sp-2); align-items: center; } .sidebar-brand .wordmark, .nav-item .nav-label, .sidebar-user .user-name { display: none; } .nav-item { justify-content: center; padding: var(--sp-2-5); } .nav-item .nav-count { position: absolute; top: 2px; right: 2px; padding: 0 5px; } .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } /* mobile: sidebar becomes off-canvas drawer (§2.1, < 720px) */ @media (max-width: 720px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; width: var(--layout-sidebar-w); transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-decelerate); align-items: stretch; padding: var(--sp-4) var(--sp-3); } .sidebar-brand .wordmark, .nav-item .nav-label, .sidebar-user .user-name { display: revert; } .nav-item { justify-content: flex-start; padding: var(--sp-2-5) var(--sp-3); } .nav-item .nav-count { position: static; } .app-shell[data-sidebar-open] .sidebar { transform: translateX(0); } .app-shell[data-sidebar-open] .sidebar-scrim { display: block; } .sidebar-toggle { display: inline-flex; } .content { padding: var(--sp-4); } .content-inner { gap: var(--sp-4); } .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); } .grid { grid-template-columns: 1fr; } .drawer { width: 100%; border-left: none; } .toast-stack { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); max-width: none; align-items: stretch; } .row { flex-direction: column; } .modal { padding: var(--sp-4); align-items: stretch; } .modal-box { padding: var(--sp-5); } } /* ============================================================================= 23. PRINT (reports-spec §4.2 — A4 landscape, one page) ========================================================================== */ @media print { @page { size: A4 landscape; margin: 12mm; } :root, [data-theme="dark"], [data-theme="light"] { /* force a clean light render for paper */ --c-bg: #ffffff; --c-panel: #ffffff; --c-panel-2: #ffffff; --c-elevated: #ffffff; --c-text: #000000; --c-text-muted: #333333; --c-text-faint: #555555; --c-border: #cccccc; --c-border-subtle: #dddddd; } body { background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* chrome we never want on paper */ .no-print, .sidebar, .sidebar-scrim, .topbar, .toast-stack, .drawer-root, .modal, .seg, .toolbar .btn, .card-foot, .theme-switch { display: none !important; } .app-shell { display: block; } .app-main { height: auto; overflow: visible; } .content { overflow: visible; padding: 0; height: auto; } .content-inner { max-width: none; gap: 12px; } /* avoid awkward breaks */ table, tr, .card, .kpi, .chart, .panel, .table-wrap { break-inside: avoid; page-break-inside: avoid; } /* flatten elevation on paper */ .card, .kpi, .chart, .panel, .table-wrap { box-shadow: none !important; border: 1px solid #ccc !important; } /* keep sparklines/series visible */ .sparkline, .chart-canvas svg, .viz-series-1, .viz-series-2, .viz-series-3, .viz-series-4, .viz-series-5, .viz-series-6, .viz-series-7, .viz-series-8 { -webkit-print-color-adjust: exact; print-color-adjust: exact; } a[href]::after { content: ""; } } /* ============================================================================= 24. REDUCED MOTION (in addition to token-level zeroing in tokens.css) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .skeleton::after, .status-dot.pulse::after, .toast-progress { animation: none !important; } }