@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;
}
: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);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(16, 19, 15, 0.5);
  animation: overlay-in 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
}
.dialog {
  width: min(520px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  padding: 0;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
  color: var(--text);
}
.dialog::backdrop {
  background-color: rgba(16, 19, 15, 0.5);
}
.dialog[open] {
  animation: dialog-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.dialog-lg {
  width: min(820px, 100vw - 32px);
}

.dialog-sm {
  width: min(400px, 100vw - 32px);
}

.dialog-head, .drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-block-end: 1px solid var(--border);
}
.dialog-head h2, .drawer-head h2 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.dialog-head .dialog-description, .drawer-head .dialog-description {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-block-start: 2px;
}
.dialog-head .dialog-close, .drawer-head .dialog-close {
  margin-inline-start: auto;
}

.dialog-body {
  padding: 24px;
  overflow-y: auto;
}

.dialog-foot, .drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-block-start: 1px solid var(--border);
  background-color: var(--surface-sunken);
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

.dialog-intent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--danger-surface);
  color: var(--danger-text);
}
.dialog-intent svg {
  width: 20px;
  height: 20px;
}

.dialog-intent-warn {
  background-color: var(--warn-surface);
  color: var(--warn-text);
}

.dialog-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(480px, 100vw);
  background-color: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-dialog);
  animation: drawer-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}
.drawer-lg {
  width: min(720px, 100vw);
}

.drawer-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.drawer-foot {
  border-radius: 0;
}

@media (max-width: 767.98px) {
  .drawer {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 90vh;
    border-inline-start: none;
    border-block-start: 1px solid var(--border);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    animation-name: drawer-in-bottom;
  }
  @keyframes drawer-in-bottom {
    from {
      transform: translateY(100%);
    }
  }
}
.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);
}

: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);
  --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;
}

body.ui {
  margin: 0;
  background-color: var(--ui-bg-subtle);
  color: var(--ui-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  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)
   ========================================================================== */
.ui-contextbar {
  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;
}

/* ==========================================================================
   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;
  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;
}

.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;
}

/* 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;
}

.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;
}

.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 >" */
.ui-row-action {
  color: var(--ui-accent);
  text-decoration: none;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.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-goto {
    display: none;
  }
  .ui-topmenu-hideable {
    display: none;
  }
  .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;
  }
  .ui-btn {
    min-height: 38px;
  }
}
/* ==========================================================================
   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
   Repose sur <dialog> natif : piege le focus et gere Echap sans JavaScript.
   ========================================================================== */
.mc-dialog {
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-bg);
  color: var(--ui-text);
  box-shadow: 0 24px 64px -16px rgba(16, 20, 18, 0.35);
  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);
}

.mc-dialog::backdrop {
  background: rgba(16, 20, 18, 0.45);
  backdrop-filter: blur(2px);
}

.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;
}

.mc-dialog-icon.i-danger {
  background: var(--castrol-red-light);
  color: var(--castrol-red-dark);
}

.mc-dialog-icon.i-warn {
  background: #fdf3e2;
  color: var(--castrol-gold-dark);
}

.mc-dialog-icon.i-info {
  background: #eef4fa;
  color: #1c5fa8;
}

.mc-dialog-icon.i-ok {
  background: var(--ui-accent-soft);
  color: var(--castrol-green-dark);
}

/* 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;
}

/* 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 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--ui-border-light);
}

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

.inv-party p {
  margin: 0 0 0.12rem;
  font-size: 0.82rem;
}

.inv-party p.inv-party-name {
  font-size: 1rem;
  font-weight: 700;
}

.inv-party p.inv-party-note {
  font-size: 0.72rem;
  color: var(--ui-text-muted);
  margin-top: 0.25rem;
}

.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);
}

.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-parties, .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);
}

.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.
   ========================================================================== */
.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;
}

.wb-stock tr.is-out {
  background: var(--castrol-red-light);
}

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

@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;
}

.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;
}

.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);
}

