/* ===========================================================================
   Organisation and Administration — the org admin's settings panels and shops,
   the platform admin's organisations, quotas and audit log, and the second
   factor's enrolment with its recovery codes. Every shop's missing-products
   report is drawn by screens/org.js too, on the Manquants page, where
   receipts/missing.js mounts it. Two other modules draw its classes: core/ui.js
   (the kit's tables and tiles on the overview and the platform dashboard) and
   receipts/correct.js (a received invoice's correction, whose status chip
   wraps like a setting's).

   Linked by index.html, render-blocking, with the data-if-sheet="org" marker
   screens/org.js guards on before linking it as the fallback, so a screen still
   cannot ship without its styling. The module's href is resolved against its
   own URL, so it stays inside the versioned bundle.

   Every value comes from the token set in styles.css. The pixel values left here
   are reading widths, control and column floors and widths (the dashboards'
   two columns as flex bases), the QR code's scannable size, hairline rules and
   three breakpoints, each a rung of the shared ladder
   (bp-lg for the overview and dashboard grids, bp-sm for the forms and the
   settings columns); none is a colour, a type size or a space.
   An administrator sets these screens up once and comes back when something is
   wrong, so they borrow the app's panels, tables and buttons and add only layout:
   rows rather than nested cards, and a destructive control quiet until it is reached.
   =========================================================================== */

.org-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.org-ident { display: flex; align-items: center; min-width: 0; }
/* The platform admin's switcher, in the head where the name would be. */
.org-switch { width: auto; min-width: 220px; }
.org-pick { align-items: flex-start; text-align: left; margin-inline: 0; max-width: 720px; }
.org-pick-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
/* A state chip with its raw detail under it, not trailing it on the line. */
.status-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.status-detail { font-size: var(--text-xs); color: var(--ink-muted); }
.org-shop-ident { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row--empty td { padding: 0; }
.org-name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-strong); }
.org-company { margin-left: var(--space-2); font-family: var(--font-numeric); }
.org-sub { display: flex; flex-direction: column; gap: var(--space-3); }
.org-table th, .org-table td { vertical-align: middle; }
.org-shop-name { font-weight: var(--weight-medium); color: var(--ink-strong); }
.org-item { font-weight: var(--weight-medium); color: var(--ink-strong); }
/* A supplier's legal name sits under its short name, on its own line, so a
   long registered name wraps by itself instead of splitting the row's name. */
.org-item-sub { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); }
.org-reader-states { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
/* The row's press and its "..." menu stay side by side at the end of the row. */
.org-readers .col-actions .cell-actions { flex-wrap: nowrap; }
.org-readers .col-actions .btn { white-space: nowrap; }
/* A supplier with no reader yet has no menu: the slot keeps its press in line
   with the presses of the rows above it. */
.org-menu-slot { flex: none; width: var(--control-h-sm); }
.org-kind { margin-left: var(--space-2); }
.org-row--closed > td { color: var(--ink-muted); }
/* A shop row with unsaved typing says so under its Save, on a line of its own
   at the end of the cell, rather than squeezed beside the button (12.1). */
.org-shops .cell-actions .btn-reason { flex-basis: 100%; text-align: end; }
.org-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.org-toolbar-spacer { flex: 1 1 var(--space-4); }
/* The report's status filter is one segmented control at the toolbar's height:
   five pressed buttons inside one edge, rather than five loose tags smaller
   than every control beside them. */
.org-filters {
  display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1);
  border: 1px solid var(--rule-control); border-radius: var(--radius-md); background: var(--surface-raised);
}
.org-filters .chip {
  display: inline-flex; align-items: center; min-height: calc(var(--control-h-sm) - var(--space-2));
  padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-muted); font-size: var(--text-sm); cursor: pointer;
}
.org-filters .chip:hover { background: var(--surface-hover); color: var(--ink-strong); }
/* The chosen filter (gap register S11). The report chips are pressed buttons
   (DESIGN_SYSTEM 5.7) and showed nothing when pressed, so the list on screen
   could not be told from the others. Selected is aria-pressed, painted as every
   "on" control is (5.6): --surface-selected behind the --rule-control edge. */
