@charset "UTF-8";
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Cairo-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Cairo-arabic-900.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Cairo-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Cairo-latin-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSansArabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSansArabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
:root {
  --surface: #ffffff;
  --surface-sunken: #f7f9f8;
  --surface-raised: #ffffff;
  --surface-hover: #f1f4f2;
  --surface-active: #e9edea;
  --surface-inverse: #04301d;
  --border-strong: #d4dad6;
  --border: #e2e6e3;
  --border-subtle: #eef1ef;
  --border-inverse: rgba(255, 255, 255, 0.16);
  --text: #10130f;
  --text-secondary: #3d443f;
  --text-tertiary: #6b736d;
  --text-disabled: #8b938d;
  --text-inverse: #ffffff;
  --text-inverse-secondary: rgba(255, 255, 255, 0.72);
  --brand: #04301d;
  --brand-emphasis: #06432a;
  --brand-signal: #00843d;
  --brand-signal-hover: #00652f;
  --brand-muted: #e8f2ec;
  --brand-faint: #f3f8f5;
  --action: #00843d;
  --action-hover: #00652f;
  --action-active: #06432a;
  --action-text: #ffffff;
  --action-disabled: #d4dad6;
  --action-disabled-text: #8b938d;
  --ok: #00843d;
  --ok-text: #06432a;
  --ok-surface: #e8f2ec;
  --warn: #c9a227;
  --warn-text: #7a5512;
  --warn-surface: #fbf2dd;
  --danger: #c8102e;
  --danger-text: #8f0a1f;
  --danger-surface: #fbe7ea;
  --info: #2470c0;
  --info-text: #1c5590;
  --info-surface: #e6effa;
  --neutral: #6b736d;
  --neutral-text: #3d443f;
  --neutral-surface: #f1f4f2;
  --accent: #c9a227;
  --accent-text: #7a5512;
  --accent-surface: #fbf2dd;
  --focus-ring: #00843d;
  --focus-ring-offset: #ffffff;
  --focus-ring-inverse: #ffffff;
  --line-edge-bg: #101214;
  --line-edge-fg: #c9a227;
  --line-magnatec-bg: #a7a9ac;
  --line-magnatec-fg: #10130f;
  --line-gtx-bg: #00843d;
  --line-gtx-fg: #ffffff;
  --line-transmax-bg: #c8102e;
  --line-transmax-fg: #ffffff;
  --line-power1-bg: #c9a227;
  --line-power1-fg: #10130f;
  --font-sans: IBM Plex Sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: IBM Plex Mono, ui-monospace, SF Mono, Cascadia Mono, Consolas, Liberation Mono, monospace;
  --space-0: 0;
  --space-25: 2px;
  --space-50: 4px;
  --space-75: 6px;
  --space-100: 8px;
  --space-125: 10px;
  --space-150: 12px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-350: 28px;
  --space-400: 32px;
  --space-450: 36px;
  --space-500: 40px;
  --space-600: 48px;
  --space-700: 56px;
  --space-800: 64px;
  --space-900: 80px;
  --space-1000: 96px;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 2.4vw, 2rem);
  --text-3xl: clamp(2rem, 4.5vw, 3rem);
  --text-4xl: clamp(2.5rem, 5.5vw, 3.75rem);
  --s: 8px;
  --ink-2: var(--text-secondary);
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: clamp(1.5rem, 2.4vw, 2rem);
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-raised: 0 1px 2px rgba(16, 19, 15, 0.06);
  --shadow-overlay: 0 4px 12px -2px rgba(16, 19, 15, 0.12), 0 2px 4px -2px rgba(16, 19, 15, 0.08);
  --shadow-dialog: 0 24px 48px -12px rgba(16, 19, 15, 0.28), 0 8px 16px -8px rgba(16, 19, 15, 0.16);
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --target-touch: 44px;
  --target-mouse: 32px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  padding: 0;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

p, h1, h2, h3, h4, li, dd, dt, td, th {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:target {
  scroll-margin-block: 5rem;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

legend {
  padding: 0;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--surface);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

h2 {
  font-size: 1.375rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

h5, h6 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

a:hover {
  color: var(--brand-signal);
}

strong, b {
  font-weight: 600;
}

small {
  font-size: 0.75rem;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

hr {
  height: 1px;
  border: none;
  background-color: var(--border);
  margin-block: 24px;
}

::selection {
  background-color: var(--brand-muted);
  color: var(--brand);
}

@media (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
}
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}
@media print {
  body {
    background: #fff;
    color: #000;
  }
  a[href^=http]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.on-inverse :focus-visible,
.surface-inverse :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 90;
}
.skip-link:focus {
  inset-inline-start: 16px;
  top: 12px;
  padding: 12px 20px;
  background-color: var(--surface);
  color: var(--brand);
  font-weight: 600;
  border: 2px solid var(--focus-ring);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
}

@media (pointer: coarse) {
  button,
  [role=button],
  a.btn,
  input[type=checkbox],
  input[type=radio],
  select {
    min-height: var(--target-touch);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .btn,
  .card,
  .panel,
  input,
  select,
  textarea {
    border: 1px solid;
  }
  :focus-visible {
    outline: 2px solid;
  }
}
.debug-a11y img:not([alt]) {
  outline: 3px dashed var(--danger);
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-table-row {
  display: table-row !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
}
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
}
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
}
@media (min-width: 1400px) {
  .d-xxl-none {
    display: none !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
}
.mt-0 {
  margin-block-start: 0 !important;
}

.pt-0 {
  padding-block-start: 0 !important;
}

.mt-1 {
  margin-block-start: 0.25rem !important;
}

.pt-1 {
  padding-block-start: 0.25rem !important;
}

.mt-2 {
  margin-block-start: 0.5rem !important;
}

.pt-2 {
  padding-block-start: 0.5rem !important;
}

.mt-3 {
  margin-block-start: 1rem !important;
}

.pt-3 {
  padding-block-start: 1rem !important;
}

.mt-4 {
  margin-block-start: 1.5rem !important;
}

.pt-4 {
  padding-block-start: 1.5rem !important;
}

.mt-5 {
  margin-block-start: 3rem !important;
}

.pt-5 {
  padding-block-start: 3rem !important;
}

.mb-0 {
  margin-block-end: 0 !important;
}

.pb-0 {
  padding-block-end: 0 !important;
}

.mb-1 {
  margin-block-end: 0.25rem !important;
}

.pb-1 {
  padding-block-end: 0.25rem !important;
}

.mb-2 {
  margin-block-end: 0.5rem !important;
}

.pb-2 {
  padding-block-end: 0.5rem !important;
}

.mb-3 {
  margin-block-end: 1rem !important;
}

.pb-3 {
  padding-block-end: 1rem !important;
}

.mb-4 {
  margin-block-end: 1.5rem !important;
}

.pb-4 {
  padding-block-end: 1.5rem !important;
}

.mb-5 {
  margin-block-end: 3rem !important;
}

.pb-5 {
  padding-block-end: 3rem !important;
}

.ms-0 {
  margin-inline-start: 0 !important;
}

.ps-0 {
  padding-inline-start: 0 !important;
}

.ms-1 {
  margin-inline-start: 0.25rem !important;
}

.ps-1 {
  padding-inline-start: 0.25rem !important;
}

.ms-2 {
  margin-inline-start: 0.5rem !important;
}

.ps-2 {
  padding-inline-start: 0.5rem !important;
}

.ms-3 {
  margin-inline-start: 1rem !important;
}

.ps-3 {
  padding-inline-start: 1rem !important;
}

.ms-4 {
  margin-inline-start: 1.5rem !important;
}

.ps-4 {
  padding-inline-start: 1.5rem !important;
}

.ms-5 {
  margin-inline-start: 3rem !important;
}

.ps-5 {
  padding-inline-start: 3rem !important;
}

.me-0 {
  margin-inline-end: 0 !important;
}

.pe-0 {
  padding-inline-end: 0 !important;
}

.me-1 {
  margin-inline-end: 0.25rem !important;
}

.pe-1 {
  padding-inline-end: 0.25rem !important;
}

.me-2 {
  margin-inline-end: 0.5rem !important;
}

.pe-2 {
  padding-inline-end: 0.5rem !important;
}

.me-3 {
  margin-inline-end: 1rem !important;
}

.pe-3 {
  padding-inline-end: 1rem !important;
}

.me-4 {
  margin-inline-end: 1.5rem !important;
}

.pe-4 {
  padding-inline-end: 1.5rem !important;
}

.me-5 {
  margin-inline-end: 3rem !important;
}

.pe-5 {
  padding-inline-end: 3rem !important;
}

.mx-0 {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.px-0 {
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

.mx-1 {
  margin-inline-start: 0.25rem !important;
  margin-inline-end: 0.25rem !important;
}

.px-1 {
  padding-inline-start: 0.25rem !important;
  padding-inline-end: 0.25rem !important;
}

.mx-2 {
  margin-inline-start: 0.5rem !important;
  margin-inline-end: 0.5rem !important;
}

.px-2 {
  padding-inline-start: 0.5rem !important;
  padding-inline-end: 0.5rem !important;
}

.mx-3 {
  margin-inline-start: 1rem !important;
  margin-inline-end: 1rem !important;
}

.px-3 {
  padding-inline-start: 1rem !important;
  padding-inline-end: 1rem !important;
}

.mx-4 {
  margin-inline-start: 1.5rem !important;
  margin-inline-end: 1.5rem !important;
}

.px-4 {
  padding-inline-start: 1.5rem !important;
  padding-inline-end: 1.5rem !important;
}

.mx-5 {
  margin-inline-start: 3rem !important;
  margin-inline-end: 3rem !important;
}

.px-5 {
  padding-inline-start: 3rem !important;
  padding-inline-end: 3rem !important;
}

.my-0 {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.py-0 {
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

.my-1 {
  margin-block-start: 0.25rem !important;
  margin-block-end: 0.25rem !important;
}

.py-1 {
  padding-block-start: 0.25rem !important;
  padding-block-end: 0.25rem !important;
}

.my-2 {
  margin-block-start: 0.5rem !important;
  margin-block-end: 0.5rem !important;
}

.py-2 {
  padding-block-start: 0.5rem !important;
  padding-block-end: 0.5rem !important;
}

.my-3 {
  margin-block-start: 1rem !important;
  margin-block-end: 1rem !important;
}

.py-3 {
  padding-block-start: 1rem !important;
  padding-block-end: 1rem !important;
}

.my-4 {
  margin-block-start: 1.5rem !important;
  margin-block-end: 1.5rem !important;
}

.py-4 {
  padding-block-start: 1.5rem !important;
  padding-block-end: 1.5rem !important;
}

.my-5 {
  margin-block-start: 3rem !important;
  margin-block-end: 3rem !important;
}

.py-5 {
  padding-block-start: 3rem !important;
  padding-block-end: 3rem !important;
}

.m-0 {
  margin: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.ms-auto {
  margin-inline-start: auto !important;
}

.me-auto {
  margin-inline-end: auto !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.mt-auto {
  margin-block-start: auto !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.text-start {
  text-align: start !important;
}

.text-center {
  text-align: center !important;
}

.text-end {
  text-align: end !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-uppercase {
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
}

.text-muted {
  color: var(--text-tertiary) !important;
}

.text-danger {
  color: var(--danger-text) !important;
}

.text-success {
  color: var(--ok-text) !important;
}

.text-warning {
  color: var(--warn-text) !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.small {
  font-size: 0.75rem !important;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.h5 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.display-4 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.display-6 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.row {
  --gutter-x: 1.5rem;
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-block-start: calc(-1 * var(--gutter-y));
  margin-inline: calc(-0.5 * var(--gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: calc(0.5 * var(--gutter-x));
  margin-block-start: var(--gutter-y);
}

.g-0 {
  --gutter-x: 0;
  --gutter-y: 0;
}

.gx-0 {
  --gutter-x: 0;
}

.gy-0 {
  --gutter-y: 0;
}

.g-1 {
  --gutter-x: 0.25rem;
  --gutter-y: 0.25rem;
}

.gx-1 {
  --gutter-x: 0.25rem;
}

.gy-1 {
  --gutter-y: 0.25rem;
}

.g-2 {
  --gutter-x: 0.5rem;
  --gutter-y: 0.5rem;
}

.gx-2 {
  --gutter-x: 0.5rem;
}

.gy-2 {
  --gutter-y: 0.5rem;
}

.g-3 {
  --gutter-x: 1rem;
  --gutter-y: 1rem;
}

.gx-3 {
  --gutter-x: 1rem;
}

.gy-3 {
  --gutter-y: 1rem;
}

.g-4 {
  --gutter-x: 1.5rem;
  --gutter-y: 1.5rem;
}

.gx-4 {
  --gutter-x: 1.5rem;
}

.gy-4 {
  --gutter-y: 1.5rem;
}

.g-5 {
  --gutter-x: 3rem;
  --gutter-y: 3rem;
}

.gx-5 {
  --gutter-x: 3rem;
}

.gy-5 {
  --gutter-y: 3rem;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 1200px) {
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
@media (min-width: 1400px) {
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .no-print {
    display: none !important;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: 20px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1), color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
}
.btn:disabled, .btn[aria-disabled=true] {
  cursor: not-allowed;
  background-color: var(--action-disabled);
  border-color: var(--action-disabled);
  color: var(--action-disabled-text);
}

.btn-primary {
  background-color: var(--action);
  color: var(--action-text);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--action-hover);
  color: var(--action-text);
}
.btn-primary:active:not(:disabled) {
  background-color: var(--action-active);
}

.btn-secondary {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--surface-hover);
  border-color: var(--text-tertiary);
  color: var(--text);
}
.btn-secondary:active:not(:disabled) {
  background-color: var(--surface-active);
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--surface-hover);
  color: var(--text);
}
.btn-ghost:active:not(:disabled) {
  background-color: var(--surface-active);
}

.btn-danger {
  background-color: var(--danger);
  color: var(--action-text);
}
.btn-danger:hover:not(:disabled) {
  background-color: #a80d26;
  color: var(--action-text);
}
.btn-danger:active:not(:disabled) {
  background-color: #8f0a1f;
}

.btn-danger-quiet {
  background-color: transparent;
  color: var(--danger-text);
}
.btn-danger-quiet:hover:not(:disabled) {
  background-color: var(--danger-surface);
  color: var(--danger-text);
}

.btn-inverse {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--text-inverse);
}
.btn-inverse:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--text-inverse);
}

.btn-sm {
  min-height: 32px;
  padding-inline: 12px;
  font-size: 0.8125rem;
}
.btn-sm > svg {
  width: 14px;
  height: 14px;
}

.btn-lg {
  min-height: 48px;
  padding-inline: 32px;
  font-size: 1rem;
}

.btn-icon {
  min-height: 32px;
  width: 32px;
  padding-inline: 0;
}
.btn-icon.btn-sm {
  min-height: 28px;
  width: 28px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  color: var(--action-text);
  animation: btn-spin 600ms linear infinite;
}
.btn.is-loading.btn-secondary::after, .btn.is-loading.btn-ghost::after {
  color: var(--text-secondary);
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
.btn-group {
  display: inline-flex;
}
.btn-group > .btn {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}
.btn-group > .btn:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.btn-group > .btn:not(:first-child) {
  margin-inline-start: -1px;
}
.btn-group > .btn:hover, .btn-group > .btn:focus-visible {
  position: relative;
  z-index: 1;
}

.ui .btn {
  min-height: var(--target-mouse);
  padding-inline: 16px;
  font-size: 0.8125rem;
}
.ui .btn-sm {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 0.75rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-end: 16px;
}
.field > label,
.field .field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.field .field-required::after {
  content: " *";
  color: var(--danger-text);
}
.field .field-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  order: -1;
}
.field .field-error {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--danger-text);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.input::placeholder,
.select::placeholder,
.textarea::placeholder {
  color: var(--text-disabled);
}
.input:hover:not(:disabled):not([readonly]),
.select:hover:not(:disabled):not([readonly]),
.textarea:hover:not(:disabled):not([readonly]) {
  border-color: var(--text-tertiary);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand-signal);
  box-shadow: 0 0 0 3px var(--brand-muted);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.input[readonly],
.select[readonly],
.textarea[readonly] {
  background-color: var(--surface-sunken);
  border-color: var(--border);
}

.textarea {
  min-height: 88px;
  line-height: 1.5;
  resize: vertical;
}

.select {
  appearance: none;
  padding-inline-end: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b736d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.input-code {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.input-amount {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea {
  border-color: var(--danger);
}
.field.is-invalid .input:focus, .field.is-invalid .select:focus, .field.is-invalid .textarea:focus {
  box-shadow: 0 0 0 3px var(--danger-surface);
}

.input-group {
  display: flex;
}
.input-group .input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.input-group .input-unit {
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-inline-start: none;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-block: 4px;
  cursor: pointer;
}
.choice input[type=checkbox],
.choice input[type=radio] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--action);
  cursor: pointer;
}
.choice span {
  font-size: 0.875rem;
}
.choice:has(input:disabled) {
  cursor: not-allowed;
  color: var(--text-disabled);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--border-strong);
  border-radius: 999px;
  transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.switch .switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-raised);
  transition: transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.switch input:checked + .switch-track {
  background-color: var(--action);
}
.switch input:checked + .switch-track::after {
  transform: translateX(16px);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.switch input:disabled + .switch-track {
  background-color: var(--border);
  cursor: not-allowed;
}

.field-group {
  border-block-start: 1px solid var(--border-subtle);
  padding-block-start: 20px;
  margin-block-start: 24px;
}
.field-group:first-child {
  border-block-start: none;
  padding-block-start: 0;
  margin-block-start: 0;
}
.field-group > legend,
.field-group .field-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-block-end: 16px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 16px;
}

.ui .field {
  margin-block-end: 12px;
}
.ui .input, .ui .select, .ui .textarea {
  min-height: var(--target-mouse);
  padding: 6px 10px;
  font-size: 0.8125rem;
}
.ui .textarea {
  min-height: 72px;
}
.ui .choice span {
  font-size: 0.8125rem;
}

.panel {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--border);
}
.panel-head > h2,
.panel-head > h3 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
}
.panel-head .panel-subtitle {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.panel-body {
  padding: 16px;
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-block-start: 1px solid var(--border);
  background-color: var(--surface-sunken);
  border-end-start-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.panel-flush .panel-body {
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.card > h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-block-end: 4px;
}
.card > p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.card-link {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-link:hover {
  border-color: var(--brand-signal);
  box-shadow: var(--shadow-raised);
  color: inherit;
}
.card-link:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.card-media {
  padding: 0;
  overflow: hidden;
}
.card-media > .card-media-img {
  display: block;
  aspect-ratio: 16/10;
  background-color: var(--surface-sunken);
}
.card-media > .card-media-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-media > h3,
.card-media > p,
.card-media > .card-foot {
  padding-inline: 24px;
}
.card-media > h3 {
  padding-block-start: 20px;
}
.card-media > .card-foot {
  padding-block-end: 20px;
}

.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-block-start: auto;
  padding-block-start: 16px;
}

.section {
  padding-block: 80px;
}

.section-tint {
  background-color: var(--surface-sunken);
}

.section-head {
  max-width: 42rem;
  margin-block-end: 48px;
}
.section-head .eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-signal);
  margin-block-end: 8px;
}
.section-head > h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.section-head > p {
  color: var(--text-secondary);
  font-size: 1.125rem;
  margin-block-start: 12px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-block-end: 20px;
}
.page-head > div {
  min-width: 0;
}
.page-head h1 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0;
}
.page-head .page-subtitle {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-block-start: 2px;
}
.page-head .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-block-end: 20px;
}

.kpi {
  padding: 16px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-block-start: 3px solid var(--neutral);
}
.kpi .kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.kpi .kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-block: 4px;
}
.kpi .kpi-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.kpi-ok {
  border-block-start-color: var(--ok);
}

.kpi-warn {
  border-block-start-color: var(--warn);
}

.kpi-danger {
  border-block-start-color: var(--danger);
}

.kpi-accent {
  border-block-start-color: var(--accent);
}

.wrap {
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
}

.wrap-narrow {
  width: min(760px, 100% - 40px);
  margin-inline: auto;
}

.ui .panel-body {
  padding: 12px;
}
.ui .panel-head, .ui .panel-foot {
  padding: 10px 12px;
}
.ui .card {
  padding: 16px;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.data-table th, .data-table td {
  padding: 12px;
  text-align: start;
  vertical-align: middle;
}
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  white-space: nowrap;
  background-color: var(--surface-sunken);
  border-block-end: 1px solid var(--border-strong);
}
.data-table tbody tr {
  border-block-end: 1px solid var(--border-subtle);
}
.data-table tbody tr:hover {
  background-color: var(--surface-hover);
}
.data-table tbody tr:last-child {
  border-block-end: none;
}
.data-table tbody tr.is-clickable {
  cursor: pointer;
}
.data-table tbody tr.is-selected {
  background-color: var(--brand-faint);
  box-shadow: inset 3px 0 0 var(--action);
}

.data-table .cell-num,
.data-table .cell-amount {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table .cell-amount {
  font-weight: 600;
}
.data-table .cell-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-secondary);
}
.data-table .cell-actions {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}
.data-table .cell-primary {
  font-weight: 600;
  color: var(--text);
}
.data-table .cell-secondary {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.data-table th.is-sortable {
  padding: 0;
}
.data-table th.is-sortable > button {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.data-table th.is-sortable > button:hover {
  color: var(--text);
}
.data-table th.is-sortable[aria-sort] > button::after {
  content: "";
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
}
.data-table th.is-sortable[aria-sort=ascending] > button::after {
  border-block-end: 5px solid currentColor;
}
.data-table th.is-sortable[aria-sort=descending] > button::after {
  border-block-start: 5px solid currentColor;
}

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-block-end: 1px solid var(--border);
}
.table-toolbar .table-count {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.table-toolbar > .btn:last-child {
  margin-inline-start: auto;
}

.table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-block-start: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.table-bulkbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background-color: var(--brand-faint);
  border-block-end: 1px solid var(--border);
  font-size: 0.8125rem;
}
.table-bulkbar strong {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .data-table.is-stacked thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .data-table.is-stacked tbody tr {
    display: block;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-block-end: 12px;
  }
  .data-table.is-stacked td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    text-align: end;
  }
  .data-table.is-stacked td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-align: start;
  }
  .data-table.is-stacked .cell-actions {
    justify-content: flex-end;
  }
}
.ui .data-table th, .ui .data-table td {
  padding: 8px 12px;
}

@media (pointer: coarse) {
  .ui .data-table th, .ui .data-table td {
    padding: 12px;
  }
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.status-ok {
  color: var(--ok-text);
  background-color: var(--ok-surface);
  border-color: rgba(0, 132, 61, 0.24);
}

.status-warn {
  color: var(--warn-text);
  background-color: var(--warn-surface);
  border-color: rgba(169, 118, 26, 0.24);
}

.status-danger {
  color: var(--danger-text);
  background-color: var(--danger-surface);
  border-color: rgba(200, 16, 46, 0.24);
}

.status-info {
  color: var(--info-text);
  background-color: var(--info-surface);
  border-color: rgba(36, 112, 192, 0.24);
}

.status-muted {
  color: var(--neutral-text);
  background-color: var(--neutral-surface);
  border-color: var(--border);
}

.status-plain::before {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border-radius: 999px;
  background-color: var(--neutral-surface);
  color: var(--text-secondary);
}

.badge-alert {
  background-color: var(--danger);
  color: #fff;
}

.badge-accent {
  background-color: var(--accent-surface);
  color: var(--accent-text);
  border: 1px solid rgba(201, 162, 39, 0.4);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.line-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}

.line-edge {
  background-color: var(--line-edge-bg);
  color: var(--line-edge-fg);
}

.line-magnatec {
  background-color: var(--line-magnatec-bg);
  color: var(--line-magnatec-fg);
}

.line-gtx {
  background-color: var(--line-gtx-bg);
  color: var(--line-gtx-fg);
}

.line-transmax {
  background-color: var(--line-transmax-bg);
  color: var(--line-transmax-fg);
}

.line-power1 {
  background-color: var(--line-power1-bg);
  color: var(--line-power1-fg);
}

.cell-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.plate {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
}

.gauge {
  display: block;
  width: 100%;
  max-width: 80px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--neutral-surface);
  overflow: hidden;
}
.gauge > span {
  display: block;
  height: 100%;
  background-color: var(--ok);
}
.gauge.is-low > span {
  background-color: var(--warn);
}
.gauge.is-out > span {
  background-color: var(--danger);
}

.menu {
  position: relative;
  display: inline-flex;
}

.menu-list {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 200px;
  padding: 4px;
  margin: 0;
  list-style: none;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}
.menu-list[hidden] {
  display: none;
}

.menu-start {
  inset-inline: 0 auto;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 0.8125rem;
  text-align: start;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.menu-item:hover, .menu-item:focus-visible {
  background-color: var(--surface-hover);
  color: var(--text);
}
.menu-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}
.menu-item[aria-disabled=true] {
  color: var(--text-disabled);
  pointer-events: none;
}

.menu-item-danger {
  color: var(--danger-text);
}
.menu-item-danger:hover, .menu-item-danger:focus-visible {
  background-color: var(--danger-surface);
  color: var(--danger-text);
}
.menu-item-danger svg {
  color: currentColor;
}

.menu-header {
  padding: 8px 10px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.menu-separator {
  height: 1px;
  margin: 4px 0;
  background-color: var(--border-subtle);
}

.tooltip {
  position: absolute;
  z-index: 60;
  padding: 4px 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--text-inverse);
  background-color: #10130f;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.toasts {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, 100vw - 32px);
  pointer-events: none;
}
.toasts > * {
  pointer-events: auto;
}

@media (max-width: 575.98px) {
  .toasts {
    inset-inline: 12px;
    inset-block-end: 12px;
    width: auto;
  }
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--neutral);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  animation: toast-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.toast .toast-title {
  font-size: 0.8125rem;
  font-weight: 600;
}
.toast .toast-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-block-start: 2px;
}
.toast .toast-close {
  margin-inline-start: auto;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.toast svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.toast-ok {
  border-inline-start-color: var(--ok);
}
.toast-ok svg {
  color: var(--ok-text);
}

.toast-warn {
  border-inline-start-color: var(--warn);
}
.toast-warn svg {
  color: var(--warn-text);
}

.toast-error {
  border-inline-start-color: var(--danger);
}
.toast-error svg {
  color: var(--danger-text);
}

.toast-info {
  border-inline-start-color: var(--info);
}
.toast-info svg {
  color: var(--info-text);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-block-start: 1px;
}
.alert .alert-title {
  font-weight: 600;
  margin-block-end: 2px;
}
.alert ul {
  margin: 4px 0 0;
  padding-inline-start: 16px;
}

.alert-ok {
  color: var(--ok-text);
  background-color: var(--ok-surface);
  border-color: rgba(0, 132, 61, 0.24);
}

.alert-warn {
  color: var(--warn-text);
  background-color: var(--warn-surface);
  border-color: rgba(169, 118, 26, 0.24);
}

.alert-danger {
  color: var(--danger-text);
  background-color: var(--danger-surface);
  border-color: rgba(200, 16, 46, 0.24);
}

.alert-info {
  color: var(--info-text);
  background-color: var(--info-surface);
  border-color: rgba(36, 112, 192, 0.24);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
}
.empty svg {
  width: 40px;
  height: 40px;
  color: var(--text-disabled);
  stroke-width: 1.5;
  margin-block-end: 16px;
}
.empty h2, .empty h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-block-end: 6px;
}
.empty p {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  max-width: 46ch;
  margin-block-end: 20px;
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-active) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton 1.4s ease-in-out infinite;
}

@keyframes skeleton {
  to {
    background-position: -200% 0;
  }
}
.skeleton-line {
  height: 0.75em;
  margin-block: 0.25em;
}
.skeleton-line.is-short {
  width: 40%;
}
.skeleton-line.is-medium {
  width: 65%;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-block-start-color: var(--action);
  border-radius: 50%;
  animation: spinner 600ms linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.page-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 96px;
}
.page-error .page-error-code {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--text-disabled);
}
.page-error h1 {
  margin-block: 12px;
}
.page-error p {
  color: var(--text-secondary);
  max-width: 52ch;
  margin-block-end: 32px;
}

.tabs {
  display: flex;
  gap: 4px;
  border-block-end: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-tertiary);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}
