/* ==========================================================================
   VarianX UI-proto - tyylit
   VarianX2026 v2 design tokens (CSS only — ei CDN/webfontteja/kirjastoja).
   ========================================================================== */

:root {
  /* Brand (VarianX2026 v2 — WCAG AA) */
  --vx-primary:            #206bc4;
  --vx-primary-rgb:        32,107,196;
  --vx-primary-fg:         #ffffff;
  --vx-primary-hover:      #1c60b0;
  --vx-primary-active:     #1a579e;
  --vx-primary-soft:       rgba(32,107,196,.10);
  --vx-primary-soft-hover: rgba(32,107,196,.16);
  --vx-secondary:          #626976;
  --vx-secondary-rgb:      98,105,118;
  --vx-secondary-fg:       #ffffff;
  --vx-secondary-hover:    #4f5763;
  --vx-success-hover:      #1f762d;
  --vx-warning-hover:      #ad4805;
  --vx-info-hover:         #2f6b9e;
  --vx-danger-hover:       #b82f2f;

  /* Semantic (AA on white) */
  --vx-success:            #238633;
  --vx-success-rgb:        35,134,51;
  --vx-warning:            #c55206;
  --vx-warning-rgb:        197,82,6;
  --vx-danger:             #d63939;
  --vx-danger-rgb:         214,57,57;
  --vx-info:               #357ab3;
  --vx-info-rgb:           53,122,179;

  /* Extended palette */
  --vx-blue:    #206bc4;
  --vx-azure:   #4299e1;
  --vx-indigo:  #4263eb;
  --vx-purple:  #ae3ec9;
  --vx-pink:    #d6336c;
  --vx-red:     #d63939;
  --vx-orange:  #f76707;
  --vx-yellow:  #f59f00;
  --vx-lime:    #74b816;
  --vx-green:   #2fb344;
  --vx-teal:    #0ca678;
  --vx-cyan:    #17a2b8;

  /* Neutrals (slate) */
  --vx-gray-50:  #f8fafc;
  --vx-gray-100: #f1f5f9;
  --vx-gray-200: #e9edf1;
  --vx-gray-300: #dbe1e6;
  --vx-gray-400: #a8b3c1;
  --vx-gray-500: #7b8794;
  --vx-gray-600: #545f6f;
  --vx-gray-700: #38414f;
  --vx-gray-800: #232a35;
  --vx-gray-900: #16181d;
  --vx-gray-950: #0b0d10;

  /* Surface roles */
  --vx-bg:            #f5f7fa;
  --vx-surface:       #ffffff;
  --vx-surface-alt:   #fafbfc;
  --vx-surface-sunk:  #f1f4f8;
  --vx-border:        #d4d8e0; /* panel chrome — one notch darker than original #e6e8ee */
  --vx-border-strong: #d4d8e0; /* control edges — same stroke as panels */
  --vx-text:          #1d232e;
  --vx-text-muted:    #6a7280;
  --vx-text-subtle:   #6f767f;
  --vx-text-inverse:  #ffffff;
  --vx-code-bg:       #f4f6f9;
  --vx-code-fg:       #b02a5a;

  /* Elevation */
  --vx-shadow-xs:  0 1px 1px 0 rgba(15,20,30,.04);
  --vx-shadow-sm:  0 1px 2px 0 rgba(15,20,30,.06), 0 1px 3px 0 rgba(15,20,30,.05);
  --vx-shadow-md:  0 4px 6px -1px rgba(15,20,30,.08), 0 2px 4px -2px rgba(15,20,30,.06);
  --vx-shadow-lg:  0 12px 20px -4px rgba(15,20,30,.10), 0 4px 8px -4px rgba(15,20,30,.06);
  --vx-shadow-xl:  0 24px 40px -12px rgba(15,20,30,.18);
  --vx-shadow-inner: inset 0 1px 2px 0 rgba(15,20,30,.06);
  --vx-focus-ring: 0 0 0 2px var(--vx-surface), 0 0 0 4px var(--vx-primary);

  /* Radius scale */
  --vx-radius-none: 0;
  --vx-radius-xs:   2px;
  --vx-radius-sm:   4px;
  --vx-radius-md:   6px;
  --vx-radius-lg:   8px;
  --vx-radius-xl:   12px;
  --vx-radius-2xl:  16px;
  --vx-radius-pill: 9999px;

  /* Spacing */
  --vx-space-0: 0;
  --vx-space-1: 4px;
  --vx-space-2: 8px;
  --vx-space-3: 12px;
  --vx-space-4: 16px;
  --vx-space-5: 20px;
  --vx-space-6: 24px;
  --vx-space-8: 32px;
  --vx-space-10: 40px;
  --vx-space-12: 48px;
  --vx-space-16: 64px;
  --vx-space-20: 80px;

  /* Type — system stacks only (no CDN webfonts) */
  --vx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --vx-fs-xs:   12px;
  --vx-fs-sm:   13px;
  --vx-fs-base: 14px;
  --vx-fs-md:   16px;
  --vx-fs-lg:   18px;
  --vx-fs-xl:   18px;
  --vx-fs-2xl:  20px;
  --vx-fs-3xl:  24px;
  --vx-fs-4xl:  32px;
  --vx-fs-5xl:  40px;
  --vx-fs-6xl:  56px;
  --vx-lh-tight: 1.2;
  --vx-lh-snug:  1.35;
  --vx-lh-normal: 1.5;
  --vx-lh-loose: 1.65;

  /* Motion */
  --vx-t-fast: 160ms cubic-bezier(.4,0,.2,1);
  --vx-t-med:  200ms cubic-bezier(.4,0,.2,1);
  --vx-t-slow: 280ms cubic-bezier(.4,0,.2,1);

  /* Control sizes: small · medium (default) · large */
  --vx-control-sm: 36px;
  --vx-control-md: 44px;
  --vx-control-lg: 48px;
  --vx-control-h: var(--vx-control-md);
  --vx-control-h-compact: var(--vx-control-sm);

  /* Layout chrome (Tabler-style vertical + hover-expand rail) */
  --vx-sidebar-rail: 60px;
  --vx-sidebar-w: 260px;
  /* Hover-intent-viive navin laajennukselle: leveys JA labelit/välit odottavat
     saman verran -> aukeavat yhtä aikaa (ei "kasva ensin, aukea sitten"). */
  --vx-nav-hover-delay: .22s;
  --vx-header-h:  60px;

  /* ---- Compat aliases (existing proto selectors) ---- */
  --vx-navy: var(--vx-gray-800);
  --vx-blue-dark: var(--vx-primary-active);
  --vx-link: var(--vx-primary);
  --vx-muted: var(--vx-text-muted);
  --vx-line: var(--vx-border);
  --vx-panel: var(--vx-surface);
  --vx-rail: var(--vx-surface);
  --vx-field-border: var(--vx-border-strong);
  --vx-canvas: var(--vx-bg);
  --vx-surface-2: var(--vx-surface-sunk);
  --vx-danger-bg: rgba(var(--vx-danger-rgb),.10);
  --vx-success-bg: rgba(var(--vx-success-rgb),.12);
  --vx-warning-bg: rgba(var(--vx-warning-rgb),.12);
  --vx-info-bg: rgba(var(--vx-info-rgb),.12);
  --vx-overlay: rgba(var(--vx-primary-rgb),.18);
  --vx-radius: var(--vx-radius-lg);
  --vx-radius-input: var(--vx-radius-md);
  --vx-radius-btn: var(--vx-radius-md);
  --vx-shadow: var(--vx-shadow-sm);
  --vx-shadow-l: var(--vx-shadow-lg);
  --vx-focus: var(--vx-focus-ring);
  /* Solid fills (no gradients) — VarianX2026 buttons */
  --vx-btn-primary: var(--vx-primary);
  --vx-btn-primary-hover: var(--vx-primary-hover);
  --vx-btn-secondary: var(--vx-surface);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--vx-canvas);
  color: var(--vx-text);
  font-family: var(--vx-font-sans);
  font-size: var(--vx-fs-base);
  line-height: var(--vx-lh-normal);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-none { display: none !important; }

/* ---- Runko: hover-expand rail | page-wrapper -------------------------- */
/* Anti-flash (24.8.2026): vasen sivupalkki (#leftpane) rakennetaan JS:lla
   (shell.js mount) vasta DOMContentLoadedissa -> ilman tata rail "pomppaa"
   esiin joka sivunvaihdossa. Piilotetaan shell kunnes mount lisaa
   .vx-shell-ready bodyyn -> sivu paljastuu kerralla valmiina (sisalto + navi).
   Vain shell-sivuilla (body[data-vx-mount]); muut sivut eivat piiloudu. */
body[data-vx-mount]:not(.vx-shell-ready) #mainview { visibility: hidden; }
#mainview {
  display: flex;
  min-height: 100vh;
  position: relative;
  /* Sisalto varaa vain kapean kiskon — hover-laajennus peittaa sisallon */
  padding-left: var(--vx-sidebar-rail);
}

/* ---- Vasen navi: kapea ikonikisko, hoverilla labelit ------------------- */
#leftpane {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--vx-sidebar-rail);
  background: var(--vx-rail);
  border-right: 1px solid var(--vx-line);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--vx-space-4) var(--vx-space-2) var(--vx-space-3);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 60;
  transition: width var(--vx-t-med), box-shadow var(--vx-t-med), transform var(--vx-t-med);
}
#leftpane:hover {
  width: var(--vx-sidebar-w);
  box-shadow: var(--vx-shadow-lg);
  /* Hover-intent: laajene vasta lyhyen viiveen jälkeen, jottei hiiren
     ohilipaisu ruudun vasemmassa reunassa (esim. matkalla sisältöön) peitä
     sisältöä 60-260px kaistalla. Kutistuu heti kun hiiri poistuu (perus-
     transitionissa ei viivettä) -> sisältö paljastuu välittömästi. */
  transition-delay: var(--vx-nav-hover-delay);
}
.v360logowrap {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; margin: 0 0 var(--vx-space-4);
  padding: 6px 10px;
  text-decoration: none; flex-shrink: 0;
  color: var(--vx-primary);
  border-radius: var(--vx-radius-md);
  overflow: hidden;
}
.v360logowrap:hover { background: var(--vx-surface-sunk); text-decoration: none; }
.v360logo_x {
  width: 24px; height: 28px; flex-shrink: 0; color: var(--vx-primary);
}
.v360logo_full {
  display: none;
}
.v360brand_text {
  font-size: var(--vx-fs-lg); font-weight: 700; letter-spacing: -.01em;
  color: var(--vx-text); line-height: 1;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--vx-t-fast), transform var(--vx-t-fast);
  white-space: nowrap;
  pointer-events: none;
}
#leftpane:hover .v360brand_text {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: var(--vx-nav-hover-delay);
}
/* Vanha placeholder-luokka, jätetään yhteensopivuuden vuoksi */
.v360logo { width: 30px; height: 30px; cursor: pointer; flex-shrink: 0; }
.leftmenu_container {
  display: flex; flex-direction: column;
  justify-content: space-between;
  flex: 1; width: 100%; min-height: 0; gap: var(--vx-space-4);
}
#leftmenu_upper {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  flex: 1; min-height: 0;
  /* Väli pidetään VAKIONA (ei kasva hoverilla) -> ei pystysuuntaista siirtymää
     valikkoa avattaessa. Ryhmien erottelu tulee väliotsikoista. (Vesku 4.9.2026) */
}
#leftmenu_lower {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding-top: var(--vx-space-3);
  border-top: 1px solid var(--vx-border);
  flex-shrink: 0;
}
.vx-nav-group { display: flex; flex-direction: column; gap: 2px; }
.vx-nav-label {
  font-size: var(--vx-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vx-text-subtle);
  padding: 0 var(--vx-space-3) 6px;
  /* KORJAUS (Vesku 4.9.2026): otsikko varaa AINA saman pystytilan, myös kapeassa
     ikonikiskossa -> valikkoa avattaessa mikään ei siirry, joten hoverin alla
     oleva ikoni pysyy samana (aiemmin max-height 0 -> hover 24px työnsi alempia
     ikoneita alas, esim. Support -> Visitors). Collapsed-tilassa teksti on
     piilossa ja tilalla näkyy hienovarainen erotinviiva; hoverilla viiva häviää
     ja teksti feidaa esiin. */
  max-height: 24px; overflow: hidden; white-space: nowrap;
  opacity: 0;
  transition: opacity var(--vx-t-fast);
  position: relative;
}
/* Collapsed: keskitetty erotinviiva otsikon paikalle (näyttää tarkoitukselliselta,
   ei tyhjältä aukolta). Häviää kun valikko avautuu. */
.vx-nav-label::before {
  content: ""; position: absolute; left: 50%; top: calc(50% - 3px);
  width: 20px; height: 1px; background: var(--vx-border);
  transform: translateX(-50%);
  transition: opacity var(--vx-t-fast);
}
#leftpane:hover .vx-nav-label {
  opacity: 1;
  transition-delay: var(--vx-nav-hover-delay);
}
#leftpane:hover .vx-nav-label::before { opacity: 0; }
.leftmenuitem {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; margin: 0; padding: 7px 10px;
  border-radius: var(--vx-radius-md);
  color: var(--vx-text-muted);
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  transition: background var(--vx-t-fast), color var(--vx-t-fast);
}
.leftmenuitem:hover { background: var(--vx-surface-sunk); color: var(--vx-text); text-decoration: none; }
.leftmenuitem svg { width: 20px; height: 20px; stroke: currentColor; flex-shrink: 0; stroke-linecap: round; stroke-linejoin: round; }
.leftmenuitem:hover svg { stroke: currentColor; }
.leftmenuitem.selected { background: var(--vx-primary-soft); color: var(--vx-primary); }
.leftmenuitem.selected svg { stroke: currentColor; }
.lm_label {
  font-size: var(--vx-fs-base); font-weight: 500; color: inherit;
  opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--vx-t-fast);
}
#leftpane:hover .lm_label { opacity: 1; transition-delay: var(--vx-nav-hover-delay); }
.leftmenuitem.selected .lm_label { color: inherit; font-weight: 600; }
.leftpane_clockrow { cursor: default; }
.leftpane_clockrow:hover { background: none; color: var(--vx-text-muted); }
.leftpane_clockrow .lm_label { color: inherit; font-variant-numeric: tabular-nums; }

/* Versio-/build-leima: app-shellin vasemman navin alalaita. Piiloutuu kun
   sivupalkki on kapea (rail), paljastuu hoverilla kuten .lm_label. */
.lm_version {
  flex-shrink: 0;
  padding: 8px 10px 2px;
  font-size: var(--vx-fs-xs);
  line-height: 1.3;
  color: var(--vx-text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--vx-t-fast);
}
#leftpane:hover .lm_version { opacity: .75; transition-delay: var(--vx-nav-hover-delay); }

.vx-nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 20, 30, .35);
  z-index: 55;
}
.vx-nav-toggle {
  display: none;
  width: 36px; height: 36px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--vx-radius-md);
  background: transparent; color: var(--vx-text-muted); cursor: pointer;
  flex-shrink: 0;
}
.vx-nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; }
.vx-nav-toggle:hover { background: var(--vx-surface-sunk); color: var(--vx-text); }

/* ---- Sisaltoalue (page-wrapper) --------------------------------------- */
#midpane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  width: 100%;
}

#mainheader {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vx-space-4);
  min-height: var(--vx-header-h);
  padding: 0 var(--vx-space-6);
  background: var(--vx-surface);
  border-bottom: 1px solid var(--vx-border);
}
.mainheader_left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mainheader_logo { width: 22px; height: 22px; flex-shrink: 0; }
.mainheader_logo svg { width: 22px; height: 22px; display: block; stroke: var(--vx-navy); stroke-linecap: round; stroke-linejoin: round; }
.mainheader_caption {
  font-size: var(--vx-fs-xl); font-weight: 700; letter-spacing: -.01em;
  color: var(--vx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 767px) {
  #mainview { padding-left: 0; }
  #leftpane {
    width: var(--vx-sidebar-w);
    transform: translateX(-100%);
    box-shadow: none;
  }
  /* Mobiilissa avattuna labelit aina nakyvilla (ei hoveria) */
  #leftpane #leftmenu_upper { gap: var(--vx-space-4); }
  #leftpane .v360brand_text,
  #leftpane .lm_label,
  #leftpane .vx-nav-label {
    opacity: 1; transform: none; pointer-events: auto;
    max-height: none; padding-bottom: 6px;
  }
  /* Mobiilissa labelit näkyvät aina -> collapsed-erotinviivaa ei tarvita. */
  #leftpane .vx-nav-label::before { display: none; }
  body.vx-nav-open #leftpane {
    transform: translateX(0);
    box-shadow: var(--vx-shadow-xl);
  }
  body.vx-nav-open .vx-nav-backdrop { display: block; }
  .vx-nav-toggle { display: inline-grid; place-items: center; }
  #mainheader { padding: 0 var(--vx-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  #leftpane { transition: none; }
  .leftmenuitem, .lm_label, .v360brand_text, .vx-nav-label { transition: none; }
  .pane_backdrop, .vinfopane { transition: none; }
}
/* ---- Jaettu DAY PICKER (datepicker.js) ---- */
.vxdp {
  position: absolute; z-index: 300; width: 268px;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(var(--vx-primary-rgb),.22); padding: 10px;
  font-size: 13px; color: var(--vx-text);
}
.vxdp[hidden] { display: none; }
.vxdp_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vxdp_title { font-weight: 700; color: var(--vx-navy); }
.vxdp_nav {
  width: var(--vx-control-sm); height: var(--vx-control-sm); border: 1px solid var(--vx-line); border-radius: 8px;
  background: var(--vx-surface); color: var(--vx-navy); cursor: pointer; font-size: 16px; line-height: 1;
}
.vxdp_nav:hover { background: rgba(var(--vx-primary-rgb),.06); border-color: var(--vx-blue); }
.vxdp_dow, .vxdp_week { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 2px; align-items: center; }
.vxdp_dow { margin-bottom: 4px; }
.vxdp_dow span { text-align: center; font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); letter-spacing: .04em; }
.vxdp_dow .vxdp_sun, .vxdp_day.sun { color: var(--vx-danger); }
.vxdp_wk { text-align: center; font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.vxdp_day {
  position: relative;
  height: var(--vx-control-sm); border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--vx-text); font-size: 13px;
}
.vxdp_day:hover:not(.empty) { background: rgba(var(--vx-primary-rgb),.08); }
.vxdp_day.empty { cursor: default; }
.vxdp_day.today { box-shadow: inset 0 0 0 1px var(--vx-blue); color: var(--vx-blue); font-weight: 700; }
.vxdp_day.selected { background: var(--vx-blue); color: var(--vx-text-inverse); font-weight: 700; }
/* "on varauksia" -piste (05 Records/MonthDaysWithRecords) */
.vxdp_day.has-record::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--vx-blue); transform: translateX(-50%);
}
.vxdp_day.selected.has-record::after { background: var(--vx-surface); }
.vxdp_foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.vxdp_today {
  border: 0; background: transparent; color: var(--vx-blue); font-weight: 700; font-size: 12px;
  cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.vxdp_today:hover { background: rgba(var(--vx-primary-rgb),.08); }
.vxdp_nav:focus-visible,
.vxdp_day:focus-visible,
.vxdp_today:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }

/* Touch: keep dense 36px chrome on mouse; 44px targets for thumbs. */
@media (pointer: coarse) {
  .leftmenuitem { min-height: 44px; }
  .vxdp { width: min(calc(100vw - 24px), 340px); }
  .vxdp_nav { width: 44px; height: 44px; }
  .vxdp_day { height: 44px; min-height: 44px; }
  .vxdp_today { min-height: 44px; padding: 10px 12px; }
  .header_search_input,
  .vx-input,
  .vx-select,
  input.vx-input,
  select.vx-select {
    font-size: 16px;
  }
}

/* Delegates -paneeli + pysyva delegointi (Settings) */
.dlg_list { display: flex; flex-direction: column; }
.dlg_row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--vx-line); }
.dlg_person { min-width: 0; }
.dlg_name { font-size: 14px; font-weight: 600; color: var(--vx-navy); }
.dlg_email { font-size: 12px; color: var(--vx-muted); }
.dlg_rowright { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dlg_tag { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--vx-text-inverse); background: var(--vx-secondary); border-radius: 12px; padding: 4px 10px; white-space: nowrap; }
.dlg_empty { padding: 18px 2px; color: var(--vx-muted); font-size: 13px; }
/* api-id:26 Load Record History: varauksen muutoshistoria-paneeli. Aikaleima |
   toiminto+lisatieto | tekija. Read-only lista. */
.hst_list { display: flex; flex-direction: column; }
.hst_row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--vx-line); }
.hst_when { flex: 0 0 108px; font-size: 12px; color: var(--vx-muted); font-variant-numeric: tabular-nums; }
.hst_main { flex: 1 1 auto; min-width: 0; }
.hst_action { font-size: 14px; font-weight: 600; color: var(--vx-navy); }
.hst_sub { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.hst_who { flex: 0 0 auto; font-size: 12px; color: var(--vx-muted); text-align: right; white-space: nowrap; }
.hst_empty { padding: 18px 2px; color: var(--vx-muted); font-size: 13px; }
.dlg_add { margin-top: 18px; }
.dlg_addttl { font-size: 13px; font-weight: 700; color: var(--vx-navy); margin-bottom: 8px; }
.dlg_addrow { display: flex; gap: 10px; align-items: center; }
.dlg_select { min-width: 220px; }
.dlg_addrow .dlg_select { flex: 1; }

/* Settings-valilehdet */
.set_tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vx-line); margin-bottom: 18px; }
.set_tab { padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--vx-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.set_tab:hover { color: var(--vx-navy); }
.set_tab.active { color: var(--vx-blue); border-bottom-color: var(--vx-blue); }
.set_help { font-size: 12px; color: var(--vx-muted); margin: 0 0 14px; line-height: 1.5; }

/* Copy Record -paneeli (Bookings) */
.cpr_head { font-size: 14px; font-weight: 700; color: var(--vx-blue); padding: 4px 2px 14px; }
.cpr_card { border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface); padding: 16px; margin-bottom: 14px; }
.cpr_typerow { display: flex; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.cpr_radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vx-text); cursor: pointer; }
.cpr_row, .cpr_endrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cpr_lbl { font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text); white-space: nowrap; }
.cpr_num { width: 60px; text-align: center; }
.cpr_unit { width: 100px; }
.cpr_date { width: 130px; }
.cpr_result { padding-top: 6px; }
.cpr_stats { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 14px; flex-wrap: wrap; }
.cpr_progresscol { flex: 1; min-width: 160px; }
.cpr_stat { display: flex; flex-direction: column; gap: 6px; }
.cpr_statk { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--vx-muted); text-transform: uppercase; }
.cpr_statv { font-size: 18px; font-weight: 700; color: var(--vx-navy); }
.cpr_progress { height: 14px; border-radius: 7px; background: var(--vx-surface-sunk); overflow: hidden; }
.cpr_bar { height: 100%; background: var(--vx-blue); border-radius: 7px; transition: width .12s linear; }
.cpr_listttl { font-size: 12px; font-weight: 700; margin: 12px 0 6px; }
.cpr_red { color: var(--vx-red); }
.cpr_green { color: var(--vx-success); }
.cpr_dates { display: flex; flex-direction: column; gap: 3px; }
.cpr_dateitem { font-size: 13px; }
.cpr_dateitem.cpr_red { color: var(--vx-red); }
.cpr_dateitem.cpr_green { color: var(--vx-success); }

/* Repeat (toistuva varaus) - New Booking */
#repeatBody { display: flex; flex-direction: column; gap: 10px; }
.rp_row { display: flex; align-items: center; gap: 8px; }
.rp_lbl { font-size: 12px; color: var(--vx-muted); white-space: nowrap; }
.rp_num { width: 64px; text-align: center; }
.rp_end { width: 110px; }
.rp_wd { display: flex; gap: 5px; flex-wrap: wrap; }
.rp_wdbtn { width: 36px; height: var(--vx-control-h-compact); min-height: var(--vx-control-h-compact); border: 1px solid var(--vx-field-border); background: var(--vx-surface); border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--vx-muted); cursor: pointer; transition: all var(--vx-t-fast); }
.rp_wdbtn:hover { border-color: var(--vx-blue); }
.rp_wdbtn.on { background: var(--vx-blue); border-color: var(--vx-blue); color: var(--vx-text-inverse); }
.rp_wdbtn:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.rp_hint { font-size: 12px; color: var(--vx-muted); }
.rp_preview { border-top: 1px dashed var(--vx-line); padding-top: 10px; margin-top: 2px; }
.rp_sumtxt { font-size: 12px; font-weight: 600; color: var(--vx-navy); margin-bottom: 8px; }
.rp_chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp_chip { font-size: var(--vx-fs-xs); color: var(--vx-blue); background: var(--vx-primary-soft); border: 1px solid var(--vx-border); border-radius: 6px; padding: 3px 8px; }
.rp_more { font-size: var(--vx-fs-xs); color: var(--vx-muted); padding: 3px 4px; }

.mainheader_right { position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Screen-reader-only label (header search and other named-but-hidden labels) */
.vx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.vx-skip-link {
  position: fixed; left: 16px; top: 8px; z-index: 400;
  padding: 8px 16px;
  background: var(--vx-primary); color: var(--vx-text-inverse);
  font-weight: 600; border-radius: var(--vx-radius-md);
  transform: translateY(-160%);
  text-decoration: none;
  pointer-events: none;
}
.vx-skip-link:focus {
  transform: translateY(0);
  pointer-events: auto;
  outline: none;
  box-shadow: var(--vx-focus-ring);
}

.header_userinfo { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: var(--vx-radius-md); transition: background var(--vx-t-fast); }
.header_userinfo:hover, .header_userinfo.open { background: var(--vx-surface-sunk); }

/* Globaali haku (header) */
.header_search { position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--vx-surface-sunk); border: 1px solid var(--vx-field-border); border-radius: var(--vx-radius-md);
  box-sizing: border-box; height: var(--vx-control-h); min-height: var(--vx-control-h);
  padding: 0 12px; width: 230px; transition: width var(--vx-t-med), border-color var(--vx-t-fast), background var(--vx-t-fast); }
.header_search.active { width: 320px; background: var(--vx-surface); border-color: var(--vx-blue); box-shadow: var(--vx-focus-ring); }
.header_search_ic svg { width: 16px; height: 16px; stroke: var(--vx-muted); display: block; }
.header_search.active .header_search_ic svg { stroke: var(--vx-blue); }
.header_search_input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font-size: var(--vx-fs-sm); color: var(--vx-text); }
.header_search_input::placeholder { color: var(--vx-text-subtle); }
.header_search_results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-height: 460px; overflow: auto;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(var(--vx-primary-rgb),.22); z-index: 96; padding: 6px;
}
.hs_group { padding: 4px 0; }
.hs_group + .hs_group { border-top: 1px solid var(--vx-line); }
.hs_grouphead { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .09em; color: var(--vx-muted); text-transform: uppercase; padding: 6px 10px 4px; }
.hs_item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none; }
.hs_item:hover { background: var(--vx-primary-soft); }
.hs_ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--vx-primary-soft); display: flex; align-items: center; justify-content: center; }
.hs_ic svg { width: 16px; height: 16px; stroke: var(--vx-navy); }
.hs_body { min-width: 0; display: flex; flex-direction: column; }
.hs_title { font-size: 13px; font-weight: 600; color: var(--vx-navy); display: flex; align-items: center; gap: 8px; }
.hs_sub { font-size: var(--vx-fs-xs); color: var(--vx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs_status { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--vx-text-inverse); padding: 1px 7px; border-radius: 10px; }
.hs_empty { padding: 18px 14px; font-size: 13px; color: var(--vx-muted); text-align: center; }

/* Ilmoituskeskus (header) */
.header_notif { position: relative; background: var(--vx-surface-sunk); border: 1px solid transparent; border-radius: var(--vx-radius-md);
  width: var(--vx-control-h); height: var(--vx-control-h); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background var(--vx-t-fast); color: var(--vx-text-muted); }
.header_notif:hover, .header_notif.open { background: var(--vx-primary-soft); color: var(--vx-text); }
.header_notif svg { stroke: currentColor; }
.header_notif svg { width: 19px; height: 19px; stroke: var(--vx-navy); }
.header_notif_badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--vx-red, #e23b3b); color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--vx-surface); }
.notifmenu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 460px; overflow: auto;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(var(--vx-primary-rgb),.22); z-index: 96;
}
.nt_head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--vx-line); font-size: 14px; font-weight: 700; color: var(--vx-navy); }
.nt_markall { border: none; background: none; color: var(--vx-blue); font-size: 12px; font-weight: 600; cursor: pointer; }
.nt_markall:hover { text-decoration: underline; }
.nt_list { padding: 6px; }
.nt_item { position: relative; display: flex; gap: 11px; padding: 11px 12px; border-radius: 10px; text-decoration: none; }
.nt_item:hover { background: var(--vx-surface-sunk); }
.nt_item.unread { background: var(--vx-primary-soft); }
.nt_ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--vx-primary-soft); }
.nt_ic svg { width: 17px; height: 17px; stroke: var(--vx-navy); }
.nt_ic_order { background: var(--vx-warning-bg); } .nt_ic_order svg { stroke: var(--vx-warning); }
.nt_ic_booking { background: var(--vx-primary-soft); } .nt_ic_booking svg { stroke: var(--vx-blue); }
.nt_ic_system { background: rgba(174,62,201,.12); } .nt_ic_system svg { stroke: var(--vx-purple); }
.nt_ic_visitor { background: var(--vx-success-bg); } .nt_ic_visitor svg { stroke: var(--vx-success); }
.nt_body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nt_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.nt_text { font-size: 12px; color: var(--vx-text); line-height: 1.4; }
.nt_time { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 2px; }
.nt_dot { position: absolute; top: 14px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--vx-blue); }
.nt_empty { padding: 24px; text-align: center; color: var(--vx-muted); font-size: 13px; }

@media (max-width: 1100px) { .header_search { width: 150px; } .header_search.active { width: 240px; } }

/* Kayttajavalikko (popover oikeasta ylakulmasta) */
.usermenu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(var(--vx-primary-rgb),.22); z-index: 95; overflow: hidden;
}
.um_main { padding: 22px 20px 18px; text-align: center; }
.um_avatar {
  width: 84px; height: 84px; border-radius: var(--vx-radius-pill); margin: 0 auto 12px;
  background: var(--vx-primary-soft); color: var(--vx-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 26px;
}
.um_name { font-size: 17px; font-weight: 700; color: var(--vx-navy); margin-bottom: 14px; }
.um_rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.um_row { display: flex; flex-direction: column; gap: 1px; }
.um_k { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .09em; color: var(--vx-blue); }
.um_v { font-size: 13px; color: var(--vx-text); }
.um_build { font-size: var(--vx-fs-xs); color: var(--vx-muted); word-break: break-all; margin-top: 2px; }
.um_langrow { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; }
.um_langlbl { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .09em; color: var(--vx-blue); margin-right: 2px; }
.um_langbtn { flex: 1; padding: 5px 0; font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--vx-navy); background: var(--vx-surface); border: 1px solid var(--vx-border, var(--vx-border)); border-radius: 6px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.um_langbtn:hover { border-color: var(--vx-blue); }
.um_langbtn.current { background: var(--vx-blue); border-color: var(--vx-blue); color: var(--vx-text-inverse); }
.um_actions { display: flex; flex-direction: column; gap: 8px; }
.um_switchbtn { width: 100%; }
.um_actrow { display: flex; gap: 8px; }
.um_actrow .btn { flex: 1; }

.um_switch { padding: 14px 14px 16px; }
.um_switch_head { font-size: 13px; font-weight: 700; color: var(--vx-navy); cursor: pointer; padding: 4px 6px 12px; }
.um_switch_head:hover { color: var(--vx-blue); }
.um_sitelist { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow: auto; }
.um_site {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--vx-line); border-radius: 10px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.um_site:hover { background: rgba(var(--vx-primary-rgb),.04); border-color: var(--vx-blue); }
.um_site.current { background: var(--vx-primary-soft); border-color: var(--vx-blue); cursor: default; }
.um_site_name { font-size: 13px; font-weight: 600; color: var(--vx-navy); }
.um_site_org { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 1px; }
.um_site_cur { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--vx-blue); }
.um_site_go { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-blue); white-space: nowrap; }
.header_userinfo_loggedinas { text-align: right; line-height: 1.25; }
#userinfo_label { font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.header_userinfo_username { font-size: 12px; color: var(--vx-text); font-weight: 600; }
.header_userinfo_initials {
  width: 34px; height: 34px; border-radius: var(--vx-radius-pill);
  background: var(--vx-primary-soft); color: var(--vx-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; cursor: pointer;
}

/* Tabit (page-level secondary nav under sticky header) */
.mainmenusearch {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 0 var(--vx-space-6);
  background: var(--vx-surface);
  border-bottom: 1px solid var(--vx-line);
  margin-bottom: 0;
}
.mainmenuitem {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--vx-muted); padding: 12px 2px;
  cursor: pointer; border-bottom: 2px solid transparent;
  text-transform: uppercase;
  text-decoration: none;
}
.mainmenuitem:hover { color: var(--vx-text); text-decoration: none; }
.mainmenuitem.mainmenuselected { color: var(--vx-primary); border-bottom-color: var(--vx-primary); }

#maindata { padding: var(--vx-space-5) var(--vx-space-6) 40px; }

/* ---- Kahden palstan asettelu (summary | main) ------------------------- */
.newrecord_layout { display: flex; gap: 28px; align-items: flex-start; }
.newrecord_left { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.newrecord_main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }

/* Kortti */
.vx-card {
  background: var(--vx-surface);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-lg);
  box-shadow: var(--vx-shadow-xs);
  padding: var(--vx-space-5);
}
.vx-section-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--vx-fs-sm); font-weight: 600; letter-spacing: .04em;
  color: var(--vx-text-muted); text-transform: uppercase;
  margin-bottom: var(--vx-space-4);
}
.vx-help { color: var(--vx-muted); cursor: help; font-weight: 400; }

/* ---- Lomakekentat ------------------------------------------------------ */
.record_label, .vx-label {
  display: block; font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text);
  margin: 14px 0 5px 0;
}
.vx-label:first-child, .record_label:first-child { margin-top: 0; }
/* Account-kentta on omassa containerissaan, joten sen label olisi muuten first-child
   ja menettaisi ylamarginaalin -> palauta normaali vali Billing-laatikkoon. */
#bAccountField { margin-top: 14px; }
.vx-input, .vx-textarea, .vx-select {
  width: 100%; height: var(--vx-control-h); min-height: var(--vx-control-h);
  padding: 0 12px;
  border: 1px solid var(--vx-field-border); border-radius: var(--vx-radius-input);
  font-size: var(--vx-fs-base); color: var(--vx-text); background: var(--vx-surface);
  font-family: inherit;
  transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast), background var(--vx-t-fast);
  min-width: 0; max-width: 100%;
}
.vx-input::placeholder, .vx-textarea::placeholder { color: var(--vx-text-subtle); }
.vx-input:hover, .vx-textarea:hover, .vx-select:hover { border-color: var(--vx-gray-400); }
.vx-input[readonly] { background: var(--vx-surface-alt); }
.vx-input:disabled, .vx-select:disabled, .vx-textarea:disabled,
.vx-input[disabled], .vx-select[disabled] {
  background: var(--vx-surface-sunk); color: var(--vx-text-subtle); cursor: not-allowed;
}
/* iOS Safari piirtaa input[type=date/time]:n omalla natiivilla "pilleri"-
   ulkoasullaan (pyoristys + varjo), joka ULOTTUU CSS-boksin (border/padding)
   ULKOPUOLELLE eika reagoi width/min-width:aan -> nakyy leveampana kuin muut
   kentat (loydos 15.7.2026, New booking -velhon Milloin-kentta). Poistetaan
   native-ulkoasu, jolloin kentta piirtyy taysin .vx-input-tyylin mukaisesti.
   -moz-appearance mukana varmuudeksi muille moottoreille. */
.vx-input[type="date"], .vx-input[type="time"], .vx-input[type="datetime-local"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.vx-input:focus, .vx-textarea:focus, .vx-select:focus {
  outline: none; border-color: var(--vx-primary);
  box-shadow: var(--vx-focus-ring);
}
.vx-textarea, textarea.vx-input {
  height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.4;
}
.vx-select, select.vx-input {
  padding-right: 32px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}
.vx-checkrow { display: flex; align-items: center; gap: var(--vx-space-2); margin-top: 14px; font-size: 13px; min-height: var(--vx-control-h); }
.vx-checkrow input { width: 16px; height: 16px; accent-color: var(--vx-blue); }

/* ---- Napit (VarianX2026 v2 solid fills) -------------------------------- */
.btn {
  --_bg: var(--vx-surface);
  --_fg: var(--vx-text);
  --_border: var(--vx-border-strong);
  --_bg-h: var(--vx-surface-sunk);
  --_border-h: var(--vx-gray-400);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--_border); border-radius: var(--vx-radius-btn);
  font-size: var(--vx-fs-sm); font-weight: 500; cursor: pointer;
  height: var(--vx-control-h); min-height: var(--vx-control-h); padding: 0 16px; font-family: inherit;
  background: var(--_bg); color: var(--_fg);
  box-shadow: none; user-select: none;
  transition: background var(--vx-t-fast), border-color var(--vx-t-fast), color var(--vx-t-fast), box-shadow var(--vx-t-fast);
}
.btn:hover { background: var(--_bg-h); border-color: var(--_border-h); }
.btn:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.btn-primary {
  --_bg: var(--vx-primary); --_fg: var(--vx-text-inverse); --_border: var(--vx-primary);
  --_bg-h: var(--vx-primary-hover); --_border-h: var(--vx-primary-hover);
}
.btn-primary:active { background: var(--vx-primary-active); border-color: var(--vx-primary-active); }
.btn-outline {
  --_bg: var(--vx-surface); --_fg: var(--vx-text); --_border: var(--vx-field-border);
  --_bg-h: var(--vx-primary-soft); --_border-h: var(--vx-primary);
}
.btn-success {
  --_bg: var(--vx-success); --_fg: var(--vx-text-inverse); --_border: var(--vx-success);
  --_bg-h: var(--vx-success-hover); --_border-h: var(--vx-success-hover);
}
.btn-warning {
  --_bg: var(--vx-warning); --_fg: var(--vx-text-inverse); --_border: var(--vx-warning);
  --_bg-h: var(--vx-warning-hover); --_border-h: var(--vx-warning-hover);
}
.btn-info {
  --_bg: var(--vx-info); --_fg: var(--vx-text-inverse); --_border: var(--vx-info);
  --_bg-h: var(--vx-info-hover); --_border-h: var(--vx-info-hover);
}
.btn-danger {
  --_bg: var(--vx-danger); --_fg: var(--vx-text-inverse); --_border: var(--vx-danger);
  --_bg-h: var(--vx-danger-hover); --_border-h: var(--vx-danger-hover);
}
.btn-inactive { --_bg: var(--vx-primary); --_fg: var(--vx-text-inverse); --_border: var(--vx-primary); opacity: .3; cursor: not-allowed; pointer-events: none; }
.btn-m, .btn-s, .btn-sm, .vx-btn-sm, .vx-btn-xs {
  height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 12px;
}
.btn-s, .btn-sm, .vx-btn-sm { font-size: var(--vx-fs-xs); }
.vx-btn-md { height: var(--vx-control-md); min-height: var(--vx-control-md); padding: 0 16px; }
.btn-l, .btn-lg, .vx-btn-lg, .vx-btn-xl {
  height: var(--vx-control-lg); min-height: var(--vx-control-lg); padding: 0 16px; font-size: var(--vx-fs-base);
}
.vx-input-sm, .vx-select-sm, select.vx-input-sm {
  height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 12px; font-size: var(--vx-fs-sm);
}
.vx-input-md, .vx-select-md, select.vx-input-md {
  height: var(--vx-control-md); min-height: var(--vx-control-md); padding: 0 12px;
}
.vx-input-lg, .vx-select-lg, select.vx-input-lg {
  height: var(--vx-control-lg); min-height: var(--vx-control-lg); padding: 0 16px; font-size: 14px;
}
.btn-link { background: none; color: var(--vx-link); height: auto; min-height: 0; padding: 0; font-weight: 600; box-shadow: none; border: none; }
.btn-link:hover { text-decoration: underline; }
/* Vaihe 1 — nappihierarkia: yksi primary per näkymä/paneeli; rivi-Edit ja toissijaiset Add → outline */
.btn-text {
  background: none; border: none; color: var(--vx-blue); height: auto; min-height: 0;
  padding: 4px 8px; font-weight: 600; font-size: 13px;
  box-shadow: none;
}
.btn-text:hover { text-decoration: underline; background: var(--vx-primary-soft); border-radius: var(--vx-radius-sm); }

/* ---- DATE & TIME ------------------------------------------------------- */
.newrecord_dt_times { display: flex; gap: 14px; }
.newrecord_dt_times > div { flex: 1; }
.newrecord_dt_time_label { font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text); margin-bottom: 5px; }
/* "Currently selected date" -yhteenveto: näytetään VAIN kun kalenteri on suljettu.
   Auki-tilassa (oletus) se on turha -> päivä näkyy kalenterissa, ajat Start/End-
   valikoissa ja SUMMARY-kortti toistaa saman. Kun käyttäjä pienentää kalenterin,
   tämä rivi kertoo mikä pvm/aika on valittuna. (Vesku 4.9.2026.) */
.currently_selected { display: none; font-size: 12px; color: var(--vx-muted); margin-bottom: 4px; }
#dateTimeCard.nb_dt_is_collapsed .currently_selected { display: block; }
.currently_selected b { color: var(--vx-navy); font-weight: 600; }

/* Kalenteri */
.vcal_table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.vcal_header { font-size: 13px; font-weight: 700; color: var(--vx-navy); padding: 6px 0; }
.vcal_larrow, .vcal_rarrow {
  cursor: pointer; width: var(--vx-control-h-compact); height: var(--vx-control-h-compact);
  min-width: var(--vx-control-h-compact); min-height: var(--vx-control-h-compact);
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; color: var(--vx-blue); user-select: none;
  border-radius: var(--vx-radius-md);
}
.vcal_larrow:hover, .vcal_rarrow:hover { color: var(--vx-blue-dark); }
.vcal_larrow:focus-visible, .vcal_rarrow:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.vcal_dayhdr { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-blue); text-align: center; padding: 6px 0; }
.vcal_dayhdr.sun { color: var(--vx-red); }
.vcal_week { font-size: var(--vx-fs-xs); color: var(--vx-blue); text-align: center; opacity: .7; }
.vcal_day { text-align: center; padding: 3px 0; }
.vcal_day .d {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 13px; color: var(--vx-text);
}
.vcal_day .d:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.vcal_day .d.sun { color: var(--vx-red); }
.vcal_day .d.current { box-shadow: inset 0 0 0 1px var(--vx-blue); }
.vcal_day .d.selected { background: var(--vx-blue); color: var(--vx-text-inverse); }
.vcal_day .d.empty { cursor: default; }
.vcal_day .d.empty:hover { background: none; }
/* "Vapaa" -paivat valitulle huoneelle samalla aikavalilla (Availability-klikkaus, app.js) */
/* Availability: vapaa paiva = bold + vihrea vari (riittaa; erillinen piste
   poistettu Veskun pyynnosta 4.9.2026 - bold ja vari erottaa jo selvasti). */
.vcal_day .d.freeday { font-weight: 700; color: var(--vx-success); }
.vcal_day .d.selected.freeday { color: var(--vx-text-inverse); }

/* Flash-huomiokehys DATE & TIME -kortille kun Availability-tieto paivittyy */
@keyframes nbFlashRing {
  0% { box-shadow: 0 0 0 0 rgba(var(--vx-primary-rgb),.5); }
  70% { box-shadow: 0 0 0 8px rgba(var(--vx-primary-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--vx-primary-rgb),0); }
}
.vx-card.nb_flash { animation: nbFlashRing 1.6s ease-out 1; }

/* ---- SUMMARY ----------------------------------------------------------- */
.summary_row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vx-line); }
.summary_row:last-child { border-bottom: none; }
.summary_label { font-size: 12px; color: var(--vx-muted); }
.summary_value { font-size: 13px; color: var(--vx-text); margin-top: 2px; max-width: 170px; }
.summary_value.placeholder { color: var(--vx-muted); font-style: italic; }
.summary_change { color: var(--vx-link); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.summary_change:hover { text-decoration: underline; }
.summary_left { min-width: 0; }
.check-ok { color: var(--vx-success); font-weight: 700; }

/* ---- FIND A RESOURCE / OPTIONS ---------------------------------------- */
.newrecord_filter { display: flex; flex-direction: column; }
.newrecord_options_title { font-size: 12px; color: var(--vx-muted); margin: 18px 0 8px 0; letter-spacing: .04em; }

/* ---- Resurssilista ----------------------------------------------------- */
.newrecord_resourcelist_header { font-size: 13px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em; margin-bottom: 14px; }
.newrecord_resourcelist_header span { color: var(--vx-muted); font-weight: 500; letter-spacing: 0; }
.newrecord_resourcelist { display: flex; flex-direction: column; gap: 10px; }
.newrecord_resourceitem {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--vx-line); border-radius: 10px;
  padding: 12px 14px; background: var(--vx-surface);
}
.newrecord_resourceitem.selected { border-color: var(--vx-blue); box-shadow: 0 0 0 2px var(--vx-primary-soft); }
.newrecord_resourceitem.fp_busy { opacity: .65; background: var(--vx-surface-sunk); }
.newrecord_resourceitem.fp_busy .newrecord_resourceitem_name { color: var(--vx-muted); }
.newrecord_resourceitem_name { flex: 1; font-size: 14px; color: var(--vx-text); font-weight: 600; min-width: 0; }
.newrecord_resourceitem_name .cap { font-weight: 400; color: var(--vx-muted); font-size: 12px; margin-left: 8px; }
.newrecord_resource_alert { font-size: var(--vx-fs-sm); color: var(--vx-warning); font-weight: 400; margin-top: 3px; }
.newrecord_resourceitem .btn { flex-shrink: 0; height: var(--vx-control-h-compact); min-height: var(--vx-control-h-compact); padding: 0 12px; }

/* ---- Footer-toiminnot -------------------------------------------------- */
.newrecord_actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 4px; }

/* ---- Vahvistus --------------------------------------------------------- */
.confirm_box { text-align: center; padding: 30px 20px; }
.confirm_check {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--vx-success-rgb), .12);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.confirm_check svg { width: 30px; height: 30px; stroke: var(--vx-success); }
.confirm_title { font-size: 18px; font-weight: 700; color: var(--vx-navy); margin-bottom: 6px; }
.confirm_sub { color: var(--vx-muted); margin-bottom: 6px; }
.confirm_id { font-family: "SFMono-Regular", Menlo, monospace; color: var(--vx-text); font-weight: 600; }
/* New Bookingin vahvistuksen CTA:t (Tilaa tarjoilua / Ilmoita vieraat). */
.confirm_cta_title { margin-top: 20px; color: var(--vx-muted); font-size: 13px; }
.confirm_cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* ---- Proto-banneri ----------------------------------------------------- */
/* Kelluva pilleri: ei enaa vie omaa riviaan layoutista (Ollin toive 23.8.),
   vaan leijuu pienena laatikkona ylhaalla keskella sisallon PAALLA.
   pointer-events:none -> ei estaa klikkauksia allaan. Mobiili (.mphone) resetoi
   takaisin normaaliksi phone-frameen (alempana). */
.proto-banner {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 1000; pointer-events: none;
  width: max-content; max-width: min(92vw, 640px);
  background: var(--vx-warning-bg); border: 1px solid rgba(var(--vx-warning-rgb),.40); border-radius: 999px;
  color: var(--vx-warning); font-size: 12px; padding: 5px 14px; text-align: center;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.28);
}
.proto-banner b { color: var(--vx-warning); }
.proto-banner.live { background: var(--vx-success-bg); border-color: rgba(var(--vx-success-rgb),.35); color: var(--vx-success); }
.proto-banner.live b { color: var(--vx-success); }
/* Osittain live (esim. Settings: My Account livena, muu mock) - sininen, jotta
   erottuu selkeasti seka amber-mockista etta vihreasta taydesta livesta. */
.proto-banner.partial { background: var(--vx-info-bg); border-color: rgba(var(--vx-info-rgb),.28); color: var(--vx-info); }
.proto-banner.partial b { color: var(--vx-info); }

/* Live-record read-only: muokkaus pois, selkea merkki */
.bk_detail_ro .is-disabled { opacity: .4; pointer-events: none; cursor: default; }
.bk_detail_ro input.is-readonly, .bk_detail_ro textarea.is-readonly { background: var(--vx-surface-sunk); color: var(--vx-navy); cursor: default; }
.bk_ro_badge {
  align-self: center; margin-right: 10px;
  background: var(--vx-success-bg); color: var(--vx-success); border: 1px solid rgba(var(--vx-success-rgb),.35);
  font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 10px; text-transform: uppercase;
}

.loading { color: var(--vx-muted); font-size: 13px; padding: 16px 0; }
.net_error { color: var(--vx-navy); font-size: 13px; padding: 16px 0; display: flex; align-items: center; gap: 12px; }
.net_error .btn { white-space: nowrap; }

/* ---- Developer / API-ohjaus ---- */
.dev_hint { color: var(--vx-muted); font-size: 12.5px; margin: 2px 0 12px; line-height: 1.5; }
.dev_help { margin-top: 14px; border-top: 1px solid var(--vx-border); padding-top: 10px; }
.dev_help > summary { cursor: pointer; font-weight: 600; color: var(--vx-navy); font-size: 13px; margin-bottom: 8px; }
.dev_flags { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.dev_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dev_table th { text-align: left; font-size: var(--vx-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--vx-muted); padding: 6px 10px; border-bottom: 1px solid var(--vx-border); }
.dev_table td { padding: 7px 10px; border-bottom: 1px solid var(--vx-border); vertical-align: middle; }
.dev_ep { font-weight: 600; color: var(--vx-navy); white-space: nowrap; }
.dev_path code { font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.dev_err { color: var(--vx-danger); font-size: var(--vx-fs-xs); }
.dev_live { color: var(--vx-success); font-weight: 700; font-size: var(--vx-fs-xs); }
.dev_mock { color: var(--vx-muted); font-weight: 600; font-size: var(--vx-fs-xs); }
.dev_ok { color: var(--vx-success); font-weight: 700; }
.dev_fail { color: var(--vx-danger); font-weight: 700; }

/* ---- Site import (developer-site-import.html) --------------------------- */
.si-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px 0 14px; }
.si-field { display: flex; flex-direction: column; gap: 4px; }
.si-field span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--vx-muted); }
.si-field input { font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1.5px solid var(--vx-field-border);
  border-radius: 8px; color: var(--vx-text); }
.si-upload { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.si-fname { font-size: 12.5px; color: var(--vx-muted); }
.si-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.si-table th { text-align: left; font-size: var(--vx-fs-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--vx-muted); padding: 6px 10px; border-bottom: 1px solid var(--vx-border); }
.si-table td { padding: 6px 10px; border-bottom: 1px solid var(--vx-border); vertical-align: top; }
.si-num { text-align: right; font-variant-numeric: tabular-nums; }
.si-ok { color: var(--vx-success); font-weight: 700; }
.si-warn { color: var(--vx-warning); font-weight: 700; }
.si-err { color: var(--vx-danger); font-weight: 700; }
.si-issues { list-style: none; margin: 0; padding: 0; font-size: 12.5px; max-height: 260px; overflow: auto; }
.si-issues li { padding: 4px 0; border-bottom: 1px solid var(--vx-line); }
.si-iss-error { color: var(--vx-danger); }
.si-iss-warn { color: var(--vx-warning); }
.si-prev-block { margin-bottom: 16px; overflow: auto; }
.si-prev-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--vx-muted); margin: 6px 0; }
.si-prev td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-done p { font-size: 14px; color: var(--vx-text); }
@media (max-width: 700px) { .si-grid { grid-template-columns: 1fr; } }

/* ---- VAT change wizard (developer-vat-change.html) ---------------------- */
.vc-warn { background: var(--vx-warning-bg); border: 1px solid rgba(var(--vx-warning-rgb),.40); color: var(--vx-warning); font-size: 12.5px;
  font-weight: 600; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.vc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 12px; }
.vc-field { display: flex; flex-direction: column; gap: 4px; }
.vc-field span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--vx-muted); }
.vc-field input, .vc-field select { font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1.5px solid var(--vx-field-border); border-radius: 8px; color: var(--vx-text); background: var(--vx-surface); }
.vc-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.vc-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.vc-stat { flex: 1 1 120px; background: var(--vx-panel, #f8fafc); border: 1px solid var(--vx-border);
  border-radius: 10px; padding: 12px 14px; text-align: center; }
.vc-stat-n { font-size: 22px; font-weight: 800; color: var(--vx-text); font-variant-numeric: tabular-nums; }
.vc-stat-l { font-size: var(--vx-fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--vx-muted); margin-top: 2px; }
.vc-stat-accent .vc-stat-n { color: var(--vx-accent, #6941c6); }
.vc-h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--vx-muted); margin: 16px 0 6px; }
.vc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vc-table th { text-align: left; font-size: var(--vx-fs-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--vx-muted); padding: 6px 10px; border-bottom: 1px solid var(--vx-border); }
.vc-table td { padding: 6px 10px; border-bottom: 1px solid var(--vx-line); }
.vc-num { text-align: right; font-variant-numeric: tabular-nums; }
.vc-arrow { color: var(--vx-muted); text-align: center; width: 24px; }
.vc-confirm { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin: 14px 0 4px; color: var(--vx-text); }
.vc-confirm input { margin-top: 2px; }
.vc-eff-lbl { font-size: 12px; font-weight: 500; color: var(--vx-muted); }
.vc-activecard { border: 1.5px solid rgba(var(--vx-warning-rgb),.40); background: var(--vx-warning-bg); }
.vc-done { border: 1.5px solid rgba(var(--vx-success-rgb),.40); background: var(--vx-success-bg); }
@media (max-width: 700px) { .vc-grid { grid-template-columns: 1fr; } }

.dev_wbadge { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--vx-warning); background: var(--vx-warning-bg); border-radius: 4px; padding: 1px 4px; vertical-align: middle; }
.dev_testsummary { font-size: 13px; margin: 10px 0; }
.dev_subh { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--vx-muted); margin: 16px 0 6px; }
.dev_json { background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; padding: 12px 14px; border-radius: 8px; overflow: auto; max-height: 420px; white-space: pre; }
.dev_switch { position: relative; display: inline-block; width: 38px; height: 20px; }
.dev_switch input { opacity: 0; width: 0; height: 0; }
.dev_switch span { position: absolute; cursor: pointer; inset: 0; background: var(--vx-border); border-radius: 20px; transition: .15s; }
.dev_switch span::before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background: var(--vx-surface); border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dev_switch input:checked + span { background: var(--vx-success); }
.dev_switch input:checked + span::before { transform: translateX(18px); }
.dev_switch input:disabled + span { opacity: .5; cursor: not-allowed; }

/* ---- Stylesheet-tyokalu (Developer / Stylesheet -valilehti) ----------- */
.st_textarea { min-height: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre; resize: vertical; }
.st_actions { white-space: nowrap; }
.st_active { text-align: center; }
.st_lock { color: var(--vx-muted); font-size: 12px; font-weight: 600; }

/* ---- Reporting: upotettu proto (iframe tayttaa alueen) ---------------- */
.body_module_reporting #maindata { padding: 0; }
.report_frame {
  display: block; width: 100%; border: 0;
  height: calc(100vh - 138px); min-height: 520px;
}

@media (max-width: 880px) {
  .newrecord_layout { flex-direction: column; }
  .newrecord_left { width: 100%; }
  .newrecord_main { width: 100%; }
}

/* ==========================================================================
   BOOKINGS
   ========================================================================== */

/* Listasivu: header + paanavi scrollaavat pois; lisanavi (.bk_toolbar) tarttuu ylareunaan.
   Lista scrollaa sivun mukana (ei sisaisessa max-height-boksissa), jotta sticky toimii. */
.body_module_page_list #mainheader { position: static; }
.body_module_page_list #maindata { padding: 0 0 40px; }
.body_module_page_list #bookingsStage > .vx-list-wrap {
  max-height: none;
  overflow: visible;
}
.body_module_page_list .bk_ltable { overflow: visible; }
.body_module_page_list #bookingsStage > .vx-list-wrap,
.body_module_page_list #bookingsStage > .bk_cardgrid {
  margin: var(--vx-space-5) var(--vx-space-6) 0;
}
.body_module_page_list #bookingsStage > .loading,
.body_module_page_list #bookingsStage > .net_error {
  padding: var(--vx-space-5) var(--vx-space-6);
}
.body_module_page_list .vx-list-sticky-head { top: 53px; z-index: 4; }

/* ---- Toolbar = bookings-lisanavi (VarianX2026 v2, compact 36px) ---- */
.bk_toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--vx-space-3);
  flex-wrap: nowrap; white-space: nowrap;
  margin: 0;
  padding: 8px var(--vx-space-6);
  min-height: 52px;
  background: var(--vx-surface);
  border: 0;
  border-bottom: 1px solid var(--vx-line);
  border-radius: 0;
  box-shadow: none;
  position: sticky; top: 0; z-index: 35;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bk_toolbar:has(.bk_vd.open) { overflow: visible; }
.bk_toolbar::-webkit-scrollbar { height: 4px; }
.bk_toolbar_left {
  display: flex; align-items: center; gap: var(--vx-space-3);
  min-width: 0; justify-self: start;
}
.bk_search { position: relative; flex: 1 1 160px; min-width: 132px; max-width: 240px; }
.bk_search input {
  width: 100%; height: var(--vx-control-h-compact); padding: 0 10px 0 34px;
  border: 1px solid var(--vx-border-strong); border-radius: var(--vx-radius-md);
  font-size: var(--vx-fs-sm); font-family: inherit; color: var(--vx-text);
  background: var(--vx-surface);
  transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast);
}
.bk_search input::placeholder { color: var(--vx-text-subtle); }
.bk_search input:hover { border-color: var(--vx-gray-400); }
.bk_search input:focus {
  outline: none; border-color: var(--vx-primary);
  box-shadow: var(--vx-focus-ring);
}
.bk_search_ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--vx-text-muted); pointer-events: none;
}
.bk_iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--vx-control-h-compact); height: var(--vx-control-h-compact); flex-shrink: 0;
  padding: 0; font: inherit;
  border: 1px solid var(--vx-border-strong); border-radius: var(--vx-radius-md);
  background: var(--vx-surface); cursor: pointer; color: var(--vx-text);
  transition: background var(--vx-t-fast), border-color var(--vx-t-fast), color var(--vx-t-fast);
}
.bk_iconbtn:hover { background: var(--vx-surface-sunk); border-color: var(--vx-gray-400); }
.bk_iconbtn:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.bk_iconbtn svg { width: 16px; height: 16px; stroke: currentColor; }
#bkRefresh {
  background: var(--vx-primary); border-color: var(--vx-primary); color: var(--vx-text-inverse);
}
#bkRefresh:hover {
  background: var(--vx-primary-hover); border-color: var(--vx-primary-hover); color: var(--vx-text-inverse);
}
.bk_iconbtn.sm { width: 26px; height: 26px; border: none; background: transparent; }
.bk_iconbtn.sm:hover { background: var(--vx-primary-soft); }
.bk_iconbtn.sm svg { width: 15px; height: 15px; }
/* Yhtenainen paivanavigointi-laatikko (Bookings / Calendar / Sales Management):
   pieni haalea reunalaatikko, sama padding/gap/fontti kaikilla sivuilla. */
.bk_datenav, .cal_datenav, .sm_datebox {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: var(--vx-control-h-compact); padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--vx-border-strong); border-radius: var(--vx-radius-md);
  background: var(--vx-surface);
  font-size: var(--vx-fs-sm); color: var(--vx-text);
}
.bk_datenav {
  gap: 2px;
  padding: 0 4px;
}
.bk_datenav .bk_iconbtn.sm { width: 22px; height: 22px; }
.bk_datenav .bk_today { padding: 2px; letter-spacing: .02em; }
.bk_datearrow {
  appearance: none; background: transparent; border: none; font: inherit;
  color: var(--vx-primary); cursor: pointer; font-size: 12px; padding: 2px; line-height: 1;
}
.bk_datearrow:hover { color: var(--vx-primary-hover); }
.bk_datearrow:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); border-radius: var(--vx-radius-sm); }
/* Kiintealeveyksinen, keskitetty label -> prev/next-nuolet pysyvat paikallaan
   vaikka paivamaara/viikonpaiva vaihtuu (Bookings, Calendar, Sales Management). */
.bk_datelabel { font-weight: 600; display: inline-block; text-align: center; min-width: 118px; }
.bk_datenav .bk_datelabel { min-width: 104px; }
/* Calendar week/month -nakymassa label on leveampi (viikkovali mahtuu); day-nakymassa
   sama 118px kuin muilla -> nuolet pysyvat paikallaan ja day-laatikko on yhta leinen. */
.cal_datenav .bk_datelabel, .cal_datenav .bk_datelabel.cal_wide { min-width: 210px; }
.bk_today {
  appearance: none; background: transparent; border: none; font: inherit;
  color: var(--vx-primary); font-weight: 600; font-size: 12px; letter-spacing: .04em;
  cursor: pointer; padding: 2px 4px; border-radius: var(--vx-radius-sm);
}
.bk_today:hover { background: var(--vx-primary-soft); }
.bk_today:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
/* Aikavali (Bookings): alku -> loppu samassa laatikossa */
.bk_datesep { color: var(--vx-text-muted); font-weight: 700; padding: 0 2px; }
.bk_rangeoff { color: var(--vx-text-muted); font-weight: 700; }
.bk_rangeoff:hover { color: var(--vx-primary); }
@keyframes vx-spin { to { transform: rotate(360deg); } }
.bk_iconbtn.spinning svg { animation: vx-spin .6s ease; }
.bk_pager { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; justify-self: center; font-size: var(--vx-fs-sm); }
.bk_pg, .bk_pg_arrow, .bk_pg_gap {
  min-width: 28px; height: var(--vx-control-h-compact); padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--vx-radius-sm); color: var(--vx-text);
}
.bk_pg { cursor: pointer; font-weight: 500; }
.bk_pg:hover { background: var(--vx-surface-sunk); }
.bk_pg.active { background: var(--vx-primary); color: var(--vx-text-inverse); }
.bk_pg_arrow { color: var(--vx-text-muted); cursor: pointer; }
.bk_pg_arrow:hover { color: var(--vx-primary); background: var(--vx-surface-sunk); }
.bk_pg_arrow.disabled { color: var(--vx-text-subtle); cursor: default; pointer-events: none; background: transparent; }
.bk_pg:focus-visible,
.bk_pg_arrow:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.bk_pg_gap { color: var(--vx-text-subtle); min-width: 18px; }
.bk_pg_info { color: var(--vx-text-muted); font-size: var(--vx-fs-sm); margin-left: 6px; font-weight: 500; }
.bk_toolbar_right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; justify-self: end; min-width: 0; }
.bk_newbtn { text-decoration: none; gap: 5px; }
.bk_newbtn svg { width: 15px; height: 15px; stroke: var(--vx-text-inverse); }
.bk_toolbar .btn {
  height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 12px;
}
.bk_toolbar .vx-select,
.bk_toolbar .vx-input,
.cal_areasel,
.cal_groupsel,
.cal_resourcesel {
  height: var(--vx-control-sm); min-height: var(--vx-control-sm);
}
.bk_vd { position: relative; flex-shrink: 0; }
.bk_vd_btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--vx-control-h-compact); max-width: 280px; padding: 0 10px 0 10px;
  border: 1px solid var(--vx-border-strong); border-radius: var(--vx-radius-md);
  background: var(--vx-surface); color: var(--vx-text);
  font-family: inherit; font-size: var(--vx-fs-sm); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast), background var(--vx-t-fast);
}
.bk_vd_btn:hover { background: var(--vx-surface-sunk); }
.bk_vd.open .bk_vd_btn,
.bk_vd_btn:focus-visible {
  outline: none; border-color: var(--vx-primary); box-shadow: var(--vx-focus-ring);
}
.bk_vd_btn_icon,
.bk_vd_opt_icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0; color: var(--vx-text-muted);
}
.bk_vd_btn_icon svg,
.bk_vd_opt_icon svg { width: 16px; height: 16px; stroke: currentColor; }
.bk_vd_btn_label,
.bk_vd_opt_label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bk_vd_chev { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; color: var(--vx-text-muted); margin-left: 2px; transition: transform var(--vx-t-fast); }
.bk_vd.open .bk_vd_chev { transform: rotate(180deg); }
.bk_vd_menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  min-width: 260px; width: max-content;
  padding: 6px; border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-md); background: var(--vx-surface);
  box-shadow: var(--vx-shadow-md);
}
.bk_vd_opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; min-height: var(--vx-control-h-compact); border: 0; border-radius: var(--vx-radius-sm);
  background: transparent; color: var(--vx-text);
  font-family: inherit; font-size: var(--vx-fs-sm); font-weight: 500;
  text-align: left; cursor: pointer;
}
.bk_vd_opt:hover { background: var(--vx-surface-sunk); }
.bk_vd_opt.is-selected { background: var(--vx-primary-soft); color: var(--vx-primary); }
.bk_vd_opt.is-selected .bk_vd_opt_icon { color: var(--vx-primary); }
.bk_vd_check { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; stroke: currentColor; }
.bk_viewtoggle {
  width: var(--vx-control-sm); height: var(--vx-control-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--vx-text-muted);
}
.bk_viewtoggle svg { width: 15px; height: 15px; stroke: currentColor; }
.bk_toolbar .vx-help {
  width: var(--vx-control-h-compact); height: var(--vx-control-h-compact);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--vx-radius-md);
}
.bk_toolbar .vx-help:hover { background: var(--vx-surface-sunk); color: var(--vx-primary); }

@media (max-width: 1280px) {
  .bk_vd_btn_label { max-width: 148px; }
  .bk_pg_info { display: none; }
}
@media (max-width: 1100px) {
  .bk_search { max-width: 180px; }
  .bk_pg:not(.active), .bk_pg_gap { display: none; }
  .bk_today { display: none; }
}
@media (max-width: 880px) {
  .bk_search { max-width: 140px; flex-basis: 120px; }
  .bk_vd_btn_label { display: none; }
  .bk_vd_btn { padding: 0 8px; }
  .bk_datenav .bk_datelabel { min-width: 88px; }
}

/* ---- Lista (VarianX2026 table pattern) ---- */
.bk_colhead, .bk_row {
  display: grid;
  grid-template-columns: 130px 130px 140px 1.4fr 1.6fr 1.8fr;
  gap: var(--vx-space-4); align-items: center;
}
.bk_colhead > div, .bk_row > div { min-width: 0; }
.bk_colhead {
  padding: 10px var(--vx-space-4);
  font-size: var(--vx-fs-xs); font-weight: 600;
  color: var(--vx-text-muted); letter-spacing: .05em; text-transform: uppercase;
  background: var(--vx-surface-alt);
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-lg);
}
.bk_colhead .vx-sortable:hover { color: var(--vx-primary); }
.bk_collist {
  display: flex; flex-direction: column;
  gap: var(--vx-space-2);
  background: transparent;
  border: 0;
}
.bk_rowwrap {
  background: var(--vx-surface);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-lg);
  box-shadow: var(--vx-shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--vx-t-fast), border-color var(--vx-t-fast);
}
.bk_rowwrap:hover { box-shadow: var(--vx-shadow-sm); }
.bk_rowwrap.open {
  border-color: var(--vx-border-strong);
  box-shadow: var(--vx-shadow-sm);
  background: #fff;
}
.bk_rowwrap.open .bk_detail {
  background: #fff;
}
.bk_row {
  padding: var(--vx-space-3) var(--vx-space-4);
  cursor: pointer; font-size: var(--vx-fs-sm); color: var(--vx-text);
  transition: background var(--vx-t-fast);
}
.bk_row:hover { background: var(--vx-surface-alt); }
.bk_rowwrap.open .bk_row {
  background: var(--vx-surface-alt);
  box-shadow: inset 3px 0 0 var(--vx-primary);
}
/* Avattu varaus korvaa listarivin: rivi piiloon, detail + actionbar jäävät. */
.bk_rowwrap.open > .bk_row,
.bk_lrow_wrap.open > .bk_lrow {
  display: none;
}
.bk_id {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--vx-text); font-weight: 600; font-size: var(--vx-fs-sm);
  font-variant-numeric: tabular-nums;
}
.bk_id_panel {
  width: 13px; height: 13px; flex-shrink: 0;
  color: var(--vx-primary); stroke: currentColor;
}
.bk_status {
  display: inline-flex; align-items: center;
  margin-top: 4px; padding: 2px 10px;
  border-radius: var(--vx-radius-pill);
  font-size: var(--vx-fs-xs); font-weight: 600; letter-spacing: .04em;
  line-height: 1.4; background: var(--vx-gray-500);
}
/* Copy-merkinta: kertoo etta varaus on luotu kopioimalla (client-side tunniste,
   localStorage). Erottuu status-pillereista neutraalilla vaalealla pohjalla. */
.bk_copy_pill {
  display: inline-flex; align-items: center;
  margin-top: 4px; margin-left: 6px; padding: 2px 8px;
  border-radius: var(--vx-radius-pill);
  font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em;
  line-height: 1.4; color: var(--vx-navy);
  background: var(--vx-surface-sunk, var(--vx-surface-sunk));
  border: 1px solid var(--vx-border, #d7dce5);
}
/* Tilakuvakkeet (Bookings + Sales order): kiintea varillinen pohja + valkoinen teksti.
   Varikoodit VarianXin status-mallin mukaan. */
.bk_status, .sm_o_status { color: var(--vx-text-inverse); }
.status_new       { background: var(--vx-danger); }   /* punainen - tilaus tehty */
.status_confirmed { background: var(--vx-success); }  /* vihrea - palveluntarjoaja kuitannut */
.status_modified  { background: var(--vx-danger); }   /* punainen - tilausta muokattu */
.status_closed    { background: var(--vx-gray-400); } /* harmaa - lukittu, ei muokattavissa */
.status_ready     { background: var(--vx-primary); }  /* sininen - valmis laskutukseen */
.status_ebilled   { background: var(--vx-gray-800); } /* tumma - laskutettu */
.status_undoready { background: var(--vx-gray-950); } /* musta */
.status_saved     { background: var(--vx-teal); }     /* teal - tallennettu */
.status_billed    { background: var(--vx-gray-800); } /* tumma - laskutettu */
.status_deleted   { background: #6b1f1f; }           /* tumma punainen - poistettu */
.status_oldres    { background: var(--vx-gray-400); } /* harmaa - vanha resurssi */
.bk_c_status { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bk_time, .bk_host, .bk_orderno {
  color: var(--vx-text-muted); font-size: var(--vx-fs-sm); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk_c_details { display: flex; align-items: center; gap: 8px; }
.bk_badgeic { position: relative; display: inline-flex; color: var(--vx-text-muted); }
.bk_badgeic svg { width: 18px; height: 18px; stroke: currentColor; }
.bk_badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--vx-danger); color: var(--vx-text-inverse);
  font-size: var(--vx-fs-xs); font-weight: 700; line-height: 16px;
  border-radius: var(--vx-radius-pill); text-align: center;
}
.bk_c_details .bk_badgeic,
.bk_l_details .bk_badgeic {
  flex-shrink: 0; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px 0 6px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-gray-100); color: var(--vx-text-muted);
  white-space: nowrap;
}
.bk_c_details .bk_badgeic:has(.bk_badge),
.bk_l_details .bk_badgeic:has(.bk_badge) {
  background: var(--vx-danger); color: var(--vx-text-inverse);
}
.bk_c_details .bk_badgeic svg,
.bk_l_details .bk_badgeic svg { width: 14px; height: 14px; }
.bk_c_details .bk_badge,
.bk_l_details .bk_badge {
  position: static; min-width: 0; height: auto; padding: 0;
  background: transparent; color: inherit;
  font-size: var(--vx-fs-xs); font-weight: 700; line-height: 1;
}
.bk_c_res {
  font-weight: 600; color: var(--vx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk_c_desc, .bk_c_cost {
  color: var(--vx-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- LIST VIEW (tiivis taulukko, ei kuvia) ---- */
.bk_ltable { border: 1px solid var(--vx-line); border-radius: 8px; background: var(--vx-surface); overflow: hidden; box-shadow: var(--vx-shadow); }
.bk_lhead, .bk_lrow {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(120px, 1.5fr) 72px minmax(80px, 1fr) 88px 96px minmax(70px, 1fr) minmax(70px, 1fr) minmax(80px, 1.2fr);
  gap: 12px; align-items: center;
}
.bk_lhead > div, .bk_lrow > div { min-width: 0; }
.bk_lhead {
  padding: 8px 16px; font-size: 12px; font-weight: 700; color: var(--vx-muted);
  letter-spacing: .03em; background: var(--vx-surface-sunk); border-bottom: 1px solid var(--vx-line);
}

/* Vaihe 3 — listat & taulukot */
.vx-list {
  --vx-list-row-py: 12px;
  --vx-list-row-px: 16px;
  --vx-list-font: 13px;
  --vx-list-font-meta: 12px;
  --vx-list-font-head: 12px;
  --vx-list-font-title: 14px;
  --vx-list-font-body: 13px;
  --vx-list-font-sub: 12px;
  --vx-list-font-detail: 12.5px;
  --vx-list-font-status: 12px;
  --vx-list-font-price: 15px;
  --vx-list-font-toolbar: 12px;
}
.vx-list.vx-density-compact {
  --vx-list-row-py: 4px;
  --vx-list-row-px: 12px;
  --vx-list-font: 12px;
  --vx-list-font-meta: 12px;
  --vx-list-font-head: 12px;
  --vx-list-font-title: 12.5px;
  --vx-list-font-body: 12px;
  --vx-list-font-sub: 12px;
  --vx-list-font-detail: 12px;
  --vx-list-font-status: 12px;
  --vx-list-font-price: 13px;
  --vx-list-font-toolbar: 12px;
  font-size: var(--vx-list-font);
}
.vx-list.vx-density-comfortable { --vx-list-row-py: 14px; }
.vx-list-sticky-head {
  position: sticky; top: 0; z-index: 4;
  background: var(--vx-surface-sunk); box-shadow: 0 1px 0 var(--vx-line);
}
.vx-list-wrap { border-radius: 8px; overflow: auto; max-height: calc(100vh - 220px); }
.vx-list-row-hover { transition: background .12s, box-shadow .12s; }
.vx-list-row-hover:hover { background: rgba(0,82,146,.04); }
.vx-list-row-hover.sel,
.vx-list-row-hover.open { background: var(--vx-primary-soft); box-shadow: inset 3px 0 0 var(--vx-blue); }
.vx-list-act {
  opacity: 0; pointer-events: none; transition: opacity .12s;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.vx-list-row-hover:hover .vx-list-act,
.vx-list-row-hover.sel .vx-list-act,
.vx-list-row-hover.open .vx-list-act,
.vx-list-row-hover:focus-within .vx-list-act,
.vx-table tbody tr:hover .vx-list-act,
.vx-table tbody tr.sel .vx-list-act { opacity: 1; pointer-events: auto; }
.vx-density-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--vx-control-sm); padding: 0 8px 0 10px; box-sizing: border-box;
  border: 1px solid var(--vx-line); border-radius: var(--vx-radius-md); background: var(--vx-surface);
}
.vx-density-label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-muted);
}
.vx-density-toggle {
  display: inline-flex; align-items: stretch;
  height: calc(var(--vx-control-sm) - 8px);
  border: 1px solid var(--vx-line); border-radius: 6px; overflow: hidden; vertical-align: middle;
}
.vx-density-btn {
  display: inline-flex; align-items: center; padding: 0 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; background: var(--vx-surface); color: var(--vx-muted); border: none; font-family: inherit;
}
.vx-density-btn.active { background: var(--vx-blue); color: var(--vx-text-inverse); }
.vx-density-btn:hover:not(.active) { background: var(--vx-primary-soft); color: var(--vx-navy); }
.vx-sortable { cursor: pointer; user-select: none; }
.vx-sortable:hover { color: var(--vx-blue); }
.vx-sortable::after { content: ""; display: inline-block; width: 0; margin-left: 4px; opacity: .35; }
.vx-sort-asc::after { content: "\25B2"; opacity: 1; color: var(--vx-blue); }
.vx-sort-desc::after { content: "\25BC"; opacity: 1; color: var(--vx-blue); }

/* Density typography — Bookings + Sales list contents */
.vx-list .bk_colhead,
.vx-list .bk_lhead { font-size: var(--vx-list-font-head); }
.vx-list .bk_row { font-size: var(--vx-list-font); }
.vx-list .bk_id { font-size: var(--vx-list-font); }
.vx-list .bk_time,
.vx-list .bk_host,
.vx-list .bk_orderno { font-size: var(--vx-list-font-meta); }
.vx-list .bk_status { font-size: var(--vx-list-font-status); }
.vx-list .bk_lrow { font-size: var(--vx-list-font-detail); }
.vx-list .bk_cdetail .bk_crow { font-size: var(--vx-list-font-detail); }
.vx-list .bk_cdetail .bk_clabel { font-size: var(--vx-list-font-meta); }
.vx-list .bk_actionbar .bk_act { font-size: 14px; }
.vx-list .bk_order_name { font-size: var(--vx-list-font-title); }
.vx-list .bk_order_price,
.vx-list .bk_order_collabel { font-size: var(--vx-list-font-meta); }
.vx-list .sm_o_num { font-size: var(--vx-list-font-title); }
.vx-list .sm_o_status { font-size: var(--vx-list-font-status); }
.vx-list .sm_o_date,
.vx-list .sm_o_res,
.vx-list .sm_o_bill,
.vx-list .sm_o_desc { font-size: var(--vx-list-font-body); }
.vx-list .sm_o_time,
.vx-list .sm_o_sub { font-size: var(--vx-list-font-sub); }
.vx-list .sm_prow_name { font-size: var(--vx-list-font-title); }
.vx-list .sm_prow_desc,
.vx-list .sm_prow_warn { font-size: var(--vx-list-font-meta); }
.vx-list .sm_prow_price { font-size: var(--vx-list-font-price); }
.vx-list .sm_tb_btn { font-size: var(--vx-list-font-toolbar); }

.vx-list.vx-density-compact .bk_lrow { padding: var(--vx-list-row-py) 16px; }
.vx-list.vx-density-compact .bk_row { padding: var(--vx-list-row-py) var(--vx-space-4); }
.vx-list.vx-density-compact .bk_orderrow:not(.bk_ordercard) { padding: var(--vx-list-row-py) 0; }
.vx-list.vx-density-compact .sm_prow { padding: var(--vx-list-row-py) 0; }
.vx-list.vx-density-compact .sm_orderlist { gap: 6px; }
.vx-list.vx-density-compact .sm_order_head { padding: 6px 12px; gap: 10px; }
.vx-list.vx-density-compact .sm_order_body { padding: 10px 12px; }
.vx-list.vx-density-compact .sm_addinfo { margin-bottom: 8px; }
.vx-list.vx-density-compact .sm_ordertoolbar { gap: 8px; padding-bottom: 6px; margin-bottom: 4px; }
.vx-list.vx-density-compact .adu_table tbody td,
.vx-list.vx-density-compact .adpr_table td { padding: 5px 12px; }
.vx-list.vx-density-comfortable .bk_lrow { padding: 10px 16px; }
.vx-list.vx-density-comfortable .bk_row { padding: var(--vx-list-row-py) var(--vx-space-4); }
.vx-list.vx-density-comfortable .sm_orderlist { gap: 14px; }
.vx-list.vx-density-comfortable .sm_order_head { padding: 14px 16px; }
.vx-list.vx-density-comfortable .sm_order_body { padding: 16px; }
.adu_table thead th,
.adpr_table thead th { position: sticky; top: 0; z-index: 3; background: var(--vx-surface-alt); }

.bk_lrow_wrap { border-bottom: 1px solid var(--vx-line); }
.bk_lrow_wrap:last-child { border-bottom: 0; }
.bk_lrow_wrap.open { background: var(--vx-primary-soft); }
.bk_lrow { padding: 7px 16px; cursor: pointer; font-size: 12.5px; color: var(--vx-text); }
.bk_lrow:hover { background: var(--vx-primary-soft); }
.bk_l_status .bk_status { margin-top: 0; max-width: 100%; box-sizing: border-box; }
.bk_l_desc { font-weight: 600; color: var(--vx-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk_lid { color: var(--vx-muted); font-weight: 400; }
.bk_l_details { display: flex; gap: 8px; }
.bk_l_res { color: var(--vx-navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk_l_date, .bk_l_time { color: var(--vx-text); white-space: nowrap; }
.bk_l_host, .bk_l_orderno, .bk_l_cost { color: var(--vx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk_card_icons .bk_badgeic.sm svg { width: 17px; height: 17px; }
.bk_card_icons .bk_badgeic.sm .bk_badge { top: -5px; right: -6px; font-size: 8px; min-width: 13px; line-height: 13px; }

/* ---- CARD VIEW (ruudukko) ---- */
.bk_cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.bk_card { border: 1px solid var(--vx-line); border-radius: 8px; background: var(--vx-surface); box-shadow: var(--vx-shadow); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.bk_card:hover { border-color: var(--vx-blue); box-shadow: 0 0 0 2px rgba(0,82,146,.10); }
.bk_card_top { display: flex; justify-content: space-between; align-items: center; }
.bk_card_id { font-size: 12px; font-weight: 700; color: var(--vx-muted); }
.bk_card_dt { font-size: 12px; color: var(--vx-text); }
.bk_card_res { font-size: 14px; font-weight: 700; color: var(--vx-navy); }
.bk_card_desc { font-size: 12px; color: var(--vx-muted); min-height: 16px; }
.bk_card_foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--vx-line); }
.bk_card_view { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-navy); letter-spacing: .03em; }
.bk_card_icons { display: flex; gap: 8px; }

/* ---- Detail (tiivis, List view) ---- */
.bk_cdetail { padding: 14px 18px 4px; }
.bk_cdetail_head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bk_cdetail_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
.bk_ccol { display: flex; flex-direction: column; }
.bk_crow { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px dashed var(--vx-border); align-items: baseline; }
.bk_crow:last-child { border-bottom: 0; }
.bk_clabel { color: var(--vx-muted); font-size: 12px; }
.bk_cval { color: var(--vx-text); }
.bk_cmuted { color: var(--vx-muted); }
.bk_ceditable { cursor: pointer; }
.bk_ceditable:hover .bk_cval { color: var(--vx-blue); }
.bk_cedit { display: inline-flex; width: 13px; height: 13px; margin-left: 6px; color: var(--vx-muted); vertical-align: -1px; }
.bk_cedit svg { width: 13px; height: 13px; stroke: currentColor; }
.bk_detail_compact .bk_section { margin-top: 4px; }

/* ---- Detail ---- */
.bk_detail_holder:empty { display: none; }
.bk_detail { border-top: 1px solid var(--vx-line); background: #fff; }

/* Full screen -näkymä: tuplaklikkaus varausta nostaa detail-lohkon koko
   ruutuun. z-index 80 = valikon (60) yläpuolella mutta slide-in-paneelien
   (backdrop 90 / vinfopane 100) alapuolella, jotta paneelit toimivat myös
   full screenissä. */
body.bk-fs { overflow: hidden; }
.bk_detail_holder.bk-fs-active {
  position: fixed; inset: 0; z-index: 80;
  background: var(--vx-surface); overflow: auto;
  -webkit-overflow-scrolling: touch;
  animation: bkFsIn .16s ease;
}
.bk_detail_holder.bk-fs-active .bk_detail { border-top: 0; background: var(--vx-surface); }
@keyframes bkFsIn { from { opacity: 0; } to { opacity: 1; } }
.bk_fs_exit {
  position: fixed; top: 52px; right: 16px; z-index: 85;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--vx-line); border-radius: 8px;
  background: var(--vx-surface); color: var(--vx-navy); font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 20px rgba(var(--vx-primary-rgb),.18);
}
.bk_fs_exit:hover { background: #f2f6fc; color: var(--vx-blue); border-color: var(--vx-blue); }
.bk_actionbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--vx-line); flex-wrap: wrap; gap: 8px; background: #fff; cursor: pointer; }
.bk_actions_left, .bk_actions_right { display: flex; align-items: center; gap: 24px; }
.bk_action_sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--vx-line); margin: 4px 4px; }
.bk_act { font-size: 14px; color: var(--vx-navy); cursor: pointer; min-height: var(--vx-control-h-compact); display: inline-flex; align-items: center; gap: 7px; }
.bk_act_ic { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.bk_act_ic svg { width: 18px; height: 18px; stroke: currentColor; }
.bk_act:hover { color: var(--vx-blue); }
.bk_act:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); border-radius: var(--vx-radius-md); }
.bk_act.danger { color: var(--vx-red); }

.bk_detail_grid { display: grid; grid-template-columns: 340px 1fr; gap: 26px; padding: 24px; }
.bk_detail_left { display: flex; flex-direction: column; min-height: 100%; }
.bk_detail_left_head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.bk_detail_bk { font-size: 14px; font-weight: 700; color: var(--vx-navy); }
.bk_detail_left_status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bk_condensed { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-blue); letter-spacing: .04em; cursor: pointer; position: relative; z-index: 5; }
.bk_condensed:hover { text-decoration: underline; }
.bk_actionbar .bk_condensed {
  color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; z-index: auto;
}
.bk_actionbar .bk_condensed:hover { text-decoration: none; color: var(--vx-blue); }
/* Booking-numero: hover-preview -laukaisin (koko varauksen tiivis nakyma). */
.bk_cvnum { cursor: pointer; }
.bk_cvnum:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.bk_resimg { width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 10px; background: linear-gradient(135deg,#1c2a3a,#33485f); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.bk_resimg_inner { font-size: 46px; filter: grayscale(.2); }
.bk_resname { font-size: 20px; font-weight: 700; color: var(--vx-navy); }
.bk_resdate { font-size: 15px; color: var(--vx-muted); margin-top: 8px; margin-bottom: 12px; }
.bk_resdesc {
  font-size: 15px; font-weight: 400; color: var(--vx-navy); line-height: 1.4;
  margin: 0 0 12px; word-break: break-word;
}
.bk_resdesc:empty { display: none; }
.bk_confswitch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; margin-bottom: 0; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--vx-line); border-radius: 8px;
}
.bk_confswitch_label { font-size: 15px; font-weight: 600; color: var(--vx-navy); }
.bk_switch { position: relative; display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; flex-shrink: 0; }
.bk_switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bk_switch_track {
  display: block; width: 44px; height: 24px; border-radius: 12px; box-sizing: border-box;
  background: var(--vx-surface-sunk); border: 1px solid var(--vx-line); position: relative;
  transition: background var(--vx-t-fast), border-color var(--vx-t-fast);
}
.bk_switch_track::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px;
  border-radius: 50%; background: var(--vx-surface); border: 1px solid var(--vx-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform var(--vx-t-fast);
}
.bk_switch input:checked + .bk_switch_track { background: var(--vx-success); border-color: var(--vx-success); }
.bk_switch input:checked + .bk_switch_track::before { transform: translateX(20px); border-color: transparent; }
.bk_switch input:focus-visible + .bk_switch_track { box-shadow: var(--vx-focus-ring); }
.bk_switch input:disabled + .bk_switch_track { opacity: .7; cursor: not-allowed; }
.bk_confswitch:has(input:disabled) { cursor: default; }
.bk_confswitch_val { font-size: 13px; font-weight: 600; color: var(--vx-muted); min-width: 2.4em; }
.bk_confswitch_val::before { content: attr(data-off); }
.bk_switch input:checked ~ .bk_confswitch_val { color: var(--vx-success); }
.bk_switch input:checked ~ .bk_confswitch_val::before { content: attr(data-on); }
.bk_meta { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 8px; line-height: 1.4; }
.bk_metalink { font-size: 12px; color: var(--vx-link); margin-top: 8px; cursor: pointer; }
.bk_metalink:hover { text-decoration: underline; }

.bk_detail_right { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 12px; }
.bk_help_record { position: absolute; right: 0; top: -4px; }
.bk_field { display: grid; grid-template-columns: 170px 1fr; gap: var(--vx-space-4); align-items: center; }
.bk_field_label { font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text); padding-top: 0; }
.bk_field:has(.vx_notefield),
.bk_field:has(.bk_billbox),
.bk_field:has(.bk_inlinebox) { align-items: start; }
.bk_field:has(.vx_notefield) .bk_field_label,
.bk_field:has(.bk_billbox) .bk_field_label,
.bk_field:has(.bk_inlinebox) .bk_field_label { padding-top: 12px; }
.bk_star { color: var(--vx-muted); }
.bk_field_value { min-width: 0; }
.bk_inlinebox, .bk_billbox { border: 1px solid var(--vx-line); border-radius: 8px; padding: 10px 12px; background: var(--vx-surface); font-size: 13px; line-height: 1.45; }
.bk_billbox.bk_editable { position: relative; }
.bk_billbox.bk_editable .bk_edit_hint { position: absolute; top: 9px; right: 10px; margin: 0; }
.bk_billname { font-size: 13px; }
.bk_billrow { display: flex; gap: 10px; margin-top: 8px; font-size: 12px; }
.bk_billrow span { color: var(--vx-muted); min-width: 80px; }

/* ---- Sections (Orders / Participants) ---- */
.bk_section { border-top: 1px solid var(--vx-line); padding: 24px; }
.bk_section_head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bk_section_title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--vx-navy); letter-spacing: .03em; }
.bk_section_title svg { width: 18px; height: 18px; stroke: var(--vx-blue); }
.bk_section_title span { color: var(--vx-navy); }
.bk_section_head .btn svg { width: 13px; height: 13px; stroke: currentColor; }
.bk_smalllink { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .03em; color: var(--vx-navy); cursor: pointer; }
.bk_smalllink:hover { color: var(--vx-blue); }
.bk_section_head_right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.bk_ordergroup { font-size: 12px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em; margin-bottom: 10px; }
.bk_orderlist { display: flex; flex-direction: column; gap: 0; }
.bk_orderrow { display: grid; grid-template-columns: 48px 2fr 1fr 1fr 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--vx-line); }
.bk_orderrow .vx-list-act { justify-self: end; }
.bk_order_img { width: 42px; height: 42px; border-radius: 8px; background: var(--vx-border); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.bk_order_name { font-weight: 600; color: var(--vx-navy); font-size: 14px; }
.bk_order_price { font-size: 12px; color: var(--vx-muted); font-weight: 400; margin-top: 3px; }
.bk_order_collabel { font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.bk_order_delivery { color: var(--vx-navy); font-weight: 700; margin-top: 2px; }
.bk_order_qty, .bk_order_total { font-weight: 700; color: var(--vx-navy); margin-top: 2px; }
.bk_order_col.right { text-align: right; }
.bk_order_edit svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }
.btn-outline.bk_order_edit,
.btn-outline.bk_pcard_edit,
.btn-outline.sm_prow_edit {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: transform .18s ease, background var(--vx-t-fast), border-color var(--vx-t-fast), color var(--vx-t-fast);
}
.btn-outline.bk_order_edit:active,
.btn-outline.bk_pcard_edit:active,
.btn-outline.sm_prow_edit:active { transform: translateY(1px); }
.bk_pcard_edit svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }

.bk_orderlist--cards { display: flex; flex-direction: column; gap: 10px; }
.bk_orderrow.bk_ordercard {
  display: flex; grid-template-columns: none;
  align-items: center; gap: 14px;
  border: 1px solid var(--vx-line); border-radius: var(--vx-radius-md);
  padding: 12px 16px; background: var(--vx-surface);
}
.bk_orderrow.bk_ordercard:hover { border-color: var(--vx-border-strong); background: rgba(0,82,146,.04); }
.bk_orderrow.bk_ordercard .bk_order_img { flex-shrink: 0; }
.bk_orderrow.bk_ordercard .bk_pcard_grid { flex: 1; }
.bk_orderrow.bk_ordercard .bk_order_edit { flex-shrink: 0; }

.bk_orderhead,
.bk_orderlist--table .bk_orderrow--list {
  display: grid;
  grid-template-columns: 48px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 88px;
  gap: 14px; align-items: center;
}
.bk_orderhead > div,
.bk_orderlist--table .bk_orderrow--list > * { min-width: 0; }
.bk_orderhead {
  padding: 8px 0 10px; font-size: var(--vx-list-font-head, 12px); font-weight: 700;
  color: var(--vx-text-muted); letter-spacing: .03em; text-transform: uppercase;
  background: var(--vx-surface-sunk); border-bottom: 1px solid var(--vx-line);
}
.bk_orderlist--table { overflow: visible; }
.bk_orderlist--table .bk_order_delivery,
.bk_orderlist--table .bk_order_qty,
.bk_orderlist--table .bk_order_total { margin-top: 0; font-variant-numeric: tabular-nums; }
.bk_orderlist--table .bk_order_total,
.bk_orderhead > div:nth-child(5) { text-align: right; }

.bk_orderfooter { display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; }
.bk_addorderinfo { flex: 1; max-width: 360px; }
.vx_notefield { position: relative; }
.vx_noteactions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.vx_noteactions[hidden] { display: none !important; }
.vx_notefield-dirty .vx_noteinput {
  border-color: var(--vx-blue, var(--vx-primary));
  box-shadow: 0 0 0 2px rgba(var(--vx-primary-rgb),.15);
}
.bk_pnotes { margin-top: 12px; max-width: 420px; }
.bk_attlist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bk_attrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--vx-border); border-radius: 8px; background: var(--vx-surface); width: fit-content; max-width: 100%; }
.bk_atticon svg { width: 16px; height: 16px; stroke: var(--vx-blue); display: block; }
.bk_attname { font-size: 13px; color: var(--vx-navy); word-break: break-all; }
.bk_atthint { margin-top: 6px; font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.bk_totals { min-width: 240px; }
.bk_total_row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--vx-text); }
.bk_total_row span { color: var(--vx-muted); }
.bk_total_row.gross { border-top: 1px solid var(--vx-line); margin-top: 4px; padding-top: 9px; }
.bk_total_row.gross span, .bk_total_row.gross b { color: var(--vx-blue); font-size: 14px; }

/* Participants */
.bk_plist { display: flex; flex-direction: column; gap: 10px; }
.bk_pcard { display: flex; align-items: center; gap: 14px; border: 1px solid var(--vx-line); border-radius: var(--vx-radius-md); padding: 12px 16px; background: var(--vx-surface); }
.bk_pcard:hover { background: rgba(0,82,146,.04); }
.bk_pcard_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; flex: 1; min-width: 0; }
.bk_pcard_label { font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.bk_pcard_val { font-size: 13px; color: var(--vx-text); font-weight: 600; margin-top: 2px; }
.bk_plist--table { gap: 0; overflow: visible; }
.bk_phead, .bk_prow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 88px;
  gap: 10px; align-items: center;
}
.bk_phead > div, .bk_prow > div { min-width: 0; }
.bk_phead {
  padding: 8px 10px 10px; font-size: var(--vx-list-font-head, 12px); font-weight: 700;
  color: var(--vx-text-muted); letter-spacing: .03em; text-transform: uppercase;
  background: var(--vx-surface-sunk); border-bottom: 1px solid var(--vx-line);
}
.bk_prow {
  padding: var(--vx-list-row-py, 12px) 10px; border-bottom: 1px solid var(--vx-line);
  font-size: 13px; color: var(--vx-text);
}
.bk_prow .vx-list-act { justify-self: end; }
.bk_prow > div:nth-child(6) { font-variant-numeric: tabular-nums; }

.vx-list.vx-density-compact .bk_pcard,
.vx-list.vx-density-compact .bk_ordercard {
  padding: 8px 12px; gap: 10px; border-radius: var(--vx-radius-sm);
}
.vx-list.vx-density-compact .bk_plist:not(.bk_plist--table),
.vx-list.vx-density-compact .bk_orderlist--cards { gap: 6px; }
.vx-list.vx-density-compact .bk_pcard_grid { gap: 8px 12px; }
.vx-list.vx-density-compact .bk_pcard_val { font-size: 12.5px; }
.vx-list.vx-density-compact .bk_phead,
.vx-list.vx-density-compact .bk_prow { padding-top: var(--vx-list-row-py); padding-bottom: var(--vx-list-row-py); }
.vx-list.vx-density-compact .bk_orderhead { padding-top: 4px; padding-bottom: 4px; }
/* Participants: monivalinta (live) - sama valinta-visuaali kuin tuoterivit
   (.bk_orderrow.sel): vaaleansininen tausta + sininen vasen palkki + sama hover. */
.bk_pcard_selectable { cursor: pointer; transition: background .12s, box-shadow .12s; }
.bk_pcard_selectable:hover { background: rgba(0, 82, 146, .04); }
.bk_pcard_selected { background: var(--vx-primary-soft); }
.bk_psel_bar { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.bk_osel_bar { display: inline-flex; align-items: center; gap: 12px; }

/* ---- Participants: Import (liita -> muokkaa -> tuo) ---- */
.imp_wrap { display: flex; flex-direction: column; gap: 22px; }
.imp_stephead { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--vx-navy);
  margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.imp_hint { font-size: var(--vx-fs-xs); font-weight: 400; letter-spacing: 0; color: var(--vx-muted); }
.imp_paste { width: 100%; box-sizing: border-box; min-height: 120px; font-family: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 12.5px; }
.imp_step1btns { display: flex; gap: 10px; margin-top: 10px; }
.imp_headerchk { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--vx-text); margin-bottom: 10px; }
.imp_headerchk input { margin: 0; }
.imp_issues { margin-bottom: 8px; }
.imp_issue { font-size: 12px; color: var(--vx-red); background: var(--vx-danger-bg); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; }
.imp_gridwrap { overflow: auto; border: 1px solid var(--vx-line); border-radius: 8px; max-height: 52vh; }
.imp_grid { border-collapse: collapse; width: 100%; min-width: 760px; }
.imp_grid thead th { position: sticky; top: 0; background: var(--vx-surface-2); z-index: 1;
  border-bottom: 1px solid var(--vx-line); padding: 8px 6px; text-align: left; }
.imp_grid td { border-bottom: 1px solid var(--vx-line); padding: 5px 6px; }
.imp_grid tbody tr:last-child td { border-bottom: none; }
.imp_mapsel { min-width: 130px; font-size: 12px; font-weight: 700; color: var(--vx-navy); }
.imp_cellinput { width: 100%; box-sizing: border-box; font-size: 13px; }
.imp_cell_warn { border-color: var(--vx-red) !important; background: var(--vx-danger-bg); }
.imp_cell_dup { border: 1px dashed var(--vx-blue) !important; }
.imp_th_badge, .imp_td_badge { text-align: center; width: 60px; }
.imp_rowdel { background: none; border: 0; color: var(--vx-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.imp_rowdel:hover { color: var(--vx-red); }

/* ---- Participants: Copy to another booking ---- */
.cp_intro { font-size: 13px; color: var(--vx-text); margin-bottom: 18px; }
.cp_field { margin-bottom: 14px; }
.cp_field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--vx-navy); margin-bottom: 6px; }
.cp_field .vx-input { width: 100%; box-sizing: border-box; }
.cp_results { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.cp_result { border: 1px solid var(--vx-line); border-radius: 8px; padding: 9px 12px; cursor: pointer; transition: background .12s, border-color .12s; }
.cp_result:hover { background: var(--vx-surface-2); }
.cp_result.sel { border-color: var(--vx-blue); background: var(--vx-primary-soft); box-shadow: inset 3px 0 0 var(--vx-blue); }
.cp_result_main { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.cp_result_meta { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 2px; }

/* ---- Slide-in paneeli ---- */
.pane_backdrop { position: fixed; inset: 0; background: var(--vx-overlay); opacity: 0; pointer-events: none; transition: opacity var(--vx-t-med); z-index: 90; }
.pane_backdrop.show { opacity: 1; pointer-events: auto; }
.vinfopane {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 440px; max-width: 92vw;
  background: var(--vx-surface); box-shadow: var(--vx-shadow-lg);
  border-left: 1px solid var(--vx-border);
  transform: translateX(100%); transition: transform var(--vx-t-med); z-index: 100;
  display: flex; flex-direction: column;
}
.vinfopane.open { transform: translateX(0); }
.vinfopane_header {
  display: flex; align-items: center; gap: var(--vx-space-3);
  min-height: var(--vx-header-h); padding: 0 var(--vx-space-5);
  border-bottom: 1px solid var(--vx-border);
}
.vinfopane_back {
  width: var(--vx-control-md); height: var(--vx-control-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--vx-text); cursor: pointer;
  border-radius: var(--vx-radius-md);
}
.vinfopane_back:hover { background: var(--vx-surface-sunk); }
.vinfopane_back:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.vinfopane_title {
  font-size: var(--vx-fs-lg); font-weight: 600; letter-spacing: -.01em;
  color: var(--vx-text); flex: 1; text-transform: none;
}
.vinfopane_close {
  height: var(--vx-control-md); min-width: var(--vx-control-md); padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-text-muted); cursor: pointer;
  letter-spacing: .04em; border-radius: var(--vx-radius-md);
}
.vinfopane_close:hover { color: var(--vx-danger); background: var(--vx-surface-sunk); }
.vinfopane_close:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.vinfopane_body { flex: 1; overflow-y: auto; padding: var(--vx-space-5); }
/* Visitor Experience (integroitu, visitor-experience.js): .vxve tayttaa paneelin
   rungon ilman paddingia. Tyylit: visitor-experience.css (skoopattu .vxve). */
.vinfopane_body.pane_body_flush { padding: 0; overflow: hidden; display: flex; }
/* Desktop MVP drawer tarvitsee leveytta -> levennetaan paneeli tata nakymaa varten */
.vinfopane.pane_ve { width: clamp(520px, 48vw, 760px); }
/* Add orders (Products) -paneeli on Varianissa selvasti leveampi */
.vinfopane.pane_products { width: clamp(900px, 78vw, 1480px); }
.pane_products .vinfopane_header {
  padding: 0 var(--vx-space-5);
}
.pane_products .vinfopane_body {
  padding: var(--vx-space-5);
  background: var(--vx-surface);
}
.pane_products .pane_searchfield .vx-select,
.pane_products .pane_searchfield input,
.pane_products .prod_serving_in,
.pane_products .prod_amount_in {
  border: 1px solid var(--vx-field-border);
  background: var(--vx-surface);
  border-radius: var(--vx-radius-md);
  color: var(--vx-text);
  transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast);
}
.pane_products .pane_searchfield .vx-select:hover,
.pane_products .prod_serving_in:hover,
.pane_products .prod_amount_in:hover { border-color: var(--vx-gray-400); }
.pane_products .pane_searchfield .vx-select:focus,
.pane_products .prod_serving_in:focus,
.pane_products .prod_amount_in:focus {
  outline: none; border-color: var(--vx-primary); box-shadow: var(--vx-focus-ring);
}
.pane_products .prod_add { border-color: var(--vx-field-border); }
.vinfopane_footer { padding: var(--vx-space-3) var(--vx-space-5); border-top: 1px solid var(--vx-border); display: flex; gap: var(--vx-space-3); align-items: center; min-height: calc(var(--vx-header-h) - 4px); }
.vinfopane_footer:empty { display: none; }

.vinfopane .vx-input,
.vinfopane .vx-select,
.vinfopane .pane_searchfield input,
.vinfopane .bsearch_trigger,
.vinfopane .bsearch_input {
  height: var(--vx-control-md);
  min-height: var(--vx-control-md);
  box-sizing: border-box;
}
.vinfopane .vx-textarea,
.vinfopane textarea.vx-input { height: auto; min-height: 84px; }
.vinfopane .btn:not(.btn-s):not(.btn-sm):not(.btn-m):not(.btn-link):not(.btn-text) {
  height: var(--vx-control-md); min-height: var(--vx-control-md);
}
.vinfopane .btn-m,
.vinfopane .btn-s,
.vinfopane .btn-sm {
  height: var(--vx-control-sm); min-height: var(--vx-control-sm);
}
.vinfopane_footer .btn:not(.btn-link):not(.btn-text) {
  height: var(--vx-control-md); min-height: var(--vx-control-md); padding: 0 16px;
}
.vinfopane .pform_label,
.vinfopane .dtr_field label,
.vinfopane .bi_field label,
.vinfopane .pe_field label,
.vinfopane .cpr_lbl {
  font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text);
}

.pane_searchfield input { width: 100%; padding: 0 12px; border: 1px solid var(--vx-field-border); border-radius: var(--vx-radius-md); font-size: var(--vx-fs-base); font-family: inherit; background: var(--vx-surface); }

/* Products */
.prov_head { display: flex; gap: var(--vx-space-4); margin-top: var(--vx-space-5); }
.prov_img {
  width: 120px; height: 92px; flex-shrink: 0;
  border-radius: var(--vx-radius-md);
  background: var(--vx-gray-800);
  position: relative;
}
.prov_img::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto; width: 28px; height: 20px;
  border: 2px solid rgba(255,255,255,.4); border-radius: 3px 3px 8px 8px;
}
.prov_name { font-size: var(--vx-fs-lg); font-weight: 600; color: var(--vx-text); letter-spacing: -.01em; }
.prov_status { color: var(--vx-danger); font-weight: 600; font-size: var(--vx-fs-sm); margin-left: 6px; }
.prov_desc { font-size: var(--vx-fs-sm); color: var(--vx-text); margin: 6px 0; line-height: var(--vx-lh-normal); max-width: 65ch; }
.prov_meta { font-size: var(--vx-fs-sm); color: var(--vx-text); margin-top: 2px; }
.prov_meta b { color: var(--vx-primary); font-weight: 500; }
.prov_note {
  background: rgba(var(--vx-warning-rgb),.10);
  border: 1px solid rgba(var(--vx-warning-rgb),.35);
  border-radius: var(--vx-radius-md);
  padding: 10px 12px; font-size: var(--vx-fs-sm); color: #8a4b10;
  margin: var(--vx-space-4) 0; line-height: var(--vx-lh-normal);
}
.pgroup_title { font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text); margin-bottom: 10px; }
.pgroup_row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.pgroup { text-align: center; cursor: pointer; flex-shrink: 0; width: 64px; }
.pgroup_circle {
  width: 52px; height: 52px; border-radius: var(--vx-radius-pill);
  background: var(--vx-surface-sunk);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--vx-text); margin: 0 auto 5px;
  border: 2px solid transparent;
  transition: border-color var(--vx-t-fast), color var(--vx-t-fast), background var(--vx-t-fast);
}
.pgroup:hover .pgroup_circle { background: var(--vx-primary-soft); }
.pgroup.active .pgroup_circle { border-color: var(--vx-primary); color: var(--vx-primary); background: var(--vx-primary-soft); }
.pgroup_name { font-size: var(--vx-fs-xs); color: var(--vx-text-muted); line-height: 1.2; }
.prod_grouphead { font-size: var(--vx-fs-base); font-weight: 600; color: var(--vx-text); margin: var(--vx-space-4) 0 4px; }
.prod_grouphead span { color: var(--vx-text-muted); font-size: var(--vx-fs-xs); font-weight: 500; }
/* Tuotetaulukko: vaakasarakkeet Details | Product | Price | Serving | Amount | Add */
:root { --prod-cols: 28px minmax(220px, 1fr) 92px 124px 104px 158px; }
.prod_tablehead {
  display: grid; grid-template-columns: var(--prod-cols); gap: 8px 14px; align-items: end;
  font-size: var(--vx-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vx-text-muted); border-bottom: 1px solid var(--vx-border-strong); padding: 6px 0;
}
.prod_th_price { text-align: right; }
.prod_list { display: flex; flex-direction: column; }
.prod_row {
  display: grid; grid-template-columns: var(--prod-cols); gap: 8px 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--vx-border);
  transition: background var(--vx-t-fast);
}
.prod_row:hover { background: var(--vx-surface-alt); }
.prod_i { color: var(--vx-primary); font-size: 15px; }
.prod_name { font-size: var(--vx-fs-sm); font-weight: 600; color: var(--vx-text); }
.prod_warn { color: var(--vx-danger); font-style: italic; font-weight: 600; font-size: var(--vx-fs-xs); }
.prod_desc { font-size: var(--vx-fs-xs); color: var(--vx-text-muted); font-weight: 400; margin-top: 3px; }
.prod_price { font-weight: 600; color: var(--vx-text); font-size: var(--vx-fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.prod_serving { display: flex; align-items: center; gap: 6px; }
.prod_serving_ic { color: var(--vx-text-muted); font-size: 14px; }
.prod_serving_in {
  width: 84px; height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 8px; box-sizing: border-box;
  font-family: inherit; font-size: var(--vx-fs-sm);
  -webkit-appearance: none; appearance: none;
}
.prod_amount { display: flex; align-items: center; gap: 6px; }
.prod_amount_ic { display: inline-flex; }
.prod_amount svg { width: 16px; height: 16px; stroke: var(--vx-text-muted); }
.prod_amount_in { width: 64px; height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 8px; box-sizing: border-box; font-family: inherit; font-size: var(--vx-fs-sm); }
.prod_add { align-self: center; white-space: nowrap; }

/* Participant form */
.pform { margin-top: 18px; }
.pform_row { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.pform_label { font-size: var(--vx-fs-sm); color: var(--vx-text); font-weight: 500; }
.pform_ctrl .vx-input, .pform_ctrl .vx-textarea { background: var(--vx-surface-sunk); }

/* ==========================================================================
   CALENDAR
   ========================================================================== */
.cal_toolbar {
  display: flex; align-items: center; gap: var(--vx-space-3);
  min-height: var(--vx-control-sm); margin-bottom: 14px;
}
.cal_toolbar .vx-select,
.cal_toolbar .vx-input,
.cal_toolbar .btn,
.cal_toolbar .bk_iconbtn,
.cal_toolbar .vx-help,
.cal_toolbar .cal_viewbtn,
.cal_toolbar .cal_datenav,
.cal_toolbar .cal_resinfo,
.cal_toolbar .cal_ctrl {
  height: var(--vx-control-sm);
  min-height: var(--vx-control-sm);
  box-sizing: border-box;
}
.cal_toolbar .bk_iconbtn,
.cal_toolbar .vx-help,
.cal_toolbar .cal_resinfo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vx-control-sm);
}
.cal_toolbar .bk_iconbtn.sm {
  width: var(--vx-control-sm);
  height: var(--vx-control-sm);
}
.cal_toolbar .cal_datenav .bk_iconbtn.sm {
  width: 28px;
  height: auto;
  align-self: stretch;
}
.cal_areafield {
  flex: 1; max-width: 640px; padding: 10px 14px;
  border: 1px solid var(--vx-field-border); border-radius: 8px;
  font-size: 13px; color: var(--vx-text); background: var(--vx-surface);
}
.cal_areapick { display: flex; align-items: center; gap: 8px; }
.cal_areapick .cal_areasel { min-width: 150px; }
.cal_areapick .cal_groupsel { min-width: 150px; }
.cal_toolbar_right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cal_ctrl {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--vx-line); border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--vx-navy); cursor: pointer; background: var(--vx-surface);
}
.cal_ctrl:hover { border-color: var(--vx-blue); color: var(--vx-blue); }
.cal_ctrl svg { width: 15px; height: 15px; stroke: currentColor; }

.cal_wrap { position: relative; border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-surface); box-shadow: var(--vx-shadow); overflow: auto; max-height: calc(100vh - 200px); }

/* Header (sticky) */
.cal_wrap .cal_head { display: flex; justify-content: flex-start; align-items: stretch; position: sticky; top: 0; z-index: 5; background: var(--vx-surface); margin-bottom: 0; border-bottom: 1px solid var(--vx-line); }
.cal_corner { box-sizing: border-box; width: 44px; flex-shrink: 0; border-right: 1px solid var(--vx-line); }
.cal_colhead {
  box-sizing: border-box; flex-shrink: 0; text-align: center; padding: 10px 4px;
  font-size: 12px; font-weight: 700; color: var(--vx-navy);
  border-right: 1px solid var(--vx-line); line-height: 1.2;
}
.cal_resinfo { appearance: none; background: transparent; border: none; padding: 0; font: inherit; display: inline-flex; align-items: center; justify-content: center; width: var(--vx-control-sm); height: var(--vx-control-sm); margin-left: 6px; border-radius: var(--vx-radius-md); color: var(--vx-navy); cursor: pointer; transition: background var(--vx-t-fast); }
.cal_resinfo:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.cal_resinfo:hover { background: var(--vx-primary-soft); }
.cal_resinfo svg { width: 17px; height: 17px; stroke: currentColor; }

/* Resurssin nimi mahtuu kapeaan (96px) sarakkeeseen: rivittyy, katkaisee myos
   pitkat yksittaissanat, max 2 rivia + ellipsis. Koko nimi nakyy hoveroimalla
   (showResTip). Ilman tata pitkat nimet (esim. "Neuvotteluhuone") vuotivat yli. */
.cal_colhead_name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
}
.cal_colhead_link { cursor: pointer; transition: background .12s; }
.cal_colhead_link:hover { background: var(--vx-primary-soft); }
.cal_colhead_link:hover .cal_colhead_name { text-decoration: underline; }
.cal_colhead_media { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 600; color: var(--vx-muted); }

/* Resurssin hover-pikatiedot */
.calres_tip {
  position: fixed; z-index: 300; display: none; width: 250px;
  background: var(--vx-navy); color: var(--vx-text-inverse); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(var(--vx-primary-rgb),.4); font-size: 12px; line-height: 1.4; pointer-events: none;
}
.calres_tip_name { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.calres_tip_row { display: flex; justify-content: space-between; gap: 10px; opacity: .92; }
.calres_tip_row b { font-weight: 600; }
.calres_tip_feats { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.calres_tip .calres_chip { background: rgba(255,255,255,.18); color: var(--vx-text-inverse); }
.calres_tip_alert { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.2); color: #ffd27a; font-size: var(--vx-fs-xs); }
.calres_tip_hint { margin-top: 8px; font-size: 10.5px; opacity: .7; font-style: italic; }

/* Resurssipaneeli (right pane) */
.vinfopane.pane_calres { width: clamp(420px, 40vw, 600px); }
.calres_facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 14px; }
.calres_fact { display: flex; flex-direction: column; gap: 2px; }
.calres_fact span { font-size: var(--vx-fs-xs); color: var(--vx-muted); text-transform: uppercase; letter-spacing: .03em; }
.calres_fact b { font-size: 14px; color: var(--vx-navy); }
.calres_alert { background: var(--vx-warning-bg); color: var(--vx-warning); border-radius: 8px; padding: 8px 11px; font-size: 12px; margin-bottom: 14px; }
.calres_h { font-size: var(--vx-fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--vx-muted); margin: 16px 0 7px; }
.calres_desc { font-size: 13px; color: var(--vx-navy); margin: 10px 0; line-height: 1.5; }
.calres_muted { color: var(--vx-muted); font-style: italic; }
/* Resource preview (kuvan mukainen puhdas nakyma) */
.calres_head { margin-bottom: 10px; }
.calres_title { font-size: 20px; font-weight: 700; color: var(--vx-primary, #2f6df6); margin: 0 0 4px; }
.calres_sub { font-size: 14px; color: var(--vx-navy); }
.calres_area { font-size: 13px; color: var(--vx-muted); }
.calres_carousel { margin: 12px 0; }
.calres_hero { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1b2430; border: 1px solid var(--vx-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 64px; overflow: hidden; }
.calres_hero_lbl { position: absolute; left: 10px; bottom: 8px; font-size: var(--vx-fs-xs); color: var(--vx-navy); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 12px; }
.calres_dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.calres_dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; cursor: pointer; transition: background .12s; }
.calres_dot.on { background: var(--vx-primary, #2f6df6); }
.calres_line { font-size: 13px; color: var(--vx-navy); margin: 6px 0; line-height: 1.5; }
.calres_h_accent { color: var(--vx-primary, #2f6df6); font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 700; margin: 18px 0 6px; }
.calres_block { font-size: 13px; color: var(--vx-navy); line-height: 1.55; }
.calres_provname { font-weight: 700; color: var(--vx-navy); }
.calres_provrow { color: var(--vx-navy); }
.calres_provdesc { margin: 6px 0; color: var(--vx-navy); line-height: 1.55; }
.calres_kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #f0f3f7; font-size: 13px; }
.calres_kv span { color: var(--vx-muted); }
.calres_kv b { color: var(--vx-navy); font-weight: 600; text-align: right; }
.calres_chips { display: flex; flex-wrap: wrap; gap: 6px; }
.calres_chip { background: var(--vx-primary-soft); color: var(--vx-navy); border-radius: 20px; padding: 3px 11px; font-size: var(--vx-fs-xs); font-weight: 600; }
.calres_mediahead { display: flex; align-items: center; justify-content: space-between; }
.calres_mediagrid { display: flex; flex-wrap: wrap; gap: 10px; }
.calres_media { position: relative; width: 76px; height: 76px; border: 1px solid var(--vx-border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.calres_media_thumb { font-size: 28px; }
.calres_media_lbl { font-size: 9.5px; color: var(--vx-muted); }
.calres_media_del { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%; border: 0; background: var(--vx-red, #d33); color: var(--vx-text-inverse); cursor: pointer; font-size: 13px; line-height: 1; }
.calres_map { background: var(--vx-surface-sunk); border: 1px dashed var(--vx-border); border-radius: 10px; padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.calres_map span { font-size: 14px; font-weight: 600; color: var(--vx-navy); }
.calres_map small { font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.calres_map .btn { align-self: center; }
.calres_mapframe_wrap { width: 100%; height: calc(100vh - 170px); min-height: 420px; border-radius: 10px; overflow: hidden; background: var(--vx-surface-sunk); border: 1px solid var(--vx-border); }
.calres_mapframe { display: block; width: 100%; height: 100%; border: 0; }
/* New Booking: 2.5D-kartta (desk) rinnalle gridin kanssa */
.nb_map3d_toggle { display: inline-flex; margin: 6px 0 10px; border: 1px solid var(--vx-border); border-radius: 8px; overflow: hidden; }
.nb_seg { appearance: none; border: 0; background: var(--vx-card, #fff); color: var(--vx-navy); font: inherit; font-weight: 600; font-size: 13px; padding: 7px 14px; cursor: pointer; }
.nb_seg + .nb_seg { border-left: 1px solid var(--vx-border); }
.nb_seg.on { background: var(--vx-primary, #2f6df6); color: var(--vx-text-inverse); }
.nb_map3d_wrap { width: 100%; height: calc(100vh - 320px); min-height: 380px; border-radius: 10px; overflow: hidden; background: #c8d0da; border: 1px solid var(--vx-border); }
.nb_map3d_frame { display: block; width: 100%; height: 100%; border: 0; }
/* New Booking desk: 2D map2d -viewer (Ollin moottori) iframessa, täyttää kartan. */
.nb_map2d_wrap { width: 100%; height: calc(100vh - 220px); min-height: 460px; border-radius: 10px; overflow: hidden; background: var(--vx-gray-100, var(--vx-border)); border: 1px solid var(--vx-border); }
.nb_map2d_frame { display: block; width: 100%; height: 100%; border: 0; }
.calres_2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.calres_featbox { display: flex; flex-direction: column; gap: 6px; }
.calres_pickgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.calres_pick { font-size: 24px; aspect-ratio: 1; border: 1px solid var(--vx-border); border-radius: 8px; background: var(--vx-surface); cursor: pointer; transition: background .12s, transform .12s; }
.calres_pick:hover { background: var(--vx-primary-soft); transform: scale(1.06); }
.vinfopane.pane_calres .vinfopane_footer { justify-content: flex-end; }

.cal_body { display: flex; }
.cal_gutter { box-sizing: border-box; width: 44px; flex-shrink: 0; border-right: 1px solid var(--vx-line); }
.cal_gutterslot { position: relative; border-bottom: 1px solid #f3f6fa; }
.cal_hour { position: absolute; right: 6px; top: -8px; font-size: 12px; font-weight: 700; color: var(--vx-navy); background: var(--vx-surface); padding: 0 2px; }

.cal_cols { display: flex; }
.cal_col { box-sizing: border-box; position: relative; flex-shrink: 0; border-right: 1px solid var(--vx-line); }
.cal_slot { border-bottom: 1px solid #f3f6fa; display: flex; align-items: center; justify-content: center; }
.cal_slottime { font-size: var(--vx-fs-xs); color: var(--vx-text-muted); }

.cal_block {
  position: absolute; left: 3px; right: 3px;
  background: var(--vx-blue); color: var(--vx-text-inverse); border-radius: 6px;
  padding: 5px 7px; overflow: hidden; cursor: grab;
  box-shadow: 0 1px 3px rgba(0,82,146,.4); z-index: 2;
  touch-action: none; user-select: none;
}
.cal_block:hover { background: var(--vx-blue-dark); }
.cal_block_host { font-size: var(--vx-fs-xs); font-weight: 700; line-height: 1.2; }
.cal_block_desc { font-size: var(--vx-fs-xs); opacity: .9; margin-top: 2px; line-height: 1.2; }
.cal_block_time { font-size: var(--vx-fs-xs); font-weight: 700; opacity: .92; line-height: 1.2; }

/* Raahaus/venytys (Paiva-nakyma): venytyskahvat + raahauksen aikaiset tilat */
.cal_block_handle {
  position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize;
  opacity: 0; touch-action: none;
}
.cal_block_handle_top { top: 0; }
.cal_block_handle_bottom { bottom: 0; }
.cal_block:hover .cal_block_handle { opacity: 1; background: rgba(255,255,255,.35); }
.cal_block.dragging { cursor: grabbing; }
.cal_block_ghost {
  position: absolute; left: 3px; right: 3px; pointer-events: none;
  opacity: .85; z-index: 5; outline: 2px solid var(--vx-surface);
}
.cal_block_ghost.invalid { background: var(--vx-red, #d64545) !important; outline-color: #d64545; }
.cal_block_ghost_time {
  position: absolute; left: 0; right: 0; bottom: -18px; text-align: center;
  font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-navy); background: var(--vx-surface);
  border-radius: 4px; padding: 1px 4px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  white-space: nowrap; width: fit-content; margin: 0 auto;
}
.cal_col.dragover { background: rgba(0,82,146,.06); }
/* Veto-luonti: maalattu uusi aikavali (New Booking esitaytettyna). */
.cal_slot { cursor: cell; }
.cal_block_ghost.cal_block_create {
  background: var(--vx-primary, #005292); opacity: .55;
  outline: 2px dashed #fff; border-radius: 4px;
}

/* Live-lohkot (08 Bookings/Search): ei raahausta (ei oikeaa reschedule-
   endpointtia + resourceType-mappaus tuntematon toistaiseksi), vain klikkaus. */
.cal_block.cal_block_live { cursor: pointer; }
.cal_block.cal_block_live:hover { background: var(--vx-blue-dark); }
/* Confidential-varaus tavalliselle kayttajalle (rights<128): ei otsikkoa/
   kuvausta, vain "Varattu" + aika, ei klikattavissa. */
.cal_block.cal_block_confidential {
  background: repeating-linear-gradient(135deg, var(--vx-muted), var(--vx-muted) 6px, #576270 6px, #576270 12px);
  cursor: default; box-shadow: none;
}
.cal_block.cal_block_confidential:hover { background: repeating-linear-gradient(135deg, var(--vx-muted), var(--vx-muted) 6px, #576270 6px, #576270 12px); }

/* Nakymanvaihto (Day / Week / Month) */
.cal_viewtoggle {
  display: inline-flex; align-items: stretch;
  height: var(--vx-control-sm);
  border: 1px solid var(--vx-field-border); border-radius: var(--vx-radius-md); overflow: hidden;
}
.cal_viewbtn {
  appearance: none; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--vx-control-sm); padding: 0 12px;
  font-size: 12px; font-weight: 600; color: var(--vx-navy);
  cursor: pointer; background: var(--vx-surface);
  border: none; border-right: 1px solid var(--vx-line); border-radius: 0;
}
.cal_viewbtn:last-child { border-right: none; }
.cal_viewbtn:hover { background: rgba(var(--vx-primary-rgb),.06); }
.cal_viewbtn.active { background: var(--vx-blue); color: var(--vx-text-inverse); }
.cal_viewbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--vx-primary); z-index: 1; }

/* 6 kk -nakyma (ylapalkki) */
.cal_sixmo {
  display: flex; gap: 8px; overflow-x: auto;
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--vx-line); border-radius: 10px;
  background: var(--vx-surface); box-shadow: var(--vx-shadow);
  min-height: 168px;
}
.cal6_month {
  flex: 0 0 168px;
  width: 168px;
  max-width: 168px;
  box-sizing: border-box;
}
.cal6_title {
  font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-navy);
  text-align: center; margin-bottom: 6px; letter-spacing: .02em;
  width: 168px; max-width: 168px; box-sizing: border-box;
}
.cal6_table {
  width: 168px; max-width: 168px;
  border-collapse: collapse; table-layout: fixed;
  box-sizing: border-box;
}
.cal6_hdr, .cal6_wk { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-blue); text-align: center; padding: 2px 0; }
.cal6_hdr.sun { color: var(--vx-red); }
.cal6_wk { opacity: .65; width: 20px; }
.cal6_day { text-align: center; padding: 1px 0; width: 18px; }
.cal6_day .d {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  font-size: var(--vx-fs-xs); line-height: 1; color: var(--vx-text); font-weight: 400;
}
.cal6_day .d:hover { background: var(--vx-primary-soft); }
.cal6_day .d.sun { color: var(--vx-red); }
.cal6_day .d.booked { font-weight: 800; color: var(--vx-navy); }
.cal6_day .d.sel { box-shadow: inset 0 0 0 2px var(--vx-red); font-weight: 700; }
.cal6_day .d.today:not(.sel) { box-shadow: inset 0 0 0 1px var(--vx-blue); }
.cal6_day .d.empty { cursor: default; visibility: hidden; }
.cal6_day .d.empty:hover { background: none; }
.cal_sixmobtn { border-left: 1px solid var(--vx-line) !important; min-width: 42px; }

/* 6 kk hover: My records -popup */
.cal6_pop {
  position: fixed; z-index: 320; display: none;
  min-width: 420px; max-width: min(720px, calc(100vw - 16px));
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 10px;
  box-shadow: 0 10px 32px rgba(16, 58, 107, .18);
  pointer-events: none;
}
.cal6_pop_title {
  padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--vx-navy);
  border-bottom: 1px solid var(--vx-line); background: #f8fafc;
  border-radius: 10px 10px 0 0;
}
.cal6_pop_load, .cal6_pop_empty { padding: 14px; font-size: 12px; color: var(--vx-muted); }
.cal6_pop_scroll { max-height: 220px; overflow: auto; }
.cal6_pop_table { width: 100%; border-collapse: collapse; font-size: var(--vx-fs-xs); }
.cal6_pop_table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--vx-surface); text-align: left; font-weight: 700; color: var(--vx-navy);
  padding: 8px 10px; border-bottom: 1px solid var(--vx-line); white-space: nowrap;
}
.cal6_pop_table td {
  padding: 7px 10px; border-bottom: 1px solid #f0f3f7; color: var(--vx-text);
  vertical-align: top; line-height: 1.35;
}
.cal6_pop_table tr:last-child td { border-bottom: none; }
.cal6_pop_id { font-weight: 700; color: var(--vx-blue); white-space: nowrap; }
.cal6_pop_res { min-width: 120px; }
.cal6_pop_resname { display: block; margin-bottom: 3px; }
.cal6_pop_ic {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; width: 18px; height: 18px; margin-right: 4px;
  color: var(--vx-red);
}
.cal6_pop_ic svg { width: 16px; height: 16px; stroke: currentColor; }
.cal6_pop_badge {
  position: absolute; top: -4px; right: -5px;
  min-width: 12px; height: 12px; padding: 0 2px;
  border-radius: 8px; background: var(--vx-red); color: var(--vx-text-inverse);
  font-size: 8px; font-weight: 700; line-height: 12px; text-align: center;
}

/* Resurssivalitsin (viikko/kk: yksi resurssi) */
.cal_resourcepick { flex: 1; max-width: 640px; display: flex; align-items: center; gap: 12px; }
.cal_resourcelabel { font-size: 12px; font-weight: 700; color: var(--vx-muted); letter-spacing: .03em; white-space: nowrap; }
.cal_resourcesel { min-width: 220px; }

/* ==========================================================================
   VERTIKAALINEN KALENTERI (viikko/kk, yksi resurssi)
   Paivat riveina, kellonajat (07-24) sarakkeina.
   ========================================================================== */
.calv_wrap { border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-surface); box-shadow: var(--vx-shadow); overflow: auto; max-height: calc(100vh - 200px); }
.calv { display: inline-block; min-width: 100%; }

.calv_head { display: flex; position: sticky; top: 0; z-index: 5; background: var(--vx-surface-sunk); border-bottom: 1px solid var(--vx-line); }
.calv_corner { flex-shrink: 0; border-right: 1px solid var(--vx-line); }
.calv_hours { display: flex; flex-shrink: 0; }
.calv_hour { text-align: center; font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); padding: 8px 0; border-right: 1px solid var(--vx-border); box-sizing: border-box; }

.calv_body { display: block; }
.calv_row { display: flex; border-bottom: 1px solid var(--vx-border); }
.calv_row.weekend { background: var(--vx-surface-alt); }
.calv_row.today { background: var(--vx-primary-soft); }
.calv_datecell {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-right: 1px solid var(--vx-line); box-sizing: border-box;
}
.calv_dow { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); width: 30px; }
.calv_date { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.calv_row.weekend .calv_date { color: var(--vx-danger); }
.calv_row.today .calv_date, .calv_row.today .calv_dow { color: var(--vx-blue); }

.calv_track { position: relative; flex-shrink: 0; display: flex; }
.calv_cell { border-right: 1px solid var(--vx-border); box-sizing: border-box; }
.calv_free { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: var(--vx-fs-xs); color: var(--vx-text-muted); font-weight: 600; letter-spacing: .04em; }

.calv_block {
  position: absolute; top: 3px; bottom: 3px; left: 0;
  background: var(--vx-blue); color: var(--vx-text-inverse); border-radius: 5px;
  padding: 2px 6px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,82,146,.4); z-index: 2;
}
.calv_block:hover { background: var(--vx-blue-dark); }
.calv_block_host { font-size: var(--vx-fs-xs); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calv_block_desc { font-size: var(--vx-fs-xs); opacity: .9; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   HOME / DASHBOARD
   ========================================================================== */
.home_layout { display: flex; gap: 20px; align-items: flex-start; }
.home_main { flex: 1.7; min-width: 0; }
.home_mid { flex: 1; min-width: 250px; }
.home_ads { flex: 1.35; min-width: 320px; }
.home_side { flex: 1.05; min-width: 280px; display: flex; flex-direction: column; }
.home_col_discover { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 16px; }
.home_main_row { display: flex; gap: 20px; align-items: flex-start; }
.home_notifications { flex: 1.2; min-width: 0; }
.home_lunch { flex: 1; min-width: 0; }

/* Section labels -> selkea hierarkia */
.home_sectionlabel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-muted); margin: 0 0 10px; }
/* Vali edellisen osion ja seuraavan otsikon valiin; ensimmainen otsikko kiinni ylareunaan */
.home_main .home_sectionlabel, .home_mid .home_sectionlabel { margin-top: 26px; }
.home_main > .home_sectionlabel:first-child, .home_mid > .home_sectionlabel:first-child { margin-top: 0; }
/* Toiston valit + Discover-laatikoiden tiiviys */
.home_main .home_sectionlabel_muted { margin-top: 26px; }
.home_collap { margin-bottom: 10px; }
/* Adverts oikealla: kaksi korttia vierekkain */
.home_ads .home_campaigns { margin-bottom: 0; }
.home_ads .home_camp_row { grid-template-columns: 1fr 1fr; gap: 12px; }
.home_ads .home_camp_img { height: 78px; font-size: 36px; }
.home_sectionlabel_muted { color: #aeb6c2; }

/* Hero (paatoiminto-vyohyke) */
.home_hero {
  border-radius: 14px; padding: 28px 30px; margin-bottom: 22px;
  /* Sininen gradientti puoliläpinäkyvänä taustakuvan päällä -> kuva näkyy hämärästi (kuten tuotannossa) */
  background:
    linear-gradient(120deg, rgba(0,119,204,.86) 0%, rgba(30,67,121,.90) 70%, rgba(16,57,112,.94) 100%),
    url("assets/hero-bg.png") center right / cover no-repeat,
    #103970;
  position: relative; overflow: hidden;
}
.home_hero::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.home_hero_inner { position: relative; z-index: 1; }
.home_hero_text { color: var(--vx-text-inverse); font-size: 26px; font-weight: 700; }
.home_hero_next { color: rgba(255,255,255,.9); font-size: 13px; margin-top: 8px; }
.home_hero_next b { font-weight: 700; }
.home_hero_actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.home_cta svg { width: 17px; height: 17px; stroke: currentColor; margin-right: 4px; vertical-align: -3px; }
.btn-hero { background: rgba(255,255,255,.14); color: var(--vx-text-inverse); border: 1px solid rgba(255,255,255,.45); }
.btn-hero:hover { background: rgba(255,255,255,.24); }

/* Ilmoituspillerit (sekundaarinen) */
.home_notifstrip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.home_pill { display: flex; align-items: center; gap: 10px; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 10px; padding: 8px 10px 8px 12px; box-shadow: var(--vx-shadow); }
.home_pill svg { width: 17px; height: 17px; stroke: var(--vx-blue); flex-shrink: 0; }
.home_pill span { font-size: 12px; color: var(--vx-text); }

/* Discover-sarake on visuaalisesti kevyempi (tertiaarinen) */
.home_col_discover .vx-card { opacity: .96; }
.home_col_discover .home_tutorials, .home_col_discover .home_ad, .home_col_discover .home_update { font-size: 95%; }

/* Notifications */
.home_notif { padding: 14px 18px; }
.home_notif_row { display: flex; align-items: center; gap: 12px; }
.home_notif_ic svg { width: 20px; height: 20px; stroke: var(--vx-blue); }
.home_notif_label { flex: 1; font-size: 13px; color: var(--vx-text); }

/* Block head */
.home_block_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.home_block_title { font-size: 14px; font-weight: 700; color: var(--vx-navy); }

/* Events */
.home_event { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--vx-line); }
.home_event:first-of-type { border-top: none; }
.home_event_img { width: 110px; height: 72px; border-radius: 8px; background: linear-gradient(135deg,#cdd9ea,#9fb4d4); display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.home_event_body { flex: 1; min-width: 0; }
.home_event_name { font-size: 14px; font-weight: 700; color: var(--vx-navy); }
.home_event_date { font-size: 12px; color: var(--vx-muted); margin: 2px 0; }
.home_event_desc { font-size: 12px; color: var(--vx-muted); }

/* Lunch */
.home_lunchcard { padding: 18px 20px; }
.home_lunch_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.home_lunch_title { font-size: 16px; font-weight: 700; color: var(--vx-navy); }
.home_lunch_sub { font-size: 12px; color: var(--vx-blue); }
.home_lunch_head .home_lunch_sub { margin-bottom: 0; }
.home_lunch_toggle { display: inline-flex; border: 1px solid var(--vx-field-border); border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.home_lunch_tgbtn { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); padding: 5px 11px; cursor: pointer; }
.home_lunch_tgbtn:hover { color: var(--vx-blue); }
.home_lunch_tgbtn.active { background: var(--vx-blue); color: var(--vx-text-inverse); }
.home_lunch_empty { font-size: 13px; color: var(--vx-muted); }
.home_lunch_dayhead { font-size: 13px; font-weight: 700; color: var(--vx-navy); margin: 14px 0 6px; }
.home_dishlist { margin: 0; padding-left: 18px; }
.home_dish { font-size: 12px; color: var(--vx-text); line-height: 1.5; margin-bottom: 3px; }

/* Provider offering -kortti + modaali (Home) */
.home_provcard { padding: 18px 20px; }
.home_prov_lead { font-size: 12px; color: var(--vx-muted); margin: 0 0 12px; }
.home_prov_row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.home_prov_sel { flex: 1; min-width: 150px; }
.home_prov_empty { font-size: 13px; color: var(--vx-muted); }

.home_provmodal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 16px; overflow-y: auto; }
.home_provmodal_backdrop { position: fixed; inset: 0; background: rgba(16,28,48,.45); }
.home_provmodal_dialog { position: relative; width: 640px; max-width: 100%; background: var(--vx-surface);
  border-radius: 12px; box-shadow: 0 20px 60px rgba(16,28,48,.35); }
.home_provmodal_body { padding: 22px 24px 24px; }
.home_prov_loading { font-size: 13px; color: var(--vx-muted); }
.home_provmodal_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.home_prov_h_name { font-size: 20px; font-weight: 700; color: var(--vx-navy); }
.home_prov_h_status { font-size: 12px; font-weight: 600; color: var(--vx-blue); }
.home_provmodal_headbtns { display: flex; gap: 8px; flex-shrink: 0; }
.home_prov_x { padding: 6px 10px; }
.home_prov_h_desc { font-size: 13px; color: var(--vx-text); margin: 4px 0 10px; }
.home_prov_meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--vx-muted); margin-bottom: 8px; }
.home_prov_meta b { color: var(--vx-navy); font-weight: 700; }
.home_prov_h_note { font-size: 12px; color: var(--vx-muted); font-style: italic; margin-bottom: 12px; }
.home_prov_groups { margin-top: 8px; }
.home_prov_group { margin-bottom: 18px; }
.home_prov_ghead { font-size: 14px; font-weight: 700; color: var(--vx-navy); padding-bottom: 6px;
  border-bottom: 1px solid var(--vx-field-border); margin-bottom: 8px; }
.home_prov_prod { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--vx-border); }
.home_prov_pmain { flex: 1; min-width: 0; }
.home_prov_pname { font-size: 13px; font-weight: 600; color: var(--vx-navy); }
.home_prov_pdesc { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.home_prov_pserv { font-size: 12px; color: var(--vx-muted); white-space: nowrap; }
.home_prov_servic { margin-right: 3px; }
.home_prov_pprice { font-size: 13px; font-weight: 700; color: var(--vx-navy); white-space: nowrap; }
.home_prov_order { margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--vx-field-border); }
.home_prov_order_title { font-size: 14px; font-weight: 700; color: var(--vx-navy); margin-bottom: 10px; }
.home_prov_order_lead { font-size: 12px; color: var(--vx-muted); margin-bottom: 8px; }
.home_prov_order_empty { font-size: 13px; color: var(--vx-muted); margin-bottom: 10px; }
.home_prov_bklist { display: flex; flex-direction: column; gap: 8px; }
.home_prov_bkbtn { justify-content: flex-start; text-align: left; }
body.home_modal_open { overflow: hidden; }

/* Provider offering -modaalin tulostus: piilota kaikki visibilityllä (luotettavampi
   kuin display:none kun modaali on position:fixed overlay) ja näytä vain modaalin
   sisältö absoluuttisesti sivun ylälaidasta -> printtaa monelle sivulle. */
@media print {
  body.home_printing { overflow: visible !important; background: #fff !important; }
  body.home_printing * { visibility: hidden !important; }
  body.home_printing #homeProvBody, body.home_printing #homeProvBody * { visibility: visible !important; }
  body.home_printing #homeProvModal {
    position: absolute !important; inset: 0 !important; padding: 0 !important;
    overflow: visible !important; display: block !important; background: #fff !important; z-index: auto !important;
  }
  body.home_printing .home_provmodal_backdrop { display: none !important; }
  body.home_printing .home_provmodal_dialog {
    position: static !important; width: auto !important; max-width: none !important;
    box-shadow: none !important; border-radius: 0 !important;
  }
  body.home_printing .home_provmodal_body { padding: 0 !important; }
  body.home_printing #homeProvBody {
    position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important;
    width: 100% !important; padding: 12px 16px !important; box-sizing: border-box !important;
  }
  body.home_printing .home_provmodal_headbtns { display: none !important; }
  body.home_printing .home_prov_order { display: none !important; }
  body.home_printing .home_prov_prod { break-inside: avoid; }
  body.home_printing .home_prov_group { break-inside: avoid-page; }
  @page { margin: 12mm; }
}

/* Tutorials */
.home_tutorials { padding: 18px 20px; }
.home_tut_lead { font-size: 12px; color: var(--vx-muted); margin: 4px 0 14px; }
.home_tut_featured { position: relative; height: 110px; border-radius: 8px; background: linear-gradient(135deg,#16294a,#22416e); display: flex; align-items: center; justify-content: center; }
.home_tut_featured_logo { color: var(--vx-text-inverse); font-weight: 700; letter-spacing: .2em; font-size: 18px; opacity: .85; }
.home_tut_play { position: absolute; width: 34px; height: 34px; }
.home_tut_play svg { width: 34px; height: 34px; }
.home_tut_featured_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); margin-top: 10px; }
.home_tut_list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.home_tut_row { display: flex; gap: 12px; align-items: center; }
.home_tut_thumb { width: 64px; height: 40px; border-radius: 6px; background: linear-gradient(135deg,#16294a,#22416e); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home_tut_thumb svg { width: 20px; height: 20px; }
.home_tut_title { font-size: 13px; font-weight: 600; color: var(--vx-navy); }
.home_tut_sub { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 2px; }

/* Latest update */
.home_update { padding: 16px 20px; }
.home_update_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); letter-spacing: .02em; }
.home_update_date { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin: 3px 0 10px; }
.home_update_label { font-size: 12px; font-style: italic; color: var(--vx-text); margin-top: 8px; }
.home_update_list { margin: 4px 0 0; padding-left: 18px; }
.home_update_list li { font-size: 12px; color: var(--vx-text); margin-bottom: 2px; }

/* Ads */
/* Home: pienennettavat Discover-laatikot */
.home_collap { padding: 0; overflow: hidden; }
.home_collap_head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; cursor: pointer; user-select: none; }
.home_collap_head:hover { background: var(--vx-primary-soft); }
.home_collap_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.home_collap_arrow { font-size: 14px; color: var(--vx-muted); transition: transform .18s; }
.home_collap_body { padding: 0 16px 16px; }
.home_collap.collapsed .home_collap_body { display: none; }
.home_collap.collapsed .home_collap_arrow { transform: rotate(-90deg); }

/* Home: Your messages */
.home_messages { padding: 14px 16px 6px; margin-bottom: 4px; }
.home_msg { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--vx-line); }
.home_msg:first-of-type { border-top: none; }
.home_msg_avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--vx-blue); color: var(--vx-text-inverse); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.home_msg_main { min-width: 0; flex: 1; }
.home_msg_top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home_msg_from { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.home_msg_time { font-size: var(--vx-fs-xs); color: var(--vx-muted); flex-shrink: 0; }
.home_msg_subject { font-size: 12.5px; color: var(--vx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home_msg.unread .home_msg_subject { font-weight: 600; color: var(--vx-navy); }
.home_msg_dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vx-blue); flex-shrink: 0; }
.home_msg_empty { color: var(--vx-muted); font-size: 13px; padding: 12px 4px; }
.home_event_empty { color: var(--vx-muted); font-size: 13px; padding: 12px 4px; }

/* Home: Offers & announcements (nakyva vaakakorttiosio) */
.home_campaigns { margin-bottom: 20px; }
.home_camp_row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.home_camp_card { display: flex; flex-direction: column; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.home_camp_card:hover { box-shadow: 0 8px 24px rgba(var(--vx-primary-rgb),.14); transform: translateY(-2px); }
.home_camp_img { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 44px; background: linear-gradient(135deg, #eaf2fc, #fbf7ee); }
.home_camp_body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.home_camp_provider { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-blue); margin-bottom: 4px; }
.home_camp_title { font-size: 14px; font-weight: 700; color: var(--vx-navy); line-height: 1.3; margin-bottom: 5px; }
.home_camp_text { font-size: 12px; color: var(--vx-text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.home_camp_foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.home_camp_cta { font-size: 12px; font-weight: 700; color: var(--vx-navy); }
.home_camp_price { font-size: 15px; font-weight: 800; color: var(--vx-blue); white-space: nowrap; }

.home_ad { padding: 0; overflow: hidden; }
.home_ad_provider { font-size: 12px; font-weight: 700; color: var(--vx-blue); padding: 12px 16px 0; display: flex; align-items: center; gap: 6px; }
.home_ad_edit svg { width: 13px; height: 13px; stroke: var(--vx-muted); }
.home_ad_img { height: 150px; background: linear-gradient(135deg,#3a2f1c,#6b5436); display: flex; align-items: center; justify-content: center; font-size: 54px; margin: 12px 0; }
.home_ad_title { font-size: 15px; font-weight: 700; color: var(--vx-navy); padding: 0 16px; line-height: 1.3; }
.home_ad_body { font-size: 12px; color: var(--vx-text); padding: 8px 16px; line-height: 1.5; }
.home_ad_cta { font-size: 13px; font-weight: 700; color: var(--vx-navy); padding: 4px 16px 0; }
.home_ad_price { font-size: 16px; font-weight: 700; color: var(--vx-blue); padding: 2px 16px 18px; }

@media (max-width: 1100px) {
  .home_layout { flex-wrap: wrap; }
  .home_col_tutorials, .home_col_ads { flex-basis: 45%; }
}
@media (max-width: 760px) {
  .home_main_row { flex-direction: column; }
  .home_col_tutorials, .home_col_ads { flex-basis: 100%; }
}

/* Zoom-kontrollit */
.cal_zoom { position: fixed; display: flex; gap: 8px; z-index: 40; }
.cal_zoom_v { right: 26px; bottom: 78px; flex-direction: column; }
.cal_zoom_h { right: 26px; bottom: 26px; flex-direction: row; }
.cal_zoombtn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--vx-blue); color: var(--vx-text-inverse); font-size: 20px; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,82,146,.4);
  display: flex; align-items: center; justify-content: center;
}
.cal_zoombtn:hover { background: var(--vx-blue-dark); }

/* ==========================================================================
   MOBIILI-PWA - Home / Landing (proto)
   ========================================================================== */
.body_mobile { background: #c3cdda; }
/* JUURISYY LOYTYI 15.7.2026 (Vesun testi yksityisessa Safari-valilehdessa,
   ei siis mika laitteen/SW-cache-ongelma): kyse EI ollutkaan dvh:n
   paivittymisesta, vaan siita etta 100dvh/visualViewport-pohjainen korkeus
   mitattiin VAARAAN aikaan (esim. juuri silla hetkella kun Safarin
   osoiterivi/tyokalurivi oli hetkellisesti pienemmassa tilassa) ja jai
   sitten "jumiin" liian pieneksi kun Safarin oma UI-kroomi asettui - jatti
   tyhjaa harmaata tilaa alanavigaation ja Safarin omaan tyokaluriviin
   valiin. Ratkaisu: position:fixed + inset:0 seuraa Safarissa AINA elavaa
   nakyvaa viewportia automaattisesti (ei staattinen mittaus kertaalleen),
   joten ei tarvita dvh:ta EIKA JS-mittausta lainkaan. */
.mphone {
  position: fixed; inset: 0; margin: 0 auto; width: 100%; max-width: 430px;
  background: #f3f5f9;
  display: flex; flex-direction: column; overflow: hidden;
  /* Statusbar on black-translucent (ks. mobile-home.html) -> varataan tila
     ylareunaan etteivat lapset (banner/appbar) mene sen alle/paalle. */
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 18px 60px rgba(var(--vx-primary-rgb),.28);
}
.mphone > .proto-banner {
  flex: 0 0 auto; position: static; transform: none; top: auto; left: auto;
  width: auto; max-width: none; border-radius: 0; pointer-events: auto;
  border: none; border-bottom: 1px solid rgba(var(--vx-warning-rgb),.40); box-shadow: none;
}
.mphone > .proto-banner.live { border-bottom-color: rgba(var(--vx-success-rgb),.35); }
@media (min-width: 480px) {
  .body_mobile { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 18px 0; }
  /* Desktop-esikatselu: ei tarvita position:fixed-temppua (ei mobiiliselaimen
     UI-kroomia jota jahdata), palautetaan normaali sijoittelu keskitettyna. */
  .mphone { position: relative; inset: auto; height: calc(100vh - 60px); min-height: 600px; border-radius: 30px; border: 9px solid #11141b; padding-top: 0; }
}

/* App bar */
.m-appbar {
  flex: 0 0 auto; height: 54px; background: var(--vx-surface); border-bottom: 1px solid var(--vx-line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px; z-index: 5;
}
.m-iconbtn {
  width: 38px; height: 38px; border: none; background: none; cursor: pointer;
  color: var(--vx-navy); display: flex; align-items: center; justify-content: center; border-radius: 9px;
}
.m-iconbtn:hover { background: #f1f4f9; }
.m-iconbtn svg { width: 22px; height: 22px; }
.m-wordmark { font-size: 19px; font-weight: 800; letter-spacing: 2px; color: var(--vx-navy); }
.m-wordmark span { color: var(--vx-blue); }

/* Yla-appbarin oikea puoli (Viestit + Profiili) - oma wrapperi eika suoraan
   .m-appbarin lapsi, jotta wordmark pysyy samassa kohdassa kuin ennen
   Viestit-napin lisaamista (15.7.2026, Viestit-ominaisuus mobiiliin -
   "ylapalkki on oikea paikka, koska sinne voi mennä mistä vaan"). */
.m-appbar-right { display: flex; align-items: center; gap: 2px; }
.m-appbar-msgbtn { position: relative; }
.m-appbar-badge {
  position: absolute; top: 3px; right: 3px; background: var(--vx-red); color: var(--vx-text-inverse);
  font-size: var(--vx-fs-xs); font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1;
  border: 1.5px solid #fff;
}
.m-appbar-badge[hidden] { display: none; }

/* Stage (scroll) */
.m-stage { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Hero */
.m-hero {
  position: relative; padding: 20px 18px 22px; color: var(--vx-text-inverse);
  background: linear-gradient(135deg, #0077cc 0%, #1e4379 55%, #103970 100%);
  display: flex; justify-content: space-between; align-items: flex-start; overflow: hidden;
}
.m-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .18;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.m-hero-text { position: relative; z-index: 1; }
.m-hero-hi { font-size: 15px; opacity: .92; }
.m-hero-name { font-size: 23px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.m-hero-date { font-size: 12.5px; opacity: .85; margin-top: 8px; }
.m-hero-more { position: relative; z-index: 1; color: var(--vx-text-inverse); }
.m-hero-more:hover { background: rgba(255,255,255,.16); }
.m-hero-more svg { width: 20px; height: 20px; }

/* Body */
.m-body { padding: 16px 14px 24px; display: flex; flex-direction: column; gap: 18px; }
.m-card {
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 14px;
  padding: 15px; box-shadow: var(--vx-shadow);
}
.m-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--vx-muted); text-transform: uppercase; }

/* Quick actions */
.m-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: -4px; }
.m-quickbtn {
  border: 1px solid var(--vx-line); background: var(--vx-surface); border-radius: 14px; cursor: pointer;
  padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: inherit; box-shadow: var(--vx-shadow);
}
.m-quickbtn:active { transform: scale(.96); }
.m-quickic {
  width: 42px; height: 42px; border-radius: 12px; background: #eaf1fc; color: var(--vx-blue);
  display: flex; align-items: center; justify-content: center;
}
.m-quickic svg { width: 21px; height: 21px; }
.m-quickbtn.is-primary .m-quickic { background: var(--vx-blue); color: var(--vx-text-inverse); }
.m-quicklabel { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-text); text-align: center; line-height: 1.15; }

/* Next meeting card */
.m-next { border-left: 4px solid var(--vx-blue); }
.m-next-top { display: flex; align-items: center; justify-content: space-between; }
.m-pill { font-size: var(--vx-fs-xs); font-weight: 800; padding: 3px 9px; border-radius: 20px; background: var(--vx-border); color: var(--vx-muted); }
/* Statuspillit referenssi-PWA:n varein (taytetyt, valkoinen teksti). */
.m-pill--ok { background: #35a35f; color: var(--vx-text-inverse); }       /* CONFIRMED - vihrea */
.m-pill--ready { background: #2f7bf0; color: var(--vx-text-inverse); }     /* READY - sininen */
.m-pill--new { background: #e53935; color: var(--vx-text-inverse); }       /* NEW / MODIFIED - punainen */
.m-pill--closed { background: #9aa3ad; color: var(--vx-text-inverse); }    /* CLOSED - harmaa */
.m-next-room { font-size: 17px; font-weight: 700; color: var(--vx-navy); margin: 8px 0 10px; }
.m-next-rows { display: flex; flex-direction: column; gap: 7px; }
.m-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--vx-text); }
.m-row svg { width: 17px; height: 17px; color: var(--vx-muted); flex: 0 0 auto; }
.m-next-actions { display: flex; gap: 10px; margin-top: 14px; }
.m-btn {
  flex: 1; border: none; border-radius: 10px; padding: 11px; font-family: inherit; font-size: 13.5px;
  font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.m-btn svg { width: 17px; height: 17px; }
.m-btn--primary { background: var(--vx-blue); color: var(--vx-text-inverse); }
.m-btn--primary:active { background: var(--vx-blue-dark); }
.m-btn--ghost { background: var(--vx-surface); color: var(--vx-navy); border: 1px solid var(--vx-field-border); }

/* Blocks (Tanaan, Pikavaraus) */
.m-block { display: flex; flex-direction: column; gap: 10px; }
.m-blockhead { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.m-blockhead h3 { margin: 0; font-size: 15px; color: var(--vx-navy); }
.m-blockhead a { font-size: 12.5px; font-weight: 600; color: var(--vx-link); display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.m-blockhead a svg { width: 15px; height: 15px; }

/* Today list */
.m-list { padding: 4px 6px; }
/* Paivaryhmaotsikko bookings-listassa (valitusta pvm:sta eteenpain, monta paivaa). */
.m-daygroup { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--vx-muted);
  text-transform: uppercase; padding: 14px 6px 6px; }
.m-listrow { display: flex; align-items: center; gap: 12px; padding: 11px 8px; text-decoration: none; border: 0; border-bottom: 1px solid var(--vx-line); background: none; }
.m-listrow:last-child { border-bottom: none; }
.m-time { font-size: 14px; font-weight: 800; color: var(--vx-navy); min-width: 44px; }
/* .m-time toimii myos ikonislotina (esim. New bookingin huonerivi) - SVG:lle
   on PAKKO antaa mitat, muuten selain renderoi sen oletuskoossa (~300x150)
   ja rikkoo koko rivin/sivun leveyden (loydos 15.7.2026). */
.m-time svg { width: 20px; height: 20px; }
.m-listmain { flex: 1 1 auto; min-width: 0; }
.m-listtitle { font-size: 14px; font-weight: 600; color: var(--vx-text); }
/* .m-listtitle voi sisaltaa ikonin (esim. Calendar-valilehden lukko "Varattu"-
   riveilla) - sama SVG-mitoitusongelma kuin .m-time:ssa yllä. */
.m-listtitle svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.m-listsub { font-size: 12px; color: var(--vx-muted); margin-top: 1px; }
/* Meta-rivi: record-numero + details-kuvakkeet vierekkain vasemmalla -> lista pysyy
   kolmirivisena (#id + kuvakkeet / resurssi / kuvaus). */
.m-listmeta { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 1px; }
.m-listmeta .m-recnum { margin-bottom: 0; }
/* Details-kuvakkeet listarivilla (📎/🛒/👥) - desktopin bk_badgeic pienennettyna. */
.m-listbadges { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
/* Kuvake + luku VIEREKKAIN (Vesku 17.7.: pallo pois kuvakkeen paalta) - luku
   pieni punainen pilli kuvakkeen oikealla puolella, melkein kiinni (gap 1px). */
.m-detic { display: inline-flex; align-items: center; gap: 1px; color: var(--vx-muted); }
.m-detic svg { width: 16px; height: 16px; stroke: var(--vx-navy); }
.m-detn { background: var(--vx-red); color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); font-weight: 700;
  line-height: 14px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 7px; text-align: center; }
.m-chev { color: var(--vx-muted); }
.m-chev svg { width: 18px; height: 18px; }
.m-empty { color: var(--vx-muted); font-size: 13px; text-align: center; padding: 14px 0; }

/* Quick-book rooms (horizontal scroll) */
.m-rooms { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; }
.m-roomcard {
  flex: 0 0 auto; width: 150px; scroll-snap-align: start; text-align: left;
  border: 1px solid var(--vx-line); background: var(--vx-surface); border-radius: 14px; padding: 13px;
  cursor: pointer; font-family: inherit; box-shadow: var(--vx-shadow);
}
.m-roomcard:active { transform: scale(.97); }
.m-roomname { font-size: 14px; font-weight: 700; color: var(--vx-navy); }
.m-roommeta { font-size: 12px; color: var(--vx-muted); margin: 3px 0 9px; }
.m-roomstatus { font-size: var(--vx-fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--vx-border); color: var(--vx-muted); }
.m-roomstatus.is-free { background: #e3f5ec; color: #1f9d63; }

/* Lunch */
.m-lunch { display: flex; gap: 13px; align-items: center; }
.m-lunchic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: var(--vx-warning-bg); color: var(--vx-warning); display: flex; align-items: center; justify-content: center; }
.m-lunchic svg { width: 22px; height: 22px; }
.m-lunchmenu { font-size: 14px; font-weight: 600; color: var(--vx-text); margin: 3px 0 2px; }
.m-lunchtime { font-size: 12px; color: var(--vx-muted); }

/* Notifications */
.m-notifs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-notif {
  position: relative; border: 1px solid var(--vx-line); background: var(--vx-surface); border-radius: 12px;
  padding: 13px; display: flex; align-items: center; gap: 9px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--vx-text); box-shadow: var(--vx-shadow);
}
.m-notif svg { width: 19px; height: 19px; color: var(--vx-navy); }
.m-badge { margin-left: auto; background: var(--vx-red); color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); min-width: 19px; height: 19px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

.m-foot { text-align: center; color: var(--vx-muted); font-size: var(--vx-fs-xs); padding: 6px 0 2px; }

/* ---- VIERAAT: Home-sisaankaynti + sheet (staff-puoli) --------------------- */
/* Home-kortti "Vieraat tanaan" (nakyy vain visitor.manage-oikeudella). */
.m-visentry {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--vx-line); background: var(--vx-surface); border-radius: 14px; padding: 13px 14px;
  cursor: pointer; font-family: inherit; box-shadow: var(--vx-shadow);
}
.m-visentry:active { transform: scale(.99); }
.m-visentry-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--vx-info-bg);
  color: var(--vx-blue); display: flex; align-items: center; justify-content: center; }
.m-visentry-ic svg { width: 22px; height: 22px; }
.m-visentry-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m-visentry-txt b { font-size: 15px; color: var(--vx-navy); }
.m-visentry-sub { font-size: 12.5px; color: var(--vx-muted); }
.m-visentry .m-chev { margin-left: auto; }

/* Sheet: rajaus-palkki (host = "Omat vieraani"; reception = Kaikki/Omat) */
.m-visscope { display: flex; gap: 6px; margin-bottom: 12px; }
.m-visscope-btn { flex: 1 1 0; border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-surface);
  padding: 9px 8px; font-size: 13px; font-weight: 700; color: var(--vx-muted); cursor: pointer; }
.m-visscope-btn.is-active { background: var(--vx-navy); border-color: var(--vx-navy); color: var(--vx-text-inverse); }
.m-visscope--host { display: block; border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-surface);
  padding: 9px 12px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--vx-muted); }

/* Sheet: yhteenvetopalkki */
.m-vissum { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.m-vissum-cell { border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-surface); padding: 10px 6px;
  text-align: center; box-shadow: var(--vx-shadow); }
.m-vissum-cell b { display: block; font-size: 19px; font-weight: 800; color: var(--vx-navy); }
.m-vissum-cell span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .03em; color: var(--vx-muted);
  text-transform: uppercase; }

.m-viswalkin { width: 100%; margin-bottom: 14px; }

/* Vieraskortit */
.m-vislist { display: flex; flex-direction: column; gap: 12px; }
.m-viscard { border: 1px solid var(--vx-line); border-radius: 14px; background: var(--vx-surface); padding: 13px;
  box-shadow: var(--vx-shadow); }
.m-viscard.is-busy { opacity: .55; pointer-events: none; }
.m-vistop { display: flex; align-items: flex-start; gap: 11px; }
.m-visav { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--vx-navy);
  color: var(--vx-text-inverse); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.m-vismain { flex: 1 1 auto; min-width: 0; }
.m-visname { font-size: 15px; font-weight: 700; color: var(--vx-navy); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.m-vistag { font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--vx-blue); background: var(--vx-info-bg); border-radius: 6px; padding: 1px 6px; }
/* SC-17: vieras piilotti nimensa julkisilta pinnoilta (host/reception nakee silti). */
.m-visprivtag { font-size: var(--vx-fs-xs); margin-left: 2px; opacity: .8; }
.m-vismeta { font-size: 12.5px; color: var(--vx-muted); margin-top: 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.m-visright { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.m-vistime { font-size: 14px; font-weight: 800; color: var(--vx-navy); }
.m-vispill { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; background: var(--vx-border); color: var(--vx-muted); white-space: nowrap; }
    .m-vispill--pre_registered { background: var(--vx-border); color: var(--vx-text-muted); }
    .m-vispill--printed { background: var(--vx-primary-soft); color: var(--vx-blue); }
    .m-vispill--checked_in { background: #e3f5ec; color: #1f9d63; }
    .m-vispill--checked_out { background: #f1f0f0; color: #9aa3ad; }
.m-visactions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.m-visactions .m-btn { flex: 1 1 auto; min-width: 44%; text-decoration: none; }

/* SC-16 Slice 6: host <-> vieras -viestisaie */
.m-vismsgs { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.m-vismsg { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px;
  padding: 6px 9px; border-radius: 10px; background: var(--vx-bg, #f4f6f8); }
.m-vismsg--host { background: #e7f0ff; }
.m-vismsg-who { font-weight: 700; color: var(--vx-ink, #24303a); flex: 0 0 auto; }
.m-vismsg-text { color: var(--vx-ink, #24303a); flex: 1 1 auto; min-width: 0; }
.m-vismsg-time { color: var(--vx-muted, #7b8794); flex: 0 0 auto; font-size: var(--vx-fs-xs); }

/* Pikarekisterointi-lomake */
.m-visform { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.m-visformhead { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--vx-navy); }
.m-visformhead svg { width: 18px; height: 18px; color: var(--vx-blue); }
.m-visform .m-field { display: flex; flex-direction: column; gap: 4px; }
.m-visform .m-field span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .03em; color: var(--vx-muted);
  text-transform: uppercase; }
.m-visform .m-field input { font-size: 16px; padding: 10px 12px; border: 1px solid var(--vx-field-border);
  border-radius: var(--vx-radius-input); font-family: inherit; color: var(--vx-text); background: var(--vx-surface); }
.m-visform .m-field input:focus { outline: none; border-color: var(--vx-blue); }
.m-visformactions { display: flex; gap: 8px; margin-top: 4px; }

/* ---- VISITOR MANAGEMENT: aulapaate (desktop, visitors.html) --------------- */
.vm-wrap { padding: 16px 20px 40px; }
.vm-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
/* Pida tyokalupalkin napit saman korkuisina: ei tekstin rivitysta eika kutistumista,
   jolloin ikonilliset napit (Evacuation list / Pre-print all / Big event) eivat mene
   kahdelle riville. Nappi rivittyy kokonaisena, ei sen sisalto. */
.vm-filters .vx-select,
.vm-filters .vx-input,
.vm-filters .btn {
  height: var(--vx-control-sm);
  min-height: var(--vx-control-sm);
  box-sizing: border-box;
}
.vm-filters .btn { white-space: nowrap; flex: 0 0 auto; gap: 6px; }
.vm-datebtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--vx-field-border);
  background: var(--vx-surface); border-radius: var(--vx-radius-md); cursor: pointer; font: inherit; color: var(--vx-navy);
}
.vm-datebtn:hover { border-color: var(--vx-blue); }
.vm-datebtn svg { width: 18px; height: 18px; color: var(--vx-blue); }
.vm-datebtn-lbl { font-weight: 700; text-transform: capitalize; }
/* Suodatinvalikot tyokalupalkissa: .vx-select on width:100%, joka flex-rivilla
   venyttaa valikon koko rivin levyiseksi omalle rivilleen. Pakotetaan jarkeva
   leveys + ei kutistumista, jolloin ne istuvat inline muiden kontrollien kanssa. */
.vm-sel { min-width: 190px; width: auto; max-width: 240px; flex: 0 0 auto; }
.vm-selfbtn { text-decoration: none; }
/* Pakottaa toimintonapit omalle rivilleen .vm-filters-flexrivilla:
   rivi 1 = suodattimet (paiva/Today/valikot/skannaus), rivi 2 = toiminnot. */
.vm-filters .vm-break { flex-basis: 100%; width: 100%; height: 0; margin: 0; padding: 0; }
.vm-addbtn { display: inline-flex; align-items: center; gap: 6px; }
.vm-addbtn svg { width: 16px; height: 16px; }

.vm-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.vm-sumcell { border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-surface); padding: 12px 8px;
  text-align: center; box-shadow: var(--vx-shadow); }
.vm-sumcell b { display: block; font-size: 22px; font-weight: 800; color: var(--vx-navy); line-height: 1.1; }
.vm-sumcell span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--vx-muted);
  text-transform: uppercase; }
.vm-sumcell--printed b { color: var(--vx-blue); }
.vm-sumcell--in b { color: #1f9d63; }
.vm-sumcell--onsite b { color: #1f9d63; }
.vm-sumcell--wait b { color: #b07d1a; }
.vm-sumcell--out b { color: #9aa3ad; }

.vm-tablewrap { border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-surface); overflow: hidden;
  box-shadow: var(--vx-shadow); }
.vm-table { width: 100%; border-collapse: collapse; }
.vm-table thead th { text-align: left; font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--vx-muted); padding: 11px 14px; background: var(--vx-surface-sunk);
  border-bottom: 1px solid var(--vx-line); }
.vm-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--vx-line); vertical-align: middle;
  font-size: 13px; color: var(--vx-text); }
.vm-table tbody tr:last-child td { border-bottom: 0; }
.vm-table tbody tr:hover { background: #fafcff; }
.vm-row.is-busy { opacity: .5; pointer-events: none; }
/* Rivin taustavari-indikaatio (kuten vanha VM-EXE): valkoinen = ei saapunut,
   punainen = talossa (checked_in), vihrea = poistunut (checked_out). Pehmea
   savy + vasemman reunan aksentti, jotta pysyy luettavana. */
.vm-table tbody tr.vm-row--onsite { background: #fdeeee; box-shadow: inset 3px 0 0 #d64545; }
.vm-table tbody tr.vm-row--onsite:hover { background: #fbe4e4; }
.vm-table tbody tr.vm-row--left { background: #eaf7ee; box-shadow: inset 3px 0 0 #3fa060; }
.vm-table tbody tr.vm-row--left:hover { background: #dff1e5; }
.vm-c-time { white-space: nowrap; font-weight: 700; color: var(--vx-navy); }
.vm-vis { display: flex; align-items: center; gap: 10px; }
.vm-av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--vx-navy);
  color: var(--vx-text-inverse); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.vm-name { font-weight: 700; color: var(--vx-navy); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vm-sub { font-size: 12px; color: var(--vx-muted); }
.vm-walktag, .vm-infotag, .vm-notifytag { font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 6px; padding: 1px 6px; }
.vm-walktag { color: var(--vx-blue); background: var(--vx-info-bg); }
/* SC-04: iso tapahtuma -vieras (event) erottuu tavallisesta walk-inista. */
.vm-eventtag { color: #7a3ca8; background: #f0e6fb; }
.vm-infotag { color: #b07d1a; background: #fbf1dd; cursor: help; }
.vm-notifytag { color: #a11d5a; background: #fbe3ee; cursor: help; }
/* SC-17: vieras piilotti nimensa julkisilta pinnoilta (aula nakee silti). */
.vm-privtag { font-size: var(--vx-fs-xs); cursor: help; margin-left: 2px; opacity: .8; }
/* SC-11 (US-26): auto-uloskirjattu vieras erottuu oikeasta poistumisesta. */
.vm-autotag { font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 6px; padding: 1px 6px; color: #6b5b1a; background: #f3ecd2; cursor: help; }
/* SC-11 (US-24): kortti mitatoityy uloskirjauksessa (yliviivattu, himmea). */
.vm-badge--voided { text-decoration: line-through; color: var(--vx-muted); background: #f0f0f2; }
/* SC-11 (US-25): on-site roster -suodatin aktiivisena. */
.vm-onsitebtn.is-active { background: var(--vx-blue); color: var(--vx-text-inverse); border-color: var(--vx-blue); }
/* SC-04 (US-17): pika-check-in skannauskentta suodatinpalkissa. */
.vm-scanwrap { position: relative; display: inline-flex; align-items: center; }
.vm-scanwrap svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--vx-muted); pointer-events: none; }
.vm-scan { width: 240px; padding-left: 34px; }
/* SC-04: iso tapahtuma -massarekisterointimodaali. */
.vm-bulkmodal { width: min(560px, 94vw); text-align: left; }
.vm-bulkhint { font-size: 12.5px; color: var(--vx-muted); margin: 2px 0 12px; line-height: 1.5; }
.vm-bulktext { width: 100%; min-height: 160px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; resize: vertical; margin: 6px 0 12px; }
.vm-bulkfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.vm-bulkcount { font-size: 12.5px; font-weight: 700; color: var(--vx-navy); }
.vm-c-host { color: var(--vx-text); }
.vm-badge { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: var(--vx-navy);
  background: var(--vx-border); border-radius: 6px; padding: 2px 7px; }
.vm-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.vm-pill--pre_registered { background: var(--vx-border); color: var(--vx-text-muted); }
.vm-pill--printed { background: var(--vx-primary-soft); color: var(--vx-blue); }
.vm-pill--checked_in { background: #e3f5ec; color: #1f9d63; }
.vm-pill--checked_out { background: #f1f0f0; color: #9aa3ad; }
.vm-rowactions { display: flex; gap: 6px; justify-content: flex-end; }
.vm-rowactions .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.vm-rowactions .btn svg { width: 14px; height: 14px; }
.vm-empty { padding: 40px 16px; text-align: center; color: var(--vx-muted); font-size: 14px; }

.vm-form { border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-surface); padding: 16px;
  margin-bottom: 16px; box-shadow: var(--vx-shadow); }
.vm-formhead { font-size: 14px; font-weight: 800; color: var(--vx-navy); margin-bottom: 12px; }
.vm-formgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vm-field { display: flex; flex-direction: column; gap: 4px; }
.vm-field--wide { margin-top: 12px; }
.vm-field span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--vx-muted);
  text-transform: uppercase; }
.vm-field input, .vm-field select { font-size: 14px; padding: 8px 10px; border: 1px solid var(--vx-field-border);
  border-radius: 8px; font-family: inherit; color: var(--vx-text); background: var(--vx-surface); }
.vm-field input:focus, .vm-field select:focus { outline: none; border-color: var(--vx-blue); }
.vm-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--vx-text); }
.vm-formactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 900px) {
  .vm-summary { grid-template-columns: repeat(3, 1fr); }
  .vm-formgrid { grid-template-columns: repeat(2, 1fr); }
}

/* Badge-numero on nyt klikattava (reprint) */
.vm-badge { border: 0; cursor: pointer; font: inherit; }
.vm-badge[data-vm-badge] { font-family: ui-monospace, Menlo, Consolas, monospace; }
.vm-badge:hover { background: #e0e7f2; color: var(--vx-blue); }

/* ---- Badge-esikatselu (overlay) + tulostus ------------------------------- */
.vm-badgeoverlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center;
  justify-content: center; }
.vm-badgeoverlay__backdrop { position: absolute; inset: 0; background: rgba(15, 25, 40, .45); }
.vm-badgemodal { position: relative; background: var(--vx-surface); border-radius: 14px; padding: 18px;
  width: min(420px, 92vw); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.vm-badgemodal-hd { display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 800; color: var(--vx-navy); margin-bottom: 14px; }
.vm-badgemodal-x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--vx-muted); }
.vm-badgemodal-x:hover { color: var(--vx-navy); }

/* Fyysinen kortti (n. 90 x 55 mm). Sama layout esikatselussa ja tulosteessa. */
.vm-badgecard { width: 90mm; max-width: 100%; min-height: 55mm; box-sizing: border-box; margin: 0 auto;
  border: 1px solid var(--vx-line); border-radius: 10px; padding: 6mm 7mm; background: var(--vx-surface);
  display: flex; flex-direction: column; color: #111; }
.vm-badge-hd { display: flex; align-items: center; justify-content: space-between; }
.vm-badge-org { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--vx-blue);
  text-transform: uppercase; }
.vm-badge-tag { font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .12em; color: var(--vx-text-inverse);
  background: var(--vx-navy); border-radius: 4px; padding: 2px 8px; }
.vm-badge-name { font-size: 26px; font-weight: 800; color: #111; line-height: 1.1; margin: 8px 0 2px; }
.vm-badge-sub { font-size: 13px; color: #333; margin-bottom: 8px; }
.vm-badge-row { font-size: 12px; color: #333; margin-top: 2px; }
.vm-badge-row span { color: #888; font-weight: 700; }
.vm-badge-foot { margin-top: auto; padding-top: 10px; }
.vm-barcode { display: block; width: 100%; height: 46px; }
.vm-badge-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--vx-fs-xs); letter-spacing: .08em;
  color: #111; text-align: center; margin-top: 3px; }
.vm-badgeactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.vm-badgeactions .btn { display: inline-flex; align-items: center; gap: 6px; }
.vm-badgeactions .btn svg { width: 16px; height: 16px; }

/* Tulostettava kortti lisataan bodyyn omana .vm-print-juurenaan (VarianXBadge.
   printCard). Naytolla se pidetaan poissa ruudulta; tulostuksessa se on ainoa
   nakyva elementti. */
.vm-print { position: absolute; left: -99999px; top: 0; }

@media print {
  body { background: var(--vx-surface) !important; }
  body > *:not(.vm-print) { display: none !important; }
  .vm-print { position: static !important; left: auto !important; top: auto !important; }
  .vm-badgecard { border: none; border-radius: 0; margin: 0; box-shadow: none; }
  @page { margin: 8mm; }
}

/* Live write-back: saapumis-/poistumisaika statuspillin alla (aulapääte). */
.vm-c-status .vm-at { display: block; font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 3px; }

/* ---- Printteri-silta: asetusmodaali (Print settings) -------------------- */
.pb-modal { width: 420px; max-width: calc(100vw - 32px); }
.pb-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 8px; }
.pb-field { display: flex; flex-direction: column; gap: 4px; }
.pb-field span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--vx-muted); }
.pb-field input, .pb-field select { font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1.5px solid var(--vx-field-border); border-radius: 8px; color: var(--vx-text);
  box-sizing: border-box; width: 100%; }
.pb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb-statusrow { font-size: 13px; color: var(--vx-muted); margin-top: 2px; }
.pb-statusrow .pb-ok { color: #1f9d63; }
.pb-statusrow .pb-warn { color: #c2872b; }

/* ---- Template-pohjainen badge (Badge designer) -------------------------- */
.vm-badgecard--tpl { position: relative; padding: 0; border: 1px solid #d8e0ea; border-radius: 8px;
  overflow: hidden; box-sizing: border-box; }
.vm-badgecard--tpl .vm-el { box-sizing: border-box; white-space: pre-wrap; word-break: break-word; }
.vm-el-imgph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #b9c6d6; color: #97a6b6; font-size: var(--vx-fs-xs); background: var(--vx-surface-sunk); }
.vm-qr { display: block; width: 100%; height: 100%; }

/* ---- Badge designer (badge-designer.html) ------------------------------- */
.bd-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--vx-bg); }
.bd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--vx-surface); border-bottom: 1px solid var(--vx-line); }
.bd-toolbar .bd-title { font-size: 16px; font-weight: 800; color: var(--vx-navy); margin-right: 6px; }
.bd-toolbar select, .bd-toolbar input[type="text"] { font-family: inherit; font-size: 14px;
  padding: 7px 10px; border: 1.5px solid var(--vx-field-border); border-radius: 8px; color: var(--vx-text); }
.bd-toolbar .bd-spacer { flex: 1 1 auto; }
.bd-active { font-size: 12px; font-weight: 700; color: #1f9d63; }
.bd-main { flex: 1 1 auto; display: flex; gap: 18px; padding: 18px; align-items: flex-start; }
.bd-stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  min-height: 420px; background: #dfe6ef; border-radius: 14px; padding: 18px 18px 24px; gap: 14px; }
.bd-zoom { display: flex; align-items: center; gap: 6px; align-self: stretch;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-muted); }
.bd-zoom-btn { font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; min-width: var(--vx-control-sm);
  height: var(--vx-control-sm); padding: 0 8px; border: 1.5px solid var(--vx-field-border); border-radius: 8px;
  background: var(--vx-surface); color: var(--vx-navy); cursor: pointer; }
.bd-zoom-btn--txt { font-size: 12px; letter-spacing: .02em; }
.bd-zoom-btn:hover { border-color: var(--vx-blue); color: var(--vx-blue); }
.bd-zoom-val { min-width: 48px; text-align: center; font-size: 13px; color: var(--vx-navy); }
.bd-canvaswrap { flex: 1 1 auto; align-self: stretch; display: flex; align-items: flex-start;
  justify-content: center; overflow: auto; background: var(--vx-surface); padding: 20px; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(20,40,80,.12); }
#bdCanvas { flex: 0 0 auto; }
#bdCanvas .vm-badgecard--tpl { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#bdCanvas .vm-el { cursor: move; }
#bdCanvas .vm-el:hover { outline: 1px dashed #7aa3d0; outline-offset: 1px; }
#bdCanvas .vm-el.is-sel { outline: 2px solid var(--vx-blue); outline-offset: 1px; }
.bd-side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 14px; }
.bd-panel { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 12px; padding: 14px 16px; }
.bd-panel h3 { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vx-muted); margin: 0 0 10px; }
.bd-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-palette button { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px;
  border: 1.5px solid var(--vx-field-border); border-radius: 8px; background: var(--vx-surface); color: var(--vx-navy);
  cursor: pointer; }
.bd-palette button:hover { border-color: var(--vx-blue); color: var(--vx-blue); }
.bd-props { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-props .bd-field--wide { grid-column: 1 / -1; }
.bd-field { display: flex; flex-direction: column; gap: 4px; }
.bd-field span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--vx-muted); }
.bd-field input, .bd-field select { font-family: inherit; font-size: 13px; padding: 7px 9px;
  border: 1.5px solid var(--vx-field-border); border-radius: 8px; color: var(--vx-text); width: 100%;
  box-sizing: border-box; }
.bd-field input[type="color"] { padding: 2px; height: 34px; }
.bd-check { flex-direction: row; align-items: center; gap: 8px; }
.bd-check input[type="checkbox"] { width: auto; margin: 0; }
.bd-check span { text-transform: none; font-weight: 600; color: var(--vx-text); }
.bd-empty { font-size: 13px; color: var(--vx-muted); }
.bd-del { margin-top: 10px; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px;
  border: 1.5px solid #e2b6b6; border-radius: 8px; background: var(--vx-surface); color: #b5443b; cursor: pointer; width: 100%; }
.bd-del:hover { background: #fbeeed; }
.bd-hint { font-size: 12px; color: var(--vx-muted); margin-top: 8px; }
.bd-upload { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer;
  border: 1.5px dashed var(--vx-field-border); border-radius: 8px; background: #f7fafd; color: var(--vx-navy); }
.bd-upload:hover { border-color: var(--vx-blue); color: var(--vx-blue); }
.bd-upload--sm { padding: 5px 9px; font-size: 12px; }
.bd-imgthumb { margin-top: 8px; padding: 6px; border: 1px solid var(--vx-line); border-radius: 8px;
  background: #fbfdff; display: inline-block; }
.bd-imgthumb img { display: block; max-width: 100%; max-height: 70px; object-fit: contain; }
.bd-logo { margin-top: 12px; border-top: 1px solid var(--vx-line); padding-top: 12px; }
.bd-logo-hd { margin-bottom: 8px; }
.bd-logo-hd > span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--vx-muted); }
.bd-logo-row { display: flex; align-items: center; gap: 10px; }
.bd-logo-rm { font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer;
  border: 1.5px solid #e2b6b6; border-radius: 8px; background: var(--vx-surface); color: #b5443b; }
.bd-logo-rm:hover { background: #fbeeed; }
.bd-logothumb { margin-top: 10px; }
.bd-nda { margin-top: 12px; border-top: 1px solid var(--vx-line); padding-top: 12px; }
.bd-nda-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bd-nda-hd > span { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--vx-muted); }
.bd-nda-ta { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; line-height: 1.5;
  padding: 9px 10px; border: 1.5px solid var(--vx-field-border); border-radius: 8px; color: var(--vx-text);
  resize: vertical; min-height: 72px; }
.bd-nda-ta:focus { outline: none; border-color: var(--vx-blue); }

@media (max-width: 900px) {
  .bd-main { flex-direction: column; }
  .bd-side { flex-basis: auto; width: 100%; }
}

/* ---- Self registration -kioski (visitor-selfreg.html) -------------------- */
.body_selfreg { background: linear-gradient(160deg, var(--vx-primary-soft) 0%, var(--vx-gray-200) 100%); }
#srRoot { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sr-kiosk { width: 100%; max-width: 560px; }
.sr-card { background: var(--vx-surface); border-radius: 20px; padding: 34px 32px; box-shadow: 0 20px 60px rgba(20, 40, 80, .16); }
.sr-logo { font-size: 22px; font-weight: 800; color: var(--vx-blue); letter-spacing: .02em; }
.sr-h1 { font-size: 34px; font-weight: 800; color: var(--vx-navy); margin: 18px 0 8px; }
.sr-h2 { font-size: 24px; font-weight: 800; color: var(--vx-navy); margin: 4px 0 18px; }
.sr-lead { font-size: 16px; color: var(--vx-muted); line-height: 1.5; margin-bottom: 24px; }
.sr-welcome { text-align: center; padding: 48px 32px; }
.sr-stepno { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vx-blue); }
.sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sr-field { display: flex; flex-direction: column; gap: 5px; }
.sr-field--wide { margin-top: 14px; }
.sr-field span { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--vx-muted);
  text-transform: uppercase; }
.sr-field input { font-size: 18px; padding: 13px 14px; border: 1.5px solid var(--vx-field-border);
  border-radius: 12px; font-family: inherit; color: var(--vx-text); background: var(--vx-surface); }
.sr-field input:focus { outline: none; border-color: var(--vx-blue); }
.sr-nda { max-height: 220px; overflow-y: auto; border: 1px solid var(--vx-line); border-radius: 12px;
  padding: 16px; font-size: 15px; line-height: 1.6; color: var(--vx-text); background: #fafcff; }
.sr-check { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 17px;
  color: var(--vx-navy); font-weight: 600; cursor: pointer; }
.sr-check input { width: 24px; height: 24px; accent-color: var(--vx-blue); }
.sr-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.sr-btn { flex: 0 0 auto; font-size: 17px; font-weight: 700; padding: 14px 26px; border-radius: 12px;
  border: 1.5px solid var(--vx-field-border); background: var(--vx-surface); color: var(--vx-navy); cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 8px; }
.sr-btn:hover { border-color: var(--vx-blue); color: var(--vx-blue); }
.sr-btn--primary { background: var(--vx-blue); border-color: var(--vx-blue); color: var(--vx-text-inverse); }
.sr-btn--primary:hover { background: #0563b0; color: var(--vx-text-inverse); }
.sr-btn--primary:disabled { background: #b9c6d6; border-color: #b9c6d6; color: var(--vx-border); cursor: not-allowed; }
.sr-btn--xl { font-size: 20px; padding: 18px 44px; margin-top: 8px; }
.sr-btn svg { width: 18px; height: 18px; }
.sr-done { text-align: center; padding: 44px 32px; }
.sr-donecheck { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; background: #e3f5ec;
  color: #1f9d63; display: flex; align-items: center; justify-content: center; }
.sr-donecheck svg { width: 44px; height: 44px; }

@media (max-width: 560px) {
  .sr-grid { grid-template-columns: 1fr; }
  .sr-card { padding: 24px 20px; }
}

/* iOS Safari zoomaa nakyman automaattisesti kun fokusoitu input/textarea/
   select on alle 16px - .vx-input/.vx-textarea/.vx-select on jaettu
   desktop-proton kanssa (14px), joten ylikirjoitetaan VAIN mobiilissa
   (Vesun raportoima "kuvaus/host/tilausnumero-kenttaan koskettaessa
   zoomaa isommaksi" 15.7.2026). */
.mphone .vx-input, .mphone .vx-textarea, .mphone .vx-select, .mphone .bsearch_input { font-size: 16px; }

/* Nappaimisto tyontaa .position:fixed-alanavigaation oudosti nappaimiston
   paalle kun kaukana sivun alaosassa oleva kentta fokusoituu (Vesun
   raportoima "# osallistujaa/work number -kenttaan koskettaessa alavalikko
   siirtyy nappaimiston yla-puolelle" 15.7.2026) - piilotetaan navi kun
   mika tahansa kentta .mphonen sisalla on fokuksessa (ks. mobile-home.js:
   focusin/focusout .kb-open-luokka), navi palautuu fokuksen poistuessa. */
.mphone.kb-open .m-bottomnav { display: none; }

/* Bottom nav */
.m-bottomnav {
  flex: 0 0 auto; background: var(--vx-surface); border-top: 1px solid var(--vx-line);
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.m-navitem {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
  text-decoration: none; color: var(--vx-muted); font-size: var(--vx-fs-xs); font-weight: 600;
}
.m-navitem svg { width: 23px; height: 23px; }
.m-navitem.is-active { color: var(--vx-blue); }

/* Toast */
.m-toast {
  position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%);
  background: var(--vx-navy); color: var(--vx-text-inverse); padding: 10px 16px; border-radius: 22px;
  font-size: 12.5px; font-weight: 600; z-index: 50; box-shadow: 0 6px 20px rgba(var(--vx-primary-rgb),.35); white-space: nowrap;
}

/* Koko naytön sheet-paneeli (mobiilin vastine desktopin .vinfopanelle -
   Vesun pyynto 15.7.2026: paneelit tayttavat AINA koko naytön mobiilissa).
   #mSheetHost on .mphonen (position:relative, definite height) SUORA lapsi,
   mutta position:absolute+inset:0 -> se EI osallistu flex-layoutiin (jolloin
   sen korkeus ei jaisi 0:aan tyhjana), vaan tayttaa aina koko .mphonen alan,
   myos silloin kun sheeta ei ole auki (:empty -> pointer-events:none jottei
   se sina tapauksessa estä klikkauksia stagelle/alapalkkiin). */
#mSheetHost { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
#mSheetHost:not(:empty) { pointer-events: auto; }
.m-sheet {
  position: absolute; inset: 0; background: var(--vx-bg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
}
.m-sheet.open { transform: translateX(0); }
.m-sheet-head {
  flex: 0 0 auto; height: 54px; background: var(--vx-surface); border-bottom: 1px solid var(--vx-line);
  display: flex; align-items: center; gap: 6px; padding: 0 6px 0 4px;
}
.m-sheet-title {
  font-size: 15.5px; font-weight: 700; color: var(--vx-navy);
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Viestit-sheet (15.7.2026): kayttaa SAMOJA .msg_*-luokkia kuin desktopin
   messages.js/varianx.css - ei omaa mobiili-tyylikieltaan, jotta desktop ja
   mobiili pysyvat visuaalisesti/toiminnallisesti synkassa (Vesun pyynto).
   .m-sheet-body on AINOA vieritettava alue (ei sisakkaisia scrollboxeja),
   joten .msg_bubbles-kuplalistan omat flex/overflow-oletukset ylikirjoitetaan
   ja composer pidetaan nakyvissa position:sticky:lla scrollin alaosassa. */
.m-msgcomposer { position: sticky; bottom: 0; z-index: 2; }
.m-msgthread .msg_bubbles { flex: none; overflow: visible; min-height: 40vh; }

/* Bookings/Calendar-valilehdet: hakupalkki, paivanavigaatio, rivi- ja
   kentta-yhteenveto (jaettuja komponentteja mobile-bookings.js/mobile-
   calendar.js:lle, samassa .m-* -tyylikielessa kuin Home). */
.m-pill--bad { background: #e53935; color: var(--vx-text-inverse); }       /* DELETED - punainen */
.m-searchbar {
  display: flex; align-items: center; gap: 8px; background: var(--vx-surface);
  border: 1px solid var(--vx-line); border-radius: 12px; padding: 9px 12px;
}
.m-searchbar svg { width: 18px; height: 18px; color: var(--vx-muted); flex: 0 0 auto; }
.m-searchbar input {
  border: none; outline: none; font: inherit; font-size: 14px;
  flex: 1 1 auto; background: transparent; color: var(--vx-text); min-width: 0;
}
.m-datenav { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.m-datenav .m-daylabel { font-size: 13.5px; font-weight: 700; color: var(--vx-navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kapeat nuolinapit (edellinen/seuraava paiva) */
.m-datenav .m-datearrow {
  width: 34px; height: 36px; border-radius: 10px; border: 1px solid var(--vx-line);
  background: var(--vx-surface); display: flex; align-items: center; justify-content: center;
  color: var(--vx-navy); cursor: pointer; flex: 0 0 auto;
}
.m-datenav .m-datearrow svg { width: 18px; height: 18px; }
/* Keskikentta: kalenteri-ikoni + paivamaara, avaa VarianXDatePicker-popupin */
.m-datenav .m-datebtn {
  flex: 1 1 0; height: 36px; border-radius: 10px; border: 1px solid var(--vx-line);
  background: var(--vx-surface); display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--vx-navy); cursor: pointer; padding: 0 8px; min-width: 0; overflow: hidden;
}
.m-datenav .m-datebtn-ic { display: inline-flex; flex: 0 0 auto; }
.m-datenav .m-datebtn-ic svg { width: 16px; height: 16px; }
/* TODAY-pikanappi (hyppaa tahan paivaan) - flex-shrink 0 mutta pieni jalanjalki, ettei ahtaudu reunaan */
.m-datenav .m-datetoday {
  height: 36px; border-radius: 10px; border: 1px solid var(--vx-line); background: var(--vx-surface);
  color: var(--vx-blue); font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .03em;
  padding: 0 8px; cursor: pointer; flex: 0 0 auto; white-space: nowrap;
}
.m-listrow.is-current { background: var(--vx-primary-soft); }
.m-fieldrow { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--vx-line); }
.m-fieldrow:last-child { border-bottom: none; }
.m-fieldrow .m-fieldlabel { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-muted); }
.m-fieldrow .m-fieldvalue { font-size: 14px; color: var(--vx-text); display: flex; align-items: center; gap: 6px; }
.m-fieldrow .m-fieldvalue svg { width: 16px; height: 16px; color: var(--vx-muted); }

/* Bookings-editointi (16.7.2026): rivit joita napauttamalla avautuu Muokkaa
   varausta -lomake. .m-fieldrow on jo perustyylitelty ylla - tama laajentaa
   sen napiksi (kohdistus/kursori) ja tuo pen-ikonin oikealle reunalle. */
.m-fieldrow--editable { width: 100%; }
/* Pen-ikoni on aina VIIMEISENA elementtina .m-fieldvalue:n sisalla (myos
   Osallistujat-rivilla, jossa on jo oma people-ikoni edessa) - tyonnetaan
   se aina oikeaan reunaan margin-left:autolla sen sijaan etta space-between
   levittaisi kaikki 2-3 lasta tasavalein (jattaisi arvon keskelle). */
.m-fieldrow--editable .m-fieldvalue svg:last-child { color: var(--vx-blue); flex: 0 0 auto; margin-left: auto; }
.m-fieldrow--editable:active { background: var(--vx-surface-sunk); }
.m-ro-badge {
  background: var(--vx-success-bg); color: var(--vx-success); border: 1px solid rgba(var(--vx-success-rgb),.35);
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 8px; text-transform: uppercase;
}
/* Muokkaa varausta -lomakkeen Tallenna/Peruuta - pysyy nakyvissa sheetin
   alareunassa scrollista riippumatta, samalla position:sticky-kuviolla
   kuin Viestit-sheetin composer (.m-msgcomposer). */
.m-editfooter {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--vx-surface); border-top: 1px solid var(--vx-line); margin-top: 4px;
}

/* Tilausrivit-lista (16.7.2026, vaihe 2): maara+NET TOTAL oikeaan reunaan
   .m-listrow'ssa, ennen chevronia. Kayttaa .m-listtitle/.m-listsub-tyylitysta
   sellaisenaan, tama vain estaa kutistumisen ja tasaa tekstin oikealle. */
.m-orderqty { flex: 0 0 auto; text-align: right; }

/* ---- Orders + Participants -osiot (16.7.2026, vaihe 4) ------------------- */
/* Record-numero bookings-listan kortissa: pieni harmaa rivi otsikon ylapuolella. */
.m-recnum { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); letter-spacing: .02em; margin-bottom: 1px; }

/* Kortin otsikko (detaljin TILAUKSET / VIERAILIJAT -boksit). */
.m-cardhead {
  display: flex; align-items: center; gap: 7px; padding: 2px 4px 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--vx-navy);
  text-transform: uppercase; border-bottom: 1px solid var(--vx-line); margin-bottom: 4px;
}
.m-cardhead svg { width: 16px; height: 16px; }

/* Osion otsikkorivi: "MY ORDERS (n)" / "PARTICIPANTS (n)" + "+ Add" oikealle. */
.m-secthead { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; gap: 10px; }
.m-secttitle { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--vx-navy); text-transform: uppercase; }
.m-secttitle svg { width: 16px; height: 16px; }
.m-btn--sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; flex: 0 0 auto; }
.m-btn--sm svg { width: 14px; height: 14px; }
/* Read-only (live-data): "+ Add" nakyy mutta harmaana (kuten desktop). */
.m-btn.is-disabled { opacity: .45; }
.m-btn.is-disabled:active { background: var(--vx-blue); }

/* Tuotekuvake (emoji) tilausrivin edessa. */
.m-orderthumb {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: #f1f5fb;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}

/* Summat (NET / TAX / TOTAL). */
.m-ordertotals { padding: 10px 14px; }
.m-totrow { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 13px; color: var(--vx-muted); }
.m-totrow b { color: var(--vx-text); font-weight: 700; }
.m-totrow--grand { border-top: 1px solid var(--vx-line); margin-top: 4px; padding-top: 8px; font-size: 15px; color: var(--vx-navy); }
.m-totrow--grand b { color: var(--vx-navy); font-weight: 800; }

/* Provider-kortti (Add order). */
.m-provcard { padding: 14px; }
.m-provhead { display: flex; gap: 12px; align-items: flex-start; }
.m-provemoji {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--vx-primary-soft);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.m-provname { font-size: 15px; font-weight: 800; color: var(--vx-navy); }
.m-provstatus { font-size: var(--vx-fs-xs); font-weight: 700; color: #1f8a4d; text-transform: uppercase; margin-left: 4px; }
.m-provdesc { font-size: 12.5px; color: var(--vx-muted); margin-top: 3px; line-height: 1.4; }
.m-provmeta { font-size: 12.5px; color: var(--vx-text); margin-top: 8px; }
.m-provnote { font-size: 12px; color: var(--vx-muted); margin-top: 8px; line-height: 1.4; background: var(--vx-warning-bg); border: 1px solid rgba(var(--vx-warning-rgb),.35); border-radius: 8px; padding: 8px 10px; }

/* Tuoteryhma-chipit. */
.m-groupchips { display: flex; gap: 8px; overflow-x: auto; padding: 0 4px 8px; -webkit-overflow-scrolling: touch; }
.m-groupchip {
  flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--vx-field-border);
  background: var(--vx-surface); color: var(--vx-text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.m-groupchip.active { background: var(--vx-navy); border-color: var(--vx-navy); color: var(--vx-text-inverse); }

/* Tuoterivi tuotelistassa (Add order). */
.m-prodrow { padding: 11px 8px; border-bottom: 1px solid var(--vx-line); }
.m-prodrow:last-child { border-bottom: none; }
.m-prodmeta { font-size: 13px; font-weight: 700; color: var(--vx-navy); margin-top: 3px; }
.m-prodwarn { font-size: 10.5px; font-weight: 700; color: var(--vx-warning); background: var(--vx-warning-bg); border-radius: 6px; padding: 1px 6px; }
.m-prodctl { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.m-prodfield { display: flex; align-items: center; gap: 5px; background: var(--vx-surface-sunk); border: 1px solid var(--vx-field-border); border-radius: 8px; padding: 4px 8px; }
.m-prodfield svg { width: 15px; height: 15px; color: var(--vx-muted); flex: 0 0 auto; }
.m-prodserv { border: none; background: none; font-family: inherit; font-size: 13px; width: 74px; }
.m-prodqty { border: none; background: none; font-family: inherit; font-size: 13px; width: 46px; }
.m-prodserv:focus, .m-prodqty:focus { outline: none; }
.m-prodadd { margin-left: auto; }

/* Osallistujakortti. */
.m-pcard { padding: 12px 14px; }
.m-pcardname { font-size: 15px; font-weight: 800; color: var(--vx-navy); margin-bottom: 6px; }
.m-pcardrow { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; color: var(--vx-muted); }
.m-pcardrow b { color: var(--vx-text); font-weight: 600; text-align: right; }
.m-pcardedit { margin-top: 10px; }

/* ---- Settings-sheet (16.7.2026): mobiili settings.js:sta ----------------- */
/* Valilehtipalkki (Oma tili / Ilmoitukset / Delegointi). */
.m-settabs {
  display: flex; gap: 4px; padding: 10px 12px 0; position: sticky; top: 0; z-index: 3;
  background: var(--vx-surface); border-bottom: 1px solid var(--vx-line);
}
.m-settab {
  flex: 1 1 0; padding: 10px 4px; border: none; background: none; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--vx-muted); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.m-settab.active { color: var(--vx-navy); border-bottom-color: var(--vx-blue); }

/* Profiilikortin ylaosa (avatar + nimi). */
.m-setprofile { display: flex; align-items: center; gap: 12px; padding: 2px 0 10px; border-bottom: 1px solid var(--vx-line); margin-bottom: 4px; }
.m-setavatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--vx-navy);
  color: var(--vx-text-inverse); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800;
}
.m-setname { font-size: 16px; font-weight: 800; color: var(--vx-navy); }
.m-setsub { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.m-sethelp { font-size: 12.5px; color: var(--vx-muted); line-height: 1.45; margin: 0 0 10px; }

/* Checkbox-rivi (Order settings / Notifications). */
.m-chkrow { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--vx-line); cursor: pointer; }
.m-chkrow:last-child { border-bottom: none; }
.m-chkrow input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--vx-blue); }
.m-chkmain { display: flex; flex-direction: column; gap: 2px; }
.m-chktitle { font-size: 14px; font-weight: 600; color: var(--vx-text); }
.m-chkhelp { font-size: 12px; color: var(--vx-muted); line-height: 1.4; }

/* Delegointilista. */
.m-dlglist { display: flex; flex-direction: column; }
.m-dlgrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--vx-line); }
.m-dlgrow:last-child { border-bottom: none; }
.m-dlgname { font-size: 14px; font-weight: 600; color: var(--vx-text); }
.m-dlgemail { font-size: 12px; color: var(--vx-muted); margin-top: 1px; }
.m-btn--danger { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c0; }
.m-btn--danger:active { background: #f9d9d5; }

/* ---- Kayttajavalikko (#mUser -> MobileUserMenu, 16.7.2026) --------------- */
/* Vastaa desktopin shell.js userMenu-popoveria mobiilissa (MobileSheet). */
.m-umtop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 12px; border-bottom: 1px solid var(--vx-line); }
.m-umavatar {
  width: 72px; height: 72px; border-radius: 50%; background: #dbe7fb;
  color: var(--vx-navy); display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
}
.m-umname { font-size: 17px; font-weight: 800; color: var(--vx-navy); }
.m-umrows { padding: 10px 0 2px; display: flex; flex-direction: column; }
.m-umrow { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0; text-align: center; }
.m-umk { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vx-blue); }
.m-umv { font-size: 14px; color: var(--vx-text); }

/* Kielivalitsin EN/FI/SV. */
.m-langrow { display: flex; align-items: center; gap: 8px; padding: 12px 0 2px; border-top: 1px solid var(--vx-line); margin-top: 6px; }
.m-langlbl { font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vx-muted); margin-right: auto; }
.m-langbtn {
  flex: 0 0 auto; min-width: 52px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--vx-field-border); background: var(--vx-surface); color: var(--vx-navy);
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.m-langbtn.current { background: var(--vx-blue); border-color: var(--vx-blue); color: var(--vx-text-inverse); }

/* Logout-rivi punaisella. */
.m-listrow--danger .m-listtitle { color: #c0392b; }
.m-listrow--danger .m-time { color: #c0392b; }

/* Calendar-valilehti: viikkoliuska (Ma-Su) + "on varauksia" -piste. */
.m-weekstrip { display: flex; gap: 6px; }
.m-weekstrip .m-weekday {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 7px; border-radius: 12px; border: 1px solid var(--vx-line);
  background: var(--vx-surface); color: var(--vx-text); cursor: pointer; position: relative;
}
.m-weekstrip .m-weekday.is-sel { background: var(--vx-navy); border-color: var(--vx-navy); color: var(--vx-text-inverse); }
.m-weekday-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; opacity: .7; }
.m-weekday-num { font-size: 15px; font-weight: 800; }
.m-weekday-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--vx-accent, #2f7bf0); position: absolute; bottom: 5px; }
.m-weekday.is-sel .m-weekday-dot { background: var(--vx-surface); }

/* New booking -velho: askelosoittimet ylhaalla (Milloin -> Huone -> Vahvista -> Valmis). */
.m-steps { display: flex; align-items: center; padding: 14px 16px 4px; }
.m-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--vx-muted); }
.m-step-dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--vx-surface); border: 2px solid var(--vx-line);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--vx-muted);
}
.m-step-dot svg { width: 14px; height: 14px; }
.m-step-lbl { font-size: var(--vx-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.m-step.is-current .m-step-dot { background: var(--vx-navy); border-color: var(--vx-navy); color: var(--vx-text-inverse); }
.m-step.is-current .m-step-lbl { color: var(--vx-navy); }
.m-step.is-done .m-step-dot { background: #e4f6ea; border-color: #1f8a4d; color: #1f8a4d; }
.m-step-sep { flex: 1 1 auto; height: 2px; background: var(--vx-line); margin: 0 2px; align-self: center; margin-bottom: 16px; }
.m-listrow.is-disabled, .m-listrow[disabled] { opacity: .55; }

/* New bookingin "Valmis"-ruudun onnistumisympyra (sama SVG-mitoitusongelma
   kuin .m-time/.m-listtitle - loydos 15.7.2026). */
.m-successicon {
  width: 52px; height: 52px; border-radius: 50%; background: #e4f6ea; color: #1f8a4d;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.m-successicon svg { width: 26px; height: 26px; }

/* ==========================================================================
   SALES MANAGEMENT
   ========================================================================== */
#salesStage { padding: 0 0 40px; }

/* Alavalilehdet */
.sm_subtabs { display: flex; gap: 26px; padding: 0 22px 0 0; border-bottom: 1px solid var(--vx-line); flex-wrap: wrap; }
.sm_subtab {
  padding: 14px 2px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--vx-muted);
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; text-transform: uppercase;
}
.sm_subtab:hover { color: var(--vx-navy); }
.sm_subtab.active { color: var(--vx-blue); border-bottom-color: var(--vx-blue); }

.sm_body { padding: 20px 0; }

/* Sales Orders: flex-layout + scroll (filterit kiinni, lista + tilausrivit scrollaavat) */
.body_module_sales:not(.body_module_admin) #mainview {
  height: calc(100vh - 32px);
  min-height: 0;
  overflow: hidden;
}
.body_module_sales:not(.body_module_admin) #midpane {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.body_module_sales:not(.body_module_admin) #maindata {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.body_module_sales:not(.body_module_admin) #salesStage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.body_module_sales:not(.body_module_admin) .sm_body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.body_module_sales:not(.body_module_admin) .sm_filterbar,
.body_module_sales:not(.body_module_admin) .sm_actionbar,
.body_module_sales:not(.body_module_admin) .sm_subtabs {
  flex-shrink: 0;
}
.body_module_sales:not(.body_module_admin) .sm_orderlist.vx-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.body_module_sales:not(.body_module_admin) .sm_orderlist > .sm_order {
  flex: 0 0 auto;
}
/* Adverts-alilehti: toolbar kiinni, korttiruudukko scrollaa (kuten Sales Orders -lista).
   Ilman tata .sm_body (overflow:hidden, flex-column) leikkaa .adv_grid:n ilman scrollia. */
.body_module_sales:not(.body_module_admin) .adv_toolbar { flex-shrink: 0; }
.body_module_sales:not(.body_module_admin) .adv_grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 8px;
}

/* Filtteripalkki */
.sm_filterbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sm_filterbar .vx-select,
.sm_filterbar .vx-input,
.sm_filterbar .bk_iconbtn,
.sm_filterbar .sm_datebox {
  height: var(--vx-control-sm);
  min-height: var(--vx-control-sm);
  box-sizing: border-box;
}
.sm_filterbar .bk_iconbtn { width: var(--vx-control-sm); }
.sm_field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--vx-muted); }
.sm_field > span { font-weight: 600; }
.sm_field .vx-input, .sm_field .vx-select { min-width: 230px; }
.sm_status .vx-select { min-width: 190px; }
.sm_check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vx-navy); cursor: pointer; }
.sm_check.sm { font-size: 12px; }
.bk_iconbtn.sm_refresh { background: var(--vx-blue); }
.bk_iconbtn.sm_refresh svg { stroke: var(--vx-text-inverse); }

/* Toiminnot-palkki */
.sm_actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 16px; }
.sm_action_label { font-size: 12px; color: var(--vx-muted); font-weight: 600; }
/* Toimintapainikkeet: statusta VAIHDETAAN -> varitetty teksti valkoisella pohjalla. */
.sm_action {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--vx-muted);
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius-md); cursor: pointer;
  box-sizing: border-box;
}
.sm_action:hover { border-color: currentColor; }
.sm_action.act-green { color: #2e7d32; }
.sm_action.act-red   { color: var(--vx-danger); }
.sm_action.act-blue  { color: #1a56c4; }
.sm_action.act-black { color: #1b1b1b; }
.sm_action.disabled { color: #c2c8d0; cursor: default; background: var(--vx-surface-sunk); border-color: var(--vx-line); }
.sm_action.disabled:hover { border-color: var(--vx-line); }
.sm_action_sep { width: 1px; align-self: stretch; background: var(--vx-line); margin: 2px 4px; }
.sm_selcount { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-blue); }
.sm_selbtns { margin-left: auto; display: flex; gap: 10px; }
.sm_selbtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 12px;
  font-size: 12px; font-weight: 700; color: var(--vx-navy);
  border: 1px solid var(--vx-line); border-radius: var(--vx-radius-md); cursor: pointer;
  box-sizing: border-box;
}
.sm_selbtn:hover { border-color: var(--vx-blue); color: var(--vx-blue); }

/* Tilauskortit */
.sm_orderlist { display: flex; flex-direction: column; gap: 12px; }
.sm_order { border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface); box-shadow: var(--vx-shadow); overflow: hidden; }
.sm_order.open { border-color: var(--vx-blue); }
.sm_order.sel { border-color: var(--vx-blue); box-shadow: 0 0 0 1px var(--vx-blue) inset; background: var(--vx-primary-soft); }
.sm_order_head {
  display: grid; grid-template-columns: 24px 90px 110px 54px 1.4fr 1.4fr 1.4fr auto;
  gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer;
}
.sm_order_head:hover { background: #f9fbfe; }
.sm_o_check {
  width: 18px; height: 18px; border: 1.5px solid var(--vx-line); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--vx-text-inverse); background: var(--vx-surface);
}
.sm_o_check.on { background: var(--vx-blue); border-color: var(--vx-blue); }
.sm_o_id { display: flex; flex-direction: column; align-items: flex-start; }
.sm_o_num { font-weight: 700; color: var(--vx-navy); font-size: 14px; }
.sm_o_status { display: inline-block; margin-top: 3px; font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-text-inverse); border-radius: 4px; padding: 2px 6px; letter-spacing: .04em; }
.sm_o_date { font-size: 13px; color: var(--vx-text); }
.sm_o_time { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.sm_o_sub { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.sm_o_res, .sm_o_bill, .sm_o_desc { font-size: 13px; color: var(--vx-text); font-weight: 600; }
.sm_o_cart { display: flex; }
.sm_o_btn { white-space: nowrap; }
.sm_o_btn svg { width: 14px; height: 14px; stroke: currentColor; vertical-align: -2px; margin-right: 4px; }

.sm_order_body { border-top: 1px solid var(--vx-line); padding: 16px; background: var(--vx-surface-alt); }
.sm_addinfo { max-width: 380px; margin-bottom: 14px; }
.sm_ordertoolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--vx-line); }
.sm_viewtoggle { width: var(--vx-control-sm); height: var(--vx-control-sm); border: 1px solid var(--vx-line); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sm_viewtoggle svg { width: 16px; height: 16px; stroke: var(--vx-navy); }
.sm_tb_btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--vx-navy); cursor: pointer; }
.sm_tb_btn svg { width: 15px; height: 15px; stroke: var(--vx-navy); }
.sm_ordertoolbar .sm_selbtn { margin: 0; }
.sm_plus { display: inline-flex; width: 13px; margin-right: 4px; }
.sm_plus svg { width: 13px; height: 13px; stroke: var(--vx-text-inverse); }

/* PRODUCTS */
.sm_block { margin-bottom: 26px; }
.sm_block_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sm_block_label {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--vx-blue);
  border: 1px solid var(--vx-line); border-radius: 999px; padding: 5px 16px; margin-bottom: 0;
}
.adu_toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.adu_toolbar .adu_search { flex: 1; min-width: 220px; }
.sm_provinput { max-width: 100%; width: 100%; }
select.sm_provinput { width: auto; min-width: 240px; max-width: 360px; }
.sm_provbtns { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.sm_groups { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.sm_gcard {
  flex: 0 0 130px; border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface);
  box-shadow: var(--vx-shadow); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sm_gcard.active { border-color: var(--vx-blue); box-shadow: 0 0 0 2px rgba(0,82,146,.15); }
.sm_gcard_img { width: 64px; height: 64px; border-radius: 50%; background: var(--vx-border); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.sm_gcard_name { font-size: 12px; font-weight: 700; color: var(--vx-navy); text-align: center; min-height: 30px; display: flex; align-items: center; }
.sm_gcard .btn {
  width: 100%; font-size: 12px; padding: 0 4px;
  height: var(--vx-control-h-compact); min-height: var(--vx-control-h-compact);
}

.sm_groupname { font-size: 16px; font-weight: 700; color: var(--vx-navy); margin: 6px 0 14px; }
.sm_prodlist { display: flex; flex-direction: column; }
.sm_prow { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--vx-line); cursor: pointer; }
.sm_prow_edit { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.sm_prow_edit svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }
.sm_prow_img { width: 50px; height: 50px; border-radius: 8px; background: var(--vx-border); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.sm_prow_name { font-size: 14px; font-weight: 700; color: var(--vx-navy); }
.sm_prow_warn { color: var(--vx-red); font-weight: 600; font-style: italic; font-size: 12px; margin-left: 6px; }
.sm_prow_desc { font-size: 12px; color: var(--vx-text); margin-top: 3px; line-height: 1.4; max-width: 760px; }
.sm_prow_price { font-size: 15px; font-weight: 700; color: var(--vx-navy); white-space: nowrap; }
.sm_empty { color: var(--vx-muted); font-size: 13px; padding: 16px 0; }

/* ADVERTS / kampanjat */
.adv_toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.adv_search { flex: 1; min-width: 200px; max-width: 360px; }
.adv_chips { display: flex; gap: 6px; }
.adv_chip { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .03em; color: var(--vx-muted); border: 1px solid var(--vx-line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.adv_chip:hover { border-color: var(--vx-blue); color: var(--vx-blue); }
.adv_chip.active { background: var(--vx-blue); border-color: var(--vx-blue); color: var(--vx-text-inverse); }

.adv_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.adv_card { display: flex; flex-direction: column; border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface); box-shadow: var(--vx-shadow); overflow: hidden; }
.adv_card.adv_ended { opacity: .72; }
.adv_card_img { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 52px; background: linear-gradient(135deg, #eef4fc, #f7fbff); }
.adv_badge { position: absolute; top: 10px; right: 10px; font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .05em; color: var(--vx-text-inverse); border-radius: 4px; padding: 3px 8px; }
.adv_badge_active { background: #2e9e4f; }
.adv_badge_scheduled { background: #2f6fd0; }
.adv_badge_ended { background: #9aa1ab; }
.adv_card_body { padding: 14px 16px 14px; flex: 1; }
/* Edit-nappi statuksen alle (kortin kuva-alueen oikea ylakulma) - nakyy aina,
   vaikka kortti kutistuisi (footer poistettu, ettei se leikkaudu). */
.adv_editbtn {
  position: absolute; top: 38px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--vx-control-sm); height: var(--vx-control-sm); padding: 0;
  border: 1px solid var(--vx-line); border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--vx-blue);
  cursor: pointer; box-shadow: var(--vx-shadow);
}
.adv_editbtn:hover { background: var(--vx-blue); color: var(--vx-text-inverse); border-color: var(--vx-blue); }
.adv_editbtn svg { width: 15px; height: 15px; stroke: currentColor; }
.adv_card_provider { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); letter-spacing: .02em; margin-bottom: 4px; }
.adv_card_title { font-size: 15px; font-weight: 700; color: var(--vx-navy); line-height: 1.3; margin-bottom: 6px; }
.adv_card_text { font-size: 12.5px; color: var(--vx-text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.adv_card_meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.adv_card_dates { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-muted); }
.adv_card_price { font-size: 13px; font-weight: 700; color: var(--vx-blue); }
.adv_card_foot { padding: 10px 16px 14px; }
.adv_card_foot .btn { width: 100%; }
.adv_card_foot svg { width: 14px; height: 14px; stroke: currentColor; vertical-align: -2px; margin-right: 4px; }

/* Advert-lomake */
.adv_formimg { height: 90px; display: flex; align-items: center; justify-content: center; font-size: 46px; background: linear-gradient(135deg, #eef4fc, #f7fbff); border-radius: var(--vx-radius); margin-bottom: 16px; }
.adv_dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adv_date { cursor: pointer; }

/* Placeholder */
.sm_placeholder { text-align: center; color: var(--vx-muted); padding: 60px 20px; }
.sm_ph_icon { width: 54px; height: 54px; margin: 0 auto 14px; color: var(--vx-blue); }
.sm_ph_icon svg { width: 54px; height: 54px; stroke: var(--vx-blue); }
.sm_placeholder h3 { color: var(--vx-navy); margin: 0 0 8px; }

/* ---- Edit Product -paneeli ---- */
.vinfopane.pane_product { width: clamp(440px, 40vw, 600px); }
.vinfopane.pane_wide { width: min(1180px, 96vw); }

/* ===== CONDENSED / NORMAL VIEW (tiivis koko varauksen dokumentti) ===== */
.bk_cv { padding: 20px 26px 40px; color: var(--vx-navy); font-size: 12.5px; line-height: 1.5; background: var(--vx-surface); }
/* Receipt-otsikko (kuitin vasen ylareuna) - vain Receipt-toiminnossa */
.bk_cv_receipt { text-align: left; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--vx-line); }
.bk_cv_rc_name { font-size: 15px; font-weight: 800; color: var(--vx-navy); }
.bk_cv_rc_addr, .bk_cv_rc_bid, .bk_cv_rc_free { font-size: 12px; color: var(--vx-text); line-height: 1.45; }
.bk_cv_rc_bid { margin-top: 2px; }
.bk_cv_top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bk_cv_mode { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--vx-muted); text-transform: uppercase; }
.bk_cv_topright { display: flex; align-items: center; gap: 14px; }
.bk_cv_printdate { font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.bk_cv_sec { margin-bottom: 22px; }
.bk_cv_sechd { background: var(--vx-surface-sunk); border: 1px solid var(--vx-line); border-left: 3px solid var(--vx-blue); padding: 6px 12px; font-weight: 700; font-size: 13px; color: var(--vx-navy); margin-bottom: 10px; }
.bk_cv_fields { display: grid; grid-template-columns: 1fr; gap: 3px 0; }
.bk_cv_f { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 2px 8px; }
.bk_cv_l { color: var(--vx-muted); text-align: right; }
.bk_cv_v { color: var(--vx-navy); }
.bk_cv_muted { color: var(--vx-muted); }
.bk_cv_status { color: var(--vx-muted); font-weight: 600; }
.bk_cv_tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.bk_cv_tbl th { text-align: left; font-weight: 700; border-bottom: 1.5px solid var(--vx-navy); padding: 5px 10px; color: var(--vx-navy); }
.bk_cv_tbl td { padding: 4px 10px; border-bottom: 1px solid var(--vx-border); vertical-align: top; }
.bk_cv_tbl th.num, .bk_cv_tbl td.num { text-align: right; white-space: nowrap; }
.bk_cv_totals { margin: 8px 0 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bk_cv_trow { display: grid; grid-template-columns: auto 120px; gap: 18px; font-size: 12px; }
.bk_cv_trow span:first-child { text-align: right; color: var(--vx-muted); font-weight: 600; }
.bk_cv_trow span:last-child { text-align: right; }
.bk_cv_ttotal { font-weight: 700; font-size: 13px; }
.bk_cv_ttotal span:first-child, .bk_cv_ttotal span:last-child { color: var(--vx-navy); }
.bk_cv_addinfo { margin-top: 10px; padding: 0 8px; }
.bk_cv_gmail { font-size: var(--vx-fs-xs); color: var(--vx-muted); font-style: italic; }

@media print {
  html, body { height: auto !important; overflow: visible !important; }
  body * { visibility: hidden !important; }
  #vinfopane, #vinfopane *, #smPane, #smPane * { visibility: visible !important; }
  #vinfopane, #smPane {
    position: absolute !important; inset: 0 auto auto 0 !important;
    width: 100% !important; max-width: none !important; height: auto !important;
    box-shadow: none !important; border: 0 !important; transform: none !important;
    display: block !important; overflow: visible !important;
  }
  /* Print: block-layout + nakyva overflow -> flush-body ei lysahda nollaan
     (flex:1 1 0% auto-korkuisessa panessa jai muuten tyhjaksi valkoiseksi). */
  .vinfopane_body, .vinfopane_body.pane_body_flush {
    display: block !important; overflow: visible !important; height: auto !important;
    flex: none !important; padding: 0 !important;
  }
  .vinfopane_header, .pane_backdrop, .bk_cv_topright { display: none !important; }
  .bk_cv { padding: 0 !important; }
}

/* VIEW PRODUCT */
.pv_carousel { margin: -18px -20px 16px; background: #1b1f24; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pv_img { width: 280px; max-width: 100%; height: 200px; border-radius: 8px; background: linear-gradient(135deg,#2b2f36,#3a4654); display: flex; align-items: center; justify-content: center; font-size: 90px; }
.pv_dots { display: flex; gap: 7px; }
.pv_dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; }
.pv_dot.on { background: var(--vx-surface); }
.pv_name { font-size: 18px; font-weight: 700; color: var(--vx-navy); margin: 4px 0 14px; }
.pv_row { margin-bottom: 12px; }
.pv_label { font-size: 12px; font-weight: 700; color: var(--vx-muted); margin-bottom: 2px; }
.pv_val { font-size: 13px; color: var(--vx-text); line-height: 1.45; }
.pv_delete { margin-left: auto; }

/* EDIT PRODUCT */
.pe_title { font-size: 14px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em; margin: 0 0 14px; }
.pe_field { margin-bottom: 14px; }
.pe_label { display: block; font-size: 12px; font-weight: 700; color: var(--vx-muted); margin-bottom: 5px; }
.pe_field .vx-input, .pe_field .vx-select, .pe_field .vx-textarea { width: 100%; }
/* Vaihe 2 — lomakkeiden ryhmittely */
.pe_section, .bi_section, .oe_section {
  font-size: 12px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--vx-line);
}
.pe_card .pe_section, .pe_card .bi_section, .pe_card .oe_section { margin-top: 0; }
.pe_card {
  background: var(--vx-surface-2); border: 1px solid var(--vx-line); border-radius: 8px;
  padding: 14px 16px 4px; margin-bottom: 14px;
}
.pe_card:last-child { margin-bottom: 0; }
.pe_2col, .adu_2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pe_prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pe_prices.pe_2col { grid-template-columns: repeat(2, 1fr); }
.pe_check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--vx-text); margin: 4px 0 14px; cursor: pointer; }
.pe_right { margin-left: auto; }

/* EDIT PRODUCT GROUP - Product Profiles (nakyy / ei nay profiilille) */
.ge_profiles { margin-top: 6px; }
.ge_proflabel { font-size: 12px; font-weight: 700; color: var(--vx-navy); margin-bottom: 4px; }
.ge_profhint { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-bottom: 10px; }
.ge_proflist { display: flex; flex-direction: column; gap: 10px; }
.ge_prof { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--vx-text); cursor: pointer; }
.ge_prof input { width: 16px; height: 16px; accent-color: var(--vx-blue); }

/* MEDIA ITEMS */
.md_head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.md_title { font-size: 14px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em; margin: 0 8px 0 0; }
.md_grid { display: flex; gap: 18px; flex-wrap: wrap; }
.md_item { width: 200px; }
.md_label { font-size: 12px; color: var(--vx-muted); margin-bottom: 6px; }
.md_thumb { position: relative; height: 150px; border-radius: 10px; background: var(--vx-surface-sunk); display: flex; align-items: center; justify-content: center; font-size: 64px; border: 1px solid var(--vx-line); }
.md_actions { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; }
.md_act { width: 24px; height: 24px; border-radius: 50%; background: var(--vx-blue); color: var(--vx-text-inverse); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; }
.md_act.red { background: var(--vx-red); }
.md_act.blue { background: var(--vx-blue); }
.md_ill { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vx-text); margin-top: 8px; cursor: pointer; }

/* MEDIA POOL */
.md_tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--vx-line); margin-bottom: 14px; flex-wrap: wrap; }
.md_tab { padding: 10px 2px; font-size: 12px; font-weight: 700; color: var(--vx-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.md_tab:hover { color: var(--vx-navy); }
.md_tab.active { color: var(--vx-blue); border-bottom-color: var(--vx-blue); }
.mp_filter { background: var(--vx-surface-sunk); border: 1px solid var(--vx-line); border-radius: 6px; padding: 8px 10px; font-size: var(--vx-fs-xs); color: var(--vx-muted); font-family: monospace; margin-bottom: 14px; }
.mp_label { font-size: 13px; font-weight: 700; color: var(--vx-navy); margin-bottom: 12px; }
.mp_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px; }
.mp_thumb { aspect-ratio: 1; border-radius: 8px; background: var(--vx-surface-sunk); border: 1px solid var(--vx-line); display: flex; align-items: center; justify-content: center; font-size: 32px; cursor: pointer; transition: box-shadow .15s; }
.mp_thumb:hover { box-shadow: 0 0 0 2px var(--vx-blue); }

/* ===== MEDIA POOL ADMINISTRATION (Administration -> MEDIA POOL) =========
   Oma mpa_-prefiksi, jottei tormaa vanhaan media-pickeriin (mp_*). */
.mpa_filters { background: var(--vx-surface-sunk); border: 1px solid var(--vx-line); border-radius: 10px; padding: 14px 16px; margin: 14px 0 16px; }
.mpa_frow { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.mpa_frow + .mpa_frow { margin-top: 12px; }
.mpa_f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 180px; }
.mpa_f_lbl { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vx-muted); }
.mpa_sel, .mpa_in { width: 100%; }
.mpa_chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vx-navy); white-space: nowrap; flex: 0 0 auto; padding-bottom: 6px; }
.mpa_chk input { width: 16px; height: 16px; }
.mpa_chk--del span { color: #c0392b; font-weight: 700; }
.mpa_actions { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: 0 0 auto; padding-bottom: 2px; }
.mpa_found { font-size: 12px; color: var(--vx-muted); }
.mpa_found b { color: var(--vx-navy); font-size: 15px; }

.mpa_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.mpa_cell { position: relative; padding: 0; border: 3px solid #f4c6d2; border-radius: 10px; background: var(--vx-surface); cursor: pointer; overflow: hidden; aspect-ratio: 4 / 3; transition: border-color .12s, box-shadow .12s; }
.mpa_cell:hover { box-shadow: 0 4px 14px rgba(var(--vx-primary-rgb),.16); }
.mpa_cell.is-sel { border-color: #e02424; box-shadow: 0 0 0 2px rgba(224,36,36,.25); }
.mpa_cell.is-deleted { opacity: .55; }
.mpa_cell.is-deleted .mpa_thumb { filter: grayscale(.6); }
.mpa_thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.mpa_badge { position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e02424; color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mpa_typetag { position: absolute; bottom: 5px; left: 5px; padding: 1px 6px; border-radius: 4px; background: rgba(var(--vx-primary-rgb),.85); color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; }

/* Detalji-paneeli (oikea slide-in) */
.mpa_detail { display: flex; flex-direction: column; gap: 16px; }
.mpa_preview { position: relative; border-radius: 10px; overflow: hidden; background: var(--vx-surface-sunk); border: 1px solid var(--vx-line); }
.mpa_preview img { display: block; width: 100%; height: auto; }
.mpa_delflag { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 6px; background: #e02424; color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); font-weight: 700; }
.mpa_meta { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--vx-line); border-radius: 10px; overflow: hidden; }
.mpa_mrow { display: flex; gap: 12px; padding: 8px 12px; font-size: 13px; }
.mpa_mrow:nth-child(even) { background: var(--vx-surface-sunk); }
.mpa_mlbl { flex: 0 0 130px; color: var(--vx-muted); font-weight: 600; }
.mpa_mval { color: var(--vx-navy); word-break: break-word; }
.mpa_block .mpa_h { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vx-muted); margin-bottom: 8px; }
.mpa_tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mpa_tag { background: var(--vx-info-bg); color: var(--vx-blue); border-radius: 12px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.mpa_uselist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mpa_use { border: 1px solid var(--vx-line); border-left: 3px solid var(--vx-blue); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.mpa_use_site { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.mpa_use_meta { font-size: 12px; color: var(--vx-muted); }
.mpa_soon { font-size: 12px; color: var(--vx-muted); font-style: italic; padding-top: 4px; border-top: 1px dashed var(--vx-line); }

/* S3/S4: edit-lomake + upload-alue paneelissa */
.mpa_form { display: flex; flex-direction: column; gap: 12px; }
.mpa_flbl { display: flex; flex-direction: column; gap: 5px; font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-muted); }
.mpa_flbl .vx-input, .mpa_flbl .vx-select { width: 100%; }
.mpa_uparea { border: 2px dashed var(--vx-line); border-radius: 10px; padding: 16px; text-align: center; background: var(--vx-surface-sunk); }
.mpa_uphint { font-size: 13px; color: var(--vx-muted); margin-bottom: 10px; }
.mpa_uppreview { margin-top: 12px; }
.mpa_uppreview img { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid var(--vx-line); }

/* V24-tyylinen detalji-view: nappirivi + nimi/arvo-parit + in use */
.mpa_actrow { display: flex; flex-wrap: wrap; gap: 8px; }
.mpa_delbtn { margin-left: auto; }
.mpa_props { display: flex; flex-direction: column; gap: 12px; }
.mpa_prop_lbl { font-size: 12px; color: var(--vx-muted); }
.mpa_prop_val { font-size: 14px; font-weight: 700; color: var(--vx-navy); word-break: break-word; margin-top: 2px; }
.mpa_kwval { font-weight: 700; }
.mpa_empital { font-style: italic; font-weight: 700; color: var(--vx-muted); }
.mpa_inuse_yes { color: var(--vx-blue); font-weight: 800; }
.mpa_inuse_no { color: var(--vx-muted); font-weight: 800; }
.mpa_usagewrap { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 720px) {
  .mpa_actions { margin-left: 0; width: 100%; }
  .mpa_grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* UPLOAD */
.up_label { font-size: 13px; font-weight: 700; color: var(--vx-navy); margin-bottom: 14px; }
.up_wrap { display: flex; gap: 20px; }
.up_side { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.up_btn { width: 100%; }
.up_btn2 { width: 100%; font-size: 12px; }
.up_prevlabel { text-align: center; font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 6px; }
.up_preview { height: 150px; border-radius: 8px; background: #e7ebf1; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.up_meta { font-size: var(--vx-fs-xs); color: var(--vx-muted); line-height: 1.5; }
.up_stage { flex: 1; min-height: 320px; background: var(--vx-surface-sunk); border: 1px solid var(--vx-line); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.up_crop { position: relative; font-size: 200px; }
.up_cropbox { position: absolute; inset: 6%; border: 2px solid #38d39f; box-shadow: 0 0 0 2px rgba(56,211,159,.3); }

/* Toast (Sales Management) */
.sm_toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--vx-navy); color: var(--vx-text-inverse); padding: 11px 18px; border-radius: 22px; font-size: 13px; font-weight: 600; z-index: 200; box-shadow: 0 6px 20px rgba(var(--vx-primary-rgb),.35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.sm_toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   EDIT BOOKING (osa 1): RESOURCE, DATE & TIME -paneeli
   ========================================================================== */
.bk_editable { cursor: pointer; position: relative; }
.bk_editable:hover { outline: 1px solid var(--vx-blue); outline-offset: 2px; border-radius: 6px; }
.bk_edit_hint { display: inline-flex; width: 13px; margin-left: 6px; vertical-align: -2px; opacity: .6; }
.bk_edit_hint svg { width: 13px; height: 13px; stroke: var(--vx-blue); }

.vinfopane.pane_dtr { width: clamp(680px, 58vw, 1040px); }
.vinfopane.pane_dtr .vinfopane_body {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.dtr_grid {
  display: grid; grid-template-columns: 340px 1fr; gap: 28px;
  flex: 1; min-height: 0; align-items: stretch;
}
.dtr_left { max-width: 340px; min-height: 0; overflow-y: auto; }
.dtr_right { display: flex; flex-direction: column; min-height: 0; }
@media (max-width: 760px) {
  .dtr_grid { grid-template-columns: 1fr; }
  .vinfopane.pane_dtr .vinfopane_body { overflow-y: auto; }
}

.dtr_block { margin-bottom: 14px; }
.dtr_lbl { font-size: 12px; font-weight: 700; color: var(--vx-muted); margin-bottom: 4px; letter-spacing: .02em; }
.dtr_val { font-size: 13px; color: var(--vx-text); line-height: 1.45; }
.dtr_sel { font-size: 15px; font-weight: 700; color: var(--vx-navy); }
.dtr_times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 16px; }
.dtr_field { margin-bottom: 12px; }
.dtr_field label { display: block; font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text); margin-bottom: 5px; letter-spacing: .02em; }
.dtr_field .vx-input { width: 100%; box-sizing: border-box; }

.dtr_findhead { font-size: 12px; font-weight: 700; color: var(--vx-navy); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dtr_nores { font-weight: 500; color: var(--vx-text); display: inline-flex; align-items: center; gap: 6px; }
.dtr_options { font-size: 12px; font-weight: 700; color: var(--vx-muted); margin: 4px 0 16px; }
.dtr_opt { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--vx-text); margin-top: 7px; }
.dtr_avail_head { font-size: 12px; font-weight: 700; color: var(--vx-navy); margin-bottom: 10px; letter-spacing: .03em; }
.dtr_reslist { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 760px) { .dtr_reslist { max-height: 340px; flex: none; } }
.dtr_res { display: grid; grid-template-columns: 1fr auto auto 26px; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--vx-line); border-radius: 8px; cursor: pointer; }
.dtr_res:hover { border-color: var(--vx-blue); }
.dtr_res.sel { border-color: var(--vx-blue); background: var(--vx-primary-soft); box-shadow: inset 3px 0 0 var(--vx-blue); }
.dtr_res_name { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.dtr_res_action { font-size: 12px; color: var(--vx-muted); }
.dtr_res.sel .dtr_res_action { color: var(--vx-blue); font-weight: 600; }
.dtr_res_avail { font-size: 12px; color: #1f9d57; font-weight: 600; }
.dtr_res_i { width: 22px; height: 22px; border: 1px solid var(--vx-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-style: italic; color: var(--vx-muted); }

/* mini-kalenteri */
.cal { border: 1px solid var(--vx-line); border-radius: 10px; padding: 10px 12px; }
/* Edit date/time/resource: kapea vasen sarake -> kalenteri tayttaa sen siistina neliona,
   ja on samalla yhta levea kuin Start/End -rivi (molemmat .dtr_left:n levyisia). */
.vinfopane.pane_dtr .cal { width: 100%; box-sizing: border-box; }
.vinfopane.pane_dtr .cal_d,
.vinfopane.pane_dtr .cal_wk { display: flex; align-items: center; justify-content: center; padding: 0; aspect-ratio: 1 / 1; }
.cal_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal_month { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.cal_nav { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--vx-navy); border: 1px solid var(--vx-line); }
.cal_nav:hover { background: var(--vx-surface-sunk); }
.cal_row { display: grid; grid-template-columns: 30px repeat(7, 1fr); gap: 2px; }
.cal_dow span { text-align: center; font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); padding: 4px 0; }
.cal_wk { text-align: center; font-size: var(--vx-fs-xs); color: var(--vx-muted); padding: 6px 0; }
.cal_d { text-align: center; font-size: 12.5px; color: var(--vx-text); padding: 6px 0; border-radius: 6px; cursor: pointer; }
.cal_d:hover:not(.empty) { background: var(--vx-primary-soft); }
.cal_d.we { color: var(--vx-muted); }
.cal_d.empty { cursor: default; }
.cal_d.sel { background: var(--vx-blue); color: var(--vx-text-inverse); font-weight: 700; }

/* ---- BILLING INFO -paneeli (Edit booking osa 2) ---- */
.bi_sub { font-size: 12px; font-weight: 700; color: var(--vx-muted); letter-spacing: .04em; margin-bottom: 18px; }
.bi_field { margin-bottom: 20px; }
.bi_field label { display: block; font-size: var(--vx-fs-sm); font-weight: 500; color: var(--vx-text); letter-spacing: .04em; margin-bottom: 8px; }
.bi_field .vx-input { width: 100%; box-sizing: border-box; }
.bi_card { background: var(--vx-surface-2); border: 1px solid var(--vx-line); border-radius: 8px; padding: 14px 16px 4px; margin-bottom: 14px; }
.bi_card .bi_section { margin-top: 0; }
.bi_select { appearance: auto; background: var(--vx-surface); }
/* api-id:54 Get Record Billing Data: resolvoitu maksajakortti (read-only) EDIT
   BILLING INFO -paneelissa. Nayttaa yrityksen/osaston/osoitteen/omistajan. */
.bi_resolved { margin-bottom: 16px; }
.bi_resolved_card { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 8px; padding: 10px 12px; }
.bi_resolved_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); margin-bottom: 4px; }
.bi_resolved_load, .bi_resolved_none { font-size: 12px; color: var(--vx-muted); padding: 4px 0; }
.bi_box { border: 1px solid var(--vx-line); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--vx-text); }
.bi_box b { color: var(--vx-navy); font-weight: 700; }

/* ---- EDIT ORDER ROW(S) -paneeli (Edit booking osa 3) ---- */
.bk_orderrow { cursor: pointer; transition: background .12s, box-shadow .12s; }
.bk_orderrow.sel { background: var(--vx-primary-soft); box-shadow: none; }
.bk_orderrow.sel .bk_order_name { color: var(--vx-blue); }

.oe_rights { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 16px; border: 1px dashed var(--vx-line); border-radius: 8px; background: var(--vx-surface-sunk); }
.oe_rights_tag { font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .06em; color: var(--vx-text-inverse); background: var(--vx-muted); padding: 2px 6px; border-radius: 4px; }
.oe_rights label { font-size: 12px; font-weight: 700; color: var(--vx-muted); }
.oe_rights_sel { flex: 1; min-width: 180px; appearance: auto; }

.oe_sub { font-size: 12px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em; margin-bottom: 14px; }
.oe_form .pe_card { margin-bottom: 12px; }
.oe_form .oe_section { margin-top: 0; }
.oe_note { font-size: 12.5px; color: var(--vx-text); line-height: 1.5; margin-bottom: 12px; }
.oe_list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.oe_litem { font-size: 12.5px; font-weight: 600; color: var(--vx-navy); padding: 7px 10px; border: 1px solid var(--vx-line); border-radius: 6px; background: var(--vx-surface-sunk); }
.oe_field { margin-bottom: 16px; }
.oe_field label { display: block; font-size: 12px; font-weight: 700; color: var(--vx-muted); letter-spacing: .03em; margin-bottom: 6px; }
.oe_inwrap { position: relative; }
.oe_inwrap .vx-input { width: 100%; box-sizing: border-box; }
.oe_inwrap_ic .vx-input { padding-left: 36px; }
.oe_ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--vx-muted); pointer-events: none; }
.oe_ic svg { width: 16px; height: 16px; stroke: var(--vx-muted); }
.oe_unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--vx-muted); }
.oe_price { padding-right: 28px; }
.oe_hint { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin: -8px 0 16px; line-height: 1.4; }

/* ---- SETTINGS-sivu ---- */
.set_wrap { max-width: 980px; display: flex; flex-direction: column; gap: 18px; }
.set_wrap_narrow { max-width: 640px; }
.set_card .set_field { margin-bottom: 16px; }
.set_card .set_field .vx-input, .set_card .set_field .vx-select { width: 100%; }
.set_section_tight { margin-top: 24px; }
.set_card { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 10px; box-shadow: var(--vx-shadow); padding: 20px 22px; }
.set_cardhead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.set_avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--vx-navy); color: var(--vx-text-inverse); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.set_name { font-size: 16px; font-weight: 700; color: var(--vx-navy); }
.set_sub { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.set_section { font-size: 13px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--vx-line); }
.set_section_sub { font-weight: 400; color: var(--vx-muted); letter-spacing: 0; }
.set_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 26px; }
.set_field { display: flex; flex-direction: column; gap: 5px; }
.set_label { font-size: 12px; font-weight: 700; color: var(--vx-muted); letter-spacing: .02em; }
.set_star { color: var(--vx-muted); }

.set_chkrow { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; }
.set_chklabel { font-size: 13px; color: var(--vx-muted); padding-top: 4px; }
.set_chkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; }
.set_chkcol { display: flex; flex-direction: column; gap: 10px; }
.set_chk { font-size: 13px; color: var(--vx-text); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.set_chk input { width: 15px; height: 15px; accent-color: var(--vx-blue); }
.set_chk_hint { font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.set_chk_row { align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--vx-line); }
.set_chk_row:first-of-type { border-top: none; }
.set_chk_row input { margin-top: 2px; }
.set_chk_main { display: flex; flex-direction: column; gap: 3px; }
.set_chk_title { font-weight: 600; color: var(--vx-navy); }
.set_chk_help { font-size: 12px; color: var(--vx-muted); line-height: 1.45; }
.set_actions { display: flex; gap: 12px; padding-bottom: 30px; }

@media (max-width: 760px) {
  .set_grid { grid-template-columns: 1fr; }
  .set_chkrow { grid-template-columns: 1fr; }
  .set_chkgrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   VarianXEditor (jaettu yksinkertainen tekstieditori)
   ========================================================================== */
.vxed { border: 1px solid var(--vx-field-border); border-radius: var(--vx-radius-input); overflow: hidden; background: var(--vx-surface); }
.vxed_bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: var(--vx-surface-sunk); border-bottom: 1px solid var(--vx-line); flex-wrap: wrap; }
.vxed_btn {
  min-width: var(--vx-control-sm); height: var(--vx-control-sm); padding: 0 7px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--vx-navy); font-size: 13px; cursor: pointer; line-height: 1;
}
.vxed_btn:hover { background: var(--vx-surface); border-color: var(--vx-line); }
.vxed_sep { width: 1px; height: 18px; background: var(--vx-line); margin: 0 4px; }
.vxed_area { min-height: 160px; padding: 12px 14px; font-size: 14px; color: var(--vx-text); line-height: 1.6; outline: none; }
.vxed_area:focus { box-shadow: var(--vx-focus-ring); }
.vxed_area h3 { font-size: 15px; font-weight: 700; color: var(--vx-navy); margin: 10px 0 6px; }
.vxed_area p { margin: 0 0 8px; }
.vxed_area ul, .vxed_area ol { margin: 0 0 8px; padding-left: 22px; }
.vxed_area a { color: var(--vx-link); }

/* ==========================================================================
   (?) -kontekstiohje: hover-tooltip + klikkaus-drawer (helpui.js)
   ========================================================================== */
.vx-help { color: var(--vx-muted); cursor: pointer; font-weight: 400; }
.vx-help:hover { color: var(--vx-blue); }

.vxhelp_tip {
  position: fixed; z-index: 9000; max-width: 280px;
  background: #1f2937; color: var(--vx-text-inverse); font-size: 12px; line-height: 1.5;
  padding: 8px 11px; border-radius: 8px; box-shadow: var(--vx-shadow-l);
  pointer-events: none;
}
.vxhelp_tip::after {
  content: ""; position: absolute; top: -5px; left: 14px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #1f2937;
}
.vxhelp_tip_more { display: block; margin-top: 4px; color: #9ec5ff; font-weight: 700; font-size: var(--vx-fs-xs); }

.vxhelp_backdrop { position: fixed; inset: 0; background: rgba(16,32,55,.34); z-index: 9100; }
.vxhelp_drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; z-index: 9200;
  background: var(--vx-surface); box-shadow: -8px 0 24px rgba(0,0,0,.16); display: flex; flex-direction: column;
}
.vxhelp_head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--vx-line); }
.vxhelp_kicker { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--vx-blue); text-transform: uppercase; }
.vxhelp_title { font-size: 18px; font-weight: 700; color: var(--vx-navy); margin-top: 3px; }
.vxhelp_x { font-size: 20px; color: var(--vx-muted); cursor: pointer; line-height: 1; border: none; background: none; }
.vxhelp_x:hover { color: var(--vx-red); }
.vxhelp_body { padding: 18px 20px; overflow: auto; }
.vxhelp_video {
  position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; margin-bottom: 16px;
  background: linear-gradient(135deg,#16294a,#22416e); display: flex; align-items: center; justify-content: center;
}
.vxhelp_video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vxhelp_play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.vxhelp_play svg { width: 24px; height: 24px; fill: var(--vx-blue); margin-left: 3px; }
.vxhelp_article { font-size: 14px; color: var(--vx-text); line-height: 1.65; }
.vxhelp_article h3 { font-size: 15px; font-weight: 700; color: var(--vx-navy); margin: 14px 0 6px; }
.vxhelp_article p { margin: 0 0 10px; }
.vxhelp_article ul, .vxhelp_article ol { margin: 0 0 10px; padding-left: 22px; }
.vxhelp_article a { color: var(--vx-link); }

/* ==========================================================================
   HELP CENTER -sivu
   ========================================================================== */
.hc_tabs { display: inline-flex; border: 1px solid var(--vx-line); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.hc_tab { padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--vx-navy); cursor: pointer; background: var(--vx-surface); border-right: 1px solid var(--vx-line); }
.hc_tab:last-child { border-right: none; }
.hc_tab:hover { background: rgba(var(--vx-primary-rgb),.06); }
.hc_tab.active { background: var(--vx-blue); color: var(--vx-text-inverse); }

/* Help Center Home: Help AI + PDF-ohjeet */
.hc_home { display: flex; gap: 20px; align-items: flex-start; }
.hc_ai { flex: 1.4; min-width: 0; border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface); box-shadow: var(--vx-shadow); padding: 18px 20px; }
.hc_ai_head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.hc_ai_badge { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg,#0077cc,#1e4379); display: flex; align-items: center; justify-content: center; }
.hc_ai_badge svg { width: 20px; height: 20px; stroke: var(--vx-text-inverse); fill: rgba(255,255,255,.18); }
.hc_ai_name { font-size: 16px; font-weight: 700; color: var(--vx-navy); }
.hc_ai_intro { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.hc_ai_window { border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-surface-sunk); padding: 12px; min-height: 150px; max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.hc_ai_msg { font-size: 13px; line-height: 1.5; padding: 8px 11px; border-radius: 10px; max-width: 85%; }
.hc_ai_bot { background: var(--vx-surface); border: 1px solid var(--vx-line); color: var(--vx-text); align-self: flex-start; }
.hc_ai_sources { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--vx-line); font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.hc_ai_srclink { color: var(--vx-navy); font-weight: 600; text-decoration: none; }
.hc_ai_srclink:hover { text-decoration: underline; }
.hc_ai_user { background: var(--vx-blue); color: var(--vx-text-inverse); align-self: flex-end; }
.hc_ai_chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.hc_ai_chip { font-size: 12px; color: var(--vx-blue); background: var(--vx-primary-soft); border: 1px solid var(--vx-border); border-radius: 16px; padding: 5px 12px; cursor: pointer; }
.hc_ai_chip:hover { background: #e0eeff; }
.hc_ai_inputrow { display: flex; gap: 8px; }
.hc_ai_inputrow .vx-input { flex: 1; }
.hc_ai_note { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 8px; }
.hc_support_cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--vx-border); border-radius: 10px; background: #f2f8ff; }
.hc_cta_title { font-size: 14px; font-weight: 700; color: var(--vx-navy); }
.hc_cta_sub { font-size: 12px; color: var(--vx-muted); margin-top: 2px; }
.hc_cta_actions { display: flex; gap: 8px; flex-wrap: wrap; }

.hc_pdfs { flex: 1; min-width: 240px; }
.hc_pdflist { display: flex; flex-direction: column; gap: 10px; }
.hc_pdf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface); box-shadow: var(--vx-shadow); text-decoration: none; }
.hc_pdf:hover { border-color: var(--vx-blue); }
.hc_pdf_ic svg { width: 26px; height: 26px; stroke: var(--vx-red); }
.hc_pdf_body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc_pdf_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.hc_pdf_meta { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 2px; }
.hc_pdf_dl svg { width: 18px; height: 18px; stroke: var(--vx-blue); }

@media (max-width: 860px) { .hc_home { flex-direction: column; } .hc_ai, .hc_pdfs { width: 100%; } }

.hc_layout { display: flex; gap: 18px; align-items: flex-start; }
.hc_list { flex: 0 0 280px; border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface); box-shadow: var(--vx-shadow); overflow: hidden; }
.hc_listitem { padding: 11px 14px; border-bottom: 1px solid var(--vx-line); cursor: pointer; }
.hc_listitem:last-child { border-bottom: none; }
.hc_listitem:hover { background: #f6f9ff; }
.hc_listitem.active { background: var(--vx-primary-soft); border-left: 3px solid var(--vx-blue); padding-left: 11px; }
.hc_li_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.hc_li_key { font-size: var(--vx-fs-xs); color: var(--vx-muted); font-family: "SFMono-Regular", Menlo, monospace; margin-top: 2px; }
.hc_editor { flex: 1; min-width: 0; border: 1px solid var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-surface); box-shadow: var(--vx-shadow); padding: 20px 22px; }
.hc_field { margin-bottom: 16px; }
.hc_field > label { display: block; font-size: 12px; font-weight: 700; color: var(--vx-muted); margin-bottom: 6px; letter-spacing: .02em; }
.hc_actions { display: flex; gap: 10px; margin-top: 18px; }

/* Tooltips-taulukko */
.hc_tiprow { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--vx-line); }
.hc_tiprow_key { font-size: 12px; }
.hc_tiprow_key b { display: block; color: var(--vx-navy); font-size: 13px; }
.hc_tiprow_key span { color: var(--vx-muted); font-family: "SFMono-Regular", Menlo, monospace; font-size: var(--vx-fs-xs); }

@media (max-width: 860px) {
  .hc_layout { flex-direction: column; }
  .hc_list { flex-basis: auto; width: 100%; }
}

/* ================= MESSAGING (Messages) ================= */
/* Header-kirjekuori (viestit) */
.header_msg { position: relative; background: var(--vx-surface-sunk); border: 1px solid transparent; border-radius: var(--vx-radius-md);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  text-decoration: none; transition: background var(--vx-t-fast); color: var(--vx-text-muted); }
.header_msg:hover { background: var(--vx-primary-soft); color: var(--vx-text); }
.header_msg svg { width: 18px; height: 18px; stroke: currentColor; }
.header_msg_badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--vx-blue); color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--vx-surface); }

/* Kaksipaneelinen layout */
.msg_wrap { display: flex; gap: 16px; height: calc(100vh - 208px); min-height: 520px; }

/* Vasen: keskustelulista */
.msg_list { flex: 0 0 320px; display: flex; flex-direction: column; background: var(--vx-panel);
  border: 1px solid var(--vx-line); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); overflow: hidden; }
.msg_list_head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 14px 10px 14px; }
.msg_list_title { font-weight: 700; color: var(--vx-navy); font-size: 16px; }
.msg_search { padding: 0 14px 10px 14px; border-bottom: 1px solid var(--vx-line); }
.msg_search .vx-input { width: 100%; }
.msg_items { flex: 1; overflow: auto; }
.msg_list_empty, .msg_msg_empty { padding: 18px 14px; color: var(--vx-muted); }

.msg_item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--vx-line); text-decoration: none; color: var(--vx-text); position: relative; }
.msg_item:hover { background: var(--vx-surface-sunk); }
.msg_item.active { background: rgba(0,82,146,.08); }
.msg_item.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--vx-blue); }
.msg_item_av, .msg_th_av { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--vx-text-inverse); }
.role_customer { background: #2f6fde; }
.role_kitchen { background: #c9622b; }
.role_property { background: #6b48b8; }
.role_system { background: var(--vx-navy); }
.msg_item_main { flex: 1; min-width: 0; }
.msg_item_top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.msg_item_from { font-weight: 600; color: var(--vx-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg_item_time { color: var(--vx-muted); font-size: 12px; white-space: nowrap; }
.msg_item_sub { display: block; font-size: 13px; color: var(--vx-text); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg_item.unread .msg_item_sub { font-weight: 600; }
.msg_item_snip { display: block; font-size: 12px; color: var(--vx-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg_ctxchip { display: inline-block; margin-top: 6px; font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-blue);
  background: rgba(0,82,146,.08); border-radius: 6px; padding: 1px 7px; }
.msg_item_badge { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--vx-blue); color: var(--vx-text-inverse); font-size: var(--vx-fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; align-self: center; }

/* Oikea: thread */
.msg_thread { flex: 1; display: flex; flex-direction: column; background: var(--vx-panel);
  border: 1px solid var(--vx-line); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); overflow: hidden; min-width: 0; }
.msg_thread_head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--vx-line); }
.msg_th_meta { flex: 1; min-width: 0; }
.msg_th_name { font-weight: 700; color: var(--vx-navy); font-size: 15px; }
.msg_th_role { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-muted); background: var(--vx-border);
  border-radius: 6px; padding: 1px 7px; margin-left: 6px; }
.msg_th_subject { font-size: 13px; color: var(--vx-text); margin-top: 2px; }
.msg_th_ctx { font-size: 12px; font-weight: 600; color: var(--vx-blue); background: rgba(0,82,146,.08);
  border-radius: 6px; padding: 4px 9px; text-decoration: none; white-space: nowrap; }
.msg_th_ctx:hover { background: rgba(0,82,146,.16); }

.msg_bubbles { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--vx-canvas); }
.msg_bubble { max-width: 72%; display: flex; flex-direction: column; }
.msg_bubble.them { align-self: flex-start; }
.msg_bubble.me { align-self: flex-end; align-items: flex-end; }
.msg_bubble_body { border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--vx-line); box-shadow: var(--vx-shadow); }
.msg_bubble.them .msg_bubble_body { background: var(--vx-surface); border-top-left-radius: 4px; }
.msg_bubble.me .msg_bubble_body { background: #e8f1fb; border-color: #cfe2f5; border-top-right-radius: 4px; }
.msg_bubble_body p { margin: 0 0 6px 0; }
.msg_bubble_body p:last-child { margin-bottom: 0; }
.msg_bubble_meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.msg_bubble.me .msg_bubble_meta { flex-direction: row-reverse; }
.msg_bubble_sender { font-weight: 600; }

/* Kanavachipit (toimitettu kautta) */
.msg_chip { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .02em; border-radius: 5px; padding: 1px 6px; text-transform: uppercase; }
.msg_chip_inapp { background: var(--vx-border); color: var(--vx-navy); }
.msg_chip_email { background: var(--vx-info-bg); color: var(--vx-info); }
.msg_chip_sms { background: var(--vx-success-bg); color: #1f7a45; }

/* Composer */
.msg_composer { border-top: 1px solid var(--vx-line); padding: 12px 14px; background: var(--vx-surface); }
.msg_composer_foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.msg_chan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg_chan_label { font-size: 12px; color: var(--vx-muted); font-weight: 600; }
.msg_chan_tg { font-size: 12px; font-weight: 600; color: var(--vx-muted); background: #f1f4f9;
  border: 1px solid var(--vx-line); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: all .15s; }
.msg_chan_tg:hover { border-color: var(--vx-blue); }
.msg_chan_tg.on { background: var(--vx-blue); color: var(--vx-text-inverse); border-color: var(--vx-blue); }

/* New message -lomake */
.msg_newform { padding: 18px 20px; overflow: auto; }
.msg_newform_head { font-weight: 700; color: var(--vx-navy); font-size: 16px; margin-bottom: 14px; }
.msg_field { display: block; margin-bottom: 14px; }
.msg_field_lbl { display: block; font-size: 12px; font-weight: 600; color: var(--vx-muted); margin-bottom: 5px; }
.msg_field .vx-input, .msg_field .vx-select { width: 100%; }
.msg_newform .msg_composer_foot { border-top: 1px solid var(--vx-line); padding-top: 14px; }
.msg_newform_actions { display: flex; gap: 10px; }

/* Tyhjatila */
.msg_empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--vx-muted); }
.msg_empty_ic { font-size: 42px; line-height: 1; opacity: .5; }

/* Home: viestirivi linkkina (saily ulkoasu) */
a.home_msg { text-decoration: none; color: var(--vx-text); }
a.home_msg:hover { background: var(--vx-surface-sunk); }

@media (max-width: 860px) {
  .msg_wrap { flex-direction: column; height: auto; }
  .msg_list { flex-basis: auto; max-height: 300px; }
  .msg_thread { min-height: 480px; }
}

/* ============ ADVERTS/BILLBOARD: type (offer vs announcement) ============ */
/* Sales Management - kampanjakortit */
.adv_typebadge { position: absolute; top: 10px; left: 10px; font-size: var(--vx-fs-xs); font-weight: 800;
  letter-spacing: .05em; border-radius: 4px; padding: 3px 8px; }
.adv_typebadge_offer { background: var(--vx-primary-soft); color: var(--vx-blue); }
.adv_typebadge_announcement { background: #fde3cb; color: #a8560f; }
.adv_typebadge_billboard { background: #d7f0e3; color: #1c7a52; }
.adv_card.adv_type_announcement .adv_card_img { background: linear-gradient(135deg, #fdf0e2, #fbf6ef); }
.adv_card.adv_type_billboard .adv_card_img { background: linear-gradient(135deg, #e3f5ec, #eff9f4); }

/* Mobiilin ilmoitustaulu (read-only) - mobile-billboard.js */
.m-bbsec { margin-bottom: 18px; }
.m-bbsechead { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--m-muted, #6b7280); margin: 4px 4px 8px; }
.m-bbcard { display: flex; gap: 12px; background: var(--m-card, #fff); border: 1px solid var(--m-border, #e5e7eb);
  border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.m-bbemoji { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px; font-size: 24px;
  display: flex; align-items: center; justify-content: center; background: #f2f4f7; }
.m-bbmain { min-width: 0; flex: 1; }
.m-bbprovider { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-blue, #005292); margin-bottom: 2px; }
.m-bbtitle { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
.m-bbtext { font-size: 13px; color: var(--m-muted, #6b7280); line-height: 1.4; }
.m-bbmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.m-bbdates { font-size: var(--vx-fs-xs); color: var(--m-muted, #6b7280); }
.m-bbprice { font-size: 13px; font-weight: 800; color: var(--vx-blue, #005292); }
.m-bbcta { font-size: 12px; font-weight: 700; margin-top: 6px; }

/* Mobiilin Navigate-sheet - mobile-navigate.js */
.m-navroom { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.m-navaddr { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--m-muted, #6b7280); margin-bottom: 10px; }
.m-navaddr svg { width: 16px; height: 16px; flex: 0 0 16px; }
.m-navactions { margin-top: 14px; }
.m-navactions .m-btn { width: 100%; }
.m-navactions .m-btn svg { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
.m-navactions .m-btn[disabled] { opacity: .5; pointer-events: none; }
.m-navsoon { opacity: .75; border-style: dashed; }
.m-navsoonhead { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.m-navsoonhead svg { width: 18px; height: 18px; }
.m-navsoontext { margin: 6px 0 0; font-size: 13px; color: var(--m-muted, #6b7280); }

/* Home - Offers & announcements */
.home_camp_head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.home_camp_head .home_sectionlabel { margin: 0; }
.home_camp_filter { display: flex; gap: 6px; }
.home_camp_fchip { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-muted); background: #f1f4f9;
  border: 1px solid var(--vx-line); border-radius: 999px; padding: 2px 10px; cursor: pointer; transition: all .15s; }
.home_camp_fchip:hover { border-color: var(--vx-blue); }
.home_camp_fchip.active { background: var(--vx-blue); color: var(--vx-text-inverse); border-color: var(--vx-blue); }
.home_camp_img { position: relative; }
.home_camp_typebadge { position: absolute; top: 8px; left: 8px; font-size: var(--vx-fs-xs); font-weight: 800;
  letter-spacing: .04em; border-radius: 4px; padding: 2px 7px; }
.home_camp_typebadge_offer { background: rgba(0,82,146,.14); color: var(--vx-blue); }
.home_camp_typebadge_announcement { background: #fde3cb; color: #a8560f; }
.home_camp_typebadge_billboard { background: #d7f0e3; color: #1c7a52; }
.home_camp_announcement .home_camp_img { background: linear-gradient(135deg, #fdeede, #fbf6ef); }
.home_camp_billboard .home_camp_img { background: linear-gradient(135deg, #e3f5ec, #eff9f4); }
.home_camp_empty { color: var(--vx-muted); font-size: 13px; padding: 6px 2px; }

/* ===== Administration (kuori, vaihe 1) ===== */
/* Sama kuin #salesStage: ei toista vaakapaddingia #maindata:n paalle. */
#adminStage { padding: 18px 0 60px; }
.body_module_admin .sm_body { padding-left: 0; }
.ad_header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ad_header_title { font-size: 20px; font-weight: 700; color: var(--vx-navy); }
.ad_actingas { display: flex; align-items: center; gap: 8px; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 6px 10px; }
.ad_actingas_lbl { font-size: var(--vx-fs-xs); font-weight: 600; color: var(--vx-muted); text-transform: uppercase; letter-spacing: .04em; }
.ad_actingas .vx-select { min-width: 210px; }

.ad_section { padding-top: 14px; }
.ad_section_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ad_section_actions { display: flex; gap: 8px; flex-shrink: 0; }
.ad_section_ttl { font-size: 16px; font-weight: 700; color: var(--vx-navy); letter-spacing: .02em; }
.ad_section_desc { font-size: 13px; color: var(--vx-muted); margin-top: 4px; max-width: 640px; line-height: 1.45; }

.ad_stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ad_stat { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 12px 18px; min-width: 120px; }
.ad_stat_n { display: block; font-size: 22px; font-weight: 700; color: var(--vx-navy); line-height: 1.1; }
.ad_stat_l { display: block; font-size: var(--vx-fs-xs); color: var(--vx-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

.ad_skeleton { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 16px; }
.ad_sk_toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ad_sk_search { max-width: 240px; }
.ad_sk_row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px dashed var(--vx-line); }
.ad_sk_row.ad_sk_l0 { border-top: 0; }
.ad_sk_l1 { padding-left: 22px; }
.ad_sk_l2 { padding-left: 44px; }
.ad_sk_caret { color: #c4cbd4; font-size: var(--vx-fs-xs); }
.ad_sk_bar { width: 90px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--vx-border), var(--vx-surface-sunk)); }
.ad_sk_label { font-size: 13px; color: var(--vx-muted); font-weight: 600; }
.ad_sk_hint { margin-top: 14px; font-size: 12px; color: #9aa3ad; font-style: italic; }

.ad_linkbox { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ad_linkbox_txt { font-size: 13px; color: var(--vx-muted); max-width: 520px; line-height: 1.45; }
.ad_linkbox .btn svg, .ad_section_head .btn svg { width: 16px; height: 16px; vertical-align: -3px; stroke: currentColor; }

.ad_noaccess { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 48px 24px; text-align: center; margin-top: 10px; }
.ad_noaccess_ic { font-size: 34px; }
.ad_noaccess_ttl { font-size: 17px; font-weight: 700; color: var(--vx-navy); margin-top: 10px; }
.ad_noaccess_sub { font-size: 13px; color: var(--vx-muted); margin-top: 6px; }

.ad_pane_desc { font-size: 13px; color: var(--vx-muted); line-height: 1.5; }
.ad_pane_soon { display: flex; align-items: center; gap: 12px; background: #f5f7f9; border: 1px dashed var(--vx-field-border); border-radius: var(--vx-radius); padding: 16px; margin-top: 14px; font-size: 13px; color: var(--vx-text); }
.ad_pane_soon_ic { font-size: 24px; }

/* ===== Administration / USERS (lista + editori) ===== */
.adu_toolbar { margin-bottom: 12px; }
.adu_search { max-width: 340px; }
.adu_listwrap { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); overflow: hidden; }
.adu_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adu_table thead th { text-align: left; padding: 10px 14px; font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--vx-line); background: var(--vx-surface-alt); }
.adu_table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--vx-line); color: var(--vx-text); vertical-align: middle; }
.adu_table tbody tr:last-child td { border-bottom: 0; }
.adu_table tbody tr { cursor: pointer; }
.adu_table tbody tr:hover { background: rgba(0,82,146,.04); }
.adu_name { font-weight: 600; color: var(--vx-navy); }
.adu_email { color: var(--vx-muted); }
.adu_actc { text-align: right; }
.adu_lvl { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--vx-fs-xs); font-weight: 700; background: var(--vx-border); color: var(--vx-muted); }
.adu_lvl64, .adu_lvl128 { background: var(--vx-primary-soft); color: var(--vx-blue); }
.adu_empty { padding: 28px 16px; text-align: center; color: var(--vx-muted); font-size: 13px; }

/* View-nakyma paneelissa */
.adu_v_sec { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-navy); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--vx-line); }
.adu_v_row { display: flex; gap: 12px; padding: 6px 0; font-size: 13px; }
.adu_v_lbl { width: 150px; flex-shrink: 0; color: var(--vx-muted); }
.adu_v_val { color: var(--vx-text); }
.adu_v_empty { color: #b6bcc4; }
.adu_chip { display: inline-block; padding: 2px 9px; margin: 0 4px 4px 0; border-radius: 999px; background: rgba(0,82,146,.10); color: var(--vx-blue); font-size: 12px; font-weight: 600; }
.adu_chip_block { background: rgba(200,40,40,.10); color: #c22; }

/* Edit-lomake */
.adu_2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.adu_chkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.adu_chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--vx-text); padding: 3px 0; cursor: pointer; }
.adu_chk input { width: 15px; height: 15px; accent-color: var(--vx-blue); }
.adu_hint { font-size: 12px; color: var(--vx-muted); font-style: italic; margin: -2px 0 8px; }
.adu_addon { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-warning); background: #ffedcc; border: 1px solid #f0cd8a; border-radius: 4px; padding: 1px 5px; }

/* ===== Administration / PROVIDER GROUPS ===== */
.adpg_cust { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.adpg_cust th { text-align: left; font-weight: 700; color: var(--vx-muted); border-bottom: 1px solid var(--vx-line); padding: 5px 8px; }
.adpg_cust td { padding: 5px 8px; border-bottom: 1px solid var(--vx-line); color: var(--vx-navy); }
.adpg_radios { display: flex; gap: 16px; align-items: center; padding-top: 4px; }
.adpg_radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--vx-navy); cursor: pointer; }

/* ===== Administration / PROFILES + Access Levels ===== */
.adpr_table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); overflow: hidden; }
.adpr_table th { text-align: left; font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .03em; color: var(--vx-muted); padding: 9px 12px; border-bottom: 1px solid var(--vx-line); background: var(--vx-surface-alt); }
.adpr_table td { padding: 9px 12px; border-bottom: 1px solid var(--vx-line); color: var(--vx-navy); }
.adpr_table tr:last-child td { border-bottom: none; }
.adpr_table tr:hover td { background: rgba(0,82,146,.03); }
.adpr_name { font-weight: 600; color: var(--vx-blue); cursor: pointer; }
.adpr_name:hover { text-decoration: underline; }
.adpr_c { text-align: center; width: 90px; color: var(--vx-muted); }
.adpr_actions { text-align: right; white-space: nowrap; width: 1%; }
.adpr_actions .btn { margin-left: 6px; }

/* Dual-list (ENABLED / DISABLED) */
.dl_filter { margin-bottom: 10px; max-width: 260px; }
.dl { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 8px; align-items: stretch; }
.dl_col { border: 1px solid var(--vx-line); border-radius: var(--vx-radius); overflow: hidden; display: flex; flex-direction: column; min-height: 280px; }
.dl_head { font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .05em; color: var(--vx-text-inverse); padding: 7px 10px; text-align: center; }
.dl_head_on { background: #2e9e5b; }
.dl_head_off { background: #c0392b; }
.dl_items { flex: 1; overflow-y: auto; max-height: 360px; padding: 4px; }
.dl_item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; color: var(--vx-navy); cursor: pointer; }
.dl_item:hover { background: rgba(0,82,146,.05); }
.dl_name { flex: 1; }
.dl_meta { display: inline-flex; align-items: center; gap: 8px; }
.dl_mode { font-size: var(--vx-fs-xs); padding: 2px 4px; border: 1px solid var(--vx-line); border-radius: 5px; }
.dl_def { display: inline-flex; align-items: center; gap: 3px; font-size: var(--vx-fs-xs); color: var(--vx-muted); }
.dl_empty { color: var(--vx-muted); font-size: 12px; padding: 8px; text-align: center; }
.dl_mid { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dl_mid .btn { padding: 6px 0; }

/* Visitor installation config tables */
.vinst_sec { font-size: 13px; font-weight: 800; color: var(--vx-navy); margin: 14px 0 6px; }
.vinst_tablewrap { border: 1px solid var(--vx-line); border-radius: var(--vx-radius); overflow: auto; }
.vinst_table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vinst_table th { text-align: left; font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-muted); padding: 6px 9px; border-bottom: 1px solid var(--vx-line); background: var(--vx-surface-alt); white-space: nowrap; }
.vinst_table td { padding: 5px 9px; border-bottom: 1px solid var(--vx-line); color: var(--vx-navy); white-space: nowrap; }
.vinst_table tr:last-child td { border-bottom: none; }
.vinst_table tr:hover td { background: rgba(0,82,146,.03); }
.vinst_link { color: var(--vx-blue); cursor: pointer; }
.vinst_link:hover { text-decoration: underline; }

/* ===== Administration / SYSTEM (site settings) ===== */
.adsys_form { max-width: 720px; }
.adsys_cattabs { max-width: 720px; }
.adsys_group {
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius);
}
.adsys_gtitle {
  font-size: 12px; font-weight: 700; color: var(--vx-navy); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--vx-border);
}
.adsys_hint { font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 8px; line-height: 1.45; }
/* Draft-saitin banneri (Administration -> System, tuotu saitti) */
.adsys_draft {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  background: var(--vx-warning-bg); border: 1px solid rgba(var(--vx-warning-rgb),.45); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 16px;
}
.adsys_draft_txt { font-size: 13px; color: var(--vx-warning); }
.adsys_draft_txt b { color: var(--vx-warning); }
.adsys_draft .adsys_hint { margin-top: 4px; color: var(--vx-text-muted); }
.adsys_draft .vx-btn { white-space: nowrap; }
/* Luonnos-merkki saittivalitsimessa (shell user menu) */
.um_site_draft {
  font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--vx-warning);
  background: var(--vx-warning-bg); border: 1px solid rgba(var(--vx-warning-rgb),.45); border-radius: 4px;
  padding: 1px 4px; margin-left: 6px; vertical-align: middle;
}
.adsys_langs { display: flex; gap: 18px; flex-wrap: wrap; padding: 2px 0; }
.adsys_langchk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.adsys_langchk input { cursor: pointer; }
.adsys_summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.adsys_chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: var(--vx-fs-xs); font-weight: 600; background: #f3f4f6; color: var(--vx-muted); border: 1px solid var(--vx-line);
}
.adsys_chip.on { background: #e8f2fb; color: var(--vx-navy); border-color: #b8d4eb; }
.adsys_eflist { display: flex; flex-direction: column; gap: 10px; }
.adsys_efcard {
  border: 1px solid var(--vx-line); border-radius: 10px; overflow: hidden; background: var(--vx-surface-alt);
}
.adsys_efcard.off { opacity: .72; background: var(--vx-surface-sunk); }
.adsys_efhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--vx-surface); border-bottom: 1px solid var(--vx-line);
}
.adsys_eftitle { font-size: 12px; font-weight: 700; color: var(--vx-navy); }
.adsys_toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.adsys_toggle input { accent-color: var(--vx-blue); }
.adsys_togglepill {
  min-width: 34px; text-align: center; font-size: var(--vx-fs-xs); font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px; background: #e5e7eb; color: var(--vx-muted);
}
.adsys_efcard:not(.off) .adsys_togglepill { background: #dbeafe; color: var(--vx-blue); }
.adsys_efbody { padding: 12px; }
.adsys_efbody .pe_field { margin-bottom: 10px; }
.adsys_commands { display: flex; justify-content: flex-end; margin-top: 8px; }
.nb_noroomhint { font-size: 13px; color: var(--vx-muted); margin: 0 0 14px; line-height: 1.5; }
.nb_noresource_chk {
  font-weight: 400; font-size: 12px; color: var(--vx-muted);
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
}
.nb_e1block { margin-top: 4px; }
.nb_extralabel { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.vx-req { color: var(--vx-red); font-weight: 700; }
.nb_reveal { animation: nbReveal .25s ease-out; }
@keyframes nbReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Administration / BILLING (puu) ===== */
.adb_cattabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--vx-line); }
.adb_cattab { padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--vx-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.adb_cattab:hover { color: var(--vx-blue); }
.adb_cattab.active { color: var(--vx-navy); border-bottom-color: var(--vx-blue); }
.adb_treewrap { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 6px 8px; }
.adb_row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; }
.adb_row:hover { background: rgba(0,82,146,.04); }
.adb_l1 { padding-left: 26px; }
.adb_l2 { padding-left: 52px; }
.adb_caret { width: 16px; text-align: center; color: var(--vx-muted); cursor: pointer; font-size: var(--vx-fs-xs); flex-shrink: 0; user-select: none; }
.adb_caret_none { cursor: default; color: transparent; }
.adb_node { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.adb_icon { flex-shrink: 0; font-size: 13px; width: 18px; text-align: center; color: var(--vx-muted); }
.adb_label { font-weight: 600; color: var(--vx-navy); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adb_l2 .adb_label { color: var(--vx-text); }
.adb_sub { font-size: 12px; color: var(--vx-muted); white-space: nowrap; }
.adb_node:hover .adb_label { color: var(--vx-blue); }
.adb_rowedit { flex-shrink: 0; }

/* ===== Billing Search (jaettu komponentti: New Booking + Bookings edit billing) ===== */
.bsearch { position: relative; width: 100%; }
.bsearch_trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--vx-control-h); padding: 8px 12px;
  border: 1px solid var(--vx-field-border); border-radius: 8px; background: var(--vx-surface);
  cursor: pointer; font-size: 14px; color: var(--vx-navy); transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast);
}
.bsearch_trigger:hover { border-color: var(--vx-gray-400); }
.bsearch.bsearch_open .bsearch_trigger {
  border-color: var(--vx-primary); box-shadow: var(--vx-focus-ring);
}
.bsearch_ph { color: #9aa3af; }
.bsearch_chev { width: 18px; height: 18px; color: #9aa3af; flex-shrink: 0; }
.bsearch_val { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bsearch_val_main { font-weight: 600; color: var(--vx-navy); }
.bsearch_val_sub { font-size: 12px; color: var(--vx-muted); }
.bsearch_clear { flex-shrink: 0; color: #9aa3af; font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; }
.bsearch_clear:hover { color: #ef4444; }

.bsearch_pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14); overflow: hidden;
}
.bsearch_inputwrap { position: relative; padding: 10px; border-bottom: 1px solid var(--vx-line); }
.bsearch_search_ic {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #9aa3af; pointer-events: none;
}
.bsearch_input {
  width: 100%; box-sizing: border-box; height: var(--vx-control-h); min-height: var(--vx-control-h); padding: 0 12px 0 36px;
  border: 1px solid var(--vx-line); border-radius: 8px; font-size: 14px; color: var(--vx-navy);
}
.bsearch_input:focus { outline: none; border-color: var(--vx-primary); box-shadow: var(--vx-focus-ring); }
.bsearch_results { max-height: 320px; overflow-y: auto; }
.bsearch_item { padding: 10px 14px; border-bottom: 1px solid var(--vx-border); cursor: pointer; }
.bsearch_item:last-of-type { border-bottom: none; }
.bsearch_item:hover, .bsearch_item:focus { background: #f3f8fc; outline: none; }
.bsearch_grp { font-size: 13px; color: var(--vx-navy); }
.bsearch_cust { font-size: 13px; color: #374151; }
.bsearch_loc { font-size: 13px; color: var(--vx-muted); }
.bsearch_code {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px;
  background: var(--vx-border); color: var(--vx-blue); font-size: 12px; font-weight: 600;
}
.bsearch_hint, .bsearch_foot { padding: 12px 14px; font-size: 12px; color: var(--vx-muted); }
.bsearch_foot { border-top: 1px solid var(--vx-line); background: var(--vx-surface-alt); }
/* Tuotehaun rivit (Sales Management - Add order row) */
.bsearch_item_prod { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bsearch_pmain { min-width: 0; }
.bsearch_pname { font-size: 14px; font-weight: 600; color: var(--vx-navy); }
.bsearch_pgroup { font-size: 12px; color: var(--vx-muted); }
.bsearch_pprice { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--vx-blue); }
.msg_ctxbanner {
  margin-bottom: 12px; padding: 8px 12px; border-radius: 8px;
  background: #eef6fc; color: var(--vx-navy); font-size: 13px; font-weight: 600;
}

/* ======================================================================
   BOOKING TYPES + INTERACTIVE FLOOR PLAN
   ====================================================================== */
/* Tyyppivalitsin (New Booking: "What do you want to book?") */
.nb_typepicker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 6px;
}
.nb_typecard {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px; border: 1px solid var(--vx-field-border); border-radius: var(--vx-radius);
  background: var(--vx-surface); cursor: pointer; text-align: left; color: var(--vx-text);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.nb_typecard:hover { border-color: var(--vx-blue); box-shadow: var(--vx-shadow); }
.nb_typecard.selected { border-color: var(--vx-blue); background: #eef6fc; box-shadow: var(--vx-focus); }
.nb_typecard_icon { width: 30px; height: 30px; color: var(--vx-blue); }
.nb_typecard_icon svg { width: 100%; height: 100%; }
.nb_typecard_label { font-size: 14px; font-weight: 600; color: var(--vx-navy); }
.nb_typecard_sub { font-size: 12px; color: var(--vx-muted); }

/* Pikavalinta (otsikon vieressa, kun useita tyyppeja paalla) */
.nb_typeswitch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.nb_typechip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: var(--vx-control-h-compact);
  border: 1px solid var(--vx-field-border); border-radius: 999px; background: var(--vx-surface);
  font-size: 12px; font-weight: 600; color: var(--vx-muted); cursor: pointer;
}
.nb_typechip:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.nb_typechip svg { width: 15px; height: 15px; }
.nb_typechip.on { border-color: var(--vx-blue); background: #eef6fc; color: var(--vx-navy); }

/* Suosikkitahti: aseta varaustyyppi oletukseksi suoraan New Bookingista */
.nb_favstar {
  color: #c4ccd4; cursor: pointer; line-height: 1; user-select: none;
  transition: color .12s, transform .12s;
}
.nb_favstar:hover { color: #f0a500; transform: scale(1.15); }
.nb_favstar.on { color: #f0a500; }
.nb_typecard .nb_favstar { position: absolute; top: 8px; right: 10px; font-size: 17px; }
.nb_typechip .nb_favstar { font-size: 13px; margin-left: 1px; }

/* Desk: kartta/lista -view-toggle (chip-rivin oikeassa reunassa, ei vie pystytilaa) */
.nb_typeswitch_row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nb_typeswitch_row .nb_typeswitch { margin-bottom: 0; flex: 1 1 auto; }
.nb_viewtoggle { margin-left: auto; display: inline-flex; border: 1px solid var(--vx-field-border);
  border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.nb_viewbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px;
  min-height: var(--vx-control-h-compact); padding: 0; border: 0; background: var(--vx-surface);
  color: var(--vx-muted); cursor: pointer; }
.nb_viewbtn + .nb_viewbtn { border-left: 1px solid var(--vx-field-border); }
.nb_viewbtn:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.nb_viewbtn.on { background: #eef6fc; color: var(--vx-navy); }

/* Desk: listanakyma kaKyttaK samaa .newrecord_resourceitem -komponenttia kuin
   resurssilista (yhdenmukainen "Select"-nappi). Vain header/haku/scroll taKssaK. */
.nb_mapcard .newrecord_resourcelist_header { padding: 14px 16px 0; margin-bottom: 10px; }
.nb_mapcard .newrecord_resourcelist { padding: 0 16px 16px; }
.nb_desklist_header { display: flex; align-items: center; gap: 12px; }
.nb_desklist_search { margin-left: auto; max-width: 200px; }
.nb_desklist_scroll { max-height: 600px; overflow: auto; gap: 6px; }
/* Tiiviimmat rivit ty\u00f6pistelistalle (lyhyet nimet -> enemman n\u00e4kyviin) */
.nb_desklist_scroll .newrecord_resourceitem { padding: 5px 14px; }
.nb_desklist_scroll .newrecord_resourceitem_name { font-size: 13px; }
.nb_desklist_scroll .newrecord_resourceitem .btn { height: var(--vx-control-sm); min-height: var(--vx-control-sm); padding: 0 14px; }

/* Pohjakartta */
.fp_root { display: flex; flex-direction: column; gap: 10px; }
.fp_title { font-size: 13px; font-weight: 700; color: var(--vx-navy); }
.fp_legend { display: flex; gap: 14px; font-size: 12px; color: var(--vx-muted); }
.fp_leg { display: inline-flex; align-items: center; gap: 6px; }
.fp_leg::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); }
.fp_leg_free::before { background: var(--vx-surface-sunk); border: 1.5px dashed #c2cedd; }
.fp_leg_busy::before { background: #46566b; border-color: #46566b; }
.fp_leg_sel::before { background: var(--vx-primary-soft); border-color: var(--vx-blue); }

.fp_mapwrap { position: relative; width: 100%; }
/* Viewport leikkaa zoomatun/panoroidun kartan (overflow:hidden). */
.fp_viewport { position: relative; width: 100%; overflow: hidden; border-radius: 16px; }
.fp_viewport.fp_pannable { cursor: grab; }
.fp_viewport.fp_panning { cursor: grabbing; }
/* Pehmea "parking-halli" -pinta: lampoa neutraali tausta, iso pyoristys, hieno sisavarjo. */
.fp_map {
  position: relative; width: 100%; border: 1px solid var(--vx-line);
  border-radius: 16px; overflow: hidden; padding: 0;
  background-color: #f3f5f9;
  box-shadow: inset 0 1px 2px rgba(20,33,61,.05);
  will-change: transform;
}
/* Zoom-kontrollit (oikea alakulma) */
.fp_zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 25;
  display: flex; gap: 3px; padding: 3px;
  background: rgba(255,255,255,.92); border: 1px solid var(--vx-line);
  border-radius: 9px; box-shadow: var(--vx-shadow);
}
.fp_zoombtn {
  width: var(--vx-control-h-compact); height: var(--vx-control-h-compact); border: none; background: transparent;
  font-size: 17px; font-weight: 700; line-height: 1; color: var(--vx-navy);
  cursor: pointer; border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.fp_zoombtn:hover { background: var(--vx-primary-soft); color: var(--vx-blue); }
.fp_zoombtn:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
/* Kuvataustaiset pohjakartat (New Booking): kuva maaraa korkeuden, paikat sen paalla */
.fp_mapwrap_img .fp_map { aspect-ratio: auto; }
.fp_bgimg { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.fp_spot {
  position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid transparent; border-radius: 12px; padding: 4px; margin: 0;
  font: inherit; cursor: pointer; transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease;
}
.fp_spotlabel { font-size: var(--vx-fs-xs); font-weight: 700; pointer-events: none; }

/* Vapaa: vaalea, katkoviivareunus, himmea label -> "tyhja ruutu" */
.fp_spot.fp_free { background: var(--vx-surface-alt); border: 1.5px dashed #cbd6e4; color: #94a2b4; }
.fp_spot.fp_free:hover {
  background: var(--vx-primary-soft); border-color: var(--vx-blue); border-style: solid; color: var(--vx-navy);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20,33,61,.12);
}
/* Varattu: auto-silhuetti vaalealla solulla (ei klikattava) */
.fp_spot.fp_busy { background: #eaeef4; border: 1.5px solid #e0e6ee; cursor: not-allowed; }
/* Valittu (oma vapaa paikka): VarianX-sininen korostus */
.fp_spot.fp_selected {
  background: var(--vx-primary-soft); border: 2px solid var(--vx-blue); color: var(--vx-navy); box-shadow: var(--vx-focus);
}
.fp_spot:focus { outline: none; box-shadow: var(--vx-focus); }

/* Ylhaalta kuvattu auto varatussa ruudussa */
.fp_car { display: block; width: 100%; height: 100%; color: #51637a; filter: drop-shadow(0 10px 16px rgba(20,33,61,.35)); }
.fp_spot.fp_busy .fp_car { color: #51637a; }
.fp_desk_glyph { display: block; width: 68%; height: 68%; margin: auto; color: #51637a; filter: drop-shadow(0 6px 10px rgba(20,33,61,.28)); }
.fp_spot.fp_busy .fp_desk_glyph { color: #51637a; }

.fp_tooltip {
  position: absolute; z-index: 30; pointer-events: none; max-width: 220px;
  padding: 8px 10px; border-radius: 8px; background: #1f2937; color: var(--vx-text-inverse);
  font-size: 12px; box-shadow: var(--vx-shadow-l);
}
.fp_tip_name { font-weight: 700; margin-bottom: 2px; }
.fp_tip_attrs { color: #cbd5e1; }
.fp_tip_state { margin-top: 4px; font-weight: 600; }
.fp_tip_state.free { color: #86efac; }
.fp_tip_state.busy { color: #fca5a5; }

/* Lista-fallback */
.fp_list { display: flex; flex-direction: column; gap: 8px; }
.fp_listitem {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--vx-line); border-radius: 8px; background: var(--vx-surface);
}
.fp_listitem.fp_busy { background: #fdf1f3; }
.fp_listitem.fp_selected { border-color: var(--vx-blue); background: #eef6fc; }
.fp_listmain { flex: 1; min-width: 0; }
.fp_listname { font-size: 14px; font-weight: 600; color: var(--vx-navy); }
.fp_listattrs { font-size: 12px; color: var(--vx-muted); }
.fp_liststate { font-size: 12px; font-weight: 600; color: var(--vx-muted); }
/* Vaihe C: hillitty vihje milloin varattu työpiste vapautuu (desk-lista). */
.nb_desklist_freeat { display: block; font-size: 11px; font-weight: 500; color: var(--vx-muted); opacity: .8; margin-top: 2px; text-align: right; }
/* Vaihe 1 A "oma varaus": oma pöytä listalla erottuu (sininen "Yours" + korostus). */
.nb_desklist_mine { color: #1d4ed8; }
.nb_desklist_mineitem { box-shadow: inset 3px 0 0 #2563eb; }

/* Vaihe 2 J: suosikkipöytä. Tähtinappi rivissä + pikanapin palkki listan yläreunassa. */
.nb_favstar { flex-shrink: 0; padding: 2px 6px; border: none; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--vx-muted); border-radius: 6px; }
.nb_favstar:hover { background: var(--vx-surface-sunk); color: #f59e0b; }
.nb_favstar.on { color: #f59e0b; }
.nb_desklist_favbar { margin-bottom: 8px; }
.nb_desklist_favbar .btn { width: 100%; }
.nb_desklist_favbar.is-taken, .nb_desklist_favbar.is-mine {
  font-size: 12px; font-weight: 600; color: var(--vx-muted); padding: 6px 10px;
  background: var(--vx-surface-sunk); border-radius: 8px; }
.nb_desklist_favbar.is-mine { color: #1d4ed8; }

/* "Availability" -aikajana (newbooking, app.js showAvailabilityPop) - 06
   Resources/Search per tunti, VAIN live-tilassa. */
.nb_avail_pop {
  position: fixed; z-index: 320; width: 300px;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(var(--vx-primary-rgb),.2); padding: 12px 14px;
  font-size: 13px; color: var(--vx-text);
}
.nb_avail_pop[hidden] { display: none; }
.nb_avail_title { font-weight: 700; color: var(--vx-navy); margin-bottom: 8px; }
.nb_avail_load { color: var(--vx-muted); font-size: 12px; }
.nb_avail_bar { display: flex; gap: 2px; height: 22px; }
.nb_avail_slot { flex: 1; border-radius: 3px; }
.nb_avail_slot.free { background: #2ea36b; }
.nb_avail_slot.busy { background: var(--vx-danger); }
.nb_avail_slot.unknown { background: #e4e8ee; }
.nb_avail_hours { display: flex; justify-content: space-between; font-size: var(--vx-fs-xs); color: var(--vx-muted); margin-top: 3px; }
.nb_avail_next { margin-top: 8px; font-weight: 600; font-size: 12px; color: var(--vx-navy); }
.fp_empty { padding: 14px; font-size: 13px; color: var(--vx-muted); }

/* Read-only (locator) -tila: valittu paikka korostuu, muut himmenevat, ei klikattavia */
.fp_readonly .fp_spot { cursor: default; }
.fp_spot.fp_readonly_dim { background: #eef1f4; border-color: #d4dae0; color: #9aa6b2; opacity: .75; }
.fp_spot.fp_readonly_dim:hover { transform: none; box-shadow: none; }
.fp_readonly .fp_spot.fp_selected { box-shadow: 0 0 0 3px rgba(31,108,191,.35); animation: fpPulse 1.6s ease-in-out infinite; }
@keyframes fpPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(31,108,191,.30); } 50% { box-shadow: 0 0 0 6px rgba(31,108,191,.12); } }
.fp_listitem.fp_readonly_dim { opacity: .7; }

/* Bookings-detail: sijainti pohjakartalla */
.bk_location { margin-top: 14px; padding: 24px; }
.bk_location_hint { font-size: 13px; color: var(--vx-muted); margin: 4px 0 12px; }
.bk_location_map { max-width: 520px; }
.bk_location_frame { display: block; width: 100%; max-width: 640px; height: 380px; border: 1px solid var(--vx-border); border-radius: 10px; background: #c8d0da; }

/* Kalenteri: parkki/desk-varauksen sijainti-popup */
.cal_locpop {
  position: fixed; z-index: 60; display: none; width: 320px; max-width: 92vw;
  background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 10px;
  box-shadow: var(--vx-shadow-l); padding: 12px;
}
.cal_locpop_head { font-size: 13px; color: var(--vx-navy); margin-bottom: 10px; padding-right: 18px; position: relative; }
.cal_locpop_close { position: absolute; top: -2px; right: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--vx-muted); }
.cal_locpop_close:hover { color: var(--vx-navy); }
.cal_locpop_body { min-height: 60px; }

/* DATE & TIME -kortin taitto (Vesku 2.9.2026): kalenteri nuolen taakse, jotta
   vasemman palstan filtterit mahtuvat kuvaan. Kiinni = vain valittu pvm + ajat. */
.nb_dt_toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--vx-border, #dbe1ea);
  border-radius: 7px; background: var(--vx-card, #fff); color: var(--vx-navy, #24324a);
  cursor: pointer; line-height: 1; }
.nb_dt_toggle:hover { background: var(--vx-primary-soft); color: var(--vx-blue, #2f6df6); }
.nb_dt_toggle:focus-visible { outline: none; box-shadow: var(--vx-focus-ring); }
.nb_dt_chevron { font-size: 12px; transition: transform .15s ease; }
#dateTimeCard.nb_dt_is_collapsed .nb_dt_chevron { transform: rotate(-90deg); }
#dateTimeCard.nb_dt_is_collapsed #calendar { display: none; }
/* section-header on flex? varmistetaan että toggle asettuu oikealle */
#dateTimeCard .vx-section-header { display: flex; align-items: center; gap: 6px; }

/* Pohjakartan alue/kerros-valitsin */
.nb_mapfilter { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nb_mapfilter > div { flex: 1; min-width: 140px; }

/* New Booking desk (Vesku 2.9.2026): FIND A RESOURCE siirretty vasempaan (kapea
   300px) palstaan day pickerin alle -> alue/ryhmä pinotaan allekkain. */
.nb_mapfilter_side { flex-direction: column; gap: 12px; margin-bottom: 0; }
.nb_mapfilter_side > div { flex: none; width: 100%; min-width: 0; }
/* Kartta täyttää oikean palstan: ei ylimääräistä otsikkoa/paddingia kortissa. */
.nb_mapcard { padding: 0; overflow: hidden; }
.nb_mapcard #fpMount { display: block; width: 100%; }
body.body_module_page_newbooking .vx-card.nb_mapcard { padding: 0; }

/* Admin: resource-editorin attribuuttikentat */
.adsys_typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.adres_attrs { border: 1px solid var(--vx-line); border-radius: 10px; padding: 12px; background: var(--vx-surface-alt); margin-bottom: 12px; }
.adres_attrs_title { font-size: 12px; font-weight: 700; color: var(--vx-navy); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }

/* ===== FLOOR PLAN EDITOR (Administration) ===== */
.fpe_wrap { margin-top: 6px; }
.fpe_toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fpe_toolbar .fpe_hint { flex: 1; }
.fpe_hint { font-size: 12px; color: var(--vx-muted); line-height: 1.5; }
.fpe_listtable { width: 100%; border-collapse: collapse; }
.fpe_listtable th { text-align: left; font-size: 12px; color: var(--vx-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--vx-line); }
.fpe_listtable td { padding: 10px; border-bottom: 1px solid var(--vx-border); font-size: 13px; color: var(--vx-text); vertical-align: middle; }
.fpe_rowact { display: flex; gap: 6px; justify-content: flex-end; }
.fpe_empty { color: var(--vx-muted); text-align: center; padding: 24px; }

.fpe_editbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fpe_editbar_sp { flex: 1; }
.fpe_edittitle { font-size: 15px; font-weight: 700; color: var(--vx-navy); }
.fpe_editgrid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .fpe_editgrid { grid-template-columns: 1fr; } }
.fpe_form { min-width: 0; }
.fpe_form .vx-label { margin-top: 12px; }
.fpe_form .vx-label-first { margin-top: 0; }
.fpe_sechead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--vx-navy); margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--vx-line); }
.fpe_bgtabs { display: inline-flex; border: 1px solid var(--vx-line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.fpe_bgtab { padding: 7px 16px; background: var(--vx-surface); border: none; font: inherit; font-size: 13px; color: var(--vx-muted); cursor: pointer; }
.fpe_bgtab.active { background: var(--vx-blue); color: var(--vx-text-inverse); font-weight: 600; }
.fpe_bggrid, .fpe_bgimg_ctl { display: flex; flex-direction: column; gap: 4px; }
.fpe_file { font-size: 13px; }
.fpe_bgimg_ctl .btn { align-self: flex-start; margin-top: 6px; }
#fpeAddSpot.active { background: var(--vx-blue); color: var(--vx-text-inverse); border-color: var(--vx-blue); }

.fpe_inspector { margin-top: 12px; }
.fpe_inspbox { border: 1px solid var(--vx-line); border-radius: 10px; padding: 12px; background: var(--vx-surface-alt); }
.fpe_insphead { font-size: 12px; font-weight: 700; color: var(--vx-navy); margin-bottom: 4px; }
.fpe_2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fpe_3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fpe_rowtool { border: 1px solid var(--vx-line); border-radius: 10px; padding: 12px; background: var(--vx-surface-alt); display: flex; flex-direction: column; gap: 8px; }
.fpe_rowtool .vx-label { margin-top: 0; }
.fpe_rowtool #fpeAddRow { margin-top: 4px; }
.fpe_rotrow { display: flex; align-items: center; gap: 8px; }
.fpe_rotinput { width: 84px; flex: 0 0 auto; }
.fpe_rotquick { display: flex; gap: 4px; flex-wrap: wrap; }
.fpe_rotquick .btn { padding: 0 8px; height: var(--vx-control-h-compact); min-height: var(--vx-control-h-compact); }
.fpe_delspot { margin-top: 10px; color: #b4232f; border-color: #e6b3b8; }

.fpe_canvaswrap { min-width: 0; }
.fpe_zoombar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fpe_zoombtn {
  width: var(--vx-control-sm); height: var(--vx-control-sm); border: 1px solid var(--vx-line); background: var(--vx-surface);
  font-size: 17px; font-weight: 700; line-height: 1; color: var(--vx-navy);
  cursor: pointer; border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.fpe_zoombtn:hover { background: var(--vx-primary-soft); border-color: var(--vx-blue); color: var(--vx-blue); }
.fpe_zoomlbl { font-size: 12px; color: var(--vx-muted); margin-left: 4px; min-width: 42px; }
.fpe_viewport { position: relative; width: 100%; overflow: hidden; border-radius: var(--vx-radius); }
.fpe_viewport.fpe_pannable { cursor: grab; }
.fpe_viewport.fpe_panning { cursor: grabbing; }
.fpe_canvas {
  position: relative; width: 100%; border: 1px solid var(--vx-line); border-radius: var(--vx-radius);
  background-color: var(--vx-surface-2); overflow: hidden; user-select: none;
  will-change: transform;
}
.fpe_canvas_empty { aspect-ratio: 8 / 4; display: flex; align-items: center; justify-content: center; }
.fpe_noimg { color: var(--vx-muted); font-size: 13px; }
.fpe_bg { display: block; width: 100%; height: auto; pointer-events: none; }
.fpe_spot {
  position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #7bbf7b; border-radius: 6px; background: rgba(205,236,205,.78);
  color: #1f5d1f; cursor: move; transition: box-shadow .1s;
}
.fpe_spot.unlinked { border-color: #d4a73a; background: rgba(245,225,170,.8); color: #7a5a12; }
.fpe_spot.sel { border-color: var(--vx-blue); background: rgba(188,220,245,.85); color: var(--vx-navy); box-shadow: var(--vx-focus); z-index: 5; }
.fpe_spotlbl { font-size: var(--vx-fs-xs); font-weight: 700; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.fpe_canvashint { margin-top: 8px; }

/* ---- Floor plan VIEWER: koriste-elementit (decor) bussikartan tyyliin ---- */
.fp_decor { position: absolute; box-sizing: border-box; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.fp_decor_rect { background: var(--vx-primary-soft); border: 1px solid var(--vx-border); border-radius: 10px; }
.fp_dec_recttext { position: absolute; top: 6px; left: 9px; font-size: var(--vx-fs-xs); font-weight: 600; color: #7688a3; letter-spacing: .02em; }
.fp_decor_label { color: var(--vx-navy); }
.fp_dec_label { font-size: 12px; font-weight: 700; color: #46566b; white-space: nowrap; }
.fp_decor_landmark { background: var(--vx-surface); border: 1px solid #e0e6ee; border-radius: 10px; color: #5a6b82; flex-direction: column; gap: 2px; box-shadow: 0 1px 2px rgba(20,33,61,.05); }
.fp_dec_ic { width: 42%; height: 42%; max-width: 26px; max-height: 26px; color: #5a6b82; }
.fp_dec_ic svg { width: 100%; height: 100%; display: block; }
.fp_dec_lmlabel { font-size: var(--vx-fs-xs); font-weight: 700; color: var(--vx-text-muted); white-space: nowrap; }

/* ===== FLOOR PLAN EDITOR: 2.5D-tason tyokalut (tool rail, decor, align...) ===== */
.fpe_editbar { flex-wrap: wrap; }
.fpe_toolrail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; padding: 6px; background: var(--vx-surface-2); border: 1px solid var(--vx-line); border-radius: 10px; }
.fpe_tool { padding: 6px 10px; border: 1px solid var(--vx-line); background: var(--vx-surface); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--vx-navy); cursor: pointer; white-space: nowrap; }
.fpe_tool:hover { background: var(--vx-primary-soft); border-color: var(--vx-blue); }
.fpe_tool.active { background: var(--vx-blue); color: var(--vx-text-inverse); border-color: var(--vx-blue); font-weight: 600; }
.fpe_lmsel { width: auto; min-width: 120px; padding: 6px 8px; font-size: 12.5px; opacity: .55; }
.fpe_lmsel.active { opacity: 1; }
.fpe_railsp { flex: 1; }
.fpe_snaptog { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--vx-muted); white-space: nowrap; }
.fpe_snapsize { width: 64px; padding: 5px 6px; }

.fpe_alignbar { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; padding: 5px 8px; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 9px; box-shadow: var(--vx-shadow); }
.fpe_albtn { min-width: var(--vx-control-sm); height: var(--vx-control-sm); border: 1px solid var(--vx-line); background: var(--vx-surface); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--vx-navy); display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.fpe_albtn:hover:not(:disabled) { background: var(--vx-primary-soft); border-color: var(--vx-blue); color: var(--vx-blue); }
.fpe_albtn:disabled { opacity: .4; cursor: default; }
.fpe_alsp { width: 1px; height: 20px; background: var(--vx-line); margin: 0 4px; }

.fpe_marquee { position: absolute; z-index: 20; border: 1.5px dashed var(--vx-blue); background: rgba(31,108,191,.10); pointer-events: none; }
.fpe_marquee[hidden] { display: none; }

.fpe_previewpane { border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 14px; background: var(--vx-surface); }
#fpePreview.active { background: var(--vx-blue); color: var(--vx-text-inverse); border-color: var(--vx-blue); }

.fpe_details { margin: 4px 0; }
.fpe_details > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--vx-navy); padding: 6px 0; }
.fpe_insprow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fpe_insprow .btn { margin-top: 0; }
.fpe_chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--vx-muted); }
.fpe_range { width: 100%; }

/* Editorin decor-elementit (valittavia, siirrettavia) */
.fpe_decorel { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: move; border-radius: 8px; }
.fpe_decorel_rect { background: var(--vx-primary-soft); border: 1px dashed var(--vx-gray-400); color: var(--vx-text-muted); }
.fpe_decorel_label { background: transparent; border: 1px dashed transparent; }
.fpe_decorel_label:hover { border-color: #c7d3e3; }
.fpe_decorel_landmark { background: var(--vx-surface); border: 1px solid #dbe2ec; color: #5a6b82; }
.fpe_dec_wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.fpe_dec_ic { width: 22px; height: 22px; }
.fpe_dec_ic svg { width: 100%; height: 100%; display: block; }
.fpe_dec_txt { font-size: var(--vx-fs-xs); font-weight: 700; white-space: nowrap; }
.fpe_decorel.sel { border-color: var(--vx-blue) !important; border-style: solid; box-shadow: var(--vx-focus); z-index: 6; }
.fpe_decorel.locked, .fpe_spot.locked { cursor: default; }
.fpe_decorel.hidden, .fpe_spot.hidden { opacity: .38; }
.fpe_lockic { position: absolute; top: 1px; right: 2px; font-size: var(--vx-fs-xs); pointer-events: none; }

/* ===== LOGIN / PASSWORD RESET (VarianX-brandi) ===== */
.lg_body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.lg_stage {
  position: relative; min-height: 100vh; overflow: hidden; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 4vw;
  padding: 40px clamp(20px, 6vw, 110px);
  /* Sama ilme kuin Home-sivun sinisessä bannerissa (home_hero): sininen gradientti
     puoliläpinäkyvänä hero-bg.png:n päällä. */
  background:
    linear-gradient(120deg, rgba(0,119,204,.86) 0%, rgba(30,67,121,.90) 70%, rgba(16,57,112,.94) 100%),
    url("assets/hero-bg.png") center center / cover no-repeat,
    #103970;
}
/* Pehmeä valohehku oikeaan ylakulmaan (kuten home_hero::after) */
.lg_stage::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 420px; height: 420px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}

/* Vaihtoehto B (Ollin taustakuva) - vaihdetaan napista (.lg_alt) */
.lg_stage.lg_alt {
  background: url("assets/login-bg-b.png") center center / cover no-repeat, #0d2244;
}
/* Kuvassa on jo oma kuviointi -> ei erillista hehkua/raitaa B:ssa */
.lg_stage.lg_alt::after { display: none; }
/* Taustanvaihtonappi (Olli valitsee) */
.lg_bgtoggle {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--vx-text-inverse);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(4px); transition: background .12s, border-color .12s;
}
.lg_bgtoggle:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }
.lg_bgtoggle::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: linear-gradient(135deg, #2f7fc7, #1e4379); border: 1px solid rgba(255,255,255,.6); }
/* Kielivalitsin (login) */
.lg_langswitch { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30); backdrop-filter: blur(4px); }
.lg_langbtn { min-width: 36px; padding: 5px 10px; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--vx-text-inverse); background: transparent; transition: background .12s, color .12s; }
.lg_langbtn:hover { background: rgba(255,255,255,.18); }
.lg_langbtn.current { background: var(--vx-surface); color: var(--vx-navy, #1e4379); }
.lg_brand { flex: 1 1 0; display: flex; justify-content: center; position: relative; z-index: 1; }
.lg_logo { width: clamp(180px, 26vw, 380px); height: auto; }
.lg_panel { flex: 0 0 auto; position: relative; z-index: 1; }
.lg_card {
  width: min(92vw, 380px); background: var(--vx-surface); border-radius: 22px;
  padding: 34px 34px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.38);
}
.lg_welcome { font-size: 14px; color: var(--vx-text-muted); margin-bottom: 4px; }
.lg_welcome b { font-weight: 700; }
.lg_title { font-size: 34px; font-weight: 700; color: var(--vx-text); margin: 0 0 16px; letter-spacing: -.01em; }
.lg_title_sm { font-size: 20px; letter-spacing: .03em; }
.lg_label { display: block; font-size: 13px; color: var(--vx-text); margin: 14px 0 6px; }
.lg_input {
  width: 100%; box-sizing: border-box; height: var(--vx-control-lg); min-height: var(--vx-control-lg); padding: 0 13px; border: 1px solid var(--vx-field-border);
  border-radius: var(--vx-radius-lg); background: var(--vx-surface-sunk); font-size: 14px; color: var(--vx-text); outline: none;
  transition: border-color var(--vx-t-fast), box-shadow var(--vx-t-fast), background var(--vx-t-fast);
}
.lg_input:focus { border-color: var(--vx-primary); background: var(--vx-surface); box-shadow: var(--vx-focus-ring); }
.lg_row_right { text-align: right; margin: 8px 0 2px; }
.lg_row_center { text-align: center; margin-top: 14px; }
.lg_link { color: var(--vx-primary); font-size: 13px; text-decoration: none; cursor: pointer; }
.lg_link:hover { text-decoration: underline; }
.lg_btn {
  width: 100%; margin-top: 16px; height: var(--vx-control-lg); min-height: var(--vx-control-lg); padding: 0 16px; border: none; border-radius: var(--vx-radius-lg);
  background: var(--vx-primary); color: var(--vx-text-inverse); font-size: 15px;
  font-weight: 600; cursor: pointer; transition: filter var(--vx-t-fast), opacity var(--vx-t-fast);
}
.lg_btn:hover { filter: brightness(1.05); }
.lg_btn:disabled { opacity: .6; cursor: default; }
.lg_btn_ms {
  margin-top: 12px; background: var(--vx-surface); color: var(--vx-text); border: 1px solid var(--vx-field-border);
  display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600;
}
.lg_btn_ms:hover { background: var(--vx-surface-sunk); filter: none; }
.lg_ms_ic { width: 18px; height: 18px; flex: 0 0 auto; }
.lg_or { display: flex; align-items: center; text-align: center; color: var(--vx-text-subtle); font-size: 12px; margin: 16px 0 2px; }
.lg_or::before, .lg_or::after { content: ""; flex: 1; height: 1px; background: var(--vx-border); }
.lg_or span { padding: 0 10px; }
.lg_err { margin-top: 12px; color: var(--vx-danger); font-size: 13px; background: var(--vx-danger-bg); border: 1px solid var(--vx-border); border-radius: 8px; padding: 8px 10px; }
.lg_hint { margin-top: 16px; font-size: var(--vx-fs-xs); color: var(--vx-text-muted); line-height: 1.5; }
.lg_text { font-size: 13px; color: var(--vx-text); line-height: 1.5; margin: 8px 0; }
.lg_req { background: var(--vx-surface-sunk); border: 1px solid var(--vx-border); border-radius: 10px; padding: 10px 12px; margin: 8px 0 4px; }
.lg_req_h { font-size: 13px; color: #374151; margin-bottom: 4px; }
.lg_req ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: #4b5563; }
.lg_req li { margin: 2px 0; }
@media (max-width: 780px) {
  .lg_stage { flex-direction: column; gap: 26px; justify-content: flex-start; padding-top: 8vh; }
  .lg_logo { width: 200px; }
}

/* ======================================================================
   INFO DIRECTORY (Directory / Keys / Order Keys / Pending Orders)
   Nojaa vx-card / vx-list-row / vinfopane -komponentteihin.
   ====================================================================== */
.dir_tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vx-line); margin-bottom: 18px; }
.dir_tab {
  border: none; background: none; font-family: inherit; cursor: pointer;
  padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--vx-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dir_tab:hover { color: var(--vx-navy); }
.dir_tab.active { color: var(--vx-blue); border-bottom-color: var(--vx-blue); }
.dir_body { min-height: 300px; }

/* Toolbar (haku + suodattimet) */
.dir_toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.dir_searchwrap { flex: 1 1 240px; min-width: 200px; }
.dir_search { width: 100%; }
.dir_filter { width: auto; min-width: 150px; }
.dir_check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vx-text); white-space: nowrap; }
.dir_check input { width: 15px; height: 15px; accent-color: var(--vx-blue); }
.dir_toolbar_right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dir_meta { font-size: 12px; color: var(--vx-muted); margin-bottom: 8px; }
.dir_listcard { padding: 0; overflow: hidden; }
.dir_empty { padding: 28px 20px; text-align: center; color: var(--vx-muted); font-size: 14px; }
.dir_empty.sm { padding: 12px; text-align: left; }
.dir_muted { color: var(--vx-muted); }

/* Kontaktilista */
.dir_row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--vx-line); cursor: pointer; }
.dir_row:last-child { border-bottom: none; }
.vx-list.vx-density-compact .dir_row { padding: 8px 18px; }
.dir_avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--vx-primary-soft); color: var(--vx-navy); font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dir_avatar.lg { width: 52px; height: 52px; font-size: 17px; }
.dir_row_main { flex: 1; min-width: 0; }
.dir_row_name { font-size: 14px; font-weight: 600; color: var(--vx-navy); display: flex; align-items: center; gap: 8px; }
.dir_row_sub { font-size: 12.5px; color: var(--vx-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir_row_side { display: flex; align-items: center; gap: 8px; }
.dir_row_acts { display: flex; align-items: center; gap: 4px; }
.dir_act {
  display: inline-flex; align-items: center; justify-content: center; width: var(--vx-control-sm); height: var(--vx-control-sm);
  border-radius: 8px; color: var(--vx-blue); border: 1px solid var(--vx-line); background: var(--vx-surface);
}
.dir_act:hover { border-color: var(--vx-blue); background: var(--vx-primary-soft); }
.dir_act svg { width: 16px; height: 16px; }
.dir_tag { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 10px; }
.dir_tag_varian { background: #e6f0ff; color: var(--vx-blue); }
.dir_keychip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--vx-navy); background: var(--vx-warning-bg); border: 1px solid rgba(var(--vx-warning-rgb),.40); border-radius: 20px; padding: 2px 9px; }
.dir_keychip svg { width: 14px; height: 14px; }

/* Kontakti-/avaindetalji paneelissa */
.vinfopane.pane_dir { width: clamp(480px, 46vw, 720px); }
.dir_detail_head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dir_detail_name { font-size: 18px; font-weight: 700; color: var(--vx-navy); }
.dir_detail_sub { font-size: 13px; color: var(--vx-muted); margin-top: 2px; }
.dir_section { padding: 14px 0; border-top: 1px solid var(--vx-line); }
.dir_section:first-of-type { border-top: none; padding-top: 0; }
.dir_section_title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-navy); margin-bottom: 10px; }
.dir_section_title span { color: var(--vx-muted); font-weight: 600; }
.dir_frow { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 13px; }
.dir_fk { color: var(--vx-muted); flex-shrink: 0; }
.dir_fv { color: var(--vx-text); text-align: right; word-break: break-word; }
.dir_attrs { display: flex; flex-wrap: wrap; gap: 8px; }
.dir_attr { font-size: 12px; color: var(--vx-muted); background: #f4f6f9; border: 1px solid var(--vx-line); border-radius: 8px; padding: 4px 10px; }
.dir_attr.on { background: var(--vx-success-bg); border-color: #bfe6cd; color: #1f7a44; }
.dir_attr b { color: inherit; }
.dir_keylist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dir_keyitem { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dir_keyitem_serial { font-weight: 600; color: var(--vx-navy); }
.dir_keyitem_desc { color: var(--vx-muted); }

/* Avaimet: tilastochipit */
.dir_stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dir_stat { font-size: 13px; color: var(--vx-text); background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 20px; padding: 5px 14px; }
.dir_stat b { font-size: 15px; margin-right: 4px; }
.dir_stat_total b { color: var(--vx-navy); }
.dir_stat_avail b { color: #1f7a44; }
.dir_stat_loan b { color: #b26b00; }

/* Avainlista (group-ryhmitelty) */
.dir_kgroup_head {
  background: #f4f6f9; padding: 7px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--vx-navy); border-bottom: 1px solid var(--vx-line); border-top: 1px solid var(--vx-line);
}
.dir_kgroup_head span { color: var(--vx-muted); font-weight: 600; }
.dir_krow { display: grid; grid-template-columns: 22px 90px 1fr 150px 100px auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--vx-line); cursor: pointer; }
.vx-list.vx-density-compact .dir_krow { padding: 6px 16px; }
.dir_colorchip { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #c7ced8; display: inline-block; }
.dir_colorchip.lg { width: 40px; height: 40px; border-radius: 8px; }
.dir_kserial { font-weight: 600; color: var(--vx-navy); font-size: 13px; }
.dir_kdesc { font-size: 13px; color: var(--vx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir_kholder { font-size: 12.5px; color: var(--vx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir_kloc { font-size: 12.5px; color: var(--vx-muted); }
.dir_kstatus { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 12px; white-space: nowrap; text-align: center; }
.dir_kstatus_avail { background: var(--vx-success-bg); color: #1f7a44; }
.dir_kstatus_loan { background: #fdeecf; color: #b26b00; }

/* Timeline (avaimen historia / tilauksen aikajana) */
.dir_timeline { display: flex; flex-direction: column; gap: 8px; }
.dir_tl_item { display: flex; gap: 12px; font-size: 13px; position: relative; padding-left: 16px; }
.dir_tl_item::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--vx-blue); }
.dir_tl_date { color: var(--vx-muted); flex-shrink: 0; min-width: 130px; }
.dir_tl_ev { color: var(--vx-text); }

/* Lomakkeet (New Key, Order Keys) */
.dir_form, .dir_orderform { display: flex; flex-direction: column; gap: 14px; }
.dir_orderform { max-width: 720px; }
.dir_orderform_title { font-size: 16px; font-weight: 700; color: var(--vx-navy); margin-bottom: 4px; }
.dir_field { display: flex; flex-direction: column; gap: 6px; }
.dir_field > span { font-size: 12px; color: var(--vx-muted); }
.dir_field2 { display: flex; gap: 12px; }
.dir_field2 .dir_field { flex: 1; }
.dir_colorradios { display: flex; flex-wrap: wrap; gap: 12px; }
.dir_colorradio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.dir_orderform_actions { margin-top: 8px; }

/* Segmented control (user type / request type) */
.dir_seggroup { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--vx-field-border); border-radius: 8px; overflow: hidden; }
.dir_seg { border: none; background: var(--vx-surface); font-family: inherit; cursor: pointer; padding: 8px 14px; font-size: 13px; color: var(--vx-text); border-right: 1px solid var(--vx-line); }
.dir_seg:last-child { border-right: none; }
.dir_seg:hover:not(.active) { background: var(--vx-primary-soft); }
.dir_seg.active { background: var(--vx-blue); color: var(--vx-text-inverse); }

/* Sites & Regions -puu */
.dir_tree { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--vx-line); border-radius: 8px; padding: 6px; }
.dir_treehead { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--vx-navy); cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.dir_treehead:hover { background: var(--vx-primary-soft); }
.dir_treehead svg { width: 16px; height: 16px; transition: transform .15s; }
.dir_treenode.open .dir_treehead svg { transform: rotate(90deg); }
.dir_treekids { display: none; flex-direction: column; gap: 4px; padding: 2px 0 6px 26px; }
.dir_treenode.open .dir_treekids { display: flex; }
.dir_treeleaf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vx-text); }
.dir_treeleaf input { width: 15px; height: 15px; accent-color: var(--vx-blue); }

/* Status-suodatinchipit (Pending Orders) */
.dir_chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dir_chip { border: 1px solid var(--vx-field-border); background: var(--vx-surface); font-family: inherit; cursor: pointer; padding: 6px 14px; font-size: 13px; border-radius: 20px; color: var(--vx-text); }
.dir_chip:hover:not(.active) { border-color: var(--vx-blue); color: var(--vx-blue); }
.dir_chip.active { background: var(--vx-blue); border-color: var(--vx-blue); color: var(--vx-text-inverse); }

/* Tilauslista */
.dir_orow { display: grid; grid-template-columns: 80px 1.2fr 1.4fr 1.2fr 110px; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--vx-line); cursor: pointer; font-size: 13px; }
.vx-list.vx-density-compact .dir_orow { padding: 7px 18px; }
.dir_orow_head { cursor: default; font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vx-muted); background: #f4f6f9; }
.dir_orow_head:hover { background: #f4f6f9; }
.dir_ono { font-weight: 700; color: var(--vx-navy); }
.dir_ostatus { font-size: var(--vx-fs-xs); font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 12px; text-align: center; white-space: nowrap; display: inline-block; }
.dir_ostatus_new { background: var(--vx-danger-bg); color: var(--vx-danger); }
.dir_ostatus_pending { background: #fdeecf; color: #b26b00; }
.dir_ostatus_escalated { background: var(--vx-warning-bg); color: var(--vx-warning); }
.dir_ostatus_completed { background: var(--vx-success-bg); color: #1f7a44; }
.dir_ostatus_canceled { background: var(--vx-gray-100); color: #6b7280; }

.dir_regionlist { margin: 0; padding-left: 18px; font-size: 13px; color: var(--vx-text); }
.dir_regionlist li { margin: 3px 0; }
.dir_notebox { font-size: 13px; color: var(--vx-text); background: #f9fafb; border: 1px solid var(--vx-line); border-radius: 8px; padding: 10px 12px; }

@media (max-width: 900px) {
  .dir_krow { grid-template-columns: 22px 1fr auto; row-gap: 4px; }
  .dir_kholder, .dir_kloc { display: none; }
  .dir_orow { grid-template-columns: 60px 1fr 90px; }
  .dir_orow > span:nth-child(3), .dir_orow > span:nth-child(4) { display: none; }
}

/* ===== SUPPORT / TIKETÖINTI (PoC) ======================================== */
#stStage { padding: 18px 22px 40px; }
.st-muted { color: var(--vx-muted); font-weight: 400; }

/* PoC-roolinvaihdin */
.st-personabar { background: var(--vx-warning-bg); border: 1px solid rgba(var(--vx-warning-rgb),.40); border-radius: var(--vx-radius); padding: 10px 12px; margin-bottom: 16px; }
.st-personabar-head { font-size: 13px; color: #7a5a12; margin-bottom: 8px; }
.st-persona-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.st-persona-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--vx-surface); border: 1px solid var(--vx-field-border); border-radius: 8px; padding: 7px 12px; cursor: pointer; text-align: left; }
.st-persona-btn:hover { border-color: var(--vx-blue); }
.st-persona-btn.st-persona-on { border-color: var(--vx-blue); background: var(--vx-primary-soft); box-shadow: var(--vx-focus); }
.st-persona-label { font-weight: 600; font-size: 13px; color: var(--vx-navy); }
.st-persona-desc { font-size: var(--vx-fs-xs); color: var(--vx-muted); }

/* Layout */
.st-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.st-col-main { min-width: 0; }
.st-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.st-toolbar h2 { font-size: 18px; color: var(--vx-navy); margin: 0; }

/* Kortit */
.st-card { background: var(--vx-panel); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); padding: 14px 16px; }
.st-card h3 { margin: 0 0 10px; font-size: 14px; color: var(--vx-navy); }
.st-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--vx-line); }
.st-kv span { color: var(--vx-muted); }
.st-kv b { color: var(--vx-text); text-align: right; }
.st-quota { margin-top: 10px; }
.st-quota-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.st-quota-bar { height: 8px; background: var(--vx-surface-2); border-radius: 6px; overflow: hidden; }
.st-quota-bar > i { display: block; height: 100%; background: var(--vx-btn-primary); }

/* Counts */
.st-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.st-count { font-size: 12px; color: var(--vx-muted); background: var(--vx-surface-2); border: 1px solid var(--vx-line); border-radius: 20px; padding: 3px 10px; }
.st-count-total { background: var(--vx-primary-soft); border-color: var(--vx-border); color: var(--vx-navy); }

/* Filters */
.st-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.st-input { border: 1px solid var(--vx-field-border); border-radius: var(--vx-radius-input); padding: 8px 11px; font-size: 13px; background: var(--vx-surface); color: var(--vx-text); }
.st-input:focus { outline: none; border-color: var(--vx-blue); box-shadow: var(--vx-focus); }
.st-input-s { padding: 5px 8px; border-radius: 8px; font-size: 12.5px; }
#stSearch { flex: 1; min-width: 180px; }

/* Table */
.st-table { width: 100%; border-collapse: collapse; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); overflow: hidden; }
.st-table th { text-align: left; font-size: var(--vx-fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--vx-muted); padding: 9px 10px; background: var(--vx-surface-2); border-bottom: 1px solid var(--vx-line); }
.st-table td { padding: 9px 10px; font-size: 13px; border-bottom: 1px solid var(--vx-line); vertical-align: top; }
.st-ticket-row { cursor: pointer; }
.st-ticket-row:hover td { background: #f3f8fd; }
.st-td-id { font-variant-numeric: tabular-nums; color: var(--vx-muted); white-space: nowrap; }
.st-td-title { font-weight: 600; color: var(--vx-navy); }
.st-td-scope { font-size: 12px; }
.st-empty { text-align: center; color: var(--vx-muted); padding: 26px 10px; }

/* Chips (status) */
.st-chip { display: inline-block; font-size: var(--vx-fs-xs); font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.st-chip-open { background: var(--vx-info-bg); color: var(--vx-info); }
.st-chip-in_progress { background: var(--vx-warning-bg); color: var(--vx-warning); }
.st-chip-waiting { background: var(--vx-primary-soft); color: var(--vx-primary); }
.st-chip-resolved { background: var(--vx-success-bg); color: var(--vx-success); }
.st-chip-closed { background: var(--vx-gray-100); color: var(--vx-text-muted); }

/* Tier badge */
.st-tier { display: inline-block; font-size: var(--vx-fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.st-tier-L1 { background: var(--vx-info-bg); color: var(--vx-info); }
.st-tier-L2 { background: var(--vx-warning-bg); color: var(--vx-warning); }
.st-tier-L3 { background: var(--vx-gray-100); color: var(--vx-purple); }

/* Priority-badge listassa (vain high/urgent näytetään) */
.st-pri { display: inline-block; font-size: var(--vx-fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 20px; vertical-align: middle; text-transform: uppercase; letter-spacing: .02em; }
.st-pri-high { background: var(--vx-warning-bg); color: var(--vx-warning); }
.st-pri-urgent { background: var(--vx-danger-bg); color: var(--vx-danger); }

/* Form */
.st-form { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.st-field { display: flex; flex-direction: column; gap: 4px; }
.st-field > span { font-size: 12px; color: var(--vx-muted); }
.st-field-row { display: flex; gap: 12px; }
.st-field-row .st-field { flex: 1; }
.st-form-actions { display: flex; justify-content: flex-end; }

/* Help AI */
.st-helpai { background: var(--vx-primary-soft); border: 1px solid var(--vx-border); border-radius: 8px; padding: 10px 12px; }
.st-helpai-head { font-size: 12px; font-weight: 600; color: var(--vx-navy); margin-bottom: 6px; }
.st-helpai-item { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 6px; padding: 8px 10px; margin-top: 6px; }
.st-helpai-item b { font-size: 12.5px; color: var(--vx-navy); }
.st-helpai-item p { margin: 4px 0 0; font-size: 12px; color: var(--vx-text); }

/* Detail */
.st-detail { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); padding: 16px; }
.st-detail-head { display: flex; align-items: center; gap: 12px; }
.st-detail-head h2 { margin: 0; font-size: 17px; color: var(--vx-navy); }
.st-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0; font-size: 12.5px; color: var(--vx-muted); }
.st-detail-meta b { color: var(--vx-text); }
.st-esc-log { background: #faf5fc; border: 1px solid #ecd9f2; border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-bottom: 12px; }
.st-esc-item { color: var(--vx-text); padding: 2px 0; }
.st-adminbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--vx-surface-2); border: 1px solid var(--vx-line); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; }
.st-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--vx-muted); }

/* Thread */
.st-thread-title { font-size: 13px; color: var(--vx-navy); margin: 8px 0; }
.st-thread { display: flex; flex-direction: column; gap: 10px; }
.st-msg { border: 1px solid var(--vx-line); border-radius: 8px; padding: 9px 12px; background: var(--vx-surface); }
.st-msg-internal { background: var(--vx-warning-bg); border-color: rgba(var(--vx-warning-rgb),.35); }
.st-msg-head { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }
.st-msg-time { margin-left: auto; }
.st-msg-body { font-size: 13px; color: var(--vx-text); }
.st-rolebadge { font-size: var(--vx-fs-xs); font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--vx-gray-100); color: var(--vx-text-muted); }
.st-role-enduser { background: var(--vx-gray-100); color: var(--vx-text-muted); }
.st-role-l1 { background: var(--vx-info-bg); color: var(--vx-info); }
.st-role-l2 { background: var(--vx-warning-bg); color: var(--vx-warning); }
.st-role-l3 { background: #f3e2f6; color: #8a2a9c; }
.st-role-external { background: #e3f6ef; color: #0a6b52; }
.st-role-system { background: var(--vx-gray-100); color: var(--vx-text-muted); }
.st-visbadge { font-size: var(--vx-fs-xs); font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--vx-warning-bg); color: var(--vx-warning); }

/* Ulkoinen escalointi (tiketti asiakkaan omaan järjestelmään) */
.st-external { margin: 0 0 14px; }
.st-ext-status { background: #e9f7f1; border: 1px solid #bfe6d7; border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-bottom: 8px; }
.st-ext-badge { display: inline-block; font-size: var(--vx-fs-xs); font-weight: 700; padding: 1px 6px; border-radius: 5px; background: #0a6b52; color: var(--vx-text-inverse); margin-right: 6px; }
.st-ext-hint { margin-top: 4px; font-size: var(--vx-fs-xs); }
.st-ext-panel { background: var(--vx-surface-2); border: 1px solid var(--vx-line); border-radius: 8px; padding: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.st-ext-panel textarea { width: 100%; box-sizing: border-box; }
.st-ext-actions { display: flex; gap: 8px; }
.st-reply { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.st-reply textarea { width: 100%; box-sizing: border-box; }
.st-reply-vis { align-self: flex-start; }
.st-reply .btn { align-self: flex-end; }

/* Lisätyölaskutus Vaihe A: työkirjaus */
.st-worklog { margin: 16px 0; border: 1px solid var(--vx-line); border-radius: 8px; padding: 10px 12px; background: var(--vx-surface-2); }
.st-wl-title { font-size: 13px; color: var(--vx-navy); margin: 0 0 8px; }
.st-wl-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--vx-muted); margin-bottom: 10px; }
.st-wl-summary b { color: var(--vx-text); }
.st-wl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.st-wl-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: 7px; padding: 6px 9px; }
.st-wl-date { color: var(--vx-muted); white-space: nowrap; }
.st-wl-min { font-weight: 700; color: var(--vx-navy); white-space: nowrap; }
.st-wl-desc { flex: 1; color: var(--vx-text); }
.st-wl-who { white-space: nowrap; }
.st-wl-badge { font-size: var(--vx-fs-xs); font-weight: 700; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.st-wl-bill { background: #e3f5e6; color: #1d7a34; }
.st-wl-incl { background: var(--vx-gray-100); color: var(--vx-text-muted); }
.st-wl-del { border: none; background: transparent; color: var(--vx-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.st-wl-del:hover { color: #c0392b; }
.st-wl-empty { font-size: 12.5px; margin: 0 0 10px; }
.st-wl-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-wl-add .st-input { flex: 0 0 auto; }
.st-wl-add #stWlDesc { flex: 1 1 220px; }
.st-wl-add #stWlMin { width: 90px; }

/* Lisätyölaskutus Vaihe B: hinnoittelu (€) + Support contract -editori */
.st-wl-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
.st-wl-rate { font-size: 12px; color: var(--vx-muted); }
.st-wl-rate b { color: var(--vx-navy); }
.st-wl-eur { color: #1d7a34; font-weight: 700; white-space: nowrap; }
.st-wl-item .st-wl-eur { margin-left: auto; }
.st-wl-summary .st-wl-eur { margin-left: 4px; }

.st-sc-help, .st-sc-sub { font-size: 12.5px; }
.st-sc-table td, .st-sc-table th { font-size: 12.5px; }
.st-sc-rate b { color: var(--vx-navy); }
.st-sc-actions { white-space: nowrap; text-align: right; }
.st-sc-del { font-size: 14px; }
.st-sc-form { margin-top: 18px; border-top: 1px solid var(--vx-line); padding-top: 14px; }
.st-sc-form h3 { font-size: 13px; color: var(--vx-navy); margin: 0 0 10px; }
.st-sc-active { align-self: end; padding-bottom: 8px; }

/* Lisätyölaskutus Vaihe C: laskukooste (invoices) */
.st-inv-help, .st-inv-sub { font-size: 12.5px; }
.st-inv-form { margin: 6px 0 18px; }
.st-inv-form h3 { font-size: 13px; color: var(--vx-navy); margin: 0 0 10px; }
.st-inv-row { cursor: pointer; }
.st-inv-table td, .st-inv-table th, .st-inv-lines td, .st-inv-lines th { font-size: 12.5px; }
.st-inv-linedesc { max-width: 340px; }
.st-inv-badge { font-size: var(--vx-fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }
.st-inv-draft { background: var(--vx-gray-100); color: var(--vx-text-muted); }
.st-inv-approved { background: #e6eefc; color: #2456c8; }
.st-inv-sent { background: var(--vx-warning-bg); color: var(--vx-warning); }
.st-inv-paid { background: #e3f5e6; color: #1d7a34; }
.st-inv-void { background: #fde5e5; color: #b3352b; }
.st-inv-actions { flex-wrap: wrap; }
.st-inv-lines { margin-top: 6px; }
/* Vaihe D: liite-PDF export + lähetyspaneeli */
.st-inv-export { background: transparent; border: 0; padding: 0; margin: -6px 0 14px; }
.st-inv-sendpanel { margin: 0 0 16px; max-width: 520px; }
.st-inv-sendpanel h4 { margin: 0 0 6px; font-size: 14px; }
.st-inv-sendpanel label { display: block; font-size: 12.5px; margin: 8px 0 2px; }
.st-inv-sendpanel input { width: 100%; padding: 7px 9px; border: 1px solid var(--vx-line); border-radius: 6px; font-size: 13px; }
.st-inv-sendresult { font-size: 12.5px; margin: 8px 0 0; padding: 7px 10px; border-radius: 6px; }
.st-inv-sendresult.ok { background: #e3f5e6; color: #1d7a34; }
.st-inv-sendresult.err { background: #fde5e5; color: #b3352b; }

/* Näkyvyys: tuntikooste (Vesku 9.8.2026) */
.st-badge { font-size: var(--vx-fs-xs); font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--vx-navy); color: var(--vx-text-inverse); vertical-align: middle; margin-left: 6px; }
.st-hours-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 14px; }
.st-hcard { flex: 1 1 140px; background: var(--vx-surface-sunk); border: 1px solid var(--vx-border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.st-hcard-k { font-size: 12px; color: var(--vx-muted); }
.st-hcard b { font-size: 20px; color: var(--vx-navy); }
.st-hours-table td.r, .st-hours-table th.r { text-align: right; white-space: nowrap; }

@media (max-width: 900px) {
  .st-layout { grid-template-columns: 1fr; }
  .st-table .st-td-scope, .st-detail-meta { font-size: 12px; }
}

/* ===== Tyopistevaraus (desk) - elinkaari + toiminnot (Vaihe 1-3) ===== */
.bk_desk_section { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid var(--vx-border, #dbe1ea);
  border-radius: 8px; background: #f6f9fc; }
.bk_desk_row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bk_desk_label { font-weight: 600; color: var(--vx-navy, #1f2d3d); }
.bk_desk_owner, .bk_desk_wl { color: #5a6b7b; font-size: 13px; }
.bk_desk_slot { margin: 6px 0 2px; font-size: 12.5px; color: #a6641b; }
.bk_desk_actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bk_desk_actions .btn { font-size: 13px; padding: 0 10px; height: var(--vx-control-h-compact); min-height: var(--vx-control-h-compact); }
.bk_desk_badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; border: 1px solid transparent; }
.bk_desk_booked { background: #e6f0ff; color: #1b4fb3; border-color: #b9d2ff; }
.bk_desk_checked_in { background: #e2f7e9; color: #1c7a41; border-color: #b4e6c6; }
.bk_desk_partially_released { background: var(--vx-warning-bg); color: var(--vx-warning); border-color: rgba(var(--vx-warning-rgb),.40); }
.bk_desk_handed_over { background: #efe6ff; color: #5b3ca8; border-color: #d5c4f5; }
.bk_desk_released { background: var(--vx-gray-100); color: var(--vx-text-muted); border-color: var(--vx-border); }
.bk_desk_cancelled { background: var(--vx-surface-sunk); color: var(--vx-text-muted); border-color: var(--vx-border); }
.bk_desk_no_show { background: #fde8e8; color: #b32020; border-color: #f5bcbc; }
/* Mobiili: tyyppivalitsin (huone/tyopiste) New Bookingissa */
.m-seg { padding: 6px 12px; border: 1px solid var(--vx-border, #dbe1ea); background: var(--vx-surface);
  border-radius: 8px; font-size: 13px; font-family: inherit; cursor: pointer; }
.m-seg.is-active { background: var(--vx-navy, #1f2d3d); color: var(--vx-text-inverse); border-color: var(--vx-navy, #1f2d3d); }

/* Desk-kiintio/ankkuripaivat -banneri + kollegakartta (Vaihe 3) */
.nb_desk_quota { margin: 10px 0; padding: 8px 12px; border-radius: 8px; background: var(--vx-primary-soft);
  color: #1b4fb3; font-size: 13px; border: 1px solid #c9dbff; }
.nb_desk_quota_over { background: #fde8e8; color: #b32020; border-color: #f5bcbc; }
.nb_desk_presence { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--vx-border, #dbe1ea);
  border-radius: 8px; background: #fafcff; }
.nb_preshead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.nb_prestitle { font-weight: 600; color: var(--vx-navy, #1f2d3d); }
.nb_presteam { max-width: 180px; height: var(--vx-control-h-compact); min-height: var(--vx-control-h-compact); }
.nb_preslist { display: flex; flex-direction: column; gap: 4px; }
.nb_presrow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
  padding: 4px 0; border-bottom: 1px dashed #e6ebf1; }
.nb_presname { font-weight: 500; }
.nb_presdesk { color: #5a6b7b; }
.nb_presempty { color: var(--vx-text-muted); font-size: 13px; font-style: italic; }
.nb_preshint { margin-top: 8px; font-size: 12px; color: var(--vx-text-muted); }

/* Ty\u00f6pistevarauksen kevyt vahvistus (New Booking, Vaihe B). */
.nb_deskconfirm_res { font-size: 13px; color: #5a6b7b; margin: 2px 0 14px; }
.nb_deskslot_tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: var(--vx-fs-xs); font-weight: 600; background: var(--vx-primary-soft); color: var(--vx-blue, #1b6ec2); vertical-align: middle; }
.nb_deskslot_note { font-size: 12.5px; color: #a6641b; background: #fdf3e6; border: 1px solid #f2d9b0;
  border-radius: 8px; padding: 7px 11px; margin: -8px 0 14px; }
/* Ty\u00f6pistevarauksen aikaikkuna: paiva + pikapresetit + start/end (Vesku 5.9.2026) */
.nb_deskconfirm_when { margin: 2px 0 14px; }
.nb_deskconfirm_date { font-size: 14px; font-weight: 600; color: var(--vx-navy, #1f2d3d); margin: 2px 0 8px; }
.nb_deskslot_presets { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.nb_deskpreset { border: 1px solid var(--vx-border, #dbe1ea); background: #fff; color: var(--vx-navy, #1f2d3d);
  border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.nb_deskpreset:hover { border-color: var(--vx-blue, #1b6ec2); }
.nb_deskpreset.active { background: var(--vx-blue, #1b6ec2); border-color: var(--vx-blue, #1b6ec2); color: var(--vx-text-inverse); }
.nb_deskslot_edit { display: flex; align-items: center; gap: 8px; }
.nb_deskslot_edit .nb_deskslot_time { flex: 1; min-width: 0; }
.nb_deskslot_dash { color: #5a6b7b; font-weight: 600; }
.nb_deskbill_line { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--vx-border, #dbe1ea); border-radius: 8px; background: #f6f9fe; }
.nb_deskbill_val { font-weight: 500; color: var(--vx-navy, #1f2d3d); }
.nb_link { background: none; border: none; color: var(--vx-blue, #1b6ec2); cursor: pointer;
  font-size: 13px; padding: 0; text-decoration: underline; }
.nb_notetoggle { display: inline-block; margin-top: 12px; background: none; border: none;
  color: var(--vx-blue, #1b6ec2); cursor: pointer; font-size: 13px; padding: 0; }
/* New Booking -modaali (esim. "aseta oletusmaksajaksi?"). */
.nb_modal_overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.nb_modal_backdrop { position: absolute; inset: 0; background: rgba(20,33,61,.45); }
.nb_modal { position: relative; background: var(--vx-surface); border-radius: 12px; width: min(440px, 92vw);
  box-shadow: 0 18px 48px rgba(20,33,61,.28); padding: 20px 22px; }
.nb_modal_hd { font-weight: 700; font-size: 16px; color: var(--vx-navy, #1f2d3d); margin-bottom: 10px; }
.nb_modal_bd { font-size: 14px; color: #4a5766; line-height: 1.5; margin-bottom: 18px; }
.nb_modal_ft { display: flex; justify-content: flex-end; gap: 10px; }

/* Kartan spot-tilat desk-varauksille (Vaihe 2). Ylikirjoittaa fp_free/fp_busy varit. */
.fp_spot.fp_desk_free, .fp_listitem.fp_desk_free { background: #e2f7e9; border-color: #b4e6c6; }
.fp_spot.fp_desk_taken, .fp_listitem.fp_desk_taken { background: #fde8e8; border-color: #f5bcbc; }
.fp_spot.fp_desk_mine, .fp_listitem.fp_desk_mine { background: #e6f0ff; border-color: #1b4fb3; }
.fp_spot.fp_desk_freed, .fp_listitem.fp_desk_freed { background: var(--vx-warning-bg); border-color: rgba(var(--vx-warning-rgb),.40); }

/* ==========================================================================
   VarianX2026 v2 — page layout leftovers
   Tokens, 44px controls, 36px compact chrome, and focus rings are global.
   These rules only keep New Booking / Bookings layouts from collapsing.
   Do not restyle .vx-help (proto (?) icons).
   ========================================================================== */
body.body_module_page_newbooking .newrecord_layout { gap: var(--vx-space-6); }
body.body_module_page_newbooking .newrecord_left { gap: var(--vx-space-5); }
body.body_module_page_newbooking .newrecord_main { gap: var(--vx-space-6); }
body.body_module_page_newbooking .vx-card { padding: var(--vx-space-5); }
body.body_module_page_newbooking .newrecord_dt_times { gap: var(--vx-space-4); }
body.body_module_page_newbooking .newrecord_resourceitem {
  padding: var(--vx-space-3) var(--vx-space-4);
  border-radius: var(--vx-radius-lg);
}
body.body_module_page_newbooking .rp_wd { gap: var(--vx-space-1); }
body.body_module_page_newbooking .rp_wdbtn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
body.body_module_page_newbooking .nb_preshint,
body.body_module_page_newbooking .nb_presempty { color: var(--vx-text-subtle); }

body.body_module_page_list .bk_meta,
body.body_module_page_list .bk_order_collabel,
body.body_module_page_list .bk_smalllink,
body.body_module_page_list .bk_actionbar .bk_condensed { font-size: inherit; font-weight: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Versio-/build-leima: kirjautumissivun alalaita, keskitetty. Absoluuttinen
   sijoitus (lg_stage on position:relative) jottei se osallistu lg_stagen
   vaakasuoraan flex-riviin (muuten se tyontyisi paneelin oikealle puolelle). */
.lg_version {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
  z-index: 2;
  pointer-events: none;
}