.org-filters .chip[aria-pressed="true"] {
  background: var(--surface-selected); border-color: var(--rule-control); color: var(--ink-strong);
  font-weight: var(--weight-medium);
}
/* One reading width for every settings panel of the Organisation view, the
   transfer template included: it was the one panel let run the full
   workspace, so three panels on one tab had two widths. */
.org-settings { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-width: 720px; }
/* The reading width is for forms. A panel that holds a table of record (the
   Transferts and Activité tabs: six and five columns, filters above) runs the
   workspace: capped at 720px it cut the Transferts table's Etat column at 1440
   and 1920 and stacked each date on three lines. */
.org-settings.org-settings--table { max-width: none; }
.org-settings .field--check { display: flex; align-items: center; gap: var(--space-2); }
/* A checkbox's own words are its hit area: the label wraps the box, so the
   whole line toggles it rather than a 13px square beside a line of text. */
.org-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-inline); cursor: pointer; }
.org-check > input { flex: none; margin: 0; }
.org-transfer { margin-bottom: var(--space-4); }
.org-transfer .settings-sec-head, .org-transfer > .muted.small { margin: 0; }
.org-transfer-row { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.org-transfer-row .field { flex: 1 1 260px; margin: 0; max-width: 420px; }
/* The Administration tab: one column of same-width sections (a reading
   width, not the whole workspace), forms kept narrower inside them, and the
   organisation cards INSIDE the Organisations section rather than loose
   panels of another width between it and the connection settings. */
.admin-stack { display: flex; flex-direction: column; gap: var(--space-4); max-width: none; }
.admin-lede { margin: 0; max-width: var(--prose-max); }
.admin-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.admin-sec .settings-sec-head { margin: 0; }
.admin-sec > .muted.small { margin: 0; max-width: var(--prose-max); }
.admin-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; }
.admin-form .field { margin: 0; }
.admin-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-4); }
.admin-orgs { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-residual { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.admin-residual h5 { margin: 0; }
/* Turning on the second factor: the QR code beside what to do with it, so the
   phone and the instructions are in one glance. When the row is too narrow for
   both, the code wraps above the text rather than shrinking below a camera's reach. */
.mfa-enrol { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-start; }
.mfa-qr { flex: 0 0 auto; line-height: 0; padding: var(--space-2); background: var(--qr-quiet-zone); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.mfa-qr svg { display: block; width: 180px; height: 180px; }
.mfa-enrol-body { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-2); min-width: min(280px, 100%); }
.mfa-enrol-body .field { margin: 0; max-width: 220px; }
/* The recovery codes are shown once and have to be readable off the screen
   long enough to be written down: monospace, generous spacing, two columns. */
.mfa-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-1) var(--space-3); margin: var(--space-2) 0; padding: 0; list-style: none; }
/* Recovery codes are read off the screen once and copied onto paper, so they are
   grown a step and tracked out on --tracking-caps - the same tracking every other
   run of capitals and figures in the product uses, rather than a value of its
   own two hundredths of an em away from it. */
.mfa-codes li { font-family: var(--font-mono); font-size: var(--text-mono-grow); letter-spacing: var(--tracking-caps); }
/* A chip in a table is as wide as its words, never "100% of its cell": in a
   table laid out by its content that percentage (and an overflow-wrap of
   "anywhere") gave the chip no width of its own, so a squeezed table handed
   its column the width of one letter, "Connectée" read "Connect / ée" and a
   transfer's state showed its icon alone. It breaks a word only when that one
   word is wider than the cell. The org tables keep a chip on one line until
   the workspace narrows (see the 1100px rung below). */
