/* Raporteerimine kiosk - stylesheet.
   Reuses shared kiosk partials; keep this file thin — only add here the styles
   that are specific to Raporteerimine (and not worth back-porting to QC kiosk). */

@import '../../../public/css/theme.css';
@import '../../../public/css/kiosk/_base-components.css';
@import '../../../public/css/kiosk/_machine-cards.css';
@import '../../../public/css/kiosk/_data-display.css';
@import '../../../public/css/kiosk/_responsive.css';
@import '../../../public/css/kiosk/_touch-targets.css';
@import '../../../public/css/kiosk/_dash-tokens.css';
@import '../../../public/css/kiosk/_dash-components.css';
@import '../../../public/css/kiosk/_fai-paper-controls.css';
@import '../../../public/css/kiosk/_machine-tiers.css';
@import '../../../public/css/kiosk/_open-sessions.css';
@import '../../../public/css/kiosk/_kiosk-bars.css';
@import '../../../public/css/kiosk/_instruction-search.css';
@import '../../../public/css/kiosk/_quality-manager-check.css';
@import '../../../public/css/kiosk/_machine-stop-comment.css';
@import '../../../public/css/kiosk/_work-day.css';
@import './_operation-step.css';
@import '../../../public/css/kiosk/_worker-breaks.css';
@import '../../../public/css/kiosk/_connection-status.css';
@import '../../../public/css/kiosk/_phone-fit.css';

/* Raporteerimine-specific: entry list rows. Reused inside the cards on the
   entry view; padding tightens for touch density. */
.rk-entry-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-dash-border);
}
.rk-entry-row:last-child {
  border-bottom: 0;
}

/* Start-view order tiles (replaces the single-line dropdown / button row).
   The kiosk runs on a floor tablet, so orders are picked as bigger touch cards.
   All colours are theme tokens → safe across the dark/light toggle. */
.rk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}
/* "Käib praegu — liitu" uses larger, squarer tiles. */
.rk-card-grid--lg {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}
.rk-order-card {
  position: relative;            /* anchor for the "Valitud" corner ribbon */
  overflow: hidden;             /* clips the diagonal ribbon to the card corner */
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  padding: 14px;
  border: 2px solid var(--color-dash-border);
  border-radius: 14px;
  background: var(--color-dash-card);
  color: var(--color-dash-text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background-color .12s, transform .06s;
}
.rk-card-grid--lg .rk-order-card { min-height: 150px; }
.rk-order-card:hover { background: var(--color-dash-card-hover); }
.rk-order-card:active { transform: scale(.98); }
.rk-order-card:disabled { opacity: .5; cursor: default; transform: none; }
.rk-order-card__num {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.rk-order-card__rec { color: var(--color-dash-success); margin-right: 3px; }
/* Multi-lane stations (Komplekteerimine, Käsitöö) lead with the OPERATION —
   what the assistant will do — and the MO number steps down to a secondary
   line. A missing MRP heading is shown as missing, never guessed. */
.rk-order-card__op {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.rk-order-card__op--missing {
  font-size: .95rem;
  font-weight: 700;
  text-transform: none;
  color: var(--color-dash-danger);
}
.rk-order-card--lane .rk-order-card__num { font-size: 1.05rem; }
/* Entry view ribbon: which operation of the order this session reports on. */
.rk-session-order__op {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--color-dash-text-primary);
}
.rk-order-card__name {
  flex: 1;
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-dash-text-secondary);
  overflow-wrap: anywhere;          /* product names wrap — multi-line is fine */
}
.rk-order-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .8rem;
  color: var(--color-dash-text-muted);
}
.rk-order-card__qty { font-weight: 700; color: var(--color-dash-text-secondary); }
.rk-order-card__starter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-order-card__join { font-weight: 800; color: var(--color-dash-success); white-space: nowrap; }
/* Planned, picked to start → blue accent. Recommended → subtle blue border. */
.rk-order-card--selected {
  border-color: var(--color-blue-500);
  background: color-mix(in srgb, var(--color-blue-500) 12%, var(--color-dash-card));
}
/* Green 45° corner ribbon on the picked order — clear "this is selected" cue.
   Hidden by default; shown only on the selected card. */
