/*
 * tarjousui/static/laajennukset/ohjaus.css — the "Rikastus ja tehtävät" panel, the task
 * badges and the "Minun tehtäväni" sheet (static/laajennukset/ohjaus.js, #10005).
 *
 * Only app.css's tokens and classes (.panel, .sheet, .badge, .muted, .small), so the
 * dark theme comes with them. Every control is at least --tap high; nothing has a fixed
 * width, and long task texts wrap.
 */

.ohjaus-paneeli { margin-top: 8px; }
@media (min-width: 1100px) { .ohjaus-paneeli { margin-top: 12px; } }

.ohjaus-paneeli h3 {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ohjaus-paneeli p { margin: 6px 0; overflow-wrap: anywhere; }

/* A switch row: the checkbox and its text, then "(oletus)" or "Palauta oletus". */
.ohjaus-kytkin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}
.ohjaus-kytkin label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}
.ohjaus-kytkin input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }
.ohjaus-kytkin input[type="checkbox"]:disabled + span { color: var(--muted); }
.ohjaus-kytkin button { min-height: var(--tap); padding: 0 8px; font-size: 14px; }

.ohjaus-paneeli select,
.ohjaus-paneeli textarea,
.ohjaus-paneeli input[type="text"] {
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ohjaus-paneeli textarea { padding: 8px 12px; resize: vertical; }

.ohjaus-pyynto { margin-top: 12px; }

.ohjaus-tehtava {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.ohjaus-tehtava > button { width: 100%; margin-top: 6px; }
.ohjaus-teksti { white-space: pre-wrap; }

.ohjaus-tehdyt summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
.ohjaus-tehty { padding: 6px 0; border-top: 1px solid var(--border); }

.ohjaus-uusi { margin-top: 12px; }
.ohjaus-uusi > button { width: 100%; }
.ohjaus-napit { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ohjaus-napit .primary { flex: 1; }

/* The card's task badges: below the card's own lines, wrapping on a narrow card. */
[data-skt-paikka="kortti-ala"] > [data-skt-omistaja="ohjaus"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 0;
}
[data-skt-omistaja="ohjaus"] .badge { white-space: normal; overflow-wrap: anywhere; }

/* "Minun tehtäväni": one button per task, the whole row a tap target. */
.ohjaus-minun-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.ohjaus-minun-lista > li { margin: 0 0 8px; }
.ohjaus-minun-kohde {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: start;
}
.ohjaus-minun-kohde p { margin: 2px 0 0; }