.org-table .state { white-space: nowrap; }
.org-table .state, .org-section-content .ui-table .state { max-width: none; overflow-wrap: break-word; }
.admin-create { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); align-items: end; }
.admin-create .field { margin: 0; }
/* The audit filters: five fields and the buttons on one line, wrapping rather
   than shrinking. Not .admin-create, which is fixed at three columns because it
   only ever holds two fields and one button. */
.admin-audit-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-bottom: var(--space-3); }
.admin-audit-filters .field { margin: 0; flex: 1 1 160px; min-width: 140px; }
.admin-audit-filters .actions-bar { flex: 0 0 auto; }
/* Below 620px the three buttons (Appliquer, Effacer, Télécharger en CSV) are
   a row of their own that wraps: held at their one-line width they ran
   "Télécharger en CSV" past the panel's edge on a phone. */
@media (max-width: 620px) { .admin-audit-filters .actions-bar { flex: 1 1 100%; } }
/* Each organisation is a ROW of the Organisations panel, separated by rules,
   not a sunken card inside a raised one: a card in a card was the one
   structure every neighbouring panel on this page had avoided. */
.org-row { padding: var(--space-4) 0 var(--space-3); border-top: 1px solid var(--rule); }
.org-row:first-child { border-top: 0; padding-top: var(--space-2); }
.org-row-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
/* The row's actions wrap as a group under the name on a phone, rather than
   running "Exporter les données" past the panel at 320. */
.org-row-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-left: auto; }
/* Destructive controls are the kit's quiet red .btn--danger (styles.css). */
.org-admins, .org-posedit, .org-quotas { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* What one organisation has used of each per-tenant quota today, read-only. */
.org-quotas { margin-block-end: var(--space-2); }
.org-posedit { margin-block-end: var(--space-2); }
.org-posedit-state { margin-block-start: var(--space-3); }
.admin-add { display: inline-flex; gap: var(--space-1); align-items: center; margin-left: auto; }
.admin-add .input { width: 180px; }
.org-reports .org-pick-cell { width: var(--space-8); padding-right: 0; }
.org-reports .v--new { color: var(--state-attention-fg); font-weight: var(--weight-semibold); }
/* Every shop's report, row by row: the product and what it holds in the first
   cell, each figure on one line, a second line in the cell's own small type
   (the date under the facture, how often under the shop), and the row's one
   button beside its "..." menu at the end. */
.org-reports-lede { margin: 0; max-width: var(--prose-max); color: var(--ink-muted); font-size: var(--text-sm); }
.org-report-group > .ui-panel-head { align-items: center; }
.org-report-group .mi-group-title { font-size: var(--text-md); }
.org-report-group .ui-panel-title .count-pill { min-width: 0; width: auto; padding-inline: var(--space-2); font-size: var(--text-xs); }
.org-reports td { vertical-align: top; }
.org-report-item { min-width: 240px; width: 32%; }
.org-item-code { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); }
.org-report-meta { display: flex; align-items: flex-start; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); }
.org-report-meta > svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.org-report-meta.org-holds { color: var(--state-attention-fg); }
.org-cell-sub { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }
/* The shops that reported one missing item: a list of names, so it wraps. */
.org-report-shops { white-space: normal; overflow-wrap: anywhere; }
.org-facture-cell { white-space: nowrap; }
.org-reports .col-actions .cell-actions { flex-wrap: nowrap; }
.org-reports .col-actions .btn { white-space: nowrap; }
.org-empty { padding: var(--space-5); }

/* The stack of panel skeletons the two tabs paint before they await, which is
   the presentation half of design system §6.3. It is a stack and nothing more:
   the shape of one placeholder is .skeleton--panel in styles.css, because a panel
   is a shared component and this sheet is not entitled to an opinion about how
   tall one is. Until screens/org.js clears the body and paints this, both tabs
   still show the previous organisation's content while the new one loads, which
   is the defect §6.3 is about. */