.rk-order-card__flag {
  position: absolute;
  top: 15px;
  right: -40px;
  width: 140px;
  display: none;
  transform: rotate(45deg);
  background: var(--color-dash-success);
  color: var(--color-white);
  text-align: center;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.rk-order-card--selected .rk-order-card__flag { display: block; }
.rk-order-card--recommended:not(.rk-order-card--selected) {
  border-color: color-mix(in srgb, var(--color-blue-500) 40%, var(--color-dash-border));
}
/* "Sinu päev" hand-off summary at the top of the start view. */
.rk-focus-job {
  border: 2px solid var(--color-blue-500);
  border-radius: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--color-blue-500) 12%, var(--color-dash-card));
}
.rk-focus-job__label { font-weight: 800; color: var(--color-dash-text-primary); margin-bottom: 6px; }
.rk-focus-job__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* In-progress ("käib praegu") → green accent, join affordance. */
.rk-order-card--active {
  border-color: var(--color-dash-success);
  background: color-mix(in srgb, var(--color-dash-success) 12%, var(--color-dash-card));
}
.rk-order-card--active:hover {
  background: color-mix(in srgb, var(--color-dash-success) 18%, var(--color-dash-card));
}
/* Lane left open from an EARLIER shift (stale_slot): amber, not green — joining
   it is a takeover (gate asks end-old / join), and it no longer hides the
   worker's planned tile of the same order. */
.rk-order-card--active.rk-order-card--stale {
  border-color: var(--color-dash-warning);
  background: color-mix(in srgb, var(--color-dash-warning) 10%, var(--color-dash-card));
}
.rk-order-card--active.rk-order-card--stale:hover {
  background: color-mix(in srgb, var(--color-dash-warning) 16%, var(--color-dash-card));
}
.rk-order-card__stale {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-dash-warning);
  margin-bottom: 4px;
}
/* "Sinu üldtöö täna" (multi-lane): the worker's own Üldine töö assignment —
   amber accent + small tag so it reads apart from planned lane slots. */
.rk-order-card--general {
  border-color: color-mix(in srgb, var(--color-dash-warning) 55%, var(--color-dash-border));
  background: color-mix(in srgb, var(--color-dash-warning) 8%, var(--color-dash-card));
}
.rk-order-card--general:hover {
  background: color-mix(in srgb, var(--color-dash-warning) 14%, var(--color-dash-card));
}
.rk-order-card--general.rk-order-card--selected {
  border-color: var(--color-blue-500);
  background: color-mix(in srgb, var(--color-blue-500) 12%, var(--color-dash-card));
}
.rk-order-card__plan { white-space: nowrap; }   /* "8 h" never splits over two lines */
.rk-order-card__tag {
  align-self: flex-start;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--color-dash-text-primary);
  background: color-mix(in srgb, var(--color-dash-warning) 28%, var(--color-dash-card));
}
.rk-order-group-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-dash-text-muted);
  margin: 2px 0 8px;
}

/* Lakkimine carts (SAATELEHT KÄRULE digitized). All colours are theme tokens
   → safe across the dark/light toggle. See js/alpine/lacquer.js. */
.rk-lacquer-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.rk-lacquer-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--color-dash-border);
}
.rk-lacquer-step:first-child { border-top: 0; }
.rk-lacquer-step__label {
  flex: 1;
  min-width: 150px;
  color: var(--color-dash-text-primary);
}
.rk-lacquer-step__inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rk-lacquer-step__inputs .kiosk-input { width: 130px; }

/* Per-entry water-test evidence, shown only from the session snapshot. */
.rk-water-test {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rk-water-test__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rk-family-row__water-test {
  grid-column: 1 / -1;
  align-items: flex-start;
}
.rk-water-test-warning {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-dash-danger);
  border-radius: 8px;
  color: var(--color-dash-danger);
  background: color-mix(in srgb, var(--color-dash-danger) 10%, var(--color-dash-card));
}
.rk-water-test-result {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 700;
}
.rk-water-test-result--passed { color: var(--color-dash-success); }
.rk-water-test-result--failed { color: var(--color-dash-danger); }

/* Eritöö: the planner's block description (special_task_schedule.notes) in the
   start and entry views — the clarifying info that used to live on the paper
   worksheet. Warning accent = "read before you start"; theme tokens only. */
.rk-task-notes {
  padding: 10px 12px;
  border-left: 4px solid var(--color-dash-warning);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-dash-warning) 10%, var(--color-dash-card));
  color: var(--color-dash-text-primary);
}
.rk-task-notes__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-dash-text-secondary);
}
.rk-task-notes__row {
  margin-top: 2px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rk-task-notes__shift { font-weight: 500; color: var(--color-dash-text-secondary); }
.rk-task-notes__text { white-space: pre-line; }