.tab:hover {
  color: var(--text);
}
.tab[aria-current], .tab.is-active {
  color: var(--brand);
  font-weight: 600;
  border-block-end-color: var(--action);
}
.tab .badge {
  margin-inline-start: 2px;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}
.crumbs li + li::before {
  content: "›";
  margin-inline-end: 4px;
  color: var(--text-disabled);
}
.crumbs a {
  color: var(--text-tertiary);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--brand-signal);
  text-decoration: underline;
}
.crumbs [aria-current=page] {
  color: var(--text-secondary);
}

@media (max-width: 575.98px) {
  .crumbs li:not(:last-child) {
    display: none;
  }
  .crumbs li + li::before {
    content: none;
  }
}
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding-inline: 6px;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.pagination a:hover {
  background-color: var(--surface-hover);
  color: var(--text);
}
.pagination [aria-current=page] {
  background-color: var(--brand-faint);
  border-color: var(--action);
  color: var(--brand);
  font-weight: 600;
}
.pagination .is-disabled {
  color: var(--text-disabled);
  pointer-events: none;
}

@media (pointer: coarse) {
  .pagination a,
  .pagination span {
    min-width: var(--target-touch);
    height: var(--target-touch);
  }
}
.filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar {
  display: none;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-secondary);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.filter:hover {
  border-color: var(--text-tertiary);
  color: var(--text);
}
.filter > span {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.filter[aria-current], .filter.is-active {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--text-inverse);
}
.filter[aria-current] > span, .filter.is-active > span {
  color: rgba(255, 255, 255, 0.7);
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search > svg {
  position: absolute;
  inset-inline-start: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.search input {
  padding-inline-start: 36px;
}
.search kbd {
  position: absolute;
  inset-inline-end: 8px;
  padding: 2px 4px;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.segmented {
  display: inline-flex;
  padding: 2px;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.segmented > * {
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-tertiary);
  border-radius: var(--radius-xs);
}
.segmented > *:hover {
  color: var(--text);
}
.segmented > *[aria-current], .segmented > *.is-active {
  background-color: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-raised);
}

.err {
  max-width: 34rem;
  margin: 0 auto;
  padding: 32px 20px 40px;
  text-align: center;
}

.err-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: var(--accent-surface, #f7f0d8);
  color: var(--accent-text, #8a6d1f);
}
.err-mark svg {
  width: 28px;
  height: 28px;
}

.err h1 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--text);
}

.err-lead {
  margin: 0 auto 28px;
  max-width: 30rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.err-what {
  text-align: start;
  margin: 0 auto 28px;
  padding: 20px 24px;
  max-width: 30rem;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
}
.err-what h2 {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.err-what ol {
  margin: 0;
  padding-inline-start: 24px;
  display: grid;
  gap: 10px;
}
.err-what li {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.err-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 24px;
  padding: 12px 16px;
  max-width: 30rem;
  background-color: var(--surface-sunken);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
}
.err-ref code {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 0.75rem;
  color: var(--text);
  overflow-wrap: anywhere;
  user-select: all;
}

.err-ref-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.err-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* -------------------------------------------------------------- telephone */
@media (max-width: 767.98px) {
  .err {
    padding: 24px 16px 32px;
  }
  .err h1 {
    font-size: 1.375rem;
  }
  .err-mark {
    width: 48px;
    height: 48px;
  }
  .err-mark svg {
    width: 24px;
    height: 24px;
  }
  .err-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .err-actions > * {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
:root {
  --ui-sidebar-width: 248px;
  --ui-sidebar-collapsed: 56px;
  --ui-globalbar-height: 48px;
  --ui-contextbar-height: 44px;
  --ui-bg: var(--surface);
  --ui-bg-subtle: var(--surface-sunken);
  --ui-bg-hover: var(--surface-hover);
  --ui-bg-selected: var(--brand-faint);
  --ui-border: var(--border-strong);
  --ui-border-light: var(--border-subtle);
  --ui-text: var(--text);
  --ui-text-muted: var(--text-secondary);
  --ui-text-subtle: var(--text-tertiary);
  --ui-accent: var(--action);
  --ui-accent-dark: var(--action-hover);
  --ui-accent-soft: var(--brand-muted);
  --ui-danger: var(--danger);
  --ui-warn: var(--warn);
  --ui-focus: var(--focus-ring);
  --ui-text-2: var(--text-secondary);
  --ui-border-strong: var(--border-strong);
  --canvas: var(--surface-sunken);
  --ok-soft: var(--ok-surface);
  --ok-faint: var(--ok-surface);
  --danger-faint: var(--danger-surface);
  --castrol-green: var(--action);
  --castrol-green-dark: var(--action-hover);
  --castrol-green-light: var(--brand-muted);
  --castrol-red: var(--danger);
  --castrol-red-dark: #8f0a1f;
  --castrol-red-light: var(--danger-surface);
  --castrol-gold: var(--accent);
  --castrol-gold-dark: var(--accent-text);
  --castrol-gold-light: var(--accent-surface);
  --castrol-silver: var(--neutral);
  --castrol-grey-100: var(--surface-sunken);
  --castrol-grey-200: var(--border);
  --castrol-grey-500: var(--text-tertiary);
  --castrol-grey-700: var(--text-secondary);
  --castrol-black: #10130f;
  --castrol-white: var(--surface);
  --mono: var(--font-mono);
}

.ui {
  background-color: var(--surface-sunken);
  font-size: 0.875rem;
}

/* ==========================================================================
   Mr Castrol - Console de gestion
   Structure calquee sur le tableau de bord Cloudflare : barre globale, barre
   de contexte, rail clair a groupes depliables, tables selectionnables.
   Palette Castrol appliquee par-dessus.
   ========================================================================== */
/* Les variables de la console sont definies dans console/_bridge.scss, qui
   les branche sur les tokens partages. Les regles ci-dessous les consomment
   sans changement : c'est ce qui permet de deplacer l'identite de quatre-vingt
   -deux ecrans sans les reecrire. */
* {
  box-sizing: border-box;
}

/* LA POLICE VIENT DU JETON, PAS D'UNE PILE RECOPIEE ICI

   Cette declaration portait la pile systeme en dur. Comme `console/` est
   importee apres `foundation/`, elle gagnait sur le `font-family:
   var(--font-sans)` pose sur `html` — et IBM Plex Sans, pourtant declaree en
   @font-face et livree en woff2, n'etait jamais utilisee : ses trois graisses
   restaient a l'etat `unloaded` dans le navigateur.

   La console s'affichait donc dans la police du systeme d'exploitation, alors
   que le systeme de design croyait imposer la sienne. Le jeton est desormais
   la seule definition ; la pile de secours vit dans tokens/_type.scss. */
body.ui {
  margin: 0;
  background-color: var(--ui-bg-subtle);
  color: var(--ui-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ==========================================================================
   Barre globale (rangee du haut)
   ========================================================================== */
.ui-globalbar {
  height: var(--ui-globalbar-height);
  background-color: var(--ui-bg);
  border-bottom: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1050;
}

.ui-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.ui-logo img {
  height: 26px;
  width: auto;
  display: block;
}

.ui-divider-v {
  width: 1px;
  height: 22px;
  background-color: var(--ui-border);
  flex-shrink: 0;
}

/* Selecteur de perimetre (equivalent du compte Cloudflare) */
.ui-scope {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--ui-text);
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: default;
  white-space: nowrap;
}

.ui-scope svg {
  width: 15px;
  height: 15px;
  color: var(--ui-text-muted);
  flex-shrink: 0;
}

.ui-globalbar-spacer {
  flex: 1;
}

/* Recherche globale */
.ui-goto {
  position: relative;
  width: 220px;
}

.ui-goto input {
  width: 100%;
  height: 30px;
  padding: 0 2.75rem 0 1.875rem;
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  font-size: 0.8125rem;
  background-color: var(--ui-bg);
}

.ui-goto input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px rgba(0, 147, 67, 0.15);
}

.ui-goto .goto-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ui-text-subtle);
  pointer-events: none;
}

.ui-goto kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.625rem;
  color: var(--ui-text-subtle);
  background-color: var(--ui-bg-subtle);
  border: 1px solid var(--ui-border-light);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  pointer-events: none;
}

/* Menus de la barre globale */
.ui-topmenu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--ui-text);
  cursor: pointer;
  white-space: nowrap;
}

.ui-topmenu:hover {
  background-color: var(--ui-bg-hover);
}

.ui-topmenu svg {
  width: 13px;
  height: 13px;
}

.ui-topmenu-primary {
  border: 1px solid var(--ui-border);
  background-color: var(--ui-bg);
}

.ui-avatar-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  cursor: pointer;
}

.ui-avatar-btn:hover {
  background-color: var(--ui-bg-hover);
}

.ui-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--ui-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ==========================================================================
   Barre de contexte (rangee sous la barre globale)

   Elle dit ou l'on travaille — atelier, etat, ville — et porte la saisie de
   matricule : au comptoir, la voiture est devant la porte et son numero est
   ecrit dessus. C'est la seule commande qui doit rester sous la main sur
   toutes les pages.
   ========================================================================== */
/* LA HAUTEUR EST UN MINIMUM, PAS UNE CONTRAINTE

   Elle valait « height: 44px » — exactement la cible tactile. Au doigt, le
   champ matricule passe a 44 px lui aussi : il touchait alors les deux bords
   de la barre, sans un pixel de respiration.

   « min-height » sur la variable laisse la barre suivre son contenu, et la
   variable elle-meme est redefinie sous pointeur grossier — voir _mobile.scss.
   Les calages colles du rail et des trois en-tetes lisent cette meme variable :
   ils suivent sans qu'on ait a les reprendre. */
.ui-contextbar {
  min-height: var(--ui-contextbar-height);
  background-color: var(--ui-bg);
  border-bottom: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  font-size: 0.8125rem;
  position: sticky;
  top: var(--ui-globalbar-height);
  z-index: 1045;
  overflow-x: auto;
  white-space: nowrap;
}

.ui-context-name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

.ui-context-name svg {
  width: 15px;
  height: 15px;
  color: var(--ui-text-muted);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1rem 0.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
}

.ui-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.ui-pill-ok {
  background-color: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
  border-color: #b7e0c9;
}

.ui-pill-warn {
  background-color: #fdf3e2;
  color: var(--castrol-gold-dark);
  border-color: #f0dca8;
}

.ui-pill-muted {
  background-color: var(--ui-bg-subtle);
  color: var(--ui-text-muted);
  border-color: var(--ui-border-light);
}

.ui-context-meta {
  color: var(--ui-text-muted);
  font-size: 0.75rem;
}

/* ------------------------------------------- la cloche et sa pastille
 *
 *  Elle annonce les rendez-vous a confirmer, mis a jour toutes les trente
 *  secondes sans recharger la page — voir wwwroot/js/mc-live.js.
 *
 *  LA PASTILLE PORTE UN NOMBRE, PAS UN POINT
 *
 *  « Il y a quelque chose » oblige a ouvrir pour savoir s'il vaut la peine
 *  d'interrompre ce qu'on fait. « 3 » repond tout de suite.
 */
.ui-topmenu-bell {
  position: relative;
}

.ui-bell-count {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 16px;
  padding: 0 3px;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--castrol-red);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--ui-globalbar-bg, #fff);
}

@media (max-width: 991.98px) {
  .ui-bell-count {
    inset-inline-end: -2px;
  }
}
/* ==========================================================================
   Rail de navigation
   ========================================================================== */
.ui-layout {
  display: flex;
  align-items: flex-start;
}

.ui-sidebar {
  width: var(--ui-sidebar-width);
  flex-shrink: 0;
  background-color: var(--ui-bg);
  border-right: 1px solid var(--ui-border);
  position: sticky;
  /* Deux barres au-dessus : la globale et celle de contexte. */
  top: calc(var(--ui-globalbar-height) + var(--ui-contextbar-height));
  height: calc(100vh - var(--ui-globalbar-height) - var(--ui-contextbar-height));
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
  z-index: 1040;
}

.ui-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
}

.ui-nav::-webkit-scrollbar {
  width: 6px;
}

.ui-nav::-webkit-scrollbar-thumb {
  background: #d0d4d6;
  border-radius: 3px;
}

/* Entree de premier niveau */
.ui-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  color: var(--ui-text);
  text-decoration: none;
  font-size: 0.8125rem;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.ui-nav-item:hover {
  background-color: var(--ui-bg-hover);
  color: var(--ui-text);
}

.ui-nav-item.active {
  background-color: var(--ui-bg-selected);
  border-left-color: var(--ui-accent);
  font-weight: 600;
  color: var(--castrol-green-dark);
}

.ui-nav-item .nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--ui-text-muted);
}

.ui-nav-item.active .nav-icon {
  color: var(--ui-accent);
}

.ui-nav-item .nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-nav-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--ui-text-subtle);
  transition: transform 0.15s ease;
}

.ui-nav-group.open > .ui-nav-item .ui-nav-chevron {
  transform: rotate(180deg);
}

.ui-nav-badge {
  background-color: var(--castrol-red);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 9px;
  min-width: 17px;
  text-align: center;
  flex-shrink: 0;
}

/* Sous-entrees */
.ui-nav-sub {
  display: none;
  padding-bottom: 0.25rem;
}

.ui-nav-group.open .ui-nav-sub {
  display: block;
}

.ui-nav-sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 2.6rem;
  color: var(--ui-text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  border-left: 3px solid transparent;
  white-space: nowrap;
}

.ui-nav-sublink:hover {
  background-color: var(--ui-bg-hover);
  color: var(--ui-text);
}

.ui-nav-sublink.active {
  background-color: var(--ui-bg-selected);
  border-left-color: var(--ui-accent);
  color: var(--castrol-green-dark);
  font-weight: 600;
}

.ui-nav-sublink .ui-nav-badge {
  margin-left: auto;
}

/* Pied du rail */
.ui-sidebar-footer {
  border-top: 1px solid var(--ui-border-light);
  padding: 0.375rem;
  flex-shrink: 0;
}

.ui-collapse-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ui-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.ui-collapse-btn:hover {
  background-color: var(--ui-bg-hover);
  color: var(--ui-text);
}

.ui-collapse-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

/* --- Mode replie : icones seules --------------------------------------- */
body.ui.nav-collapsed .ui-sidebar {
  width: var(--ui-sidebar-collapsed);
}

body.ui.nav-collapsed .nav-label,
body.ui.nav-collapsed .ui-nav-chevron,
body.ui.nav-collapsed .ui-nav-badge,
body.ui.nav-collapsed .ui-collapse-btn span,
body.ui.nav-collapsed .ui-nav-sub {
  display: none;
}

body.ui.nav-collapsed .ui-nav-item,
body.ui.nav-collapsed .ui-collapse-btn {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

body.ui.nav-collapsed .ui-collapse-btn svg {
  transform: rotate(180deg);
}

body.ui.nav-collapsed .ui-nav-item {
  position: relative;
}

body.ui.nav-collapsed .ui-nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: #313131;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 1060;
}

body.ui.nav-collapsed .ui-nav-item:hover::after {
  opacity: 1;
}

/* ==========================================================================
   Contenu
   ========================================================================== */
.ui-main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem 3rem;
}

.ui-page-head {
  margin-bottom: 1.25rem;
}

.ui-page-head h1 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.ui-page-head h1 strong {
  font-weight: 600;
}

/* LE LOGO AU FIL DU TITRE
 *
 * Quatre titres de la console epelaient « Mr Castrol » en toutes lettres, en
 * gras, au milieu d'une phrase : « Rapports Mr Castrol », « Reseau Mr
 * Castrol ». La marque y etait donc dessinee par la police du systeme, a cote
 * d'une barre de navigation qui, elle, porte le logo. Deux representations de
 * la meme enseigne sur le meme ecran.
 *
 * La hauteur suit celle du texte — `em`, jamais des pixels : le titre est a
 * 1.5rem aujourd'hui, le logo suivra s'il change demain. 0.78em cale la
 * hauteur du mot-symbole sur la hauteur des capitales qui l'entourent ; un
 * `1em` le ferait deborder au-dessus et en dessous de la ligne.
 *
 * L'attribut alt porte le nom : le titre se lit « Rapports Mr Castrol » au
 * lecteur d'ecran, exactement comme avant.
 */
.brand-inline {
  height: 0.78em;
  width: auto;
  display: inline-block;
  vertical-align: -0.04em;
}

.ui-page-head .ui-page-desc {
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  margin: 0;
  max-width: 62ch;
}

.ui-page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ui-page-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Onglets d'un sous-espace */
.ui-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}

.ui-tab {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.ui-tab:hover {
  color: var(--ui-text);
}

.ui-tab.active {
  color: var(--castrol-green-dark);
  border-bottom-color: var(--ui-accent);
  font-weight: 600;
}

/* La grille des indicateurs est definie avec les tuiles, dans console/_card.scss. */
/* Les tuiles d'indicateur sont definies dans console/_card.scss. Le filet
   colore qui vivait ici a ete retire : il ne portait aucun texte, donc aucune
   information, et donnait la meme couleur a des chiffres de sens oppose. */
/* ==========================================================================
   Panneau et table de donnees
   ========================================================================== */
.ui-panel {
  background-color: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  overflow: hidden;
}

.ui-panel-head {
  padding: 1rem 1.125rem 0.75rem;
  border-bottom: 1px solid var(--ui-border-light);
}

.ui-panel-head h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.ui-panel-head p {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  margin: 0;
}

/* LE CORPS DU PANNEAU N'EXISTAIT PAS

   Le panneau avait une tete mais pas de corps. Vingt et une vues ecrivaient
   donc `style="padding:1.125rem"` a la main pour retrouver l'alignement de la
   tete — la meme valeur, recopiee, sans rien qui la relie a celle d'en face.

   Le jour ou cet interligne change, il change a un endroit et pas aux vingt
   autres. La classe rend la relation explicite : c'est le meme retrait, parce
   que c'est le meme panneau. */
.ui-panel-body {
  padding: 1.125rem;
}

/* Barre d'outils : filtre + recherche + action principale */
.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
}

.ui-search-group {
  display: flex;
  flex: 1;
  min-width: 220px;
  max-width: 460px;
}

.ui-search-group input {
  flex: 1;
  height: 32px;
  border: 1px solid var(--ui-border);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  min-width: 0;
}

.ui-search-group input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px rgba(0, 147, 67, 0.12);
}

.ui-search-group .ui-btn {
  border-radius: 0 4px 4px 0;
}

/* Boutons */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 32px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--ui-border);
  background-color: var(--ui-bg);
  color: var(--ui-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ui-btn:hover {
  background-color: var(--ui-bg-hover);
  color: var(--ui-text);
}

/* Le bouton est une boite flex, et une icone y est un element flex comme un
   autre : sans ce `flex-shrink: 0`, elle se laisse comprimer jusqu'a zero des
   que la rangee manque de place. La largeur declaree ci-dessus ne la protege
   pas — elle n'est qu'une base a partir de laquelle le moteur retranche.

   Mesure sur la fiche d'ordre a 633 px de large : trois icones sur cinq
   calculaient 0 px, dont celles de « Dossier vehicule » et « Ajouter des
   lignes ». Le texte restait, l'icone avait disparu sans laisser de trace. */
.ui-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ui-btn-primary {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
  color: #fff;
}

.ui-btn-primary:hover {
  background-color: var(--ui-accent-dark);
  border-color: var(--ui-accent-dark);
  color: #fff;
}

.ui-btn-danger {
  color: var(--castrol-red);
  border-color: var(--ui-border);
}

.ui-btn-danger:hover {
  background-color: var(--castrol-red-light);
  color: var(--castrol-red-dark);
}

.ui-btn-sm {
  height: 26px;
  padding: 0 0.5rem;
  font-size: 0.75rem;
}

/* L'ATTENTE, QUAND LA PAGE ENTIERE PART

   Marque par ui.js a la soumission. Le bouton reste actif au sens du
   formulaire — un bouton `disabled` n'est pas envoye, et plusieurs ecrans
   distinguent leurs actions par le nom du bouton clique — mais il cesse de
   repondre au pointeur et s'eteint. C'est le meme vocabulaire que dans les
   fenetres, la ou l'attente etait deja dite.

   Le point qui tourne se place APRES le libelle : le texte ne bouge pas, donc
   la ligne ne se recompose pas sous le doigt au moment ou l'on relache. */
.ui-btn[aria-busy=true] {
  pointer-events: none;
  opacity: 0.65;
}

.ui-btn[aria-busy=true]::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ui-btn-spin 0.6s linear infinite;
}

@keyframes ui-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Le reglage systeme prime : sans mouvement, l'attente se dit par la seule
   extinction du bouton, qui suffit a empecher le second clic. */
@media (prefers-reduced-motion: reduce) {
  .ui-btn[aria-busy=true]::after {
    animation: none;
  }
}
.ui-btn-link {
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  padding: 0 0.25rem;
  height: auto;
}

.ui-btn-link:hover {
  background: transparent;
  color: var(--ui-accent-dark);
  text-decoration: underline;
}

/* --- Table --------------------------------------------------------------- */
.ui-table-wrap {
  overflow-x: auto;
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.ui-table thead th {
  background-color: var(--ui-bg-subtle);
  border-top: 1px solid var(--ui-border-light);
  border-bottom: 1px solid var(--ui-border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  white-space: nowrap;
  user-select: none;
}

.ui-table thead th.sortable {
  cursor: pointer;
}

.ui-table thead th.sortable:hover {
  background-color: var(--ui-bg-hover);
  color: var(--ui-text);
}

.ui-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ui-info {
  width: 13px;
  height: 13px;
  color: var(--ui-text-subtle);
  flex-shrink: 0;
}

/* Fleche de tri dessinee en CSS : garde le balisage des en-tetes minimal */
.ui-table thead th.sortable::after {
  content: "";
  display: inline-block;
  margin-left: 0.35rem;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.ui-table thead th.sortable:hover::after {
  opacity: 0.4;
}

.ui-table thead th.sort-asc::after {
  opacity: 1;
  color: var(--ui-accent);
}

.ui-table thead th.sort-desc::after {
  opacity: 1;
  color: var(--ui-accent);
  border-bottom: 0;
  border-top: 5px solid currentColor;
}

.ui-table tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ui-border-light);
  vertical-align: middle;
}

.ui-table tbody tr:hover {
  background-color: var(--ui-bg-subtle);
}

.ui-table tbody tr.row-selected {
  background-color: var(--ui-bg-selected);
}

.ui-table tbody tr.row-selected:hover {
  background-color: #d9eee3;
}

.ui-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   Le compte de resultat

   Quatre motifs, poses ici et non dans _domain.scss : ils servent a toute
   lecture chiffree, pas au seul ecran du resultat.
   ========================================================================== */
/* Deux colonnes qui deviennent une seule sous la tablette. Le calcul a gauche,
   la caisse et les charges a droite : on lit le raisonnement d'abord. */
.grid-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}
/* L'ecart avec la periode precedente.
   LE SENS N'EST PAS LA COULEUR : le signe est ecrit dans le texte — « +12 % »,
   « −8 % » — et la teinte ne fait que le confirmer. Une hausse de charges est
   affichee en hausse ; c'est au lecteur d'en juger, pas a la feuille de style. */
.mc-delta {
  display: inline-block;
  margin-inline-start: 0.4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mc-delta.is-up {
  color: var(--ok-text);
}

.mc-delta.is-down {
  color: var(--danger-text);
}

/* Un sous-total : la ligne se detache sans changer de taille. */
.ui-table tbody tr.row-strong td {
  font-weight: 600;
  border-top: 1px solid var(--ui-border);
}

/* Le resultat. Le seul chiffre de la page qui conclut. */
.ui-table tbody tr.row-total td {
  font-weight: 700;
  font-size: 1.02rem;
  border-top: 2px solid var(--ui-text);
  background-color: var(--ui-bg-subtle);
}

/* --- La ligne qui appelle une commande ------------------------------------
   Employee par le stock : quantite <= seuil (StockItem.IsLow).

   POURQUOI UN FOND CLAIR ET NON UN ROUGE PLEIN

   Un rouge sature sur la ligne entiere oblige a repasser tout le texte et
   tous les boutons en blanc, sur quarante lignes, et rend le tableau
   illisible des qu'il y a plus de trois manques. Le fond employe est la
   surface de danger de la palette — assez teintee pour se voir d'un coup
   d'oeil sur une page entiere, assez claire pour que l'encre normale garde
   son contraste.

   LE TRAIT DE GAUCHE PORTE LA CERTITUDE

   La teinte seule est faible sur un ecran d'atelier mal regle, et invisible
   pour qui ne distingue pas les rouges. Le trait, lui, se voit par sa forme.
   La pastille « Rupture » ou « Seuil » dans la colonne Stock continue de dire
   l'etat en toutes lettres : la couleur confirme, elle ne porte jamais seule
   (§24). */
.ui-table tbody tr.is-low {
  background-color: var(--danger-surface);
  box-shadow: inset 3px 0 0 0 var(--danger);
}

.ui-table tbody tr.is-low:hover {
  /* Assombrit legerement sans virer au rouge plein : le survol doit se
     sentir, pas remplacer l'etat. */
  background-color: color-mix(in srgb, var(--danger-surface) 88%, var(--danger));
}

/* Le trait suit le sens de lecture : a droite en arabe. La console reste en
   francais, mais la regle ne coute rien et evite un trait fantome le jour ou
   elle changerait. */
[dir=rtl] .ui-table tbody tr.is-low {
  box-shadow: inset -3px 0 0 0 var(--danger);
}

.ui-table .col-check {
  width: 38px;
  padding-left: 1.125rem;
}

.ui-table .col-actions {
  text-align: right;
  white-space: nowrap;
  padding-right: 1.125rem;
}

.ui-check {
  width: 15px;
  height: 15px;
  accent-color: var(--ui-accent);
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}

/* Lien d'action en fin de ligne, façon "Edit >"

   LA CLASSE VAUT AUSSI POUR UN BOUTON

   Certaines de ces actions ouvrent une fenetre plutot qu'une page : ce sont
   alors des `<button>`, et le navigateur leur pose son propre fond, son trait
   et sa police. Huit vues corrigeaient cela avec le meme
   `style="background:none;border:0;cursor:pointer;font-family:inherit"`
   recopie a la main — huit occasions d'en oublier une, et huit lignes qui ne
   disent pas pourquoi elles sont la.

   La remise a zero appartient a la classe : ce qui compte est le role — une
   action de fin de ligne — pas la balise qui le porte. */
.ui-row-action {
  color: var(--ui-accent);
  text-decoration: none;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.ui-row-action:hover {
  text-decoration: underline;
  color: var(--ui-accent-dark);
}

.ui-row-action svg {
  width: 11px;
  height: 11px;
}

/* Barre d'actions groupees, visible quand des lignes sont cochees */
.ui-bulkbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.125rem;
  background-color: var(--ui-bg-selected);
  border-bottom: 1px solid #b7e0c9;
  font-size: 0.8125rem;
}

.ui-bulkbar.visible {
  display: flex;
}

.ui-bulkbar .bulk-count {
  font-weight: 600;
  color: var(--castrol-green-dark);
}

/* Pied de table */
.ui-table-foot {
  padding: 0.625rem 1.125rem;
  border-top: 1px solid var(--ui-border-light);
  font-size: 0.75rem;
  color: var(--ui-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Etats en ligne */
.ui-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.ui-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.ui-status-ok {
  color: var(--castrol-green-dark);
}

.ui-status-warn {
  color: var(--castrol-gold-dark);
}

.ui-status-danger {
  color: var(--castrol-red-dark);
}

.ui-status-info {
  color: #1c5fa8;
}

.ui-status-muted {
  color: var(--ui-text-subtle);
}

/* Etat vide */
.ui-empty {
  text-align: center;
  padding: 3rem 1.5rem;
}

.ui-empty svg {
  width: 36px;
  height: 36px;
  color: #c4c9cb;
  margin-bottom: 0.625rem;
}

.ui-empty h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.ui-empty p {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  margin: 0 0 1rem;
}

/* Alerte discrete */
.ui-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 5px;
  font-size: 0.8125rem;
  margin-bottom: 1.25rem;
  border: 1px solid;
}

.ui-alert-ok {
  background-color: var(--ui-accent-soft);
  border-color: #b7e0c9;
  color: var(--castrol-green-dark);
}

.ui-alert-warn {
  background-color: #fdf3e2;
  border-color: #f0dca8;
  color: var(--castrol-gold-dark);
}

.ui-alert-info {
  background-color: #eef4fa;
  border-color: #cddff0;
  color: #1c5fa8;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */
.ui-field {
  margin-bottom: 1rem;
}

.ui-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.ui-field .hint {
  font-size: 0.75rem;
  color: var(--ui-text-subtle);
  font-weight: 400;
}

.ui-input, .ui-select, .ui-textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  background-color: var(--ui-bg);
}

.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px rgba(0, 147, 67, 0.12);
}

.ui-field-error {
  color: var(--castrol-red-dark);
  font-size: 0.75rem;
  margin-top: 0.2rem;
  display: block;
}

.ui-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ui-switch input {
  width: 15px;
  height: 15px;
  accent-color: var(--ui-accent);
  margin: 0;
}

.ui-switch label {
  margin: 0;
  font-weight: 400;
  font-size: 0.8125rem;
}

.ui-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--ui-border-light);
}