/* Appelee depuis le menu : elle se signale, puis se tait. */
.ui-plate.is-called {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 4px var(--ui-accent-soft);
}

@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 {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fct-logo .t-mr {
  color: var(--ui-accent, #00843d);
}
.fct-logo .t-castrol {
  color: var(--castrol-red, #c8102e);
}

.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);
}

.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);
}

.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: 1.125rem;
  border-bottom: 1px solid var(--ui-border-light);
}

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

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

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

.vp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ui-accent-soft);
  border-bottom: 1px solid #b7e0c9;
}

.vp-stat {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.6rem;
}

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

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

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

.vp-entry > summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 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-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.vp-entry-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

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

.vp-entry-shop {
  font-size: 0.72rem;
  color: var(--ui-text-muted);
}

.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.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.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, .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;
}

.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;
}

.tabc-tabs {
  display: flex;
  gap: 2px;
  padding-inline-start: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabc-tabs::-webkit-scrollbar {
  display: none;
}

.tabc-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: stretch;
  white-space: nowrap;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  border-start-start-radius: 6px;
  border-start-end-radius: 6px;
}
.tabc-tab:hover {
  background-color: var(--surface);
}
.tabc-tab.is-on {
  background-color: var(--surface);
  border-block-end-color: transparent;
  margin-block-end: -1px;
}
.tabc-tab.is-on .tabc-tab-link {
  color: var(--text);
  font-weight: 600;
  padding-block-end: calc(16px + 1px);
}

.tabc-tab-link {
  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;
}
.tabc-tab-link svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
}
.tabc-tab:hover .tabc-tab-link {
  color: var(--text);
}

.tabc-tab-n {
  padding: 0 10px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  background-color: var(--surface);
  border: 1px solid var(--border);
}
.tabc-tab.is-on .tabc-tab-n {
  background-color: var(--surface-sunken);
}

.tabc-close {
  display: inline-flex;
  align-items: center;
  padding-inline: 16px 20px;
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 1.125rem;
  line-height: 1;
}
.tabc-close:hover {
  color: var(--danger);
}

.tabc-panel {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  border-start-start-radius: 0;
  background-color: var(--surface);
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 1px 2px rgba(16, 19, 15, 0.14);
}

.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) {
  .tabc-tab {
    padding-inline: 16px;
    font-size: 0.8125rem;
  }
  .tabc-tab:not(.is-on) span:not(.tabc-tab-n) {
    display: none;
  }
  .tabc-panel {
    padding: 20px;
  }
  .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;
}

.login-logo .logo-text {
  font-size: clamp(2rem, 7vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.login-logo .logo-mr {
  color: var(--castrol-green);
}

.login-logo .logo-castrol {
  color: var(--castrol-red);
}

/* 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);
}

.login-card select.login-secondary {
  text-align: center;
  text-align-last: 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 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-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 {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.setup-bar-logo .t-mr {
  color: var(--brand);
}
.setup-bar-logo .t-castrol {
  color: var(--danger);
}

.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);
  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);
}
.fx-card:hover {
  box-shadow: 0 0 2px rgba(16, 19, 15, 0.12), 0 4px 8px rgba(16, 19, 15, 0.14);
}
.fx-card.is-locked {
  box-shadow: none;
  background-color: var(--surface-sunken);
}
.fx-card.is-locked:hover {
  box-shadow: none;
}

.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-disabled);
}
.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-tertiary);
}

.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;
}

.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;
}

.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-parties {
    grid-template-columns: 1fr;
  }
  .inv-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .inv-section-tools > .ui-btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
  }
}
/* ==========================================================================
   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;
  }
}
/* ==========================================================================
   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) {
  .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 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: 38px;
    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: 38px;
    padding-inline: 0.5rem;
    align-items: center;
  }
  .col-actions > * + * {
    margin-inline-start: 0.25rem;
  }
  .ui-btn {
    min-height: 38px;
  }
  .ui-btn-sm {
    min-height: 34px;
  }
}
/* ==========================================================================
   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;
  }
}

/*# sourceMappingURL=mc-console.css.map */