/* ============================================================================= PASTICCERE PRO — DESIGN SYSTEM ============================================================================= Loaded LAST, after Bootstrap, WowDash (style.css) and DataTables. Presentation only. No layout rule here changes a value, a string or a query. WHY NOT @layer -------------- The brief suggested `@layer tokens, base, components, overrides`. That would be wrong here: unlayered CSS always wins over layered CSS regardless of source order, and every existing stylesheet in this app (Bootstrap, WowDash, DataTables) is unlayered. Putting the design system in a layer would make it lose every single conflict. Using the plain-sections alternative the brief allows instead. DIRECTION "Laboratorio" (Direction A), from the Claude Design project "Pasticcere Pro design system": Tokens, Shell, Recipes (table archetype), Form, Dashboard, Index. Ink on a grey-green ground, brass once per screen, Archivo, border-only panels. Previous token names are kept as aliases in §1 so page-level styles written against them still resolve. SECTIONS 1. TOKENS colour, type, space, radius, elevation, motion, legacy aliases 2. BASE document, typography, figures, focus, accessibility 3. SHELL sidebar rail, topbar, page header, content container 4. COMPONENTS buttons, inputs, panels, KPI, tables, badges, alerts, modals, toasts, empty + loading states, charts, auth, state screens, shortcuts dialog 5. VENDOR OVERRIDES Bootstrap / WowDash / DataTables, and (5.8–5.14) the legacy inline brand colours, Bootstrap forms and utilities, the dashboard band, control geometry. Each !important names what it beats. ========================================================================== */ /* ============================================================================= 1. TOKENS ========================================================================== */ /* Direction A, "Laboratorio" (Claude Design project "Pasticcere Pro design system", Tokens.dc.html). Every ratio below was measured by the design, in both themes, against WCAG AA — the numbers in the comments are the design's. Two chromatic scopes, separated by what the colour ATTACHES to: money -> figures only (--gain / --loss). Never a fill, border or form. alert -> surfaces only (--danger*). Never a numeral. Error MESSAGE text is --ink; the chroma sits on the field border and one glyph. Success is deliberately non-chromatic. Brass appears once per screen, on the primary action. The nav rail's "you are here" mark is --ink, because it is a state, not an action. */ :root { /* --- surface and ink --------------------------------------------------- */ --ground: #F4F5F3; /* page background */ --panel: #FFFFFF; /* raised working surface */ --panel-sunken: #EDEFEC; /* table heads, inset areas, the rail */ --ink: #171B1F; /* primary text and figures 17.3:1 AAA */ --ink-muted: #5C666E; /* labels, captions, nav icons 5.9:1 AA */ --ink-disabled: #8B959B; /* inert controls, on --panel only 3.1:1 */ --ink-2: #3C464D; /* neutral chip ink, chart ramp step 2 */ --line: #DFE3E0; /* rules, panel edges, dividers */ --line-strong: #C2C8C3; /* sticky-column edge, outer bounds, controls */ --rail-hover-bg: #E4E7E3; /* hover on a sunken surface */ /* --- strong neutral fill: selected states (current page, checked box, segmented choice) and the secondary "apply" button. Inverts in dark. */ --fill-strong: #171B1F; --fill-strong-hover: #3C464D; --on-fill-strong: #F4F5F3; /* --- brass: three jobs, three tokens ----------------------------------- */ --brass: #9A6F35; /* rules and marks only — never text */ --brass-fill: #835C26; /* primary button surface label 6.0:1 AA */ --brass-fill-hover: #7E5A28; --on-brass: #FFFFFF; --brass-ink: #7E5A28; /* accent as text; the focus ring 6.2:1 AA */ --brass-tint: #F5EEE3; /* quiet warm highlight behind --brass-ink */ --brass-soft: #E5BE86; /* legacy tan fill; carries --on-soft-brass */ --on-soft-brass: #171B1F; /* --- scope one: money, attaches to figures ----------------------------- */ --gain: #1D6F4E; /* 6.1:1 AA */ --loss: #7E2B24; /* oxblood, 9.3:1 AAA */ --gain-chip-bg: #DDEEE5; --gain-chip-ink: #175C40; /* 6.6:1 AA */ --loss-chip-bg: #F7E4E1; --loss-chip-ink: #6E2A24; /* 8.5:1 AAA */ /* --- scope two: alert, attaches to surfaces ---------------------------- */ --danger: #C4451E; /* destructive confirm fill, both themes */ --on-danger: #FFFFFF; /* 5.0:1 AA */ --danger-ink: #9E3717; /* invalid border + alert glyph 7.0:1 AAA */ --danger-surface: #FDF1EC; /* invalid field fill */ --danger-line: #E4C3B4; /* divider inside an invalid control */ --caution-bg: #F3E4BE; --caution-ink: #6B4E0F; /* 6.1:1 AA */ --neutral-chip-bg: #E7EAE7; --neutral-chip-ink: #3C464D; /* 8.0:1 AAA */ /* --- charts: one ordered ramp, brass on the leading slice -------------- */ --chart-1: #9A6F35; --chart-2: #3C464D; --chart-3: #5C666E; --chart-4: #737E85; --chart-5: #8B959B; --chart-6: #2A3137; /* past five a ring stops reading; a sixth only so a legacy six-slice chart never repeats a neighbour */ --chart-grid: #DFE3E0; /* --- the ink band: the dashboard's headline strip and any page strip that used to be navy. Same values in both themes except its ground. */ --band: #171B1F; --band-line: #2C343B; --band-control: #1C2228; --on-band: #E6EAED; --on-band-muted: #93A0A8; --on-band-brass: #D2A465; /* figures on the band use the dark-theme ramp */ --on-band-gain: #4CB489; --on-band-loss: #E08A82; /* --- focus ------------------------------------------------------------- */ --focus: #7E5A28; /* 2px outline, 2px offset */ /* --- typography: Archivo, eleven steps --------------------------------- */ --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: var(--font-sans); /* one family — the brand serif is retired */ --fs-figure-xl: 2.75rem; --lh-figure-xl: 2.75rem; /* 44/44/600 */ --fs-display: 2.25rem; --lh-display: 2.5rem; /* 36/40/600 */ --fs-figure-lg: 2rem; --lh-figure-lg: 2.25rem; /* 32/36/600 */ --fs-h1: 1.75rem; --lh-h1: 2.125rem; /* 28/34/600 */ --fs-h2: 1.375rem; --lh-h2: 1.75rem; /* 22/28/600 */ --fs-h3: 1.125rem; --lh-h3: 1.5rem; /* 18/24/500 */ --fs-body: .9375rem; --lh-body: 1.375rem; /* 15/22/400 */ --fs-ui: .875rem; --lh-ui: 1.25rem; /* 14/20/500 */ --fs-figure: .9375rem; --lh-figure: 1.25rem; /* 15/20/500 */ --fs-small: .8125rem; --lh-small: 1.125rem; /* 13/18/400 */ --fs-caption: .75rem; --lh-caption: 1rem; /* 12/16/500 */ /* older names, kept so every existing rule resolves */ --fs-body-sm: var(--fs-ui); --lh-body-sm: var(--lh-ui); --fs-label: var(--fs-ui); --lh-label: var(--lh-ui); --fs-kpi: var(--fs-figure-lg); --lh-kpi: var(--lh-figure-lg); /* the reserved minus slot: the tabular advance width, so a sign never shifts the digits */ --minus-slot: .62em; /* --- spacing: 4 to 72, nothing off-scale ------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px; --sp-12: 48px; --sp-16: 64px; /* previous scale, still referenced */ /* --- radius signals hierarchy ------------------------------------------ */ --r-input: 3px; /* inputs, buttons */ --r-card: 6px; /* panels, regions */ --r-modal: 10px; /* modals */ --r-pill: 999px; /* chips only */ /* --- elevation: a panel is border only; two raised levels -------------- */ --e-flat: none; --e-raised: 0 4px 12px rgba(23, 27, 31, .10), 0 1px 2px rgba(23, 27, 31, .06); /* dropdown, toast */ --e-overlay: 0 16px 48px rgba(23, 27, 31, .16); /* modal */ /* --- motion ------------------------------------------------------------ */ --ease: cubic-bezier(.2, 0, 0, 1); --t-fast: 150ms var(--ease); --t-panel: 200ms var(--ease); /* --- shell metrics ----------------------------------------------------- */ --rail-w: 264px; --rail-w-collapsed: 72px; --topbar-h: 60px; --page-max: 1440px; --page-gutter: 32px; /* --- sidebar: a sunken rail, same in spirit in both themes ------------- */ --rail-bg: var(--panel-sunken); --rail-text: var(--ink-muted); --rail-text-strong: var(--ink); --rail-text-muted: var(--ink-muted); --rail-hover: var(--rail-hover-bg); --rail-active: var(--panel); --rail-rule: var(--line); --rail-indicator: var(--ink); /* ======================================================================= LEGACY ALIASES — the previous direction's names, re-pointed. Every existing rule and every page-level style that reads one of these now resolves to Laboratorio without being edited. ==================================================================== */ --surface: var(--panel); --surface-sunk: var(--ground); --surface-alt: var(--panel-sunken); --border: var(--line); --border-strong: var(--line-strong); --text: var(--ink); --text-muted: var(--ink-muted); --text-subtle: var(--ink-disabled); --ink-950: #171B1F; /* text on a tan fill — stays dark */ --ink-900: var(--fill-strong); --ink-800: var(--fill-strong-hover); --ink-700: var(--ink-2); --ink-600: var(--ink-muted); --brass-700: var(--brass-ink); /* brass as text */ --brass-600: var(--brass-ink); --brass-500: var(--brass); /* marks and rules */ --brass-400: var(--brass-soft); /* tan fill, dark text on top */ --brass-100: var(--brass-tint); --brass-50: var(--brass-tint); --success-600: var(--gain); --success-50: var(--gain-chip-bg); --warning-600: var(--caution-ink); --warning-50: var(--caution-bg); --danger-600: var(--loss); --danger-50: var(--loss-chip-bg); --info-600: var(--ink-muted); --info-50: var(--panel-sunken); /* The old ring was a box-shadow. Focus is an outline now; the token stays so any rule still reading it draws nothing rather than a stale halo. */ --ring: 0 0 0 0 transparent; } /* --- dark theme: token overrides only ------------------------------------ */ :root[data-theme="dark"] { --ground: #14181C; --panel: #1C2228; --panel-sunken: #101418; --ink: #E6EAED; /* 13.3:1 AAA */ --ink-muted: #93A0A8; /* 6.0:1 AA */ --ink-disabled: #6C787F; /* 3.5:1 */ --ink-2: #AEBAC0; --line: #2C343B; --line-strong: #3D474E; --rail-hover-bg: #171C21; --fill-strong: #E6EAED; --fill-strong-hover: #C9D0D4; --on-fill-strong: #14181C; --brass: #D2A465; --brass-fill: #D2A465; /* label 7.9:1 AAA */ --brass-fill-hover: #E5BE86; --on-brass: #14181C; --brass-ink: #E5BE86; /* 9.2:1 AAA */ --brass-tint: #2A241B; --brass-soft: #D2A465; --on-soft-brass: #14181C; --gain: #4CB489; --loss: #E08A82; --gain-chip-bg: #14261F; --gain-chip-ink: #63C79C; --loss-chip-bg: #2E1D1B; --loss-chip-ink: #E8968E; --danger-ink: #F0805C; --danger-surface: #2A1C18; --danger-line: #5A3326; --caution-bg: #33280F; --caution-ink: #E8C77A; --neutral-chip-bg: #242C32; --neutral-chip-ink: #AEBAC0; --chart-1: #D2A465; --chart-2: #AEBAC0; --chart-3: #8C9A9B; --chart-4: #6C787F; --chart-5: #3D474E; --chart-6: #C9D0D4; --chart-grid: #2C343B; --focus: #E5BE86; --band: #101418; --band-control: #1C2228; --ink-950: #14181C; /* dark expresses elevation with a border step plus a deeper shadow */ --e-raised: 0 4px 12px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30); --e-overlay: 0 16px 48px rgba(0, 0, 0, .55); } /* ============================================================================= 2. BASE ========================================================================== */ /* Radios, checkboxes, date pickers, dropdown lists and scrollbars are painted by the browser, not by this stylesheet, and they follow color-scheme rather than any custom property. Without this the whole app kept light browser chrome in dark mode: an unchecked radio rendered as a solid white disc - reading as the checked one - and the native date picker opened as a white panel on a dark page. The theme script always stamps data-theme before first paint, so there is no system-preference branch to cover here. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { background-color: var(--surface-sunk); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Every numeral aligns digit-for-digit, with lining figures. */ td, th, .ds-kpi-value, .ds-num, input[type="number"], input[inputmode="decimal"], .ds-table td, .ds-money, .ds-figure { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--text); } a { color: var(--brass-ink); text-underline-offset: 2px; } a:hover { color: var(--ink); } ::selection { background: var(--brass-tint); color: var(--ink); } .ds-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 600; letter-spacing: -.02em; } .ds-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -.01em; } .ds-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; } .ds-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; } .ds-body { font-size: var(--fs-body); line-height: var(--lh-body); } .ds-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); } .ds-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; } .ds-small { font-size: var(--fs-small); line-height: var(--lh-small); } .ds-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--text-muted); } .ds-muted { color: var(--text-muted); } .ds-subtle { color: var(--text-subtle); } /* Figures. figure-xl exists because figure-lg cannot be the largest object on a page whose h1 is 28 — it is for the headline numbers only. */ .ds-figure { font-size: var(--fs-figure); line-height: var(--lh-figure); font-weight: 500; } .ds-figure-lg { font-size: var(--fs-figure-lg); line-height: var(--lh-figure-lg); font-weight: 600; letter-spacing: -.01em; } .ds-figure-xl { font-size: var(--fs-figure-xl); line-height: var(--lh-figure-xl); font-weight: 600; letter-spacing: -.01em; } .ds-gain { color: var(--gain); } .ds-loss { color: var(--loss); } /* The reserved minus slot. Put the sign (U+2212, or nothing) in a .ds-sign span in front of the digits and a column of figures keeps its decimal separators aligned whether or not a row is negative. */ .ds-sign { display: inline-block; width: var(--minus-slot); text-align: start; } /* One family: the wordmark and the login headline are Archivo too. */ .ds-wordmark, .ds-brand-headline { font-family: var(--font-sans); font-weight: 600; letter-spacing: -.01em; } /* --- icons --------------------------------------------------------------- */ .ds-i { width: 16px; height: 16px; flex: 0 0 auto; /* Lucide symbols are stroke-only. State it on the as well as the , because fill/stroke do not always inherit through . */ fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; } .ds-i-20 { width: 20px; height: 20px; } .ds-i-24 { width: 24px; height: 24px; } /* --- focus: never removed without a replacement (§11) -------------------- */ /* Laboratorio: a 2px --focus ring, 2px outside the control, everywhere. */ .ds-focusable:focus-visible, .ds-btn:focus-visible, .ds-input:focus-visible, .ds-select:focus-visible, .ds-icon-btn:focus-visible, .ds-nav-link:focus-visible, .ds-tab:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .dropdown-item:focus-visible, a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; } /* the rail's items are full-bleed, so their ring sits inside */ .ds-nav-link:focus-visible { outline-offset: -2px; } /* --- screen-reader only + skip link (§11) -------------------------------- */ .ds-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; } .ds-skip-link { position: absolute; inset-inline-start: var(--sp-4); top: -100px; z-index: 2000; padding: var(--sp-3) var(--sp-4); background: var(--fill-strong); color: var(--on-fill-strong); border-radius: var(--r-input); font-size: var(--fs-label); font-weight: 500; text-decoration: none; transition: top var(--t-fast); } .ds-skip-link:focus { top: var(--sp-4); color: var(--on-fill-strong); } /* --- reduced motion (§11) ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; /* beats vendor keyframes */ animation-iteration-count: 1 !important; /* beats WowDash .blink loop */ transition-duration: .001ms !important; /* beats vendor transitions */ scroll-behavior: auto !important; /* beats any smooth-scroll JS/CSS */ } } /* ============================================================================= 3. SHELL ========================================================================== */ /* --- 3.1 sidebar rail ---------------------------------------------------- * Laboratorio: a sunken rail, not a dark slab. Items are full-bleed 36px rows with a 3px leading edge; "where you are" is a white row with an --ink edge, because the rail is a state and brass is reserved for the action. WowDash styles `.sidebar-menu li a` at (0,1,2), which outranks .ds-nav-link, so every item rule below is scoped `.sidebar .sidebar-menu` (0,3,2) and wins on source order without !important. */ .sidebar { background-color: var(--rail-bg); background-image: none; /* the food photograph stays gone (F5) */ border-inline-end: 1px solid var(--line); color: var(--ink); } .sidebar::before { display: none; } .ds-rail-logo { display: flex; align-items: center; height: var(--topbar-h); flex: 0 0 auto; padding-inline: var(--sp-5); border-bottom: 1px solid var(--rail-rule); overflow: hidden; } .ds-rail-logo .sidebar-logo { display: flex; align-items: center; max-width: 100%; height: auto; border: 0; /* beats WowDash .sidebar-logo borders */ } .ds-rail-logo img { max-height: 36px; max-width: 100%; width: auto; object-fit: contain; border-radius: 2px; } /* The close button is a mobile-drawer control. */ .sidebar-close-btn { color: var(--ink-muted); } @media (min-width: 1200px) { .sidebar-close-btn { display: none !important; } /* beats .ds-icon-btn display */ } .sidebar .ds-rail-scroll, .sidebar .sidebar-menu-area { flex: 1 1 auto; min-height: 0; padding: var(--sp-4) 0; /* beats WowDash's 0 1rem */ overflow-y: auto; overscroll-behavior: contain; border: 0; } /* group headings, and a 20px gap between groups */ .ds-rail-group { margin-top: var(--sp-5); } .ds-rail-group:first-child { margin-top: 0; } .sidebar .sidebar-menu .ds-rail-group-label { margin: var(--sp-5) 0 0; padding: 0 var(--sp-5) var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--rail-text-muted); letter-spacing: 0; /* sentence case, never tracked caps */ } .sidebar .sidebar-menu .ds-rail-group-label:first-child { margin-top: 0; } .ds-rail-rule { height: 1px; background: var(--rail-rule); margin: var(--sp-3) var(--sp-5); border: 0; } /* nav item */ .ds-nav-link, .sidebar .sidebar-menu li a.ds-nav-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; padding: 8px 12px 8px 17px; border: 0; border-inline-start: 3px solid transparent; border-radius: 0; background: transparent; color: var(--rail-text); opacity: 1; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); } .sidebar .sidebar-menu li a.ds-nav-link:hover { background-color: var(--rail-hover); color: var(--rail-text-strong); } .ds-nav-link .ds-i, .sidebar .sidebar-menu li a.ds-nav-link .ds-i { width: 20px; height: 20px; margin: 0; /* beats WowDash .menu-icon margins */ color: currentColor; /* monochrome, follows the label */ font-size: inherit; } /* where you are */ .sidebar .sidebar-menu li a.ds-nav-link.is-active, .sidebar .sidebar-menu li a.ds-nav-link.active-page, .sidebar .sidebar-menu li.active-page > a.ds-nav-link { background-color: var(--rail-active); border-inline-start-color: var(--rail-indicator); color: var(--rail-text-strong); } .ds-nav-link.is-active::before, .sidebar-menu a.ds-nav-link.active-page::before { content: none; } /* an open group: its label turns ink, the row stays unfilled */ .sidebar .sidebar-menu li.dropdown.open > a.ds-nav-link, .sidebar .sidebar-menu li.dropdown.dropdown-open > a.ds-nav-link, .ds-nav-link.is-parent-active { background-color: transparent; color: var(--rail-text-strong); } .sidebar .sidebar-menu li.dropdown.open > a.ds-nav-link:hover, .sidebar .sidebar-menu li.dropdown.dropdown-open > a.ds-nav-link:hover { background-color: var(--rail-hover); } .ds-nav-label { flex: 1 1 auto; min-width: 0; } /* no nowrap: i18n */ /* WowDash draws its own chevron with a ::after on dropdown links; the rail ships a real SVG chevron. Scoped to the EXPANDED rail on purpose: in collapsed mode that ::after carries the tooltip (5.6f). */ .sidebar:not(.active) .sidebar-menu .dropdown > a.ds-nav-link::after { content: none !important; } /* beats WowDash chevron ::after */ .sidebar .sidebar-menu li a.ds-nav-link .ds-nav-chevron { width: 16px; height: 16px; transition: transform var(--t-panel); } .dropdown-open > .ds-nav-link .ds-nav-chevron, .open > .ds-nav-link .ds-nav-chevron { transform: rotate(90deg); } /* submenu: children sit on a guide line under the parent's icon */ .sidebar .sidebar-menu .sidebar-submenu.ds-subnav { position: relative; margin: 0; padding: 2px 0 var(--sp-2); /* beats WowDash's 2.75rem inset */ list-style: none; } .ds-subnav::before { content: ""; position: absolute; inset-inline-start: 29px; top: 2px; bottom: var(--sp-2); width: 1px; background: var(--line-strong); } .sidebar .sidebar-menu .ds-subnav li a.ds-nav-link { min-height: 32px; padding: 6px 12px 6px 45px; font-weight: 400; } .sidebar .sidebar-menu .ds-subnav li a.ds-nav-link .ds-i { width: 16px; height: 16px; } /* a child is marked by weight and fill, not by a second leading edge */ .sidebar .sidebar-menu .ds-subnav li a.ds-nav-link.active-page, .sidebar .sidebar-menu .ds-subnav li.active-page > a.ds-nav-link { border-inline-start-color: transparent; background-color: var(--rail-active); font-weight: 500; } /* academy link — an external link, so a quiet row with an outbound mark */ .sidebar .sidebar-menu li a.ds-nav-link.ds-rail-academy { margin-top: var(--sp-5); border-top: 1px solid var(--rail-rule); padding-top: 12px; padding-bottom: 12px; background: transparent; color: var(--brass-ink); } .sidebar .sidebar-menu li a.ds-nav-link.ds-rail-academy:hover { background: var(--rail-hover); color: var(--ink); } /* user chip at the foot of the rail */ .ds-rail-user-meta { flex: 1 1 auto; min-width: 0; } .ds-rail-user-menu { --bs-dropdown-min-width: 220px; } .ds-rail-user { margin-top: auto; padding: var(--sp-3) var(--sp-3); border-top: 1px solid var(--rail-rule); } .ds-rail-user-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-input); background: transparent; color: var(--ink); text-align: start; transition: background-color var(--t-fast); } .ds-rail-user-btn:hover { background: var(--rail-hover); } .ds-rail-user-name { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; color: var(--ink); } .ds-rail-user-role { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-muted); } /* avatar with initials fallback (fixes F3) — a neutral chip, never brass */ .ds-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-pill); background: var(--neutral-chip-bg); color: var(--neutral-chip-ink); font-size: var(--fs-small); font-weight: 600; overflow: hidden; } .ds-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-avatar-40 { width: 40px; height: 40px; font-size: var(--fs-ui); } .ds-avatar-72 { width: 72px; height: 72px; font-size: var(--fs-h2); } /* --- 3.2 topbar ---------------------------------------------------------- * 60px, on the page ground, ruled once. Controls are 32px bordered squares. */ .ds-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h); padding: 0 var(--page-gutter); /* beats WowDash .navbar-header padding */ background: var(--ground); border-bottom: 1px solid var(--line); } .ds-topbar.is-scrolled { backdrop-filter: blur(12px) saturate(1.2); background: color-mix(in srgb, var(--ground) 92%, transparent); } .ds-topbar-spacer { flex: 1 1 auto; } .ds-topbar-actions { display: flex; align-items: center; gap: var(--sp-2); } .ds-topbar .ds-icon-btn, .ds-topbar .ds-icon-btn.ds-icon-btn-40 { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--panel); color: var(--ink-muted); } .ds-topbar .ds-icon-btn:hover { border-color: var(--line-strong); background: var(--panel); color: var(--ink); } .ds-topbar .ds-icon-btn .ds-i { width: 18px; height: 18px; } /* the rail toggle sits in the topbar but reads as a bare glyph */ .ds-topbar .sidebar-toggle.ds-icon-btn, .ds-topbar .sidebar-mobile-toggle.ds-icon-btn { border-color: transparent; background: transparent; } .ds-topbar .sidebar-toggle.ds-icon-btn:hover, .ds-topbar .sidebar-mobile-toggle.ds-icon-btn:hover { border-color: var(--line); background: var(--panel); } /* the profile trigger: square initials plus a chevron, in one bordered box */ .ds-topbar-profile { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-1) 0 0; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--panel); color: var(--ink-muted); cursor: pointer; transition: border-color var(--t-fast); } .ds-topbar-profile:hover { border-color: var(--line-strong); color: var(--ink); } .ds-topbar-profile .ds-avatar { width: 30px; height: 30px; border-radius: 2px; font-size: var(--fs-caption); } .ds-topbar-profile .ds-i { width: 14px; height: 14px; } .ds-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); min-width: 0; } .ds-breadcrumb a { color: var(--ink-muted); text-decoration: none; } .ds-breadcrumb a:hover { color: var(--ink); } .ds-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; } .ds-breadcrumb-sep { color: var(--line-strong); } /* notification count: ink on the ground, not an alarm */ .ds-count { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--fill-strong); color: var(--on-fill-strong); font-size: 11px; font-weight: 600; line-height: 14px; font-variant-numeric: tabular-nums lining-nums; } /* the shortcuts trigger: a word plus its key */ .ds-topbar-shortcuts { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--panel); color: var(--ink-muted); font-family: inherit; font-size: var(--fs-ui); line-height: var(--lh-ui); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); } .ds-topbar-shortcuts:hover { border-color: var(--line-strong); color: var(--ink); } @media (max-width: 767.98px) { .ds-topbar-shortcuts { display: none; } } /* key cap */ .ds-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--panel-sunken); color: var(--ink-muted); font-family: inherit; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; box-shadow: none; } .ds-kbd-lg { min-width: 22px; height: 22px; padding: 0 6px; font-size: var(--fs-small); color: var(--ink); } /* on a brass fill the cap goes quiet brass */ .ds-btn-accent .ds-kbd, .btn-gold .ds-kbd { border-color: rgba(255, 255, 255, .35); background: transparent; color: inherit; opacity: .85; } /* notifications + profile menus: level-1 elevation */ .ds-notif-menu { min-width: 380px; max-width: calc(100vw - var(--sp-8)); border-radius: var(--r-card); border: 1px solid var(--line-strong); box-shadow: var(--e-raised); overflow: hidden; background: var(--panel); } .ds-notif-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--panel); border-bottom: 1px solid var(--line); } .ds-notif-list { max-height: 400px; overflow-y: auto; padding: 0; } .ds-notif-item { position: relative; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) 28px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color var(--t-fast); } /* unread dot — the one optical off-scale value, 7px */ .ds-notif-item::before { content: ""; position: absolute; inset-inline-start: 13px; top: 19px; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--brass); } .ds-notif-item:hover { background: var(--ground); color: var(--ink); } .ds-notif-item .ds-kpi-icon { display: none; } /* the dot carries the state */ .ds-notif-text { flex: 1 1 auto; min-width: 0; } .ds-notif-title { display: block; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; } .ds-notif-body { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-notif-time { font-size: var(--fs-small); color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; } .ds-notif-foot { padding: var(--sp-3) var(--sp-4); background: var(--panel-sunken); border-top: 1px solid var(--line); } .ds-profile-menu { min-width: 260px; border-radius: var(--r-card); border: 1px solid var(--line-strong); box-shadow: var(--e-raised); padding: 0; background: var(--panel); } .ds-profile-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); } .ds-profile-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ds-profile-name { font-size: var(--fs-ui); font-weight: 500; } .ds-profile-menu .dropdown-item, .ds-rail-user-menu .dropdown-item { border-radius: var(--r-input); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-ui); color: var(--ink); } .ds-profile-menu .dropdown-item:hover, .ds-rail-user-menu .dropdown-item:hover { background: var(--ground); color: var(--ink); } /* --- 3.3 page header ----------------------------------------------------- * h1 28/34 and one line of context, actions aligned to its baseline. */ .ds-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); } .ds-page-head-text { flex: 1 1 380px; min-width: 0; } .ds-page-title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--ink); } .ds-page-context { margin: var(--sp-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); } .ds-page-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* --- 3.4 content container ----------------------------------------------- */ .ds-page { max-width: var(--page-max); margin-inline: auto; padding: var(--sp-8) var(--page-gutter) var(--sp-14); } /* Bootstrap's .container caps and re-pads .ds-page at every breakpoint; the page region is the full 1440 measure with the 32px gutter instead. */ .container.ds-page, .container-fluid.ds-page { max-width: var(--page-max); padding-left: var(--page-gutter); padding-right: var(--page-gutter); } .ds-stack > * + * { margin-top: var(--sp-6); } @media (max-width: 767.98px) { :root { --page-gutter: 16px; } .ds-page { padding-top: var(--sp-5); } } /* ============================================================================= 4. COMPONENTS ========================================================================== */ /* --- 4.1 buttons --------------------------------------------------------- * 36px, 3px radius, 14/20/500. Four roles: accent brass — the one action a screen exists for (Salva, Aggiungi) primary strong neutral fill — apply / filter / confirm-a-view secondary panel with a --line-strong edge ghost no edge until hovered Danger is a secondary button outside a confirmation, and the one filled --danger surface inside it. */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--r-input); font-family: var(--font-sans); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: none; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); /* i18n: never a fixed width, never nowrap-with-truncation */ white-space: normal; } .ds-btn .ds-i { width: 16px; height: 16px; } .ds-btn:disabled, .ds-btn.is-disabled { cursor: not-allowed; opacity: 1; background: var(--panel-sunken); color: var(--ink-disabled); border-color: transparent; } .ds-btn-accent { background: var(--brass-fill); color: var(--on-brass); border-color: var(--brass-fill); } .ds-btn-accent:hover:not(:disabled) { background: var(--brass-fill-hover); border-color: var(--brass-fill-hover); color: var(--on-brass); } .ds-btn-primary { background: var(--fill-strong); color: var(--on-fill-strong); border-color: var(--fill-strong); } .ds-btn-primary:hover:not(:disabled) { background: var(--fill-strong-hover); border-color: var(--fill-strong-hover); color: var(--on-fill-strong); } .ds-btn-secondary { background: var(--panel); color: var(--ink); border-color: var(--line-strong); } .ds-btn-secondary:hover:not(:disabled) { background: var(--panel-sunken); color: var(--ink); } .ds-btn-ghost { background: transparent; color: var(--ink); } .ds-btn-ghost:hover:not(:disabled) { background: var(--panel-sunken); color: var(--ink); } .ds-btn-danger { background: var(--panel); color: var(--ink); border-color: var(--line-strong); } .ds-btn-danger:hover:not(:disabled) { background: var(--danger-surface); color: var(--ink); border-color: var(--danger-ink); } /* the confirm step: the word and the fill appear together, nowhere else */ .ds-modal .ds-btn-danger-solid, .modal .ds-btn-danger-solid, .modal-footer .ds-btn-danger, .modal-footer .btn-danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); } .ds-modal .ds-btn-danger-solid:hover, .modal .ds-btn-danger-solid:hover, .modal-footer .ds-btn-danger:hover:not(:disabled), .modal-footer .btn-danger:hover { background: var(--danger-ink); color: var(--on-danger); border-color: var(--danger-ink); } .ds-btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-ui); } .ds-btn-lg { min-height: 40px; padding: 0 var(--sp-5); font-size: var(--fs-ui); } .ds-btn-block { width: 100%; } .ds-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-input); background: transparent; color: var(--ink-muted); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); } .ds-icon-btn:hover { background: var(--panel-sunken); color: var(--ink); } .ds-icon-btn-danger:hover { background: var(--panel-sunken); color: var(--ink); } .ds-icon-btn-40 { width: 40px; height: 40px; } /* --- 4.2 inputs ---------------------------------------------------------- * Label above (14/500), help below (13, muted), error below the help. Error message text is --ink; the chroma sits on the border and one glyph. */ .ds-field { display: block; } .ds-field + .ds-field { margin-top: var(--sp-5); } .ds-field-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; color: var(--ink); } .ds-field-optional { font-weight: 400; color: var(--ink-muted); } .ds-field-help { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); } .ds-field-error { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); text-wrap: pretty; } .ds-field-error::before, .ds-glyph-alert { content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 2px; border-radius: var(--r-pill); background: var(--danger-ink); color: var(--panel); font-size: 12px; line-height: 16px; font-weight: 600; } .ds-input, .ds-select, .ds-textarea { display: block; width: 100%; min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-input); background-color: var(--panel); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-figure); box-shadow: none; transition: border-color var(--t-fast); } .ds-textarea, textarea.ds-input { padding: 10px var(--sp-3); min-height: 96px; line-height: var(--lh-body); resize: vertical; } .ds-input::placeholder, .ds-textarea::placeholder { color: var(--ink-disabled); opacity: 1; } .ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--line-strong); } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--line-strong); box-shadow: none; } .ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled, .ds-input[readonly] { background-color: var(--ground); color: var(--ink-disabled); border-color: var(--line); opacity: 1; /* no opacity trick (§6) */ } .ds-input.is-invalid, .ds-select.is-invalid, .ds-textarea.is-invalid { border: 2px solid var(--danger-ink); background-color: var(--danger-surface); padding-inline: 11px; } .ds-select { appearance: none; -webkit-appearance: none; padding-inline-end: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%235C666E' stroke-width='1.5'%3E%3Cpolyline points='5,8 10,13 15,8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 14px 14px; cursor: pointer; } :root[data-theme="dark"] .ds-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%2393A0A8' stroke-width='1.5'%3E%3Cpolyline points='5,8 10,13 15,8'/%3E%3C/svg%3E"); } [dir="rtl"] .ds-select { background-position: left var(--sp-3) center; } /* date inputs: one width for every date field on a page (F8) */ .ds-input[type="date"], .ds-date { min-width: 160px; font-variant-numeric: tabular-nums lining-nums; } .ds-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; } .ds-input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } /* affix group: € is an affix on its own ground, not a character in the value */ .ds-affix { display: flex; align-items: stretch; } .ds-affix > .ds-input { border-radius: 0; min-width: 0; } .ds-affix > .ds-input:first-child { border-start-start-radius: var(--r-input); border-end-start-radius: var(--r-input); } .ds-affix > .ds-input:last-child { border-start-end-radius: var(--r-input); border-end-end-radius: var(--r-input); } .ds-affix-text { display: inline-flex; align-items: center; padding-inline: var(--sp-3); border: 1px solid var(--line); background: var(--panel-sunken); color: var(--ink-muted); font-size: var(--fs-ui); white-space: nowrap; } .ds-affix-text:first-child { border-inline-end: 0; border-start-start-radius: var(--r-input); border-end-start-radius: var(--r-input); } .ds-affix-text:last-child { border-inline-start: 0; border-start-end-radius: var(--r-input); border-end-end-radius: var(--r-input); } .ds-affix:focus-within { border-radius: var(--r-input); outline: 2px solid var(--focus); outline-offset: 2px; } .ds-affix:focus-within .ds-input, .ds-affix:focus-within .ds-affix-text { border-color: var(--line-strong); } .ds-affix .ds-input:focus { outline: none; } /* money reads right-aligned and tabular */ .ds-input-money { text-align: end; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; } .ds-check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-ui); line-height: var(--lh-ui); } .ds-check input { width: 18px; height: 18px; accent-color: var(--fill-strong); } /* segmented choice (kg / litro / pezzo) */ .ds-segmented { display: flex; height: 40px; border: 1px solid var(--line); border-radius: var(--r-input); overflow: hidden; } .ds-segmented > * { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: var(--fs-ui); font-weight: 500; cursor: pointer; } .ds-segmented > * + * { border-inline-start: 1px solid var(--line); } .ds-segmented > .is-selected, .ds-segmented > input:checked + label { background: var(--fill-strong); color: var(--on-fill-strong); } /* --- 4.3 cards / panels -------------------------------------------------- * A panel sits on the ground with a border and no shadow. Sections inside a form are ruled bands inside one region, not stacked cards. */ .ds-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e-flat); } .ds-card-body { padding: var(--sp-5) var(--sp-6); } .ds-card-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); } .ds-card-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; margin: 0; color: var(--ink); } .ds-card-sub { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); } .ds-card-actions { display: flex; align-items: center; gap: var(--sp-2); } /* PANEL HEADERS — quiet. No fill, one hairline, the title in ink, icons muted, so the numbers are the loudest thing on the screen. */ .ds-card-head-light { background: var(--panel-sunken); } .ds-card-head-light .ds-card-title { color: var(--ink); } .ds-card-head-quiet { background: transparent; border-bottom: 1px solid var(--line); padding: var(--sp-4) var(--sp-5); } .ds-card-head-quiet .ds-card-title { color: var(--ink); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; letter-spacing: 0; } .ds-card-head-quiet .ds-i { color: var(--ink-muted); } .ds-card-head-quiet .ds-caption { color: var(--ink-muted); } .ds-card-head-quiet > i[class^="bi-"], .ds-card-head-quiet > i[class*=" bi-"] { color: var(--ink-muted); } /* a ruled band inside one region */ .ds-band { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); } .ds-band:last-child { border-bottom: 0; } .ds-band-title { margin: 0 0 4px; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; } .ds-band-sub { margin: 0 0 var(--sp-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); } /* the action bar at the foot of a form region */ .ds-actionbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); background: var(--panel-sunken); border-top: 1px solid var(--line); } /* --- 4.3b anything sitting on an ink band -------------------------------- * Several pages paint a dark strip and drop a heading in it. Put ds-on-dark on the strip and everything inside reads light (--band tokens, §1). */ .ds-on-dark, .ds-on-dark .ds-card-title, .ds-on-dark h1, .ds-on-dark h2, .ds-on-dark h3, .ds-on-dark h4, .ds-on-dark h5, .ds-on-dark h6, .ds-on-dark .ds-i { color: var(--on-band); } .ds-on-dark small, .ds-on-dark .ds-caption, .ds-on-dark .text-light { color: var(--on-band-muted); } /* mode / status pills that used .bg-secondary and vanished on dark strips */ .ds-badge.bg-secondary { background-color: var(--neutral-chip-bg) !important; color: var(--neutral-chip-ink) !important; } /* beats Bootstrap .bg-secondary */ /* --- 4.3c definition list (profile details) ------------------------------ */ .ds-dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--sp-3) var(--sp-5); margin: 0; } .ds-dl dt { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; color: var(--ink-muted); margin: 0; } .ds-dl dd { font-size: var(--fs-body); color: var(--ink); margin: 0; min-width: 0; overflow-wrap: anywhere; } @media (max-width: 479.98px) { .ds-dl { grid-template-columns: 1fr; gap: var(--sp-1) 0; } .ds-dl dd { margin-bottom: var(--sp-3); } } /* --- 4.4 KPI tiles ------------------------------------------------------- * A caption over a figure. The figure carries money colour only when it IS money that went one way; the tile itself never takes a tint. */ .ds-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } @media (max-width: 1023.98px) { .ds-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639.98px) { .ds-kpi-grid { grid-template-columns: minmax(0, 1fr); } } .ds-kpi { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); } .ds-kpi-top { display: flex; align-items: flex-start; gap: var(--sp-3); } .ds-kpi-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-muted); font-weight: 500; } .ds-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-input); background: var(--panel-sunken); color: var(--ink-muted); } .ds-kpi-value { font-size: var(--fs-figure-lg); line-height: var(--lh-figure-lg); font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; } .ds-kpi-delta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; } .ds-kpi-delta-up { background: var(--gain-chip-bg); color: var(--gain-chip-ink); } .ds-kpi-delta-down { background: var(--loss-chip-bg); color: var(--loss-chip-ink); } .ds-kpi-delta-flat { background: var(--neutral-chip-bg); color: var(--neutral-chip-ink); } /* semantic tints. Icon marks are monochrome in this system; a tint survives only where it states money or an expiry. */ .ds-tint-brass { background: var(--panel-sunken); color: var(--ink-muted); } .ds-tint-success { background: var(--panel-sunken); color: var(--ink-muted); } .ds-tint-warning { background: var(--caution-bg); color: var(--caution-ink); } .ds-tint-danger { background: var(--loss-chip-bg); color: var(--loss-chip-ink); } .ds-tint-info { background: var(--panel-sunken); color: var(--ink-muted); } .ds-tint-neutral { background: var(--panel-sunken); color: var(--ink-muted); } /* --- 4.5 tables ---------------------------------------------------------- * One region, three parts: control row, table, pagination — inside a single 1px border. 36px head on --panel-sunken, 44px rows, hover is a background change only. Text reads left, figures read right. */ .ds-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; /* the one gradient in the system: an edge shadow that says content continues. It rides the scroll container, so it disappears at the end. */ background: linear-gradient(to right, var(--panel) 30%, transparent) left center, linear-gradient(to left, var(--panel) 30%, transparent) right center, radial-gradient(farthest-side at 0 50%, rgba(23,27,31,.16), transparent) left center, radial-gradient(farthest-side at 100% 50%, rgba(23,27,31,.16), transparent) right center; background-repeat: no-repeat; background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; } :root[data-theme="dark"] .ds-table-scroll { background: linear-gradient(to right, var(--panel) 30%, transparent) left center, linear-gradient(to left, var(--panel) 30%, transparent) right center, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), transparent) left center, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), transparent) right center; background-repeat: no-repeat; background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; } .ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-figure); } .ds-table thead th { position: sticky; top: 0; z-index: 1; height: 36px; padding: 8px var(--sp-4); background: var(--panel-sunken); border-bottom: 1px solid var(--line); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--ink-muted); text-align: start; white-space: nowrap; vertical-align: middle; } .ds-table tbody td { padding: 10px var(--sp-4); height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; } .ds-table thead th:first-child, .ds-table tbody td:first-child, .ds-table tfoot td:first-child, .ds-table tfoot th:first-child { padding-inline-start: var(--sp-5); } .ds-table thead th:last-child, .ds-table tbody td:last-child, .ds-table tfoot td:last-child, .ds-table tfoot th:last-child { padding-inline-end: var(--sp-5); } .ds-table tbody tr { transition: background-color var(--t-fast); } .ds-table tbody tr:hover { background: var(--ground); } /* no zebra, no lift */ .ds-table .ds-num, .ds-table .ds-money, .ds-table th.ds-num, .ds-table td.ds-num { text-align: end; } .ds-table td.ds-num, .ds-table td.ds-money { font-weight: 500; } .ds-table .ds-date-cell { color: var(--ink-muted); white-space: nowrap; } .ds-table-row-flag { box-shadow: inset 3px 0 0 var(--brass); } /* not a bg flood */ .ds-table-actions { display: flex; align-items: center; gap: var(--sp-1); justify-content: flex-end; } /* the name column is a link in ink, brass only on hover */ .ds-table tbody td a:not(.btn):not(.ds-btn):not(.ds-icon-btn) { color: var(--ink); font-weight: 500; text-decoration: none; } .ds-table tbody td a:not(.btn):not(.ds-btn):not(.ds-icon-btn):hover { color: var(--brass-ink); text-decoration: underline; } /* --- 4.6 filter bar ------------------------------------------------------ */ .ds-filterbar { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); } .ds-filterbar .ds-field { flex: 1 1 180px; min-width: 0; } .ds-filterbar .ds-field + .ds-field { margin-top: 0; } .ds-filterbar-actions { display: flex; gap: var(--sp-2); margin-inline-start: auto; } @media (max-width: 767.98px) { .ds-filterbar { align-items: stretch; padding: var(--sp-3) var(--sp-4); } .ds-filterbar .ds-field { flex-basis: calc(50% - var(--sp-2)); } .ds-filterbar-actions { margin-inline-start: 0; width: 100%; } .ds-filterbar-actions .ds-btn { flex: 1 1 auto; } } @media (max-width: 479.98px) { .ds-filterbar .ds-field { flex-basis: 100%; } } .ds-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); } .ds-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); font-size: var(--fs-small); color: var(--ink); } /* --- 4.6b grouped-date accordion rows (Vendite) --------------------------- */ .ds-list-head { border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); } .ds-table tbody tr.group-header, table.ds-table tbody tr.group-header { cursor: pointer; background-color: var(--panel-sunken) !important; /* beats .bg-light */ border-top: 1px solid var(--line); } .ds-table tbody tr.group-header:hover, table.ds-table tbody tr.group-header:hover { background-color: var(--rail-hover-bg) !important; /* beats .bg-light */ } .ds-table tbody tr.group-header td { font-weight: 500; } .ds-table tbody tr.group-header .toggle-arrow { color: var(--ink-muted); width: 32px; } .ds-table tbody tr.group-header .toggle-arrow i { transition: transform var(--t-fast); display: inline-block; } .ds-table tbody tr.group-header.is-open .toggle-arrow i { transform: rotate(90deg); } /* --- 4.7 badges and chips ------------------------------------------------ * Pills only here. States are distinguished by weight and wording first; colour exists for money (gain / loss) and expiry (caution) alone. */ .ds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; background: var(--neutral-chip-bg); color: var(--neutral-chip-ink); white-space: nowrap; } .ds-badge-success { background: var(--gain-chip-bg); color: var(--gain-chip-ink); } .ds-badge-warning { background: var(--caution-bg); color: var(--caution-ink); } .ds-badge-danger { background: var(--loss-chip-bg); color: var(--loss-chip-ink); } .ds-badge-info { background: var(--neutral-chip-bg); color: var(--neutral-chip-ink); } .ds-badge-brass { background: var(--brass-tint); color: var(--brass-ink); } /* role badges: one neutral chip, five roles told apart by their word */ .ds-badge-role { background: var(--neutral-chip-bg); color: var(--neutral-chip-ink); border: 0; } /* --- 4.8 alerts ---------------------------------------------------------- * An alert attaches to a surface. Its text is always --ink. */ .ds-alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); color: var(--ink); } .ds-alert > .ds-i { width: 18px; height: 18px; margin-top: 1px; } .ds-alert-title { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; margin: 0 0 2px; } .ds-alert-body { font-size: var(--fs-ui); line-height: var(--lh-ui); margin: 0; } .ds-alert-content { flex: 1 1 auto; min-width: 0; } .ds-alert-info { background: var(--panel-sunken); border-color: var(--line); } .ds-alert-info > .ds-i { color: var(--ink-muted); } .ds-alert-success { background: var(--panel); border-color: var(--line-strong); } .ds-alert-success > .ds-i { color: var(--ink); } .ds-alert-warning { background: var(--caution-bg); border-color: color-mix(in srgb, var(--caution-ink) 25%, transparent); } .ds-alert-warning > .ds-i { color: var(--caution-ink); } .ds-alert-danger { background: var(--danger-surface); border-color: var(--danger-line); } .ds-alert-danger > .ds-i { color: var(--danger-ink); } .ds-alert .ds-alert-body, .ds-alert .ds-alert-title, .ds-alert li { color: var(--ink); } /* inline stat pair, used by the BEP strip */ .ds-statpair { display: flex; flex-wrap: wrap; gap: var(--sp-6); } .ds-stat-label { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--ink-muted); } .ds-stat-value { font-size: var(--fs-h3); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); } /* --- 4.9 modals ---------------------------------------------------------- * Level 2: 10px, a --line-strong edge, the deep shadow. The footer is a sunken band that carries the consequence and the actions. */ .ds-modal-content, .modal-content { border-radius: var(--r-modal); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); box-shadow: var(--e-overlay); overflow: hidden; } .ds-modal-head { display: flex; align-items: flex-start; gap: var(--sp-6); padding: var(--sp-6) var(--sp-6) var(--sp-5); border-bottom: 1px solid var(--line); } .ds-modal-title { flex: 1 1 auto; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; margin: 0; } .ds-modal-body { padding: var(--sp-6); } .ds-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); background: var(--panel-sunken); border-top: 1px solid var(--line-strong); } .modal-content > .modal-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); } .modal-content > .modal-header .modal-title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; color: var(--ink); } .modal-content > .modal-body { padding: var(--sp-6); } .modal-content > .modal-footer { padding: var(--sp-4) var(--sp-6); background: var(--panel-sunken); border-top: 1px solid var(--line-strong); gap: var(--sp-3); } .modal-content > .modal-footer > * { margin: 0; } .modal-backdrop { --bs-backdrop-bg: #171B1F; --bs-backdrop-opacity: .44; } :root[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .6; } /* --- 4.10 toasts --------------------------------------------------------- * Non-chromatic: the confirmation is the event, not a green tick. */ .ds-toast-region { position: fixed; inset-block-end: var(--sp-6); inset-inline-end: var(--sp-6); z-index: 1080; display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(400px, calc(100vw - var(--sp-8))); } .ds-toast { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--panel); color: var(--ink); box-shadow: var(--e-raised); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500; animation: ds-toast-in var(--t-panel); } @keyframes ds-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ds-toast-icon { display: inline-flex; flex: none; } .ds-toast-success .ds-toast-icon { color: var(--ink); } .ds-toast-danger .ds-toast-icon { color: var(--danger-ink); } .ds-toast-info .ds-toast-icon { color: var(--ink-muted); } .ds-toast .ds-icon-btn { width: 28px; height: 28px; } /* --- 4.11 empty + loading states ----------------------------------------- * The empty state sits inside the region it describes, under a real header row, so the columns still say what the screen will hold. */ .ds-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); padding: var(--sp-18) var(--sp-10); } .ds-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--panel-sunken); color: var(--ink-muted); } .ds-empty-mark .ds-i { width: 22px; height: 22px; } .ds-empty-title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; margin: 0; color: var(--ink); } .ds-empty-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); margin: 0 auto; max-width: 52ch; text-wrap: pretty; } .ds-empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; } /* Empty cells inside a table — DataTables' emptyTable / zeroRecords text and Blade @forelse..@empty rows both land in a single . Styling the cell gives every list a real empty state without touching one string or one line of markup. The two cases stay distinguishable because DataTables already uses different copy for "nothing here yet" and "no results". */ td.dt-empty, td.dataTables_empty, .ds-empty-cell { padding: var(--sp-14) var(--sp-10) !important; /* beats the page `table td` rules */ text-align: center !important; /* beats page `table td{text-align}` */ color: var(--ink-muted) !important; /* beats page `table td{color}` */ font-size: var(--fs-body); line-height: var(--lh-body); background: var(--panel) !important; /* beats striped-row backgrounds */ } td.dt-empty::before, td.dataTables_empty::before, .ds-empty-cell::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto var(--sp-4); box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--r-card); background-color: var(--panel-sunken); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235C666E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } :root[data-theme="dark"] td.dt-empty::before, :root[data-theme="dark"] td.dataTables_empty::before, :root[data-theme="dark"] .ds-empty-cell::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2393A0A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); } /* Empty cells are the one case that stays centred, so they have to outrank the left-alignment rule in 5.6d. */ .ds-table tbody td.ds-empty-cell, table.ds-table tbody td.ds-empty-cell, .ds-table tbody td.dt-empty, table.ds-table tbody td.dt-empty, .ds-table tbody td.dataTables_empty, table.ds-table tbody td.dataTables_empty { text-align: center !important; } /* DataTables does not support colspan in a DOM-sourced tbody: it pads the row out with empty cells of its own. Hiding the padding cells is presentation only - the row still spans the table because the real cell keeps its colspan. */ tr:has(> td.ds-empty-cell[colspan]) > td:not(.ds-empty-cell), tr:has(> td.dt-empty[colspan]) > td:not(.dt-empty), tr:has(> td.dataTables_empty[colspan]) > td:not(.dataTables_empty) { display: none; } /* an action offered under an empty cell */ .ds-empty-cell .ds-btn { margin-top: var(--sp-4); } /* Panels whose empty message is a bare

rather than a table cell. */ .ds-empty-note { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-body); } .ds-empty-note::before { content: ""; width: 44px; height: 44px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--r-card); background-color: var(--panel-sunken); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235C666E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } :root[data-theme="dark"] .ds-empty-note::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2393A0A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E"); } /* Loading: geometry held, no shimmer. A placeholder is a flat sunken shape of exactly the size the real content will take. */ .ds-skeleton { background: var(--panel-sunken); border-radius: var(--r-input); } .ds-skeleton-line { height: 12px; margin-bottom: var(--sp-2); } .ds-skeleton-kpi { height: 104px; border-radius: var(--r-card); } .ds-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin .6s linear infinite; } @keyframes ds-spin { to { transform: rotate(360deg); } } /* --- 4.12 charts (appearance only) --------------------------------------- * Every chart sits in an identical panel on one fixed geometry, drawn from one ordered ramp with brass on the leading series (--chart-1..5). The colours are handed to ApexCharts by assets/js/ds-charts.js. */ .ds-chart { min-height: 240px; } .ds-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); } .ds-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); } .ds-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; } /* ApexCharts chrome, in tokens. Series fills are set in JS; everything the library draws around them follows the theme here. */ .apexcharts-canvas { font-family: var(--font-sans) !important; } /* beats ApexCharts inline font-family */ .apexcharts-text, .apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--ink-muted); } .apexcharts-title-text, .apexcharts-datalabel-value { fill: var(--ink); } .apexcharts-gridline, .apexcharts-xaxis-tick, .apexcharts-grid-borders line, .apexcharts-xaxis line { stroke: var(--chart-grid); } .apexcharts-legend-text { color: var(--ink-muted) !important; font-family: var(--font-sans) !important; font-size: var(--fs-small) !important; } /* beats ApexCharts inline style */ .apexcharts-legend-marker { border-radius: 2px !important; } /* beats the inline round marker */ .apexcharts-tooltip.apexcharts-theme-light { border: 1px solid var(--line-strong) !important; /* beats the library's own border */ background: var(--panel) !important; color: var(--ink); box-shadow: var(--e-raised) !important; border-radius: var(--r-input); } .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--panel-sunken) !important; border-bottom: 1px solid var(--line) !important; font-family: var(--font-sans) !important; } .apexcharts-tooltip-text, .apexcharts-tooltip-text-y-value { font-variant-numeric: tabular-nums lining-nums; } .apexcharts-xaxistooltip, .apexcharts-yaxistooltip { background: var(--panel) !important; border-color: var(--line-strong) !important; color: var(--ink) !important; } .apexcharts-menu { background: var(--panel) !important; border-color: var(--line-strong) !important; border-radius: var(--r-input) !important; } .apexcharts-menu-item:hover { background: var(--panel-sunken) !important; } /* A donut's slices are drawn with no seam of page colour between them */ .apexcharts-pie-series path { stroke: var(--panel); } .apexcharts-pie-label { fill: var(--on-band) !important; font-weight: 500 !important; } .apexcharts-datalabels-group .apexcharts-datalabel-label { fill: var(--ink-muted) !important; } .apexcharts-datalabels-group .apexcharts-datalabel-value { fill: var(--ink) !important; font-weight: 600 !important; } /* --- 4.13 auth / login --------------------------------------------------- */ .ds-auth-body { background: var(--ground); } .ds-auth { display: flex; min-height: 100vh; } .ds-auth-brand { display: none; flex: 1 1 50%; background: var(--band); color: var(--on-band); padding: var(--sp-16) var(--sp-12); border-inline-end: 1px solid var(--band-line); } @media (min-width: 992px) { .ds-auth-brand { display: flex; align-items: center; } } .ds-auth-brand-inner { max-width: 440px; margin-inline: auto; } .ds-auth-logo { max-width: 280px; height: auto; margin-bottom: var(--sp-10); border-radius: var(--r-input); } .ds-auth-tagline { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; color: var(--on-band); margin: 0; text-wrap: pretty; } .ds-auth-tagline::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: var(--sp-5); background: var(--brass); } .ds-auth-panel { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-6); background: var(--ground); } .ds-auth-form { width: 100%; max-width: 440px; padding: var(--sp-8); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); } @media (max-width: 479.98px) { .ds-auth-form { padding: var(--sp-6) var(--sp-5); } } .ds-auth-logo-mobile { display: block; margin-bottom: var(--sp-6); } .ds-auth-logo-mobile img { max-height: 56px; width: auto; border-radius: var(--r-input); } @media (min-width: 992px) { .ds-auth-logo-mobile { display: none; } } .ds-auth-title { margin: 0 0 var(--sp-2); } .ds-auth-sub { margin: 0 0 var(--sp-6); color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-body); } .ds-input-lg { min-height: 44px; } .ds-password-wrap { position: relative; } .ds-password-toggle { position: absolute; inset-inline-end: var(--sp-3); top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--ink-muted); line-height: 1; } .ds-password-toggle:hover { color: var(--ink); } .ds-password-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-input); } .ds-password-wrap .ds-input { padding-inline-end: var(--sp-10); } .ds-auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-6); } .ds-auth-link { font-size: var(--fs-ui); color: var(--brass-ink); text-decoration: underline; text-underline-offset: 2px; } .ds-auth-link:hover { color: var(--ink); } /* --- 4.14 state screens: 403, no permission ------------------------------ */ .ds-state { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--topbar-h) - var(--sp-16)); padding: var(--sp-8); } .ds-state-inner { max-width: 440px; text-align: center; } .ds-state-inner .ds-empty-mark { margin: 0 auto; } .ds-state-title { margin: var(--sp-5) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; color: var(--ink); } .ds-state-body { margin: var(--sp-3) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); text-wrap: pretty; } .ds-state-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); } /* --- 4.15 keyboard shortcuts dialog -------------------------------------- */ .ds-shortcuts[hidden] { display: none; } .ds-shortcuts { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: var(--sp-8); background: rgba(23, 27, 31, .44); } :root[data-theme="dark"] .ds-shortcuts { background: rgba(0, 0, 0, .6); } .ds-shortcuts-dialog { width: 640px; max-width: 100%; max-height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-modal); box-shadow: var(--e-overlay); color: var(--ink); } .ds-shortcuts-cols { display: flex; flex-wrap: wrap; } .ds-shortcuts-col { flex: 1 1 300px; min-width: 0; } .ds-shortcuts-col + .ds-shortcuts-col { border-inline-start: 1px solid var(--line); } .ds-shortcuts-colhead { padding: var(--sp-3) var(--sp-6); background: var(--panel-sunken); border-bottom: 1px solid var(--line); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--ink-muted); } .ds-shortcuts-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 10px var(--sp-6); border-bottom: 1px solid var(--line); font-size: var(--fs-ui); line-height: var(--lh-ui); } .ds-shortcuts-keys { display: flex; gap: var(--sp-1); flex: none; } .ds-shortcuts-pending { position: fixed; inset-block-end: var(--sp-6); inset-inline-start: 50%; transform: translateX(-50%); z-index: 1085; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-input); box-shadow: var(--e-raised); font-size: var(--fs-small); color: var(--ink-muted); } .ds-shortcuts-pending[hidden] { display: none; } /* ============================================================================= 5. VENDOR OVERRIDES ----------------------------------------------------------------------------- Every !important in this file is below this line, and each names what it beats. Nothing here changes a value, a string, or a query. ========================================================================== */ /* --- 5.1 defect F1: horizontal clipping ---------------------------------- * Root cause (measured, not assumed): WowDash sets `overflow-x: hidden` on at style.css:385. Wide content is therefore CLIPPED and unreachable rather than scrollable — e.g. /comparison renders a 615px-wide table inside a 390px viewport with 225px permanently cut off. Fix: let the page scroll instead of amputating content. Individual wide blocks still get their own .ds-table-scroll container. */ body { overflow-x: visible !important; /* beats WowDash style.css:385 */ } /* --- 5.2 typography ------------------------------------------------------ * `* { font-family: ... !important }` was removed from app.blade.php (D1). WowDash's own body rule already asks for Inter; these keep headings and controls on the system stack rather than the template's serif fallbacks. */ body, .dashboard-main, .sidebar, h1, h2, h3, h4, h5, h6, .btn, .form-control, .form-select, table, input, select, textarea, button { font-family: var(--font-sans); } /* --- 5.2b heading scale -------------------------------------------------- * WowDash sets `h1..h6, .h1..h6 { font-size: var(--hN) !important }` where the custom properties are viewport-scaled clamps — --h1 reaches 4.5rem. Nothing short of !important can beat that, so the design-system heading classes restate their sizes here. Deliberately scoped to the ds- classes: bare