.ui-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1rem;
}

.ui-col-3 {
  grid-column: span 3;
}

.ui-col-4 {
  grid-column: span 4;
}

.ui-col-6 {
  grid-column: span 6;
}

.ui-col-8 {
  grid-column: span 8;
}

.ui-col-12 {
  grid-column: span 12;
}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
.ui-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.3rem;
  color: var(--ui-text);
  cursor: pointer;
}

.ui-burger svg {
  width: 20px;
  height: 20px;
}

.ui-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(49, 49, 49, 0.45);
  z-index: 1039;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

@media (max-width: 991.98px) {
  .ui-burger {
    display: flex;
  }
  .ui-topmenu-hideable {
    display: none;
  }
  /* La recherche ne disparait plus ici : elle se replie en pastille et se
     deploie a la mise au point. Le detail est dans console/_mobile.scss,
     chargee en dernier — la poser ici la ferait ecraser par le
     `position: relative` de console/_search.scss. */
  .ui-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: var(--ui-sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
    z-index: 1055;
  }
  body.ui.nav-open .ui-sidebar {
    transform: translateX(0);
  }
  body.ui.nav-open .ui-overlay {
    opacity: 1;
    visibility: visible;
  }
  /* Le repli ne s'applique pas au tiroir */
  body.ui.nav-collapsed .ui-sidebar {
    width: var(--ui-sidebar-width);
  }
  body.ui.nav-collapsed .nav-label,
  body.ui.nav-collapsed .ui-nav-chevron,
  body.ui.nav-collapsed .ui-nav-badge,
  body.ui.nav-collapsed .ui-collapse-btn span {
    display: inline;
  }
  body.ui.nav-collapsed .ui-nav-group.open .ui-nav-sub {
    display: block;
  }
  body.ui.nav-collapsed .ui-nav-item {
    justify-content: flex-start;
    padding-left: 0.875rem;
  }
  .ui-sidebar-footer {
    display: none;
  }
  .ui-main {
    padding: 1rem;
  }
  .ui-nav-item, .ui-nav-sublink {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}
@media (max-width: 575.98px) {
  .ui-page-head h1 {
    font-size: 1.25rem;
  }
  .ui-context-meta {
    display: none;
  }
  .ui-search-group {
    max-width: none;
  }
  .ui-grid {
    display: block;
  }
  /* La hauteur des boutons ne se decide plus ici. Une largeur d'ecran ne dit
     pas avec quoi on clique : une fenetre etroite sur un poste de travail
     reste pilotee a la souris, et un telephone reste un doigt quelle que
     soit son orientation. La regle vit sous `(pointer: coarse)` dans
     console/_domain.scss, ou elle vaut 44 px. */
}
/* ==========================================================================
   Mr Castrol - Composants d'interface
   Boites de dialogue, notifications, formulaires et adaptations tactiles.
   S'appuie sur les jetons definis dans admin-shell.css.

   Les sections anciennes ecrivent leurs valeurs en dur ; les nouvelles
   passent par les jetons. D'ou ce @use, qui doit rester la premiere
   instruction du fichier — Sass refuse un @use place apres une regle.
   ========================================================================== */
/* ==========================================================================
   Boite de dialogue — LA SEULE DE LA CONSOLE

   Repose sur <dialog> natif : piege le focus et gere Echap sans JavaScript.

   TOUTES LES FENETRES PASSENT PAR ICI

   Confirmation, suppression, succes, erreur, avertissement, formulaire, fiche
   de detail : meme cadre, meme en-tete, meme pied, meme bouton de fermeture,
   meme hierarchie de boutons. Seuls le pictogramme d'intention et sa teinte
   changent — voir `.mc-dialog-icon`. Le squelette, lui, ne change jamais.

   Il existait une SECONDE implementation, `.dialog` / `.drawer`, dans la
   couche de composants partages. Elle etait compilee dans la feuille livree
   mais aucun balisage ne l'employait : deux dessins pour le meme objet, dont
   un que personne ne voyait. Elle a ete retiree.
   ========================================================================== */
.mc-dialog {
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--ui-bg);
  color: var(--ui-text);
  /* L'ombre vient du jeton partage. Elle valait auparavant 64 px de flou a
     35 % : une fenetre qui flottait au-dessus de la page au lieu d'en faire
     partie. Le jeton pose une ombre courte, qui detache sans theatraliser. */
  box-shadow: var(--shadow-dialog);
  width: min(560px, 100vw - 2rem);
  max-height: min(85vh, 900px);
  overflow: visible;
}

.mc-dialog[data-size=lg] {
  width: min(860px, 100vw - 2rem);
}

.mc-dialog[data-size=sm] {
  width: min(420px, 100vw - 2rem);
}

/* Un catalogue se parcourt du regard : il lui faut de la largeur. */
.mc-dialog[data-size=xl] {
  width: min(1100px, 100vw - 2rem);
  max-height: min(90vh, 940px);
}

/* Le voile assombrit, il ne floute pas.
   `backdrop-filter: blur()` fait repeindre toute la page a chaque image :
   sur la tablette d'un atelier, l'ouverture d'une fenetre saccadait. Et le
   flou ne rend pas la fenetre plus lisible — il rend le reste illisible, ce
   que l'assombrissement fait deja, sans le cout. */
.mc-dialog::backdrop {
  background: rgba(16, 20, 18, 0.45);
}

.mc-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.mc-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.875rem;
  border-bottom: 1px solid var(--ui-border-light);
  flex-shrink: 0;
}

.mc-dialog-head h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.1rem;
  line-height: 1.35;
}

.mc-dialog-head p {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  margin: 0;
  line-height: 1.5;
}

.mc-dialog-close {
  margin-inline-start: auto;
  background: transparent;
  border: 0;
  padding: 0.25rem;
  border-radius: 4px;
  color: var(--ui-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}

.mc-dialog-close:hover {
  background: var(--ui-bg-hover);
  color: var(--ui-text);
}

.mc-dialog-close svg {
  width: 17px;
  height: 17px;
}

.mc-dialog-body {
  padding: 1.125rem;
  overflow-y: auto;
  flex: 1;
}

.mc-dialog-body > :first-child {
  margin-top: 0;
}

.mc-dialog-body > :last-child {
  margin-bottom: 0;
}

.mc-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--ui-border-light);
  background: var(--ui-bg-subtle);
  flex-shrink: 0;
}

.mc-dialog-foot .spacer {
  margin-inline-start: auto;
}

/* Pictogramme d'intention, pour les confirmations */
.mc-dialog-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mc-dialog-icon svg {
  width: 18px;
  height: 18px;
}

/* Les quatre intentions, sur la palette et non sur des teintes ecrites a la
   main. Trois couleurs vivaient ici en dur — #fdf3e2, #eef4fa, #1c5fa8 — et
   ne suivaient donc ni le contraste verifie de la palette, ni ses eventuels
   ajustements. C'est le seul endroit de la fenetre ou la couleur change. */
.mc-dialog-icon.i-danger {
  background: var(--danger-surface);
  color: var(--danger-text);
}

.mc-dialog-icon.i-warn {
  background: var(--warn-surface);
  color: var(--warn-text);
}

.mc-dialog-icon.i-info {
  background: var(--info-surface);
  color: var(--info-text);
}

.mc-dialog-icon.i-ok {
  background: var(--ok-surface);
  color: var(--ok-text);
}

/* Etat de chargement du contenu distant */
.mc-dialog-loading {
  padding: 2.5rem 1.125rem;
  text-align: center;
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
}

.mc-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ui-border);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  margin: 0 auto 0.6rem;
  animation: mc-spin 0.7s linear infinite;
}

@keyframes mc-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Ouverture : discrete, jamais spectaculaire */
.mc-dialog[open] {
  animation: mc-dialog-in 0.16s ease-out;
}

@keyframes mc-dialog-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-dialog[open] {
    animation: none;
  }
  .mc-spinner {
    animation-duration: 2s;
  }
}
/* ==========================================================================
   Panneau lateral
   Meme mecanique que la boite de dialogue, mais colle au bord droit : sert a
   consulter un contexte long sans quitter l'ecran de travail.
   ========================================================================== */
.mc-drawer {
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text);
  width: min(480px, 100vw);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  box-shadow: -8px 0 32px -12px rgba(16, 20, 18, 0.35);
  overflow: visible;
}

.mc-drawer::backdrop {
  background: rgba(16, 20, 18, 0.4);
}

.mc-drawer .mc-dialog-inner {
  height: 100vh;
  max-height: 100vh;
}

.mc-drawer[open] {
  animation: mc-drawer-in 0.2s ease-out;
}

@keyframes mc-drawer-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-drawer[open] {
    animation: none;
  }
}
@media (max-width: 575.98px) {
  .mc-drawer {
    width: 100vw;
  }
}
/* ==========================================================================
   Notifications
   ========================================================================== */
.mc-toasts {
  position: fixed;
  top: calc(var(--ui-globalbar-height) + 0.75rem);
  right: 1rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(360px, 100vw - 2rem);
  pointer-events: none;
}

.mc-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-inline-start: 3px solid var(--ui-accent);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 8px 28px -12px rgba(16, 20, 18, 0.35);
  pointer-events: auto;
  animation: mc-toast-in 0.18s ease-out;
}

.mc-toast.t-error {
  border-inline-start-color: var(--castrol-red);
}

.mc-toast.t-warn {
  border-inline-start-color: var(--castrol-gold);
}

.mc-toast.t-info {
  border-inline-start-color: var(--castrol-silver);
}

.mc-toast-icon {
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 0;
}

.mc-toast-icon svg {
  width: 16px;
  height: 16px;
}

.mc-toast.t-ok .mc-toast-icon {
  color: var(--castrol-green);
}

.mc-toast.t-error .mc-toast-icon {
  color: var(--castrol-red);
}

.mc-toast.t-warn .mc-toast-icon {
  color: var(--castrol-gold-dark);
}

.mc-toast.t-info .mc-toast-icon {
  color: var(--ui-text-muted);
}

.mc-toast-text {
  flex: 1;
  min-width: 0;
}

.mc-toast-title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.mc-toast-desc {
  font-size: 0.78rem;
  color: var(--ui-text-muted);
  line-height: 1.45;
  margin-top: 0.1rem;
}

.mc-toast-close {
  background: transparent;
  border: 0;
  padding: 2px;
  border-radius: 3px;
  color: var(--ui-text-subtle);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
}

.mc-toast-close:hover {
  background: var(--ui-bg-hover);
  color: var(--ui-text);
}

.mc-toast-close svg {
  width: 13px;
  height: 13px;
}

.mc-toast.leaving {
  animation: mc-toast-out 0.16s ease-in forwards;
}

@keyframes mc-toast-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mc-toast-out {
  to {
    opacity: 0;
    transform: translateX(14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-toast, .mc-toast.leaving {
    animation: none;
  }
  .mc-toast.leaving {
    opacity: 0;
  }
}
/* ==========================================================================
   Complements de formulaire
   ========================================================================== */
.mc-field-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 0.9rem;
}

.mc-hint {
  font-size: 0.75rem;
  color: var(--ui-text-subtle);
  margin-top: 0.2rem;
  display: block;
}

/* Groupe de saisie avec unite accolee */
.mc-input-unit {
  display: flex;
}

.mc-input-unit .ui-input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.mc-input-unit .unit {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid var(--ui-border);
  border-inline-start: 0;
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  background: var(--ui-bg-subtle);
  color: var(--ui-text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Choix segmente, pour les filtres courts */
.mc-segment {
  display: inline-flex;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  overflow: hidden;
  background: var(--ui-bg);
}

.mc-segment a {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
  text-decoration: none;
  border-inline-end: 1px solid var(--ui-border);
  white-space: nowrap;
}

.mc-segment a:last-child {
  border-inline-end: 0;
}

.mc-segment a:hover {
  background: var(--ui-bg-hover);
  color: var(--ui-text);
}

.mc-segment a.on {
  background: var(--ui-accent);
  color: #fff;
  font-weight: 600;
}

/* Le compte porte par une entree du segment — « Liste 6 ».

   Il vit dans le segment commun plutot que dans une classe d'ecran : l'ecran
   d'equipe est le premier a en avoir besoin, il ne sera pas le dernier. */
.mc-segment .seg-n {
  margin-inline-start: 0.35rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* Sur l'entree active, le fond est deja plein : baisser l'opacite y rendrait
   le chiffre plus pale que le fond ne le permet. */
.mc-segment a.on .seg-n {
  opacity: 0.85;
}

/* Jauge de stock : la forme dit l'etat avant que le chiffre soit lu */
.mc-gauge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 96px;
}

.mc-gauge-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--ui-border-light);
  overflow: hidden;
}

.mc-gauge-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--castrol-green);
}

.mc-gauge-fill.g-warn {
  background: var(--castrol-gold);
}

.mc-gauge-fill.g-danger {
  background: var(--castrol-red);
}

.mc-gauge-value {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   Reception
   L'ecran le plus utilise : la plaque domine, les prestations sont des cibles
   larges, atteignables sans viser.
   ========================================================================== */
.rc-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  max-width: 560px;
}

.rc-plate {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 2px solid var(--ui-accent);
  border-radius: 6px;
  padding: 0 0.9rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  text-transform: uppercase;
  background: var(--ui-bg);
  color: var(--ui-text);
}

.rc-plate::placeholder {
  color: var(--ui-text-subtle);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.rc-plate:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 147, 67, 0.18);
}

.rc-search .ui-btn {
  height: 56px;
  padding: 0 1.25rem;
}

/* Matricule : toujours en chasse fixe, il se lit comme un identifiant */
.rc-mono {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  letter-spacing: 0.04em;
}

/* Deux colonnes : le vehicule a gauche, le client a droite */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* ==========================================================================
   Nouvel ordre : zone de travail a gauche, dossier du vehicule a droite
   ========================================================================== */
.no-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.no-main {
  min-width: 0;
}

.no-dossier {
  position: sticky;
  top: calc(var(--ui-globalbar-height) + var(--ui-contextbar-height) + 1rem);
  min-width: 0;
}

.no-actionbar {
  grid-column: 1/-1;
}

/* En-tete du dossier : l'identite du vehicule, lisible d'un coup d'oeil */
.no-dossier-head {
  padding: 1.125rem;
  border-bottom: 1px solid var(--ui-border-light);
}

.no-plate {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.no-vehicle {
  font-size: 0.8125rem;
  color: var(--ui-text-muted);
  margin-top: 0.1rem;
}

.no-owner {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--ui-border-light);
  font-size: 0.8125rem;
}

/* Ce que ce client represente deja */
.no-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ui-accent-soft);
  border-bottom: 1px solid #b7e0c9;
}

.no-stat {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  border-inline-end: 1px solid rgba(0, 122, 56, 0.15);
}

.no-stat:last-child {
  border-inline-end: 0;
}

.no-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--castrol-green-dark);
  font-variant-numeric: tabular-nums;
}

.no-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--castrol-green-dark);
  opacity: 0.75;
}

/* Historique depliable, sans script */
.no-history {
  max-height: 460px;
  overflow-y: auto;
}

.no-entry {
  border-bottom: 1px solid var(--ui-border-light);
}

.no-entry:last-child {
  border-bottom: 0;
}

.no-entry > summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1.125rem;
  cursor: pointer;
  list-style: none;
  border-inline-start: 3px solid transparent;
}

.no-entry > summary::-webkit-details-marker {
  display: none;
}

.no-entry > summary:hover {
  background: var(--ui-bg-subtle);
}

.no-entry[open] > summary {
  background: var(--ui-bg-subtle);
}

/* Une intervention faite ailleurs se repere sans lire */
.no-entry.elsewhere > summary {
  border-inline-start-color: var(--castrol-gold);
}

.no-entry-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.no-entry-date {
  font-size: 0.8125rem;
  font-weight: 600;
}

.no-entry-shop {
  font-size: 0.72rem;
  color: var(--ui-text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.no-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--castrol-gold-light, #f7f0d8);
  color: var(--castrol-gold-dark);
}

.no-entry-total {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.no-entry-body {
  padding: 0 1.125rem 0.75rem 1.4rem;
}

.no-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.no-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
}

.no-lines li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0;
  border-bottom: 1px dotted var(--ui-border-light);
  font-variant-numeric: tabular-nums;
}

.no-lines li:last-child {
  border-bottom: 0;
}

@media (max-width: 1100px) {
  .no-order-layout {
    grid-template-columns: 1fr;
  }
  .no-dossier {
    position: static;
  }
  .no-history {
    max-height: none;
  }
}
/* Prestations : cases a cocher deguisees en cibles larges */
.rc-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-text-subtle);
  margin: 0.25rem 0 0.45rem;
}

.rc-group-label + .rc-services {
  margin-bottom: 1rem;
}

.rc-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
}

.rc-service {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-height: 60px;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ui-border);
  border-inline-start: 3px solid var(--ui-accent);
  border-radius: 6px;
  background: var(--ui-bg);
  cursor: pointer;
  user-select: none;
}

.rc-service:hover {
  background: var(--ui-bg-subtle);
}

.rc-service.on {
  background: var(--ui-bg-selected);
  border-color: var(--ui-accent);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}

.rc-service-check {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* Meme repere visuel qu'au catalogue : ce qui est coche a l'accueil se
   retrouve ensuite sur l'ordre sous la meme image. */
.rc-ico {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.rc-ico svg {
  width: 17px;
  height: 17px;
}

.rc-service-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.rc-service-name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.rc-service-price {
  font-size: 0.78rem;
  color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums;
}

.rc-service-alt {
  border-inline-start-color: var(--castrol-silver);
}

/* Un pack se distingue : il pose plusieurs lignes d'un coup */
.rc-service-pack {
  border-inline-start-color: var(--castrol-gold);
  border-inline-start-width: 4px;
}

/* Barre d action : le total suit l agent jusqu'en bas de page */
.rc-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 1.125rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  box-shadow: 0 -4px 16px -8px rgba(16, 20, 18, 0.25);
}

.rc-actionbar-summary {
  display: flex;
  flex-direction: column;
}

.rc-actionbar-summary span {
  font-size: 0.78rem;
  color: var(--ui-text-muted);
}

.rc-actionbar-summary strong {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--castrol-green-dark);
}

.rc-submit {
  margin-inline-start: auto;
  height: 44px;
  padding: 0 1.5rem;
  font-size: 0.95rem;
}

@media (max-width: 575.98px) {
  .rc-plate {
    font-size: 1.25rem;
    height: 50px;
  }
  .rc-search .ui-btn {
    height: 50px;
  }
  .rc-loyalty {
    gap: 1rem;
  }
  .rc-actionbar {
    flex-direction: column;
    align-items: stretch;
  }
  .rc-submit {
    margin-inline-start: 0;
    width: 100%;
  }
}
/* ==========================================================================
   Ordre de travail presente comme une facture

   L'ecran reprend la forme du document que le client recevra : emetteur en
   haut, parties, lignes, totaux. Le gerant n'a plus a imaginer ce que donnera
   l'impression, et le client peut lire par-dessus l'epaule sans explication.
   Tout ce qui pilote — avancement, reglement — reste hors du document.
   ========================================================================== */
/* Barre de travail : colle en haut, ne s'imprime pas */
.inv-top {
  position: sticky;
  top: calc(var(--ui-globalbar-height) + var(--ui-contextbar-height));
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.6rem 0.875rem;
  margin-bottom: 1rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
}

.inv-top-id {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.inv-top-number {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.inv-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.inv-top .ui-btn svg {
  width: 15px;
  height: 15px;
}

.inv-back {
  padding-inline: 0.4rem;
}

/* Le document a gauche, le pilotage a droite */
.inv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 1rem;
  align-items: start;
}

.inv-side {
  position: sticky;
  top: calc(var(--ui-globalbar-height) + var(--ui-contextbar-height) + 4rem);
  min-width: 0;
}

/* ---------------------------------------------------------------- feuille */
.inv-sheet {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 20, 18, 0.04), 0 18px 40px -32px rgba(16, 20, 18, 0.5);
  padding: 1.5rem 1.75rem 1.75rem;
  min-width: 0;
}

.inv-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.125rem;
  border-bottom: 2px solid var(--ui-accent);
}

.inv-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.inv-logo-mark {
  background: var(--castrol-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
}

.inv-logo-word {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--castrol-green-dark);
}

.inv-issuer-lines {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  font-size: 0.76rem;
  color: var(--ui-text-muted);
}

.inv-issuer-lines strong {
  font-size: 0.85rem;
  color: var(--ui-text);
}

.inv-doc {
  text-align: end;
  min-width: 220px;
}

.inv-doc-kind {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ui-text-subtle);
}

.inv-doc-number {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0.1rem 0 0.6rem;
}

.inv-doc-meta {
  display: grid;
  gap: 0.18rem;
  margin: 0;
}

.inv-doc-meta > div {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.76rem;
}

.inv-doc-meta dt {
  color: var(--ui-text-subtle);
}

.inv-doc-meta dd {
  margin: 0;
  font-weight: 600;
}

/* Les deux parties du document
 *
 * `.inv-parties` et `.inv-party` ont ete retirees : la fiche presente
 * desormais le client et le vehicule en cellules libellees, sur la meme
 * grille que le bandeau des dates. Voir `.inv-ident` dans _orderdoc.scss.
 * Aucune vue ne les employait plus — les garder aurait laisse deux facons de
 * dessiner le meme bloc, et la suivante aurait choisi au hasard.
 */
.inv-muted {
  color: var(--ui-text-muted);
}

.inv-plate {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  letter-spacing: 0.06em;
}

.inv-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  color: var(--ui-accent-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------- les lignes */
.inv-table-wrap {
  overflow-x: auto;
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.inv-table thead th {
  text-align: start;
  padding: 0.7rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ui-text-subtle);
  border-bottom: 1px solid var(--ui-border);
  white-space: nowrap;
}

.inv-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--ui-border-light);
  vertical-align: middle;
}

.inv-line:hover td {
  background: var(--ui-bg-subtle);
}

.inv-table :is(th, td).inv-c-num {
  width: 36px;
  text-align: center;
  color: var(--ui-text-subtle);
  font-size: 0.72rem;
}

.inv-table :is(th, td).inv-c-who {
  width: 148px;
}

.inv-table :is(th, td).inv-c-qty {
  width: 92px;
  text-align: end;
}

.inv-table :is(th, td).inv-c-unit {
  width: 104px;
}

.inv-table :is(th, td).inv-c-price {
  width: 96px;
  text-align: end;
}

.inv-table :is(th, td).inv-c-disc {
  width: 96px;
  text-align: end;
}

.inv-table :is(th, td).inv-c-total {
  width: 112px;
  text-align: end;
  font-weight: 600;
}

.inv-table :is(th, td).inv-c-act {
  width: 78px;
  text-align: end;
  white-space: nowrap;
}

.inv-c-qty, .inv-c-price, .inv-c-disc, .inv-c-total {
  font-variant-numeric: tabular-nums;
}

.inv-line-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  vertical-align: middle;
  margin-inline-end: 0.55rem;
}

.inv-line-ico svg {
  width: 15px;
  height: 15px;
}

.inv-line-ico.k-svc {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

.inv-line-ico.k-part {
  background: #eef2f6;
  color: #4a6b8a;
}

.inv-line-label {
  vertical-align: middle;
}

.inv-in-pack .inv-c-label {
  padding-inline-start: 2rem;
}

.inv-pack td {
  background: var(--ui-bg-subtle);
  border-top: 1px solid var(--ui-border);
}

.inv-pack-ico {
  width: 17px;
  height: 17px;
  color: var(--castrol-green-dark);
  vertical-align: middle;
}

.inv-pack-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--ui-accent);
  color: #fff;
  margin-inline-end: 0.45rem;
}

.inv-pack-meta {
  font-size: 0.7rem;
  color: var(--ui-text-muted);
  margin-inline-start: 0.5rem;
}

/* Saisie dans la cellule : la ligne se corrige la ou elle se lit */
.inv-cell-input {
  width: 100%;
  max-width: 82px;
  min-height: 32px;
  padding: 0.2rem 0.35rem;
  text-align: end;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  appearance: textfield;
  -moz-appearance: textfield;
}

.inv-cell-input::-webkit-outer-spin-button,
.inv-cell-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.inv-cell-input:hover {
  border-color: var(--ui-border);
  background: var(--ui-bg);
}

.inv-cell-input:focus {
  border-color: var(--ui-accent);
  background: var(--ui-bg);
  outline: 2px solid var(--ui-accent-soft);
}

.inv-cell-unit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
}

.inv-cell-unit > span {
  font-size: 0.7rem;
  color: var(--ui-text-subtle);
}

/* ---- Intervenant et unite d'une ligne ----

   Deux colonnes de lecture, pas de decoration. L'intervenant se change sur
   place, sans bouton ; l'unite ne se change pas du tout — elle vient du
   catalogue et a ete recopiee a l'ajout.

   La distinction prestation / piece passe d'abord par la casse du mot :
   « Vidange » contre « bidon ». Le fond ne fait que confirmer, discretement.
   Deux pastilles de couleur vive de plus par ligne rendraient illisible un
   ordre de douze lignes. */
.inv-who-pick {
  width: 100%;
  max-width: 140px;
  font: inherit;
  font-size: 0.8rem;
  color: inherit;
  padding: 0.18rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.inv-who-pick:hover {
  border-color: var(--ui-border);
  background: var(--ui-bg);
}
.inv-who-pick:focus {
  border-color: var(--ui-accent);
  background: var(--ui-bg);
  outline: 2px solid var(--ui-accent-soft);
}
.inv-who-pick {
  /* Non affecte : la ligne le dit sans crier. */
}
.inv-who-pick:has(option[value=""]:checked) {
  color: var(--ui-text-subtle);
}

.inv-who-name {
  font-size: 0.8rem;
}

.inv-who-none {
  color: var(--ui-text-subtle);
}

.inv-unit-tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.5;
  border-radius: 3px;
  white-space: nowrap;
}
.inv-unit-tag.u-svc {
  color: var(--ui-text);
  background: var(--ui-bg-subtle);
  border: 1px solid var(--ui-border-light);
}
.inv-unit-tag.u-part {
  color: var(--ui-text-subtle);
  background: transparent;
  border: 1px dashed var(--ui-border-light);
}

.inv-c-act form {
  display: inline-block;
}

.inv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ui-text-subtle);
  cursor: pointer;
}

.inv-icon-btn svg {
  width: 15px;
  height: 15px;
}