.org-skel { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------------------------------------------------------------------------
   REDESIGN 4.8: Succursales et accès, Manquants, Vérification PDV, Activité.
   Layout only, on the shared panels, tables, chips and fields. Rows that change
   state keep their height (a session ended, a finding answered, a report
   dismissed stay where they were), so the cells hold their content on one or
   two lines rather than growing a third under the pointer.
   --------------------------------------------------------------------------- */
/* The shop row's state cell: the fact on the first line, the role under it. */
.org-shops [data-shop-state] .cell-2line { gap: var(--space-1); }
.org-shops [data-shop-menu] { display: inline-flex; }
/* The invite form: three fields and its button on one line, wrapping whole. */
.org-invite-row { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.org-invite-row .field { flex: 1 1 200px; margin: 0; }
.org-sessions-panel, .org-invite, .org-mfa, .org-mfa-require, .org-proposals { margin-top: var(--space-4); }
.org-sessions-panel { max-width: 960px; }
.org-gate { display: flex; flex-direction: column; gap: var(--space-4); }
/* Manquants: the shop filter sits in the toolbar beside the status chips, its
   label on the same line; the bulk bar under it holds its place while hidden
   rows come and go, and the held receipts are the line that says what creating
   a product unblocks. */
.org-toolbar .field--inline { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); margin: 0; }
.org-toolbar .field--inline .select { width: auto; min-width: 180px; }
.org-toolbar .field--inline .field-label { margin: 0; }
.org-picked { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--surface-selected); border: 1px solid var(--rule-control); border-radius: var(--radius-sm); }
.org-picked[hidden] { display: none; }
.org-note { font-style: italic; }
/* Vérification PDV: the note field and the two answers in one cell, the field
   first so a note is typed before the answer that sends it. */
