/* Dashboard layout and components. Colours come from tokens.css so both
   themes stay in sync and contrast is decided in one place. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ar-bg);
  color: var(--ar-text);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

/*
 * A fixed-height app shell (not min-height): the header stays put and the sidebar/main each scroll
 * independently within the remaining space, so a long Overview page (many KPI cards + per-dealer
 * tables) never drags the sidebar's own nav out of view - a real usability fix over the previous
 * two-column grid, which stretched the sidebar to match main's full content height and left the
 * role-switcher/session controls stranded at the bottom of a very tall, non-sticky box.
 */
.ar-shell { display: flex; flex-direction: column; height: 100vh; }
.ar-shell__body { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; }

/* ---------- header ---------- */
.ar-header {
  background: var(--ar-header);
  border-bottom: 1px solid var(--ar-border);
  padding: 10px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
/* The next lot: the first four ads of a seller's list, numbered, arranged by dragging (src/main.js). */
.ar-lot-hint { margin: 0 0 8px; font-size: 12px; }
.ar-batch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ar-btn--outline { background: transparent; color: var(--ar-text); border: 1px solid var(--ar-border); }
.ar-btn--outline:hover { background: var(--ar-surface-hover); }
.ar-lot { display: flex; flex-direction: column; gap: 12px; }
.ar-lot__label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ar-text-muted); }
/* The next lot stays pinned at the top of the scrolling page, so any ad below can be dragged straight into it. */
.ar-lot__slots {
  position: sticky; top: 0; z-index: 4; padding: 8px 0 2px; background: var(--ar-surface);
  border-bottom: 1px solid var(--ar-border); box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5);
}

.ar-task-card { position: relative; }
.ar-task-card--slot { box-shadow: inset 0 0 0 2px var(--ar-primary); }
.ar-slot-badge {
  position: absolute; top: 6px; left: 6px; z-index: 1; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--ar-primary); color: var(--ar-on-primary); font-size: 12px; font-weight: 700;
}
.ar-task-card.ar-drop-swap { box-shadow: inset 0 0 0 3px var(--ar-primary); }
.ar-task-card.ar-drop-before { box-shadow: inset 4px 0 0 var(--ar-primary); }
.ar-task-card.ar-drop-after { box-shadow: inset -4px 0 0 var(--ar-primary); }
/* Draggable menus / sub-menus (src/core/menu-order.js): a drop marker on the side the item will land. */
[data-drag-kind] { cursor: grab; }
[data-drag-kind].ar-dragging { opacity: 0.4; }
.ar-nav__item.ar-drop-before { box-shadow: inset 0 3px 0 var(--ar-primary); }
.ar-nav__item.ar-drop-after { box-shadow: inset 0 -3px 0 var(--ar-primary); }
.ar-tab.ar-drop-before { box-shadow: inset 3px 0 0 var(--ar-primary); }
.ar-tab.ar-drop-after { box-shadow: inset -3px 0 0 var(--ar-primary); }
.ar-brand { display: flex; align-items: center; gap: 10px; }
/* The AutoReady AI logo (ui/components.js#brandLogo): "Ready" follows the page's text colour, "Auto" a blue that
   reads on both backgrounds. */
