/* Pilotage Oliveras: what the screens add to the kit UI Oliveras (libs/ui/oliveras_ui).
   Colours, sizes and spacings come from the tokens (var(--x)); a component of the kit is never written again here:
   the application adds its own classes, or scopes a rule under one of them (.restock h2).
   Checked by tests/test_design_system.py (python -m oliveras_ui.audit). */

/* Texts ----------------------------------------------------------------------------------------------------------- */
.small-13 { font-size: var(--fs-13); }
.measure { max-width: 90ch; }
.plain-link { text-decoration: none; }
.plain-link:hover { text-decoration: underline; }
.plain-list { margin: 0; padding-left: var(--space-18); font-size: var(--fs-14); }
.pill-neutral { background: var(--surface-page); color: var(--text-muted); }

/* The head of a detailed screen: the title at the left, the salesperson filter at the right */
.screen-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-12) var(--space-24); }
.screen-head .screen-sub { font-size: var(--fs-14); }
.seller-filter select { width: auto; min-width: 220px; font-size: var(--fs-14); padding: var(--space-8) var(--space-12); border-radius: var(--radius-full); }
.summary-line { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-24); font-size: var(--fs-14); color: var(--text-muted); }
.summary-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.toolbar-label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-muted); }
.toolbar-ruled { padding-top: var(--space-12); border-top: 1px solid var(--border); }
.sort-pick, .inline-label { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-13); font-weight: var(--fw-semibold);
  color: var(--text-muted); }
.sort-pick select, .inline-label select { width: auto; font-size: var(--fs-14); padding: var(--space-6) var(--space-10); }
.table-foot { padding: var(--space-10); font-size: var(--fs-13); }
.table-card .empty { text-align: center; }

/* Accueil --------------------------------------------------------------------------------------------------------- */
.lever { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-10); align-items: center; }
.lever-text { display: flex; flex-direction: column; gap: var(--space-2); }
.lever-text b { font-size: var(--fs-14); }
.lever-text small { font-size: var(--fs-12); color: var(--text-muted); }
.todo { display: flex; flex-direction: column; gap: var(--space-2); }

/* Chiffres -------------------------------------------------------------------------------------------------------- */
.chart-note { font-size: var(--fs-12); color: var(--text-muted); text-wrap: pretty; }
.segment-card { gap: var(--space-4); }
.segment-card .list-row { padding: var(--space-8) 0; }

/* Ventes: the drawn charts (ui_web/charts.py) */
.chart { display: block; width: 100%; height: auto; }
.chart text { fill: var(--text-muted); font-family: var(--font); font-size: var(--fs-13); }
.chart text.chart-strong { fill: var(--text); font-weight: var(--fw-bold); font-size: var(--fs-15); }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-current { fill: var(--chart-current); }
.chart-current-soft { fill: var(--chart-current); opacity: .85; }
.chart-reference { fill: var(--chart-reference); }
.chart-line { stroke: var(--chart-reference-line); }
.chart-previous { stroke: var(--chart-reference); }
.chart-now { stroke: var(--chart-current); }
.chart-area { fill: var(--chart-current); opacity: .08; }
.chart-legend { justify-content: flex-start; font-size: var(--fs-13); }
.chart-legend i { width: var(--space-12); height: var(--space-12); }
@media (max-width: 700px) {
  .chart text { font-size: var(--fs-22); }
  .chart text.chart-strong { font-size: var(--fs-24); }
}

/* Clients --------------------------------------------------------------------------------------------------------- */
.next-action { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.weight-card { gap: var(--space-10); }
.weight-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--space-10); align-items: center; text-decoration: none; }
.weight-main { display: flex; flex-direction: column; gap: var(--space-4); }
.weight-name { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.weight-row b { font-size: var(--fs-13); text-align: right; }
.grid-card { gap: var(--space-6); }
.grid-card .list-row { padding: var(--space-10) 0; }
.client-stack { gap: var(--space-16); }
.card-small-title { font-size: var(--fs-13); }
.client-note { font-size: var(--fs-13); color: var(--avatar); }

/* Relances -------------------------------------------------------------------------------------------------------- */
.kpis-4 { display: grid; gap: var(--space-14); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split { display: grid; gap: var(--space-14); grid-template-columns: minmax(0, 1fr); }
.split > * { min-width: 0; }
@media (min-width: 1100px) {
  .kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}
.reason-end { justify-content: flex-end; }

/* Commandes ------------------------------------------------------------------------------------------------------- */
.order-sent { opacity: .5; }
.order-channel { display: flex; gap: var(--space-6); align-items: center; font-size: var(--fs-12); }
.restock { gap: var(--space-10); border-radius: var(--radius-card); padding: var(--space-16); }
.restock h2 { color: var(--text-on-dark); }
.restock-sub { font-weight: var(--fw-medium); }
.restock .list-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-10); padding: var(--space-6) 0; }
.restock-name { font-weight: var(--fw-semibold); }
.restock-late { color: var(--action); }
.message-bubble { padding: var(--space-12) var(--space-14); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--radius-bar); font-size: var(--fs-14); line-height: 1.45;
  text-wrap: pretty; }
.order-amount { font-size: var(--fs-13); font-weight: var(--fw-bold); white-space: nowrap; }
.order-note { font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.4; }
.order-total { display: flex; justify-content: space-between; padding-top: var(--space-8); border-top: 1px solid var(--border);
  font-size: var(--fs-15); font-weight: var(--fw-heavy); }
