/* ==========================================================================
   Pivol App – perustyylit (CORE)
   Mobiili ensin. ≥ 900px → sivunavigaatio, muuten yläpalkki + alapalkki.
   Slice-agentit: lisää omat tyylisi tiedoston LOPPUUN omaan kommenttiosioosi.
   ========================================================================== */

:root {
  /* Pivolin ilme (SPEC_V2 §7): tumma petrooli + vesipisaran turkoosi */
  --brand: #2f4f4b;
  --brand-2: #4f6f6b;
  --brand-dark: #223a37;
  --brand-light: #e3eceb;
  --accent: #8cc7c4;
  --accent-dark: #4f9d99;
  --accent-light: #e8f4f3;
  --field: #eff4f3;
  --bg: #f3f6f5;
  --card: #fff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --ok: #16a34a;
  --ok-light: #dcfce7;
  --warn: #d97706;
  --warn-light: #fef3c7;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .05);
  --shadow-lg: 0 10px 40px rgba(15, 23, 42, .18);
  --tap: 48px;               /* minimikoko kosketuskohteille */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --bottomnav-h: 64px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
a { color: var(--brand); }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .75em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
small, .small { font-size: .85rem; }
.muted { color: var(--muted); }
.strong { font-weight: 650; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidden { display: none !important; }
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.text-brand { color: var(--brand); }

/* ------------------------------------------------------------------ boot */
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ layout-apurit */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.row > .grow, .grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ shell / navigaatio */
.shell { min-height: 100vh; }
.main {
  padding: calc(var(--topbar-h) + 16px) 14px calc(var(--bottomnav-h) + 24px + env(safe-area-inset-bottom));
  max-width: 1280px;
  margin: 0 auto;
}
.view-root, .view { min-width: 0; }

.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--brand); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-logo { height: 36px; width: auto; display: block; }
.brand-name { color: var(--brand); }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.topbar-user { border: 0; background: none; padding: 4px; cursor: pointer; min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: .9rem; flex: none;
}

.bottomnav {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; justify-content: space-around;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, .04);
}
.bnav-link {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600;
  border: 0; background: none; cursor: pointer; font-family: inherit; min-width: 0;
}
.bnav-link.active { color: var(--brand); }
.bnav-link.active .icon { background: var(--brand-light); }
.bnav-link .icon { padding: 3px 14px; border-radius: 999px; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }

.sidebar { display: none; }

@media (min-width: 900px) {
  .topbar, .bottomnav { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: 18px;
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 20;
    padding: 20px 14px;
    background: #fff;
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  .sidebar .brand { padding: 4px 10px 8px; }
  .main { margin-left: var(--sidebar-w); padding: 28px 32px 48px; max-width: calc(1280px + var(--sidebar-w)); }
}
.side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 550;
}
.nav-link:hover { background: var(--bg); }
.nav-link.active { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.nav-link .icon { color: var(--muted); }
.nav-link.active .icon { color: var(--brand); }
.side-user { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.side-user .btn { justify-content: flex-start; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 0 6px 6px; }
.user-name { font-weight: 650; line-height: 1.2; }

.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 0; background: none; font: inherit; color: var(--text); text-decoration: none; cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--bg); }
.menu-item.danger { color: var(--danger); }

/* ------------------------------------------------------------------ sivun otsikko & toolbar */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-title { font-size: 1.55rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar .input { width: auto; min-width: 0; }
.section-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }

/* ------------------------------------------------------------------ kortit */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}
.card + .card { margin-top: 14px; }
.grid > .card + .card, .grid-2 > .card + .card, .grid-3 > .card + .card, .grid-4 > .card + .card, .stack > .card + .card { margin-top: 0; }
.card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { border-color: var(--brand); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--brand); }
@media (min-width: 900px) { .card { padding: 20px; } }

.error-card { border-color: var(--danger-light); }
.construction { text-align: center; padding: 40px 20px; }
.construction-icon { font-size: 2.6rem; margin-bottom: 8px; }

/* ------------------------------------------------------------------ KPI */
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; min-width: 0;
}
.kpi-label { color: var(--muted); font-size: .85rem; font-weight: 600; }
.kpi-value { font-size: 1.6rem; font-weight: 800; color: var(--brand); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--muted); font-size: .82rem; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* ------------------------------------------------------------------ napit */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--text);
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s, transform .05s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* valkoinen teksti turkoosilla oli liian haalea (kontrasti ~1,9:1) → tumma petrooli teksti (~6:1) */
.btn-accent { background: var(--accent); border-color: var(--accent); color: #17302d; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-light); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-outline { background: #fff; border-color: var(--brand); color: var(--brand); }
.btn-sm { min-height: 38px; padding: 0 12px; font-size: .9rem; }
.btn-lg { min-height: 56px; font-size: 1.1rem; padding: 0 24px; }
.btn-block { width: 100%; }
.btn-icon { min-width: var(--tap); padding: 0; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn.active, .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Valintasirut (segmentit, suodattimet) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: #fff;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--text); cursor: pointer;
}

/* Iso valintaruutu-kortti (esim. tarjouspohjan valinta) */
.choice {
  display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%;
  padding: 16px; border: 2px solid var(--border); border-radius: var(--radius); background: #fff;
  font: inherit; color: inherit; cursor: pointer;
}
.choice:hover { border-color: var(--brand); }
.choice.selected { border-color: var(--brand); background: var(--brand-light); }

/* ------------------------------------------------------------------ lomakkeet */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-weight: 650; font-size: .92rem; }
.field-hint { color: var(--muted); font-size: .82rem; }
.input, select.input, textarea.input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 1rem;  /* ≥16px → iOS ei zoomaa */
}
textarea.input { min-height: 90px; resize: vertical; line-height: 1.45; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.input:focus, .btn:focus-visible, .chip:focus-visible, .choice:focus-visible, .menu-item:focus-visible, .nav-link:focus-visible {
  outline: 3px solid rgba(47, 79, 75, .28); outline-offset: 1px; border-color: var(--brand);
}
.input[readonly] { background: var(--bg); }
.input.invalid { border-color: var(--danger); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--brand); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; font-weight: 550; }
.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-grid { grid-template-columns: repeat(2, 1fr); } .form-grid .span-2 { grid-column: span 2; } }
.qty-input { width: 90px; text-align: right; }

/* Stepper (+/- määrä isoilla napeilla) */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.stepper button { width: var(--tap); height: var(--tap); border: 0; background: var(--bg); font-size: 1.3rem; font-weight: 700; cursor: pointer; color: var(--brand); }
.stepper input { width: 64px; height: var(--tap); border: 0; text-align: center; font: inherit; font-weight: 700; }