.ar-logo { height: 46px; width: auto; display: block; }
.ar-logo__name { font: 800 46px/1 Poppins, Montserrat, 'Segoe UI', Arial, sans-serif; letter-spacing: -1px; }
.ar-logo__auto { fill: #1d4ed8; }
.ar-logo__ready { fill: var(--ar-text); }
.ar-logo__rule { stroke: #93c5fd; stroke-width: 2; stroke-linecap: round; }
.ar-logo__tag { font: 700 20px/1 Poppins, Montserrat, 'Segoe UI', Arial, sans-serif; letter-spacing: 7px; fill: #2563eb; }
:root:not([data-theme="light"]) .ar-logo__auto { fill: #60a5fa; }
:root:not([data-theme="light"]) .ar-logo__tag { fill: #60a5fa; }
.ar-login__card .ar-logo { height: 52px; }
.ar-brand__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--ar-primary); color: var(--ar-on-primary); font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.ar-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.ar-brand__name { font-weight: 700; font-size: 15px; color: var(--ar-header-text); }
.ar-brand__caption { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ar-header-text-muted); }

.ar-header__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ar-header__sync, .ar-header__backend {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ar-header-text-muted);
  white-space: nowrap;
}
.ar-btn--sync { display: inline-flex; align-items: center; gap: 6px; }
.ar-icon { display: inline-block; vertical-align: -3px; }
/* Same fixed light-on-dark reasoning as .ar-brand__name above - the plain .ar-btn--ghost tone
   (--ar-text-muted/--ar-border) is tuned for a theme-matched surface, not this always-dark header. */
.ar-header .ar-btn--ghost { color: var(--ar-header-text-muted); border-color: rgba(244, 246, 248, 0.28); }
.ar-header .ar-btn--ghost:hover { background: rgba(244, 246, 248, 0.1); color: var(--ar-header-text); }

/* Language switcher (core/i18n.js) - same always-dark header surface as .ar-header .ar-btn--ghost
   above, so its unselected state reads consistently next to Sync now/Configuration rather than
   using the theme-matched .ar-role tone tuned for the light sidebar instead. */
.ar-lang-switcher { display: flex; gap: 4px; }
.ar-lang {
  padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12px;
  background: transparent; color: var(--ar-header-text-muted); border: 1px solid rgba(244, 246, 248, 0.28);
}
.ar-lang:hover { background: rgba(244, 246, 248, 0.1); color: var(--ar-header-text); }
.ar-lang--active { background: var(--ar-primary); border-color: var(--ar-primary); color: var(--ar-on-primary); }

/* ---------- sidebar ---------- */
.ar-sidebar {
  background: var(--ar-sidebar);
  border-right: 1px solid var(--ar-border);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0; overflow-y: auto;
}
/* Same fix as .ar-main > * below - stops flexbox from silently shrinking the nav/footer-block
   instead of letting the sidebar's own overflow-y:auto scroll them. */
.ar-sidebar > * { flex-shrink: 0; }
.ar-sidebar__caption { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ar-text-subtle); }
.ar-session { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar-session__identity { display: flex; flex-direction: column; gap: 1px; font-size: 13px; overflow: hidden; }
.ar-session__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-btn--ghost { background: transparent; color: var(--ar-text-muted); border: 1px solid var(--ar-border); }
.ar-btn--ghost:hover { background: var(--ar-surface-hover); color: var(--ar-text); }

.ar-sidebar__footer-block { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ar-border); }

.ar-roles-block { display: flex; flex-direction: column; gap: 6px; }
.ar-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-role {
  flex: 1 1 auto; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  background: var(--ar-surface); color: var(--ar-text-muted);
  border: 1px solid var(--ar-border); font-size: 12px;
}
.ar-role:hover { background: var(--ar-surface-hover); color: var(--ar-text); }
.ar-role--active { background: var(--ar-primary); border-color: var(--ar-primary); color: var(--ar-on-primary); }
.ar-role:focus-visible, .ar-nav__item:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 2px; }

.ar-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-nav__group {
  margin: 12px 8px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ar-text-subtle); font-weight: 600;
}
.ar-nav__list > .ar-nav__group:first-child { margin-top: 2px; }
.ar-nav__item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 999px; cursor: pointer; text-align: left;
  background: transparent; border: none; color: var(--ar-text-muted); font-size: 13px;
}
.ar-nav__item:hover { background: var(--ar-surface-hover); color: var(--ar-text); }
.ar-nav__item--active { background: var(--ar-primary-soft); color: var(--ar-text); font-weight: 600; }
.ar-nav__item--active .ar-nav__icon { color: var(--ar-primary); }
.ar-nav__icon { display: flex; flex-shrink: 0; color: var(--ar-text-subtle); }
.ar-nav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-nav__flag { color: var(--ar-warning); font-weight: 700; }
.ar-nav__flag--denied { color: var(--ar-text-subtle); }

.ar-sidebar__footer { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ar-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ar-dot--ok { background: var(--ar-success); }
.ar-dot--down { background: var(--ar-danger); }

/* Plain link, not part of the role-based nav: never gated by capability - a clearly separate,
   distinctly-styled "Outils développeur" area (Maxime's own brief: purely technical screens must
   never mingle with the normal, non-technical workflow above it). */
.ar-dev-link {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 11px;
  color: var(--ar-warning);
  text-decoration: none;
  border: 1px dashed var(--ar-warning);
  border-radius: 5px;
  padding: 5px 8px;
  text-align: center;
}
.ar-dev-link:hover { background: var(--ar-warning-bg); }

/* ---------- main ---------- */
.ar-main { padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-y: auto; min-height: 0; }
/* Without this, flex's default flex-shrink:1 silently compresses each panel to fit the bounded
   .ar-main box instead of letting it keep its natural height and scroll - the exact bug that made
   the whole page (not just main) scroll, dragging the header/sidebar out of view with it. */
.ar-main > * { flex-shrink: 0; }
.ar-main__title { margin: 0; font-size: 20px; }
.ar-muted { color: var(--ar-text-muted); }

.ar-banner {
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--ar-warning); background: var(--ar-warning-bg); color: var(--ar-text);
}
.ar-getting-started { margin-bottom: 14px; }
.ar-getting-started h3 { margin: 0 0 4px; font-size: 15px; }

