/* ===========================================================================
   damage.css — layout and interaction for the vehicle diagram.

   IT DOES NOT SET SVG COLOURS. Those are written onto the elements by
   damage.py (PALETTE / PANEL_STATUS) and repainted by damage.js from
   PANEL_COLORS.

   The reason is not taste: WeasyPrint does not cascade an external
   stylesheet into inline SVG, so a CSS-coloured diagram printed as solid
   black blocks in the PDF — the copy the customer signs. A CSS `fill` rule
   here would also outrank the presentation attribute in the browser and
   quietly reintroduce the divergence. Colour HTML elements here freely
   (legend swatches below); never SVG geometry.
   =========================================================================== */

.dmg {
  width: 100%;
  height: auto;
  display: block;
  touch-action: manipulation;
}

/* ── editing affordances (screen only; the PDF never sees these) ─────────── */

@media screen {
  .dmg-editable .panel { cursor: pointer; }
  .dmg-editable .panel rect { transition: fill .12s ease; }
  .dmg-editable .panel:hover rect,
  .dmg-editable .panel:focus rect {
    stroke: #1f5fbf;
    stroke-width: 3;
    outline: none;
  }
  .dmg-editable.dmg-side { cursor: crosshair; }
  .dmg-editable .mk { cursor: pointer; }
  .dmg-editable .mk:hover circle { stroke: #b3261e; stroke-width: 3; }
}

/* ── legend (plain HTML, so CSS colour is safe here) ─────────────────────── */

.dmg-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* An author `display` rule beats the browser's own [hidden] { display:none },
   so the point-type row stayed visible next to the panel palette and the two
   read as one row with several things selected. */
.dmg-legend[hidden] { display: none; }

.dmg-legend button {
  border: 1px solid #dde3ec;
  background: #fbfcfe;
  color: #556275;
  border-radius: 999px;
  padding: 5px 12px;
  font: 640 12.5px/1.4 inherit;
  cursor: pointer;
}

.dmg-legend button.on {
  background: #1f5fbf;
  border-color: #1f5fbf;
  color: #ffffff;
}

/* Mode switch. It decides what a tap on the diagram does, so it is the first
   thing to read and gets square corners and real size rather than the pill
   shape the filter chips below it use. */
.dmg-modes {
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.dmg-modes button {
  border-radius: 8px;
  padding: 11px 26px;
  min-width: 160px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}

.dmg-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid #46505e;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: 5px;
}

/* Kept in step with damage.PANEL_STATUS by hand. If a colour changes there,
   change it here too — these squares label the diagram. */
.dmg-swatch[data-status="ok"]      { background: #ffffff; }
.dmg-swatch[data-status="kratzer"] { background: #ffe6a3; }
.dmg-swatch[data-status="delle"]   { background: #ffc078; }
.dmg-swatch[data-status="lack"]    { background: #c3b0ea; }
.dmg-swatch[data-status="bruch"]   { background: #f08076; }

/* ── dark mode ───────────────────────────────────────────────────────────── */

@media screen and (prefers-color-scheme: dark) {
  /* The diagram keeps its printed palette so what staff approve on screen is
     what the customer signs. It is given a paper-white mount rather than
     being inverted, so it reads as the form it is. */
  :root:not([data-theme="light"]) .dmg-box {
    background: #eef1f6;
    border-color: #3a4757;
  }
  :root:not([data-theme="light"]) .dmg-box h4 { color: #46505e; }

  :root:not([data-theme="light"]) .dmg-legend button {
    background: #1b2532; border-color: #2a3543; color: #9aa8bb;
  }
  :root:not([data-theme="light"]) .dmg-legend button.on {
    background: #5b9bff; border-color: #5b9bff; color: #0b1220;
  }
}