/* ============================================================================
   hapro-ui.css — Hapron yhtenäinen käyttöliittymäkomponentti-kirjasto (hui-*)
   Käyttäjäpalaute 2026-09-30: Hankinta-, Suorite- ja Rakennusosaikkunat
   yhtenäistetään yhteen ilmeeseen (yksi toolbar-kielioppi, yksi taulukko,
   yksi välilehtityyli, yksi aksentti, mustavalkoiset ikonit).

   TÄRKEÄÄ (ei tuplakoodia): tämä on AINOA lähde näille komponenteille.
   Kun ikkuna siirretään hui-* -luokkiin, sen vanhat omat tyylit poistetaan
   (esim. .hnk-cta, .ro-toolbar button, .totals-btn, per-ikkuna-taulukot).

   Käyttää olemassa olevia --color-* -tokeneita (app.css määrittää light/dark),
   joten dark-teema toimii automaattisesti.
   ============================================================================ */

:root{
  /* Johdetut sävyt yhteisiä komponentteja varten (fallbackit jos token puuttuu) */
  --hui-accent: var(--color-primary, #1E4FD1);
  --hui-accent-soft: var(--color-primary-light, #EEF3FE);
  --hui-panel: var(--color-surface, #fff);
  --hui-ink: var(--color-text, #1e293b);
  --hui-ink2: var(--color-text-muted, #64748b);
  --hui-muted: var(--color-text-light, #94a3b8);
  --hui-line: var(--color-border, #e2e8f0);
  --hui-line2: var(--color-border-light, #f1f5f9);
  --hui-hover: var(--color-border-light, #f1f5f9);
  --hui-sel: var(--color-primary-light, #EEF3FE);
  --hui-chip-bg: var(--color-border-light, #f1f5f9);
  --hui-danger: var(--color-danger, #dc2626);
  --hui-danger-soft: var(--color-danger-light, #fef2f2);
  --hui-amber: #b45309;
  --hui-amber-soft: #fdf3e6;
  --hui-ok: #3f7d4e;
  --hui-shadow: 0 8px 26px rgba(20,30,55,.14);
  --hui-r: 8px; --hui-r-sm: 6px;
}
:root[data-theme="dark"]{
  --hui-amber:#e0a75a; --hui-amber-soft:#2c2415; --hui-ok:#6cc189;
  --hui-shadow:0 10px 30px rgba(0,0,0,.42);
}

/* Suoritteen muistio-editori kompaktiin paneeliin: pienempi fontti kuin oletus 16px
   (käyttäjäpalaute 2026-10-01: 16px näytti härskiltä). Globaali, koska osuu lapsikomponentin
   (RichTextEditor) sisäiseen .hx-rte-area:han jota scoped-CSS ei tavoita. */
.ebp-memo-rte .hx-rte-area{font-size:12.5px;line-height:1.45;padding:8px 10px;border-radius:8px}
.ebp-memo-rte .hx-rte-btn{width:30px;height:28px;font-size:13px;border-radius:7px}

/* ---------- ikonit ---------- */
.hui-ic{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.hui-ic.s13{width:13px;height:13px}
.hui-ic.s12{width:12px;height:12px}

/* ---------- toolbar (yksi kielioppi) ---------- */
.hui-toolbar{display:flex;align-items:center;gap:6px;min-height:42px;padding:5px 10px;
  border-bottom:1px solid var(--hui-line);background:var(--hui-panel);flex-wrap:wrap}
.hui-toolbar .hui-sp{flex:1}
.hui-grp{display:inline-flex;align-items:center;gap:2px;padding:0 6px;border-right:1px solid var(--hui-line)}
.hui-grp:last-of-type{border-right:none}

/* ---------- napit (yksi hierarkia: primary / oletus / icon / ghost / danger) ---------- */
.hui-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;
  border:1px solid var(--hui-line);border-radius:var(--hui-r-sm);background:var(--hui-panel);
  color:var(--hui-ink);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;
  font-family:inherit;line-height:1}
.hui-btn:hover{background:var(--hui-hover)}
.hui-btn:disabled{opacity:.5;cursor:default}
.hui-btn.primary{background:var(--hui-accent);border-color:var(--hui-accent);color:#fff;font-weight:600}
.hui-btn.primary:hover{background:var(--color-primary-hover,#1a45bb)}
.hui-btn.icon{width:28px;padding:0;justify-content:center;color:var(--hui-ink2)}
.hui-btn.ghost{border-color:transparent;background:transparent;color:var(--hui-ink2)}
.hui-btn.ghost:hover{background:var(--hui-hover)}
.hui-btn.danger{color:var(--hui-danger)}
.hui-btn.on{background:var(--hui-accent-soft);border-color:color-mix(in srgb,var(--hui-accent) 30%,transparent);color:var(--hui-accent)}

/* segmentoitu näkymävalitsin */
.hui-seg{display:inline-flex;background:var(--hui-chip-bg);border-radius:7px;padding:2px;gap:2px}
.hui-seg button{height:24px;padding:0 12px;border:none;background:transparent;border-radius:5px;
  font-size:12px;color:var(--hui-ink2);cursor:pointer;font-family:inherit}
.hui-seg button.on{background:var(--hui-panel);color:var(--hui-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* haku */
.hui-search{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;
  border:1px solid var(--hui-line);border-radius:var(--hui-r-sm);color:var(--hui-muted);min-width:150px}
.hui-search input{border:none;background:transparent;outline:none;color:var(--hui-ink);font-size:12px;width:100%;font-family:inherit}

/* ---------- tilachip (yksi tyyli) ---------- */
.hui-chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:600;background:var(--hui-chip-bg);color:var(--hui-ink2);border:1px solid var(--hui-line)}
.hui-chip .cd{width:6px;height:6px;border-radius:50%;background:var(--hui-muted)}
.hui-chip.wait{background:var(--hui-amber-soft);color:var(--hui-amber);border-color:transparent}
.hui-chip.wait .cd{background:var(--hui-amber)}
.hui-chip.alert{background:var(--hui-danger-soft);color:var(--hui-danger);border-color:transparent}
.hui-chip.alert .cd{background:var(--hui-danger)}
.hui-chip.done{background:var(--hui-panel);color:var(--hui-ok);border-color:var(--hui-line)}
.hui-chip.done .cd{background:var(--hui-ok)}

/* ---------- taulukko (yksi tyyli) ---------- */
.hui-tbl{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.hui-tbl thead th{position:sticky;top:0;z-index:1;background:var(--hui-panel);text-align:left;
  font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--hui-muted);
  padding:7px 10px;border-bottom:1.5px solid var(--hui-line);white-space:nowrap}
.hui-tbl td{padding:6px 10px;border-bottom:1px solid var(--hui-line2);white-space:nowrap}
.hui-tbl td.num,.hui-tbl th.num{text-align:right}
.hui-tbl tbody tr:hover{background:var(--hui-hover)}
.hui-tbl tr.grp-row td{background:var(--hui-chip-bg);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.3px;color:var(--hui-ink2)}
/* Valittu rivi: pehmeä täyttö koko riville + YKSI vasen aksenttipalkki (vain 1. solu).
   EI per-solu-varjoja/reunoja → ei tummia viivoja solujen väliin (käyttäjäpalaute 2026-09-30). */
.hui-tbl tr.sel td{background:var(--hui-sel);border-bottom-color:transparent}
.hui-tbl tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--hui-accent)}
.hui-tbl tr.sel:hover td{background:var(--hui-sel)}
.hui-tbl .muted{color:var(--hui-muted)}

/* ---------- välilehdet (yksi tyyli) ---------- */
.hui-tabs{display:flex;align-items:center;gap:2px;padding:0 10px;border-bottom:1px solid var(--hui-line);background:var(--hui-panel)}
.hui-tabs button{height:34px;padding:0 12px;border:none;background:transparent;font-size:12px;color:var(--hui-ink2);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit}
.hui-tabs button.on{color:var(--hui-ink);font-weight:600;border-bottom-color:var(--hui-accent)}

/* ---------- layout-runko: vasen lista → keskus → oikea rail/paneeli ---------- */
.hui-body{display:flex;min-height:0;position:relative;overflow:hidden;flex:1}
.hui-left{width:240px;flex:0 0 auto;border-right:1px solid var(--hui-line);overflow:auto;
  background:var(--hui-panel);transition:transform .18s ease;z-index:5}
.hui-center{flex:1;min-width:0;display:flex;flex-direction:column}
.hui-tablewrap{flex:1;overflow:auto;min-height:0}

/* reunakurkistus: valikon ollessa kiinni vasempaan reunaan jää raita jota hiiri kurkistaa;
   klikkaus kiinnittää auki (käyttäjäpalaute 2026-09-30) */
.hui-edge-peek{display:none;position:absolute;left:0;top:0;bottom:0;width:11px;z-index:7;cursor:pointer;
  background:linear-gradient(90deg,color-mix(in srgb,var(--hui-accent) 22%,transparent),transparent)}
.hui-edge-peek::after{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:3px;height:34px;border-radius:3px;background:var(--hui-accent);opacity:.55}
.hui-body.no-left .hui-left{position:absolute;top:0;bottom:0;left:0;transform:translateX(-100%);box-shadow:var(--hui-shadow)}
.hui-body.no-left .hui-edge-peek{display:block}
.hui-body.no-left .hui-edge-peek:hover + .hui-left,.hui-body.no-left .hui-left:hover{transform:translateX(0)}

/* oikean reunan pystyikonirivi + paneeli */
.hui-rail{width:42px;flex:0 0 auto;border-left:1px solid var(--hui-line);background:var(--hui-panel);
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;z-index:6}
.hui-rbtn{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--hui-ink2);cursor:pointer;border:1px solid transparent;background:transparent}
.hui-rbtn:hover{background:var(--hui-hover)}
.hui-rbtn.on{background:var(--hui-accent-soft);color:var(--hui-accent);border-color:color-mix(in srgb,var(--hui-accent) 30%,transparent)}
.hui-rpanel{width:252px;flex:0 0 auto;border-left:1px solid var(--hui-line);background:var(--hui-panel);
  display:flex;flex-direction:column;transition:transform .18s ease;z-index:5}
.hui-rpanel-hd{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 6px 0 10px;
  border-bottom:1px solid var(--hui-line);font-weight:650;font-size:12px}
.hui-rpanel-hd .hui-sp{flex:1}

/* container-query: kapealla ikkunalla vasen valikko + oikea paneeli liukuvat piiloon (rail jää) */
.hui-win{container-type:inline-size}
@container (max-width:660px){
  .hui-body .hui-left{position:absolute;top:0;bottom:0;left:0;transform:translateX(-100%);box-shadow:var(--hui-shadow)}
  .hui-body .hui-edge-peek{display:block}
  .hui-body .hui-edge-peek:hover + .hui-left,.hui-body .hui-left:hover,.hui-body.show-left .hui-left{transform:translateX(0)}
  .hui-body .hui-rpanel{position:absolute;top:0;bottom:0;right:42px;transform:translateX(calc(100% + 42px));box-shadow:var(--hui-shadow)}
  .hui-body.show-right .hui-rpanel{transform:translateX(0)}
}

/* ---------- jaettu ala-detail (esim. Panokset + Määrät rinnakkain) ---------- */
.hui-split2{display:flex;gap:1px;background:var(--hui-line);min-height:0;flex:1}
.hui-split2 .hui-pane{flex:1;min-width:0;background:var(--hui-panel);display:flex;flex-direction:column}
.hui-panehd{display:flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;
  border-bottom:1px solid var(--hui-line2);background:var(--hui-chip-bg)}
.hui-panehd .hui-sel{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--hui-ink)}
.hui-panehd .hui-sp{flex:1}

/* ---------- vaakastepper (mustavalkoinen, esim. Hankinta) ---------- */
.hui-stepper{display:flex;align-items:center;gap:0;padding:12px 14px;overflow:auto}
.hui-step{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.hui-step .k{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hui-line);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--hui-muted);background:var(--hui-panel)}
.hui-step.done .k{background:var(--hui-ink);border-color:var(--hui-ink);color:var(--hui-panel)}
.hui-step.now .k{border-color:var(--hui-accent);color:var(--hui-accent)}
.hui-step .lb{font-size:12px;color:var(--hui-ink2)}
.hui-step.now .lb{color:var(--hui-ink);font-weight:600}
.hui-step .bar{width:34px;height:1.5px;background:var(--hui-line);margin:0 8px}
.hui-step.done .bar{background:var(--hui-ink)}