/* Démarrage install wizard (product owner, 2026-10-01: one real screenshot at a time, a callout
   bubble on it, forced Suivant/Précédent navigation - see sections.js's gettingStartedBanner). */
.ar-getting-started__wizard { margin-top: 10px; max-width: 420px; }
.ar-getting-started__wizard-label { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ar-getting-started__wizard-image { position: relative; border: 1px solid var(--ar-border); border-radius: 8px; overflow: hidden; background: var(--ar-surface); line-height: 0; }
.ar-getting-started__wizard-image img { display: block; width: 100%; height: auto; }
.ar-getting-started__wizard-caption { margin: 8px 0 0; font-size: 13px; }
.ar-getting-started__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }

.ar-callout-bubble {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  padding: 4px 9px; border-radius: 8px;
  background: var(--ar-primary); color: var(--ar-on-primary); font-size: 11px; font-weight: 700; line-height: 1.3;
  box-shadow: var(--ar-shadow);
}
.ar-callout-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ar-primary);
}

/* ---------- panel ---------- */
.ar-panel {
  background: var(--ar-surface); border: 1px solid var(--ar-border);
  border-radius: 10px; overflow: hidden;
}
.ar-panel__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--ar-border);
}
.ar-panel__title { margin: 0; font-size: 15px; }
.ar-panel__description { margin: 4px 0 0; font-size: 12px; color: var(--ar-text-muted); }
.ar-panel__body { padding: 16px; }
.ar-panel--notice { padding: 20px; }

.ar-panel__state--error { color: var(--ar-danger); }
.ar-error__code { font-family: ui-monospace, monospace; font-weight: 700; margin: 0 0 4px; }
.ar-error__message { margin: 0; color: var(--ar-text-muted); }
.ar-empty__message { margin: 0; color: var(--ar-text-muted); }

/* ---------- confirm overlay ---------- */
/* In-page confirmation (product owner, 2026-09-30: "modifie la boite de confirmation pour qu'elle
   soit dans la page esthetique pas une patente a gosse dasn le haut d ecran") - replaces the
   native window.confirm() for actions like "Retirer" with one styled the same as the rest of the
   dashboard, instead of the browser's own unstyled top-of-screen dialog. */
.ar-confirm-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(6, 10, 16, 0.6);
}
.ar-confirm-overlay__panel {
  background: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: 10px;
  box-shadow: var(--ar-shadow); max-width: 360px; width: 100%; padding: 18px;
}
.ar-confirm-overlay__title { margin: 0 0 8px; font-size: 15px; }
.ar-confirm-overlay__body { margin: 0 0 16px; font-size: 13px; color: var(--ar-text-muted); }
.ar-confirm-overlay__actions { display: flex; justify-content: flex-end; gap: 8px; }

.ar-skeleton-row {
  height: 14px; border-radius: 4px; margin-bottom: 8px;
  background: linear-gradient(90deg, var(--ar-surface-raised), var(--ar-surface-hover), var(--ar-surface-raised));
  background-size: 200% 100%; animation: ar-shimmer 1.2s infinite linear;
}
@keyframes ar-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ar-skeleton-row { animation: none; } }

/* ---------- badges / chips ---------- */
.ar-badge {
  padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent;
}
.ar-badge--live { background: var(--ar-success-bg); color: var(--ar-success); border-color: var(--ar-success); }
.ar-badge--fixture { background: var(--ar-warning-bg); color: var(--ar-warning); border-color: var(--ar-warning); }

.ar-chip {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 11px; font-weight: 600; margin: 1px 3px 1px 0;
  background: var(--ar-surface-raised); color: var(--ar-text-muted);
  border: 1px solid var(--ar-border);
}
.ar-chip--success { background: var(--ar-success-bg); color: var(--ar-success); border-color: var(--ar-success); }
.ar-chip--danger  { background: var(--ar-danger-bg);  color: var(--ar-danger);  border-color: var(--ar-danger); }
.ar-chip--warning { background: var(--ar-warning-bg); color: var(--ar-warning); border-color: var(--ar-warning); }
.ar-chip--info    { color: var(--ar-info); border-color: var(--ar-info); }