.inv-icon-btn:hover {
  background: var(--ui-bg-hover);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

.inv-icon-btn.danger:hover {
  background: var(--castrol-red-light);
  color: var(--castrol-red-dark);
  border-color: transparent;
}

/* ------------------------------------------------------------ pied du document */
.inv-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
  gap: 1.5rem;
  padding-top: 1.125rem;
}

.inv-notes h3 {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-text-subtle);
  margin: 0 0 0.25rem;
}

.inv-notes p {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
}

.inv-hint {
  font-size: 0.72rem;
  color: var(--ui-text-muted);
}

.inv-mention {
  font-size: 0.72rem;
  color: var(--ui-text-subtle);
  border-top: 1px dashed var(--ui-border);
  padding-top: 0.5rem;
}

.inv-total-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.32rem 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.inv-total-off {
  color: var(--castrol-red-dark);
}

/* Le reste a encaisser. En gras, parce que c'est la seule ligne du bloc sur
   laquelle il y a un geste a faire — et parce qu'un ordre livre mais non solde
   ne se distingue autrement d'un ordre solde qu'a la lecture des chiffres. */
.inv-total-due {
  color: var(--danger-text);
  font-weight: 600;
}

.inv-total-grand {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--ui-text);
  font-size: 1.05rem;
  font-weight: 700;
}

.inv-totals .inv-hint {
  margin: 0.5rem 0 0;
}

/* Rappel commercial, hors document : il ne s'imprime pas */
.inv-nudge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.inv-nudge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.inv-nudge .ui-btn {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.inv-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ui-text-muted);
}

.inv-empty svg {
  width: 38px;
  height: 38px;
  color: var(--ui-border);
  margin-bottom: 0.5rem;
}

.inv-empty h3 {
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
  color: var(--ui-text);
}

.inv-empty p {
  font-size: 0.82rem;
  margin: 0 auto 0.875rem;
  max-width: 46ch;
}

@media (max-width: 1200px) {
  .inv-layout {
    grid-template-columns: 1fr;
  }
  .inv-side {
    position: static;
  }
}
/* Neuf colonnes ne tiennent pas partout. Sous cette largeur, le tableau
   defile dans son cadre plutot que d'ecraser la designation : « Remplacement
   filtre a air » reduit a deux mots coupes ne se lit plus, et c'est la seule
   colonne dont on ne peut pas deviner le contenu. */
@media (max-width: 1100px) {
  .inv-table {
    min-width: 940px;
  }
}
@media (max-width: 767.98px) {
  .inv-sheet {
    padding: 1.125rem;
  }
  .inv-bottom {
    grid-template-columns: 1fr;
  }
  .inv-doc {
    text-align: start;
    min-width: 0;
  }
  .inv-doc-meta > div {
    justify-content: flex-start;
  }
  .inv-top-actions {
    margin-inline-start: 0;
    width: 100%;
  }
  .inv-top-actions .ui-btn {
    flex: 1;
    justify-content: center;
  }
}
@media (pointer: coarse) {
  .inv-cell-input {
    min-height: 40px;
  }
  .inv-icon-btn {
    width: 44px;
    height: 44px;
  }
}
/* Impression : il ne reste que le document */
@media print {
  .ui-globalbar, .ui-contextbar, .ui-sidebar, .inv-top, .inv-side,
  .mc-toasts, .inv-c-act, .inv-link, .inv-nudge {
    display: none !important;
  }
  .ui-main {
    padding: 0 !important;
  }
  .inv-sheet {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  /* Le choix de l'intervenant s'imprime comme un nom, pas comme un menu. */
  .inv-who-pick, .inv-worker-pick {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
  }
  .inv-line:hover td {
    background: transparent;
  }
  body {
    background: #fff;
  }
  @page {
    margin: 14mm;
  }
}
/* ==========================================================================
   Catalogue en fenetre : packs, prestations, pieces

   Une seule fenetre, trois onglets, des cartes portant une image. Le gerant
   reconnait « vidange » a sa forme avant d'avoir lu le mot, et la selection
   survit au changement d'onglet : un pack, deux prestations et quatre pneus
   partent ensemble, en une validation.
   ========================================================================== */
.cat {
  display: flex;
  flex-direction: column;
}

.cat-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.25rem;
  background: var(--ui-bg);
  border-bottom: 1px solid var(--ui-border-light);
}

.cat-tabs {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  background: var(--ui-bg-subtle);
  border-radius: 8px;
}

.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.cat-tab svg {
  width: 16px;
  height: 16px;
}

.cat-tab:hover {
  background: var(--ui-bg-hover);
  color: var(--ui-text);
}

.cat-tab.is-on {
  background: var(--ui-bg);
  color: var(--castrol-green-dark);
  box-shadow: 0 1px 2px rgba(16, 20, 18, 0.14);
}

.cat-tab.is-empty {
  opacity: 0.45;
}

.cat-tab-n {
  min-width: 20px;
  padding: 0.05rem 0.35rem;
  border-radius: 9px;
  background: var(--ui-bg-hover);
  color: var(--ui-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.cat-tab.is-on .cat-tab-n {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

.cat-searchwrap {
  position: relative;
  flex: 1;
  min-width: 190px;
  margin-inline-start: auto;
}

.cat-searchwrap svg {
  position: absolute;
  inset-inline-start: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--ui-text-subtle);
  pointer-events: none;
}

.cat-search {
  padding-inline-start: 2rem;
}

.cat-pane {
  display: none;
}

.cat-pane.is-on {
  display: block;
}

.cat-group {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-text-subtle);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 0.5rem;
}

.cat-grid-pack {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.cat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 64px;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cat-card-pack {
  align-items: flex-start;
}

.cat-card:hover {
  border-color: var(--ui-accent);
  background: var(--ui-bg-subtle);
}

.cat-card:focus-within {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.cat-card.is-on {
  border-color: var(--ui-accent);
  background: var(--ui-bg-selected);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}

/* La case reste focalisable au clavier, mais c'est la carte qu'on voit */
.cat-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.cat-tile {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.cat-tile svg {
  width: 22px;
  height: 22px;
}

.cat-tile.t-pack {
  background: var(--castrol-green);
  color: #fff;
}

.cat-tile.t-svc {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

.cat-tile.t-part {
  background: #eef2f6;
  color: #4a6b8a;
}

.cat-main {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 1;
}

.cat-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.cat-meta {
  font-size: 0.7rem;
  color: var(--ui-text-muted);
}

/* ==========================================================================
   Historique du prix d'un article de stock

   Une periode par ligne, du plus recent au plus ancien. Les colonnes sont
   fixes : les prix s'alignent sous les prix, ce qui rend la progression
   lisible en descendant du regard — c'est toute la raison d'afficher un
   historique plutot qu'un seul chiffre.
   ========================================================================== */
.sph {
  margin-block: 1rem 0;
  border: 1px solid var(--ui-border-light);
  border-radius: var(--ui-radius-sm, 6px);
  overflow: hidden;
}

.sph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-text-subtle);
  background: var(--ui-bg-subtle);
}
.sph-head::-webkit-details-marker {
  display: none;
}

.sph-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.sph-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sph-row {
  display: grid;
  grid-template-columns: 9.5rem 5rem 4rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.32rem 0.75rem;
  font-size: 0.74rem;
  border-block-start: 1px solid var(--ui-border-light);
}

.sph-row.is-now {
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 0 var(--ui-accent);
}

.sph-when {
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-muted);
  white-space: nowrap;
}

.sph-arrow {
  opacity: 0.5;
  margin-inline: 0.15rem;
}

.sph-now {
  font-weight: 700;
  color: var(--castrol-green-dark);
}

.sph-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.sph-delta {
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--ui-text-subtle);
}

.sph-delta.up {
  color: var(--castrol-red-dark);
}

.sph-delta.down {
  color: var(--castrol-green-dark);
}

.sph-who {
  font-size: 0.68rem;
  color: var(--ui-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .sph-row {
    grid-template-columns: 1fr auto auto;
    row-gap: 0.1rem;
  }
  .sph-who {
    grid-column: 1/-1;
  }
}
/* ------------------------------------- ce qu'il en reste en rayon
 *
 *  CE QUE CELA CORRIGE
 *
 *  L'onglet « Pieces » listait le referentiel du reseau sans jamais dire s'il
 *  en restait dans CET atelier. Le gerant posait une piece sur un ordre, la
 *  livraison echouait faute de stock, et il l'apprenait au moment de rendre la
 *  voiture au client.
 *
 *  TROIS ETATS, ET NON DEUX
 *
 *  « non suivi » n'est PAS « epuise » : la piece existe au catalogue mais n'a
 *  jamais ete entree en stock ici. La commander est normal ; croire qu'elle
 *  manque ne l'est pas. Les confondre ferait renoncer a des ventes.
 */
.cat-stock {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--castrol-green-dark);
}

.cat-stock.is-low {
  color: var(--castrol-gold-dark);
}

.cat-stock.is-out {
  color: var(--castrol-red-dark);
}

.cat-stock.is-none {
  font-weight: 500;
  font-style: italic;
  color: var(--ui-text-subtle);
}

.cat-card.is-out {
  border-style: dashed;
  background: var(--ui-bg-subtle);
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}

.cat-chip {
  font-size: 0.66rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--ui-border-light);
  background: var(--ui-bg-subtle);
  color: var(--ui-text-muted);
}

.cat-chip.c-svc {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
  border-color: transparent;
}

.cat-chip.c-part {
  background: #eef2f6;
  color: #4a6b8a;
  border-color: transparent;
}

.cat-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cat-price strong {
  font-size: 0.95rem;
}

.cat-price s {
  font-size: 0.68rem;
  color: var(--ui-text-subtle);
}

.cat-save {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--castrol-red-dark);
  background: var(--castrol-red-light);
  padding: 0.02rem 0.28rem;
  border-radius: 3px;
}

/* La quantite n'apparait que sur ce qui est retenu */
.cat-qty {
  display: none;
  align-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  overflow: hidden;
}

.cat-card.is-on .cat-qty {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 0.35rem;
}

.cat-step {
  width: 30px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cat-step:hover {
  background: var(--ui-bg-hover);
  color: var(--ui-text);
}

.cat-qty-input {
  width: 40px;
  height: 32px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.cat-qty-input::-webkit-outer-spin-button,
.cat-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cat-mark {
  position: absolute;
  top: 0.35rem;
  inset-inline-start: 0.35rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ui-accent);
  color: #fff;
  box-shadow: 0 0 0 2px var(--ui-bg-selected);
}

.cat-mark svg {
  width: 11px;
  height: 11px;
}

.cat-card.is-on .cat-mark {
  display: inline-flex;
}

/* ============ Catalogue partage entre ateliers ============

   Volontairement distinct des cartes du catalogue d'ordre (.cat-*) : celles-la
   se cochent, celles-ci se lisent puis se reprennent. Un meme dessin pour deux
   gestes differents ferait cliquer au mauvais endroit.

   Ce qui vient d'ailleurs se lit en gris : le nom de l'atelier d'origine, et
   surtout SON prix — une indication, jamais une consigne. Le gerant pose le
   sien apres. */
.shr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 0.75rem;
}

.shr-grid-wide {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.shr-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  /* Deja proposee : la carte s'efface sans disparaitre. Elle reste lisible
     — savoir qu'un autre atelier propose la meme chose a une valeur. */
}
.shr-card.is-had {
  background: var(--ui-bg-subtle);
  opacity: 0.72;
}

.shr-top {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.shr-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}
.shr-ico svg {
  width: 19px;
  height: 19px;
}

.shr-id {
  min-width: 0;
  flex: 1;
}

.shr-id h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.shr-from {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  color: var(--ui-text-muted);
}

.shr-desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ui-text-muted);
}

.shr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
}
.shr-facts dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-subtle);
}
.shr-facts dd {
  margin: 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.shr-hint {
  color: var(--ui-text-subtle);
  font-size: 0.78rem;
  margin: 0;
}

/* Composition d'un pack partage : ce qui suivra, et ce qui manquera. */
.shr-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.shr-lines li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.78rem;
  padding: 0.12rem 0;
}
.shr-lines li.is-missing {
  color: var(--ui-text-subtle);
  text-decoration: line-through;
}

.shr-qty {
  flex: none;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-muted);
  font-size: 0.72rem;
}

.shr-tag {
  flex: none;
  padding: 0 0.3rem;
  font-size: 0.65rem;
  text-decoration: none;
  color: #8a5a06;
  background: #fdf4e3;
  border-radius: 3px;
}

.shr-foot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.shr-warn {
  margin: 0;
  font-size: 0.72rem;
  color: #8a5a06;
  line-height: 1.4;
}

.cat-none {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ui-text-muted);
}

.cat-summary {
  align-self: center;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

@media (pointer: coarse) {
  .cat-step {
    width: 40px;
    height: 40px;
  }
  .cat-qty-input {
    height: 40px;
  }
  .cat-tab {
    min-height: 44px;
  }
}
/* ==========================================================================
   Entete de tableau fixe

   Une liste de deux cents ordres se lit en defilant ; sans entete fixe, on
   remonte pour savoir quelle colonne on regarde. C'est le comportement des
   consoles de gestion, et il ne coute qu'une ligne.
   ========================================================================== */
/* CE QUI ETAIT FACULTATIF EST DEVENU LE DEFAUT

   La regle ci-dessous demandait la classe `.ui-table-sticky`. Trois vues sur
   quarante-six la portaient.

   Or la ligne d'en dessous borne le defilement de TOUS les tableaux poses dans
   un panneau, a 62vh. Les quarante-trois autres se retrouvaient donc dans une
   boite qui defile, avec un en-tete qui s'en va : la pire des deux situations,
   pire que pas de boite du tout. Le document d'architecture, lui, annonce
   depuis le debut des « en-tetes collants au defilement ».

   La condition n'est plus une classe a ne pas oublier mais le fait d'etre dans
   un conteneur borne — c'est-a-dire exactement les cas ou coller sert a
   quelque chose. Hors panneau, rien ne colle : un en-tete fixe au ras de la
   fenetre passerait sous la barre globale, qui est posee plus haut. */
.ui-panel .ui-table-wrap thead th,
.ui-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ui-bg-subtle);
  box-shadow: inset 0 -1px 0 var(--ui-border);
}

/* Le conteneur doit borner le defilement pour que l'entete ait a quoi se coller. */
.ui-panel .ui-table-wrap {
  max-height: 62vh;
  overflow-y: auto;
}

@media (max-width: 767.98px) {
  .ui-panel .ui-table-wrap {
    max-height: none;
  }
}
/* ==========================================================================
   Ecran de travail de l'atelier

   Une barre de compteurs, puis la liste des vehicules presents. Les nombres
   ne sont pas des vignettes decoratives : chacun est le filtre de la liste
   qu'il compte, et chaque ligne porte l'action suivante du vehicule, pour
   que l'etape se pose sans ouvrir l'ordre.
   ========================================================================== */
.wb-bar {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  overflow: hidden;
}

.wb-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.9rem;
  color: inherit;
  text-decoration: none;
  min-width: 96px;
}

a.wb-stat:hover {
  background: var(--ui-bg-subtle);
  color: inherit;
}

.wb-stat-value {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.wb-stat-value small {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ui-text-muted);
}

.wb-stat-value i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.wb-stat-label {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-text-subtle);
  white-space: nowrap;
}

.wb-sep {
  width: 1px;
  background: var(--ui-border-light);
  margin: 0.4rem 0;
}

/* Liste posee dans une barre : compacte a la souris, pleine cible au doigt */
.ui-select-inline {
  width: auto;
  min-height: 28px;
  font-size: 0.8125rem;
}

@media (pointer: coarse) {
  .ui-select-inline {
    min-height: 44px;
  }
}
/* Le compte d'un filtre se lit comme un compte, pas comme son intitule */
.mc-segment-n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.55;
  margin-inline-start: 0.15rem;
}

/* Les memes teintes que les pastilles d'etat */
.s-open {
  background: var(--castrol-gold, #c9a227);
}

.s-progress {
  background: var(--ui-accent);
}

.s-ready {
  background: #1c5fa8;
}

.wb-flag {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  padding: 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.wb-flag.is-warn {
  background: #fdf3e2;
  color: var(--castrol-gold-dark);
}

.wb-flag.is-danger {
  background: var(--castrol-red-light);
  color: var(--castrol-red-dark);
}

.wb-flag:hover {
  text-decoration: underline;
}

/* La liste de travail passe avant tout le reste.
   Le panneau lateral ne s'installe qu'a partir du moment ou il reste
   reellement la place d'une table a sept colonnes a cote de lui : sous
   1400 px, le rail plus l'aside ramenaient la table a 556 px et le
   matricule se coupait en deux. */
.wb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

@media (min-width: 1400px) {
  .wb-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
.wb-ref {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.wb-ref:hover .wb-plate {
  color: var(--ui-accent-dark);
}

.wb-ref .ui-context-meta {
  white-space: nowrap;
}

.wb-plate {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.wb-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wb-table th.wb-num {
  text-align: end;
}

/* Les actions s'alignent sur une colonne fixe : « Pret » et « Demarrer » se
   decalaient l'un par rapport a l'autre, et l'oeil devait les chercher. */
.wb-table :is(th, td).col-actions {
  width: 108px;
  text-align: end;
}

.wb-table td.col-actions .ui-btn {
  width: 100%;
  justify-content: center;
}

/* Un vehicule qui dort dans l'atelier depuis la veille se signale */
.wb-late {
  font-weight: 700;
  color: var(--castrol-red-dark);
}

.wb-table tr.is-late td:first-child {
  box-shadow: inset 3px 0 0 var(--castrol-red);
}

.wb-stock td {
  padding-block: 0.45rem;
}

.wb-stock .ui-context-meta {
  display: block;
}

/* « tr.is-out » a ete retire d'ici.
   Le tableau de bord peignait ses ruptures avec sa propre regle, alors que
   l'ecran Stock en avait une autre : deux rouges differents pour le meme fait,
   selon l'ecran ou l'on se trouvait. Les deux emploient maintenant
   « tr.is-low », defini une fois dans _shell.scss avec le tableau. */
@media (max-width: 575.98px) {
  .wb-flag {
    margin-inline-start: 0;
    width: 100%;
    padding: 0.4rem 0.9rem;
  }
  .wb-table :is(th, td).col-actions {
    width: 92px;
  }
}
/* ==========================================================================
   Reception : la barre a matricule, puis la fenetre

   La voiture est devant la porte et son matricule est ecrit dessus. Une page
   qui se charge, defile et se quitte coute plus que le geste qu'elle sert :
   la saisie vit donc dans la barre de contexte, sur tous les ecrans, et tout
   le reste tient dans une fenetre sans defilement.
   ========================================================================== */
.ui-plate {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 30px;
  padding: 0 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-plate svg {
  width: 15px;
  height: 15px;
  color: var(--ui-text-subtle);
  flex-shrink: 0;
}

/* La chasse fixe : un matricule se relit caractere par caractere, et le
   « 0 » doit se distinguer du « O » sans effort. */
.ui-plate input {
  width: 190px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  letter-spacing: 0.03em;
  outline: none;
  min-width: 0;
}

/* L'invite, elle, se lit comme une phrase : la chasse fixe la rendrait
   illisible et lui donnerait l'air d'une valeur deja saisie. */
.ui-plate input::placeholder {
  font-family: inherit;
  letter-spacing: normal;
}

.ui-plate:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.ui-plate kbd {
  font-size: 0.6rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  color: var(--ui-text-subtle);
  background: var(--ui-bg-subtle);
}

@media (max-width: 991.98px) {
  .ui-plate input {
    width: 120px;
  }
  .ui-plate kbd {
    display: none;
  }
}
/* ---------------------------------------------------------- la fenetre */
.rcp {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* --- Le resume de validation ne se montre que s'il a quelque chose a dire
   ASP.NET rend TOUJOURS le bloc du resume : vide, il porte la classe
   « validation-summary-valid » et une liste dont le seul element est masque.
   Avec une classe d'alerte dessus, cela donnait un cadre orange vide en tete
   de chaque fenetre — un signal d'erreur permanent qui ne signalait rien, et
   qu'on finit par ne plus voir le jour ou il compte.

   Meme raison pour les messages de champ, qui reservaient leur place a vide. */
/* =======================================================================
   Composition d'une facture de comptoir, et d'un bordereau de transfert

   L'ECRAN RESSEMBLE AU DOCUMENT

   Emetteur en haut a gauche, type de piece a droite, parties au-dessous,
   lignes au milieu, totaux calés a droite. L'agent compose ce qu'il va
   remettre au client, il ne remplit pas un formulaire abstrait — et la
   relecture avant validation se fait dans la meme disposition que la
   relecture apres impression.
   ======================================================================= */
.fct {
  display: block;
}

.fct-doc {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  overflow: hidden;
  /* Une feuille posee sur le plan de travail. L'ombre reste discrete :
     ce n'est pas un objet qui flotte, c'est un document. */
  box-shadow: 0 1px 2px rgba(16, 20, 18, 0.05);
}

/* --- En-tete ---------------------------------------------------------- */
.fct-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  border-block-end: 2px solid var(--ui-text);
}

.fct-emetteur {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fct-logo {
  display: block;
  margin-block-end: 0.25rem;
}
.fct-logo img {
  height: 22px;
  width: auto;
  display: block;
}

.fct-emetteur-nom {
  font-weight: 600;
  font-size: 0.9rem;
}

.fct-emetteur-meta,
.fct-num,
.fct-date {
  font-size: 0.76rem;
  color: var(--ui-text-subtle);
}

.fct-titre {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: end;
}

.fct-type {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* --- Parties ---------------------------------------------------------- */
.fct-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-block-end: 1px solid var(--ui-border);
}

.fct-bloc-titre {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}

/* --- Ajout d'une ligne ------------------------------------------------- */
.fct-lignes {
  padding: 1.25rem 1.5rem;
}

.fct-ajout {
  margin-block-end: 1rem;
}

.fct-pick {
  position: relative;
}
.fct-pick > svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.65rem;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--ui-text-subtle);
  pointer-events: none;
}
.fct-pick input {
  padding-inline-start: 2.1rem;
}

.fct-ajout-hint {
  display: block;
  margin-block-start: 0.3rem;
  font-size: 0.72rem;
  color: var(--ui-text-subtle);
}

.fct-suggestions {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  z-index: 40;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(16, 20, 18, 0.3);
}
.fct-suggestions[hidden] {
  display: none;
}

.fct-suggestion {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  /* Le survol et la selection au clavier partagent le meme aspect : deux
     marques differentes feraient croire a deux choix en cours. */
}
.fct-suggestion:hover, .fct-suggestion.is-on {
  background: var(--ui-bg-subtle);
}

.fct-sug-nom {
  font-weight: 600;
  font-size: 0.84rem;
}

.fct-sug-meta {
  font-size: 0.72rem;
  color: var(--ui-text-subtle);
}

/* --- Table des lignes -------------------------------------------------- */
.fct-table {
  width: 100%;
  border-collapse: collapse;
}
.fct-table th {
  padding: 0.4rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
  text-align: start;
  border-block-end: 1px solid var(--ui-text);
}
.fct-table td {
  padding: 0.5rem;
  border-block-end: 1px solid var(--ui-border-light);
  vertical-align: middle;
}

/* --- Popup d'ajout d'un produit ---------------------------------------
   Une ligne de relecture, disposee comme elle paraitra sur le document. On
   relit ce qu'on ajoute avant de l'ajouter — c'est ce qui evite la facture
   corrigee au stylo devant le client. */
.fct-modal {
  width: min(640px, 100vw - 2rem);
  padding: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 24px 48px -12px rgba(16, 20, 18, 0.28);
}
.fct-modal::backdrop {
  background: rgba(16, 20, 18, 0.45);
}

.fct-modal-in {
  display: block;
}

.fct-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-block-end: 1px solid var(--ui-border);
}
.fct-modal-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.fct-modal-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text-subtle);
  cursor: pointer;
}
.fct-modal-x svg {
  width: 16px;
  height: 16px;
}
.fct-modal-x:hover {
  background: var(--ui-bg-subtle);
  color: var(--ui-text);
}
.fct-modal-x:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.fct-modal-corps {
  padding: 1.1rem;
}

.fct-modal-table {
  width: 100%;
  margin-block-start: 1rem;
  border-collapse: collapse;
}
.fct-modal-table th {
  padding: 0.35rem 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
  text-align: start;
  border-block-end: 1px solid var(--ui-border);
}
.fct-modal-table td {
  padding: 0.45rem 0.4rem;
  vertical-align: middle;
  border-block-end: 1px solid var(--ui-border-light);
}
.fct-modal-table {
  /* Les colonnes chiffrees se calent a droite, comme sur la facture. */
}
.fct-modal-table th:not(:first-child), .fct-modal-table td:not(:first-child) {
  text-align: end;
}
.fct-modal-table input {
  text-align: end;
}

.fct-modal-nom {
  font-weight: 600;
  font-size: 0.84rem;
}

.fct-modal-unite {
  color: var(--ui-text-subtle);
  font-size: 0.8rem;
}

.fct-modal-total {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.fct-modal-dispo {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--ui-text-subtle);
}

.fct-modal-pied {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  border-block-start: 1px solid var(--ui-border);
  background: var(--ui-bg-subtle);
}

/* =======================================================================
   Barre d'actions de l'ordre, ancree sous la navigation

   POURQUOI ANCREE

   Un ordre se compose en defilant : on ajoute des lignes, on relit le
   detail, on corrige une quantite en bas de page. Une barre restee en tete
   obligeait a remonter pour chaque geste.

   POURQUOI TROIS FAMILLES DE COULEUR, ET PAS UNE PAR BOUTON

   Un ecran ou chaque bouton porte sa teinte ne hierarchise rien : tout crie
   a la meme hauteur. Ici, une seule action est verte — celle qui fait
   avancer la voiture. Une est pleine — celle qu'on repete le plus. Le reste
   est sobre, et le rouge est reserve a ce qui ne se defait pas.
   ======================================================================= */
.oab {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  margin-block-end: 1rem;
  background: var(--ui-bg);
  border-block-end: 1px solid var(--ui-border);
  /* L'ombre n'apparait qu'une fois la barre decollee du haut de page :
     posee en permanence, elle ferait flotter un element qui ne flotte pas. */
  box-shadow: 0 1px 0 rgba(16, 20, 18, 0.04);
}

.oab-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.25rem;
}

.oab-id {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.oab-number {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.oab-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--ui-text-subtle);
}
.oab-back svg {
  width: 17px;
  height: 17px;
}
.oab-back:hover {
  background: var(--ui-bg-subtle);
  color: var(--ui-text);
}
.oab-back:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.oab-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.oab-actions form {
  display: contents;
}

.oab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ui-text-2);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.oab-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.oab-btn:hover {
  background: var(--ui-bg-subtle);
  color: var(--ui-text);
}
.oab-btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

