/* Kontex Ventes — Demandes du site (#/demandes, quote banner, Paramètres › Site web).
   Spec: design/13-phase2-spec.md §2.I. Kontex Design System only (tokens of /kontex.css): one amber element per screen
   at most, Teal 700 actions, Plex Mono for money and refs, no horizontal scroll at 390 px. Every class is prefixed "in-". */

/* ---------- #/demandes: filters and list ---------- */
.in-n{font:500 12px/1 var(--kx-font-mono);font-variant-numeric:tabular-nums;color:var(--text3)}
.filter-chip[aria-pressed="true"] .in-n{color:var(--brand-text)}
.in-search{flex:0 1 280px;min-width:0}
.in-search .kx-input{height:32px;font-size:13px}
/* eight columns fit the 968 px of a 1280 px screen: tighter cells, wrapping headers, a 3-line summary */
.in-table thead th{padding:0 12px;white-space:normal;line-height:1.2}
.in-table tbody td{padding:10px 12px}
.in-who{display:block;min-width:0}
.in-who b{font-weight:600}
.in-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;min-width:150px;max-width:320px;color:var(--text2);font-size:13px;line-height:1.45}
.in-status{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
.in-files{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--text3)}
.in-files .mono{color:var(--text)}

/* ---------- drawer « Demande WEB-… » ---------- */
.in-head{display:flex;flex-direction:column;gap:8px}
.in-cols>div{gap:16px}
/* one column (narrow screens, phones): the client card comes first, then the lines, the project and the history */
@media (max-width:1100px){
  .in-cols{display:flex;flex-direction:column;gap:16px}
  .in-cols>div{display:contents}
  .in-cols [aria-labelledby="inClient"]{order:-1}
}
.in-line{display:flex;flex-direction:column;gap:10px;padding-block:16px;border-bottom:1px solid var(--border-subtle)}
.in-line:first-of-type{padding-top:4px}
.in-line:last-child{border-bottom:none;padding-bottom:0}
.in-line--skip>:not(.in-line__head):not(.check){opacity:.6}
.in-line__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.in-line__head h4{font:600 15px/1.4 var(--kx-font-sans);color:var(--text);min-width:0;overflow-wrap:anywhere}
.in-line__spec{font:400 14px/1.5 var(--kx-font-sans);color:var(--text)}
.in-pl{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:2px;font:400 13px/1.5 var(--kx-font-sans);color:var(--text2)}
.in-pick{max-width:420px}
.in-price{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--kx-radius-sm);background:var(--bg);border:1px solid var(--border-subtle)}
.in-price .num{font-size:14px;white-space:normal;text-align:end}
.in-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--kx-radius-xs);border:1px solid var(--border-subtle);background:var(--bg);flex-shrink:0}
.in-skipped{margin-top:4px}
.in-choice{padding-top:4px;border-top:1px solid var(--border-subtle)}
.in-choice .kx-ui-label{color:var(--text2)}

/* ---------- quote banner « Créé depuis la demande site … » ---------- */
.in-banner{align-items:center;flex-wrap:wrap}
.in-banner__t{flex:1 1 260px;min-width:0}
.in-banner .kx-btn{margin-inline-start:auto}

/* ---------- Paramètres › Site web ---------- */
.in-set .dl dd{text-align:start}
@media (min-width:641px){.in-set .dl dd{text-align:end}}
.in-opts{padding-top:12px;border-top:1px solid var(--border-subtle)}
.in-opts .hint{margin-top:-6px;padding-inline-start:24px;max-width:80ch}
.in-narrow{max-width:420px}
.in-secret{word-break:break-all;font:500 14px/1.6 var(--kx-font-mono);user-select:all}
.in-map td{vertical-align:middle}
.in-map td .sub.mono{font-size:12px;overflow-wrap:anywhere}
.in-map .in-pid{display:block;font:500 13px/1.4 var(--kx-font-mono);overflow-wrap:anywhere}
.in-map select.kx-input{min-width:180px}

/* ---------- phones: tables become stacked cards (no horizontal scroll) ---------- */
@media (max-width:767px){
  .in-search{flex:1 1 100%}
  .in-tablewrap{overflow:visible}
  .in-table thead,.in-map thead{display:none}
  .in-table,.in-table tbody,.in-map,.in-map tbody{display:block;width:100%}
  .in-table tr,.in-map tr{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
  .in-table tr:last-child,.in-map tr:last-child{border-bottom:none}
  .in-table tbody td,.in-map tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:auto;padding:0;border:none;text-align:end;white-space:normal}
  .in-table tbody tr:hover td{background:transparent}
  .in-table tbody tr:hover{background:var(--tint)}
  .in-table tbody td::before,.in-map tbody td[data-label]::before{content:attr(data-label);font:500 12px/1.4 var(--kx-font-sans);color:var(--text3);text-align:start;flex-shrink:0}
  .in-table tbody td[data-label="Réf."]::before{content:none}
  .in-table tbody td[data-label="Réf."]{justify-content:flex-start}
  .in-table .in-who{text-align:end}
  .in-table .in-sum{display:block;-webkit-line-clamp:unset;line-clamp:none;min-width:0;max-width:none;text-align:end}
  .in-table .in-status{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
  .in-table td.mono{font-family:var(--kx-font-mono)}
  .in-map tbody td{flex-direction:column;align-items:stretch;text-align:start}
  .in-map tbody td.actions{align-items:flex-end}
  .in-map select.kx-input{min-width:0}
}