.ar-unknown {
  font-style: italic; color: var(--ar-warning);
  border-bottom: 1px dotted var(--ar-warning); cursor: help;
}
.ar-null { color: var(--ar-text-subtle); }

/* ---------- metrics ---------- */
.ar-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ar-metric {
  flex: 1 1 140px; padding: 10px 12px; border-radius: 8px;
  background: var(--ar-surface-raised); border: 1px solid var(--ar-border);
  display: flex; flex-direction: column; gap: 3px;
}
.ar-metric__label { font-size: 11px; color: var(--ar-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ar-metric__value { font-size: 19px; font-weight: 600; }
.ar-metric__note { font-size: 11px; color: var(--ar-text-muted); }

/* ---------- KPI cards (W1 Overview's own reference redesign) ----------
 * An icon-led, colour-coded alternative to the plain .ar-metric tile above, used only by Overview's
 * own kpiCard() (components.js) - every other section's real metric tiles keep the plain .ar-metric
 * shape untouched. `--ar-kpi-*-bg` tokens (tokens.css) give each tone its own soft background wash;
 * the icon and big value stay full-strength so the number itself is always the most legible thing on
 * the card. A clickable card is a real <button>, so it needs its own focus-visible/hover treatment,
 * same "own reset, shared layout" pattern .ar-metric--clickable already established.
 */
.ar-kpi-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ar-border);
  background: var(--ar-kpi-neutral-bg); min-width: 150px; flex: 1 1 150px;
}
.ar-kpi-card--info { background: var(--ar-kpi-info-bg); }
.ar-kpi-card--success { background: var(--ar-kpi-success-bg); }
.ar-kpi-card--warning { background: var(--ar-kpi-warning-bg); }
.ar-kpi-card--danger { background: var(--ar-kpi-danger-bg); }
.ar-kpi-card__icon { display: flex; flex-shrink: 0; margin-top: 1px; color: var(--ar-text-muted); }
.ar-kpi-card--info .ar-kpi-card__icon { color: var(--ar-info); }
.ar-kpi-card--success .ar-kpi-card__icon { color: var(--ar-success); }
.ar-kpi-card--warning .ar-kpi-card__icon { color: var(--ar-warning); }
.ar-kpi-card--danger .ar-kpi-card__icon { color: var(--ar-danger); }
.ar-kpi-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-kpi-card__value { font-size: 22px; font-weight: 700; line-height: 1.1; }
.ar-kpi-card__label { font-size: 12px; color: var(--ar-text-muted); }
.ar-kpi-card__note { font-size: 11px; color: var(--ar-text-subtle); }
.ar-kpi-card--clickable {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ar-kpi-card--clickable:hover { background: var(--ar-surface-hover); border-color: var(--ar-focus); }
.ar-kpi-card--clickable:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 1px; }
.ar-kpi-card--static { cursor: default; }

/**
 * My Tasks' own small cards (product owner's own explicit request: "1 image + numéro de stock +
 * info minimale, clic pour voir l'annonce complète" - sections.js's own taskCard()). Same
 * surface/border/hover language as .ar-kpi-card--clickable above; the whole card is the click
 * target (role="button"), with its own nested real <button>s (Post/Claim/...) excluded from that
 * click via main.js's own [data-vehicle]/[data-action] ordering fix.
 */