/* Faire avancer la voiture : la seule action verte de la barre. */
.oab-btn-go {
  color: #fff;
  background: var(--ui-accent, #00843d);
}
.oab-btn-go:hover {
  background: var(--ui-accent-dark, #04301d);
  color: #fff;
}

/* Ajouter une prestation : le geste repete, donc plein mais neutre. */
.oab-btn-primary {
  color: var(--ui-text);
  background: var(--ui-bg-subtle);
  border-color: var(--ui-border);
}
.oab-btn-primary:hover {
  background: var(--ui-bg);
  border-color: var(--ui-border-strong, var(--ui-text-subtle));
}

/* Une offre est un cadeau : l'ambre le dit sans crier. */
.oab-btn-offer {
  color: #8a5a06;
  background: #fdf4e3;
  border-color: #f0dcb4;
}
.oab-btn-offer:hover {
  background: #fbecd0;
  color: #6d4705;
}

.oab-btn-doc {
  color: var(--ui-text-2);
  border-color: var(--ui-border);
}

.oab-btn-danger {
  padding: 0 0.55rem;
  color: var(--castrol-red, #c8102e);
}
.oab-btn-danger:hover {
  background: var(--castrol-red-light, #fdeaec);
}

.oab-sep {
  width: 1px;
  align-self: stretch;
  margin-inline: 0.3rem;
  background: var(--ui-border);
}

/* Qui prend le vehicule : un choix, pas un formulaire. */
.inv-worker-pick {
  font: inherit;
  font-size: 0.82rem;
  color: inherit;
  padding: 0.1rem 0.2rem;
  border: 0;
  border-block-end: 1px dashed var(--ui-border-strong, var(--ui-text-subtle));
  background: transparent;
  cursor: pointer;
}
.inv-worker-pick:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .oab-in {
    padding-inline: 0;
  }
  .oab-btn {
    padding: 0 0.5rem;
  }
  /* Sur cette largeur, les libelles s'effacent : les icones suffisent, et
     la barre reste sur une ligne au lieu d'en prendre trois. */
  .oab-btn-doc, .oab-btn:not(.oab-btn-go):not(.oab-btn-primary) {
    font-size: 0;
    gap: 0;
  }
  .oab-btn-doc svg, .oab-btn:not(.oab-btn-go):not(.oab-btn-primary) svg {
    width: 17px;
    height: 17px;
  }
}
@media print {
  .oab {
    display: none !important;
  }
}
/* --- Ouverture d'un ordre : la recherche puis la fiche ------------------ */
.nord-chercher {
  padding: 1.125rem;
}

.nord-form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.nord-champ {
  flex: 1 1 22rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nord-champ > label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}

.nord-saisie {
  position: relative;
}
.nord-saisie svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.65rem;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--ui-text-subtle);
  pointer-events: none;
}
.nord-saisie {
  /* Le matricule se lit de loin : c'est la seule saisie de cet ecran qu'un
     agent tape sans regarder l'ecran. */
}
.nord-saisie input {
  padding-inline-start: 2.2rem;
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  min-height: 44px;
}

.nord-corps {
  padding: 1.125rem;
}

/* Le bouton d'action du menu : le seul qui appelle, la ou tout le reste
   reste sobre. */
.ui-nav-item.ui-nav-cta {
  margin: 0.35rem 0.5rem 0.6rem;
  border-radius: 7px;
  background: var(--ui-accent, #00843d);
  color: #fff;
}
.ui-nav-item.ui-nav-cta .nav-icon {
  color: #fff;
}
.ui-nav-item.ui-nav-cta:hover {
  background: var(--ui-accent-dark, #04301d);
  color: #fff;
}
.ui-nav-item.ui-nav-cta {
  /* Actif, il ne change pas de couleur : il EST deja la couleur d'action.
     Un liseré suffit a dire ou l'on se trouve. */
}
.ui-nav-item.ui-nav-cta.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* --- Fiche d'une facture : le document a gauche, le reglement a droite -- */
.vt-fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 1.25rem;
  align-items: start;
}

.vt-client {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.125rem;
  border-block-end: 1px solid var(--ui-border);
}
.vt-client div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.vt-c-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}

.vt-totaux {
  padding: 0.9rem 1.125rem;
  border-block-start: 1px solid var(--ui-border);
}
.vt-totaux > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.2rem;
  font-size: 0.85rem;
  color: var(--ui-text-2);
}
.vt-totaux > div span:last-child {
  font-variant-numeric: tabular-nums;
}

.vt-t-final {
  margin-block-start: 0.35rem;
  padding-block-start: 0.45rem;
  border-block-start: 1px solid var(--ui-text);
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--ui-text) !important;
}

/* --- Le solde ---------------------------------------------------------- */
.vt-solde {
  padding: 1.125rem;
}

/* Une jauge dit d'un coup d'oeil ce qu'un chiffre demande de calculer. */
.vt-jauge {
  height: 6px;
  border-radius: 3px;
  background: var(--ui-border);
  overflow: hidden;
}
.vt-jauge span {
  display: block;
  height: 100%;
  background: var(--ui-warn, #b8730a);
  transition: width 0.2s ease-out;
}
.vt-jauge span.is-ok {
  background: var(--ui-accent, #00843d);
}

.vt-solde-chiffres {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.7rem;
}
.vt-solde-chiffres div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.vt-solde-chiffres strong {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.vt-solde-chiffres {
  /* Ce qui reste du se distingue : c'est le seul chiffre qui appelle une
     action. */
}
.vt-solde-chiffres .is-du strong {
  color: var(--ui-warn, #b8730a);
}

.vt-encaisser {
  padding: 1.125rem;
  border-block-start: 1px solid var(--ui-border);
  background: var(--ui-bg-subtle);
}

/* --- L'echeancier ------------------------------------------------------ */
.vt-versements {
  padding: 1.125rem;
  border-block-start: 1px solid var(--ui-border);
}
.vt-versements h3 {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}

.vt-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vt-liste li {
  position: relative;
  padding: 0.55rem 2rem 0.55rem 0.8rem;
  border-inline-start: 2px solid var(--ui-border);
  /* Un filet continu fait lire une SUITE de versements, et non des
     lignes sans rapport. */
}
.vt-liste li:not(:last-child) {
  padding-block-end: 0.8rem;
}

.vt-v-tete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vt-v-tete strong {
  font-variant-numeric: tabular-nums;
}

.vt-v-retirer {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ui-text-subtle);
  cursor: pointer;
}
.vt-v-retirer svg {
  width: 13px;
  height: 13px;
}
.vt-v-retirer:hover {
  background: var(--castrol-red-light, #fdeaec);
  color: var(--castrol-red, #c8102e);
}
.vt-v-retirer:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

@media (max-width: 1100px) {
  .vt-fiche {
    grid-template-columns: 1fr;
  }
}
/* --- Journal des ventes : filtres et pagination ------------------------ */
.vt-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-block-end: 1px solid var(--ui-border);
}

.vt-f-champ {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.vt-f-champ label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ui-text-subtle);
}

.vt-f-large {
  flex: 1 1 16rem;
}

.vt-f-actions {
  display: flex;
  gap: 0.4rem;
  margin-inline-start: auto;
}

.vt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.1rem;
  border-block-start: 1px solid var(--ui-border);
}

.vt-p-compte,
.vt-p-page {
  font-size: 0.8rem;
  color: var(--ui-text-subtle);
  font-variant-numeric: tabular-nums;
}

.vt-p-boutons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Un lien de page inactif : visible, mais inerte. Le masquer ferait sauter la
   barre de pagination d'une page a l'autre. */
.ui-btn.is-off {
  opacity: 0.4;
  pointer-events: none;
}

.fct-c-qte, .fct-c-pu, .fct-c-tot {
  text-align: end;
  width: 6.5rem;
}

.fct-c-uni {
  width: 5rem;
  color: var(--ui-text-subtle);
  font-size: 0.8rem;
}

.fct-c-qte {
  width: 7rem;
}

.fct-c-act {
  width: 2.5rem;
  text-align: center;
}

.fct-c-qte input, .fct-c-pu input {
  text-align: end;
}

.fct-des-nom {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
}

.fct-des-meta,
.fct-dispo {
  display: block;
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 0.7rem;
  color: var(--ui-text-subtle);
}

.fct-dispo {
  font-family: inherit;
  margin-block-start: 0.15rem;
}

.fct-c-tot {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Une ligne deja presente qu'on incremente : un bref eclat, sinon rien ne
   distingue « ajoute » de « rien ne s'est passe ». */
.fct-ligne.is-flash {
  animation: fct-flash 0.6s ease-out;
}

@keyframes fct-flash {
  from {
    background: var(--ui-accent-soft, #e6f4ec);
  }
  to {
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fct-ligne.is-flash {
    animation: none;
    background: var(--ui-bg-subtle);
  }
}
.fct-retirer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ui-text-subtle);
  cursor: pointer;
}
.fct-retirer svg {
  width: 15px;
  height: 15px;
}
.fct-retirer:hover {
  background: var(--castrol-red-light, #fdeaec);
  color: var(--castrol-red, #c8102e);
}
.fct-retirer:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 1px;
}

.fct-vide {
  padding: 2.25rem 1rem !important;
  text-align: center;
  font-size: 0.84rem;
  color: var(--ui-text-subtle);
  border-block-end: 0 !important;
}

/* --- Totaux ------------------------------------------------------------ */
.fct-pied {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.5rem 1.5rem;
}

.fct-totaux {
  width: min(320px, 100%);
}

.fct-t-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.25rem;
  font-size: 0.84rem;
  color: var(--ui-text-2);
}
.fct-t-ligne span:last-child {
  font-variant-numeric: tabular-nums;
}

.fct-t-final {
  margin-block-start: 0.4rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--ui-text);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ui-text);
}

/* ---------------------------- l'ajout a une facture existante
 *
 *  Les trois classes ci-dessous n'existent que sur l'ecran d'ajout : la vente
 *  neuve n'a ni lignes acquises, ni client fige.
 */
.fct-bloc-txt {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

.fct-acquis {
  background: var(--ui-bg-subtle);
  color: var(--ui-text-muted);
}
.fct-acquis td {
  padding-block: 0.45rem;
}
.fct-acquis .fct-des-nom {
  font-weight: 500;
}

.fct-deja {
  display: inline-block;
  margin-inline-start: 0.35rem;
  padding: 0.02rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--ui-border-light);
  color: var(--ui-text-subtle);
}

.fct-t-marge {
  margin-block-start: 0.6rem;
  font-size: 0.72rem;
  color: var(--ui-text-subtle);
  text-align: end;
}
.fct-t-marge strong {
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-2);
}

/* --- Actions ----------------------------------------------------------- */
.fct-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-block-start: 1rem;
}

@media (max-width: 860px) {
  .fct-parties {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .fct-head {
    flex-direction: column;
  }
  .fct-titre {
    align-items: flex-start;
    text-align: start;
  }
  .fct-c-pu {
    display: none;
  }
  .fct-lignes, .fct-parties, .fct-head {
    padding-inline: 1rem;
  }
}
.validation-summary-valid {
  display: none !important;
}

.field-validation-valid {
  display: none !important;
}

/* --- Ce qui manque pour ouvrir l'ordre ---------------------------------
   Un recapitulatif nomme, pas un message unique. Chaque ligne renvoie a son
   champ : l'agent clique et le curseur y est.

   Il remplace un bandeau qui disait « Le matricule est obligatoire » puis,
   apres correction et renvoi, « Le kilometrage est demande » — deux
   allers-retours pour deux oublis visibles des le depart, avec un client qui
   attend au comptoir. */
.rcp-problems {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ui-danger, #b3261e);
  border-inline-start-width: 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ui-danger, #b3261e) 6%, transparent);
}
.rcp-problems.is-hidden {
  display: none;
}
.rcp-problems:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.rcp-problems-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ui-danger, #b3261e);
}
.rcp-problems-head svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rcp-problems-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.rcp-problems-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-block: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ui-text-2);
}
.rcp-problems-list a {
  font-weight: 600;
  color: var(--ui-danger, #b3261e);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* La cible reste confortable au doigt sur la tablette du comptoir. */
  padding-block: 0.15rem;
}

/* Le champ fautif porte le defaut, pas seulement le recapitulatif : l'agent
   qui defile doit le retrouver sans remonter. */
.rcp [aria-invalid=true] {
  border-color: var(--ui-danger, #b3261e);
  box-shadow: inset 0 -2px 0 var(--ui-danger, #b3261e);
}

.rcp-err {
  display: block;
  margin-block-start: 0.2rem;
  font-size: 0.75rem;
  color: var(--ui-danger, #b3261e);
}
.rcp-err:empty {
  display: none;
}

/* « requis » plutot qu'un asterisque : le signe suppose une legende que
   personne ne lit, le mot se comprend seul. */
.rcp-req {
  margin-inline-start: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-danger, #b3261e);
}

.rcp-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.rcp-plate {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
  border: 2px solid var(--ui-text);
  border-radius: 6px;
  background: var(--ui-bg-subtle);
  white-space: nowrap;
}

.rcp-newplate {
  flex: 1;
  min-width: 220px;
}

.rcp-newplate label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.rcp-plate-input {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  height: 48px;
  text-transform: uppercase;
}

.rcp-known {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.rcp-vehicle {
  font-size: 0.95rem;
  font-weight: 600;
}

.rcp-owner {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.rcp-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--ui-text-muted);
}

.rcp-stats strong {
  color: var(--ui-text);
  font-size: 0.9rem;
}

.rcp-alert {
  margin: 0;
}

.rcp-km {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 280px;
}

.rcp-km label {
  font-size: 0.78rem;
  font-weight: 600;
}

.rcp-km .hint {
  font-weight: 400;
  color: var(--ui-text-subtle);
}

/* Un bloc qui se replie quand il n'a rien a demander */
/* Un filet dans la barre d'actions : ce qui suit ne se defait pas. Le
   separateur fait hesiter d'un dixieme de seconde, ce qui suffit. */
.inv-top-sep {
  width: 1px;
  align-self: stretch;
  margin-inline: 0.35rem;
  background: var(--ui-border);
}

.rcp-block {
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
}

.rcp-block > summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0.875rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.rcp-block > summary::-webkit-details-marker {
  display: none;
}

.rcp-block > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline-start: auto;
  border-right: 2px solid var(--ui-text-subtle);
  border-bottom: 2px solid var(--ui-text-subtle);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.rcp-block[open] > summary::after {
  transform: rotate(-135deg);
}

.rcp-block[open] > summary {
  border-bottom: 1px solid var(--ui-border-light);
}

.rcp-block .mc-field-row {
  padding: 0.875rem;
}

/* Raccourcis du comptoir */
.rcp-quick {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rcp-quick-label {
  font-size: 0.78rem;
  font-weight: 600;
}

.rcp-quick-label .hint {
  font-weight: 400;
  color: var(--ui-text-subtle);
}

.rcp-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.4rem;
}

.rcp-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-bg);
  cursor: pointer;
}

.rcp-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.rcp-chip:hover {
  border-color: var(--ui-accent);
}

.rcp-chip:focus-within {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.rcp-chip.is-on {
  border-color: var(--ui-accent);
  background: var(--ui-bg-selected);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}

/* CE QUE LE CLIENT A DEMANDE EN RESERVANT

   Ces prestations arrivent cochees. Le point les distingue de celles que
   l'agent ajoute au comptoir : sans lui, une fois tout coche, plus rien ne
   dit ce qui venait du rendez-vous — et l'agent qui en decoche une ne sait
   pas qu'il retire une promesse faite en ligne. */
.rcp-chip-rdv {
  color: var(--ui-accent);
  font-weight: 700;
  margin-inline-start: 0.2rem;
}

/* Le trait discontinu dit « attendu » avant meme la coche : il reste visible
   si l'agent decoche, la ou la couleur de selection, elle, disparait. */
.rcp-chip.is-booked {
  border-style: dashed;
}

.rcp-chip.is-booked.is-on {
  border-style: solid;
}

.rcp-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
  flex-shrink: 0;
}

.rcp-chip-ico svg {
  width: 16px;
  height: 16px;
}

.rcp-chip-pack .rcp-chip-ico {
  background: var(--castrol-green);
  color: #fff;
}

.rcp-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.rcp-chip-name {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.rcp-chip-price {
  font-size: 0.7rem;
  color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums;
}

.rcp-total {
  align-self: center;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

/* Plusieurs vehicules repondent */
.rcp-matches {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rcp-match {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-bg);
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.rcp-match:hover {
  border-color: var(--ui-accent);
  background: var(--ui-bg-subtle);
}

.rcp-match-plate {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rcp-match-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.rcp-match-car {
  font-size: 0.82rem;
  font-weight: 600;
}

.rcp-entry {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rcp-entry label {
  font-size: 0.82rem;
  font-weight: 600;
}

/* ==========================================================================
   Couleurs de carrosserie
   Le nom seul se confond a l'oral ; la pastille tranche en un regard.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Liste deroulante enrichie

   La liste native ne sait afficher que du texte, et « gris anthracite » ne se
   distingue pas d'« argent » sans voir la teinte. Celle-ci porte une pastille
   par entree et se filtre a la frappe — trente marques et cent quarante
   modeles ne se parcourent pas a la molette.
   -------------------------------------------------------------------------- */
.pick {
  position: relative;
}

.pick-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 34px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-align: start;
  cursor: pointer;
}

.pick-btn:hover {
  border-color: var(--ui-text-subtle);
}

.pick-btn:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

.pick.is-open .pick-btn {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.pick-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick-label.is-placeholder {
  color: var(--ui-text-subtle);
}

.pick-chevron {
  width: 15px;
  height: 15px;
  color: var(--ui-text-subtle);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.pick.is-open .pick-chevron {
  transform: rotate(180deg);
}

/* Place en coordonnees d'ecran : le corps d'une fenetre defile, un menu
   en flux serait coupe par son bord. */
.pick-menu {
  position: fixed;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-bg);
  box-shadow: 0 12px 32px -8px rgba(16, 20, 18, 0.3);
  overflow: hidden;
  /* LA LIGNE QUI MANQUAIT.
     Une regle d'auteur l'emporte toujours sur la feuille du navigateur,
     quelle que soit la specificite : le « display: flex » ci-dessus
     neutralisait donc l'attribut « hidden » que pose le script.

     Les trois listes de la fiche vehicule — marque, modele, couleur —
     restaient ainsi ouvertes en permanence. En « position: fixed » et
     « z-index: 1400 », elles surgissaient toutes ensemble des que la
     section s'ouvrait, recouvrant la fenetre.

     Tous les autres menus du projet portent cette garde ; celui-ci etait
     le seul a en manquer. */
}
.pick-menu[hidden] {
  display: none;
}

.pick-searchwrap {
  position: relative;
  padding: 0.4rem;
  border-bottom: 1px solid var(--ui-border-light);
  flex-shrink: 0;
}

.pick-searchwrap svg {
  position: absolute;
  inset-inline-start: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ui-text-subtle);
  pointer-events: none;
}

.pick-search {
  width: 100%;
  min-height: 32px;
  padding: 0.3rem 0.5rem 0.3rem 1.85rem;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-bg);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
}

.pick-search:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.pick-list {
  overflow-y: auto;
  padding: 0.25rem;
}

.pick-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 32px;
  padding: 0.35rem 0.45rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-align: start;
  cursor: pointer;
}

.pick-option:hover,
.pick-option.is-active {
  background: var(--ui-bg-hover);
}

.pick-option.is-on {
  background: var(--ui-bg-selected);
  font-weight: 600;
}

.pick-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick-option-meta {
  font-size: 0.68rem;
  color: var(--ui-text-subtle);
  flex-shrink: 0;
}

/* La coche est dessinee, pas dupliquee : repetee en SVG sur cent quarante
   entrees, elle pesait a elle seule le tiers de la reponse. */
.pick-option::after {
  content: "";
  width: 6px;
  height: 10px;
  margin-inline-start: auto;
  flex-shrink: 0;
  border: solid var(--castrol-green-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}

.pick-option.is-on::after {
  opacity: 1;
}

.pick-option-other {
  border-top: 1px solid var(--ui-border-light);
  border-radius: 0 0 5px 5px;
  margin-top: 0.2rem;
}

.pick-empty {
  padding: 1.25rem 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
}

@media (pointer: coarse) {
  .pick-btn {
    min-height: 44px;
  }
  .pick-option {
    min-height: 44px;
  }
  .pick-search {
    min-height: 40px;
  }
}
.clr-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Un blanc sur fond blanc doit rester visible : le cerne s'en charge. */
  box-shadow: inset 0 0 0 1px rgba(16, 20, 18, 0.28);
}

.clr-dot-other {
  background: conic-gradient(#c1121f, #f2c438, #1e7a46, #1b4fa0, #5b2c6f, #c1121f);
}

/* Rien de choisi : un cercle vide, pas une couleur qui mentirait. */
.clr-dot-none {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--ui-text-subtle);
}

.clr-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.clr-input input[type=color] {
  width: 38px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  cursor: pointer;
}

/* ---------------------------------------- referentiel, cote patron */
.vr-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.vr-model {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--ui-border-light);
  border-radius: 4px;
  background: var(--ui-bg-subtle);
  color: var(--ui-text-muted);
}

.vr-model.vr-more {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
  border-color: transparent;
}

.vr-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
}

.vr-color {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-bg);
}

.vr-color.is-off {
  opacity: 0.5;
}

.vr-color .clr-dot {
  width: 24px;
  height: 24px;
}

.vr-color-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.vr-color-name {
  font-size: 0.82rem;
  font-weight: 600;
}

.vr-color-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.vr-modellist {
  display: flex;
  flex-direction: column;
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  margin-bottom: 0.875rem;
}

.vr-modelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  border-bottom: 1px solid var(--ui-border-light);
  font-size: 0.82rem;
}

.vr-modelrow:last-child {
  border-bottom: 0;
}

.vr-modeladd {
  margin: 0;
}

/* ==========================================================================
   Pilotage du site public
   ========================================================================== */
.sw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 0.75rem;
  align-items: start;
}

.sw-section {
  padding: 1.125rem;
  border-bottom: 1px solid var(--ui-border-light);
}

.sw-section:last-of-type {
  border-bottom: 0;
}

.sw-section-title {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-text-subtle);
  margin: 0 0 0.75rem;
}

.sw-image {
  display: flex;
  gap: 0.4rem;
}

.sw-preview {
  margin-top: 0.5rem;
  max-width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--ui-border);
}

.sw-upload {
  padding: 1.125rem;
  border-bottom: 1px solid var(--ui-border-light);
}

/* Attribution des photos : la vignette d'abord, le champ ensuite — on
   verifie d'un regard ce qui manque encore. */
.sw-visuals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.875rem;
}

.sw-visual {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sw-visual label {
  font-size: 0.78rem;
  font-weight: 600;
}

.sw-visual-thumb {
  height: 96px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg-subtle);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-visual-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sw-visual-empty {
  font-size: 0.72rem;
  color: var(--ui-text-subtle);
}

.sw-featured {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--ui-text-muted);
}

.sw-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.4rem;
  padding: 0.75rem;
  max-height: 340px;
  overflow-y: auto;
}

/* En mode selection, la galerie se signale : sans cela on clique sans
   comprendre que le choix est attendu la. */
.sw-gallery.is-picking {
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
  background: var(--ui-bg-selected);
}

.sw-item {
  position: relative;
  margin: 0;
}

.sw-item img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--ui-border);
  cursor: pointer;
  display: block;
}

.sw-item img:hover {
  border-color: var(--ui-accent);
}

.sw-item figcaption {
  font-size: 0.62rem;
  color: var(--ui-text-subtle);
  line-height: 1.2;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-remove {
  position: absolute;
  top: 0.15rem;
  inset-inline-end: 0.15rem;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: rgba(16, 20, 18, 0.68);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1200px) {
  .sw-layout {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Offres et bons, au comptoir
   ========================================================================== */
.of-group {
  margin: 0.875rem 0 0.4rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ui-text-subtle);
}

.of-group:first-child {
  margin-top: 0;
}

.of-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.of-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--ui-border);
  border-inline-start: 3px solid var(--castrol-green);
  border-radius: 6px;
  background: var(--ui-bg);
}

.of-code {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.of-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.of-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.of-redeem {
  display: flex;
  gap: 0.4rem;
}

.of-input {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 220px;
}

.of-current {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.of-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
}

.of-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-bg);
}

.of-card.is-on {
  border-color: var(--ui-accent);
  background: var(--ui-bg-selected);
}

.of-card.is-blocked {
  opacity: 0.6;
}

.of-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 0.1rem;
}

.of-terms {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.of-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--castrol-green-dark);
}

.of-tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

.of-why {
  font-size: 0.7rem;
  color: var(--castrol-red-dark);
}

/* Choix du pictogramme, a la composition d'un pack */
.ico-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.35rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg-subtle);
}

.ico-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--ui-bg);
  cursor: pointer;
  text-align: center;
}

.ico-choice:hover {
  border-color: var(--ui-accent);
}

.ico-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.ico-choice:focus-within {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

.ico-choice:has(input:checked) {
  border-color: var(--ui-accent);
  background: var(--ui-bg-selected);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}

.ico-glyph {
  display: inline-flex;
  color: var(--castrol-green-dark);
}

.ico-glyph svg {
  width: 22px;
  height: 22px;
}

.ico-label {
  font-size: 0.62rem;
  color: var(--ui-text-muted);
  line-height: 1.2;
}

/* Un pack se reconnait a son image, jusque dans la liste */
.pk-name-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pk-name-cell .cat-tile {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.pk-name-cell .cat-tile svg {
  width: 18px;
  height: 18px;
}

.pk-name-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Marqueur de nature : prestation ou piece, lisible d'un coup d'oeil */
.pk-item-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  margin-inline-end: 0.4rem;
  vertical-align: middle;
}

.pk-item-kind.k-svc {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

.pk-item-kind.k-part {
  background: #eef2f6;
  color: #4a6b8a;
}

/* ==========================================================================
   Panneau lateral du vehicule
   ========================================================================== */
.vp-head {
  padding: 0.8rem 1.125rem 0.7rem;
  border-bottom: 1px solid var(--ui-border-light);
}

.vp-plate {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.vp-model {
  font-size: 0.76rem;
  color: var(--ui-text-muted);
  margin-top: 0.05rem;
}

.vp-owner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--ui-border-light);
  font-size: 0.76rem;
}

/* --------------------------------------------- le resume du vehicule
 *
 *  TROIS FORMES, LA AUSSI
 *
 *  1. Quatre nombres sous un mot minuscule, dont un cumul SANS MONNAIE :
 *     « 1 040 » pouvait etre des dirhams comme des kilometres.
 *
 *  2. Six cellules a intitule empile, comme le bandeau de la fiche. Juste,
 *     mais deux rangees de gros chiffres prenaient le tiers du panneau — or ce
 *     panneau existe pour montrer la LISTE, pas son resume.
 *
 *  3. Celle-ci : intitule a cote de la valeur, deux colonnes, six lignes
 *     serrees. Meme information en un tiers de la hauteur, et la liste
 *     commence enfin dans l'ecran.
 */
.vp-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0.6rem 1.125rem 0.7rem;
  background: var(--ui-accent-soft);
  border-bottom: 1px solid #b7e0c9;
}
.vp-sum > div {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.4rem;
  align-items: baseline;
  min-width: 0;
  padding-block: 0.1rem;
}
.vp-sum dt {
  font-size: 0.66rem;
  color: var(--castrol-green-dark);
  opacity: 0.75;
  white-space: nowrap;
}
.vp-sum dd {
  margin: 0;
  min-width: 0;
  font-size: 0.74rem;
  color: var(--castrol-green-dark);
  overflow-wrap: anywhere;
}
.vp-sum b {
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vp-sum-dim {
  opacity: 0.72;
}

.vp-sum-none {
  font-style: italic;
  opacity: 0.7;
}

@media (max-width: 575.98px) {
  .vp-sum {
    grid-template-columns: 1fr;
  }
}
/* `.vp-stats`, `.vp-stat`, `.vp-stat-value` et `.vp-stat-label` ont ete
 * retirees : elles dessinaient les quatre nombres empiles que `.vp-facts`
 * remplace. Aucune vue ne les employait plus — les laisser aurait offert deux
 * facons de dessiner le meme resume, et la suivante aurait choisi au hasard.
 */
/* ------------------------------------------- l'annee, comme intertitre
 *
 *  Quarante lignes de dates se ressemblent toutes. Un repere par annee donne
 *  a l'oeil ou se poser, et repond sans compter a « combien de fois l'an
 *  dernier ».
 */
.vp-year {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.28rem 1.125rem;
  background: var(--ui-bg-subtle, #f6f7f5);
  border-bottom: 1px solid var(--ui-border-light);
  position: sticky;
  top: 0;
  z-index: 1;
}

.vp-year-n {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text);
}

.vp-year-count {
  font-size: 0.66rem;
  color: var(--ui-text-muted);
}

.vp-entry {
  border-bottom: 1px solid var(--ui-border-light);
}

/* UNE LIGNE, TROIS COLONNES
 *
 *  La ligne tenait sur deux etages — date et anciennete au premier, atelier et
 *  etat au second — soit 56 px par visite. Quarante visites faisaient 2 200 px
 *  a derouler pour retrouver une vidange de l'an dernier.
 *
 *  Un seul etage desormais, en colonnes FIXES : c'est ce qui fait la
 *  difference entre une liste et un tableau. Les dates s'alignent sous les
 *  dates, les montants sous les montants, et l'on compare en descendant du
 *  regard au lieu de chercher ou commence chaque valeur.
 */
.vp-entry {
  border-bottom: 1px solid var(--ui-border-light);
}

.vp-entry > summary {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.38rem 1.125rem;
  cursor: pointer;
  list-style: none;
  border-inline-start: 3px solid transparent;
}

.vp-entry > summary::-webkit-details-marker {
  display: none;
}

.vp-entry > summary:hover {
  background: var(--ui-bg-subtle);
}

.vp-entry[open] > summary {
  background: var(--ui-bg-subtle);
}

.vp-entry.elsewhere > summary {
  border-inline-start-color: var(--castrol-gold);
}

.vp-entry.current > summary {
  border-inline-start-color: var(--ui-accent);
}

.vp-entry-date {
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vp-entry-who {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.74rem;
  color: var(--ui-text-muted);
}
.vp-entry-who .ui-status, .vp-entry-who .status {
  font-size: 0.56rem;
  padding: 0.02rem 0.28rem;
  flex-shrink: 0;
}

.vp-entry-shop-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.vp-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--castrol-gold-light, #f7f0d8);
  color: var(--castrol-gold-dark);
}

.vp-badge-now {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

.vp-entry-total {
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vp-entry-cur {
  margin-inline-start: 0.2rem;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--ui-text-muted);
}

/* --------------------------------- la note laissee au passage precedent
 *
 *  « Courroie accessoire a surveiller au prochain passage » est ecrit pour
 *  etre relu ICI, des mois plus tard, par quelqu'un d'autre. Cet historique
 *  ne l'affichait nulle part : la consigne mourait avec la fiche, et le
 *  controle promis au client n'etait jamais fait.
 */
.vp-entry-note-txt {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ui-text);
  background: var(--castrol-gold-light, #f7f0d8);
  border-inline-start: 3px solid var(--castrol-gold);
  border-radius: 0 var(--ui-radius-sm, 6px) var(--ui-radius-sm, 6px) 0;
}

.vp-entry-note-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--castrol-gold-dark);
  margin-block-end: 0.15rem;
}

