/* Stock movement direction dot (ui.moveDir): green inflow / red outflow / grey
   adjustment — a loud cue prefixing the typed reason in the movement logs. */
.move-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0.04em; }
.move-dot-in { background: var(--ok); }
.move-dot-out { background: var(--bad); }
.move-dot-adjust { background: var(--muted); }
/* Inline amber count pill flagging an article with missing price data. */
.alert-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: var(--white); font-size: var(--fs-11); font-weight: var(--fw-bold); line-height: 1; vertical-align: middle; }
.alert-pill-block { background: var(--bad); }
.alert-pill-link { text-decoration: none; cursor: pointer; }
.alert-pill-link:hover { color: var(--white); filter: brightness(1.1); }
/* A pill on a column's alignment edge shoves the value off the shared edge and
   breaks row-to-row alignment. Global rule: the pill sits on the side OPPOSITE
   the column's text-alignment. Left/text columns: it trails (default margin-left).
   Right/numeric columns: the value + pill ride a reversed inline-flex wrapper
   (.num-pill, emitted by ui.table) so the pill leads and the figures stay
   flush-right. The wrapper — not the <td> — is the flex box, so the cell stays a
   real table-cell and its bottom border keeps aligning with the row's separator
   (a flex <td> drops out of table-cell layout and offsets the line). */
.num-pill { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 6px; }
.num-pill .alert-pill { margin: 0; }
/* « Objet » column (quote/invoice list, ui.objetCell): one scan-width — clip to ~2 words
   with an ellipsis (full text in the title), so the column never widens the table into a
   horizontal scrollbar however long a line label is. */
.objet-cell { display: inline-block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.sidebar-foot { padding: 14px 16px; border-top: 1px solid var(--sidebar-line); }
.who { color: var(--white); font-size: var(--fs-14); display: flex; flex-direction: column; text-decoration: none; }
.who:hover { color: var(--white); opacity: .7; }
.who small { color: var(--sidebar-group); text-transform: uppercase; font-size: var(--fs-11); letter-spacing: .05em; }
.logout-form { margin: 0; }
/* Logout is a POST form (a GET link is CSRF-forceable); the button keeps the old
   link look via a reset so the sidebar is visually unchanged. */
.logout { color: var(--sidebar-ink); font-size: var(--fs-13); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.logout:hover { text-decoration: underline; }

/* content */
.content { flex: 1; min-width: 0; margin-left: var(--sidebar-w); padding: clamp(18px, 2.2vw, 36px) clamp(18px, 3vw, 52px); }
/* Title and action buttons share the top row: title left, actions pinned
   top-right on the title baseline. Actions wrap below on narrow screens. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.page-head .actions form { margin: 0; }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
/* Paired cards stretch to a shared row height: a shorter card fills its cell
   instead of leaving page background beside the taller one (no empty zone). */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 14px; }
.grid-2 > .card, .grid-3 > .card { margin-bottom: 0; height: 100%; }
@media (max-width: 820px) {
  .grid-2, .grid-3, .detail-head { grid-template-columns: 1fr; }
  :root { --sidebar-w: 62px; }
  .content { padding: 18px; }
  .brand { justify-content: center; padding: 18px 0; }
  .nav-item { justify-content: center; }
  .nav-label, .nav-group, .who, .logout, .global-search, .company { display: none; }
  /* collapsed icon-rail: swap the wordmark for the glyph badge — sidebar ONLY, so
     the centred auth-screen lockup (.brand.big, outside .sidebar) is untouched. */
  .sidebar .brand-logo { display: none; }
  .sidebar .brand-mark { display: block; }
  /* icons-only rail: badge becomes a corner dot over the icon (not vertically
     centred, which is the desktop label case). */
  .nav-badge { top: 2px; right: 6px; transform: none; min-width: 16px; height: 16px; font-size: var(--fs-10); }
  .link-btn { width: 32px; height: 32px; }
}

/* quick actions (dashboard) */
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* tiles — « Médaillon » : icône en pastille douce à gauche, valeur (dégradé marque) puis
   libellé sur 2 lignes, compacte (l'icône à côté du nombre/texte). */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px 12px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; color: var(--ink); transition: border-color .15s; }
.tile:hover { text-decoration: none; border-color: var(--brand); }
.tile-ic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--brand-wash); }
.tile-body { flex: 1; min-width: 0; }
.tile-val { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tile-lbl { color: var(--muted); font-size: var(--fs-12); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sous-ligne accolée au libellé (« · 2 devis ») : qualifiant discret, séparateur en ::before. */
.tile-sub { color: var(--muted); font-weight: var(--fw-medium); }
.tile-sub::before { content: "·"; margin: 0 .3em 0 .35em; }
/* États : la couleur de statut prime sur la marque (valeur + glyphe), la pastille repasse
   blanche pour faire ressortir le glyphe d'état — couleur = statut, pas décor. */
.tile.warn { border-color: var(--warn); background: var(--warn-wash); }
.tile.bad { border-color: var(--bad); background: var(--bad-wash); }
.tile.ok { border-color: var(--ok); background: var(--ok-wash); }
.tile.warn .tile-val { background: none; color: var(--warn); -webkit-text-fill-color: var(--warn); }
.tile.bad .tile-val { background: none; color: var(--bad); -webkit-text-fill-color: var(--bad); }
.tile.ok .tile-val { background: none; color: var(--ok-d); -webkit-text-fill-color: var(--ok-d); }
.tile.warn .tile-ic, .tile.bad .tile-ic, .tile.ok .tile-ic { background: var(--panel); }
.tile.warn .tile-ic .ic { background: var(--warn); }
.tile.bad .tile-ic .ic { background: var(--bad); }
.tile.ok .tile-ic .ic { background: var(--ok); }

/* dense key/value grid — multi-column facts on detail pages (reusable) */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; }
.kv-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-cell .kv-k { font-size: var(--fs-12); color: var(--muted); }
.kv-cell .kv-v { font-size: var(--fs-15); font-weight: var(--fw-semibold); word-break: break-word; }
/* Date cell that stacks « Créé par <author> » on a second line under the date. */
/* Devis infos card, second row: « Créé par » + the folded-in « Projet » selector, dropped
   below the kvGrid (the first line was too cramped). Author hugs its content; the project
   selector takes the rest of the width. */
.quote-infos-row2 { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); align-items: start; }
.quote-infos-row2 .kv-cell-project { flex: 1 1 260px; }
.quote-infos-row2 .kv-cell-project .form-grid { margin: 0; gap: 8px; }
.quote-infos-row2 .kv-cell-project p { margin: 0 0 2px; }
/* « Intitulé interne » (subject) folded into the same row: grows like the project cell; its
   inline-edit form (a draft) is a text input filling the width with Enregistrer to its right. */
.quote-infos-row2 .kv-cell-subject { flex: 1 1 240px; }
.quote-infos-row2 .subject-edit { display: flex; gap: 8px; align-items: center; }
.quote-infos-row2 .subject-edit input { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; font-weight: var(--fw-normal); }