.ar-task-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.ar-task-card {
  display: flex; flex-direction: column; border: 1px solid var(--ar-border); border-radius: 10px;
  background: var(--ar-surface); overflow: hidden; cursor: pointer;
}
.ar-task-card:hover { background: var(--ar-surface-hover); border-color: var(--ar-focus); }
.ar-task-card:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 1px; }
.ar-task-card__photo { aspect-ratio: 16 / 9; background: var(--ar-kpi-neutral-bg); overflow: hidden; }
.ar-task-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-task-card__photo-placeholder { width: 100%; height: 100%; }
.ar-task-card__body { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; }
/* Stock number and price on one line; the type and state chips together on the next. */
.ar-task-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ar-task-card__chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
/* Smaller chips so the type and the state fit side by side on a 200px card. */
.ar-task-card__chips .ar-chip { padding: 1px 6px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ar-task-card__stock { font-size: 13px; font-weight: 600; }
.ar-task-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar-task-card__price { font-size: 13px; font-weight: 600; color: var(--ar-text-muted); }
/* One bar: the main button and the "..." menu are a single split button - the "..." is a continuation of the bar,
   set off by a thin divider. Opened, the menu drops to its own row below. */
.ar-task-card__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 0 10px 10px; }
.ar-task-card__actions > .ar-btn { flex: 1 1 0; min-width: 0; margin: 0; }
.ar-task-card__actions > .ar-btn:not(:last-child) { border-radius: 6px 0 0 6px; }
.ar-task-card__actions .ar-menu { display: flex; flex: 0 0 auto; margin: 0; }
.ar-task-card__actions .ar-menu > summary {
  display: flex; align-items: center; margin: 0; border-radius: 0 6px 6px 0;
  background: var(--ar-primary); color: var(--ar-on-primary);
  border-left: 1px solid color-mix(in srgb, var(--ar-on-primary) 40%, transparent);
}
.ar-task-card__actions .ar-menu > summary:hover { background: var(--ar-primary-hover); }
/* Nothing to continue (a card with only the menu): it stands alone as a full bar. */
.ar-task-card__actions .ar-menu:only-child { flex: 1 1 auto; }
.ar-task-card__actions .ar-menu:only-child > summary { flex: 1; justify-content: center; border-radius: 6px; border-left: none; }
.ar-task-card__actions .ar-menu[open] { flex: 1 0 100%; order: 3; margin-top: 6px; }
.ar-task-card__actions .ar-menu[open] > summary { flex: 1; justify-content: center; border-radius: 6px; border-left: none; }
.ar-task-card__actions .ar-menu__panel { position: static; min-width: 0; margin-top: 6px; box-shadow: none; border: 1px solid var(--ar-border); }

/**
 * Tasks/Operations ("All tasks") as one horizontal lane per seller (product owner, 2026-10-01:
 * "le menu task devien le menu avec tout les vendeur un apres lautre avec les annonce/tache
 * horizontale") - reuses .ar-task-card's own real card shell above, laid out as a horizontally-
 * scrollable row instead of My Tasks' own auto-fill grid, since a lane's real width is unbounded.
 */
.ar-ops-lanes { display: flex; flex-direction: column; gap: 20px; }
.ar-ops-lane__header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
/* ONE line per seller that scrolls left/right (product owner, 2026-10-02: "les taches de Nery
   doivent etre une seule ligne horizontale avec un menu qui peut aller de gauche a droite... une
   ligne horizontale par vendeur") - it used to wrap into several rows. An overflow-x:auto row also
   clips overflow-y, which would cut off the absolutely-positioned "More" popover; so inside a lane
   that popover opens IN the card's own flow instead (card grows, the row grows with it), nothing to clip. */
.ar-ops-lane__row, .ar-task-card-grid--lane {
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 10px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.ar-ops-lane__row .ar-task-card, .ar-task-card-grid--lane .ar-task-card { flex: 0 0 200px; }
.ar-ops-lane__row .ar-menu, .ar-task-card-grid--lane .ar-menu { display: block; }
.ar-ops-lane__row .ar-menu__panel, .ar-task-card-grid--lane .ar-menu__panel {
  position: static; min-width: 0; margin-top: 6px; box-shadow: none; border: 1px solid var(--ar-border);
}
.ar-ops-card__footer { font-size: 12px; }

.ar-overview-drilldown { margin-top: 18px; border-top: 1px dashed var(--ar-border); padding-top: 4px; }

/* ---------- table ---------- */
.ar-table-wrap { overflow-x: auto; }
.ar-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ar-table th, .ar-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ar-border);
  vertical-align: top;
}
.ar-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ar-text-muted); }
.ar-table tbody tr:hover { background: var(--ar-surface-hover); }
.ar-table__row--clickable { cursor: pointer; }
.ar-table__row--clickable:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: -2px; }

/* ---------- vehicle detail ---------- */
.ar-back-link { display: inline-block; color: var(--ar-text-muted); text-decoration: none; font-size: 13px; margin-bottom: 14px; }
.ar-back-link:hover { color: var(--ar-text); text-decoration: underline; }
.ar-vehicle-title { margin: 0 0 4px; font-size: 18px; }
.ar-vehicle-meta { margin: 0 0 18px; font-size: 13px; color: var(--ar-text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-detail-subhead { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ar-text-muted); margin: 20px 0 10px; }

.ar-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ar-photo { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--ar-border); position: relative; background: var(--ar-surface-raised); }
.ar-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ar-photo--excluded img { opacity: 0.45; }
.ar-photo__badge {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--ar-danger-bg); color: var(--ar-danger);
  font-size: 10px; text-align: center; padding: 3px 4px; text-transform: uppercase; letter-spacing: .03em;
}

