/* Rezolix components — plain CSS on top of tokens.css. Every value is a token; no hue is hard-coded except inside .rz-brand-* white-label examples. */

/* ---------- base ---------- */
.rz-root, .rz-root * { box-sizing: border-box; }
.rz-root { font-family: var(--font-ui); font-size: var(--font-size-md); line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
.rz-root h1, .rz-root h2, .rz-root h3, .rz-root p { margin: 0; }
:where(.rz-root) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.rz-num, .rz-root [data-num] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.rz-muted { color: var(--color-text-muted); }
.rz-root :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.rz-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rz-icon--lg { width: 28px; height: 28px; }
.rz-icon--xl { width: 48px; height: 48px; stroke-width: 2.5; }

/* ---------- white-label: example client (dark green + mustard) ---------- */
.rz-brand-client { --color-primary: #14532d; --color-primary-hover: #0f4023; --color-on-primary: #ffffff; --color-primary-soft: #e3efe7; --color-accent: #ca8a04; --color-on-accent: #131210; --color-link: #14532d; }
[data-theme="dark"] .rz-brand-client, .rz-brand-client[data-theme="dark"] { --color-primary: #4ade80; --color-primary-hover: #6ee79a; --color-on-primary: #0a1f12; --color-primary-soft: #16301f; --color-accent: #eab308; --color-on-accent: #131210; --color-link: #6ee79a; }

/* ---------- button ---------- */
.rz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-touch); min-width: var(--size-touch); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 var(--font-size-md)/1 var(--font-ui); cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2; transition: background-color .12s ease, border-color .12s ease; }
.rz-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.rz-btn--primary:hover { background: var(--color-primary-hover); }
.rz-btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.rz-btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.rz-btn--secondary:hover { background: var(--color-surface-sunken); }
.rz-btn--ghost { background: transparent; color: var(--color-text); }
.rz-btn--ghost:hover { background: var(--color-surface-sunken); }
.rz-btn--danger { background: var(--color-danger-solid); color: var(--color-on-status); }
.rz-btn--success { background: var(--color-success-solid); color: var(--color-on-status); }
.rz-btn--lg { min-height: var(--size-touch-lg); font-size: var(--font-size-lg); padding: 0 var(--space-6); }
.rz-btn--xl { min-height: var(--size-touch-xl); font-size: var(--font-size-xl); padding: 0 var(--space-8); border-radius: var(--radius-lg); }
.rz-btn--block { width: 100%; }
.rz-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- badge (status: always icon + word) ---------- */
.rz-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2) 2px 6px; border-radius: var(--radius-sm); font: 600 var(--font-size-sm)/20px var(--font-ui); white-space: nowrap; background: var(--color-surface-sunken); color: var(--color-text); }
.rz-badge .rz-icon { width: 16px; height: 16px; stroke-width: 2.25; }
.rz-badge--success { background: var(--color-success-soft); color: var(--color-success); }
.rz-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.rz-badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.rz-badge--info    { background: var(--color-info-soft);    color: var(--color-info); }
.rz-badge--soon    { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* ---------- card / KPI ---------- */
.rz-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.rz-card__title { font: 650 var(--font-size-lg)/24px var(--font-ui); margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rz-kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.rz-kpi__label { font: 600 var(--font-size-sm)/20px var(--font-ui); color: var(--color-text-muted); }
.rz-kpi__value { font: 700 var(--font-size-3xl)/40px var(--font-ui); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rz-kpi__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2); }

/* ---------- morning list ("à traiter aujourd'hui") ---------- */
.rz-todo { list-style: none; margin: 0; padding: 0; }
.rz-todo__item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--space-4); min-height: 72px; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.rz-todo__item:first-child { border-top: 0; }
.rz-todo__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; }
.rz-todo__icon--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.rz-todo__icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.rz-todo__icon--info { background: var(--color-info-soft); color: var(--color-info); }
.rz-todo__icon--neutral { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.rz-todo__title { font-weight: 600; }
.rz-todo__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ---------- form ---------- */
.rz-field { display: flex; flex-direction: column; gap: var(--space-2); }
.rz-label { font: 600 var(--font-size-sm)/20px var(--font-ui); }
.rz-input { min-height: var(--size-touch); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 400 var(--font-size-md) var(--font-ui); width: 100%; }
.rz-input::placeholder { color: var(--color-text-muted); }
.rz-help { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.rz-help--error { color: var(--color-danger); display: flex; gap: var(--space-1); align-items: center; }
.rz-input--error { border-color: var(--color-danger); border-width: 2px; }

/* ---------- table ---------- */
.rz-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-md); }
.rz-table th { text-align: left; font: 600 var(--font-size-sm)/20px var(--font-ui); color: var(--color-text-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.rz-table td { padding: 0 var(--space-4); height: 64px; border-bottom: 1px solid var(--color-border); }
.rz-table tr[aria-selected="true"] td { background: var(--color-primary-soft); }
.rz-table .rz-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- tabs / segmented ---------- */
.rz-tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-sunken); border-radius: var(--radius-md); }
.rz-tab { min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--color-text-muted); font: 600 var(--font-size-sm) var(--font-ui); display: inline-flex; align-items: center; gap: var(--space-2); }
.rz-tab[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.rz-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-sunken); color: var(--color-text); font: 700 12px/22px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
.rz-tab[aria-selected="true"] .rz-count { background: var(--color-primary); color: var(--color-on-primary); }