.vp-entry-body {
  padding: 0 1.125rem 0.7rem 1.4rem;
}

.vp-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.vp-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
}

.vp-lines li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.22rem 0;
  border-bottom: 1px dotted var(--ui-border-light);
  font-variant-numeric: tabular-nums;
}

.vp-lines li:last-child {
  border-bottom: 0;
}

/* Recapitulatif de montant */
.wo-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.wo-total span:last-child {
  font-weight: 600;
}

.wo-total-grand {
  border-top: 1px solid var(--ui-border);
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  font-size: 1.05rem;
}

.wo-total-grand span:last-child {
  font-weight: 700;
  color: var(--castrol-green-dark);
}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
/* iPad paysage : le rail reste, la densite se relache un peu */
@media (min-width: 992px) and (max-width: 1280px) {
  .ui-main {
    padding: 1.25rem 1.25rem 2.5rem;
  }
  .ui-table thead th, .ui-table tbody td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}
/* iPad portrait et mobile */
@media (max-width: 991.98px) {
  .mc-toasts {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    width: auto;
  }
  .mc-dialog {
    width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 3rem);
  }
  .mc-dialog-foot {
    flex-direction: column-reverse;
  }
  /* Empile : l'action principale reste sous le pouce, et le recapitulatif
     repasse au-dessus des boutons plutot que d'echouer tout en bas. */
  .mc-dialog-foot .spacer {
    display: none;
  }
  .mc-dialog-foot [data-foot-left] {
    order: 1;
    text-align: center;
  }
  .mc-dialog-foot .ui-btn {
    width: 100%;
  }
  .mc-dialog-foot .spacer {
    display: none;
  }
  .mc-field-row {
    display: block;
  }
}
/* Pointeur grossier : cibles confortables, pas de survol trompeur */
@media (pointer: coarse) {
  /* 44 px est la cible minimale au doigt. La valeur etait a 42 : deux
     pixels sous la limite, sur tous les boutons, champs et entrees de
     menu de l'application.

     `.ui-btn-sm` est nomme explicitement bien qu'il accompagne toujours
     `.ui-btn` : sa hauteur reduite est posee ailleurs, et la laisser
     implicite est precisement ce qui a permis a console/_mobile.scss de la
     ramener a 34 px sans que personne le remarque. */
  .ui-btn, .ui-btn-sm, .ui-nav-item, .ui-nav-sublink,
  .ui-input, .ui-select, .ui-textarea {
    min-height: 44px;
  }
  .ui-check {
    width: 19px;
    height: 19px;
  }
  /* Les filtres d'etat sont des cibles comme les autres : ils mesuraient
     27 px, et se manquent au doigt. */
  .mc-segment a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .ui-row-action {
    padding: 0.35rem 0;
    display: inline-flex;
  }
  .ui-table tbody tr:hover {
    background: transparent;
  }
  .ui-table tbody tr:active {
    background: var(--ui-bg-subtle);
  }
}
/* iOS : evite le zoom automatique a la mise au point d'un champ */
@supports (-webkit-touch-callout: none) {
  .ui-input, .ui-select, .ui-textarea, .ui-search-group input, .ui-goto input {
    font-size: 16px;
  }
}
/* Encoches et barres systeme */
@media (max-width: 991.98px) {
  .ui-globalbar {
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  }
  .ui-main {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}
body {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Accessibilite
   ========================================================================== */
.ui-btn:focus-visible,
.ui-nav-item:focus-visible,
.ui-nav-sublink:focus-visible,
.mc-dialog-close:focus-visible,
.mc-toast-close:focus-visible,
.ui-row-action:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.mc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Fiche d'un rendez-vous ============

   Ouverte en fenetre depuis le planning. Elle repond a trois questions dans
   cet ordre : quand, qui, et que fait-on maintenant. Les actions sont en bas
   parce qu'on les choisit APRES avoir lu — un bouton place avant l'information
   se clique avant qu'on ait compris. */
.rdv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ui-border);
}

.rdv-when {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.rdv-day {
  font-size: 1rem;
  font-weight: 600;
  text-transform: capitalize;
}

.rdv-time {
  font-size: 0.82rem;
  color: var(--ui-text-muted);
}

.rdv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0.875rem 0 0;
}
.rdv-facts dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-subtle);
  margin-bottom: 0.15rem;
}
.rdv-facts dd {
  margin: 0;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.rdv-none {
  color: var(--ui-text-subtle);
  font-size: 0.8rem;
}

.rdv-block {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ui-border-light);
}
.rdv-block h3 {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-subtle);
}

.rdv-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rdv-lines li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--ui-border-light);
}
.rdv-lines li:last-child {
  border-bottom: 0;
}

.rdv-qty {
  color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Le mot « estime » porte tout le sens : la voiture n'a pas ete vue. */
.rdv-estimate {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--ui-text-muted);
  line-height: 1.5;
}

.rdv-notes {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ui-text-muted);
  white-space: pre-line;
}

/* Une seule action porte la couleur : celle qui fait avancer la voiture. */
.rdv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ui-border);
}
.rdv-actions form {
  display: inline-flex;
}

.rdv-move {
  margin-top: 0.875rem;
}
.rdv-move summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--ui-text-muted);
  padding: 0.25rem 0;
}
.rdv-move summary:hover {
  color: var(--ui-text);
}

.rdv-move-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.625rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--ui-bg-subtle);
  border-radius: 6px;
}
.rdv-move-form .ui-field {
  flex: 1 1 10rem;
  margin: 0;
}

/* ============ Fiche d'un ordre, en fenetre ============

   Meme composition qu'une facture, en petit : entete, tableau, total. Le
   gerant retrouve la disposition qu'il connait du document papier, sans
   quitter sa journee. */
.ors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ui-border);
}

.ors-number {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.ors-when {
  display: block;
  font-size: 0.78rem;
  color: var(--ui-text-muted);
}

.ors-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem 1.25rem;
  margin: 0.875rem 0 0;
}
.ors-facts dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-subtle);
  margin-bottom: 0.12rem;
}
.ors-facts dd {
  margin: 0;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ors-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.ors-table th {
  padding: 0.3rem 0.4rem;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-subtle);
  text-align: start;
  border-bottom: 1px solid var(--ui-border);
}
.ors-table td {
  padding: 0.38rem 0.4rem;
  border-bottom: 1px solid var(--ui-border-light);
  vertical-align: top;
}
.ors-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.ors-table .unit {
  font-size: 0.74rem;
  color: var(--ui-text-subtle);
}

/* Qui a fait la ligne, sous son libelle : la meme information que sur la
   page de l'ordre, au meme endroit relatif. */
.ors-by {
  display: block;
  font-size: 0.7rem;
  color: var(--ui-text-subtle);
}

.ors-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.875rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--ui-text);
}
.ors-total span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ors-total strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.ors-empty {
  margin: 1rem 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ui-text-muted);
  background: var(--ui-bg-subtle);
  border-radius: 6px;
}

.ors-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ui-border);
}

.ors-code {
  margin-inline-start: auto;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ui-text-subtle);
}

/* ============ Fiche d'un responsable du site ============

   Deux formulaires dans une meme fenetre. Le filet nomme les separe : sans
   lui, le champ « mot de passe » se lit comme la suite de la fiche, et le
   bouton d'enregistrement d'au-dessus semble le valider aussi. */
.dlg-sep {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1.25rem 0 0.875rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-text-subtle);
}
.dlg-sep::before, .dlg-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ui-border);
}

.eqx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-inverse);
  background-color: var(--brand);
}
.eqx-avatar.is-gone {
  color: var(--text-tertiary);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
}

.eqx-avatar-sm {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 0.75rem;
}

.mix {
  display: block;
  margin-block-start: 4px;
}

.mix-bar {
  display: block;
  block-size: 3px;
  inline-size: 100%;
  max-inline-size: 96px;
  border-radius: 2px;
  background-color: var(--surface-active);
  overflow: hidden;
}

.mix-work {
  display: block;
  block-size: 100%;
  background-color: var(--action);
}

.mix-say {
  display: block;
  margin-block-start: 2px;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .mix-bar {
    max-inline-size: none;
  }
}
tr[data-open] {
  cursor: pointer;
}
tr[data-open]:hover {
  background-color: var(--ui-bg-hover);
}
tr[data-open] .row-open {
  color: var(--ui-accent);
  text-decoration: none;
}
tr[data-open] .row-open:hover {
  text-decoration: underline;
}

@media (pointer: coarse) {
  tr[data-open]:hover {
    background-color: transparent;
  }
  tr[data-open]:active {
    background-color: var(--ui-bg-selected);
  }
}
@media (max-width: 767.98px) {
  table.ui-table-cards tbody tr[data-open] {
    position: relative;
  }
  table.ui-table-cards tbody tr[data-open]::after {
    content: "";
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 16px;
    inline-size: 8px;
    block-size: 8px;
    border-block-start: 2px solid var(--ui-text-subtle);
    border-inline-end: 2px solid var(--ui-text-subtle);
    transform: rotate(45deg);
  }
  table.ui-table-cards tbody tr[data-open] td:first-child {
    padding-inline-end: 32px;
  }
}
.eqx-who {
  display: flex;
  align-items: center;
  gap: 16px;
}

.eqx-who-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.eqx-person {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.eqx-person-id {
  min-inline-size: 0;
}
.eqx-person-id h1 {
  margin: 0;
}
.eqx-person-id p {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.eqx-commands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}

.fx-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  border-radius: 999px;
  white-space: nowrap;
}

.fx-pill-off {
  color: var(--text-tertiary);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
}

.eqx-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 24px;
  border-block-end: 1px solid var(--border);
}

.eqx-pivot {
  display: flex;
  gap: 8px;
}

.eqx-pivot-item {
  position: relative;
  padding: 16px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.eqx-pivot-item:hover {
  color: var(--text);
}
.eqx-pivot-item::after {
  content: "";
  position: absolute;
  inset-inline: 20px;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 2px;
  background-color: transparent;
}
.eqx-pivot-item.is-on {
  color: var(--brand);
  font-weight: 600;
}
.eqx-pivot-item.is-on::after {
  background-color: var(--brand);
}

.eqx-toggle {
  margin-block-end: 12px;
}

.eqx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 20px;
  margin-block-end: 24px;
}

.eqx-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 1px 2px rgba(16, 19, 15, 0.14);
}

.eqx-tile-v {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.eqx-tile-l {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.eqx-tile-warn {
  font-size: 0.75rem;
  color: var(--warn);
}

.eqx-track {
  display: block;
  inline-size: 100%;
  max-inline-size: 5.5rem;
  block-size: 6px;
  border-radius: 3px;
  background-color: var(--surface-sunken);
  overflow: hidden;
}

.eqx-fill {
  display: block;
  block-size: 100%;
  border-radius: 3px;
  background-color: var(--brand);
}

.ui-table tr.is-gone td {
  opacity: 0.58;
}

.eqx-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 24px;
  align-items: start;
}

.eqx-span {
  grid-column: 1/-1;
}

.eqx-pay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
  font-size: 0.875rem;
  border-block-end: 1px solid var(--border-subtle, var(--border));
}
.eqx-pay-row strong {
  font-variant-numeric: tabular-nums;
}

.eqx-pay-final {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-block-start: 12px;
  padding-block-start: 20px;
  border-block-start: 2px solid var(--text);
  font-size: 1.125rem;
}
.eqx-pay-final strong {
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.eqx-pay-final.is-over strong {
  color: var(--danger);
}

.eqx-produced {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eqx-produced-v {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}

.eqx-produced-l {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.eqx-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 48px;
  color: var(--text-tertiary);
}
.eqx-none svg {
  inline-size: 2rem;
  block-size: 2rem;
}
.eqx-none p {
  margin: 0;
  font-size: 0.875rem;
}

.sap-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 24px;
  border-block-end: 1px solid var(--border);
}

.sap-range {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block-end: 12px;
}
.sap-range label {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.sap-date {
  min-height: 2rem;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.sap-date:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}

.sap-cols {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1080px) {
  .sap-cols {
    grid-template-columns: 1fr;
  }
}
.sap-list {
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 1px 2px rgba(16, 19, 15, 0.14);
  overflow: hidden;
}

.sap-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 24px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  border-block-end: 1px solid var(--border);
}

.sap-list-sort {
  font-style: italic;
}

.sap-people {
  margin: 0;
  padding: 0;
  list-style: none;
  max-block-size: 34rem;
  overflow-y: auto;
}

.sap-person {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  border-block-end: 1px solid var(--border-subtle, var(--border));
  border-inline-start: 3px solid transparent;
}
.sap-person:hover {
  background-color: var(--surface-sunken);
}
.sap-person.is-on {
  background-color: var(--surface-sunken);
  border-inline-start-color: var(--brand);
}

.sap-person-body {
  flex: 1;
  min-inline-size: 0;
}

.sap-person-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sap-person-name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sap-person-num {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.sap-person-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 1px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.sap-person-bar {
  display: block;
  margin-block-start: 8px;
  block-size: 3px;
  border-radius: 2px;
  background-color: var(--surface-sunken);
  overflow: hidden;
}

.sap-person-fill {
  display: block;
  block-size: 100%;
  border-radius: 2px;
  background-color: var(--brand);
}

.sap-detail {
  min-inline-size: 0;
}

.sap-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .sap-panes {
    grid-template-columns: 1fr;
  }
}
.sap-span {
  grid-column: 1/-1;
}

.sap-obj {
  padding: 28px;
  margin-block-end: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 2px 4px rgba(16, 19, 15, 0.14);
}

.sap-obj-id {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.sap-obj-id h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
}
.sap-obj-id p {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.sap-obj-cmd {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-inline-start: auto;
}

.sap-obj-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 20px;
  margin: 24px 0 0;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--border);
}
.sap-obj-facts dt {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-block-end: 2px;
}
.sap-obj-facts dd {
  margin: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.sap-obj-facts dd.is-big {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
}
.sap-obj-facts small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-tertiary);
}

.sap-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 20px;
  margin-block-end: 24px;
}

.sap-tile {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 1px 2px rgba(16, 19, 15, 0.14);
}

.sap-tile-l {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.sap-tile-v {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sap-tile-u {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.sap-tile-u em {
  display: block;
  font-style: normal;
  color: var(--warn);
}

.sap-chart {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sap-chart-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  font-size: 0.8125rem;
}

.sap-chart-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sap-chart-track {
  block-size: 0.75rem;
  border-radius: 2px;
  background-color: var(--surface-sunken);
  overflow: hidden;
}

.sap-chart-fill {
  display: block;
  block-size: 100%;
  border-radius: 2px;
  background-color: var(--brand);
}
.sap-chart-fill.is-alt {
  background-color: var(--action);
}

.sap-chart-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: end;
}
.sap-chart-num em {
  font-style: normal;
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.sap-empty {
  margin: 0;
  padding-block: 40px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.sap-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-end: 20px;
}

.sap-mode {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sap-mode svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}
.sap-mode:hover {
  background-color: var(--surface-sunken);
  color: var(--text);
}
.sap-mode.is-on {
  color: var(--text-inverse);
  background-color: var(--brand);
  border-color: var(--brand);
}

.sap-mode-n {
  padding: 0 12px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  background-color: var(--surface-sunken);
  color: var(--text-secondary);
}
.sap-mode.is-on .sap-mode-n {
  background-color: rgba(255, 255, 255, 0.22);
  color: var(--text-inverse);
}

.sap-triple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 32px;
}

.sap-triple-title {
  margin: 0 0 16px;
  padding-block-end: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  border-block-end: 1px solid var(--border);
}
.sap-triple-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-tertiary);
}

.sap-chart-row.is-tight {
  grid-template-columns: minmax(4rem, 1fr) 3.5rem auto;
  gap: 12px;
  font-size: 0.75rem;
}

.sap-person-go {
  flex: none;
  color: var(--text-tertiary);
}
.sap-person-go svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.sap-person.is-on .sap-person-go {
  color: var(--brand);
}

.sap-peek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.sap-peek svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
}
.sap-peek:hover {
  color: var(--text);
  background-color: var(--surface-sunken);
  border-color: var(--border);
}
.sap-peek:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}

.sap-chart-row:has(.sap-peek) {
  grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) auto auto;
}

.fx-pill-plus {
  color: var(--ok);
  background-color: var(--ok-soft, var(--surface-sunken));
  border: 1px solid var(--ok);
}

.fx-pill-minus {
  color: var(--text-secondary);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-strong);
}

.is-plus {
  color: var(--ok);
}

.sap-nobody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 32px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--text-tertiary);
}
.sap-nobody svg {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}
.sap-nobody h3 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--text-secondary);
}
.sap-nobody p {
  margin: 0;
  font-size: 0.875rem;
  max-inline-size: 32ch;
  line-height: 1.6;
}

.sap-detail-card {
  padding: 24px;
  margin-block-end: 24px;
  background-color: var(--surface-sunken);
  border-radius: 10px;
}

.sap-detail-amount {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.sap-detail-amount strong {
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sap-detail-amount span {
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

.sap-detail-effet {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.sap-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 20px;
  margin: 24px 0 0;
}
.sap-detail-facts dt {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-block-end: 2px;
}
.sap-detail-facts dd {
  margin: 0;
  font-size: 0.875rem;
}

.sap-detail-why {
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border);
}
.sap-detail-why dt {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-block-end: 2px;
}
.sap-detail-why dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.sap-detail-none {
  color: var(--text-tertiary);
  font-style: italic;
}

.tabc-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 20px;
}

.tabc-lbl {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.tabc-sel {
  min-height: 2.25rem;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
}
.tabc-sel:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}

.tabc-sel-wide {
  min-inline-size: 14rem;
}

.tabc-range-say {
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.tabc-date {
  min-height: 2rem;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.tabc-date:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}

.tbl-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-block-end: 24px;
  padding-block-end: 20px;
  border-block-end: 1px solid var(--border);
}

.tbl-search {
  position: relative;
  flex: 1 1 14rem;
  min-inline-size: 0;
}
.tbl-search svg {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--text-tertiary);
  pointer-events: none;
}
.tbl-search input {
  inline-size: 100%;
  min-height: var(--target-touch);
  padding: 10px 16px 10px 48px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.tbl-search input:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}

.tbl-filter {
  min-height: var(--target-touch);
  padding: 10px 16px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}

.tbl-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.tbl-who {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tbl-who-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.is-over {
  color: var(--danger);
}

.cmp-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 24px;
}

.cmp-choice {
  padding: 8px 16px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.cmp-choice:hover {
  background-color: var(--surface-sunken);
  color: var(--text);
}
.cmp-choice.is-on {
  color: var(--text-inverse);
  background-color: var(--brand);
  border-color: var(--brand);
}

.cmp-chart {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmp-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
}
.cmp-row.is-gone {
  opacity: 0.58;
}

.cmp-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  font-size: 0.875rem;
}
.cmp-name span {
  min-inline-size: 0;
}
.cmp-name em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.cmp-track {
  block-size: 1.25rem;
  border-radius: 2px;
  background-color: var(--surface-sunken);
  overflow: hidden;
}

.cmp-fill {
  display: block;
  block-size: 100%;
  border-radius: 2px;
  background-color: var(--brand);
}

.cmp-num {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-inline-size: 4rem;
  text-align: end;
}

.cmp-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--text-tertiary);
  border-radius: 2px;
}
.cmp-go svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}
.cmp-go:hover {
  color: var(--text);
  background-color: var(--surface-sunken);
}

@media (max-width: 640px) {
  .tbl-tools > * {
    flex: 1 1 100%;
  }
  .tbl-search {
    flex-basis: 100%;
  }
  .tbl-staff {
    display: block;
  }
  .tbl-staff thead {
    display: none;
  }
  .tbl-staff tbody, .tbl-staff tr, .tbl-staff td {
    display: block;
    width: 100%;
  }
  .tbl-staff tr {
    margin-block-end: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
  }
  .tbl-staff td.d-none {
    display: flex !important;
  }
  .tbl-staff td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border: 0;
    border-block-end: 1px solid var(--border-subtle, var(--border));
    text-align: start;
  }
  .tbl-staff td::before {
    content: attr(data-label);
    flex: none;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .tbl-staff td:first-child {
    display: block;
    padding-block-start: 0;
  }
  .tbl-staff td:first-child::before {
    content: none;
  }
  .tbl-staff td:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-block-end: 0;
    padding-block-end: 0;
  }
  .tbl-staff td:last-child::before {
    content: none;
  }
  .cmp-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "nom  go" "bar  num";
    gap: 12px;
  }
  .cmp-name {
    grid-area: nom;
  }
  .cmp-track {
    grid-area: bar;
  }
  .cmp-num {
    grid-area: num;
    min-inline-size: 0;
  }
  .cmp-go {
    grid-area: go;
  }
  .cmp-choice {
    font-size: 0.75rem;
  }
  .sap-obj {
    padding: 20px;
  }
  .sap-obj-cmd {
    margin-inline-start: 0;
    inline-size: 100%;
  }
  .sap-obj-cmd .ui-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .sap-panes {
    grid-template-columns: 1fr;
  }
  .sap-chart-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "nom  num" "bar  bar";
    gap: 8px;
  }
  .sap-chart-name {
    grid-area: nom;
  }
  .sap-chart-track {
    grid-area: bar;
  }
  .sap-chart-num {
    grid-area: num;
  }
  .sap-chart-row .sap-peek {
    grid-area: num;
    justify-self: end;
  }
}
/* ==========================================================================
   Page de connexion du personnel Mr Castrol
   Photo de garage plein ecran + carte centree.
   ========================================================================== */
.login-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--castrol-black);
}

/*
   Fond : deposez votre photo dans wwwroot/images/backgrounds/login-bg.jpg.
   Tant que le fichier est absent, le degrade sombre ci-dessous s'affiche,
   la page reste donc lisible.
*/
.login-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #17191c;
  background-image: linear-gradient(rgba(10, 12, 14, 0.72), rgba(10, 12, 14, 0.82)), url("/images/backgrounds/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
  border-radius: 0.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 2rem 1.75rem;
}

/* --- Logo texte MR CASTROL --------------------------------------------- */
.login-logo {
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Le logo lui-meme. Une hauteur bornee plutot qu'une largeur : c'est la
   hauteur qui decide de l'equilibre de la carte, et un logo qui grandit avec
   l'ecran pousse le formulaire sous la ligne de flottaison sur un portable. */
.login-logo .login-mark {
  display: block;
  width: auto;
  max-width: 78%;
  height: clamp(3.25rem, 12vw, 4.5rem);
  margin: 0 auto;
  object-fit: contain;
}

/* `.logo-text`, `.logo-mr` et `.logo-castrol` dessinaient la marque en
   caracteres : l'ecran de configuration generale etait le dernier a le faire.
   Il porte maintenant `.login-mark`, comme l'ecran de connexion. */
/* Le trait vert/rouge reprend le bandeau de la facade du garage */
.login-logo .logo-rule {
  width: 72%;
  height: 4px;
  margin: 0.4rem auto 0;
  background: linear-gradient(90deg, var(--castrol-green) 0%, var(--castrol-green) 55%, var(--castrol-red) 55%, var(--castrol-red) 100%);
}

.login-logo .logo-tagline {
  margin-top: 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--castrol-grey-500);
}

/* --- Message d'erreur --------------------------------------------------- */
.login-error {
  color: var(--castrol-red);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  margin: 1rem 0 0.25rem;
}

.login-error ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Champs -------------------------------------------------------------- */
.login-card .form-control {
  height: 46px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 0.85);
}

.login-card .form-control::placeholder {
  color: #8a9096;
}

.login-card .form-control:focus {
  border-color: var(--castrol-green);
  box-shadow: 0 0 0 0.2rem rgba(0, 147, 67, 0.2);
  background-color: #fff;
}

/* Bouton oeil pour reveler le mot de passe */
.password-field {
  position: relative;
}

.password-field .toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  height: 46px;
  width: 46px;
  border: 0;
  background: transparent;
  color: var(--castrol-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.password-field .toggle-password:hover {
  color: var(--castrol-green-dark);
}

/* --- Bouton principal ---------------------------------------------------- */
.btn-login {
  height: 50px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--castrol-green);
  border: 0;
  border-radius: 0.25rem;
  width: 100%;
}

.btn-login:hover, .btn-login:focus {
  background-color: var(--castrol-green-dark);
  color: #fff;
}

/* --- Boutons secondaires ------------------------------------------------- */
.login-secondary {
  height: 40px;
  font-size: 0.85rem;
  color: var(--castrol-grey-700);
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}

.login-secondary:hover {
  background-color: #fff;
  border-color: var(--castrol-green);
  color: var(--castrol-green-dark);
}

/* Le selecteur de langue vivait ici. Il a ete retire de la vue : il annoncait
   trois langues alors que la console n'en sert qu'une. La regle qui le centrait
   part avec lui. */
/* Le pied de la carte : une phrase, puis le seul lien qui mene quelque part. */
.login-aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  /* Le meme gris que les liens secondaires, sur la carte claire : il passe
     le seuil de contraste, ce que ne ferait pas un gris plus pale. */
  color: var(--castrol-grey-700);
  text-align: center;
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .login-card {
    padding: 1.5rem 1.15rem;
  }
  .login-backdrop {
    background-attachment: scroll;
  }
}
.ui-col-5 {
  grid-column: span 5;
}

.ui-col-7 {
  grid-column: span 7;
}

.ui-col-1 {
  grid-column: span 1;
}

.ui-col-2 {
  grid-column: span 2;
}

.ui-col-9 {
  grid-column: span 9;
}

.ui-col-10 {
  grid-column: span 10;
}

.ui-col-11 {
  grid-column: span 11;
}

.promo-shops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 12px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-sunken);
}