.ar-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 20px; }
.ar-field { display: flex; flex-direction: column; gap: 2px; }
.ar-field__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ar-text-muted); }
.ar-field__value { font-size: 14px; }

.ar-vehicle-description { white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--ar-text); max-width: 70ch; }

/* ---------- seller profile box ---------- */
.ar-profile-box {
  background: var(--ar-surface-raised); border: 1px solid var(--ar-border); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 20px;
}
.ar-profile-textarea {
  width: 100%; margin-top: 8px; padding: 10px; border-radius: 6px;
  background: var(--ar-surface); border: 1px solid var(--ar-border); color: var(--ar-text);
  font: inherit; resize: vertical;
}
.ar-profile-textarea:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 1px; }
.ar-profile-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ar-btn {
  padding: 7px 16px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--ar-primary); color: var(--ar-on-primary); font-size: 13px; font-weight: 500;
}
.ar-btn:hover { background: var(--ar-primary-hover); }
.ar-btn--sm { padding: 4px 10px; font-size: 12px; margin: 0 4px 4px 0; }
.ar-save-status { font-size: 12px; }
.ar-save-status--ok { color: var(--ar-success); }
.ar-save-status--error { color: var(--ar-danger); }

/* ---------- Tasks / Operations (W6) filter form + priority override ---------- */
.ar-filter-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--ar-surface-raised); border: 1px solid var(--ar-border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px;
}
.ar-filter-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ar-filter-field span { color: var(--ar-text-muted); }
.ar-filter-field input, .ar-filter-field select {
  padding: 5px 8px; border-radius: 6px; background: var(--ar-surface); border: 1px solid var(--ar-border);
  color: var(--ar-text); font: inherit; min-width: 110px;
}
.ar-filter-field--checkbox { flex-direction: row; align-items: center; gap: 6px; }
.ar-priority-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ar-priority-input { width: 56px; padding: 4px 6px; border-radius: 6px; background: var(--ar-surface); border: 1px solid var(--ar-border); color: var(--ar-text); font: inherit; }
/* Automation mode (settable per dealer/per task): same flex-row layout as .ar-priority-actions, own class since it is a distinct real control, not a priority override. */
.ar-automation-mode-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- Compliance (W9) bucket tabs ---------- */
.ar-bucket-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ar-bucket-tab {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ar-border);
  background: var(--ar-surface-raised); color: var(--ar-text-muted); font-size: 12px; cursor: pointer;
}
.ar-bucket-tab:hover { background: var(--ar-surface-hover); color: var(--ar-text); }
.ar-bucket-tab--active { background: var(--ar-primary); border-color: var(--ar-primary); color: var(--ar-on-primary); }
.ar-bucket-tab__count { font-weight: 600; }
.ar-compliance-line { margin-bottom: 4px; }
.ar-compliance-line:last-child { margin-bottom: 0; }