.order-done { align-self: center; }
.order-hint { text-align: center; }

/* Chantiers ------------------------------------------------------------------------------------------------------- */
.workstream-grid { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .workstream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.workstream { gap: var(--space-8); padding: var(--space-14); }
.workstream-progress { display: flex; align-items: center; gap: var(--space-10); }
.workstream-progress .gauge { flex: 1; }
.workstream-progress .num { font-size: var(--fs-12); font-weight: var(--fw-bold); white-space: nowrap; }
.workstream-gain { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--success); }

/* Produits -------------------------------------------------------------------------------------------------------- */
.card-marked { border-color: var(--action); }
.yes-no { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-6); }
.select-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); padding: var(--space-8) var(--space-4) var(--space-4);
  font-size: var(--fs-13); }
.share-col { min-width: 170px; }
.share { display: inline-flex; align-items: center; gap: var(--space-8); }
.share-bar { display: inline-block; width: 100px; }
.table td.cell-planned { background: var(--action-soft); font-weight: var(--fw-bold); }
.group-label { flex: 1 1 320px; }

/* Tarifs ---------------------------------------------------------------------------------------------------------- */
.price-finder { display: flex; }
.price-search { font-size: var(--fs-16); padding: var(--space-12) var(--space-16); border-radius: var(--radius-full); }
/* Outils des chantiers : un seuil ou un coût saisi dans la ligne même */
.cell-form { display: flex; gap: var(--space-4); align-items: center; margin: 0; }
.cell-input { width: 7.5rem; min-width: 0; }
/* Commandes : les commandes de Hello Harel par jour de livraison ; les messages d'exemple repliés */
.order-day { caption-side: top; text-align: left; padding: var(--space-10) var(--space-14) var(--space-4); font-size: var(--fs-13);
  font-weight: var(--fw-bold); color: var(--text-muted); }
.examples-box summary { cursor: pointer; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--text-muted); }
.examples-box[open] summary { margin-bottom: var(--space-8); }
.price-families summary { cursor: pointer; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--text-muted); }
.price-families[open] summary { margin-bottom: var(--space-8); }
.price-rows { display: flex; flex-direction: column; gap: var(--space-14); }
.price-family { gap: 0; padding-block: var(--space-6); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 112px); gap: var(--space-4) var(--space-8); align-items: center;
  padding: var(--space-10) 0; border-top: 1px solid var(--surface-page); }
.price-head { border-top: 0; padding-bottom: var(--space-4); font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--text-muted);
  text-align: right; }
.price-head h2 { text-align: left; font-size: var(--fs-16); font-weight: var(--fw-heavy); color: var(--text); }
.price-name { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.price-name b { font-size: var(--fs-14); }
.price-name span { font-size: var(--fs-12); color: var(--text-muted); }
.price-cell { display: flex; flex-direction: column; align-items: flex-end; padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-tag); }
.price-cell small { display: none; font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--text-muted); }
.price-cell b { font-size: var(--fs-14); white-space: nowrap; }
.price-cell span { font-size: var(--fs-11); color: var(--text-muted); }
/* A grid chosen: its price in front, the two others quieter */
:is(.price-rows-t1, .price-rows-t2, .price-rows-t3) .price-cell b { color: var(--text-muted); font-weight: var(--fw-semibold); }
.price-rows-t1 .price-cell.price-col-t1, .price-rows-t2 .price-cell.price-col-t2, .price-rows-t3 .price-cell.price-col-t3 {
  background: var(--action-soft); }
.price-rows-t1 .price-col-t1 b, .price-rows-t2 .price-col-t2 b, .price-rows-t3 .price-col-t3 b { color: var(--text);
  font-size: var(--fs-16); font-weight: var(--fw-heavy); }
.price-rows-t1 .price-head .price-col-t1, .price-rows-t2 .price-head .price-col-t2, .price-rows-t3 .price-head .price-col-t3 {
  color: var(--text); }
@media (max-width: 640px) {
  .price-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-name { grid-column: 1 / -1; }
  .price-head > span { display: none; }
  .price-head h2 { grid-column: 1 / -1; }
  .price-cell { align-items: flex-start; background: var(--surface-page); }
  .price-cell small { display: block; }
}

/* Mon compte, Comptes --------------------------------------------------------------------------------------------- */
.account { max-width: 520px; }
.link-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.link-list a { display: block; padding: var(--space-10) 0; border-top: 1px solid var(--border); font-weight: var(--fw-bold); text-decoration: none; }
.link-list a::after { content: " →"; }
.card-alert { border-color: var(--danger); background: var(--danger-bg); }
.request-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-10);
  padding-top: var(--space-10); border-top: 1px solid var(--border); }
.narrow-form { max-width: 520px; }

/* Connexion, activation: a white card on the black of Maison Oliveras --------------------------------------------- */
body:has(.signin) { background: var(--surface-dark); }
.page-bare:has(.signin) { max-width: none; padding: 0; background: none; }
.signin { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-16); background: var(--surface-dark); }
.signin-box { width: min(400px, 100%); text-align: center; }
.signin-box-wide { width: min(420px, 100%); }
.signin-box .field { text-align: left; }
.signin-logo { margin: 0 auto; border-radius: var(--radius-full); outline: 3px solid var(--action); }
.signin-link { align-self: center; font-size: var(--fs-14); font-weight: var(--fw-bold); text-decoration: none; border-bottom: 2px solid var(--link-rule); }