.promo-shop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  font-size: 0.8125rem;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.promo-shop:hover {
  background-color: var(--surface-hover);
}
.promo-shop input {
  flex-shrink: 0;
  accent-color: var(--action);
}

.inv-issuer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-actions {
  position: sticky;
  bottom: 0;
  background-color: var(--surface);
  border-block-start: 1px solid var(--border);
  z-index: 10;
}

.inv-add {
  width: 100%;
  justify-content: center;
}

.card {
  --card-pad: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--card-pad);
  padding: var(--card-pad);
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 2px 4px rgba(16, 19, 15, 0.14);
  transition: box-shadow 140ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.card-filled {
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 2px 4px rgba(16, 19, 15, 0.14);
  border-color: transparent;
}

.card-filled-alt {
  background-color: var(--surface-sunken);
  box-shadow: none;
  border-color: transparent;
}

.card-outline {
  background-color: var(--surface);
  box-shadow: none;
  border-color: var(--border-strong);
}

.card-subtle {
  background-color: transparent;
  box-shadow: none;
  border-color: transparent;
}

.ui .card {
  gap: var(--card-pad);
  padding: var(--card-pad);
}

.card-sm {
  --card-pad: 8px;
}

.card-lg {
  --card-pad: 16px;
}

.card-horizontal {
  flex-direction: row;
  align-items: flex-start;
}

.card-interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.card-interactive:hover {
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 4px 8px rgba(16, 19, 15, 0.14);
  color: inherit;
}
.card-interactive:active {
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 8px 16px rgba(16, 19, 15, 0.14);
  background-color: var(--surface-hover);
}
.card-interactive:focus-visible, .card-interactive:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.card-outline.card-interactive:hover {
  border-color: var(--text-tertiary);
}

.card-selected {
  background-color: var(--brand-faint);
  border-color: var(--action);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header > .card-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: var(--surface-sunken);
  color: var(--text-tertiary);
  overflow: hidden;
}
.card-header > .card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-header > .card-figure svg {
  width: 18px;
  height: 18px;
}
.card-header .card-header-text {
  min-width: 0;
  flex: 1;
}
.card-header .card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-header .card-subtitle {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-block-start: 1px;
}
.card-header .card-header-action {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.card-preview {
  margin: calc(var(--card-pad) * -1);
  margin-block-end: 0;
  overflow: hidden;
  background-color: var(--surface-sunken);
}
.card-preview img {
  display: block;
  width: 100%;
  height: auto;
}
.card-preview:last-child {
  margin-block-end: calc(var(--card-pad) * -1);
  margin-block-start: 0;
}

.card-body {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  min-width: 0;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.ui-panel {
  border-color: transparent;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 2px 4px rgba(16, 19, 15, 0.14);
}

.ui-panel:has(.ui-table),
.ui-panel:has(.data-table) {
  border-color: var(--border);
  box-shadow: none;
}

.ui-kpi,
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 2px 4px rgba(16, 19, 15, 0.14);
}

.ui-kpi-label,
.kpi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

.ui-kpi-value,
.kpi-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-block: 4px 0;
}

.ui-kpi-hint,
.kpi-hint {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-tertiary);
}

.ui-kpi-attention .ui-kpi-hint,
.ui-kpi-attention .kpi-hint,
.kpi-warn .kpi-hint {
  color: var(--warn-text);
  font-weight: 500;
}

.ui-kpi-critique .ui-kpi-hint,
.ui-kpi-critique .kpi-hint,
.kpi-danger .kpi-hint {
  color: var(--danger-text);
  font-weight: 500;
}

.kpi-ok .kpi-hint {
  color: var(--ok-text);
}

a.ui-kpi,
a.kpi {
  text-decoration: none;
  cursor: pointer;
}
a.ui-kpi:hover,
a.kpi:hover {
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 4px 8px rgba(16, 19, 15, 0.14);
}
a.ui-kpi:active,
a.kpi:active {
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 8px 16px rgba(16, 19, 15, 0.14);
  background-color: var(--surface-hover);
}
a.ui-kpi:focus-visible,
a.kpi:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ui-kpis,
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-block-end: 24px;
}

@media (max-width: 991.98px) {
  .ui-kpis,
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ui-kpis > :last-child:nth-child(odd),
  .kpi-grid > :last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}
@media print {
  .card,
  .ui-panel,
  .ui-kpi,
  .kpi {
    box-shadow: none !important;
    border: 1px solid #999 !important;
  }
}
.imgf {
  margin-block-end: 16px;
}

.imgf-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-block-end: 6px;
}

.imgf-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.imgf-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.imgf-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imgf-preview svg {
  width: 26px;
  height: 26px;
  color: var(--text-disabled);
}

.imgf-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.imgf-path {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-tertiary);
}

.imgf.is-empty .imgf-path {
  font-style: italic;
}

.imgf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mp-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-block-end: 12px;
}

.mp-search {
  flex: 1;
}

.mp-upload {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.mp-alt {
  margin-block-end: 16px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--border-subtle);
}

.mp-queue {
  margin-block-end: 16px;
  padding: 12px;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.mp-queue-head {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.mp-queue-note {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mp-q {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  padding-block: 6px;
}
.mp-q + .mp-q {
  border-block-start: 1px solid var(--border-subtle);
}

.mp-q-nom {
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-q-pct {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.mp-q-bar {
  grid-column: 1/-1;
  height: 4px;
  border-radius: 2px;
  background-color: var(--surface-active);
  overflow: hidden;
}

.mp-q-fill {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--action);
  transition: width 0.15s linear;
}

.mp-q-etat {
  grid-column: 1/-1;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.mp-q.is-ok .mp-q-etat {
  color: var(--ok-text);
}

.mp-q.is-ko .mp-q-fill {
  background-color: var(--danger);
}
.mp-q.is-ko .mp-q-etat {
  color: var(--danger-text);
}

@media (prefers-reduced-motion: reduce) {
  .mp-q-fill {
    transition: none;
  }
}
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}

.mp-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  text-align: start;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mp-item:hover {
  border-color: var(--action);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 2px 4px rgba(16, 19, 15, 0.14);
}
.mp-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.mp-item[aria-selected=true] {
  border-color: var(--action);
  background-color: var(--brand-faint);
}

.mp-thumb {
  display: block;
  aspect-ratio: 4/3;
  background-color: var(--surface-sunken);
  border-radius: 2px;
  overflow: hidden;
}
.mp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-name {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-meta {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.vis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px 24px;
  padding-block-end: 8px;
}
.vis-grid .imgf {
  margin-block-end: 0;
}

.vis-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vis-featured {
  padding-inline-start: 112px;
  font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
  .vis-featured {
    padding-inline-start: 0;
  }
}
.sw-usage {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-start: 4px;
}

.sw-usage-tag {
  font-size: 0.6875rem;
  padding: 1px 6px;
  border-radius: 2px;
  background-color: var(--brand-muted);
  color: var(--brand);
}

.sw-usage-free {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-style: italic;
}

@media (max-width: 767.98px) {
  .imgf-body {
    flex-direction: column;
  }
  .mp-bar {
    flex-wrap: wrap;
  }
  .mp-grid {
    max-height: none;
  }
}
.bn-thumb {
  display: block;
  width: 72px;
  height: 44px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background-color: var(--surface-sunken);
  overflow: hidden;
}
.bn-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-block-end: 24px;
}

.gal-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 8px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.gal-item figcaption {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gal-item.is-principal {
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action);
}

.gal-flag {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
}

.gal-thumb {
  display: block;
  aspect-ratio: 4/3;
  background-color: var(--surface-sunken);
  border-radius: 2px;
  overflow: hidden;
}
.gal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-start: auto;
}

.gal-add {
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border);
}

.ui-goto {
  position: relative;
}

.gs-panel {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline: 0;
  z-index: 60;
  max-height: 62vh;
  overflow-y: auto;
  padding: 6px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}
.gs-panel[hidden] {
  display: none;
}

.gs-hint {
  margin: 0;
  padding: 12px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.gs-group + .gs-group {
  margin-block-start: 6px;
  padding-block-start: 6px;
  border-block-start: 1px solid var(--border-subtle);
}

.gs-group-title {
  margin: 0;
  padding: 6px 10px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.gs-hit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  text-align: start;
  cursor: pointer;
  color: var(--text);
}
.gs-hit:hover, .gs-hit:focus-visible {
  background-color: var(--surface-hover);
  color: var(--text);
  outline: none;
}
.gs-hit:focus-visible {
  box-shadow: inset 2px 0 0 var(--action);
  background-color: var(--brand-faint);
}

.gs-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2px 6px;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.gs-label {
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gs-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .gs-panel {
    max-height: 50vh;
  }
  .gs-meta {
    display: none;
  }
}
.rcp-rdv {
  padding: 16px;
  margin-block-end: 20px;
  background-color: var(--brand-faint);
  border: 1px solid var(--action);
  border-radius: 4px;
}
.rcp-rdv.is-late {
  background-color: var(--warn-surface);
  border-color: var(--warn);
}

.rcp-rdv-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 10px;
}
.rcp-rdv-head svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex-shrink: 0;
}

.rcp-rdv-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.rcp-rdv-when {
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.rcp-rdv-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 0.8125rem;
}

.rcp-rdv-lines {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.rcp-rdv-lines li {
  padding: 2px 8px;
  font-size: 0.75rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.rcp-rdv-note {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-secondary);
}

@media (max-width: 767.98px) {
  .rcp-rdv-when {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
}
.scan {
  display: grid;
  gap: 20px;
}

.scan-field label {
  display: block;
  margin-block-end: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.scan-field .input-code {
  width: 100%;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.scan-state:empty {
  display: none;
}
.scan-state {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  background-color: var(--surface-sunken);
  color: var(--text-secondary);
}
.scan-state.is-ok {
  background-color: var(--ok-faint, #e8f5ec);
  color: var(--ok);
  font-weight: 600;
}
.scan-state.is-ko {
  background-color: var(--danger-faint, #fdecec);
  color: var(--danger);
  font-weight: 600;
}

.scan-cam[hidden] {
  display: none;
}
.scan-cam video {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  background-color: #000;
  border-radius: var(--radius-sm);
}

.scan-cam-hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-align: center;
}

.scan-actions {
  display: flex;
  gap: 8px;
}
.scan-actions .ui-btn {
  flex: 1;
}
.scan-actions [data-scan-camera].is-on {
  border-color: var(--action);
  color: var(--action);
}

.setup-page {
  background-color: var(--canvas);
  min-height: 100vh;
}

.setup-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-block-end: 1px solid var(--border);
  background-color: var(--surface);
}

.setup-bar-logo {
  display: flex;
  align-items: center;
}
.setup-bar-logo img {
  height: 24px;
  width: auto;
  display: block;
}

.setup-bar-label {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--border);
}

.setup {
  width: min(1120px, 100% - 40px);
  margin-inline: auto;
  padding-block: 40px 64px;
}

.setup-narrow-page {
  max-width: 680px;
}

.setup-head {
  margin-block-end: 40px;
}
.setup-head h1 {
  margin: 0;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}
.setup-head p {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.setup-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.setup-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.fx-rail {
  position: sticky;
  inset-block-start: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fx;
}

.fx-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding-block: 12px;
  position: relative;
}
.fx-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: 40px;
  inset-block-end: -4px;
  inset-inline-start: 13px;
  width: 2px;
  background-color: var(--border);
}
.fx-step.is-done:not(:last-child)::before {
  background-color: var(--ok);
}

.fx-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background-color: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.fx-step-dot svg {
  width: 15px;
  height: 15px;
}

.fx-step-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  align-self: center;
}

.fx-step-note {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-block-start: 2px;
}

.fx-step.is-done .fx-step-dot {
  background-color: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.fx-step.is-done .fx-step-name {
  color: var(--text);
}

.fx-step.is-current .fx-step-dot {
  border-color: var(--action);
  color: var(--action);
  box-shadow: 0 0 0 3px var(--brand-faint);
}
.fx-step.is-current .fx-step-name {
  color: var(--text);
  font-weight: 600;
}

.fx-step.is-locked .fx-step-dot {
  opacity: 0.55;
}
.fx-step.is-locked .fx-step-name {
  color: var(--text-tertiary);
}

.fx-bar {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 20px;
  margin-block-end: 24px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--surface);
}

.fx-bar-icon {
  width: 20px;
  height: 20px;
  margin-block-start: 1px;
}

.fx-bar-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.fx-bar-text {
  margin: 2px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.fx-bar-text code {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 2px;
  background-color: var(--surface-sunken);
}

.fx-bar-success {
  border-inline-start-color: var(--ok);
}
.fx-bar-success .fx-bar-icon {
  color: var(--ok);
}

.fx-bar-warning {
  border-inline-start-color: var(--warn);
}
.fx-bar-warning .fx-bar-icon {
  color: var(--warn);
}

.fx-bar-error {
  border-inline-start-color: var(--danger);
}
.fx-bar-error .fx-bar-icon {
  color: var(--danger);
}

.fx-bar-info {
  border-inline-start-color: var(--action);
}
.fx-bar-info .fx-bar-icon {
  color: var(--action);
}

.fx-card {
  padding: 32px;
  margin-block-end: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
}
.fx-card.is-locked {
  background-color: var(--surface-sunken);
}

.fx-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 24px;
  flex-wrap: wrap;
}

.fx-card-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.fx-card-sub {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.fx-text {
  margin: 0 0 20px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.fx-text code {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 2px;
  background-color: var(--surface-sunken);
}

.fx-hint {
  margin: 16px 0 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.fx-code {
  margin: 0 0 20px;
  padding: 20px;
  overflow-x: auto;
  border-radius: 4px;
  background-color: var(--surface-sunken);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.6;
}

.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
}

.fx-span {
  grid-column: 1/-1;
}

.fx-tight {
  max-width: 9rem;
}

.fx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fx-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}

.fx-input {
  width: 100%;
  min-height: var(--target-touch);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-block-end-width: 2px;
  border-radius: 4px;
  transition: border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fx-input::placeholder {
  color: var(--text-tertiary);
}
.fx-input:hover {
  border-color: var(--text-tertiary);
}
.fx-input:focus {
  outline: none;
  border-block-end-color: var(--action);
  border-block-end-width: 2px;
}
.fx-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.fx-input:disabled {
  color: var(--text-disabled);
  background-color: var(--surface-sunken);
  cursor: not-allowed;
}

.fx-field-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.fx-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 6px;
}

.fx-meter-track {
  display: flex;
  gap: 3px;
  flex: 1;
}

.fx-meter-seg {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background-color: var(--border);
  transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fx-meter-seg.is-on-1 {
  background-color: var(--danger);
}
.fx-meter-seg.is-on-2 {
  background-color: var(--warn);
}
.fx-meter-seg.is-on-3 {
  background-color: var(--action);
}
.fx-meter-seg.is-on-4 {
  background-color: var(--ok);
}

.fx-meter-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 6.5rem;
  text-align: end;
}

.fx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}

.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--target-touch);
  padding: 10px 24px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 80ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fx-btn svg {
  width: 16px;
  height: 16px;
}
.fx-btn:hover {
  background-color: var(--surface-sunken);
}
.fx-btn:active {
  transform: translateY(0.5px);
}
.fx-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.fx-btn:disabled {
  color: var(--text-disabled);
  background-color: var(--surface-sunken);
  border-color: var(--border);
  cursor: not-allowed;
}

.fx-btn-primary {
  color: var(--text-inverse);
  background-color: var(--action);
  border-color: var(--action);
}
.fx-btn-primary:hover {
  background-color: var(--brand);
  border-color: var(--brand);
}

.fx-btn-subtle {
  background-color: transparent;
  border-color: transparent;
  font-weight: 500;
}
.fx-btn-subtle:hover {
  background-color: var(--surface-sunken);
}

.fx-stats {
  display: flex;
  gap: 40px;
  margin-block-end: 24px;
}

.fx-stat {
  display: flex;
  flex-direction: column;
}

.fx-stat-n {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  align-self: flex-start;
}
.fx-stat-n.is-pending {
  color: var(--warn);
  border-block-end: 2px solid var(--warn);
}

.fx-stat-l {
  margin-block-start: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.fx-inv {
  margin-block-end: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.fx-inv-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 16px;
  padding: 12px 20px;
  font-size: 0.875rem;
}
.fx-inv-row + .fx-inv-row {
  border-block-start: 1px solid var(--border);
}
.fx-inv-row.is-filled {
  background-color: var(--surface-sunken);
}
.fx-inv-row.is-filled .fx-inv-v {
  font-weight: 600;
}

.fx-inv-k {
  font-weight: 600;
  color: var(--text-secondary);
}

.fx-inv-v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.fx-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.fx-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  border-block-end: 1px solid var(--border);
}
.fx-list li:last-child {
  border-block-end: 0;
}

.fx-list-muted li {
  color: var(--text-tertiary);
}

.fx-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--warn);
}

.fx-details {
  margin-block-start: 24px;
}
.fx-details summary {
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary);
  min-height: var(--target-touch);
  display: flex;
  align-items: center;
}
.fx-details summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.fx-details[open] summary {
  margin-block-end: 12px;
}

.setup-foot {
  margin-block-start: 32px;
  text-align: center;
  font-size: 0.875rem;
}

.fx-empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

@media (max-width: 991.98px) {
  .setup-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fx-rail {
    position: static;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding-block-end: 12px;
    scrollbar-width: none;
  }
  .fx-rail::-webkit-scrollbar {
    display: none;
  }
  .fx-step {
    grid-template-columns: auto;
    justify-items: center;
    flex-shrink: 0;
    min-width: 96px;
    text-align: center;
  }
  .fx-step::before {
    display: none;
  }
  .fx-step-name {
    font-size: 0.75rem;
  }
  .fx-step-note {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .fx-stats {
    gap: 24px;
  }
  .fx-inv-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.pl {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 132px);
}

.pl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.pl-bar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-month {
  margin: 0;
  min-width: 11rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: capitalize;
}

.pl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-touch);
  height: var(--target-touch);
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
}
.pl-icon-btn svg {
  width: 20px;
  height: 20px;
}
.pl-icon-btn:hover {
  background-color: var(--surface-sunken);
  color: var(--text);
}
.pl-icon-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.pl-kpis {
  display: flex;
  gap: 32px;
}

.pl-kpi {
  display: flex;
  flex-direction: column;
}
.pl-kpi.is-alert .pl-kpi-n {
  color: #b3261e;
  border-block-end: 2px solid #b3261e;
}

.pl-kpi-n {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  align-self: flex-start;
}

.pl-kpi-l {
  margin-block-start: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
  flex: 1;
}

.pl-grid-wrap {
  min-width: 0;
}

.pl-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin-block-end: 8px;
}
.pl-weekdays span {
  padding: 6px 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pl-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 1fr);
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.pl-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background-color: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: background-color 80ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pl-day:hover {
  background-color: var(--surface-sunken);
}
.pl-day:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  z-index: 1;
}
.pl-day.is-out {
  background-color: var(--canvas);
}
.pl-day.is-out .pl-day-n {
  color: var(--text-secondary);
}
.pl-day.is-closed {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--surface-sunken) 5px, var(--surface-sunken) 6px);
}
.pl-day.is-selected {
  background-color: var(--brand-faint);
  box-shadow: inset 0 0 0 2px var(--action);
}

.pl-day-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pl-day-n {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pl-day.is-today .pl-day-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 5px;
  color: var(--text-inverse);
  background-color: var(--action);
  border-radius: 999px;
}

.pl-day-today,
.pl-day-shut {
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-block-start: auto;
}

.pl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  border-radius: 2px;
}

.pl-density {
  display: block;
  height: 3px;
  border-radius: 2px;
  background-color: var(--border);
  overflow: hidden;
}
.pl-density span {
  display: block;
  height: 100%;
  background-color: var(--action);
  border-radius: inherit;
}

.pl-chip.pl-attendu {
  background-color: #b8730a;
}

.pl-key.pl-attendu {
  background-color: #b8730a;
}

.pl-item.pl-attendu .pl-key {
  background-color: #b8730a;
}
.pl-item.pl-attendu .pl-state {
  color: #b8730a;
}

.pl-chip.pl-confirme {
  background-color: #1f5fa8;
}

.pl-key.pl-confirme {
  background-color: #1f5fa8;
}

.pl-item.pl-confirme .pl-key {
  background-color: #1f5fa8;
}
.pl-item.pl-confirme .pl-state {
  color: #1f5fa8;
}

.pl-chip.pl-encours {
  background-color: #0f7a3d;
}

.pl-key.pl-encours {
  background-color: #0f7a3d;
}

.pl-item.pl-encours .pl-key {
  background-color: #0f7a3d;
}
.pl-item.pl-encours .pl-state {
  color: #0f7a3d;
}

.pl-chip.pl-pret {
  background-color: #0d7a75;
}

.pl-key.pl-pret {
  background-color: #0d7a75;
}

.pl-item.pl-pret .pl-key {
  background-color: #0d7a75;
}
.pl-item.pl-pret .pl-state {
  color: #0d7a75;
}

.pl-chip.pl-livre {
  background-color: #6b7280;
}

.pl-key.pl-livre {
  background-color: #6b7280;
}

.pl-item.pl-livre .pl-key {
  background-color: #6b7280;
}
.pl-item.pl-livre .pl-state {
  color: #6b7280;
}

.pl-chip.pl-manque {
  background-color: #b3261e;
}

.pl-key.pl-manque {
  background-color: #b3261e;
}

.pl-item.pl-manque .pl-key {
  background-color: #b3261e;
}
.pl-item.pl-manque .pl-state {
  color: #b3261e;
}

.pl-chip.pl-annule {
  background-color: #9aa1ab;
}

.pl-key.pl-annule {
  background-color: #9aa1ab;
}

.pl-item.pl-annule .pl-key {
  background-color: #9aa1ab;
}
.pl-item.pl-annule .pl-state {
  color: #9aa1ab;
}

.pl-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background-color: var(--border-strong);
}

.pl-key.pl-attendu {
  border-radius: 50%;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px #b8730a;
}

.pl-key.pl-confirme {
  border-radius: 50%;
}

.pl-key.pl-encours {
  border-radius: 1px;
}

.pl-key.pl-pret {
  border-radius: 1px;
  transform: rotate(45deg);
}

.pl-key.pl-livre {
  border-radius: 50%;
  opacity: 0.55;
}

.pl-key.pl-manque {
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 0.9;
}

.pl-key.pl-annule {
  border-radius: 999px;
  height: 3px;
  width: 12px;
}

.pl-item.pl-annule .pl-item-title {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.pl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.pl-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.pl-side {
  position: sticky;
  inset-block-start: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 2px 4px rgba(16, 19, 15, 0.14);
  overflow: hidden;
}

.pl-side-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--border);
  background-color: var(--surface-sunken);
}

.pl-side-date {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  flex: 1;
}

.pl-day-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-block-end: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.pl-day-rev {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.pl-shut {
  color: #b3261e;
  font-weight: 500;
}

.pl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(58vh, 640px);
  overflow-y: auto;
}

.pl-item {
  border-block-end: 1px solid var(--border);
}
.pl-item:last-child {
  border-block-end: 0;
}
.pl-item.is-overdue {
  box-shadow: inset 3px 0 0 #b3261e;
}

.pl-item-link {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 20px;
  color: inherit;
  text-decoration: none;
}
.pl-item-link:hover {
  background-color: var(--surface-sunken);
}
.pl-item-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.pl-item-time {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  padding-block-start: 1px;
}

.pl-noon {
  color: var(--text-disabled);
}

.pl-item-body {
  min-width: 0;
}

.pl-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pl-item-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.pl-web {
  font-size: 0.6875rem;
  padding: 1px 5px;
  border-radius: 2px;
  color: #1f5fa8;
  background-color: rgba(31, 95, 168, 0.1);
}

.pl-item-who,
.pl-item-svc {
  display: block;
  margin-block-start: 2px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
}

.pl-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.pl-item-amount {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pl-item-code {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.pl-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-tertiary);
}
.pl-empty svg {
  width: 34px;
  height: 34px;
  opacity: 0.5;
}
.pl-empty p {
  margin: 12px 0 20px;
  font-size: 0.875rem;
}

[data-day-panel].is-loading {
  opacity: 0.45;
  transition: opacity 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1199.98px) {
  .pl-split {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
@media (max-width: 991.98px) {
  .pl-split {
    grid-template-columns: 1fr;
  }
  .pl-side {
    position: static;
    max-height: none;
  }
  .pl-grid {
    grid-auto-rows: minmax(76px, auto);
  }
  .pl-chips {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .pl-bar {
    gap: 16px;
  }
  .pl-kpis {
    gap: 24px;
  }
  .pl-month {
    min-width: 0;
    font-size: 1.125rem;
  }
  .pl-item-link {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
  .pl-item-side {
    grid-column: 2;
    align-items: flex-start;
    text-align: start;
  }
}
.sg-section {
  margin-block-end: 20px;
}

.sg-body {
  padding: 16px;
}

.sg-label {
  margin-block: 24px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.sg-label:first-child {
  margin-block-start: 0;
}

.sg-note {
  margin-block-start: 12px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  max-width: 76ch;
}

.sg-note-before {
  margin-block: 0 8px;
}

.sg-prose {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 70ch;
  margin-block-start: 12px;
}

.sg-alert-spaced {
  margin-block-start: 24px;
}

.sg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sg-row-lg {
  gap: 20px;
}

.sg-stack {
  display: grid;
  gap: 12px;
}

.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.sg-swatch {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sg-swatch > i {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.sg-swatch > div {
  min-width: 0;
}
.sg-swatch .sg-swatch-name {
  font-size: 0.8125rem;
  font-weight: 600;
}
.sg-swatch .sg-swatch-note {
  display: block;
  margin-block-start: 2px;
}

.sg-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 20px;
}

.sg-scale {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sg-scale-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sg-scale-row code {
  width: 5.5rem;
  flex-shrink: 0;
}
.sg-scale-row i {
  display: block;
  height: 12px;
  background-color: var(--action);
  border-radius: 2px;
}

/* ---------------------------------------------------------------- le logo */
.inv-logo img {
  height: 34px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
}

/* ------------------------------------------------------- bandeau de faits */
.inv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background-color: var(--ui-border-light);
  border-block: 1px solid var(--ui-border-light);
}
.inv-facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.9rem;
  background-color: var(--ui-bg);
  min-width: 0;
}
.inv-facts dt {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ui-text-subtle);
}
.inv-facts dd {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}

/* ------------------------------------------- qui, et quelle voiture */
.inv-id {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
  padding-block: 0.9rem;
  border-block-end: 1px solid var(--ui-border-light);
}

.inv-id-col {
  min-width: 0;
}

.inv-id-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.3rem;
  padding-block-end: 0.25rem;
  border-block-end: 1px solid var(--ui-border-light);
}
.inv-id-head h3 {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-text-subtle);
  margin: 0;
}

.inv-id-rows {
  margin: 0;
}
.inv-id-rows > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  min-height: 1.4rem;
  padding-block: 0.12rem;
}
.inv-id-rows dt {
  font-size: 0.72rem;
  color: var(--ui-text-subtle);
  white-space: nowrap;
}
.inv-id-rows dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ui-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.inv-id-key {
  font-size: 0.95rem !important;
  font-weight: 700;
}

.inv-id-sep {
  color: var(--ui-text-subtle);
  font-size: 0.72rem;
}

.inv-id-empty {
  font-style: italic;
  color: var(--ui-text-subtle);
  font-size: 0.78rem;
}

.inv-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.inv-id-none {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ui-text-muted);
}

.inv-fact-strong {
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-fact-time {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-muted);
  white-space: nowrap;
}

.inv-fact-wait {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ui-text-subtle);
}

.inv-fact-worker .inv-worker-pick {
  max-width: 100%;
  min-width: 0;
}
.inv-fact-worker form {
  min-width: 0;
}

/* ------------------------------------------- titre de section et ses outils */
.inv-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.125rem 0.6rem;
}

.inv-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ui-text);
}
.inv-section-title::before {
  content: "";
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background-color: var(--ui-accent);
}