.ar-source-health { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ar-discrepancy { font-size: 12px; }
.ar-org { margin-top: 16px; }
.ar-org__name { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.ar-claim { font-size: 12px; color: var(--ar-text-muted); margin-top: 14px; }
.ar-audit-chain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }

.ar-admin-reset { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ar-admin-reset__result { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ar-admin-reset__password {
  font-family: ui-monospace, monospace; font-size: 12px; padding: 4px 6px;
  background: var(--ar-surface-raised); border: 1px solid var(--ar-border); border-radius: 4px;
  user-select: all;
}

/* ---------- login ---------- */
.ar-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.ar-login__card {
  width: 100%; max-width: 340px;
  background: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.ar-login__title { margin: 4px 0 0; font-size: 18px; }
.ar-login__description { margin: 0; font-size: 13px; color: var(--ar-text-muted); }
.ar-login__field { display: flex; flex-direction: column; gap: 4px; }
.ar-login__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.ar-login__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.ar-link {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--ar-text-muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer;
}
.ar-link:hover { color: var(--ar-text); }
.ar-input {
  padding: 8px 10px; border-radius: 6px;
  background: var(--ar-surface-raised); border: 1px solid var(--ar-border); color: var(--ar-text);
  font: inherit;
}
.ar-input:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 1px; }
.ar-input:disabled { opacity: .6; }

@media (max-width: 860px) {
  .ar-shell__body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .ar-sidebar { border-right: none; border-bottom: 1px solid var(--ar-border); max-height: 40vh; }
  .ar-header { padding: 10px 14px; }
  .ar-header__actions { gap: 8px; }
  .ar-header__sync { display: none; }
}


/* Employees & roles: one card per person (the old 10-column table pushed its actions off-screen). */
.ar-people { display: grid; gap: 12px; margin-top: 12px; }
.ar-person { border: 1px solid var(--ar-border, #2a3a4a); border-radius: 10px; padding: 12px 14px; background: var(--ar-surface, transparent); }
.ar-person__head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: flex-start; }
.ar-person__id { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ar-person__account { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ar-account { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ar-person__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.ar-person__block { min-width: 0; }
.ar-person__block h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ar-text-muted); }
.ar-person__role { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ar-person__caps { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ar-person .ar-inline-edit { display: grid; gap: 8px; }
.ar-person .ar-inline-edit select, .ar-person .ar-inline-edit input { width: 100%; }

/* The dealer-access checklist (product owner, 2026-10-01: a role picker, then either a primary-
   dealer picker + secondary checklist (Seller) or a plain checklist (Supervisor/Admin). */
.ar-dealer-checklist { border: 1px solid var(--ar-border); border-radius: 8px; padding: 8px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-dealer-checklist legend { padding: 0 4px; font-size: 12px; color: var(--ar-text-muted); }

/* =====================================================================================
   Interface redesign, step 1: calmer surfaces (fewer divider lines), menu tabs, small header
   controls, light/dark aware header. Later rules on purpose: they refine the blocks above.
   ===================================================================================== */
:root { --ar-line: rgba(255, 255, 255, 0.06); --ar-shadow: none; }
:root[data-theme="light"] {
  --ar-line: rgba(15, 37, 66, 0.07);
  --ar-shadow: 0 1px 2px rgba(15, 37, 66, 0.06);
  --ar-header: #ffffff;
  --ar-header-text: #14202b;
  --ar-header-text-muted: #526171;
}

.ar-header { border-bottom: none; padding: 8px 20px; box-shadow: var(--ar-shadow); }
:root[data-theme="light"] .ar-header .ar-lang { border-color: var(--ar-line); }
:root[data-theme="light"] .ar-header .ar-lang:hover { background: var(--ar-surface-hover); }
.ar-lang { border-color: transparent; }
.ar-lang--active { color: var(--ar-on-primary); }
.ar-sidebar { border-right: none; }
.ar-sidebar__footer-block { border-top: none; }
.ar-panel { border: none; box-shadow: var(--ar-shadow); }
.ar-panel__header { border-bottom: none; padding-bottom: 6px; }
.ar-kpi-card { border: none; box-shadow: var(--ar-shadow); }
.ar-kpi-card--clickable:hover { border-color: transparent; }
.ar-table th, .ar-table td { border-bottom: 1px solid var(--ar-line); }
.ar-role { border-color: transparent; background: var(--ar-surface-raised); }
.ar-btn--ghost { border-color: transparent; }

.ar-iconbtn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ar-header-text-muted);
}
.ar-iconbtn:hover { background: var(--ar-surface-hover); color: var(--ar-header-text); }
.ar-iconbtn:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 2px; }

.ar-chip-demo {
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--ar-warning-bg); color: var(--ar-warning); white-space: nowrap;
}

/* Tabs of the active menu */
.ar-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: var(--ar-surface-raised); align-self: flex-start; max-width: 100%; }
.ar-tab {
  padding: 6px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: 13px;
  background: transparent; color: var(--ar-text-muted);
}
.ar-tab:hover { color: var(--ar-text); }
.ar-tab--active { background: var(--ar-surface); color: var(--ar-text); font-weight: 600; box-shadow: var(--ar-shadow); }
:root:not([data-theme="light"]) .ar-tab--active { background: var(--ar-primary-soft); }
.ar-tab:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 2px; }

/* Developer tools, folded away in the sidebar footer */
.ar-dev summary { cursor: pointer; font-size: 12px; color: var(--ar-text-subtle); padding: 4px 8px; }
.ar-dev[open] { display: flex; flex-direction: column; gap: 8px; }
.ar-dev .ar-dev-link { font-size: 12px; padding: 4px 8px; }

/* Settings: one line per dealership, real switch, unit fields */
.ar-dealer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ar-dealer-row { background: var(--ar-surface-raised); border-radius: 10px; padding: 12px 14px; }
.ar-dealer-row__main { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ar-dealer-row__name { min-width: 180px; flex: 1 1 180px; }
.ar-dealer-row__targets { display: flex; gap: 14px; flex-wrap: wrap; }
.ar-switch-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ar-switch {
  position: relative; width: 38px; height: 22px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: var(--ar-surface-hover); transition: background .15s;
}
.ar-switch__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ar-switch--on { background: var(--ar-primary); }
.ar-switch--on .ar-switch__knob { transform: translateX(16px); background: var(--ar-on-primary); }
.ar-switch:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 2px; }
.ar-unit-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ar-text-muted); }
.ar-unit-field__box { display: inline-flex; align-items: center; gap: 4px; background: var(--ar-surface); border-radius: 8px; padding: 0 8px; }
.ar-unit-field__box input { width: 64px; border: none; background: transparent; color: var(--ar-text); padding: 6px 0; font-size: 14px; outline: none; }
.ar-unit-field__box em { font-style: normal; color: var(--ar-text-subtle); font-size: 12px; }
.ar-unit-field__box:focus-within { outline: 2px solid var(--ar-focus); }
.ar-more > summary { cursor: pointer; font-size: 12px; color: var(--ar-text-muted); padding: 6px 0 0; }
.ar-more[open] > summary { color: var(--ar-text); }
.ar-updated { font-size: 12px; }