/* ---------- app shell ---------- */
.rz-app { display: grid; grid-template-columns: var(--size-sidebar) 1fr; height: 100%; background: var(--color-bg); }
.rz-side { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.rz-side__brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-5); font-weight: 700; font-size: var(--font-size-lg); }
.rz-side__logo { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; font-weight: 800; }
.rz-site { width: 100%; background: var(--color-surface); color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--size-touch); padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-weight: 600; font-size: var(--font-size-sm); }
.rz-nav { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text-muted); font-weight: 600; font-size: 15px; white-space: nowrap; text-decoration: none; }
.rz-nav[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-text); box-shadow: inset 3px 0 0 var(--color-primary); }
.rz-nav .rz-count { margin-left: auto; }
.rz-nav__soon { margin-left: auto; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-muted); }
.rz-main { padding: var(--space-8) var(--space-10); overflow: hidden; display: flex; flex-direction: column; gap: var(--space-6); }
.rz-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }

/* ---------- till ---------- */
.rz-tile { min-height: 112px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; justify-content: space-between; text-align: left; font: 600 var(--font-size-md)/22px var(--font-ui); color: var(--color-text); }
.rz-tile__price { font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rz-tile--cat { box-shadow: inset 0 4px 0 var(--cat, var(--color-border)); }
.rz-ticket__line { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-3); min-height: 56px; border-bottom: 1px solid var(--color-border); }
.rz-qty { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- kitchen ---------- */
.rz-kitchen { font-size: var(--font-size-lg); }
.rz-reading { font: 700 var(--font-size-kitchen)/1 var(--font-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rz-state { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); font: 700 var(--font-size-4xl)/1.1 var(--font-ui); }
.rz-state--ok { background: var(--color-success-solid); color: var(--color-on-status); }
.rz-state--bad { background: var(--color-danger-solid); color: var(--color-on-status); }
.rz-key { min-height: 72px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 700 var(--font-size-2xl) var(--font-ui); font-variant-numeric: tabular-nums; }
.rz-count--accent { background: var(--color-accent); color: var(--color-on-accent); }

/* ---------- theme-aware images (logo files cannot inherit colour) ---------- */
.rz-only-dark { display: none; }
[data-theme="dark"] .rz-only-light { display: none; }
[data-theme="dark"] .rz-only-dark { display: inline-block; }