.inv-section-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ------------------------------------------------- historique du vehicule */
.vp-entry-ago {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ui-text-subtle);
  white-space: nowrap;
}

/* LA PRECISION SECONDAIRE DU PANNEAU — ET POURQUOI ELLE A SA PROPRE CLASSE
 *
 * `.ui-context-meta` ferait le meme effet visuel, mais le shell la met a
 * `display: none` sous 576 px : elle est concue pour les meta-donnees d'en-tete
 * de page, qu'on sacrifie volontiers sur un telephone.
 *
 * Reprise ici, elle aurait efface du telephone le compteur, la date relative
 * et le nom du livreur, ne laissant que la reference. Or c'est justement au
 * telephone, debout dans l'atelier, qu'on ouvre un passage ancien pour savoir
 * ce qui y a ete fait.
 */
.vp-bit {
  font-size: 0.7rem;
  color: var(--ui-text-muted);
}

.vp-entry-run {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.02rem 0.3rem;
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background-color: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

.vp-entry-go {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ui-border-light);
}

.vp-entry-note {
  margin-inline-end: auto;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--ui-text-muted);
  text-align: start;
}

/* -------------------------------------------------------------- telephone */
@media (max-width: 767.98px) {
  .inv-sheet {
    padding: 1rem 0.875rem 1.25rem;
  }
  .inv-head {
    flex-direction: column;
    gap: 0.875rem;
  }
  .inv-doc {
    text-align: start;
    min-width: 0;
  }
  .inv-logo img {
    height: 30px;
  }
  .inv-facts {
    grid-template-columns: 1fr 1fr;
  }
  .inv-fact-worker {
    grid-column: 1/-1;
  }
  .inv-id {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .inv-id-rows > div {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 0.3rem;
  }
  .inv-id-rows dt {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .inv-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .inv-section-tools > .ui-btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
  }
}
/* --------------------------------------------------- pastille d'utilisateur */
.uchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  background-color: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
  border: 1px solid transparent;
  cursor: help;
  user-select: none;
}

.uchip-none {
  background-color: transparent;
  border-color: var(--ui-border-light);
  color: var(--ui-text-subtle);
  font-weight: 400;
  cursor: default;
}

.ui-table th.ucol,
.ui-table td.ucol {
  width: 1%;
  text-align: center;
  white-space: nowrap;
  padding-inline: 0.35rem;
}

.ui-table th.ucol {
  font-size: 0.62rem;
  cursor: help;
}

/* ------------------------------------------------------------- origine */
.orig {
  display: inline-block;
  margin-inline-start: 0.35rem;
  padding: 0.02rem 0.28rem;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--castrol-grey-100);
  color: var(--ui-text-subtle);
  cursor: help;
}

.orig-web {
  background-color: var(--castrol-gold-light);
  color: var(--castrol-gold-dark);
}

/* ------------------------------------------------------------- le journal */
.aud {
  margin-top: 1.125rem;
  border: 1px solid var(--ui-border-light);
  border-radius: 8px;
  background-color: var(--ui-bg);
}
.aud > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.aud > summary::-webkit-details-marker {
  display: none;
}
.aud > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid var(--ui-text-subtle);
  transition: transform 0.15s ease;
}
.aud > summary:hover {
  background-color: var(--ui-bg-subtle);
}
.aud[open] > summary {
  border-block-end: 1px solid var(--ui-border-light);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.aud[open] > summary::before {
  transform: rotate(-90deg);
}

.aud-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ui-text);
}

.aud-count {
  font-size: 0.7rem;
  color: var(--ui-text-subtle);
  margin-inline-start: auto;
}

.aud-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.875rem 0.75rem;
}

.aud-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-block-end: 1px solid var(--ui-border-light);
}
.aud-item:last-child {
  border-block-end: 0;
}

.aud-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 1;
  min-width: 0;
}

.aud-what {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-text);
}

.aud-note {
  font-size: 0.72rem;
  color: var(--ui-text-muted);
  overflow-wrap: anywhere;
}

.aud-who {
  font-size: 0.68rem;
  color: var(--ui-text-subtle);
}

.aud-when {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

.aud-delivered .uchip {
  background-color: var(--castrol-green-light);
}

.aud-cancelled .uchip {
  background-color: var(--castrol-red-light);
  color: var(--castrol-red-dark);
}

.aud-reopened .uchip {
  background-color: var(--castrol-gold-light);
  color: var(--castrol-gold-dark);
}

/* ------------------------------------------------- actions rapides de statut */
.oqa {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  white-space: nowrap;
}

.oqa-main {
  display: inline-flex;
}

.oqa-more {
  padding-inline: 0.3rem;
}
.oqa-more svg {
  width: 15px;
  height: 15px;
}

.oqa-menu {
  position: relative;
}
.oqa-menu > .menu-list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 4px);
  z-index: 20;
  min-width: 190px;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background-color: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px -10px rgba(16, 20, 18, 0.35);
}
.oqa-menu > .menu-list li {
  margin: 0;
}
.oqa-menu > .menu-list form {
  display: block;
}
.oqa-menu .menu-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  text-align: start;
  text-decoration: none;
  color: var(--ui-text);
  cursor: pointer;
}
.oqa-menu .menu-item:hover, .oqa-menu .menu-item:focus-visible {
  background-color: var(--ui-bg-hover);
}
.oqa-menu .menu-item-danger {
  color: var(--castrol-red);
}
.oqa-menu .menu-item-danger:hover {
  background-color: var(--castrol-red-light);
}

/* -------------------------------------------------------------- telephone */
@media (max-width: 767.98px) {
  .aud-item {
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }
  .aud-when {
    width: 100%;
    padding-inline-start: calc(26px + 0.6rem);
  }
  .aud-list {
    padding-inline: 0.625rem;
  }
  .oqa {
    width: 100%;
    justify-content: stretch;
    gap: 0.5rem;
  }
  .oqa-main {
    flex: 1 1 auto;
  }
  .oqa-main > .ui-btn {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }
  .oqa-more {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 40px;
  }
  .oqa-menu > .menu-list {
    min-width: 210px;
  }
  .oqa-menu > .menu-list .menu-item {
    min-height: 42px;
    line-height: 1.5;
  }
}
.rv-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rv {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
}
.rv.is-hidden {
  background-color: var(--surface-sunken);
  border-style: dashed;
}
.rv.is-hidden .rv-said {
  color: var(--text-tertiary);
}

.rv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rv-head-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rv-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--warn);
}
.rv-stars svg {
  inline-size: 16px;
  block-size: 16px;
  fill: currentColor;
}
.rv-stars svg.is-off {
  color: var(--border-strong);
}
.rv-stars b {
  margin-inline-start: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.rv-said {
  margin: 16px 0 0;
  color: var(--text-primary);
}

.rv-said-none {
  color: var(--text-tertiary);
  font-style: italic;
}

.rv-reply {
  margin-block-start: 20px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border);
}
.rv-reply label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-block-end: 8px;
  font-weight: 600;
}
.rv-reply .ui-textarea {
  inline-size: 100%;
}

.rv-reply-tools {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 12px;
}

@media (max-width: 575.98px) {
  .rv {
    padding: 20px;
  }
  .rv-head {
    flex-direction: column;
  }
  .rv-head-tools {
    inline-size: 100%;
  }
  .rv-head-tools form {
    flex: 1;
  }
  .rv-head-tools .ui-btn {
    inline-size: 100%;
  }
  .rv-reply-tools .ui-btn {
    inline-size: 100%;
  }
}
.cms-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .cms-edit {
    grid-template-columns: 1fr;
  }
}

.cms-langs {
  display: flex;
  gap: 0.25rem;
  margin-block-end: 1rem;
  border-block-end: 1px solid var(--ui-border-light, #e3e8e4);
}
.cms-langs button {
  all: unset;
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ui-text-muted, #5b6b62);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}
.cms-langs button[aria-current=true] {
  color: var(--ui-text, #0b1c13);
  border-block-end-color: var(--ui-accent, #17804f);
}
.cms-langs button:hover {
  color: var(--ui-text, #0b1c13);
}
.cms-langs button:focus-visible {
  outline: 2px solid var(--ui-accent, #17804f);
  outline-offset: -2px;
}
.cms-langs .cms-lang-state {
  font-weight: 400;
  color: var(--ui-text-subtle, #7a8a81);
  margin-inline-start: 0.35rem;
  font-size: 0.75rem;
}

.cms-block {
  margin-block-end: 0.9rem;
}
.cms-block .ui-panel-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cms-block .ui-panel-head h2 {
  flex: 1;
}
.cms-block .cms-block-tools {
  display: flex;
  gap: 0.25rem;
}

.cms-items {
  display: grid;
  gap: 0.75rem;
  margin-block: 0.5rem;
}
.cms-items .cms-item {
  padding: 0.75rem;
  border: 1px solid var(--ui-border-light, #e3e8e4);
  border-radius: 6px;
  background: var(--ui-bg-subtle, #f6f8f6);
}

.cms-addbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px dashed var(--ui-border, #cdd6cf);
  border-radius: 6px;
}
.cms-addbar .ui-btn {
  font-size: 0.8125rem;
}

.cms-side {
  display: grid;
  gap: 1rem;
  position: sticky;
  inset-block-start: 1rem;
}

.cms-side .ui-panel-body > * + * {
  margin-block-start: 0.75rem;
}

.cms-check {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.cms-check::before {
  content: "";
  flex: none;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-block-start: 0.35rem;
  border-radius: 50%;
  background: #17804f;
}
.cms-check.is-warn::before {
  background: #c27803;
}
.cms-check.is-error::before {
  background: #b42318;
}

.serp {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ui-border-light, #e3e8e4);
  border-radius: 6px;
  background: #fff;
  font-family: Arial, sans-serif;
}
.serp .serp-url {
  color: #202124;
  font-size: 0.75rem;
  margin: 0 0 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.serp .serp-title {
  color: #1a0dab;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.serp .serp-desc {
  color: #4d5156;
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0.2rem 0 0;
}

.cms-counter {
  font-size: 0.75rem;
  color: var(--ui-text-subtle, #7a8a81);
  float: inline-end;
}

.cms-counter.is-over {
  color: #b42318;
  font-weight: 600;
}

.cms-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.8125rem;
}

.cms-history li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.cms-langchips {
  display: inline-flex;
  gap: 0.2rem;
}

.cms-langchips span {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: var(--ui-bg-subtle, #f0f3f0);
  color: var(--ui-text-subtle, #7a8a81);
  text-transform: uppercase;
}

.cms-langchips span.is-on {
  background: #dff3e7;
  color: #0a4a2d;
}

/* ==========================================================================
   1. La barre du haut — le bouton menu ecrase
   ==========================================================================

   MESURE : le bouton menu faisait 10 px de large.

   La barre est une rangee flexible. Le logo y est declare `flex-shrink: 0`
   et occupe 165 px fixes ; le bouton menu, lui, est reductible. Quand la
   somme depasse la largeur, c'est donc lui qui absorbe tout le manque —
   jusqu'a disparaitre.

   Or c'est le SEUL acces a la navigation au telephone : le rail est un tiroir
   ferme, et rien d'autre ne l'ouvre. Un menu de 10 px rend la console
   entiere inaccessible, et l'ecran ne montre aucun symptome — le bouton est
   la, il est simplement trop mince pour etre touche.

   On protege donc la cible d'abord, et on laisse le logo ceder a sa place. */
@media (max-width: 991.98px) {
  .ui-burger {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .ui-logo {
    flex-shrink: 1;
    min-width: 0;
    min-height: 44px;
    overflow: hidden;
  }
  .ui-avatar-btn,
  .ui-topmenu {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  /* ---------------------------------------------------------------------
     LA BARRE DE CONTEXTE SOUS 992 px

     MESURE : a 375 px, la barre portait le nom de l'atelier, la pastille
     « Actif », la ville, le selecteur et le champ matricule. La somme
     depassait largement la largeur de l'ecran, et la barre — qui defile
     lateralement — poussait le champ HORS CHAMP. Le geste le plus frequent
     du comptoir demandait donc de faire glisser une barre dont rien
     n'annoncait qu'elle glissait.

     On inverse la priorite : le champ prend la place, le nom cede.
     --------------------------------------------------------------------- */
  .ui-plate {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ui-plate input {
    width: 100%;
  }
  .ui-context-name {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ui-context-name svg {
    display: none;
  }
  .ui-contextbar {
    overflow-x: visible;
  }
}
/* ==========================================================================
   2. Les barres d'onglets qui sortent de l'ecran
   ==========================================================================

   MESURE : sur « Site web », les onglets s'etendaient jusqu'a 733 px. Les
   trois derniers — Mediatheque, Ateliers, Acces — n'etaient pas atteignables.
   Meme constat sur « Services », dont les segments Repair, Inspection et
   Other sortaient a 543 px.

   Ces barres n'ont pas de conteneur de defilement : elles debordent en
   silence. On leur en donne un, avec l'inertie tactile et un rappel visuel
   qu'il reste quelque chose a droite. */
@media (max-width: 767.98px) {
  /* LA PASTILLE « ACTIF » DISPARAIT SUR TELEPHONE

     Elle dit l'etat NORMAL. Sur un ecran ou chaque pixel de largeur est
     dispute par le champ matricule, une pastille verte qui confirme que tout
     va bien coute de la place et n'apprend rien.

     « Inactif » reste, evidemment : c'est le cas qui appelle une explication
     — l'atelier ne parait plus sur le site public, et rien d'autre ne le dit. */
  .ui-contextbar .ui-pill-ok {
    display: none;
  }
  .tabs,
  .mc-segment {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar,
  .mc-segment::-webkit-scrollbar {
    display: none;
  }
  .tabs > *,
  .mc-segment > * {
    flex: 0 0 auto;
  }
  .mc-segment {
    border-radius: 5px;
  }
  .tabs .tab,
  .mc-segment a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
/* ==========================================================================
   3. Les tableaux deviennent des cartes
   ==========================================================================

   MESURE : vue d'ensemble 498 px, ateliers 511 px, marques 561 px, pour un
   ecran de 376. Dans les trois cas, la colonne d'actions tombait hors champ.

   Le tableau se lit en colonnes parce que l'oeil compare verticalement. Sur
   un ecran de la largeur d'une main, il n'y a plus de colonnes a comparer :
   il reste une suite de fiches. On les presente donc comme telles.

   L'intitule de chaque valeur vient de `data-label`, pose par
   mc-tablecards.js depuis l'en-tete du tableau. Sans ce script, la regle
   `::before` n'affiche rien et la ligne reste lisible — le repli ne casse
   pas, il perd seulement ses intitules.

   Le tableau reste un `<table>` : le lecteur d'ecran continue d'annoncer
   « tableau, 6 colonnes », et l'en-tete n'est pas supprime mais masque
   visuellement. */
@media (max-width: 767.98px) {
  .ui-table-wrap:has(table.ui-table-cards) {
    overflow-x: visible;
  }
  table.ui-table.ui-table-cards {
    display: block;
    width: 100%;
  }
  table.ui-table.ui-table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.ui-table.ui-table-cards tbody {
    display: block;
  }
  table.ui-table.ui-table-cards tbody tr {
    display: block;
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background-color: var(--ui-bg);
  }
  table.ui-table.ui-table-cards tbody tr:last-child {
    margin-bottom: 0;
  }
  table.ui-table.ui-table-cards tbody tr:hover {
    background-color: var(--ui-bg);
  }
  table.ui-table.ui-table-cards tbody tr.is-low,
  table.ui-table.ui-table-cards tbody tr.is-low:hover {
    background-color: var(--danger-surface);
    border-inline-start: 3px solid var(--danger);
    box-shadow: none;
  }
  table.ui-table.ui-table-cards tbody td.d-none {
    display: flex !important;
  }
  table.ui-table.ui-table-cards tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: auto;
    padding: 0.3rem 0;
    border: 0;
    text-align: end;
    white-space: normal;
  }
  table.ui-table.ui-table-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-text-subtle);
    text-align: start;
  }
  table.ui-table.ui-table-cards tbody td:not([data-label]) {
    justify-content: flex-end;
  }
  table.ui-table.ui-table-cards tbody td:first-child:not(.col-check),
  table.ui-table.ui-table-cards tbody td.col-check + td {
    padding-top: 0;
    padding-bottom: 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--ui-border-light);
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: start;
  }
  table.ui-table.ui-table-cards tbody td:first-child:not(.col-check)::before,
  table.ui-table.ui-table-cards tbody td.col-check + td::before {
    display: none;
  }
  table.ui-table.ui-table-cards tbody td.col-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: stretch;
    padding: 0.625rem 0 0;
    margin-top: 0.35rem;
    border-top: 1px solid var(--ui-border-light);
  }
  table.ui-table.ui-table-cards tbody td.col-actions::before {
    display: none;
  }
  table.ui-table.ui-table-cards tbody td.col-actions > * {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }
  table.ui-table.ui-table-cards tbody td.col-check {
    width: auto;
    padding: 0 0 0.35rem;
    justify-content: flex-start;
    border: 0;
  }
  table.ui-table.ui-table-cards tbody td.col-check::before {
    display: none;
  }
  table.ui-table.ui-table-cards tbody tr td[colspan] {
    display: block;
    text-align: center;
    border: 0;
    font-weight: 400;
    font-size: 0.875rem;
  }
  table.ui-table.ui-table-cards tbody tr td[colspan]::before {
    display: none;
  }
}
/* ==========================================================================
   4. Les cibles du doigt dans les listes
   ==========================================================================

   MESURE : « Modifier » et « Supprimer » faisaient 31 px de haut pour 51 de
   large. Places cote a cote a quelques pixels d'ecart, ils s'atteignaient mal
   et se confondaient — et l'un des deux supprime.

   La regle ne vaut que pour le pointeur grossier : a la souris, la densite de
   la console reste ce qu'elle est. */
@media (pointer: coarse) {
  .ui-row-action {
    min-height: 44px;
    padding-inline: 0.5rem;
    align-items: center;
  }
  .col-actions > * + * {
    margin-inline-start: 0.25rem;
  }
  .tabc-sel {
    min-height: 44px;
  }
  /* L'ORDRE DE TRAVAIL : L'ECRAN LE PLUS UTILISE ETAIT LE MOINS TOUCHABLE

     Sa barre d'actions porte ses propres classes — `.oab-*` — avec leurs
     propres hauteurs, posees sans passer par `.ui-btn`. La regle tactile
     generale ne les voyait donc pas. Mesure au doigt sur
     CASA-2026-000001 : retour 32 px, et les six actions de la barre
     (encaisser, offrir, imprimer, annuler…) a 36 px. */
  .oab-btn,
  .oab-back {
    min-height: 44px;
  }
  /* Ces deux-la etaient deja releves — de 32 a 40 px — mais sous une regle
     de LARGEUR (max-width: 767.98px). Deux consequences : 40 reste sous la
     cible, et une fenetre etroite a la souris subissait l'agrandissement
     sans en avoir besoin.

     La specificite (0,2,0) depasse celle de la regle tactile generale : il
     faut la reprendre a l'identique pour la corriger. */
  .inv-section-tools > .ui-btn,
  .oqa-main > .ui-btn,
  .oqa-more {
    min-height: 44px;
  }
  /* La reference d'un ordre, dans le tableau de l'atelier. C'est le lien par
     lequel on ouvre le dossier — le geste le plus frequent de cet ecran — et
     il ne portait aucune regle de hauteur : 23 px, celle de sa ligne de
     texte. Il faut le passer en boite pour qu'une hauteur s'applique a lui. */
  .wb-ref {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* LES DEUX CHAMPS DE RECHERCHE N'ETAIENT PAS DES `.ui-input`

     La regle tactile nomme des classes ; ces deux entrees n'en portent
     aucune — elles sont designees par leur conteneur. Elles echappaient donc
     au relevement, alors que ce sont les champs les plus sollicites de la
     console.

     Le defaut se voyait surtout sur une tablette large : au-dela de 992 px
     le repli ne s'applique plus, et la recherche globale restait a 30 px
     sous un doigt. Mesure a 1024 px avec pointeur grossier : 30 px pour
     « Aller a... », 32 px pour la recherche de liste. */
  .ui-goto input,
  .ui-search-group input,
  .ui-plate input {
    min-height: 44px;
  }
  :root {
    --ui-contextbar-height: 56px;
  }
  .row-open {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* CE QUI ETAIT ECRIT ICI ANNULAIT LA CIBLE TACTILE

     Ce bloc reglait `.ui-btn` a 38 px et `.ui-btn-sm` a 34. Cette feuille
     etant chargee en dernier (voir console/_index.scss), ces deux lignes
     gagnaient sur le `min-height: 44px` pose sous le meme `(pointer:
     coarse)` dans console/_domain.scss : meme specificite, declaration
     posterieure.

     La regle des 44 px existait donc, documentee, et ne s'appliquait a
     aucun bouton de l'application. Mesure au doigt avant retrait : 38 px
     sur les boutons, 34 sur « Desactiver ».

     Rien ne les remplace : `.ui-btn` est deja traite dans _domain.scss. */
}
/* ==========================================================================
   5. Le tiroir de navigation
   ==========================================================================

   Le rail s'ouvre deja en tiroir sous 992 px. Trois manques restaient :
   la hauteur reelle sur iOS, le defilement du contenu long, et la fermeture
   au doigt. */
@media (max-width: 991.98px) {
  .ui-sidebar {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ui-nav-item,
  .ui-nav-sublink {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
/* ==========================================================================
   6. Formulaires et dialogues
   ==========================================================================

   Un champ dont le texte est inferieur a 16 px declenche, sur iOS, un zoom
   automatique a la mise au point. L'ecran saute, le champ suivant n'est plus
   ou il etait, et le zoom ne revient pas seul. C'est la cause la plus
   frequente de saisie penible sur telephone, et elle ne se voit pas au
   bureau. */
@media (max-width: 767.98px) {
  .ui-input,
  .ui-select,
  .ui-textarea,
  input[type=text],
  input[type=number],
  input[type=tel],
  input[type=email],
  input[type=password],
  input[type=search],
  input[type=date],
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea {
    min-height: 88px;
  }
  .ui-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .ui-form-actions > .ui-btn {
    width: 100%;
  }
  .ui-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}
/* ==========================================================================
   7. Le rappel de defilement lateral
   ==========================================================================

   Les tableaux non replies — sans en-tete, ou marques `data-no-cards` —
   defilent encore de cote. Rien ne l'annoncait. Un degrade au bord droit dit
   qu'il reste du contenu, et disparait quand on atteint la fin. */
@media (max-width: 767.98px) {
  .ui-table-wrap:not(:has(table.ui-table-cards)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(to right, var(--ui-bg) 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), var(--ui-bg) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}
/* ==========================================================================
   8. La recherche repliee
   ==========================================================================

   MESURE : sous 992 px, `.ui-goto` etait mis a `display: none`. Le champ
   « Aller a... » et son badge Ctrl K disparaissaient donc entierement sur
   tablette et sur telephone.

   Deux consequences, l'une visible et l'autre non :

     - la seule facon d'atteindre une fiche par son nom — sur une console de
       vingt-six ecrans — n'existait plus sur l'appareil que le gerant tient
       en main dans l'atelier ;

     - le raccourci restait branche. Son gestionnaire appelait
       `preventDefault()` puis `focus()` sur un element masque : le navigateur
       perdait son propre Ctrl K, et l'utilisateur n'obtenait rien en echange.
       Mesure a 617 px : `defaultPrevented: true`, `focus: false`.

   La recherche se replie donc en pastille de 44 px, et se deploie sur toute
   la barre des qu'elle recoit la mise au point — au doigt comme au clavier.
   Le deploiement tient dans `:focus-within` : aucun script ne le pilote, donc
   rien ne peut le desynchroniser. */
@media (max-width: 991.98px) {
  .ui-goto {
    width: 44px;
    flex-shrink: 0;
  }
  /* Repliee, l'entree EST la pastille : transparente, mais toujours
     cliquable et atteignable au clavier. Pas de second bouton a maintenir,
     et le pictogramme dessous reste visible. */
  .ui-goto input {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border-color: transparent;
    background-color: transparent;
    opacity: 0;
    cursor: pointer;
  }
  .ui-goto .goto-icon {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
  }
  /* Le badge annonce un raccourci clavier. Il n'a rien a dire a un doigt. */
  .ui-goto kbd {
    display: none;
  }
  /* Deployee : elle recouvre la barre. `.ui-globalbar` est en
     `position: sticky`, donc elle sert de reference au positionnement. */
  .ui-goto:focus-within {
    position: absolute;
    inset-inline: 0.75rem;
    width: auto;
    z-index: 1;
  }
  .ui-goto:focus-within input {
    opacity: 1;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    padding-inline: 2.5rem 0.875rem;
    background-color: var(--ui-bg);
    border-color: var(--ui-accent);
    cursor: text;
  }
  .ui-goto:focus-within .goto-icon {
    left: 0.9375rem;
    transform: translateY(-50%);
  }
}
/* ==========================================================================
   9. Les filtres du stock et des ventes
   ==========================================================================

   MESURE : le journal des ventes aligne SIX filtres — recherche, reglement,
   etat, du, au, par page — plus deux boutons. La rangee est flexible et
   `.vt-f-large` reclame 16 rem : a 375 px, chaque champ prend une ligne
   entiere, les listes deroulantes se calent sur leur contenu et debordent du
   panneau, et les deux boutons finissent seuls tout en bas, pousses a droite
   par un `margin-inline-start: auto` qui n'a plus de sens sur une colonne.

   Resultat : cinq cents pixels de formulaire avant la premiere vente.

   CE QU'ON FAIT, ET CE QU'ON NE FAIT PAS

   On ne cache rien derriere un depliant : le gerant qui filtre au telephone
   sait ce qu'il cherche, et un clic de plus a chaque filtre coute davantage
   qu'un ecran un peu plus long.

   On passe en GRILLE DE DEUX COLONNES. Les champs vont par paires — « Du » et
   « Au » cote a cote, « Reglement » et « Etat » cote a cote — ce qui est
   d'ailleurs leur lecture naturelle. La recherche et les boutons prennent la
   largeur. Le formulaire perd la moitie de sa hauteur sans rien perdre.
   ========================================================================== */
@media (max-width: 575.98px) {
  .vt-filtres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 0.6rem 0.5rem;
    padding: 0.75rem 0.875rem;
  }
  .vt-f-large {
    grid-column: 1/-1;
  }
  .vt-f-champ {
    min-width: 0;
  }
  .vt-f-champ .ui-input,
  .vt-f-champ .ui-select {
    width: 100%;
    min-width: 0;
  }
  /* Les boutons prennent la ligne et se partagent la largeur. Le
     « margin-inline-start: auto » de la version bureau les collait a droite
     en colonne unique, ou il ne veut plus rien dire. */
  .vt-f-actions {
    grid-column: 1/-1;
    margin-inline-start: 0;
  }
  .vt-f-actions .ui-btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
  }
  /* ---- La barre d'outils du stock ----

     MESURE : segment + recherche + liste de categories sur une seule rangee
     flexible. Le segment defile deja (section 2), mais la liste de
     categories se calait sur « Consommables et divers » et poussait la
     recherche a 90 px de large.

     Chaque element prend donc sa ligne, et la liste perd son `width: auto`
     pose en style en ligne dans la vue — d'ou le `!important`, seul moyen
     de le battre depuis une feuille. */
  .ui-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
  }
  .ui-toolbar .ui-search-group,
  .ui-toolbar > .ui-select {
    width: 100% !important;
    max-width: none;
  }
  .ui-toolbar .ui-search-group input,
  .ui-toolbar .ui-search-group .ui-btn,
  .ui-toolbar > .ui-select {
    min-height: 44px;
  }
  /* ---- Les compteurs du stock ----

     Quatre cartes en rangee tombaient a 78 px de large : « Valeur du stock »
     tenait sur trois lignes et le nombre passait sous le libelle. Deux par
     deux, chacune retrouve la place de son chiffre — qui est ce qu'on vient
     lire. */
  .ui-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

/*# sourceMappingURL=mc-console.css.map */