/* ------------------------------------------------------------------ badge */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
  border: 1px solid transparent;
  background: #f1f5f9; color: var(--muted);
}
.badge-brand { background: var(--brand-light); color: var(--brand); }
.badge-accent { background: var(--accent-light); color: var(--accent-dark); }
.badge-ok { background: var(--ok-light); color: #15803d; }
.badge-warn { background: var(--warn-light); color: #b45309; }
.badge-danger { background: var(--danger-light); color: #b91c1c; }
.badge-muted { background: #f1f5f9; color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------------ taulukko */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: 10px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; background: #fafbfc; }
.table td.num, .table th.num { text-align: right; }
.table tbody tr:hover { background: #fafcff; }
.table tr.clickable { cursor: pointer; }
.table tfoot td { font-weight: 700; border-bottom: 0; }

/* Lista (mobiiliystävällinen vaihtoehto taulukolle) */
.list { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 60px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: #fafcff; }
.list-item .grow { min-width: 0; }
.list-item .title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .sub { color: var(--muted); font-size: .88rem; }

/* Summarivit (tarjouksen yhteenveto) */
.totals { display: flex; flex-direction: column; gap: 6px; }
.totals .line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totals .line.big { font-size: 1.35rem; font-weight: 800; color: var(--brand); border-top: 2px solid var(--border); padding-top: 8px; margin-top: 4px; }
.totals .line.sub { color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------------ empty / loading */
.empty { text-align: center; color: var(--muted); padding: 36px 16px; }
.empty-icon { font-size: 2rem; opacity: .4; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 40px 0; }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--brand);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ toast */
.toasts {
  position: fixed; z-index: 100; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: min(92vw, 420px); pointer-events: none;
}
@media (min-width: 900px) { .toasts { bottom: 24px; left: auto; right: 24px; transform: none; align-items: flex-end; } }
.toast {
  pointer-events: auto;
  background: #1e293b; color: #fff; padding: 12px 16px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-weight: 550; max-width: 100%;
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: none; }
.toast-ok { background: var(--ok); }
.toast-error { background: var(--danger); }
.toast-warn { background: var(--warn); }

/* ------------------------------------------------------------------ modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .18s;
}
.modal-overlay.show { opacity: 1; }
.modal {
  background: #fff; width: 100%; max-height: 92vh;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateY(24px); transition: transform .18s;
  padding-bottom: env(safe-area-inset-bottom);
}
.modal-overlay.show .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.modal-head h2 { margin: 0; font-size: 1.2rem; }
.modal-x { border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; width: var(--tap); height: var(--tap); border-radius: 50%; }
.modal-x:hover { background: var(--bg); }
.modal-body { padding: 8px 18px 16px; overflow-y: auto; flex: 1 1 auto; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: 24px; }
  .modal { width: min(560px, 100%); border-radius: 18px; max-height: 88vh; }
  .modal.modal-wide { width: min(900px, 100%); }
  .modal-actions .btn { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------ login */
body.is-login { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2) 55%, var(--accent) 130%); }
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: min(420px, 100%); background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 28px 22px; }
.login-brand { text-align: center; margin-bottom: 18px; }
.login-brand .brand { font-size: 2rem; }
.login-logo { display: block; width: min(200px, 60vw); height: auto; margin: 0 auto 4px; }
.login-brand p { margin: 6px 0 0; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.pin-input { font-size: 1.5rem; letter-spacing: .4em; text-align: center; }
.login-error { color: var(--danger); font-weight: 600; min-height: 1.4em; }
.login-foot { color: rgba(255, 255, 255, .85); margin-top: 18px; text-align: center; }

/* ------------------------------------------------------------------ julkinen / tulostus */
body.is-public, body.is-print-view { background: var(--bg); }
.public-view { max-width: 860px; margin: 0 auto; padding: 16px 14px 48px; }
.print-view { max-width: 900px; margin: 0 auto; padding: 16px; }

/* ------------------------------------------------------------------ tulostus */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; font-size: 11pt; color: #000; }
  .sidebar, .topbar, .bottomnav, .toasts, .modal-overlay,
  .btn, .toolbar, .no-print, button { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .card, .kpi { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
  .public-view, .print-view { padding: 0 !important; max-width: none !important; }
  a { color: inherit; text-decoration: none; }
  .print-only { display: block !important; }
  .table th { background: #f3f3f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.print-only { display: none; }

/* === SLICE STYLES BELOW (each slice appends its own section) === */

/* --- dashboard --- */
.dash-greet .page-title { margin-bottom: 2px; }
.dash-greet p { margin: 0; }
.dash-actions { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .dash-actions { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.dash-action { flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 2px; min-height: 64px; padding: 10px 18px; }
.dash-action-label { font-size: 1.08rem; font-weight: 750; }
.dash-action-sub { font-size: .82rem; font-weight: 500; opacity: .85; }
.dash-appt { border-left: 6px solid var(--appt-color, var(--brand)); display: flex; flex-direction: column; gap: 6px; }
.dash-appt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dash-appt-time { font-size: 1.35rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.dash-appt-title { font-size: 1.2rem; font-weight: 750; color: var(--text); text-decoration: none; }
.dash-appt-title:hover { color: var(--brand); }
.dash-appt-sub { font-weight: 600; }
.dash-appt-line { display: flex; align-items: center; gap: 6px; color: var(--text); }
.dash-appt-notes { background: var(--warn-light); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .95rem; white-space: pre-line; }
.dash-appt-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 6px; }
.dash-appt-actions .btn { width: 100%; }
.dash-day + .dash-day { margin-top: 4px; }
.dash-day-head { font-weight: 700; color: var(--muted); font-size: .9rem; text-transform: capitalize; margin: 0 0 6px 4px; }
.dash-ics-url { font-size: .85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dash-help summary { cursor: pointer; font-weight: 650; color: var(--brand); min-height: var(--tap); display: flex; align-items: center; }
.dash-help ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
/* käyttäjät */
button.list-item { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.list-item:last-child { border-bottom: 0; }
.dash-user.is-inactive { opacity: .6; }
.dash-user-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dash-color { padding: 4px; height: var(--tap); cursor: pointer; }
.dash-ics-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
/* asetukset */
.dash-settings h3 { font-size: 1rem; margin: 0; }
.dash-save-row { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 12px; }
.dash-save-row .btn { min-width: 160px; }
.dash-rules td { padding: 6px 8px; }
.dash-rules td:first-child { font-weight: 600; white-space: nowrap; }
.dash-num { max-width: 140px; text-align: right; }
.dash-check { padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; }
.dash-example { background: var(--brand-light); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }

/* --- commissions --- */
.comm-monthbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.comm-month-btn { min-width: 48px; min-height: 48px; font-size: 1.5rem; line-height: 1; }
.comm-month-label { font-size: 1.15rem; font-weight: 700; min-width: 160px; text-align: center; }
.comm-monthbar .chip { margin-left: auto; min-height: 44px; }
.comm-kpis .comm-kpi-ok .kpi-value { color: var(--ok); }
.comm-kpis .comm-kpi-danger .kpi-value { color: var(--danger); }
.comm-kpis > div:not(.kpi) { display: contents; }
.comm-count { font-weight: 500; font-size: .9rem; }
.comm-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.comm-row { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.comm-row:last-child { border-bottom: 0; }
.comm-row.comm-st-takaisinperittava { background: #fef2f2; }
.comm-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.comm-row-title { font-weight: 700; overflow-wrap: anywhere; }
.comm-row-title a { color: var(--brand); text-decoration: none; }
.comm-row-sub { color: var(--muted); font-size: .88rem; }
.comm-row-explain { font-size: .98rem; }
.comm-row-note { color: var(--warn); font-size: .86rem; }
.comm-row-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; max-width: 48%; }
.comm-row-amount { font-size: 1.25rem; font-weight: 800; }
.comm-row-when { color: var(--muted); font-size: .82rem; }
.comm-filter { margin-bottom: 12px; }
.comm-user-select { min-height: 44px; }
.comm-link { background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 650; color: var(--brand); cursor: pointer; text-align: left; min-height: 40px; }
.comm-small { font-size: .82rem; }
.comm-person-table td .btn { white-space: nowrap; }
.comm-explainer summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; min-height: 32px; list-style-position: inside; }
.comm-explainer[open] summary { margin-bottom: 12px; }
.comm-explainer h3 { font-size: 1rem; margin: 0 0 6px; }
.comm-explainer ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.comm-explainer p { margin: 0; }
.comm-outstanding { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-left: 4px solid var(--accent); }
@media (max-width: 599px) { .comm-outstanding .btn { width: 100%; min-height: 48px; } }
@media (max-width: 599px) {
  .comm-row { flex-direction: column; }
  .comm-row-side { max-width: none; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .comm-row-side .btn { width: 100%; min-height: 48px; }
  .comm-month-label { flex: 1 1 auto; min-width: 0; }
  .comm-monthbar .chip { margin-left: 0; }
}

/* --- calendar --- */
.cal-head { margin-bottom: 10px; }
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-nav-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-nav-left .btn-icon { font-size: 1.5rem; line-height: 1; }
.cal-nav-title { font-size: 1.05rem; padding: 0 4px; }
.cal-filters { margin-bottom: 12px; }
.cal-chip { --c: #2563eb; }
.cal-chip.on { background: color-mix(in srgb, var(--c) 14%, #fff); border-color: var(--c); color: var(--text); box-shadow: inset 0 0 0 1px var(--c); }
.cal-empty-note { margin-top: 10px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* viikkonäkymä */
.card.cal-week { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-week-inner { min-width: 720px; }
.cal-grid { display: grid; grid-template-columns: 52px repeat(6, minmax(0, 1fr)); position: relative; }
.cal-grid-head { border-bottom: 1px solid var(--border); background: #fafbfc; position: sticky; top: 0; z-index: 2; }
.cal-corner { border-right: 1px solid var(--border); }
.cal-dayhead { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 52px; padding: 6px 4px;
  border: 0; border-right: 1px solid var(--border); background: transparent; font: inherit; color: var(--text); cursor: pointer; }
.cal-dayhead:last-child { border-right: 0; }
.cal-dayhead:hover { background: var(--brand-light); }
.cal-dayhead .cal-wd { font-size: .78rem; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.cal-dayhead .cal-dn { font-weight: 750; font-size: 1.02rem; }
.cal-dayhead.today .cal-dn { color: #fff; background: var(--brand); border-radius: 999px; padding: 0 10px; }
.cal-scroll { max-height: calc(100vh - 290px); min-height: 360px; overflow-y: auto; }
.cal-timecol { border-right: 1px solid var(--border); }
.cal-hour { font-size: .75rem; color: var(--muted); text-align: right; padding: 2px 6px 0 0; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.cal-col { position: relative; border-right: 1px solid var(--border); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, var(--border) 51px, var(--border) 52px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 25px, #f1f5f9 25px, #f1f5f9 26px); }
.cal-col:last-child { border-right: 0; }
.cal-col.today { background-color: #f8fbff; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.cal-event { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; z-index: 1;
  padding: 3px 6px; border: 0; border-left: 4px solid #2563eb; border-radius: 6px; font: inherit; font-size: .8rem; line-height: 1.25;
  color: var(--text); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.cal-event:hover { z-index: 4; box-shadow: 0 4px 12px rgba(15, 23, 42, .18); }
.cal-ev-time { font-weight: 700; font-size: .74rem; white-space: nowrap; }
.cal-ev-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cal-ev-sub { color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-ev-mark { font-weight: 700; color: var(--muted); }
.cal-ev-mark.ok { color: var(--ok); }
.cal-event.past, .cal-agenda-item.past { opacity: .62; }
.cal-event.st-ei_kauppaa .cal-ev-title, .cal-event.st-siirretty .cal-ev-title { text-decoration: line-through; text-decoration-color: rgba(100, 116, 139, .6); }
.cal-event.type-muu { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .55) 6px 12px); }

/* päivä- ja listanäkymä */
.cal-daystrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cal-daybtn { display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 64px; padding: 6px 2px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; font: inherit; color: var(--text); cursor: pointer; }
.cal-daybtn .cal-wd { font-size: .75rem; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cal-daybtn strong { font-size: 1.15rem; }
.cal-daybtn .cal-count { font-size: .72rem; min-height: 1em; color: var(--brand); font-weight: 700; }
.cal-daybtn.today { border-color: var(--brand); }
.cal-daybtn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.cal-daybtn.active .cal-wd, .cal-daybtn.active .cal-count { color: #fff; }
.cal-agenda { display: flex; flex-direction: column; gap: 8px; }
.cal-agenda-item { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 14px 16px; min-height: 72px;
  background: #fff; border: 1px solid var(--border); border-left: 6px solid #2563eb; border-radius: var(--radius);
  font: inherit; color: var(--text); text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.cal-agenda-item:hover { border-color: var(--border-strong); }
.cal-ag-time { display: flex; flex-direction: column; min-width: 52px; font-variant-numeric: tabular-nums; }
.cal-ag-time strong { font-size: 1.1rem; }
.cal-ag-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cal-ag-title { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.cal-ag-sub { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.cal-ag-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }

/* tiedot-ikkuna */
.cal-detail-when { font-size: 1.1rem; }
.card.cal-cust { padding: 14px; background: #fafcff; }
.cal-cust-name { font-size: 1.1rem; }
.cal-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cal-contact .btn { justify-content: flex-start; text-align: left; white-space: normal; padding: 8px 14px; }
.cal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cal-actions .btn { width: 100%; }
.cal-actions .cal-cancel { color: var(--danger); grid-column: 1 / -1; }

/* varausikkuna */
.cal-booking .cal-people .chip { min-height: 48px; padding: 0 16px; font-size: 1rem; }
.cal-two { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 260px; }
.cal-date-row { display: flex; align-items: flex-end; gap: 8px; }
.cal-date-row .field { flex: 1 1 auto; }
.cal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 6px; }
.cal-slots > p { grid-column: 1 / -1; margin: 4px 0; }
.cal-slots .loading { grid-column: 1 / -1; }
.cal-slot { min-height: 48px; font-variant-numeric: tabular-nums; }
.cal-custom-time summary { cursor: pointer; color: var(--brand); font-weight: 650; min-height: 32px; }
.cal-custom-time[open] summary { margin-bottom: 8px; }
.cal-cust-results { max-height: 280px; overflow-y: auto; }
.cal-cust-hit { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.cal-cust-selected { padding: 12px 14px; background: var(--brand-light); border-color: var(--brand); }

/* asiakkaat */
.cust-search { margin-bottom: 12px; }
.cust-search .input { font-size: 1.05rem; min-height: 52px; }
.cust-item { width: 100%; border: 0; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.cust-item .cust-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cust-info { display: grid; grid-template-columns: 1fr; gap: 10px 20px; }
.cust-info dt { color: var(--muted); font-size: .82rem; font-weight: 650; }
.cust-info dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.cust-contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cust-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cust-row-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (min-width: 600px) { .cust-info { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 599px) {
  .cal-nav { flex-direction: column; align-items: stretch; }
  .cal-views { width: 100%; }
  .cal-views .btn { flex: 1 1 0; }
  .cal-head .toolbar { width: 100%; }
  .cal-head .toolbar .btn { flex: 1 1 auto; }
  .cal-actions { grid-template-columns: 1fr; }
}

/* --- pricing --- */
.pr-tabs { margin-bottom: 10px; }
.pr-tab { min-height: var(--tap); padding: 0 16px; font-size: 1rem; }
.pr-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .78rem; font-weight: 700; }
.pr-tab.active .pr-count { background: rgba(255, 255, 255, .22); color: #fff; }
.pr-vatnote { font-size: .9rem; margin-bottom: 14px; }
.pr-toggle { font-size: .95rem; }
.pr-toggle input, .pr-checks input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); }

.pr-cat.pr-off { display: none; }
.pr-cat-title { font-size: 1.2rem; font-weight: 800; color: var(--brand); margin: 4px 0 10px; }
.pr-list { display: flex; flex-direction: column; gap: 10px; }
.pr-add { margin-top: 12px; width: 100%; }
@media (min-width: 600px) { .pr-add { width: auto; } }

.pr-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.pr-item.pr-needs-check { border-left: 4px solid var(--warn); }
.pr-item.pr-inactive { opacity: .6; background: #f8fafc; }
.pr-main { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px) { .pr-main { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.pr-info { min-width: 0; flex: 1 1 auto; }
.pr-name { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.pr-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.pr-badges:empty { display: none; }
.pr-code { font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pr-desc { font-size: .9rem; margin-top: 4px; }
.pr-prices { flex: none; text-align: left; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .pr-prices { text-align: right; min-width: 210px; } }
.pr-gross { font-size: 1.45rem; font-weight: 800; color: var(--brand); line-height: 1.2; white-space: nowrap; }
.pr-unit { font-size: .95rem; font-weight: 600; color: var(--muted); }
.pr-gross-label { font-size: .8rem; }
.pr-net { font-size: .95rem; font-weight: 600; white-space: nowrap; margin-top: 2px; }

.pr-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
@media (min-width: 600px) { .pr-metrics { grid-template-columns: repeat(4, 1fr); } }
.pr-metric { display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius-sm); padding: 6px 10px; }
.pr-metric-label { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pr-metric-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pr-danger { color: var(--danger) !important; }

.pr-form { border: 2px solid var(--brand); }
.pr-form-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 12px; color: var(--brand); }
.pr-money { font-variant-numeric: tabular-nums; text-align: right; font-weight: 650; }
.pr-money-gross { background: var(--brand-light); }
.pr-checks { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 4px; }
.pr-live { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; margin: 8px 0 12px; background: var(--bg); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.pr-form-actions .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .pr-form-actions .btn { flex: 0 0 auto; } }

/* tarjouspohjat */
.pr-tpl-head { margin-bottom: 12px; align-items: flex-start; }
.pr-tpl-head p { margin: 0; flex: 1 1 260px; }
.pr-tpls .pr-tpl + .pr-tpl { margin-top: 14px; }
.pr-tpl-top { align-items: flex-start; margin-bottom: 10px; }
.pr-tpl-name { margin: 0 0 2px; font-size: 1.15rem; }
.pr-vars { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 6px 0 14px; }
.pr-var { display: flex; align-items: center; gap: 10px; }
.pr-var-label { font-weight: 650; min-width: 90px; }
.pr-var-unit { min-width: 24px; }
.pr-tpl-table td, .pr-tpl-table th { padding: 8px 8px; }
.pr-tpl-result .totals { margin-top: 6px; }
.pr-plan { margin-top: 4px; }

/* tarjouspohjan editori (modal) */
.pr-ed-title { margin: 8px 0 0; font-size: 1rem; color: var(--brand); }
.pr-ed-row { display: grid; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fafbfc; }
.pr-ed-var { grid-template-columns: 1fr 1fr; }
.pr-ed-var > .btn { justify-self: end; }
@media (min-width: 640px) { .pr-ed-var { grid-template-columns: 2fr 1.5fr 1fr 1fr auto; } }
.pr-ed-item { grid-template-columns: 1fr 1fr 1fr; }
.pr-ed-item-main { grid-column: 1 / -1; }
.pr-ed-btns { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
@media (min-width: 760px) {
  .pr-ed-item { grid-template-columns: minmax(0, 3fr) 90px minmax(0, 1.5fr) 90px auto; }
  .pr-ed-item-main, .pr-ed-btns { grid-column: auto; }
}
.pr-ed-plan { grid-template-columns: 1fr auto auto; align-items: center; }
.pr-pct-wrap { display: flex; align-items: center; gap: 6px; }
.pr-pct { width: 90px; text-align: right; }
.pr-plan-sum { font-weight: 700; }

/* tulostus: koko hinnasto kerralla, siisti lunttilappu */
.pr-print-head h1 { font-size: 18pt; margin: 0 0 2px; }
@media print {
  .pr-cat.pr-off { display: block !important; }
  .pr-tabs, .pr-vatnote, .pr-tpls, .pr-metrics, .pr-actions, .pr-form, .pr-add { display: none !important; }
  .pr-cat { break-inside: auto; margin-bottom: 10pt; }
  .pr-cat-title { font-size: 13pt; color: #000; border-bottom: 1.5pt solid #000; padding-bottom: 2pt; margin: 10pt 0 4pt; }
  .pr-list { gap: 0; }
  .pr-item { box-shadow: none; border: 0; border-bottom: .5pt solid #bbb; border-radius: 0; padding: 4pt 0; break-inside: avoid; opacity: 1; }
  .pr-item.pr-needs-check { border-left: 0; }
  .pr-item.pr-inactive { display: none; }
  .pr-main { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10pt; }
  .pr-prices { text-align: right; min-width: 150pt; }
  .pr-name { font-size: 11pt; }
  .pr-desc { font-size: 9pt; color: #444; }
  .pr-gross { font-size: 12pt; color: #000; }
  .pr-net, .pr-gross-label { font-size: 9pt; color: #444; }
  .pr-badges .badge { border: .5pt solid #999; background: none !important; color: #000 !important; font-size: 7.5pt; }
}

/* --- quotes --- */
/* lista */
.q-filters { margin-bottom: 14px; }
.q-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.q-chips .chip { flex: none; }
@media (min-width: 700px) { .q-chips { flex-wrap: wrap; overflow: visible; } }
.q-list-sum { margin: 0 2px 8px; }
.q-row { align-items: flex-start; }
.q-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.q-row-sum { font-weight: 800; font-size: 1.05rem; color: var(--brand); }
.q-row-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* editori: otsikko */
.q-head { margin-bottom: 12px; }
.q-back { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-weight: 650; }
.q-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.q-head-meta { margin-top: 4px; }
.q-banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.q-banners:empty { display: none; }
.q-banner { background: var(--brand-light); color: var(--brand-dark); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .95rem; }
.q-banner-warn { background: var(--warn-light); color: #92400e; }

/* editori: asettelu */
.q-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 90px; }
.q-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.q-main > .card + .card { margin-top: 0; }
.q-aside-inner { display: flex; flex-direction: column; gap: 14px; }
.q-aside-inner > .card + .card { margin-top: 0; }
.q-sec .card-title { font-size: 1.12rem; }
@media (min-width: 1100px) {
  .q-editor { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; padding-bottom: 0; }
  .q-aside { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
}

/* asiakas */
.q-cust { display: flex; flex-direction: column; gap: 4px; }
.q-cust-name { font-size: 1.25rem; font-weight: 800; }
.q-cust-contact a { font-weight: 600; }
.q-cust-badges { margin-top: 4px; gap: 6px; }
.q-cust-actions { margin-top: 12px; }
.q-cust-hit { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.q-cust-hit:last-child { border-bottom: 0; }

/* pohjat */
.q-tpl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .q-tpl-grid { grid-template-columns: repeat(2, 1fr); } }
.q-tpl { min-height: 96px; justify-content: flex-start; }
.q-tpl-icon { color: var(--accent-dark); display: inline-flex; }
.q-tpl-name { font-size: 1.08rem; font-weight: 750; color: var(--text); }
.q-tpl-desc { line-height: 1.35; }
.q-tpl-alt { margin-top: 12px; }
.q-tpl-compact { display: flex; flex-direction: column; gap: 6px; }
.q-var { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.q-var:last-child { border-bottom: 0; }
.q-var-label { font-weight: 700; font-size: 1.05rem; }
.stepper.stepper-lg button { width: 56px; height: 56px; font-size: 1.6rem; }
.stepper.stepper-lg input { width: 80px; height: 56px; font-size: 1.25rem; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* rivit */
.q-lines { display: flex; flex-direction: column; }
.q-line { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.q-line:first-child { padding-top: 0; }
.q-line:last-child { border-bottom: 0; }
.q-line.is-zero { opacity: .55; }
.q-line-ro { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; }
.q-line-main { min-width: 0; }
.q-line-title { font-weight: 650; }
.q-line-desc { color: var(--muted); font-size: .85rem; line-height: 1.35; }
.q-line-top { display: flex; align-items: center; gap: 6px; }
.q-line-name { flex: 1 1 auto; min-width: 0; font: inherit; font-weight: 650; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; margin-left: -8px; background: transparent; color: var(--text); }
.q-line-name:hover { border-color: var(--border); }
.q-line-name:focus { outline: none; border-color: var(--brand); background: #fff; }
.q-line-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.q-line-x:hover { background: var(--danger-light); color: var(--danger); }
.q-line-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.q-unit { min-width: 30px; font-size: .9rem; }
.q-price-wrap { display: inline-flex; align-items: center; gap: 6px; }
.q-price { width: 110px; text-align: right; padding: 8px 10px; }
.q-line-total { margin-left: auto; font-weight: 800; font-size: 1.05rem; }
.q-line-tools { margin-top: 12px; }
.q-mode .btn { min-height: 34px; padding: 0 10px; font-size: .82rem; }

/* hinnastovalitsin */
.q-pp-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.q-pp-tabs .chip { flex: none; }
.q-pp-list { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.q-pp-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); }
.q-pp-item:last-child { border-bottom: 0; }
.q-pp-badges { gap: 6px; margin-top: 4px; }
.q-pp-badges:empty { display: none; }
.q-pp-add { flex: none; }

/* hinnoittelu */
.q-small-input { width: 120px; }
.q-dl { display: flex; flex-direction: column; }
.q-dl-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.q-dl-row:last-child { border-bottom: 0; }
.q-dl-row > span:last-child { text-align: right; font-weight: 600; }
.q-plan { display: flex; flex-direction: column; gap: 8px; }
.q-plan-row { display: flex; align-items: center; gap: 8px; }
.q-plan-row > .input { flex: 1 1 auto; min-width: 0; }
.q-plan-pctwrap { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.q-plan-pct { width: 78px; text-align: right; }
.q-details > summary { cursor: pointer; font-weight: 650; color: var(--brand); min-height: var(--tap); display: flex; align-items: center; }
.q-details-body { margin-top: 8px; }
.q-pre { white-space: pre-wrap; }

/* yhteenveto */
.q-summary .totals .line.q-after, .totals .line.q-after { font-weight: 800; color: var(--accent-dark); font-size: 1.08rem; }
.q-sum-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-strong); display: flex; flex-direction: column; gap: 6px; }
.q-internal { background: #fafbfc; margin-left: -16px; margin-right: -16px; padding: 12px 16px 4px; }
.q-commission { background: var(--accent-light); border: 0; border-radius: var(--radius-sm); padding: 12px 14px; }
@media (min-width: 900px) { .q-internal { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } }
.q-actions-small { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.q-btn-danger-text { color: var(--danger); }

/* mobiilin kiinteä summapalkki */
.q-sticky {
  position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(15, 23, 42, .07);
}
.q-sticky-sum { font-size: 1.25rem; font-weight: 800; color: var(--brand); line-height: 1.15; }
.q-sticky-after { color: var(--accent-dark); font-weight: 650; }
@media (min-width: 900px) { .q-sticky { bottom: 0; left: var(--sidebar-w); } }
@media (min-width: 1100px) { .q-sticky { display: none; } }

/* jakomodaali */
.q-share-row { display: flex; gap: 8px; }
.q-share-row .input { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.q-share-btns { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .q-share-btns { grid-template-columns: repeat(3, 1fr); } }

/* tulostusnäkymä (A4) */
.p-toolbar { justify-content: space-between; margin-bottom: 14px; }
.print-doc {
  background: #fff; color: #111; max-width: 210mm; margin: 0 auto; padding: 16mm 15mm;
  box-shadow: var(--shadow-lg); border-radius: 4px; font-size: 10.5pt; line-height: 1.45;
}
@media (max-width: 700px) { .print-doc { padding: 18px 14px; } }
.p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 3px solid var(--brand); padding-bottom: 12px; margin-bottom: 14px; }
.p-brand { display: flex; align-items: center; gap: 10px; }
.p-logo { display: inline-flex; }
.p-company { font-size: 1.35rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.p-tagline { font-size: .8rem; color: #555; }
.p-docinfo { text-align: right; font-size: .88rem; }
.p-doctitle { font-size: 1.4rem; font-weight: 800; letter-spacing: .08em; color: var(--brand); }
.p-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.p-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #666; font-weight: 700; margin-bottom: 2px; }
.p-title { font-size: 1.25rem; margin: 8px 0 6px; }
.p-intro { color: #333; }
.p-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.p-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #555; border-bottom: 1.5px solid #333; padding: 6px 6px; }
.p-table td { padding: 6px 6px; border-bottom: 1px solid #ddd; vertical-align: top; }
.p-table .num { text-align: right; white-space: nowrap; }
.p-table tr.p-cat td { font-weight: 800; color: var(--brand); background: var(--field); border-bottom: 1px solid #c9d8d6; padding-top: 8px; }
.p-name { font-weight: 600; }
.p-desc { font-size: .8rem; color: #666; }
.p-bottom { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 700px) { .p-bottom, .p-parties { grid-template-columns: 1fr; } }
.p-block { margin-bottom: 10px; }
.p-totals .line.big { font-size: 1.15rem; }
.p-terms { margin-top: 14px; font-size: .82rem; color: #333; }
.p-terms p { white-space: pre-wrap; }
.p-accepted { margin-top: 10px; font-weight: 700; color: var(--ok); }
.p-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; break-inside: avoid; }
.p-signline { border-bottom: 1px solid #333; height: 34px; margin-bottom: 4px; }
.p-foot { margin-top: 22px; padding-top: 8px; border-top: 1px solid #ccc; font-size: .75rem; color: #666; text-align: center; }
@media print {
  .print-doc { box-shadow: none; padding: 0; max-width: none; border-radius: 0; }
  .p-table tr { break-inside: avoid; }
  .p-table tr.p-cat td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .q-sticky, .offer-sticky { display: none !important; }
}

/* asiakkaan tarjousnäkymä #/t/<token> */
.offer { display: flex; flex-direction: column; gap: 14px; }
.offer.has-sticky { padding-bottom: 80px; }
.offer > .card + .card { margin-top: 0; }
.offer h2 { font-size: 1.2rem; }
.offer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 2px 4px; }
.offer-brand { display: flex; align-items: center; gap: 10px; }
.offer-logo { display: inline-flex; }
.offer-brand-name { font-weight: 800; font-size: 1.3rem; color: var(--brand); line-height: 1.1; }
.offer-brand-sub { font-size: .78rem; color: var(--muted); }
.offer-header-phone { font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 480px) { .offer-header-phone { display: none; } }
.offer-hero { border-top: 5px solid var(--brand); }
.offer-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 800; color: var(--accent-dark); }
.offer-title { font-size: 1.6rem; margin: 4px 0 12px; letter-spacing: -.01em; }
.offer-meta { display: grid; grid-template-columns: 1fr; gap: 10px; }
.offer-meta > div { display: flex; flex-direction: column; }
.offer-meta .muted { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
@media (min-width: 640px) { .offer-meta { grid-template-columns: 2fr 1fr 1fr; } }
.offer-intro { margin: 14px 0 0; font-size: 1.05rem; }
.offer-price { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-2) 70%, var(--accent-dark) 140%); color: #fff; border: 0; text-align: center; padding: 22px 18px; }
.offer-price-label { font-weight: 650; opacity: .9; }
.offer-price-value { font-size: 2.6rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0; }
.offer-price-after { display: inline-flex; flex-direction: column; background: rgba(255, 255, 255, .14); border-radius: var(--radius-sm); padding: 8px 16px; margin: 6px 0; }
.offer-price-after strong { font-size: 1.4rem; }
.offer-price .muted { color: rgba(255, 255, 255, .8); }
.offer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.offer-badge { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 650; }
.offer-group { margin-top: 10px; }
.offer-group + .offer-group { margin-top: 18px; }
.offer-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--brand-light); padding-bottom: 4px; }
.offer-group-head h3 { margin: 0; color: var(--brand); }
.offer-lines { list-style: none; margin: 0; padding: 0; }
.offer-lines li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.offer-lines li:last-child { border-bottom: 0; }
.offer-line-main { min-width: 0; }
.offer-line-name { font-weight: 650; }
.offer-line-desc { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.offer-line-sum { font-weight: 700; flex: none; }
.offer-totals { margin-top: 16px; padding-top: 10px; border-top: 2px solid var(--border); }
.offer-ded-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
.offer-ded-grid > div { display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius-sm); padding: 10px 12px; }
.offer-ded-grid strong { font-size: 1.2rem; }
@media (min-width: 640px) { .offer-ded-grid { grid-template-columns: repeat(3, 1fr); } }
.offer-inst { display: flex; flex-direction: column; }
.offer-inst-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.offer-inst-row:last-child { border-bottom: 0; }
.offer-inst-no { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-light); color: var(--brand); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.offer-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.offer-fin h2 { margin-bottom: 2px; }
.offer-fin p { margin: 0; }
.offer-terms { white-space: pre-wrap; color: #334155; font-size: .95rem; }
.offer-accept { border: 2px solid var(--brand); }
.offer-accept .field { margin-bottom: 6px; }
.offer-check { margin: 4px 0 10px; }
.offer-accept-btn { font-size: 1.2rem; }
.offer-error { color: var(--danger); font-weight: 650; min-height: 1.2em; margin-top: 8px; }
.offer-decline { margin-top: 4px; width: 100%; color: var(--muted); }
.offer-contact-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-state { text-align: center; padding: 22px 18px; }
.offer-state h1, .offer-state h2 { margin-bottom: 6px; }
.offer-state-icon { color: var(--ok); display: flex; justify-content: center; margin-bottom: 6px; }
.offer-state-ok { background: var(--ok-light); border-color: #86efac; }
.offer-state-warn { background: var(--warn-light); border-color: #fcd34d; }
.offer-state-muted { background: #f1f5f9; }
.offer-print { display: flex; justify-content: center; }
.offer-footer { text-align: center; color: var(--muted); font-size: .82rem; padding: 6px 0 12px; }
.offer-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
}
.offer-sticky-sum { font-size: 1.2rem; font-weight: 800; color: var(--brand); }
@media (min-width: 900px) { .offer-sticky { display: none; } .offer.has-sticky { padding-bottom: 0; } }
@media print {
  .offer-price { background: none !important; color: #000 !important; border: 1px solid #ccc !important; }
  .offer-price .muted, .offer-price-label { color: #333 !important; }
  .offer-badges { display: none; }
}

/* ==========================================================================
   V2 – CORE: brändi, allekirjoituskenttä, esitystila (SPEC_V2 §4, §7)
   ========================================================================== */
.boot-logo { width: 120px; height: auto; opacity: .9; }
.sidebar .brand-logo { height: 40px; }

/* Allekirjoituskenttä (static/js/signature.js) */
.sigpad { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sigpad-box {
  position: relative; width: 100%; min-height: 220px;
  background: #fff; border: 2px dashed var(--border-strong); border-radius: var(--radius);
  overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.sigpad-canvas { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.sigpad-line { position: absolute; left: 6%; right: 6%; bottom: 28%; border-bottom: 1.5px solid #cbd5e1; pointer-events: none; }
.sigpad-hint {
  position: absolute; left: 0; right: 0; bottom: calc(28% - 1.8em); text-align: center;
  color: var(--muted); font-size: .95rem; pointer-events: none;
}
.sigpad-bar { display: flex; justify-content: flex-end; }
.sigpad-clear { min-height: 44px; }

/* iPad-esitystila (#/esitys/<id>): koko näyttö, ei navia */
body.is-present { background: var(--bg); }
.present-view { min-height: 100vh; min-height: 100dvh; max-width: 1100px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); }
.btn-ok:hover { background: #15803d; border-color: #15803d; }
.field-bg { background: var(--field); }

/* --- v2 pricing --- */
/* Hinnasto: minimihintojen selite, puuttuva omakustannus, automaattinen minimihinta */
.pr-minnote {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding: 10px 14px;
  background: var(--accent-light); border-left: 4px solid var(--accent-dark); border-radius: var(--radius-sm);
}
.pr-minnote strong { color: var(--brand); font-size: 1.02rem; }
.pr-minnote .muted { font-size: .88rem; }
.pr-minnote-link { font-size: .88rem; font-weight: 600; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; }
.pr-min-label { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .7rem; }
.pr-badge-nocost { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.pr-item.pr-no-cost { border-left: 4px solid #f87171; }
.pr-item.pr-no-cost.pr-needs-check { border-left-color: #f87171; }
.pr-auto-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--field); border-radius: var(--radius-sm); }
.pr-auto { min-height: var(--tap); }
.pr-auto input[type=checkbox], .pr-checks input[type=checkbox] { width: 24px; height: 24px; flex: none; accent-color: var(--brand); }
.pr-auto-hint { font-variant-numeric: tabular-nums; }
.pr-readonly { background: #f1f5f9 !important; color: var(--brand); cursor: default; }
.pr-km-hint:empty { display: none; }
.pr-km-hint { font-size: .9rem; }
.pr-work-field { display: flex; flex-direction: column; gap: 4px; }
.pr-work-btn { align-self: flex-start; min-height: 36px; padding: 0 10px; font-size: .88rem; }
.pr-recalc { max-height: 55vh; overflow: auto; }
.pr-recalc td, .pr-recalc th { padding: 8px; }
@media print { .pr-minnote { display: none !important; } }

/* Asetukset: hinnoittelu + SMTP */
.dash-pw-state { margin-left: 6px; vertical-align: middle; }
.dash-pw-state .badge { font-size: .72rem; }
.dash-smtp-enable { min-height: var(--tap); }
.dash-smtp-enable input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--brand); }
.dash-smtp-test { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dash-smtp-test .field { flex: 1 1 260px; margin: 0; }
.dash-smtp-test .btn { min-height: var(--tap); }
.dash-smtp-result:empty { display: none; }
.dash-smtp-ok { background: var(--ok-light); color: #15803d; border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 600; }
.dash-smtp-err { background: var(--danger-light); color: #b91c1c; border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 600; }

/* --- v2 reports --- */
/* Asennuspöytäkirja (views/report.js): Pivolin paperilomakkeen ilme – tummanvihreä otsikkopalkki,
   pyöristetyt osiopalkit, kentät vaalealla harmaanvihreällä (#eff4f3) taustalla, pieni harmaa label. */
.rp-page { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rp-top-mid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-std { font-size: .8rem; color: var(--muted); background: var(--field); border-radius: 999px; padding: 3px 10px; }
.rp-save { font-size: .85rem; color: var(--muted); white-space: nowrap; min-width: 9em; text-align: right; }
.rp-save.ok { color: var(--ok); }
.rp-save.err { color: var(--danger); font-weight: 650; }
.rp-sheet-box { display: block; }
.rp-sheet { background: #fff; color: #1f2d2b; border-radius: 16px; box-shadow: var(--shadow); padding: 18px;
  display: flex; flex-direction: column; gap: 14px; }
.rp-head { background: #2f4f4b; color: #fff; border-radius: 14px; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rp-title { color: #fff; font-size: 1.9rem; font-weight: 800; margin: 0; letter-spacing: .01em; }
.rp-headsub { font-size: .9rem; color: rgba(255, 255, 255, .88); }
.rp-logo { background: #fff; border-radius: 12px; padding: 8px 12px; flex: 0 0 auto; display: flex; }
.rp-logo img { height: 56px; width: auto; display: block; }
.rp-typebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rp-typelabel { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #2f4f4b; }
.rp-type { width: auto; min-width: 250px; }
.rp-sec { display: flex; flex-direction: column; gap: 10px; border-radius: 12px; }
.rp-bar { background: #2f4f4b; color: #fff; border-radius: 10px; padding: 8px 14px; margin: 0; font-size: 1.05rem; font-weight: 700; }
.rp-row { display: grid; gap: 10px; grid-template-columns: 1fr; align-items: stretch; }
.rp-f { background: #eff4f3; border-radius: 10px; padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-f:focus-within { box-shadow: 0 0 0 2px rgba(47, 79, 75, .4); }
.rp-l { font-size: .78rem; color: #64748b; font-weight: 600; line-height: 1.25; }
.rp-in { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.1rem; width: 100%;
  min-height: 42px; padding: 4px 0; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; }
.rp-in::placeholder { color: #94a3b8; }
.rp-ta { resize: vertical; min-height: 84px; line-height: 1.45; }
.rp-f-big .rp-ta { min-height: 140px; }
.rp-v { font-size: 1rem; min-height: 1.5em; padding: 2px 0; overflow-wrap: anywhere; }
.rp-pre { white-space: pre-wrap; }
.rp-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; padding: 2px 4px; }
.rp-checks-label { font-weight: 700; color: #2f4f4b; margin-right: 2px; }
.rp-checks-extra .rp-checks-label { color: var(--muted); font-weight: 600; }
.rp-chk { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; cursor: pointer; font-size: 1.02rem; }
.rp-chk input { width: 28px; height: 28px; accent-color: #2f4f4b; flex: 0 0 auto; margin: 0; }
.rp-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px;
  border: 1.5px solid #2f4f4b; border-radius: 4px; background: #fff; color: #2f4f4b; font-size: 13px; font-weight: 800; line-height: 1; }
.rp-mode-static .rp-chk { min-height: 0; gap: 6px; cursor: default; }
.rp-tri { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  background: #eff4f3; border-radius: 10px; padding: 6px 10px; }
.rp-tri-label { font-weight: 600; }
.rp-tri-note { background: #fff; border-radius: 8px; padding: 4px 10px; min-height: 44px; font-size: 1rem; }
.rp-tri-note-v { color: #334155; }
.rp-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rp-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 56px;
  padding: 0 12px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: #fff; color: var(--text);
  font: inherit; font-weight: 650; font-size: .98rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rp-seg-btn.on { background: #2f4f4b; border-color: #2f4f4b; color: #fff; }
.rp-seg-btn.rp-seg-ok.on { background: var(--ok); border-color: var(--ok); }
.rp-seg-btn.rp-seg-ei.on { background: var(--danger); border-color: var(--danger); }
.rp-seg-btn.rp-seg-na.on { background: #64748b; border-color: #64748b; }
.rp-seg-sym { font-weight: 800; }
.rp-seg-static { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.rp-f-choice .rp-seg { margin-top: 4px; }
.rp-sub { font-weight: 800; color: #2f4f4b; border-bottom: 2px solid #c9d8d6; padding: 4px 2px; margin-top: 4px; }
.rp-note { margin: 2px 4px; font-style: italic; color: #334155; }
.rp-sensors { display: flex; flex-direction: column; gap: 8px; }
.rp-sensor-row { display: grid; gap: 10px; align-items: stretch; }
.rp-x { font-size: 1.7rem; min-width: 48px; color: var(--danger); align-self: center; }
.rp-add { align-self: flex-start; }
.rp-empty { padding: 4px; }
.rp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 6px 0; }
.rp-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #dbe5e3; }
button.rp-photo { border: 0; padding: 0; width: 100%; cursor: zoom-in; font: inherit; }
.rp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-photo-x { position: absolute; top: 4px; right: 4px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(15, 23, 42, .72); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.rp-file { display: none; }
.rp-f-photos .row { margin-top: 2px; }
.rp-f-sig { padding-bottom: 10px; }
.rp-sig-holder .sigpad-box { border-color: #b8cbc8; }
.rp-sig-img { min-height: 72px; display: flex; align-items: flex-end; background: #fff; border-radius: 6px;
  border-bottom: 1.5px solid #94a3b8; padding: 4px; }
.rp-sig-img img { max-height: 96px; max-width: 100%; display: block; }
.rp-foot { text-align: center; color: #64748b; font-size: .85rem; border-top: 1px solid #dbe5e3; padding-top: 10px; }
.rp-actions { position: sticky; z-index: 15; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 8px);
  display: flex; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -2px 18px rgba(15, 23, 42, .14); }
.rp-done { flex: 1 1 auto; min-height: 60px; font-size: 1.2rem; }
@media (min-width: 900px) { .rp-actions { bottom: 12px; } }
.rp-attn { animation: rp-attn 1.8s ease; }
@keyframes rp-attn { 0%, 100% { box-shadow: none; } 25%, 60% { box-shadow: 0 0 0 4px rgba(217, 119, 6, .55); } }
.rp-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px; background: var(--warn-light); }
.rp-banner.ok { background: var(--ok-light); color: #14532d; }
.rp-banner.pop { animation: rp-pop .35s ease; }
@keyframes rp-pop { from { transform: scale(.97); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 599px) {
  .rp-row, .rp-sensor-row { grid-template-columns: 1fr !important; }
  .rp-tri { grid-template-columns: 1fr; }
  .rp-sheet { padding: 10px; }
  .rp-head { padding: 12px 14px; }
  .rp-title { font-size: 1.4rem; }
  .rp-logo img { height: 40px; }
  .rp-blank { display: none; }
  .rp-type { min-width: 0; }
}

/* A4-tuloste #/poytakirja/<id>/tulosta */
.rp-print-page { max-width: 210mm; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.rp-print-toolbar { gap: 10px; }
.rp-sheet.rp-print { padding: 10mm; gap: 5px; font-size: 10pt; border-radius: 4px; box-shadow: var(--shadow-lg); }
.rp-print .rp-head { padding: 8px 12px; border-radius: 10px; }
.rp-print .rp-title { font-size: 20pt; }
.rp-print .rp-headsub { font-size: 8.5pt; }
.rp-print .rp-logo { padding: 5px 8px; border-radius: 8px; }
.rp-print .rp-logo img { height: 34px; }
.rp-print .rp-sec { gap: 4px; }
.rp-print .rp-bar { font-size: 10pt; padding: 3px 10px; border-radius: 7px; }
.rp-print .rp-row { gap: 5px; }
.rp-print .rp-f { padding: 2px 8px; border-radius: 6px; line-height: 1.3; }
.rp-print .rp-l { font-size: 7pt; }
.rp-print .rp-v { font-size: 10pt; min-height: 1.35em; padding: 0; }
.rp-print .rp-f-big .rp-v { min-height: 13mm; }
.rp-tri-group { display: flex; flex-direction: column; gap: 8px; }
.rp-mode-static .rp-chk { font-size: inherit; }
.rp-print .rp-tri-group { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.rp-print .rp-tri { padding: 2px 7px; gap: 2px 6px; border-radius: 6px; font-size: 8.5pt; line-height: 1.3;
  grid-template-columns: minmax(0, 1fr) auto; }
.rp-print .rp-tri-notebox { grid-column: 1 / -1; font-size: 8pt; }
.rp-print .rp-seg-static { gap: 3px 7px; font-size: 8pt; }
.rp-print .rp-box { width: 12px; height: 12px; font-size: 9px; border-width: 1.2px; border-radius: 3px; }
.rp-print .rp-checks { gap: 1px 14px; padding: 0 2px; font-size: 9pt; line-height: 1.35; }
.rp-print .rp-note { font-size: 9pt; margin: 0 2px; }
.rp-print .rp-sub { font-size: 9.5pt; padding: 1px 2px; margin-top: 2px; }
.rp-print .rp-sig-img { min-height: 16mm; }
.rp-print .rp-sig-img img { max-height: 18mm; }
.rp-print .rp-foot { font-size: 8pt; padding-top: 5px; }
.rp-print .rp-k-work_done .rp-v { column-count: 2; column-gap: 8mm; font-size: 8.5pt; line-height: 1.3; }
.rp-appendix-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rp-appendix-grid figure { margin: 0; }
.rp-appendix-grid img { width: 100%; max-height: 105mm; object-fit: contain; background: #f1f5f4; border-radius: 4px; display: block; }
.rp-appendix-grid figcaption { font-size: 8pt; color: #64748b; }
@media print {
  .rp-print-page { max-width: none; gap: 0; }
  .rp-sheet.rp-print { padding: 0; box-shadow: none; border-radius: 0; }
  .rp-sheet, .rp-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-appendix { break-before: page; }
  .rp-sec, .rp-tri, .rp-f { break-inside: avoid; }
  .rp-actions, .rp-top, .rp-banner { display: none !important; }
  .rp-sheet { box-shadow: none; }
}
.pr-recalc-cb { width: 44px; }
.pr-recalc-cb input { width: 24px; height: 24px; accent-color: var(--brand); }

/* --- v2 quotes --- */
/* 3-vaiheinen tarjouseditori (#/tarjoukset/uusi, #/tarjoukset/<id>) – iPad ensin */
.qx-editor { max-width: 880px; margin: 0 auto; padding-bottom: 120px; display: flex; flex-direction: column; gap: 14px; }
.qx-editor > .q-head, .qx-editor > .q-banners { margin-bottom: 0; }
.qx-editor .card + .card { margin-top: 0; }
.qx-step { display: flex; flex-direction: column; gap: 14px; }
.qx-card { padding: 18px; }
.qx-h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 12px; }
.qx-mt { margin-top: 12px; }
.qx-save { font-size: .85rem; color: var(--muted); font-weight: 600; margin-left: auto; }
.qx-save.is-ok { color: var(--ok); }
.qx-save.is-error { color: var(--warn); }

.qx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qx-stepbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 6px 10px;
  border: 2px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--muted);
  font: inherit; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qx-stepbtn.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.qx-stepbtn.is-done { color: var(--brand); }
.qx-stepno { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 800; }
.qx-stepbtn.is-active .qx-stepno { background: var(--brand); color: #fff; }
.qx-stepbtn.is-done .qx-stepno { background: var(--accent); color: #fff; }
@media (max-width: 520px) { .qx-steplabel { font-size: .85rem; } .qx-stepbtn { flex-direction: column; gap: 2px; } }

.qx-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; margin: 16px 0 12px; }
.qx-or::before, .qx-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.qx-pick { color: var(--brand); font-weight: 700; flex: none; }

/* vaihe 2: laatat + stepperit */
.qx-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.qx-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  min-height: 140px; padding: 18px; text-align: left; border: 2px solid var(--border); border-radius: 18px;
  background: #fff; color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent; transition: border-color .12s, background .12s;
}
.qx-tile:hover { border-color: var(--brand-2); }
.qx-tile.is-selected { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 3px rgba(47, 79, 75, .15); }
.qx-tile.is-selected::after { content: '✓'; position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.qx-tile .q-tpl-icon { color: var(--accent-dark); }
.qx-tile-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.qx-tile-sub { color: var(--muted); font-size: .92rem; line-height: 1.3; }
.qx-tile-tag { font-size: .78rem; font-weight: 800; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 1100px) { .qx-tiles { grid-template-columns: repeat(4, 1fr); } .qx-tile { min-height: 160px; } }
@media (max-width: 380px) { .qx-tiles { grid-template-columns: 1fr; } }

.qx-vars { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 720px) { .qx-vars { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.qx-var { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.qx-var-label { display: flex; flex-direction: column; font-weight: 750; font-size: 1.08rem; line-height: 1.2; }
.qx-stepper { flex: none; border-radius: 14px; }
.qx-stepper button { width: 60px; height: 60px; font-size: 1.5rem; }
.qx-stepper button:active { background: var(--brand-light); }
.qx-stepper input { width: 76px; height: 60px; font-size: 1.3rem; }

.qx-lines-card { padding-top: 10px; padding-bottom: 10px; }
.qx-lines-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; border: 0; background: none; font: inherit; font-weight: 750; color: var(--brand); cursor: pointer; padding: 0; text-align: left; }
.qx-caret { transition: transform .15s; display: inline-block; }
.qx-caret.is-open { transform: rotate(180deg); }
.qx-lines { margin: 4px 0 8px; }
.qx-line-tools { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.qx-link { border: 0; background: none; color: var(--brand); font: inherit; font-size: .92rem; font-weight: 650; padding: 8px 0; min-height: 40px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* vaihe 3: hinta + kateliukusäädin */
.qx-price-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .qx-price-grid { grid-template-columns: 1.05fr 1fr; align-items: stretch; } }
.qx-price { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-2) 75%, var(--accent-dark) 150%); color: #fff; border: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 24px 18px; }
.qx-price-label { font-weight: 650; opacity: .9; }
.qx-price-value { font-size: 2.7rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.1; }
.qx-price-after { display: inline-flex; flex-direction: column; align-self: center; background: rgba(255, 255, 255, .15); border-radius: var(--radius-sm); padding: 8px 16px; margin-top: 4px; }
.qx-price-after strong { font-size: 1.35rem; }
.qx-price-sub { font-size: .82rem; opacity: .8; margin-top: 4px; }
.qx-margin { display: flex; flex-direction: column; gap: 8px; }
.qx-margin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qx-margin-head .qx-h2 { margin: 0; }
.qx-private { font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 10px; }
.qx-margin-main { font-size: 1.3rem; font-weight: 800; color: var(--brand); line-height: 1.25; }
.qx-margin-comm { color: var(--accent-dark); }
.qx-range-wrap { padding: 6px 2px; }
.qx-range { --fill: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; touch-action: pan-y; margin: 0; }
.qx-range::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(to right, var(--brand) 0, var(--brand) var(--fill), var(--border) var(--fill)); }
.qx-range::-moz-range-track { height: 12px; border-radius: 999px; background: var(--border); }
.qx-range::-moz-range-progress { height: 12px; border-radius: 999px; background: var(--brand); }
.qx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -14px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 8px rgba(15, 23, 42, .25); }
.qx-range::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 8px rgba(15, 23, 42, .25); }
.qx-range:focus-visible { outline: 3px solid rgba(47, 79, 75, .28); outline-offset: 2px; border-radius: 8px; }
.qx-range-ends { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--muted); }
.qx-range-ends strong { color: var(--text); }
.qx-inst:empty { display: none; }
.qx-inst { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }

.qx-actions { display: flex; flex-direction: column; gap: 10px; }
.qx-present-btn { min-height: 68px; font-size: 1.3rem; border-radius: 14px; }
.qx-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
.qx-actions-row > .btn { flex: 1 1 200px; }
.qx-adv > summary { cursor: pointer; font-weight: 750; color: var(--brand); min-height: var(--tap); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; }
.qx-adv > summary::-webkit-details-marker { display: none; }
.qx-adv > summary::before { content: '▸'; transition: transform .15s; }
.qx-adv[open] > summary::before { transform: rotate(90deg); }
.qx-more { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }

/* kiinteä alapalkki vaiheissa 1–2 */
.qx-sticky {
  position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
}
.qx-sticky .btn-lg { min-height: 56px; }
.qx-sticky-sum { min-width: 0; }
.qx-sticky-value { font-size: 1.3rem; font-weight: 800; color: var(--brand); line-height: 1.15; }
@media (min-width: 900px) { .qx-sticky { bottom: 0; left: var(--sidebar-w); padding: 12px 32px calc(12px + env(safe-area-inset-bottom)); } }

/* lähetysdialogi */
.qx-send-btns { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .qx-send-btns { grid-template-columns: repeat(3, 1fr); } }
.qx-send-result:empty { display: none; }
.qx-send-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-radius: var(--radius-sm); padding: 10px 12px; font-weight: 600; }
.qx-send-msg.ok { background: var(--ok-light); color: #166534; }
.qx-send-msg.info { background: var(--brand-light); color: var(--brand-dark); }

/* tarjouksen tiedot (ei muokattavissa) */
.qx-detail { max-width: 1100px; padding-bottom: 40px; }
.qx-detail-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.qx-detail-grid > .stack > .card + .card { margin-top: 0; }
@media (min-width: 980px) { .qx-detail-grid { grid-template-columns: 380px 1fr; align-items: start; } }
.qx-detail-actions .btn-lg { min-height: 56px; }
.qx-signed { background: var(--ok-light); border-color: #86efac; display: flex; flex-direction: column; gap: 10px; }
.qx-signed-head { display: flex; align-items: center; gap: 12px; }
.qx-signed-check { width: 44px; height: 44px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; flex: none; }
.qx-signed-title { font-size: 1.2rem; font-weight: 800; color: #166534; }
.qx-signature-img { max-height: 120px; object-fit: contain; object-position: left; max-width: 360px; width: 100%; height: auto; background: #fff; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); }
.q-internal-card { background: #fafbfc; }

/* sopimus/tilausvahvistus (tulostus) */
.p-parties-3 { grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width: 700px) { .p-parties-3 { grid-template-columns: 1fr; } }
.p-sign-done { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; }
.p-sigimg { display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; margin-bottom: 2px; }
.p-sig-typed { height: 64px; display: flex; align-items: flex-end; font-size: 1.15rem; font-style: italic; font-family: "Snell Roundhand", "Segoe Script", cursive; color: #1e293b; }
.print-doc.is-contract .p-head { border-bottom-color: var(--ok); }

/* iPad-esitystila #/esitys/<id> */
.pz { display: flex; flex-direction: column; gap: 16px; font-size: 18px; }
.pz.has-sticky { padding-bottom: 110px; }
.pz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.pz-edit { color: #94a3b8; font-size: .85rem; font-weight: 600; text-decoration: none; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.pz-edit:hover { color: var(--muted); }
.pz-logo { height: 64px; width: auto; }
.pz-hero { padding: 0 2px; }
.pz-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 800; color: var(--accent-dark); }
.pz-title { font-size: 2.1rem; letter-spacing: -.015em; margin: 2px 0 6px; color: var(--brand-dark); }
.pz-cust { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 1.05rem; }
.pz-cust strong { color: var(--text); }
.pz-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .pz-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.pz-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* pysty (yksi palsta): hinta → työt → yhteyshenkilö → maksuerät → rahoitus → ehdot */
@media (max-width: 899px) {
  .pz-col { display: contents; }
  .pz-price { order: 1; } .pz-work { order: 2; } .pz-contact { order: 3; } .pz-instcard { order: 4; } .pz-fin { order: 5; } .pz-terms { order: 6; }
}
.pz-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; }
.pz-card h2 { font-size: 1.25rem; margin-bottom: 10px; color: var(--brand-dark); }
.pz-price { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-2) 70%, var(--accent-dark) 150%); color: #fff; border-radius: 22px; padding: 26px 22px; text-align: center; box-shadow: var(--shadow-lg); }
.pz-price-label { font-weight: 650; opacity: .9; }
.pz-price-value { font-size: 3.4rem; font-weight: 850; letter-spacing: -.025em; line-height: 1.1; margin: 6px 0 10px; }
.pz-ded { display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, .14); border-radius: 14px; padding: 12px 16px; text-align: left; }
.pz-ded > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pz-ded-after strong { font-size: 1.5rem; }
.pz-price-sub { margin-top: 8px; font-size: .9rem; opacity: .85; }
.pz-group + .pz-group { margin-top: 14px; }
.pz-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--brand-light); padding-bottom: 4px; }
.pz-group-head h3 { margin: 0; color: var(--brand); font-size: 1.1rem; }
.pz-group-head .num { font-weight: 750; }
.pz-lines { list-style: none; margin: 0; padding: 0; }
.pz-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.pz-lines li:last-child { border-bottom: 0; }
.pz-line-name { font-weight: 600; }
.pz-line-qty { color: var(--muted); white-space: nowrap; }
.pz-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pz-badges span { background: var(--accent-light); color: var(--brand-dark); border-radius: 999px; padding: 4px 12px; font-size: .88rem; font-weight: 700; }
.pz-inst { display: flex; flex-direction: column; }
.pz-inst-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pz-inst-row:last-child { border-bottom: 0; }
.pz-inst-no { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-light); color: var(--brand); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pz-fin p { margin-bottom: 10px; }
.pz-contact-name { font-size: 1.35rem; font-weight: 800; }
.pz-contact-row { font-size: 1.15rem; font-weight: 650; }
.pz-terms summary { cursor: pointer; font-weight: 750; color: var(--brand); min-height: 44px; display: flex; align-items: center; }
.pz-terms p { white-space: pre-wrap; font-size: .95rem; color: #334155; }
.pz-note { background: var(--warn-light); border-color: #fcd34d; }
.pz-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(15, 23, 42, .1);
}
.pz-accept { width: 100%; min-height: 72px; font-size: 1.45rem; font-weight: 800; border-radius: 16px; letter-spacing: .01em; }
.pz-sign { max-width: 860px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; }
.pz-sign-title { font-size: 1.5rem; margin: 0; color: var(--brand-dark); }
.pz-sign-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; background: var(--field); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 1.05rem; }
.pz-sign-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .pz-sign-fields { grid-template-columns: 1fr 1fr; } }
.pz-sign .input { font-size: 1.1rem; min-height: 54px; }
.pz-check { font-size: 1.05rem; align-items: flex-start; padding: 6px 0; }
.pz-check input { width: 28px; height: 28px; flex: none; margin-top: 0; }
.pz-sign-btn { min-height: 68px; font-size: 1.3rem; font-weight: 800; border-radius: 14px; width: 100%; }
.pz-error { color: var(--danger); font-weight: 650; min-height: 1.2em; }
.pz-legal { margin: 0; }
.pz-back { align-self: center; color: var(--muted); }
.pz-done { max-width: 760px; width: 100%; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 22px; }
.pz-done h1 { font-size: 2rem; margin: 0; color: #166534; }
.pz-done-icon { color: var(--ok); }
.pz-done-lead { font-size: 1.15rem; margin: 0; }
.pz-done-facts { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; text-align: left; margin: 8px 0; }
.pz-done-facts > div { display: flex; justify-content: space-between; gap: 12px; background: var(--bg); border-radius: var(--radius-sm); padding: 10px 14px; }
.pz-sigfig { margin: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pz-sigfig img { max-height: 140px; object-fit: contain; max-width: 420px; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.pz-sigfig figcaption { color: var(--muted); font-size: .9rem; }
.pz-done-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 6px; }
.pz-done-actions > .btn { min-height: 64px; font-size: 1.2rem; }
.pz-send { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-send .input { flex: 1 1 220px; min-height: 56px; }
.pz-send .btn { flex: 1 1 220px; }
.pz-send-result:empty { display: none; }
.pz-ok { color: #166534; font-weight: 700; }
.pz-done-foot { display: flex; justify-content: center; }

/* julkinen tarjous: allekirjoitus + myyjä */
.offer-accept-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .offer-accept-fields { grid-template-columns: 1fr 1fr; } }
.offer-padbox { width: 100%; }
.offer-sigfig { margin: 8px auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.offer-sigfig img { max-height: 120px; object-fit: contain; max-width: 360px; width: 100%; height: auto; background: #fff; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); }
.offer-sigfig figcaption { font-size: .88rem; color: var(--muted); }
.offer-contact-name { font-size: 1.2rem; font-weight: 800; }
.offer-contact-lines { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 650; margin: 2px 0 4px; }
@media print {
  .qx-sticky, .pz-sticky { display: none !important; }
  .offer-state .btn { display: none !important; }
  .p-sigimg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- iPad-läpikäynti (V2): kosketuskohteet ja pienet korjaukset ---- */
/* Kosketusnäytöillä (iPad, puhelin) kaikki napit ja sirut vähintään 44 px korkeita (Applen ohje). */
@media (pointer: coarse) {
  .btn-sm, .chip { min-height: 44px; }
}
/* Valintaruutu ei saa kutistua flex-labelissa (julkinen tarjous: 16 px → 22 px). */
.check > input[type=checkbox] { flex: none; }
.offer-check > input[type=checkbox] { width: 26px; height: 26px; }
/* Julkinen tarjous: alapalkki väistyy, kun allekirjoituskortti on näkyvissä (offer.js). */
.offer-sticky { transition: transform .2s ease; }
.offer-sticky.offer-sticky-off { transform: translateY(110%); pointer-events: none; }
/* Tarjous: kiinteähintainen tarjous → kateliukusäädin lukittu (quotes.js) */
.qx-range:disabled { opacity: .35; cursor: not-allowed; }
.pz-send-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; }
.pz-sign-hint { text-align: center; min-height: 1.3em; margin-top: -4px; }

/* ==========================================================================
   V3 (CORE): ilmoituskello + paneeli, puhelinnumerokysely
   ========================================================================== */
.topbar-actions { display: flex; align-items: center; gap: 2px; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sidebar .side-head .brand { padding: 4px 4px 8px 10px; }
.bell-btn {
  position: relative; border: 0; background: none; cursor: pointer; color: var(--brand);
  min-height: var(--tap); min-width: var(--tap); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.bell-btn:hover { background: var(--bg); }
.notif-badge {
  position: absolute; top: 6px; right: 4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid #fff;
}
.notif-badge[hidden] { display: none; }
.notif-list { display: flex; flex-direction: column; gap: 8px; max-height: min(60vh, 520px); overflow-y: auto; }
.notif-empty { text-align: center; padding: 24px 0; }
.notif-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: #fff;
}
.notif-item.unread { border-color: var(--accent); background: var(--accent-light); }
.notif-item.has-link { cursor: pointer; }
.notif-item.has-link:hover { border-color: var(--brand-2); }
.notif-title { font-weight: 700; }
.notif-item.unread .notif-title::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); margin-right: 8px; vertical-align: middle;
}
.notif-body { margin-top: 2px; white-space: pre-line; }
.notif-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; min-height: 32px; }
.phone-ask { text-align: center; }
.phone-ask .field { text-align: left; }
.phone-ask-icon {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.phone-ask .input { font-size: 1.25rem; min-height: 54px; letter-spacing: .02em; }

/* --- v3 quotes --- */
/* Kateliukusäädin: iso, sormella helppo (nuppi 40 px, raita 14 px), −/+ hienosäätö 1 %. Raidan pointer-käsittely
   on JS:ssä (quotes.js) → natiivi input ei ota kosketuksia vastaan (iPad Safari ei hyppää napautuksesta). */
.qx-margin-up { font-size: 1.05rem; font-weight: 750; color: var(--accent-dark); margin-top: -4px; }
.qx-margin-up.is-min { color: var(--muted); font-weight: 650; }
.qx-slider-row { display: flex; align-items: center; gap: 10px; }
.qx-slider-row .qx-range-wrap { flex: 1 1 auto; min-width: 0; padding: 8px 0; touch-action: pan-y; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.qx-slider-row .qx-range { height: 48px; pointer-events: none; touch-action: pan-y; }
.qx-slider-row .qx-range::-webkit-slider-runnable-track { height: 14px; }
.qx-slider-row .qx-range::-moz-range-track { height: 14px; }
.qx-slider-row .qx-range::-moz-range-progress { height: 14px; }
.qx-slider-row .qx-range::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -13px; }
.qx-slider-row .qx-range::-moz-range-thumb { width: 36px; height: 36px; }
.qx-range-step {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--brand); background: #fff;
  color: var(--brand); font-size: 1.7rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.qx-range-step:active { background: var(--brand); color: #fff; }
.qx-range-ends .right { text-align: right; }
.qx-range-ends-btns { align-items: center; }
.qx-range-ends-btns .grow { flex: 1 1 0; min-width: 0; }

/* Työn osuus eriteltynä (editori, tiedot, esitystila, julkinen tarjous, sopimus) */
.ws-split { display: flex; flex-direction: column; gap: 6px; }
.ws-title { font-weight: 700; font-size: .9rem; }
.ws-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg); }
.ws-row span { min-width: 0; }
.ws-row strong { white-space: nowrap; }
.ws-row.ws-work { background: var(--accent-light); }
.ws-row.ws-ded strong { color: var(--ok, #16a34a); }
.ws-line { display: block; font-size: .82rem; color: var(--accent-dark); font-weight: 600; margin-top: 2px; }
.q-line-sumwrap { margin-left: auto; text-align: right; }
.q-line-sumwrap .q-line-total { margin-left: 0; }
.q-line-work:empty { display: none; }
.qx-price .qx-split { margin-top: 10px; text-align: left; }
.qx-price .qx-split:empty { display: none; }
.qx-price .ws-row { background: rgba(255, 255, 255, .13); color: #fff; font-size: .92rem; }
.qx-price .ws-row.ws-work { background: rgba(255, 255, 255, .22); }
.qx-price .ws-row.ws-ded strong { color: #d9fbe5; }
.qx-breakdown-card summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.qx-breakdown { margin-top: 8px; }
.qx-bd-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.qx-bd-row:last-child { border-bottom: 0; }
.qx-bd-name { font-weight: 650; }
.pz-line-name .ws-line { font-weight: 600; }
.pz-split .ws-row { font-size: 1.05rem; padding: 10px 14px; }
.offer-ded .ws-split { margin-bottom: 10px; }
.offer-ded-after { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; padding: 4px 12px 10px; }
.ws-print .ws-row { background: none; padding: 2px 0; border-radius: 0; font-size: .85rem; }
.ws-print .ws-row.ws-work { background: none; }
.p-work { color: #2f4f4b; }

/* Suodatinpalkki: haku + yksi siisti pudotusvalikko (ei chip-rivejä) */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-bar > .input:not(select) { flex: 1 1 260px; min-width: 0; }
.filter-select { flex: 0 1 230px; min-height: 48px; font-weight: 650; }
.filter-select.is-active { border-color: var(--brand); background-color: var(--brand-light, #e7efee); color: var(--brand); }
@media (max-width: 560px) { .filter-select { flex: 1 1 100%; } }

/* --- v3 calendar --- */
/* Henkilösuodatin: yksi siisti pudotusvalikko (monivalinta, värit pieninä palloina) */
.cal-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-dd { position: relative; }
.cal-dd-btn { min-height: 48px; font-weight: 650; gap: 8px; padding: 0 14px; background: #fff; max-width: 100%; }
.cal-dd-btn.filtered { border-color: var(--brand); background: var(--brand-light); color: var(--brand); }
.cal-dd-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.cal-dd-dots { display: inline-flex; gap: 3px; }
.cal-dd-dots .dot { width: 9px; height: 9px; }
.cal-dd-caret { font-size: .8rem; color: var(--muted); }
.cal-dd-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 270px; max-width: min(360px, 92vw);
  max-height: min(70vh, 480px); overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px; -webkit-overflow-scrolling: touch; }
.cal-dd-menu[hidden] { display: none; }
.cal-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cal-dd-item:hover, .cal-dd-item:focus-visible { background: var(--field); outline: none; }
.cal-dd-item.on { font-weight: 650; }
.cal-dd-check { width: 18px; flex: none; color: var(--brand); font-weight: 800; text-align: center; }
.cal-dd-group { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 10px 10px 4px; }
.cal-dd-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px 2px; border-top: 1px solid var(--border); margin-top: 6px; }
.cal-wh-note { white-space: nowrap; }
@media (max-width: 560px) {
  .cal-dd, .cal-dd-btn { width: 100%; }
  .cal-dd-btn { justify-content: flex-start; }
  .cal-dd-caret { margin-left: auto; }
  .cal-dd-menu { width: 100%; max-width: none; }
}

/* Työajan ulkopuoliset tunnit viikkonäkymässä (valittu henkilö) */
.cal-off { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(100, 116, 139, .09) 0 6px, rgba(100, 116, 139, .16) 6px 12px); }
.cal-off span { position: sticky; top: 4px; display: block; padding: 6px; font-size: .75rem; color: var(--muted); font-weight: 650; text-align: center; }

/* Ilmoituksen linkistä avattu merkintä korostetaan */
.cal-event.cal-hl, .cal-agenda-item.cal-hl { box-shadow: 0 0 0 3px var(--accent-dark), 0 6px 16px rgba(15, 23, 42, .2); z-index: 5; animation: cal-hl-pulse 1.2s ease-out 3; }
@keyframes cal-hl-pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 157, 153, .7); } 100% { box-shadow: 0 0 0 10px rgba(79, 157, 153, 0); } }
.cal-offday { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-light); color: #78350f; }

/* Työajat-sivu (#/tyoajat) */
.wh-person { max-width: 420px; margin-bottom: 12px; }
.wh-select { min-height: 48px; font-weight: 650; }
.wh-card { max-width: 760px; }
.wh-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.wh-card-head .section-title { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.wh-note { margin: 10px 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-light); font-size: .92rem; }
.wh-note-plain { margin: 6px 0 10px; }
.wh-days { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.wh-day { display: grid; grid-template-columns: 130px 130px 1fr; align-items: center; gap: 12px; padding: 8px 14px; min-height: 64px;
  border-bottom: 1px solid var(--border); background: #fafbfc; }
.wh-day:last-child { border-bottom: 0; }
.wh-day.on { background: #fff; }
.wh-day.bad { background: var(--danger-light); }
.wh-dayname { font-weight: 700; }
.wh-day:not(.on) .wh-dayname { color: var(--muted); }
.wh-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; font-weight: 600; user-select: none; }
.wh-switch { appearance: none; -webkit-appearance: none; position: relative; width: 50px !important; height: 30px !important; flex: none;
  border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background .15s; margin: 0; }
.wh-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.wh-switch:checked { background: var(--brand); }
.wh-switch:checked::after { transform: translateX(20px); }
.wh-switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wh-switch:disabled { opacity: .5; cursor: default; }
.wh-times { display: flex; align-items: center; gap: 8px; }
.wh-times .input { width: 120px; min-height: 48px; }
.wh-times .input:disabled { opacity: .45; }
.wh-err { grid-column: 1 / -1; color: var(--danger); font-size: .85rem; font-weight: 600; }
.wh-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.wh-team { max-width: 760px; margin-top: 16px; }
.wh-team .section-title { margin-top: 0; }
.wh-team-row .wh-sum { font-weight: 600; text-align: right; font-size: .92rem; }
@media (max-width: 640px) {
  .wh-day { grid-template-columns: 1fr auto; }
  .wh-times { grid-column: 1 / -1; }
  .wh-times .input { flex: 1; width: auto; }
  .wh-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 899px) { .pz-split { order: 1; } }  /* hinnan alle (sama order, DOM-järjestys) */