on pages not yet redesigned keeps WowDash's sizing until that page is done, so this cannot silently restyle the whole app mid-project. */ .ds-display { font-size: var(--fs-display) !important; } .ds-h1 { font-size: var(--fs-h1) !important; } .ds-h2 { font-size: var(--fs-h2) !important; } .ds-h3 { font-size: var(--fs-h3) !important; } .ds-page-title { font-size: var(--fs-h1) !important; } .ds-card-title { font-size: var(--fs-h3) !important; } .ds-modal-title { font-size: var(--fs-h2) !important; } .ds-kpi-value { font-size: var(--fs-figure-lg) !important; } .ds-empty-title { font-size: var(--fs-h2) !important; } .ds-state-title { font-size: var(--fs-h2) !important; } .ds-band-title { font-size: var(--fs-h3) !important; } .ds-stat-value { font-size: var(--fs-h3) !important; } .ds-figure-xl { font-size: var(--fs-figure-xl) !important; } .ds-figure-lg { font-size: var(--fs-figure-lg) !important; } .modal-content > .modal-header .modal-title { font-size: var(--fs-h2) !important; } /* --- 5.2c checkboxes and radios ------------------------------------------ * The vendor reset strips the native control's appearance; restore a visible box so "Ricordati di me" and every table check are actually seeable. */ .ds-check input[type="checkbox"], .ds-check input[type="radio"] { appearance: auto !important; /* beats the vendor appearance reset */ -webkit-appearance: auto !important; width: 18px; height: 18px; margin: 0; accent-color: var(--fill-strong); /* a checked box is ink in both themes */ flex: 0 0 auto; } /* The views use Bootstrap's .form-check markup rather than .ds-check, so they never picked up the rule above. Bootstrap draws its own control with appearance:none and a background-image tick in its own blue, and it follows data-bs-theme, which this app does not set - so in dark mode a checked radio came out a pale blue square that read as neither on nor off. A native control with accent-color tracks the theme and stays legible in both. */ .form-check-input, .ds-check-input { appearance: auto; -webkit-appearance: auto; width: 18px; height: 18px; accent-color: var(--fill-strong); border: 0; box-shadow: none; } .form-check-input:focus-visible, .ds-check-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* a switch keeps Bootstrap's drawn track, in ink */ .form-switch .form-check-input { appearance: none; -webkit-appearance: none; width: 2.25em; height: 1.25em; border: 1px solid var(--line-strong); background-color: var(--panel-sunken); } .form-switch .form-check-input:checked { background-color: var(--fill-strong); border-color: var(--fill-strong); } /* --- 5.2d panel headers on Bootstrap cards ------------------------------- * WowDash styles `.card .card-header { background-color: var(--white) }` at specificity 0,2,0, which outranks a single .ds-card-head-* class. When a dark header lost that fight it kept the white background but still got the white title — invisible text, the same failure mode as defect #2. Matching the vendor's specificity instead of reaching for !important. */ .card > .card-header.ds-card-head, .card .card-header.ds-card-head { padding: var(--sp-4) var(--sp-5); border-color: var(--border); color: var(--text); } .card > .card-header.ds-card-head-light, .card .card-header.ds-card-head-light { background-color: var(--surface-alt); color: var(--text); } .card > .card-header.ds-card-head-quiet, .card .card-header.ds-card-head-quiet { background-color: transparent; border-color: var(--line); color: var(--ink); } /* .ds-card on a Bootstrap .card: flatten the vendor shadow, keep our border. */ .card.ds-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: none; } /* --- 5.3 Bootstrap buttons (fixes F4) ------------------------------------ * 23 raw .btn-primary render as Bootstrap blue next to brand brass. Re-point Bootstrap's primary at the brand navy so one button system reads across the app without touching a single markup class. */ /* Laboratorio: Bootstrap primary is the strong neutral fill (apply / filter). Brass stays for the one action a page exists for. */ .btn-primary { background-color: var(--fill-strong) !important; /* beats .btn-primary bg */ border-color: var(--fill-strong) !important; color: var(--on-fill-strong) !important; } /* hover/focus/active: same fight as above, beats Bootstrap .btn-primary */ .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--fill-strong-hover) !important; border-color: var(--fill-strong-hover) !important; color: var(--on-fill-strong) !important; } /* beats Bootstrap's own blue focus ring */ .btn-primary:focus-visible { box-shadow: none !important; outline: 2px solid var(--focus); outline-offset: 2px; } /* Every Bootstrap button shares the system's geometry. */ .btn { border-radius: var(--r-input); font-family: var(--font-sans); font-weight: 500; } .ds-page .btn:not(.btn-sm):not(.btn-lg):not(.btn-link) { min-height: 36px; } .btn:focus { box-shadow: none; } /* --- 5.3b page-level brass table headers --------------------------------- * Several views carry a page