.org-recon-ask { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.org-recon-ask .input { flex: 1 1 160px; min-width: 140px; max-width: 260px; }
.org-recon [data-recon-cell] { min-width: 320px; }
.org-recon-folded { margin-top: var(--space-3); }
.org-recon-folded > summary { cursor: pointer; color: var(--ink-muted); font-size: var(--text-sm); padding-block: var(--space-2); }
/* The digest's state: its sentence, then what the last night did, one per line. */
.org-digest { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.org-lock .field { max-width: 320px; margin: 0; }

/* ---------------------------------------------------------------------------
   REDESIGN 4.10: the Administration shell - its subtab row, the server's
   health and maintenance switch, the search, each organisation's usage as one
   row with its quota editor, and its "Zone sensible" at the end of the row.
   --------------------------------------------------------------------------- */
.admin-sub { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-checks { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.admin-maint { display: flex; flex-direction: column; gap: var(--space-2); max-width: 520px; padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.admin-maint .field { margin: 0; }
.admin-search { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.admin-search .field { flex: 1 1 260px; margin: 0; max-width: 420px; }
.admin-results { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.admin-results li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* One organisation's usage on one line, wrapping whole on a narrow screen. */
.admin-usage { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-block-end: var(--space-2); }
.admin-usage-row { color: var(--ink-muted); font-size: var(--text-sm); }
.admin-usage-tight { color: var(--state-attention-fg); font-weight: var(--weight-medium); }
.admin-usage-tight .icon-sm { vertical-align: text-bottom; margin-inline-end: var(--space-1); }
.admin-quota-editor { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; padding: var(--space-3); margin-block-end: var(--space-2);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.admin-quota-editor .field { margin: 0; flex: 0 1 260px; }
/* The sensitive zone closes the organisation's row, under a rule of the
   blocked state's edge, so removing or erasing is never next to Open. */
.admin-danger { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--state-blocked-rule); }
.admin-danger .field-label { margin: 0; color: var(--state-blocked-fg); }
.admin-danger p { margin: 0; }

/* Manquants: head office's comment and assignee, edited inside the row. */
.org-note-edit { display: grid; gap: var(--space-2); margin-top: var(--space-2); max-width: var(--prose-max); }
.org-k {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-muted);
}

/* The Organisation and Administration panels drawn by their own modules borrow
   these rules too: screens/orgAccess.js (shops, sessions, the org admin's
   second factor), screens/orgActivity.js (the activity trail),
   screens/orgTransfers.js (every transfer between the shops, read-only) and
   screens/adminPlatform.js (the platform administrator's status, search,
   quotas and Auphan link). */

/* Dashboard composition. All surfaces, type, controls and state colours belong to the kit.
   Two panels share a row only while both of their tables fit. Each panel has
   a floor, the width its table needs (the overview's shops and the platform's
   users, four columns each; the readers and the Writ connection beside them),
   and when the row is narrower than the two floors it wraps and each panel
   takes the whole width. A fixed two-column grid halved 1008px at 1280 into
   two 470px panels, and the shops' pen column and the users' Rôle column ran
   past their edges; the 1100px breakpoint it had could not know that. */
.org-overview-grid, .admin-dashboard-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.org-overview-grid > *, .admin-dashboard-grid > * { min-width: 0; }
.org-overview-grid > * { flex: 1 1 520px; }
.org-overview-grid > :first-child { flex: 1 1 590px; }
.admin-dashboard-grid > * { flex: 1 1 400px; }
.admin-dashboard-grid > :first-child { flex: 1 1 720px; }
.org-section-content { display: flex; flex-direction: column; gap: var(--space-3); }
.org-section-content > p { margin: 0; }
.org-section-content .ui-summary { margin: 0; }
.org-head { margin-bottom: 0; }
.org-ident { flex-wrap: wrap; }
#org-body, .admin-stack { display: flex; flex-direction: column; gap: var(--space-3); }
/* The page tabs keep the one gap every page puts under them (styles.css). */
#org-body > .ui-tabs--page, .admin-stack > .ui-tabs--page { margin-bottom: var(--space-1); }
/* Organisation > Réglages: one column of sections, each a row with its title
   and what it is for on the left and its fields on the right, the way a
   settings page reads in Linear or Stripe. The two-up grid it replaced set a
   short card beside a long one and left half the page empty under the short. */
.org-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; max-width: var(--app-max); }
.org-settings-grid > p, .org-settings-grid > [data-org-usage] { grid-column: 1 / -1; }
.org-settings-grid .org-settings { max-width: none; display: flow-root; padding: var(--space-6); }
/* The title and what the section is for stay together in the left column; the
   fields run down the right one, however tall they grow. */
.org-settings-grid .org-settings > .settings-sec-intro { float: left; width: 30%; display: flex; flex-direction: column; gap: var(--space-2); }
.org-settings-grid .org-settings > .settings-sec-intro > * { margin: 0; }
.org-settings-grid .org-settings > :not(.settings-sec-intro) { margin-left: calc(30% + var(--space-8)); min-width: 0; }
.org-settings-grid .org-settings > :not(.settings-sec-intro) ~ :not(.settings-sec-intro) { margin-top: var(--space-3); }
/* A save closes its section at the right of the fields column. */
.org-settings-grid .org-settings > .actions-bar { justify-content: flex-end; }
/* A state said in a whole sentence (the mail not set up, POS edits on) wraps as
   a note inside its column instead of running out of the card on one line. */
.org-settings .state { white-space: normal; align-items: flex-start; border-radius: var(--radius-md); max-width: 100%; }
.org-settings .state > svg { margin-top: var(--space-1); }
.admin-org-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.admin-org-access { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-org-access > h3 { margin: 0; }
.admin-org-columns .admin-usage { align-items: stretch; flex-direction: column; }
.admin-org-columns .admin-usage-row { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-org-columns .org-admins, .admin-org-columns .org-posedit { align-items: start; }
.admin-more { margin-top: var(--space-3); }
@media (max-width: 1100px) {
  .org-settings-grid .org-settings > .settings-sec-intro { float: none; width: auto; margin-bottom: var(--space-3); }
  .org-settings-grid .org-settings > :not(.settings-sec-intro) { margin-left: 0; }
  /* The report keeps its nine columns inside the narrowed workspace: tighter
     cells rather than a row whose button runs off the panel. */
  .org-reports th, .org-reports td { padding-inline: var(--space-2); }
  .org-report-item { min-width: 200px; }
  /* Every other table of these tabs closes in on compact cell padding too: the
     readers' table (901px in 882 at 1024) kept its edit button and its "..."
     on the panel by the width of its own padding. The cells are padded
     directly; the row tokens are :root's alone (the density rule). */
  table.grid.org-table td { padding-inline: var(--space-2); }
  table.grid.org-table tr > td:first-child { padding-inline-start: var(--space-3); }
  table.grid.org-table tr > td:last-child { padding-inline-end: var(--space-3); }
  /* Their headers wrap too: a two-word header ("Dernière connexion") held on
     one line set its column wider than any cell under it. */
  table.grid.org-table thead th { padding-inline: var(--space-2); white-space: normal; }
  /* And a chip wraps between its words: held on one line, a reader's
     judgement ("Version 2, non prouvée") kept the readers' table 819px wide at
     768, "Admin d'organisation" the shops' 720px, a transfer's "En attente
     de ..." pushed its Etat column off the panel. */
  .org-table .state { white-space: normal; }
}
/* A date of record is one stamp on one line, at every width a table row has;
   a code (a transfer's number, an audit entry's target, detail and network)
   breaks anywhere rather than widen its column past the panel: one long
   receipt number held the Numéro column at 270px, and the platform journal
   ran 27px past its panel at 1024 and 1280. */
.org-table .org-when { white-space: nowrap; }
.org-table .org-code { overflow-wrap: anywhere; }
/* On a phone, where every row is a card (.table-stack), the card opens on what
   the row is (the transfer's route, the action taken) and its date follows as
   a captioned line; in the table the date stays the first column, where a
   list of records is scanned. */
/* The phone rung, once for the sheet: the platform's create form in one
   column, the settings columns stacked, and a table's row title leading its
   card. */
@media (max-width: 720px) {
  .admin-create { grid-template-columns: 1fr; }
  .admin-add { margin-left: 0; width: 100%; }
  .org-settings-grid, .admin-org-columns { grid-template-columns: minmax(0, 1fr); }
  .table-stack.org-table tbody td.org-row-title { order: -1; font-weight: var(--weight-medium); color: var(--ink-strong); }
  .table-stack.org-table tbody td.org-when { white-space: normal; }
}
/* "7 succursales" is one phrase: the cell does not break it over two lines. */
.org-shops-cell { white-space: nowrap; }
/* Vérification PDV: the explanation and "Comparer maintenant" on one row, then
   the outcome as a status note toned by what it says. Its sentence is body
   text, not the empty state's display size it borrowed its class from. */
.org-recon-summary {
  display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface-raised);
}
.org-recon-summary--done { background: var(--state-done-bg); border-color: var(--state-done-rule); }
.org-recon-summary--attention { background: var(--state-attention-bg); border-color: var(--state-attention-rule); }
.org-recon-summary--blocked { background: var(--state-blocked-bg); border-color: var(--state-blocked-rule); }
.org-recon-icon { flex: none; display: inline-flex; }
.org-recon-summary--done .org-recon-icon { color: var(--state-done-fg); }
.org-recon-summary--attention .org-recon-icon { color: var(--state-attention-fg); }
.org-recon-summary--blocked .org-recon-icon { color: var(--state-blocked-fg); }
.org-recon-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.org-recon-text > p { margin: 0; }
.org-recon-text > p.tnum { max-width: none; }
.org-recon-summary .empty-state-line { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ink-strong); text-align: start; }
.org-recon-summary .empty-state-sub { font-size: var(--text-sm); text-align: start; }