/*
 * velo-ostokierto.css — Laskun kierto UI v1
 * Simulaation mukainen hiilenharmaa-teema.
 * Täysin eristetty .vd-ok-scope-wrapperilla + all:initial resetillä.
 */

/* ══════════════════════════════════════════
   ROOT: nollaa kaikki perityt tyylit
   ══════════════════════════════════════════ */
.vd-ok {
  all: initial !important;
  display: block !important;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #1C2220 !important;
  box-sizing: border-box !important;
  background: #E4E8ED !important;

  --dark:    #111418;
  --dark2:   #0C0F12;
  --ink:     #1C2220;
  --muted:   #6B7A70;
  --line:    #DDE3EA;
  --panel:   #F0F3F7;
  --paper:   #F7F9FC;
  --red:     #C0392B;
  --red-bg:  #FDECEA;
  --gold:    #D4870A;
  --gold-bg: #FFF4DE;
  --blue:    #1A6CB5;
  --blue-bg: #EEF3FF;
  --slate:   #8B9BA8;
  --slate-d: #1E2D3D;
  --shadow:  0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.07);
  --shadow-h: 0 4px 20px rgba(0,0,0,.12);
}
.vd-ok *, .vd-ok *::before, .vd-ok *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vd-ok a { text-decoration: none !important; color: inherit !important; }
.vd-ok button { font-family: inherit !important; cursor: pointer !important; border: none !important; background: transparent !important; }
.vd-ok input, .vd-ok textarea, .vd-ok select {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.vd-ok .ok-hero {
  background: linear-gradient(155deg, var(--dark) 0%, #1C2530 100%) !important;
  padding: 16px 18px 0 !important;
  display: block !important;
}
.vd-ok .ok-hero-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.vd-ok .ok-eyebrow {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.35) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 3px !important;
  display: block !important;
}
.vd-ok .ok-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.4px !important;
  display: block !important;
}
.vd-ok .ok-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}
.vd-ok .ok-kpi {
  background: rgba(255,255,255,.04) !important;
  padding: 9px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.vd-ok .ok-kpi-lbl {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.38) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  line-height: 1.2 !important;
  display: block !important;
}
.vd-ok .ok-kpi-val {
  font-family: 'Space Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.5px !important;
  display: block !important;
  line-height: 1 !important;
}
.vd-ok .ok-kpi-val.warn { color: #F4C26A !important; }
.vd-ok .ok-kpi-val.neg  { color: #F08080 !important; }
.vd-ok .ok-kpi-val.ok   { color: #B8C8D4 !important; }
.vd-ok .ok-kpi-sub { font-size: 9px !important; color: rgba(255,255,255,.28) !important; display: block !important; }

/* ══════════════════════════════════════════
   TABBAR (lista-filtterit)
   ══════════════════════════════════════════ */
.vd-ok .ok-tabs {
  background: var(--dark2) !important;
  display: flex !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.vd-ok .ok-tabs::-webkit-scrollbar { display: none !important; }
.vd-ok .ok-tab {
  flex: 1 !important;
  min-width: 104px !important;
  padding: 7px 8px 0 !important;
  text-align: center !important;
  border-top: 3px solid transparent !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  cursor: pointer !important;
  transition: background .12s !important;
  display: block !important;
}
.vd-ok .ok-tab:last-child { border-right: none !important; }
.vd-ok .ok-tab:hover { background: rgba(255,255,255,.05) !important; }
.vd-ok .ok-tab.on { background: rgba(139,155,168,.12) !important; border-top-color: var(--slate) !important; }
.vd-ok .ok-tab-ico { font-size: 14px !important; display: block !important; }
.vd-ok .ok-tab-name { font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,.55) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: block !important; margin-top: 1px !important; }
.vd-ok .ok-tab.on .ok-tab-name { color: #fff !important; }
.vd-ok .ok-tab-cnt { font-family: 'Space Mono', monospace !important; font-size: 9px !important; color: rgba(255,255,255,.3) !important; display: block !important; }
.vd-ok .ok-tab.on .ok-tab-cnt { color: var(--slate) !important; }
.vd-ok .ok-tab-sum { font-family: 'Space Mono', monospace !important; font-size: 9px !important; font-weight: 700 !important; color: rgba(255,255,255,.45) !important; white-space: nowrap !important; display: block !important; margin-top: 1px !important; }
.vd-ok .ok-tab.on .ok-tab-sum { color: var(--lime, #54A924) !important; }
.vd-ok .ok-tab-bar { height: 2px !important; background: rgba(255,255,255,.07) !important; margin-top: 6px !important; overflow: hidden !important; }
.vd-ok .ok-tab-fill { height: 100% !important; background: var(--slate) !important; }

/* ══════════════════════════════════════════
   LISTA-BODY
   ══════════════════════════════════════════ */
.vd-ok .ok-body { background: var(--panel) !important; display: flex !important; flex-direction: column !important; }
.vd-ok .ok-tsec { display: none !important; flex-direction: column !important; }
.vd-ok .ok-tsec.on { display: flex !important; }

.vd-ok .ok-search {
  display: block !important;
  width: calc(100% - 24px) !important;
  margin: 10px 12px 0 !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 9px 13px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  outline: none !important;
}
.vd-ok .ok-search:focus { border-color: var(--slate) !important; box-shadow: 0 0 0 3px rgba(139,155,168,.15) !important; }

/* Summa-palkki */
.vd-ok .ok-fsum {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}
.vd-ok .ok-fsum-val { font-family: 'Space Mono', monospace !important; font-size: 13px !important; font-weight: 700 !important; color: var(--ink) !important; }

/* ══════════════════════════════════════════
   LASKUKORTTI (invoice-card)
   ══════════════════════════════════════════ */
.vd-ok .ok-inv-card {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  overflow: hidden !important;
  margin: 8px 12px 0 !important;
  box-shadow: var(--shadow) !important;
}
.vd-ok .ok-inv-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  transition: background .1s, transform .08s !important;
  border-bottom: 1px solid var(--line) !important;
  position: relative !important;
}
.vd-ok .ok-inv-row:last-child { border-bottom: none !important; }
.vd-ok .ok-inv-row.ok-hide { display: none !important; }
.vd-ok .ok-inv-row:hover { background: var(--paper) !important; }
.vd-ok .ok-inv-row:active { transform: scale(.997) !important; }

/* Urgency stripe */
.vd-ok .ok-inv-row.sr { padding-left: 11px !important; border-left: 3.5px solid var(--red) !important; }
.vd-ok .ok-inv-row.sg { padding-left: 11px !important; border-left: 3.5px solid var(--gold) !important; }
.vd-ok .ok-inv-row.ss { padding-left: 11px !important; border-left: 3.5px solid var(--slate) !important; }
.vd-ok .ok-inv-row.sok { padding-left: 11px !important; border-left: 3.5px solid #6E8A9C !important; }

.vd-ok .ok-av {
  width: 40px !important; height: 40px !important;
  border-radius: 11px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important; font-weight: 800 !important;
  color: #fff !important; flex-shrink: 0 !important;
  letter-spacing: -.3px !important;
}
.vd-ok .ok-inv-main { flex: 1 !important; min-width: 0 !important; }
.vd-ok .ok-inv-name { font-size: 13px !important; font-weight: 700 !important; color: var(--ink) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
.vd-ok .ok-inv-meta { font-size: 11px !important; color: var(--muted) !important; display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; margin-top: 3px !important; }
.vd-ok .ok-inv-right { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 5px !important; flex-shrink: 0 !important; }
.vd-ok .ok-inv-sum { font-family: 'Space Mono', monospace !important; font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; white-space: nowrap !important; display: block !important; }
/* Veroerittely omalla rivilla paasarakkeessa — rivittyy luonnollisesti, ei vuoda paivamaaran paalle. */
.vd-ok .ok-inv-tax { font-size: 11px !important; color: var(--muted) !important; margin-top: 5px !important; line-height: 1.45 !important; font-weight: 400 !important; }
/* Projektin nimi: koko leveys, rivittyy sanavalista (ei sana/rivi). */
.vd-ok .ok-inv-proj { display: block !important; font-size: 12.5px !important; color: var(--pos, #2E7D52) !important; font-weight: 600 !important; margin-top: 2px !important; line-height: 1.35 !important; word-break: normal !important; overflow-wrap: anywhere !important; }
/* Toimittajanimi: koko rivi nakyviin (ellipsis vain jos todella pitka). */
.vd-ok .ok-inv-name { line-height: 1.3 !important; }

/* ══════════════════════════════════════════
   PILLS
   ══════════════════════════════════════════ */
.vd-ok .pill { display: inline-block !important; font-size: 9.5px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 5px !important; text-transform: uppercase !important; letter-spacing: .03em !important; white-space: nowrap !important; }
.vd-ok .p-red    { background: var(--red-bg) !important;  color: var(--red) !important; }
.vd-ok .p-gold   { background: var(--gold-bg) !important; color: var(--gold) !important; }
.vd-ok .p-slate  { background: #E4EEF4 !important;        color: #1E5C7A !important; }
.vd-ok .p-blue   { background: var(--blue-bg) !important; color: var(--blue) !important; }
.vd-ok .p-gray   { background: #F0F1F0 !important;        color: #7A8478 !important; }
.vd-ok .p-ok     { background: #E4EEF4 !important;        color: #1A5570 !important; }

/* ══════════════════════════════════════════
   DETALJI HERO
   ══════════════════════════════════════════ */
.vd-ok .ok-det-hero {
  background: linear-gradient(155deg, var(--dark) 0%, #1C2530 100%) !important;
  padding: 13px 16px 0 !important;
  display: block !important;
}
.vd-ok .ok-det-back {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  font-size: 11px !important; font-weight: 600 !important; color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 7px !important; padding: 4px 10px !important; margin-bottom: 10px !important;
  cursor: pointer !important; transition: background .12s, color .12s !important;
}
.vd-ok .ok-det-back:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.vd-ok .ok-det-supplier { font-size: 18px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: -.3px !important; line-height: 1.2 !important; margin-bottom: 3px !important; display: block !important; }
.vd-ok .ok-det-sub { font-size: 11.5px !important; color: rgba(255,255,255,.45) !important; display: block !important; }
.vd-ok .ok-det-kpis { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; background: rgba(255,255,255,.06) !important; border-radius: 10px 10px 0 0 !important; overflow: hidden !important; margin-top: 10px !important; }

/* ══════════════════════════════════════════
   STEPPER
   ══════════════════════════════════════════ */
.vd-ok .ok-stepper { background: var(--dark2) !important; display: flex !important; }
.vd-ok .ok-step { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 7px 4px 0 !important; position: relative !important; border-right: 1px solid rgba(255,255,255,.06) !important; }
.vd-ok .ok-step:last-child { border-right: none !important; }
.vd-ok .ok-step::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: rgba(255,255,255,.08) !important; }
.vd-ok .ok-step.done::before { background: var(--slate) !important; }
.vd-ok .ok-step.active::before { background: #6E8A9C !important; }
.vd-ok .ok-step-dot { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: rgba(255,255,255,.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,.4) !important; }
.vd-ok .ok-step.done .ok-step-dot   { background: rgba(139,155,168,.2) !important; color: var(--slate) !important; }
.vd-ok .ok-step.active .ok-step-dot { background: rgba(100,140,180,.3) !important; color: #fff !important; }
.vd-ok .ok-step-lbl { font-size: 8.5px !important; font-weight: 700 !important; color: rgba(255,255,255,.35) !important; text-align: center !important; margin-top: 3px !important; white-space: nowrap !important; padding-bottom: 6px !important; display: block !important; }
.vd-ok .ok-step.done .ok-step-lbl   { color: var(--slate) !important; }
.vd-ok .ok-step.active .ok-step-lbl { color: #E0E8F0 !important; }

/* ══════════════════════════════════════════
   KORTIT
   ══════════════════════════════════════════ */
.vd-ok .ok-card { background: #fff !important; border-radius: 14px !important; border: 1px solid rgba(0,0,0,.07) !important; overflow: hidden !important; margin: 10px 12px 0 !important; box-shadow: var(--shadow) !important; }
.vd-ok .ok-card:last-child { margin-bottom: 12px !important; }
.vd-ok .ok-c-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; border-bottom: 1px solid var(--line) !important; background: #FAFBFD !important; }
.vd-ok .ok-c-title { font-size: 12.5px !important; font-weight: 700 !important; color: #111418 !important; display: flex !important; align-items: center !important; gap: 6px !important; letter-spacing: -.1px !important; }
.vd-ok .ok-c-body { padding: 12px 14px !important; }

/* Field row */
.vd-ok .ok-frow { display: flex !important; gap: 10px !important; padding: 8px 0 !important; border-bottom: 1px solid var(--line) !important; align-items: flex-start !important; }
.vd-ok .ok-frow:last-child { border-bottom: none !important; }
.vd-ok .ok-frow-l { font-size: 11.5px !important; font-weight: 600 !important; color: var(--muted) !important; min-width: 105px !important; flex-shrink: 0 !important; padding-top: 1px !important; display: block !important; }
.vd-ok .ok-frow-v { font-size: 13px !important; color: var(--ink) !important; flex: 1 !important; }

/* Tiliöinti */
.vd-ok .ok-tili-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 0 !important; border-bottom: 1px solid var(--line) !important; }
.vd-ok .ok-tili-row:last-child { border-bottom: none !important; }
.vd-ok .ok-tili-code { font-family: 'Space Mono', monospace !important; font-size: 11px !important; font-weight: 700 !important; color: var(--slate-d) !important; background: rgba(100,120,140,.08) !important; border-radius: 5px !important; padding: 2px 6px !important; flex-shrink: 0 !important; }
.vd-ok .ok-tili-desc { flex: 1 !important; font-size: 12.5px !important; color: var(--ink) !important; }
.vd-ok .ok-tili-pct  { font-size: 11px !important; color: var(--muted) !important; flex-shrink: 0 !important; }
.vd-ok .ok-tili-eur  { font-family: 'Space Mono', monospace !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--ink) !important; flex-shrink: 0 !important; min-width: 64px !important; text-align: right !important; display: block !important; }
.vd-ok .ok-tili-total { border-top: 2px solid var(--line) !important; padding-top: 10px !important; }
.vd-ok .ok-tili-total .ok-tili-eur { color: var(--slate-d) !important; }

/* ══════════════════════════════════════════
   DOKUMENTTI-ESIKATSELU
   ══════════════════════════════════════════ */
.vd-ok .ok-upload-zone {
  border: 2px dashed #C8D0D8 !important;
  border-radius: 12px !important;
  padding: 22px 14px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all .18s !important;
  background: var(--paper) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
}
.vd-ok .ok-upload-zone:hover, .vd-ok .ok-upload-zone.drag { border-color: var(--slate) !important; background: #fff !important; }
.vd-ok .ok-upload-zone input[type=file] { position: absolute !important; inset: 0 !important; opacity: 0 !important; cursor: pointer !important; width: 100% !important; height: 100% !important; }
.vd-ok .ok-upload-ico { font-size: 26px !important; display: block !important; }
.vd-ok .ok-upload-title { font-size: 13px !important; font-weight: 700 !important; color: var(--ink) !important; display: block !important; }
.vd-ok .ok-upload-sub { font-size: 11.5px !important; color: var(--muted) !important; display: block !important; }
.vd-ok .ok-upload-types { font-size: 10.5px !important; color: #9BA8B4 !important; margin-top: 2px !important; display: block !important; }

.vd-ok .ok-doc-prev { display: none !important; flex-direction: column !important; }
.vd-ok .ok-doc-prev.on { display: flex !important; }
.vd-ok .ok-doc-prev-head { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; background: var(--panel) !important; border-bottom: 1px solid var(--line) !important; }
.vd-ok .ok-doc-prev-ico { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: var(--panel) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 17px !important; flex-shrink: 0 !important; }
.vd-ok .ok-doc-file-info { flex: 1 !important; min-width: 0 !important; }
.vd-ok .ok-doc-fname { font-size: 12.5px !important; font-weight: 700 !important; color: var(--ink) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
.vd-ok .ok-doc-fmeta { font-size: 11px !important; color: var(--muted) !important; margin-top: 1px !important; display: block !important; }
.vd-ok .ok-doc-acts { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }

.vd-ok .ok-btn-dl {
  background: var(--slate-d) !important; color: #fff !important;
  border-radius: 7px !important; padding: 6px 12px !important;
  font-family: inherit !important; font-size: 12px !important; font-weight: 700 !important;
  cursor: pointer !important; white-space: nowrap !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  transition: background .12s !important;
}
.vd-ok .ok-btn-dl:hover { background: #253545 !important; }
.vd-ok .ok-btn-rm {
  background: transparent !important; color: var(--muted) !important;
  border: 1px solid var(--line) !important; border-radius: 7px !important;
  padding: 6px 10px !important; font-family: inherit !important; font-size: 12px !important;
  cursor: pointer !important; transition: all .12s !important;
}
.vd-ok .ok-btn-rm:hover { background: var(--red-bg) !important; color: var(--red) !important; border-color: rgba(192,57,43,.2) !important; }
.vd-ok .ok-doc-prev-img { width: 100% !important; max-height: 380px !important; object-fit: contain !important; background: #1A1F25 !important; display: block !important; cursor: zoom-in !important; }
.vd-ok .ok-doc-prev-frame { width: 100% !important; height: 340px !important; border: none !important; display: block !important; background: #1A1F25 !important; }
.vd-ok .ok-doc-sheet { background: #fff !important; padding: 14px !important; }

/* Demo-lasku */
.vd-ok .ok-di-wrap { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px !important; overflow: hidden !important; font-size: 12px !important; color: var(--ink) !important; }
.vd-ok .ok-di-head { background: var(--panel) !important; padding: 11px 13px !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; border-bottom: 1px solid var(--line) !important; }
.vd-ok .ok-di-logo { font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; display: block !important; }
.vd-ok .ok-di-logo em { color: var(--slate) !important; font-style: normal !important; }
.vd-ok .ok-di-type { font-size: 9px !important; font-weight: 700 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-top: 2px !important; display: block !important; }
.vd-ok .ok-di-num { font-family: 'Space Mono', monospace !important; font-size: 13px !important; font-weight: 700 !important; color: var(--slate-d) !important; text-align: right !important; display: block !important; }
.vd-ok .ok-di-date { font-size: 10px !important; color: var(--muted) !important; text-align: right !important; display: block !important; }
.vd-ok .ok-di-body { padding: 11px 13px !important; }
.vd-ok .ok-di-parties { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 10px !important; }
.vd-ok .ok-di-party-lbl { font-size: 9px !important; font-weight: 700 !important; color: var(--slate) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: 3px !important; display: block !important; }
.vd-ok .ok-di-party-name { font-weight: 700 !important; font-size: 12px !important; display: block !important; }
.vd-ok .ok-di-party-addr { font-size: 10.5px !important; color: var(--muted) !important; line-height: 1.5 !important; margin-top: 1px !important; display: block !important; }
.vd-ok table.ok-di-tbl { width: 100% !important; border-collapse: collapse !important; font-size: 11px !important; margin-bottom: 10px !important; }
.vd-ok .ok-di-tbl th { background: var(--panel) !important; padding: 5px 7px !important; text-align: left !important; font-size: 9px !important; font-weight: 700 !important; color: var(--slate) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.vd-ok .ok-di-tbl th.r { text-align: right !important; }
.vd-ok .ok-di-tbl td { padding: 6px 7px !important; border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; }
.vd-ok .ok-di-tbl td.r { text-align: right !important; font-family: 'Space Mono', monospace !important; font-size: 10.5px !important; font-weight: 700 !important; }
.vd-ok .ok-di-tot td { font-weight: 700 !important; background: var(--paper) !important; border-top: 2px solid var(--line) !important; }
.vd-ok .ok-di-footer { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; padding-top: 9px !important; border-top: 1px solid var(--line) !important; font-size: 10px !important; color: var(--muted) !important; }
.vd-ok .ok-di-iban { font-family: 'Space Mono', monospace !important; font-size: 10px !important; font-weight: 700 !important; color: var(--ink) !important; display: block !important; }

/* ══════════════════════════════════════════
   KOMMENTTI-OSIO (@maininta)
   ══════════════════════════════════════════ */
.vd-ok .ok-comment-area {
  width: 100% !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  resize: none !important;
  outline: none !important;
  display: block !important;
  transition: border-color .12s, background .12s !important;
  min-height: 72px !important;
  color: var(--ink) !important;
}
.vd-ok .ok-comment-area:focus { border-color: var(--slate) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(139,155,168,.15) !important; }

/* Maininta-dropdown */
.vd-ok .ok-mention-wrap { position: relative !important; }
.vd-ok .ok-mention-dd {
  display: none !important;
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 0 !important; right: 0 !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
  z-index: 50 !important;
}
.vd-ok .ok-mention-dd.on { display: block !important; }
.vd-ok .ok-mention-dd-title { font-size: 10px !important; font-weight: 700 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; padding: 8px 12px 5px !important; border-bottom: 1px solid var(--line) !important; display: block !important; }
.vd-ok .ok-mention-item {
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 9px 12px !important;
  cursor: pointer !important;
  transition: background .1s !important;
  border-bottom: 1px solid var(--line) !important;
}
.vd-ok .ok-mention-item:last-child { border-bottom: none !important; }
.vd-ok .ok-mention-item:hover { background: var(--panel) !important; }
.vd-ok .ok-mention-av {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important; font-weight: 800 !important; color: #fff !important;
  flex-shrink: 0 !important;
}
.vd-ok .ok-mention-name { font-size: 12.5px !important; font-weight: 700 !important; color: var(--ink) !important; display: block !important; }
.vd-ok .ok-mention-role { font-size: 11px !important; color: var(--muted) !important; display: block !important; }

/* Maininta-tag (sininen chip viestissä) */
.vd-ok .ok-mention-tag {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  background: var(--blue-bg) !important; color: var(--blue) !important;
  font-size: 12px !important; font-weight: 700 !important;
  padding: 1px 7px !important; border-radius: 5px !important;
}

/* Kommentti-submit-palkki */
.vd-ok .ok-comment-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 8px !important; gap: 8px !important; }
.vd-ok .ok-comment-hint { font-size: 11px !important; color: var(--muted) !important; flex: 1 !important; display: block !important; }
.vd-ok .ok-comment-hint em { color: var(--blue) !important; font-style: normal !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════
   BANNERI
   ══════════════════════════════════════════ */
.vd-ok .ok-banner { margin: 8px 12px 0 !important; border-radius: 10px !important; padding: 10px 12px !important; display: flex !important; gap: 9px !important; align-items: flex-start !important; }
.vd-ok .ok-ban-ico { font-size: 15px !important; flex-shrink: 0 !important; }
.vd-ok .ok-ban-text { font-size: 12px !important; color: var(--ink) !important; line-height: 1.5 !important; }
.vd-ok .ok-ban-text strong { font-weight: 700 !important; }
.vd-ok .ban-gold  { background: var(--gold-bg) !important; border: 1px solid rgba(212,135,10,.25) !important; }
.vd-ok .ban-red   { background: var(--red-bg) !important;  border: 1px solid rgba(192,57,43,.2) !important; }
.vd-ok .ban-blue  { background: var(--blue-bg) !important; border: 1px solid rgba(26,108,181,.2) !important; }
.vd-ok .ban-slate { background: #EEF3F7 !important;         border: 1px solid rgba(100,130,160,.2) !important; }

/* ══════════════════════════════════════════
   HISTORIA-LOG
   ══════════════════════════════════════════ */
.vd-ok .ok-log-item { display: flex !important; gap: 10px !important; padding: 9px 0 !important; border-bottom: 1px solid var(--line) !important; align-items: flex-start !important; }
.vd-ok .ok-log-item:last-child { border-bottom: none !important; }
.vd-ok .ok-log-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-top: 5px !important; }
.vd-ok .ok-log-body { flex: 1 !important; min-width: 0 !important; }
.vd-ok .ok-log-event { font-size: 12.5px !important; font-weight: 700 !important; color: var(--ink) !important; display: block !important; }
.vd-ok .ok-log-who   { font-size: 11px !important; color: var(--muted) !important; margin-top: 2px !important; display: block !important; }
.vd-ok .ok-log-note  { font-size: 12px !important; color: var(--ink) !important; margin-top: 3px !important; background: var(--panel) !important; border-radius: 6px !important; padding: 5px 8px !important; display: block !important; line-height: 1.4 !important; }
.vd-ok .ok-log-ts { font-family: 'Space Mono', monospace !important; font-size: 10px !important; color: var(--muted) !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* ══════════════════════════════════════════
   ACTION-NAPIT
   ══════════════════════════════════════════ */
.vd-ok .ok-action-bar { display: flex !important; gap: 8px !important; margin-top: 10px !important; }
.vd-ok .ok-btn-ok {
  flex: 1 !important; background: var(--slate-d) !important; color: #fff !important;
  border-radius: 10px !important; padding: 13px 12px !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  cursor: pointer !important; transition: background .12s !important;
}
.vd-ok .ok-btn-ok:hover { background: #253545 !important; }
.vd-ok .ok-btn-no {
  flex: 1 !important; background: var(--red-bg) !important; color: var(--red) !important;
  border: 1px solid rgba(192,57,43,.2) !important; border-radius: 10px !important; padding: 13px 12px !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  cursor: pointer !important; transition: background .12s !important;
}
.vd-ok .ok-btn-no:hover { background: rgba(192,57,43,.12) !important; }
.vd-ok .ok-btn-sec {
  background: var(--panel) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 7px 13px !important;
  font-family: inherit !important; font-size: 12.5px !important; font-weight: 600 !important;
  cursor: pointer !important; white-space: nowrap !important;
}

/* Käsittelijävalinta */
.vd-ok .ok-assign-sel {
  flex: 1 !important; min-width: 150px !important;
  background: var(--panel) !important; border: 1px solid var(--line) !important;
  border-radius: 8px !important; padding: 9px 12px !important;
  font-family: inherit !important; font-size: 13px !important; outline: none !important;
  color: var(--ink) !important;
}
.vd-ok .ok-assign-sel:focus { border-color: var(--slate) !important; }
.vd-ok .ok-assign-row { display: flex !important; gap: 8px !important; align-items: center !important; margin-top: 8px !important; flex-wrap: wrap !important; }

/* SLA palkki */
.vd-ok .ok-sla-track { height: 5px !important; background: var(--line) !important; border-radius: 3px !important; overflow: hidden !important; margin: 5px 0 3px !important; display: block !important; }
.vd-ok .ok-sla-fill { height: 100% !important; border-radius: 3px !important; display: block !important; }

/* Success */
.vd-ok .ok-success-wrap { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 32px 20px !important; text-align: center !important; gap: 16px !important; background: var(--panel) !important; }
.vd-ok .ok-success-ring { width: 76px !important; height: 76px !important; border-radius: 50% !important; background: rgba(100,140,175,.1) !important; border: 2px solid rgba(100,140,175,.25) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 32px !important; }
.vd-ok .ok-success-title { font-size: 22px !important; font-weight: 700 !important; color: var(--ink) !important; letter-spacing: -.4px !important; display: block !important; }
.vd-ok .ok-success-sub { font-size: 13.5px !important; color: var(--muted) !important; max-width: 300px !important; line-height: 1.6 !important; display: block !important; }
.vd-ok .ok-success-card { width: 100% !important; background: #fff !important; border-radius: 12px !important; border: 1px solid var(--line) !important; padding: 14px 16px !important; text-align: left !important; }
.vd-ok .ok-sr { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 6px 0 !important; border-bottom: 1px solid var(--line) !important; font-size: 13px !important; }
.vd-ok .ok-sr:last-child { border-bottom: none !important; }
.vd-ok .ok-sr-lbl { color: var(--muted) !important; }
.vd-ok .ok-sr-val { font-weight: 700 !important; color: var(--ink) !important; }
.vd-ok .ok-btn-full {
  width: 100% !important; padding: 14px !important; border-radius: 10px !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important;
  cursor: pointer !important; display: block !important;
}
.vd-ok .ok-btn-full.p  { background: var(--slate-d) !important; color: #fff !important; }
.vd-ok .ok-btn-full.s  { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; margin-top: 8px !important; }

/* Zoom overlay */
.vd-ok-zoom {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
.vd-ok-zoom.on { display: flex; }
.vd-ok-zoom-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; background: rgba(255,255,255,.12); border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: none; }
.vd-ok-zoom-img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 8px; object-fit: contain; }
.vd-ok-zoom-dl { background: #1E2D3D; color: #fff; border: none; border-radius: 9px; padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; }

/* Notify-toast */
.vd-ok-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #1E2D3D; color: #fff; padding: 10px 18px;
  border-radius: 9px; font-size: 13px; font-weight: 600;
  z-index: 9998; box-shadow: 0 4px 20px rgba(0,0,0,.3);
  white-space: nowrap; pointer-events: none;
  animation: toastIn .2s ease, toastOut .3s ease 2.2s forwards;
}
@keyframes toastIn  { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0} }

/* Responsive */
@media (max-width: 600px) {
  .vd-ok .ok-kpis { grid-template-columns: repeat(2,1fr) !important; }
}

/* Kustannuspaikka puuttuu -lightbox (ostokierto) */
.vd-ok .ok-kpmodal { display: none; position: fixed; inset: 0; z-index: 100050; align-items: center; justify-content: center; background: rgba(14,36,24,.55); padding: 20px; }
.vd-ok .ok-kpmodal.on { display: flex; }
.vd-ok .ok-kpmodal-box { background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.vd-ok .ok-kpmodal-h { font-size: 17px; font-weight: 800; color: #1C2220; margin-bottom: 8px; }
.vd-ok .ok-kpmodal-t { font-size: 13.5px; color: #3a3f41; line-height: 1.55; margin: 0 0 16px; }
.vd-ok .ok-kpmodal-f { display: flex; gap: 10px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   ULKOASUN YHTENÄISTÄMINEN (v3.5.47)
   Fennoa-detaljilohkot (Kohdistus ja käsittely, laskurivit, PDF, napit)
   ok-card-tyyliin. Scopattu .vd-ok:n alle → vaikuttaa VAIN laskujen
   kierron esikatseluun, ei erilliseen Fennoa ostot -näkymään.
   ════════════════════════════════════════════════════════════════════ */
.vd-ok .rewo-card {
  background: #fff !important; border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 14px !important; box-shadow: var(--shadow) !important;
  margin: 10px 12px 0 !important; padding: 0 !important; overflow: hidden !important;
}
.vd-ok .rewo-card:last-child { margin-bottom: 12px !important; }
/* Yleinen sisäpehmuste (pl. otsikko ja täysleveä PDF) */
.vd-ok .rewo-card > :not(.rewo-tp-cardhead):not(.rewo-po-pdfwrap) { padding-left: 14px !important; padding-right: 14px !important; }
.vd-ok .rewo-card > :not(.rewo-tp-cardhead):not(.rewo-po-pdfwrap):first-child { padding-top: 12px !important; }
.vd-ok .rewo-card > :not(.rewo-po-pdfwrap):last-child { padding-bottom: 12px !important; }

/* Otsikkopalkki kuten .ok-c-head / .ok-c-title */
.vd-ok .rewo-card .rewo-tp-cardhead {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 10px 14px !important; margin: 0 !important;
  background: #FAFBFD !important; border-bottom: 1px solid var(--line) !important;
}
.vd-ok .rewo-card .rewo-tp-cardhead .rewo-h3,
.vd-ok .rewo-card > .rewo-h3,
.vd-ok .rewo-card .rewo-h2 {
  font-size: 12.5px !important; font-weight: 700 !important; color: #111418 !important;
  letter-spacing: -.1px !important; margin: 0 !important;
}

/* Kentät pystyyn: label päällä, kontrolli alla (kuten ok-frow, pinottu) */
.vd-ok .rewo-po-assign3 { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.vd-ok .rewo-po-col { padding: 9px 0 !important; border-bottom: 1px solid var(--line) !important; }
.vd-ok .rewo-po-col:last-child { border-bottom: none !important; }
.vd-ok .rewo-po-col-l { display: block !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--muted) !important; margin-bottom: 6px !important; }

/* Selectit ja hakukentät kuten .ok-assign-sel */
.vd-ok .rewo-po-col select,
.vd-ok .rewo-alloc-form select,
.vd-ok .rewo-proj-search,
.vd-ok .rewo-livesearch-input {
  width: 100% !important; box-sizing: border-box !important;
  background: var(--panel) !important; border: 1px solid var(--line) !important;
  border-radius: 8px !important; padding: 9px 12px !important;
  font-family: inherit !important; font-size: 13px !important; color: var(--ink) !important; outline: none !important;
}
.vd-ok .rewo-po-col select:focus,
.vd-ok .rewo-proj-search:focus,
.vd-ok .rewo-livesearch-input:focus { border-color: var(--slate) !important; }

/* Toimintorivi + napit */
.vd-ok .rewo-po-actions-row { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.vd-ok .rewo-po-btn-secondary {
  background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  border-radius: 8px !important; padding: 9px 14px !important; font-family: inherit !important;
  font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important; text-decoration: none !important;
}
.vd-ok .rewo-btn-approve {
  background: var(--slate-d) !important; color: #fff !important; border: none !important;
  border-radius: 10px !important; padding: 11px 16px !important; font-weight: 700 !important; font-size: 13.5px !important;
  display: inline-flex !important; align-items: center !important; gap: 7px !important; cursor: pointer !important;
}
.vd-ok .rewo-btn-approve:hover { background: #253545 !important; }
.vd-ok .rewo-btn-ghost {
  background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  border-radius: 8px !important; padding: 8px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important;
}
.vd-ok .rewo-btn-mini { padding: 6px 10px !important; font-size: 12px !important; }

/* Aputeksti */
.vd-ok .rewo-help { font-size: 12px !important; color: var(--muted) !important; line-height: 1.45 !important; }

/* Laskurivit / faktat / PDF / liitteet */
.vd-ok .rewo-po-facts { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.vd-ok .rewo-tp-table { width: 100% !important; font-size: 12px !important; border-collapse: collapse !important; }
.vd-ok .rewo-po-pdfwrap { width: 100% !important; }
.vd-ok .rewo-po-pdf { width: 100% !important; min-height: 360px !important; border: none !important; display: block !important; }
.vd-ok .rewo-po-pdfbar { padding-top: 8px !important; }
.vd-ok .rewo-filerow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 8px 0 !important; border-top: 1px solid var(--line) !important; font-size: 12.5px !important; }

/* ════════════════════════════════════════════════════════════
   VELO LIGHT OVERRIDE (era 9) — ostokierto vaaleaksi + 2-palstainen detalji.
   Skooppi .ui-velo .vd-ok → voittaa tumman peruspaletin. Kontrastiturva:
   vaaleilla pinnoilla tumma teksti, hiili-/väriaktiivit valkoisella tekstilla.
   ════════════════════════════════════════════════════════════ */
.ui-velo .vd-ok{ background:#F4F5F6 !important; color:#1B1F23 !important; --slate:#2B3036 !important; }

/* HERO (lista + detalji) vaaleaksi */
.ui-velo .vd-ok .ok-hero,
.ui-velo .vd-ok .ok-det-hero{ background:#FFFFFF !important; border:1px solid #E3E6E9 !important; border-radius:14px !important; }
.ui-velo .vd-ok .ok-eyebrow,
.ui-velo .vd-ok .ok-det-sub{ color:#727A82 !important; }
.ui-velo .vd-ok .ok-title,
.ui-velo .vd-ok .ok-det-supplier{ color:#1B1F23 !important; }
.ui-velo .vd-ok .ok-det-back{ color:#2B3036 !important; }

/* KPI-ruudut vaaleiksi */
.ui-velo .vd-ok .ok-kpis,
.ui-velo .vd-ok .ok-det-kpis{ background:#E3E6E9 !important; }
.ui-velo .vd-ok .ok-kpi{ background:#FFFFFF !important; }
.ui-velo .vd-ok .ok-kpi-lbl{ color:#727A82 !important; }
.ui-velo .vd-ok .ok-kpi-val{ color:#1B1F23 !important; }
.ui-velo .vd-ok .ok-kpi-sub{ color:#9AA1A8 !important; }
.ui-velo .vd-ok .ok-kpi-val.warn{ color:#C77D2A !important; }
.ui-velo .vd-ok .ok-kpi-val.neg{ color:#C0392B !important; }
.ui-velo .vd-ok .ok-kpi-val.ok{ color:#2E7D52 !important; }

/* Suodatin-tabit vaaleiksi */
.ui-velo .vd-ok .ok-tabs{ background:#FFFFFF !important; border:1px solid #E3E6E9 !important; border-top:0 !important; border-radius:0 0 12px 12px !important; }
.ui-velo .vd-ok .ok-tab{ background:transparent !important; border-right:1px solid #E3E6E9 !important; }
.ui-velo .vd-ok .ok-tab:hover{ background:#ECEEF0 !important; }
.ui-velo .vd-ok .ok-tab.on{ background:#ECEEF0 !important; border-top-color:#2B3036 !important; }
.ui-velo .vd-ok .ok-tab-name{ color:#727A82 !important; }
.ui-velo .vd-ok .ok-tab.on .ok-tab-name{ color:#1B1F23 !important; }
.ui-velo .vd-ok .ok-tab-cnt{ color:#9AA1A8 !important; }
.ui-velo .vd-ok .ok-tab.on .ok-tab-cnt{ color:#2B3036 !important; }
.ui-velo .vd-ok .ok-tab-sum{ color:#727A82 !important; }
.ui-velo .vd-ok .ok-tab.on .ok-tab-sum{ color:#2E7D52 !important; }
.ui-velo .vd-ok .ok-tab-bar{ background:#E3E6E9 !important; }
.ui-velo .vd-ok .ok-tab-fill{ background:#2B3036 !important; }

/* Stepper vaaleaksi */
.ui-velo .vd-ok .ok-stepper{ background:#FFFFFF !important; border:1px solid #E3E6E9 !important; border-radius:12px !important; }
.ui-velo .vd-ok .ok-step{ border-right-color:#E3E6E9 !important; }
.ui-velo .vd-ok .ok-step::before{ background:#E3E6E9 !important; }
.ui-velo .vd-ok .ok-step.done::before{ background:#2E7D52 !important; }
.ui-velo .vd-ok .ok-step.active::before{ background:#2B3036 !important; }
.ui-velo .vd-ok .ok-step-dot{ background:#ECEEF0 !important; color:#1B1F23 !important; }
.ui-velo .vd-ok .ok-step.done .ok-step-dot{ background:#2E7D52 !important; color:#fff !important; }
.ui-velo .vd-ok .ok-step.active .ok-step-dot{ background:#2B3036 !important; color:#fff !important; }
.ui-velo .vd-ok .ok-step-lbl{ color:#727A82 !important; }
.ui-velo .vd-ok .ok-step.active .ok-step-lbl,
.ui-velo .vd-ok .ok-step.done .ok-step-lbl{ color:#1B1F23 !important; }

/* Tummat napit -> hiili (kontrastiturva: valkoinen teksti) */
.ui-velo .vd-ok .ok-btn-ok{ background:#2B3036 !important; color:#fff !important; }
.ui-velo .vd-ok .ok-btn-sec{ background:#ECEEF0 !important; color:#1B1F23 !important; border:1px solid #E3E6E9 !important; }

/* ── 2-PALSTAINEN DETALJI ──────────────────────────────────────
   Tyopoyta: dokumentti vasemmalla (sticky) + rivit/kohdistus/kasittely oikealla.
   Mobiili/tablet: dokumentti ylhaalla, muut alla (yksi palsta). */
.vd-ok .ok-det-2col{ display:block; }
.vd-ok .ok-det-col-doc,
.vd-ok .ok-det-col-main{ min-width:0; }
/* Ilman liitettä: yksi palsta (oikea palsta tyhja), ei rosoista tyhjaa tilaa */
.vd-ok .ok-det-2col.no-image{ display:block !important; }
.vd-ok .ok-det-2col.no-image .ok-det-col-doc{ display:none !important; }
@media (min-width:1025px){
  .vd-ok .ok-det-2col{ display:grid !important; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important; gap:16px !important; align-items:start !important; }
  .vd-ok .ok-det-2col.no-image{ display:block !important; }
  .vd-ok .ok-det-col-main{ order:1 !important; }
  .vd-ok .ok-det-col-doc{ order:2 !important; position:sticky !important; top:72px !important; align-self:start !important; }
}
/* Laskun kuva -kortti (sticky oikealla): iso esikatselu */
.vd-ok .ok-img-card .ok-img-body{ padding:0 !important; }
.vd-ok .ok-img-card .rewo-po-pdfwrap{ width:100% !important; box-sizing:border-box !important; }
.vd-ok .ok-img-card .rewo-po-pdf{ width:100% !important; min-height:70vh !important; border:0 !important; display:block !important; box-sizing:border-box !important; background:#fff !important; }
@media (max-width:1024px){ .vd-ok .ok-img-card .rewo-po-pdf{ min-height:60vh !important; } }
/* Laskuasiakirja-upload sivun lopussa: hieman erottuva valilyonti ylos */
.vd-ok .ok-doc-upload{ margin-top:16px !important; }

/* ── era 11: selkea tilamerkinta (pill) heron sisalla + mobiilin kuvan suurennus ── */
.vd-ok .ok-det-status{ display:inline-block !important; margin-top:8px !important; padding:4px 12px !important; border-radius:999px !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.01em !important; }
.vd-ok .ok-det-status.st-sa{ background:#ECEEF0 !important; color:#2B3036 !important; }
.vd-ok .ok-det-status.st-ta{ background:#E7EEF7 !important; color:#3B6FB0 !important; }
.vd-ok .ok-det-status.st-hy{ background:#FBEFD9 !important; color:#C77D2A !important; }

/* Mobiili/tablet: laskukuvan esikatselu + zoom selvasti isommaksi */
@media (max-width:1024px){
  .vd-ok .ok-doc-prev-img{ max-height:62vh !important; }
  .vd-ok .ok-doc-prev-frame{ height:62vh !important; }
  .vd-ok-zoom-img{ max-width:100% !important; max-height:calc(100vh - 80px) !important; width:auto !important; }
  .vd-ok-zoom-close{ top:18px !important; right:18px !important; width:42px !important; height:42px !important; font-size:20px !important; }
}

/* ════════════════════════════════════════════════════════════
   era 28 — Ostolaskun kierto-detalji: yhtenäiset lohkot,
   2-palstainen facts, kohdistustila, AI-kohdistuslukko, doc-paikka.
   ════════════════════════════════════════════════════════════ */

/* Ostolaskun tiedot 2 palstalle (tyopoyta). Grid oletuksena (korkea spesifisyys voittaa
   velo-ui.css:n flex-column), mobiilissa <700px yksipalstainen. EI ei-media flex-overridea
   joka aiemmin kumosi gridin. */
.rewo-app.ui-velo .vd-ok .rewo-po-facts{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:2px 22px !important; }
@media (max-width:699px){
  .rewo-app.ui-velo .vd-ok .rewo-po-facts{ display:flex !important; flex-direction:column !important; gap:2px !important; }
}
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div{ display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:10px !important; padding:5px 0 !important; border-bottom:1px solid var(--line) !important; background:transparent !important; border-radius:0 !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div > span{ color:var(--muted) !important; font-size:11px !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.4px !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div > b{ color:var(--ink) !important; font-size:13px !important; text-align:right !important; }

/* Kohdistustila-pillerit (projekti / KP / kasittelija) heron alla */
.vd-ok .ok-allocstat{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin:10px 12px 0 !important; }
.vd-ok .ok-allocstat-pill{ display:inline-flex !important; align-items:center !important; gap:4px !important; padding:4px 11px !important; border-radius:999px !important; font-size:11.5px !important; font-weight:700 !important; border:1px solid var(--line) !important; background:#fff !important; color:#1B1F23 !important; max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.ui-velo .vd-ok .ok-allocstat-pill.is-ok{ background:#E9F3EE !important; color:#2E7D52 !important; border-color:#CDE6D9 !important; }
.ui-velo .vd-ok .ok-allocstat-pill.is-miss{ background:#FBEFD9 !important; color:#9A5B12 !important; border-color:#F0DDB8 !important; }
.ui-velo .vd-ok .ok-allocstat-pill.is-lock{ background:#ECEEF0 !important; color:#2B3036 !important; border-color:#DBDFE3 !important; }

/* AI-kohdistuslukon huomautus AI-palkissa */
.vd-ok .rewo-po-ai-lock{ margin:8px 0 0 !important; padding:9px 11px !important; border-radius:9px !important; background:#ECEEF0 !important; color:#2B3036 !important; font-size:12px !important; font-weight:600 !important; line-height:1.45 !important; }

/* Laskuasiakirja-kortin otsikkotoiminnot + doc-paikan toggle */
.vd-ok .ok-c-head-acts{ display:inline-flex !important; align-items:center !important; gap:8px !important; }
.vd-ok .ok-btn-docpos{ background:#ECEEF0 !important; color:#2B3036 !important; border:1px solid #E3E6E9 !important; border-radius:8px !important; padding:5px 11px !important; font-size:11.5px !important; font-weight:600 !important; cursor:pointer !important; font-family:inherit !important; }
.vd-ok .ok-btn-docpos:hover{ background:#E3E6E9 !important; }

/* ── era 29: konfiguroitavat roolit (asetukset) + detaljin ratas ── */
.vd-ok .rewo-rolegrid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; gap:4px 14px !important; margin:6px 0 4px !important; }
.vd-ok .rewo-rolegrid .rewo-check{ display:flex !important; align-items:center !important; gap:7px !important; font-size:13px !important; color:#1B1F23 !important; padding:3px 0 !important; cursor:pointer !important; }
.vd-ok .rewo-rolegrid .rewo-check input{ margin:0 !important; }
.vd-ok .ok-det-gear{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; border-radius:8px !important; margin-left:8px !important; text-decoration:none !important; font-size:15px !important; background:#ECEEF0 !important; color:#2B3036 !important; border:1px solid #E3E6E9 !important; }
.vd-ok .ok-det-gear:hover{ background:#E3E6E9 !important; }

/* ════════════════════════════════════════════════════════════
   era 30 — Kohdistus ja kasittely tiiviimmaksi + kelluva action-bar.
   ════════════════════════════════════════════════════════════ */

/* Kohdistus: projekti + kustannuspaikka RINNAKKAIN (ei pystypotkoa). Grid oletuksena,
   mobiilissa <700px pinottu. Poistaa "tyhmat valit". */
.rewo-app.ui-velo .vd-ok .rewo-po-assign3{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px 22px !important; align-items:start !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-assign3 .rewo-po-col{ border-bottom:none !important; padding:0 !important; }
@media (max-width:699px){
  .rewo-app.ui-velo .vd-ok .rewo-po-assign3{ display:block !important; }
  .rewo-app.ui-velo .vd-ok .rewo-po-assign3 .rewo-po-col{ border-bottom:1px solid var(--line) !important; padding:8px 0 !important; }
}
/* Tiukemmat valit kentissa (poistaa "tyhmat valit") */
.rewo-app.ui-velo .vd-ok .rewo-po-col-l{ margin-bottom:5px !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-col .rewo-help{ margin:5px 0 0 !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-assign3 + .rewo-po-gc{ margin-top:10px !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-gc{ display:flex !important; align-items:flex-start !important; gap:8px !important; font-size:12.5px !important; line-height:1.4 !important; padding:9px 11px !important; background:#FAFBFD !important; border:1px solid var(--line) !important; border-radius:9px !important; margin:8px 0 0 !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-ai{ margin-top:10px !important; }

/* Kelluva nopea action-bar (Hyvaksy & vie / Palauta) — vasen alanurkka */
.vd-ok .ok-fab{ position:fixed !important; left:16px !important; bottom:16px !important; z-index:1200 !important; display:flex !important; gap:10px !important; padding:8px !important; background:rgba(255,255,255,.92) !important; backdrop-filter:blur(8px) !important; border:1px solid #E3E6E9 !important; border-radius:14px !important; box-shadow:0 8px 30px rgba(0,0,0,.18) !important; }
.vd-ok .ok-fab-ok{ display:inline-flex !important; align-items:center !important; gap:7px !important; background:#2E7D52 !important; color:#fff !important; border:none !important; border-radius:10px !important; padding:11px 18px !important; font-family:inherit !important; font-size:13.5px !important; font-weight:700 !important; cursor:pointer !important; box-shadow:0 2px 8px rgba(46,125,82,.3) !important; }
.vd-ok .ok-fab-ok:hover{ background:#27684599 !important; background:#276845 !important; }
.vd-ok .ok-fab-no{ display:inline-flex !important; align-items:center !important; gap:7px !important; background:#fff !important; color:#C0392B !important; border:1px solid #E6C9C4 !important; border-radius:10px !important; padding:11px 16px !important; font-family:inherit !important; font-size:13px !important; font-weight:600 !important; cursor:pointer !important; }
.vd-ok .ok-fab-no:hover{ background:#FBEDEB !important; }
/* Tilaa sisallolle ettei kelluva palkki peita alinta lohkoa */
.vd-ok .ok-det-2col{ padding-bottom:8px !important; }
.vd-ok .ok-card:last-child{ margin-bottom:84px !important; }
@media (max-width:560px){
  .vd-ok .ok-fab{ left:10px !important; right:10px !important; bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important; justify-content:stretch !important; }
  .vd-ok .ok-fab-ok{ flex:1 1 auto !important; justify-content:center !important; }
  .vd-ok .ok-fab-no{ flex:0 0 auto !important; }
}
/* Tabletti/iso puhelin (alapalkki nakyy <=1024px): nosta kelluva palkki alapalkin ylapuolelle */
@media (min-width:561px) and (max-width:1024px){
  .vd-ok .ok-fab{ bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important; z-index:1200 !important; }
}

/* ── era 31: ostolaskun paapalstan lohkojen JARJESTYKSEN raahaus (turvallinen, vain jarjestys) ── */
.vd-ok .ok-det-reorder{ display:inline-flex !important; align-items:center !important; gap:6px !important; margin-left:8px !important; padding:5px 12px !important; border-radius:8px !important; font-size:12px !important; font-weight:700 !important; cursor:pointer !important; background:#ECEEF0 !important; color:#2B3036 !important; border:1px solid #E3E6E9 !important; font-family:inherit !important; }
.vd-ok .ok-det-reorder:hover{ background:#E3E6E9 !important; }
.vd-ok .ok-det-reorder-reset{ display:none !important; align-items:center !important; gap:6px !important; margin-left:6px !important; padding:5px 11px !important; border-radius:8px !important; font-size:12px !important; font-weight:600 !important; cursor:pointer !important; background:#fff !important; color:#727A82 !important; border:1px solid #E3E6E9 !important; font-family:inherit !important; }
.vd-ok.okreorder-on .ok-det-reorder-reset{ display:inline-flex !important; }
.vd-ok.okreorder-on .ok-det-reorder{ background:#2B3036 !important; color:#fff !important; border-color:#2B3036 !important; }

/* Raahauskahva — piilossa kunnes muokkaustila paalla */
.vd-ok .ok-blk-grip{ display:none; }
.vd-ok .ok-det-col-main.ok-reorder-on > [data-okblk]{ position:relative !important; outline:1px dashed #B7BEC6 !important; outline-offset:3px !important; transition:outline-color .12s !important; }
.vd-ok .ok-det-col-main.ok-reorder-on > [data-okblk] > .ok-blk-grip{ display:inline-flex !important; align-items:center !important; justify-content:center !important; position:absolute !important; top:8px !important; right:8px !important; z-index:40 !important; width:34px !important; height:30px !important; border-radius:8px !important; cursor:grab !important; background:#2B3036 !important; color:#fff !important; border:none !important; font-size:15px !important; line-height:1 !important; box-shadow:0 2px 8px rgba(0,0,0,.18) !important; touch-action:none !important; font-family:inherit !important; }
.vd-ok .ok-det-col-main.ok-reorder-on > [data-okblk] > .ok-blk-grip:active{ cursor:grabbing !important; }
.vd-ok .ok-blk-dragging{ opacity:.65 !important; outline-color:#2B3036 !important; box-shadow:0 12px 34px rgba(0,0,0,.22) !important; }

/* ── era 32: pienet valit lohkojen valiin + Ostolaskun tiedot -tekstit istumaan laatikon sisaan ── */
/* Hieman ilmaa lohkojen valiin (ei enaa kiinni toisissaan) */
.vd-ok .ok-det-col-main > [data-okblk]{ margin-top:16px !important; }
.vd-ok .ok-det-col-main > [data-okblk]:first-child{ margin-top:10px !important; }

/* Ostolaskun tiedot: tekstit eivat ala laatikon reunasta vaan istuvat siististi sisaan */
.rewo-app.ui-velo .vd-ok .rewo-po-facts{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:2px 24px !important; padding:4px 2px 8px !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div{ display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:14px !important; padding:9px 14px !important; border-bottom:1px solid var(--line) !important; border-radius:8px !important; background:transparent !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div:hover{ background:#FAFBFD !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div > span{ color:var(--muted) !important; font-size:11px !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.4px !important; }
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div > b{ color:var(--ink) !important; font-size:13.5px !important; text-align:right !important; font-weight:700 !important; }
@media (max-width:699px){
  .rewo-app.ui-velo .vd-ok .rewo-po-facts{ display:flex !important; flex-direction:column !important; gap:2px !important; }
}

/* ── era 33: lohkojen palvelintallennus + nayta/piilota-valikko + toast ── */
.vd-ok .ok-det-blocks{ display:inline-flex !important; align-items:center !important; gap:6px !important; margin-left:6px !important; padding:5px 11px !important; border-radius:8px !important; font-size:12px !important; font-weight:600 !important; cursor:pointer !important; background:#fff !important; color:#2B3036 !important; border:1px solid #E3E6E9 !important; font-family:inherit !important; }
.vd-ok .ok-det-blocks:hover{ background:#ECEEF0 !important; }
.vd-ok .ok-det-hero{ position:relative !important; }
/* Piilotettu lohko: pois nakyvista (sailyy DOM:ssa jarjestysta varten) */
.vd-ok .ok-det-col-main > [data-okblk].ok-blk-hidden{ display:none !important; }
/* Jarjestelytilassa piilotettu lohko nakyy himmennettyna, jotta sen voi palauttaa */
.vd-ok .ok-det-col-main.ok-reorder-on > [data-okblk].ok-blk-hidden{ display:block !important; opacity:.4 !important; outline:2px dashed #C9CED3 !important; }
/* Popover */
.vd-ok .ok-blocks-pop{ position:absolute !important; top:46px !important; right:8px !important; z-index:1300 !important; background:#fff !important; border:1px solid #E3E6E9 !important; border-radius:12px !important; box-shadow:0 12px 34px rgba(0,0,0,.16) !important; padding:8px !important; min-width:210px !important; }
.vd-ok .ok-blocks-pop-h{ font-size:11px !important; font-weight:700 !important; color:#727A82 !important; text-transform:uppercase !important; letter-spacing:.04em !important; padding:4px 8px 8px !important; }
.vd-ok .ok-blocks-row{ display:flex !important; align-items:center !important; gap:9px !important; padding:8px !important; border-radius:8px !important; cursor:pointer !important; font-size:13.5px !important; color:#1B1F23 !important; }
.vd-ok .ok-blocks-row:hover{ background:#F4F5F6 !important; }
.vd-ok .ok-blocks-row input{ width:16px !important; height:16px !important; accent-color:#2B3036 !important; }
/* Toast */
.ok-toast{ position:fixed !important; left:50% !important; bottom:calc(96px + env(safe-area-inset-bottom)) !important; transform:translateX(-50%) translateY(8px) !important; background:#2B3036 !important; color:#fff !important; font-size:13px !important; font-weight:600 !important; padding:9px 16px !important; border-radius:999px !important; box-shadow:0 8px 24px rgba(0,0,0,.22) !important; opacity:0 !important; pointer-events:none !important; transition:opacity .2s, transform .2s !important; z-index:4000 !important; }
.ok-toast.show{ opacity:1 !important; transform:translateX(-50%) translateY(0) !important; }
@media (min-width:1025px){ .ok-toast{ bottom:28px !important; } }

/* v3.5.456 — taustakäsittely-laskuri omalle riville + korkea kontrasti; tab-väli ennen historiaa */
.vd-ok .ok-fab{ flex-wrap:wrap !important; }
.ui-velo .vd-ok .ok-bg-countdown{ background:#2B3036 !important; border:1px solid #2B3036 !important; color:#fff !important; }
.ui-velo .vd-ok .ok-bg-countdown .ok-bg-msg{ color:#fff !important; font-weight:700 !important; }
.ui-velo .vd-ok .ok-bg-countdown .ok-bg-close{ background:#fff !important; color:#1B1F23 !important; border:1px solid #fff !important; font-weight:700 !important; }
.ui-velo .vd-ok .ok-tab-sep{ flex:0 0 14px !important; align-self:stretch !important; border-left:2px solid #E3E6E9 !important; margin:6px 5px !important; background:transparent !important; }

/* Kustannustarkistus (kierron kasittely): seuraako lasku projektille */
.vd-ok .ok-verify{display:flex;align-items:flex-start;gap:9px;margin:10px 0 4px;padding:11px 13px;border-radius:11px;font-size:12.5px;line-height:1.45}
.vd-ok .ok-verify-ok{background:#E8F3EC;border:1px solid #BFE0CC;color:#1E5A38}
.vd-ok .ok-verify-warn{background:#FFF4E5;border:1px solid #F1D2A0;color:#8A5A12}
.vd-ok .ok-verify-i{font-size:15px;line-height:1.2;flex-shrink:0}
.vd-ok .ok-verify-t{min-width:0}
.vd-ok .ok-verify-link{display:inline-block;margin-top:2px;color:inherit;font-weight:700;text-decoration:underline}

/* === Valjyys / suoja-alueet ostolaskun detail-nakymassa (Niko: lohkot eivat kiinni, teksteille tilaa ylh/alh) === */
.vd-ok .ok-card{ margin-top:16px !important; }
.vd-ok .ok-c-head{ padding:13px 16px !important; }
.vd-ok .ok-c-body{ padding:16px 16px 18px !important; }
.vd-ok .ok-allocstat{ margin:14px 12px 0 !important; }
.vd-ok .ok-verify{ margin:12px 12px 4px !important; }
/* Kenttalaatikoiden (TOIMITTAJA/LASKUNUMERO...) ja sisaisten ruutujen valjyys */
.vd-ok .ok-c-body > *{ margin-top:0; }
.vd-ok .ok-c-body > * + *{ margin-top:12px !important; }

/* === Laskun kuva: koko korkeana, alkaa palstan ylalaidasta, selkea vali ymparykseen === */
.vd-ok .ok-img-card{ margin-bottom:16px !important; }
.vd-ok .ok-img-card .rewo-po-pdf{ min-height:84vh !important; }
@media (max-width:1024px){ .vd-ok .ok-img-card .rewo-po-pdf{ min-height:62vh !important; } }
.vd-ok .ok-img-loading{ padding:22px 18px !important; }

/* ============================================================
 * Ostolaskun tiedot: PALSTOITA 2 sarakkeeseen myos mobiilissa (siistimpi,
 * vahemman pystytilaa). Ohittaa aiemmat yksisarakkeiset media-saannot
 * (sama spesifisyys, myohempi lahdejarjestys voittaa). Toimittaja (1. kentta)
 * taysleveana pitkan toimittajanimen vuoksi.
 * ============================================================ */
.rewo-app.ui-velo .vd-ok .rewo-po-facts{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  padding:6px 2px 12px !important;
}
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:3px !important;
  padding:9px 12px !important;
  background:#F7FAF7 !important;
  border:1px solid #E4E9E4 !important;
  border-radius:11px !important;
}
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div:first-child{
  grid-column:1 / -1 !important;
}
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div > span{
  color:#6C7770 !important; font-size:10px !important; font-weight:800 !important;
  letter-spacing:.4px !important; text-transform:uppercase !important;
}
.rewo-app.ui-velo .vd-ok .rewo-po-facts > div > b{
  color:#16211B !important; font-size:14.5px !important; text-align:left !important; font-weight:800 !important;
}