/*
 * tarjousui/static/laajennukset/kuvatyokalut.css — the photo tools (kuvatyokalut*.js).
 *
 * Only app.css's variables and classes underneath (--accent, --ok, --danger, --surface,
 * --border, --radius, --tap; .photo-bar, .sheet*, .picker, button.primary/.danger), so
 * the dark theme and the phone layout come with them. Everything here starts with kt-.
 * A thumbnail's border and outline stay the core's (.active, .picked) and #10003's
 * (the source's colour): the marks here are badges.
 */

/* The pen's palette: one variable per code; a line and its swatch read the same one. */
.kt-vari-keltainen { --kt-vari: #facc15; }
.kt-vari-punainen  { --kt-vari: #ef4444; }
.kt-vari-vihrea    { --kt-vari: #22c55e; }
.kt-vari-sininen   { --kt-vari: #3b82f6; }
.kt-vari-valkoinen { --kt-vari: #ffffff; }

/* ── The bars under the strip: the tools, the select mode, the pen, Lajittele ── */
.kt-palkki { margin-top: 8px; }
/* .photo-bar's own button is a small one pushed to the right; these are many, for a finger. */
.kt-palkki button { min-height: var(--tap); margin-left: 0; }
.kt-palkki .pb-text { flex: 1 1 120px; }

/* The caption: a field of its own row in an editor's bar, a line for everyone else. */
.kt-kuvateksti-kentta { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0;
                        margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.kt-kuvateksti-kentta input { flex: 1 1 auto; min-width: 0; font-weight: 400; color: var(--text); }
.kt-kuvateksti { margin: 8px 12px 0; padding: 8px 10px; font-size: 14px; color: var(--text);
                 background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
                 overflow-wrap: anywhere; }

/* ── Thumbnails ──────────────────────────────────────────────────────────── */
/* The checkbox in the middle, as the core's own select mode draws it. */
.thumb.kt-valittu { border-color: var(--accent); }
.thumb.kt-valittu img { opacity: .55; }
.thumb .kt-valinta {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; color: #fff; text-shadow: 0 0 4px #000; pointer-events: none;
}
/* The good photo's star, bottom centre: the corners are the side, the source, the
   role and the box count. */
.thumb .kt-hyva {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  font-size: 13px; line-height: 1; color: #facc15; text-shadow: 0 0 3px #000; pointer-events: none;
}

/* ── The pen ─────────────────────────────────────────────────────────────── */
/* The layer lies in the kuva-paalle slot, which pans and zooms with the photo and lets
   every touch through; the pen takes its presses on the stage itself. */
.kt-kerros { position: absolute; inset: 0; }
.kt-piirrokset { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kt-viiva {
  fill: none; stroke: var(--kt-vari); stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.stage.kt-kyna-paalla { cursor: crosshair; }

.kt-paletti .kt-vari {
  width: var(--tap); min-width: var(--tap); padding: 0; border-radius: 50%;
  background: var(--kt-vari); border: 2px solid var(--border);
}
.kt-paletti .kt-vari[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.kt-paletti .kt-paksuus { width: var(--tap); min-width: var(--tap); padding: 0; display: grid; place-items: center; }
.kt-paletti .kt-paksuus::before { content: ""; display: block; width: 22px; border-radius: 3px; background: currentColor; }
.kt-paletti .kt-paksuus-3::before { height: 3px; }
.kt-paletti .kt-paksuus-6::before { height: 6px; }
.kt-paletti .kt-paksuus[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* ── Lajittele ───────────────────────────────────────────────────────────── */
.stage.kt-lajittele-paalla { cursor: grab; }
.kt-lajittele-rivi { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
.kt-lajittele-rivi .kt-laskuri { flex: 1 1 auto; text-align: center; white-space: normal; }
.kt-palkki .kt-hylkaa, .kt-palkki .kt-pida {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 64px; min-height: 64px; padding: 0 16px; border-radius: 32px;
  font-size: 26px; font-weight: 700; color: #fff; border-color: transparent;
}
.kt-palkki .kt-hylkaa { background: var(--danger); }
.kt-palkki .kt-pida { background: var(--ok); }
.kt-hylkaa .kt-nimi, .kt-pida .kt-nimi { font-size: 15px; }
/* A phone shows the cross and the tick only; the name stays their aria-label. */
@media (max-width: 599.98px) {
  .kt-hylkaa .kt-nimi, .kt-pida .kt-nimi { display: none; }
  .kt-palkki .kt-hylkaa, .kt-palkki .kt-pida { width: 64px; padding: 0; }
}

/* ── Files dragged over the kohde page ───────────────────────────────────── */
/* Under the sheets (z-index 40), over the page; never in the way of the drop itself. */
.kt-pudotus {
  position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 4px dashed var(--accent);
}
.kt-pudotus[hidden] { display: none; }
.kt-pudotus p {
  margin: 0 16px; padding: 12px 20px; border-radius: var(--radius); text-align: center;
  background: var(--surface); color: var(--text); font-size: 18px; font-weight: 600;
}
.kt-pudotus small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }

/* ── The move dialog ─────────────────────────────────────────────────────── */
.kt-haku { display: flex; gap: 8px; }
.kt-haku input { flex: 1 1 auto; min-width: 0; }
.kt-ehdokkaat[hidden] { display: none; }
.kt-ehdokkaat button span:first-child { min-width: 0; overflow-wrap: anywhere; }
.kt-ehdokkaat .use { white-space: nowrap; }