/* Toolbar, search, chips row, segmented control, folded filters */
.ar-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ar-search {
  min-width: 240px; padding: 7px 12px; border: none; border-radius: 8px;
  background: var(--ar-surface-raised); color: var(--ar-text); font-size: 13px;
}
.ar-search:focus-visible { outline: 2px solid var(--ar-focus); }
.ar-chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ar-filter-field--inline { flex-direction: row; align-items: center; gap: 8px; }
.ar-segmented { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: var(--ar-surface-raised); margin-bottom: 10px; }
.ar-segmented__option { padding: 6px 12px; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; background: transparent; color: var(--ar-text-muted); }
.ar-segmented__option:hover { color: var(--ar-text); }
.ar-segmented__option--active { background: var(--ar-primary); color: var(--ar-on-primary); }
.ar-segmented__option:focus-visible { outline: 2px solid var(--ar-focus); outline-offset: 2px; }
.ar-filters { margin-bottom: 10px; }
[hidden] { display: none !important; }

.ar-panel__header--quiet { padding: 0; }
.ar-panel__header--quiet:not(:has(.ar-panel__description)) { display: none; }
.ar-unknown, .ar-null { color: var(--ar-text-subtle); background: none; border: none; padding: 0; }

/* "More" menu: a details element used as a small popover */
.ar-menu { position: relative; display: inline-block; }
.ar-menu > summary { list-style: none; cursor: pointer; }
.ar-menu > summary::-webkit-details-marker { display: none; }
.ar-menu__panel {
  position: absolute; right: 0; z-index: 5; min-width: 200px; margin-top: 4px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  background: var(--ar-surface); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.ar-menu__panel .ar-btn { justify-content: flex-start; text-align: left; }
.ar-toolbar--end { justify-content: flex-end; margin: 6px 0 0; }
.ar-filter-form--compact { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.ar-filter-form__more { flex: 1 1 100%; }
/* (the card action bar is styled with the card, above) */

/* People cards, quieter */
.ar-person { background: var(--ar-surface-raised); border: none; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ar-person__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ar-person__id { display: flex; flex-direction: column; gap: 1px; flex: 1 1 220px; min-width: 0; }
.ar-person__role-line { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.ar-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.ar-add > summary::-webkit-details-marker { display: none; }
.ar-add[open] > summary { margin-bottom: 10px; }
.ar-people { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* The "More" popover must float above its card/panel instead of being clipped inside it */
.ar-panel { overflow: visible; }
.ar-task-card { overflow: visible; }
.ar-task-card__photo { border-radius: 10px 10px 0 0; }
.ar-menu[open] { z-index: 6; }
.ar-menu__panel { left: 0; right: auto; }

/* Seller profile: the "publish automatically" switch sits under the personal text. */
.ar-profile-autopublish { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 4px; cursor: pointer; }
.ar-profile-autopublish input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.ar-profile-autopublish > span { flex: 1 1 auto; min-width: 0; line-height: 1.4; }