/* Esittelyversion mukaiset näkymät: ylävalikko, sivut, varaukset, projektin työtila */

/* ---------- ylävalikko ---------- */
/* Yläpalkki joustaa: kapealla näytöllä valikko rivittyy kahdelle riville eikä yksikään kohta piiloudu. */
.topbar{ gap:18px; height:auto !important; min-height:56px; flex-wrap:wrap; row-gap:4px; padding-top:6px !important; padding-bottom:6px !important; }
.topbar-left{ flex-shrink:0; }
.topnav{ flex:1 1 auto; display:flex; flex-wrap:wrap; gap:2px; min-width:0; }
.topbar-tools{ display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }
.refresh-btn{ background:transparent; border:1px solid #3A4A6B; color:#C9D0DC; border-radius:6px; padding:5px 9px; font:inherit; font-size:12px; font-weight:600; display:flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }
.refresh-btn:hover{ background:#1D2E4D; color:#fff; }
.refresh-btn.stale{ border-color:#F2C94C; color:#F2C94C; }
.refresh-ico{ display:inline-block; font-size:14px; line-height:1; }
.refresh-btn.spinning .refresh-ico{ animation:refspin 0.8s linear infinite; }
@keyframes refspin{ to{ transform:rotate(360deg); } }
.update-banner{ flex-shrink:0; background:#FFF4CC; color:#5C4500; border-bottom:1px solid #E9D48A; padding:8px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13px; }
.page-error{ background:#FDECEA; border:1px solid #F1B8B2; color:#7A1F17; border-radius:8px; padding:16px 18px; font-size:13px; line-height:1.5; }
.page-error p{ margin:6px 0 8px; }
.page-error code{ display:block; background:#fff; border:1px solid #F1B8B2; border-radius:6px; padding:6px 8px; font-size:12px; color:#5b1a14; white-space:pre-wrap; }
.topnav-link{ background:transparent; border:none; color:#C9D0DC; font-size:13px; font-weight:600; padding:8px 12px; border-radius:6px; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.topnav-link:hover{ background:#1D2E4D; color:#fff; }
.topnav-link.active{ background:#fff; color:var(--navy); }
.topnav-link.urgent{ color:#FFB4A9; }
.topnav-link.urgent.active{ color:var(--red-ink); }
.nbadge{ background:#F2C94C; color:#3D2F05; font-size:10px; font-weight:800; padding:1px 7px; border-radius:20px; line-height:16px; }
.nbadge.red{ background:#E4534A; color:#fff; }
.topbar-right{ flex-shrink:0; }
.topbar-user-btn{ background:transparent; border:1px solid transparent; color:#fff; border-radius:var(--radius); padding:5px 10px 5px 6px; display:flex; align-items:center; gap:9px; cursor:pointer; font:inherit; }
.topbar-user-btn:hover{ background:#1D2E4D; border-color:#3A4A6B; }
@media (max-width: 1200px){ .topbar-user-text{ display:none; } .topbar-brand{ display:none; } }

.main-scroll{ flex:1; min-width:0; overflow-y:auto; }

/* ---------- sivukehys ---------- */
.page{ max-width:1180px; margin:0 auto; padding:26px 28px 60px; }
.page-wide{ max-width:1440px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.page-kicker{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; color:var(--ink-faint); margin:0 0 4px; text-transform:uppercase; }
.page-title{ font-family:var(--disp); font-weight:600; font-size:24px; color:var(--navy); margin:0; letter-spacing:-0.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.page-sub{ font-size:13px; color:var(--ink-soft); margin:6px 0 0; max-width:820px; line-height:1.5; }
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.h1{ font-family:var(--disp); font-weight:600; font-size:21px; color:var(--navy); margin:2px 0 4px; }
.h2{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--navy); margin:0; }
.section-label{ font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; margin:10px 0 8px; }
.muted{ color:var(--ink-faint); }
.small{ font-size:11.5px; }
.txt-red{ color:var(--red-ink) !important; }
.txt-green{ color:var(--green-ink) !important; }
.mono{ font-family:var(--mono); font-size:12.5px; }
.big-strong{ font-size:15px; font-weight:700; color:var(--ink); }
.link-strong{ background:none; border:none; padding:0; color:var(--navy); font-weight:700; font-size:13.5px; text-align:left; cursor:pointer; }
.link-strong:hover{ text-decoration:underline; }
.link-strong.big{ font-size:15.5px; }
.back-link{ font-size:12.5px; margin-bottom:8px; display:inline-block; }
.btn-danger{ background:#C8453B; color:#fff; }
.btn-danger:hover{ background:#A93A31; }
.btn-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn-col{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.toolbar-title{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--navy); margin-left:6px; }
.empty-box{ border:1.5px dashed var(--line-strong); border-radius:10px; padding:18px; text-align:center; color:var(--ink-faint); font-size:13px; background:var(--panel-2); }
.info-banner{ background:#E8EEF8; color:#27406B; border:1px solid #C9D6EE; border-radius:8px; padding:10px 14px; font-size:12.5px; margin-bottom:14px; }
.field-static{ font-size:13px; padding:8px 0; color:var(--ink); white-space:pre-wrap; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 14px; }
.two-col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.three-col{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.2fr) minmax(0,1fr); gap:20px; align-items:start; }
.stat-grid4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width: 1000px){ .two-col, .three-col, .stat-grid4, .grid3{ grid-template-columns:1fr; } }

/* ---------- kortit, pillerit, rivit ---------- */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.card-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.card-amber{ background:#FFF9E8; border-color:#F2D58A; }
.card-red{ background:#FFF6F5; border-color:#EBA79F; }
.card-blue{ background:#F1F5FD; border-color:#C4D3F2; }
.card-green{ background:#F2FAF4; border-color:#B8DEC4; }
.pill{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; vertical-align:middle; letter-spacing:0.01em; }
.pill-green{ background:var(--green-bg); color:var(--green-ink); }
.pill-amber{ background:var(--amber-bg); color:var(--amber-ink); }
.pill-red{ background:#E4534A; color:#fff; }
.pill-grey{ background:#ECEAE3; color:var(--ink-soft); }
.pill-blue{ background:#E3EBFB; color:#27406B; }
.row-line{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; flex-wrap:wrap; }
.row-line:last-child{ border-bottom:none; }
.file-link{ color:var(--navy-2); font-size:12.5px; font-weight:600; text-decoration:none; }
.file-link:hover{ text-decoration:underline; }
.av{ width:26px; height:26px; border-radius:50%; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.av-blue{ background:#DCE3F7; color:#2E4A9E; }
.av-green{ background:#CDEED9; color:#186B34; }
.av-grey{ background:#EDEFF3; color:#6B7280; }
.kv{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:5px 0; border-bottom:1px dashed var(--line); }
.kv span{ color:var(--ink-faint); }
.kv b{ text-align:right; }
.kv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-top:8px; }
.quote{ background:#fff; border-radius:8px; padding:10px 12px; font-size:13px; color:var(--ink); margin-top:8px; border:1px solid var(--line); }
.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl th{ text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); padding:6px 8px; border-bottom:1px solid var(--line); }
.tbl td{ padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }

/* ---------- välilehdet ja segmentit ---------- */
.ptabs{ display:flex; gap:4px; border-bottom:2px solid var(--line); margin:4px 0 18px; overflow-x:auto; scrollbar-width:thin; }
.ptab{ background:#ECEAE3; color:var(--ink-soft); border:2px solid transparent; border-bottom:none; border-radius:9px 9px 0 0; padding:7px 10px; font-size:12px; font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.ptab:hover{ color:var(--navy); }
.ptab.active{ background:var(--panel); color:var(--navy); border-color:var(--line); margin-bottom:-2px; padding-bottom:10px; }
.seg{ display:inline-flex; background:#ECEAE3; border-radius:8px; padding:3px; gap:2px; }
.seg-btn{ background:transparent; border:none; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.seg-btn.active{ background:var(--panel); color:var(--navy); box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip{ background:#ECEAE3; border:1px solid transparent; color:var(--ink-soft); border-radius:20px; padding:4px 11px; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.chip.on{ background:#E3EBFB; color:#27406B; border-color:#B9CBF5; }
.x-btn{ background:none; border:none; color:var(--ink-faint); font-size:14px; line-height:1; padding:0 2px; cursor:pointer; }
.x-btn:hover{ color:var(--red-ink); }
.meta-row{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft); margin-top:8px; }
.meta-row b{ color:var(--ink); }

/* ---------- PM: viikkonäkymä ---------- */
.wk-head{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; margin:8px 0 4px; font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }
.wk-head .weekend{ color:#C7C3B4; }
.wk-head .today{ color:var(--navy); }
.wk-project{ margin-top:22px; }
.wk-project-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.wk-budget{ font-size:12px; color:var(--ink-soft); }
.wk-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; position:relative; }
.wk-cell{ min-height:118px; border-radius:10px; border:1.5px solid var(--line); background:var(--panel); padding:8px; cursor:pointer; display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; transition:box-shadow .12s; }
.wk-cell:hover{ box-shadow:0 0 0 3px rgba(29,46,77,0.12); }
.wk-cell.empty{ border-style:dashed; background:transparent; }
.wk-cell.weekend{ background:#F3F1EA; border-style:dashed; opacity:0.7; }
.wk-cell.today{ border-color:var(--navy-2); }
.wk-none{ margin:auto; font-size:11.5px; color:#B7B3A5; }
.wk-entry{ border-radius:8px; padding:7px 8px; }
.wk-entry.pending{ background:#FFF9E8; border:1px solid #F2C94C; }
.wk-entry.approved{ background:#EEFBF1; border:1px solid #7FD99A; }
.wk-entry.modified{ background:#FDECEB; border:1px solid #E4534A; }
.wk-entry.rejected{ background:#F3F1EA; border:1px solid var(--line); opacity:0.8; }
.wk-badge{ display:inline-block; font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:20px; letter-spacing:0.02em; }
.wk-badge.pending{ background:#F2C94C; color:#5C4813; }
.wk-badge.approved{ background:#3CB768; color:#fff; }
.wk-badge.modified{ background:#E4534A; color:#fff; animation:pulseRed 1.8s ease-out infinite; }
.wk-badge.rejected{ background:#D5D1C4; color:#55524A; }
.wk-main{ font-size:12.5px; font-weight:700; color:var(--ink); margin-top:5px; }
.wk-names{ font-size:11.5px; color:var(--green-ink); }
.wk-entry.modified .wk-names, .wk-entry.modified .wk-main{ color:#7A1F18; }
.wk-note{ font-size:10.5px; color:var(--ink-faint); }
.wk-note.strike{ text-decoration:line-through; color:#B98E88; }
.wk-frame{ position:absolute; border:2px dashed #9AA6C2; border-radius:14px; pointer-events:none; z-index:2; }
.wk-frame-label{ position:absolute; top:-10px; left:12px; background:var(--bg); padding:0 7px; font-size:10px; font-weight:800; color:#4B5A7A; letter-spacing:0.02em; }
.legend{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-top:24px; font-size:12px; color:var(--ink-soft); }
.legend span{ display:flex; align-items:center; gap:7px; }
.dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.dot.amber{ background:#F2C94C; } .dot.green{ background:#3CB768; } .dot.red{ background:#E4534A; }
.dot.pulse, .pulse-dot{ animation:pulseRed 1.8s ease-out infinite; }
.pulse-dot{ width:10px; height:10px; border-radius:50%; background:#E4534A; display:inline-block; margin-right:6px; }
.frame-mini{ width:22px; height:14px; border:2px dashed #9AA6C2; border-radius:4px; display:inline-block; }
@keyframes pulseRed{ 0%{ box-shadow:0 0 0 0 rgba(220,38,38,.45);} 70%{ box-shadow:0 0 0 8px rgba(220,38,38,0);} 100%{ box-shadow:0 0 0 0 rgba(220,38,38,0);} }

/* ---------- modaalit ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(19,32,56,0.38); z-index:70; }
.modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:640px; max-width:calc(100vw - 32px); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); background:var(--panel); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.25); z-index:71; display:flex; flex-direction:column; overflow:hidden; }
.modal-lg{ width:1000px; }
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; padding:18px 22px 12px; border-bottom:1px solid var(--line); }
.modal-title{ font-family:var(--disp); font-weight:600; font-size:19px; color:var(--navy); margin:0; }
.modal-body{ padding:18px 22px; overflow-y:auto; flex:1; }
.modal-foot{ padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; background:var(--panel-2); }
.choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.choice{ text-align:left; background:var(--panel); border:1.5px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; cursor:pointer; }
.choice:hover{ border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(29,46,77,0.1); }
.choice-blue{ background:#EAF2FF; border-color:#2E6BF2; }
.choice-icon{ font-size:24px; }
.choice-title{ font-size:17px; font-weight:800; color:var(--ink); }
.choice-text{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
.pick-list{ display:flex; flex-direction:column; gap:8px; }
.pick-row{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); background:var(--panel); border-radius:10px; padding:9px 12px; cursor:pointer; margin-bottom:6px; }
.pick-row.free:hover{ border-color:#7FD99A; }
.pick-row.picked{ border-color:#2E6BF2; background:#EAF2FF; }
.pick-row.disabled{ opacity:0.6; cursor:default; }
.pick-row.starred{ border-color:#B9CBF5; }
.pick-row.starred.picked{ border-color:#2E6BF2; }
.pick-row input{ pointer-events:none; }
.pick-name{ flex:1; font-size:13.5px; font-weight:600; color:var(--ink); }
.summary-box{ background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--ink); margin-top:12px; }
.stepper-inline{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.stepbtn{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line-strong); background:var(--panel); font-size:15px; color:var(--ink); }
.stepbtn:hover{ background:var(--panel-2); }
.assigned-strip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }
.chip-person{ display:inline-flex; align-items:center; gap:6px; background:#ECEAE3; border-radius:20px; padding:3px 10px 3px 3px; font-size:12px; }
.daycols{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; }
.daycol{ border-radius:12px; border:1.5px solid var(--line); background:var(--panel); padding:12px 10px; text-align:center; }
.daycol.active{ border-color:#2E6BF2; background:#EAF2FF; }
.daycol.disabled{ opacity:0.5; background:#F3F1EA; }
.daycol-head{ font-size:11.5px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; }
.daycol-off{ font-size:11px; color:#B7B3A5; margin-top:14px; }
.daycol-step{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; }
.daycol-num{ font-size:20px; font-weight:800; color:var(--ink); min-width:22px; }
.daycol-num.zero{ color:#C7CAD1; }
.daycol-opts{ display:flex; flex-direction:column; gap:4px; margin-top:10px; align-items:center; }

/* ---------- työnjohto: hyväksynnät ---------- */
.split{ flex:1; display:flex; min-width:0; min-height:0; }
.split-left{ width:380px; flex-shrink:0; border-right:1px solid var(--line); padding:20px; overflow-y:auto; background:var(--panel-2); }
.split-main{ flex:1; min-width:0; padding:22px 26px 0; overflow-y:auto; display:flex; flex-direction:column; }
.queue-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.queue-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; cursor:pointer; font-size:13px; }
.queue-card:hover{ border-color:var(--navy-2); }
.queue-card.selected{ border-color:#2E6BF2; box-shadow:0 0 0 3px rgba(46,107,242,.14); }
.queue-card.urgent{ border-left:4px solid #E4534A; }
.queue-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.appr-layout{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; flex:1; }
.appr-days{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.daycol.appr{ text-align:left; cursor:pointer; }
.daycol.appr.active{ box-shadow:0 0 0 3px rgba(46,107,242,.14); }
.mini-person{ display:flex; align-items:center; gap:6px; background:#EEFBF1; border-radius:8px; padding:4px 6px; font-size:12px; font-weight:600; color:#14532D; margin-top:4px; }
.appr-list{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; align-self:start; }
.sticky-foot{ position:sticky; bottom:0; background:var(--panel); border-top:1px solid var(--line); margin:18px -26px 0; padding:14px 26px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; box-shadow:0 -4px 12px rgba(0,0,0,0.04); }
.urgent-card{ margin-bottom:14px; }

/* ---------- projektilista ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:16px; }
.pcard{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.pcard-top{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start; margin-bottom:10px; }
.pcard-num{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin:0 0 2px; }
.pcard-meta{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-soft); margin-top:4px; }
.pcard-meta b{ color:var(--ink); }
.pcard-counts{ display:flex; gap:12px; font-size:11.5px; color:var(--ink-faint); margin-top:8px; flex-wrap:wrap; }

/* ---------- projektin työtila ---------- */
.ws-layout{ display:grid; grid-template-columns:270px minmax(0,1fr); gap:20px; align-items:start; }
.ws-side{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:14px; position:sticky; top:0; }
.cab-item{ background:var(--panel); border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:13px; }
.cab-item:hover{ border-color:var(--navy-2); }
.cab-item.active{ border-color:#2E6BF2; background:#EAF2FF; }
.cab-top{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.cab-info{ border-top:1px solid var(--line); margin-top:12px; padding-top:4px; }
.sys-group{ margin-bottom:18px; }
.sys-title{ font-size:14px; font-weight:800; color:var(--navy); margin:4px 0 6px; padding-bottom:6px; border-bottom:2px solid var(--line); }
.doc-row{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:6px; flex-wrap:wrap; }
.doc-main{ flex:1; min-width:200px; }
.doc-title{ font-size:13px; font-weight:700; color:var(--ink); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.doc-extra{ width:100%; border-top:1px dashed var(--line); padding-top:8px; }
.sum-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.sum-item{ border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:12.5px; border:1px solid var(--line); }
.sum-item.amber{ background:#FFF9E8; } .sum-item.green{ background:#EEFBF1; } .sum-item.grey{ background:#F3F1EA; }
.task, .qcard{ display:flex; gap:12px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.qcard{ display:block; }
.task.done, .qcard.done{ opacity:0.72; }
.task-check{ width:20px; height:20px; border:2px solid var(--line-strong); border-radius:6px; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; }
.task-check.on{ background:#3CB768; border-color:#3CB768; }
.task-title{ font-size:13.5px; font-weight:700; color:var(--ink); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.task.done .task-title{ text-decoration:line-through; }
.task-desc{ font-size:12.5px; color:var(--ink-soft); margin:4px 0; }
.answer{ background:#F2FAF4; border-radius:8px; padding:8px 10px; font-size:12.5px; margin-top:6px; }
.layout-box{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--panel-2); border:1px dashed var(--line-strong); border-radius:10px; padding:14px; }
.ip-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.field-input.qty{ width:70px; display:inline-block; padding:4px 6px; }
.gx-row{ display:grid; grid-template-columns:130px repeat(auto-fit, minmax(150px,1fr)); gap:10px; align-items:start; margin-bottom:10px; }
.gx-sys{ font-size:14px; color:var(--navy); padding-top:4px; }
.gx-cell{ background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.gx-cell.ok{ background:#EEFBF1; border-color:#B8DEC4; }
.type-chips{ display:flex; gap:8px; margin-bottom:14px; }
.type-chip{ flex:1; padding:10px; border:1.5px solid var(--line); border-radius:8px; background:var(--panel); font-size:13px; font-weight:700; color:var(--ink-soft); }
.type-chip.on{ border-color:#2E6BF2; background:#EAF2FF; color:#2E4A9E; }
@media (max-width: 900px){ .ws-layout{ grid-template-columns:1fr; } .ws-side{ position:static; } .appr-layout{ grid-template-columns:1fr; } .split{ flex-direction:column; } .split-left{ width:auto; } }

/* ---------- asentaja ---------- */
.installer-page{ max-width:980px; }
.emp-week{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; }
.emp-day{ background:var(--panel); border:1.5px solid var(--line); border-radius:12px; padding:10px; min-height:110px; cursor:pointer; }
.emp-day:hover{ border-color:var(--navy-2); }
.emp-day.active{ border-color:#2E6BF2; box-shadow:0 0 0 3px rgba(46,107,242,.14); }
.emp-day.today .emp-day-head{ color:var(--navy); }
.emp-day.weekend{ background:#F3F1EA; }
.emp-day-head{ font-size:10.5px; font-weight:800; color:var(--ink-faint); margin-bottom:8px; }
.emp-chip{ background:#EAF2FF; color:#27406B; border-radius:8px; padding:6px 8px; font-size:12px; font-weight:700; margin-bottom:6px; }
.emp-chip.absent{ background:var(--amber-bg); color:var(--amber-ink); }
.emp-free{ font-size:12px; color:#B7B3A5; }
.emp-detail{ display:flex; gap:16px; align-items:flex-start; margin-bottom:10px; flex-wrap:wrap; }
.emp-time{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:var(--panel-2); border-radius:8px; padding:6px 10px; white-space:nowrap; }
@media (max-width: 800px){ .emp-week, .daycols, .wk-grid, .wk-head{ grid-template-columns:repeat(2, minmax(0,1fr)); } .wk-frame{ display:none; } }

/* ---------- kapasiteetti-Gantt ---------- */
.gn-chart{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gn-head{ display:flex; border-bottom:1.5px solid var(--line); background:var(--panel-2); position:sticky; top:0; z-index:3; }
.gn-name-head{ width:210px; flex-shrink:0; padding:10px 14px; font-size:10.5px; font-weight:800; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }
.gn-months{ flex:1; display:grid; grid-template-columns:repeat(12, 1fr); }
.gn-month{ padding:10px 0; text-align:center; font-size:11.5px; font-weight:700; color:var(--ink-faint); border-left:1px solid var(--line); }
.gn-month.now{ color:var(--navy); background:#E8EEF8; }
.gn-body{ position:relative; }
.gn-row{ display:flex; border-bottom:1px solid var(--line); }
.gn-row:last-child{ border-bottom:none; }
.gn-name{ width:210px; flex-shrink:0; padding:12px 14px; font-size:13.5px; border-right:1px solid var(--line); background:var(--panel-2); }
.gn-track{ flex:1; position:relative; background-image:repeating-linear-gradient(to right, transparent 0, transparent calc(100%/12 - 1px), #EFEDE6 calc(100%/12 - 1px), #EFEDE6 calc(100%/12)); }
.gn-lane{ position:absolute; left:0; right:0; height:40px; }
.gn-bar{ position:absolute; top:0; height:18px; border:none; border-radius:6px; padding:0; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.12); }
.gn-bar:hover{ filter:brightness(0.95); box-shadow:0 0 0 3px rgba(29,46,77,0.18); }
.gn-bar.green{ background:#3CB768; } .gn-bar.amber{ background:#F2C94C; } .gn-bar.red{ background:#E4534A; } .gn-bar.none{ background:#9AA6C2; }
.gn-bar.cont{ border-top-right-radius:0; border-bottom-right-radius:0; }
.gn-bar.before{ border-top-left-radius:0; border-bottom-left-radius:0; }
.gn-fill{ position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,0.55); }
.gn-label{ position:absolute; top:21px; font-size:10.5px; color:var(--ink-soft); white-space:nowrap; font-weight:600; }
.gn-free{ position:absolute; right:6px; height:30px; margin-top:-4px; background:#F8F9FB; border:1.5px dashed #C9CDD6; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--green-ink); padding:0 8px; text-align:center; overflow:hidden; white-space:nowrap; }
.gn-today{ position:absolute; top:0; bottom:0; width:2px; background:#14171F; z-index:2; pointer-events:none; }
.gn-sw{ width:22px; height:10px; border-radius:3px; display:inline-block; }
.gn-sw.green{ background:#3CB768; } .gn-sw.amber{ background:#F2C94C; } .gn-sw.red{ background:#E4534A; } .gn-sw.none{ background:#9AA6C2; }
.gn-sw.free{ background:#F8F9FB; border:1.5px dashed #C9CDD6; }

/* Fidelix-logo valkoisena tummalla yläpalkilla */
.topbar-left img{ filter:brightness(0) invert(1); }

/* leveämpi paneeli uuden projektin koonnille (maksuerätaulukko mahtuu) */
.panel.panel-wide{ width:760px; }
.pms-table td{ vertical-align:middle; }
.pms-table .field-input{ padding:6px 8px; }
.pms-sum{ margin-top:8px; font-size:12.5px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:8px 12px; }

/* Gantt: maksuerämerkit ja kuukausikuorma */
.gn-mark{ position:absolute; top:3px; width:12px; height:12px; margin-left:-6px; transform:rotate(45deg); border:2px solid #fff; z-index:2; box-shadow:0 1px 2px rgba(0,0,0,0.3); pointer-events:auto; }
.gn-mark.due{ background:#1D2E4D; }
.gn-mark.paid{ background:#186B34; }
.gn-mark.late{ background:#C8453B; animation:pulseRed 1.8s ease-out infinite; }
.gn-mark.single{ border-radius:50%; transform:none; width:14px; height:14px; margin-left:-7px; top:2px; }
.gn-mark-demo{ width:10px; height:10px; transform:rotate(45deg); display:inline-block; }
.gn-mark-demo.due{ background:#1D2E4D; } .gn-mark-demo.paid{ background:#186B34; } .gn-mark-demo.late{ background:#C8453B; }
.gn-load{ position:absolute; left:0; right:0; height:46px; display:grid; grid-template-columns:repeat(12, 1fr); border-top:1px dashed var(--line); background:rgba(250,249,245,0.8); }
.gn-load-cell{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:4px; gap:2px; }
.gn-load-val{ font-size:9.5px; font-weight:800; color:var(--ink-soft); white-space:nowrap; }
.gn-load-bar{ width:46%; max-width:34px; background:#9AA6C2; border-radius:3px 3px 0 0; position:relative; overflow:hidden; }
.gn-load-paid{ position:absolute; left:0; right:0; bottom:0; background:#186B34; }
.gn-load-zero{ font-size:10px; color:#C7C3B4; }
.gn-warn{ margin-top:4px; font-size:11px; font-weight:700; color:var(--amber-ink); background:var(--amber-bg); border-radius:6px; padding:3px 6px; }

/* ---------- avoin pooli ja tiimivertailu ---------- */
.tm-team-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.tm-team-name{ font-size:14px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.tm-mine{ border-color:#2E6BF2; background:#F1F5FD; }
.tm-kv{ display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:2px 0; color:var(--ink-soft); }
.tm-kv b{ color:var(--ink); }
.tm-pool-card{ margin-bottom:12px; border-left:4px solid #F2C94C; }
.tm-table th.num, .tm-table td.num{ text-align:right; white-space:nowrap; }
.tm-barcell{ min-width:260px; }
.tm-bar-track{ height:14px; background:transparent; }
.tm-bar{ height:14px; background:#B9C3DA; border-radius:0 4px 4px 0; position:relative; overflow:hidden; min-width:2px; }
.tm-bar-inv{ position:absolute; left:0; top:0; bottom:0; background:#1D2E4D; border-right:2px solid var(--panel); }
.tm-bar-lbl{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.tm-sw{ width:14px; height:10px; display:inline-block; border-radius:2px; }
.tm-sw.inv{ background:#1D2E4D; } .tm-sw.rest{ background:#B9C3DA; }

/* Tiimini-sivun ilmoitus avoimen poolin projekteista */
.pool-notice{ display:flex; justify-content:space-between; align-items:center; gap:14px; background:#FFF8E1; border:1px solid #F2C94C; border-left:4px solid #F2C94C; border-radius:8px; padding:10px 14px; margin-bottom:18px; font-size:13px; color:#5C4500; }

/* ---------- Myynnin luovutus: lisätiedot ja liitteet ---------- */
textarea.si-notes{ min-height:220px; resize:vertical; line-height:1.5; font:inherit; font-size:13px; width:100%; box-sizing:border-box; }
#si-notes-edit.si-notes{ min-height:340px; }
.si-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1.5px dashed #B9C2D0; border-radius:8px; padding:14px; background:#FAFBFC; cursor:pointer; text-align:center; font-size:13px; color:var(--ink-soft); }
.si-drop:hover, .si-drop.over{ border-color:var(--navy); background:#EEF2F8; color:var(--navy); }
.si-drop-ico{ font-size:20px; line-height:1; }
.si-file-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.si-file-list li{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:12.5px; flex-wrap:wrap; }
.si-file-list.big li{ padding:8px 10px; }
.si-fname{ font-weight:600; flex:1; min-width:120px; word-break:break-word; }
.si-ico{ display:inline-block; min-width:30px; text-align:center; font-size:9.5px; font-weight:800; letter-spacing:0.03em; color:#fff; background:#C0392B; border-radius:3px; padding:2px 4px; }
.si-file-link{ display:flex; align-items:center; gap:8px; flex:1; min-width:160px; color:var(--navy); text-decoration:none; }
.si-file-link:hover .si-fname{ text-decoration:underline; }
.si-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width: 1000px){ .si-grid{ grid-template-columns:1fr; } }
.si-card{ padding:16px 18px; }
.si-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.si-notes-view{ white-space:pre-wrap; word-break:break-word; font-size:13.5px; line-height:1.55; color:var(--ink); background:#FAFBFC; border:1px solid var(--line); border-radius:6px; padding:12px 14px; max-height:560px; overflow:auto; }
.si-compact{ margin-top:10px; font-size:12.5px; }
.si-compact-notes{ white-space:pre-wrap; word-break:break-word; color:var(--ink-soft); background:#FAFBFC; border-left:3px solid #D5DBE5; padding:6px 10px; border-radius:4px; line-height:1.45; }
.si-compact-files{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.si-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:14px; padding:3px 10px 3px 4px; background:#fff; color:var(--navy); text-decoration:none; font-size:12px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.si-chip:hover{ border-color:var(--navy); }
.btn-link.danger{ color:#B42318; }


/* ---------- Tuotekatalogi: avattavat pääryhmät ---------- */
.ct-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.ct-search{ flex:1; min-width:220px; max-width:420px; }
details.ct-group, details.ct-add{ border:1px solid var(--line); border-radius:8px; background:#fff; margin-bottom:10px; }
details.ct-group > summary, details.ct-add > summary{ list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; user-select:none; }
details.ct-group > summary::-webkit-details-marker, details.ct-add > summary::-webkit-details-marker{ display:none; }
details.ct-group > summary:hover, details.ct-add > summary:hover{ background:#F7F9FC; border-radius:8px; }
.ct-chev{ display:inline-block; transition:transform 0.15s; color:var(--navy); font-size:13px; width:12px; }
details[open] > summary .ct-chev{ transform:rotate(90deg); }
.ct-gname{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--navy); }
.ct-gmeta{ font-size:12px; color:var(--ink-faint); margin-left:auto; }
.ct-warn{ color:#9A6B00; }
.ct-gbody{ padding:0 16px 12px; border-top:1px solid var(--line); }
.ct-add-body{ padding:6px 16px 16px; border-top:1px solid var(--line); }
.ct-cat{ margin-top:12px; }
.ct-cat-title{ font-size:11.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.ct-table-wrap{ overflow-x:auto; }
.ct-table{ width:100%; border-collapse:collapse; font-size:13px; }
.ct-table th{ text-align:left; font-size:11px; font-weight:700; color:var(--ink-faint); padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.ct-table td{ padding:6px 8px; border-bottom:1px solid #F0F2F5; vertical-align:middle; }
.ct-table tr:last-child td{ border-bottom:none; }
.ct-name{ font-weight:600; min-width:180px; }
.ct-unit{ color:var(--ink-faint); width:50px; }
.ct-num{ text-align:right; white-space:nowrap; }
.ct-input{ width:92px; text-align:right; padding:5px 7px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12.5px; }
.ct-doccell{ display:inline-flex; gap:8px; align-items:center; white-space:nowrap; font-size:12px; }
.ct-doc.ok{ color:#1E7B45; font-weight:600; text-decoration:none; }
.ct-doc.ok:hover{ text-decoration:underline; }
.ct-doc.missing{ color:var(--ink-faint); }
.ct-up{ cursor:pointer; font-size:12px; }
.ct-admin{ white-space:nowrap; }
.ct-group-sel{ font:inherit; font-size:12px; padding:3px 4px; border:1px solid var(--line); border-radius:5px; margin-right:8px; }

/* ---------- Ilmoitukset ---------- */
.notif-btn{ position:relative; background:transparent; border:1px solid #3A4A6B; color:#C9D0DC; border-radius:6px; padding:5px 9px; font:inherit; font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }
.notif-btn:hover{ background:#1D2E4D; color:#fff; }
.notif-btn.active{ background:#fff; color:var(--navy); border-color:#fff; }
.notif-btn.has-unread{ border-color:#E4534A; color:#fff; }
.notif-btn.active.has-unread{ color:var(--navy); }
.notif-ico{ font-size:13px; line-height:1; }
@media (max-width: 1200px){ .notif-txt{ display:none; } }
.nf-list{ max-width:860px; }
.nf-day{ margin:18px 0 8px; }
.nf-day:first-child{ margin-top:0; }
.nf-card{ display:flex; gap:12px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:8px; }
.nf-card.unread{ border-left-color:var(--navy); background:#FBFCFE; box-shadow:0 1px 0 rgba(20,32,60,0.04); }
.nf-card.unread .nf-title{ font-weight:700; }
.nf-card.nf-kiireellinen.unread{ border-left-color:#E4534A; }
.nf-card.nf-poissaolo.unread{ border-left-color:#F2994A; }
.nf-ico{ font-size:20px; line-height:1.2; width:26px; text-align:center; flex-shrink:0; }
.nf-main{ flex:1; min-width:0; }
.nf-top{ display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--ink-faint); margin-bottom:2px; }
.nf-kind{ text-transform:uppercase; letter-spacing:0.05em; font-weight:700; }
.nf-title{ font-size:14px; color:var(--navy); font-weight:600; line-height:1.35; }
.nf-body{ font-size:12.5px; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; margin-top:3px; line-height:1.45; }
.nf-actions{ display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }
#nf-toast{ position:fixed; right:18px; bottom:18px; z-index:1000; max-width:440px; }
.nf-toast-card{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--navy); border-radius:8px; padding:12px 12px; box-shadow:0 8px 24px rgba(20,32,60,0.18); font-size:13px; animation:nfin 0.25s ease-out; }
.nf-toast-main{ flex:1; min-width:0; color:var(--navy); }
.nf-toast-close{ background:transparent; border:none; font-size:14px; color:var(--ink-faint); cursor:pointer; padding:2px 4px; }
@keyframes nfin{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- Viikkokalenteri (asentajien työnjohto) ---------- */
.wb-page{ max-width:1320px; margin:28px auto; padding:0 20px 40px; }
.wb-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.wb-title{ font-family:var(--disp); font-weight:600; font-size:22px; color:var(--navy); margin:2px 0; }
.wb-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wb-legend{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--ink-soft); margin:6px 0 12px; }
.wb-legend span{ display:inline-flex; align-items:center; gap:6px; }
.wb-sw{ display:inline-block; width:14px; height:14px; border-radius:4px; }
.wb-sw.wb-full{ background:#FDE4E4; border:1px solid #F3B9B9; }
.wb-sw.wb-partial{ background:#FFF4D6; border:1px solid #F0DC9A; }
.wb-sw.wb-free{ background:#E3F6EA; border:1px solid #B5E2C5; }
.wb-sw-abs{ background:repeating-linear-gradient(135deg,#E6E9EF 0 4px,#D5DAE2 4px 8px); }
.wb-card{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow-x:auto; }
.wb-table{ width:100%; border-collapse:collapse; min-width:980px; table-layout:fixed; }
.wb-th{ font-size:12.5px; font-weight:700; color:var(--ink-soft); padding:12px 8px; text-align:center; border-bottom:2px solid #EEF0F4; border-left:1px solid #F1F3F6; }
.wb-th-name{ width:150px; border-left:none; }
.wb-table th:last-child{ width:120px; }
.wb-th.wb-today{ color:var(--navy); background:#F2F5FA; }
.wb-today-tag{ display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#3A5BA0; margin-top:1px; }
.wb-row{ border-bottom:1px solid #EEF0F4; transition:background 0.12s; }
.wb-row:last-child{ border-bottom:none; }
.wb-row:hover{ background:#F6FBF8; }
.wb-row-full:hover{ background:#FFF7F7; }
.wb-row-partial:hover{ background:#FFFCF3; }
.wb-name{ padding:12px 14px; vertical-align:middle; }
.wb-name b{ display:block; font-size:15px; color:var(--navy); }
.wb-name span{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:1px; }
.wb-td{ padding:6px 6px; vertical-align:middle; border-left:1px solid #F1F3F6; }
.wb-block{ display:block; width:100%; text-align:left; border:none; border-radius:7px; padding:8px 10px; margin:2px 0; font:inherit; font-size:12.5px; line-height:1.35; cursor:pointer; }
.wb-block .wb-proj{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-block b{ display:block; font-size:12.5px; }
.wb-block.wb-full{ background:#FDE4E4; color:#8E2A2A; }
.wb-block.wb-partial{ background:#FFF4D6; color:#6F5200; }
.wb-block.wb-free{ background:#E3F6EA; color:#1D6B3A; }
.wb-block:hover{ filter:brightness(0.97); box-shadow:inset 0 0 0 1px rgba(20,32,60,0.12); }
.wb-more{ display:block; width:100%; opacity:0; transition:opacity 0.12s; background:transparent; border:1px dashed #C9D0DC; border-radius:6px; color:var(--ink-faint); font:inherit; font-size:11px; padding:3px 6px; margin-top:3px; cursor:pointer; }
.wb-more:hover{ border-color:#3A6FD8; color:#2F5FC4; background:#EEF3FE; }
.wb-empty{ display:flex; width:100%; min-height:52px; align-items:center; justify-content:center; background:transparent; border:1.5px dashed #D3D8E0; border-radius:8px; color:#9AA3B2; font:inherit; font-size:12.5px; cursor:pointer; text-align:center; padding:6px; }
.wb-empty .wb-empty-hover{ display:none; }
.wb-empty:hover, .wb-empty:focus{ border-color:#3A6FD8; background:#EDF3FF; color:#2F5FC4; outline:none; }
.wb-empty:hover .wb-empty-idle, .wb-empty:focus .wb-empty-idle{ display:none; }
.wb-empty:hover .wb-empty-hover, .wb-empty:focus .wb-empty-hover{ display:flex; flex-direction:column; gap:2px; }
.wb-empty-hover small{ font-size:11px; }
.wb-abs{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:52px; border-radius:8px; background:repeating-linear-gradient(135deg,#E9ECF1 0 8px,#DEE2E9 8px 16px); color:#6B7486; font-size:12px; text-align:center; }
.wb-abs b{ font-size:12px; letter-spacing:0.04em; }
.wb-sum{ text-align:center; padding:10px 8px; vertical-align:middle; border-left:1px solid #F1F3F6; }
.wb-sum-h{ font-family:var(--disp); font-size:17px; font-weight:700; }
.wb-txt-full{ color:#9B2C2C; } .wb-txt-partial{ color:#7A5B00; } .wb-txt-free{ color:#1D6B3A; } .wb-txt-absent{ color:#6B7486; }
.wb-pill{ display:inline-block; margin-top:3px; font-size:10px; font-weight:800; letter-spacing:0.03em; padding:2px 8px; border-radius:10px; }
.wb-pill-full{ background:#FDE4E4; color:#9B2C2C; }
.wb-pill-partial{ background:#FFF4D6; color:#7A5B00; }
.wb-pill-free{ background:#E3F6EA; color:#1D6B3A; }
.wb-pill-absent{ background:#ECEEF2; color:#6B7486; }

.wb-row:hover .wb-more, .wb-more:focus{ opacity:1; }
/* Kuljettajarivit viikkokalenterissa */
.wb-block.wb-driver{ background:#E2ECFB; color:#214A86; }
.wb-block.ro{ cursor:default; }
.wb-pill-driver{ background:#E2ECFB; color:#214A86; }
.wb-secrow td{ background:#F4F6FA; border-top:2px solid var(--line); padding:7px 12px !important; }
.wb-secrow span{ font-size:11px; font-weight:800; letter-spacing:0.04em; color:#39455C; }
.wb-secrow small{ margin-left:10px; font-weight:600; color:#7A8396; letter-spacing:0; }
.wb-row-driver .wb-name span{ color:#214A86; }
/* Kuljettajarivit kuukausikalenterissa */
.mb-block.mb-drv{ color:#214A86; }
.mb-drv-driver{ background:#E2ECFB; } .mb-drv-partial{ background:#FFF4D6; color:#6F5200; } .mb-drv-full{ background:#DCF0E4; color:#1D6B3A; }
.mb-secrow th, .mb-secrow td{ background:#F4F6FA; border-top:2px solid var(--line); }
.mb-row-driver .mb-name span{ color:#214A86; }
.wb-move{ display:block; width:100%; margin-top:2px; background:none; border:1px dashed #C5CCDA; color:#4A5873; border-radius:6px; font:inherit; font-size:10.5px; font-weight:700; padding:2px 6px; cursor:pointer; opacity:0; }
.wb-td:hover .wb-move{ opacity:1; }
.wb-move:hover{ background:#EEF2F9; border-style:solid; }
.nv-time{ display:inline-flex; align-items:center; gap:4px; }
.nv-time .field-select{ width:auto; min-width:60px; padding-right:26px; }
.nv-time-sep{ font-weight:700; color:var(--ink-soft); }
.tr-time-edit .nv-time .field-select{ min-width:56px; padding:4px 22px 4px 8px; }
.tr-banner.warn{ background:#E8F0FD; border:1px solid #B9CEF0; color:#1F3B66; }
.tr-banner.ok{ background:#E3F6EA; border:1px solid #BEE3CB; color:#1D6B3A; }
.tr-banner-doc{ font-size:12.5px; margin-top:3px; }
.wb-abs-clash{ box-shadow:inset 0 0 0 2px #E4534A; }
.wb-clash{ margin-top:4px; background:#fff; border:1px solid #F1B8B2; color:#9B2C2C; border-radius:10px; font:inherit; font-size:10.5px; font-weight:700; padding:1px 8px; cursor:pointer; max-width:95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Kuukausitila (viikkokalenteri ja varaukset) ---------- */
.wb-page.wb-wide{ max-width:none; padding:0 16px 40px; }
.mb-seg{ margin-right:6px; }
.mb-month-chip{ min-width:120px; text-align:center; font-weight:700; }
.mb-card{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow-x:auto; }
.mb-table{ border-collapse:separate; border-spacing:0; width:100%; font-size:12px; }
.mb-table th, .mb-table td{ border-bottom:1px solid #EEF0F4; }
.mb-corner{ background:#fff; position:sticky; left:0; z-index:2; }
.mb-sumhead{ position:static; font-size:11px; color:var(--ink-faint); font-weight:700; }
.mb-wk{ font-size:11px; font-weight:700; color:var(--ink-soft); padding:6px 4px 2px; text-align:left; border-left:2px solid #E2E6ED; }
.mb-wk:first-of-type{ border-left:none; }
.mb-day{ padding:4px 2px 6px; text-align:center; min-width:40px; font-weight:600; color:var(--ink-soft); }
.mb-day span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-faint); }
.mb-day b{ display:block; font-size:13px; color:var(--navy); }
.mb-day.mb-today{ background:#EAF0FA; border-radius:6px 6px 0 0; }
.mb-day.mb-today b{ color:#2F5FC4; }
.mb-wkstart{ border-left:2px solid #E2E6ED !important; }
.mb-name{ position:sticky; left:0; z-index:1; background:#fff; text-align:left; padding:8px 12px; min-width:150px; max-width:220px; border-right:1px solid #EEF0F4; }
.mb-name b{ display:block; font-size:13.5px; color:var(--navy); }
.mb-name span{ display:block; font-size:11px; color:var(--ink-faint); font-weight:400; }
.mb-pname .link-strong{ font-size:13px; text-align:left; white-space:normal; }
.mb-row:hover .mb-td, .mb-row:hover .mb-name{ background:#F8FAFD; }
.mb-td{ padding:3px 2px; text-align:center; vertical-align:middle; height:40px; position:relative; }
.mb-td.mb-today{ background:#F4F7FC; }
.mb-td.mb-we, .mb-day.mb-we{ background:#F6F7F9; min-width:22px; }
.mb-stack{ display:flex; flex-direction:column; gap:2px; }
.mb-block{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:100%; min-height:30px; border:none; border-radius:5px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; padding:2px; line-height:1.1; }
.mb-stack .mb-block + .mb-block{ min-height:16px; }
.mb-block small{ font-size:9px; font-weight:600; opacity:0.8; }
.mb-block:hover{ box-shadow:inset 0 0 0 1.5px rgba(20,32,60,0.35); }
.mb-free{ width:100%; min-height:30px; border:1px dashed transparent; border-radius:5px; background:transparent; color:transparent; font:inherit; font-size:14px; cursor:pointer; }
.mb-row:hover .mb-free{ color:#9AA3B2; border-color:#D3D8E0; }
.mb-free:hover{ color:#2F5FC4 !important; border-color:#3A6FD8 !important; background:#EDF3FF; }
.mb-addmore{ position:absolute; right:1px; top:1px; width:14px; height:14px; line-height:12px; border:none; border-radius:50%; background:#fff; color:#2F5FC4; font-size:11px; padding:0; cursor:pointer; opacity:0; box-shadow:0 0 0 1px #C9D5EE; }
.mb-row:hover .mb-addmore{ opacity:1; }
.mb-abs{ min-height:30px; border-radius:5px; background:repeating-linear-gradient(135deg,#E9ECF1 0 5px,#DCE0E7 5px 10px); display:flex; align-items:center; justify-content:center; color:#B42318; font-weight:800; }
.mb-abs-clash{ box-shadow:inset 0 0 0 2px #E4534A; }
.mb-sum{ text-align:center; padding:6px 10px; min-width:96px; border-left:1px solid #EEF0F4; }
.mb-sum-h{ font-family:var(--disp); font-size:15px; font-weight:700; }
.mb-freerow .mb-td, .mb-freerow .mb-name, .mb-freerow .mb-sum{ background:#FAFBFC; border-top:2px solid #E2E6ED; }
.mb-freecount{ display:inline-block; min-width:22px; padding:2px 6px; border-radius:10px; font-weight:800; font-size:11.5px; }
.mb-freecount.zero{ background:#FDE4E4; color:#9B2C2C; }
.mb-freecount.one{ background:#FFF4D6; color:#7A5B00; }
.mb-freecount.many{ background:#E3F6EA; color:#1D6B3A; }
.mb-legend{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 10px; }
.mb-leg{ border:none; border-radius:12px; padding:3px 10px; font:inherit; font-size:11.5px; cursor:pointer; }
.mb-leg-note{ font-size:11.5px; color:var(--ink-soft); margin-left:6px; display:inline-flex; align-items:center; gap:4px; }
.mb-sw-abs{ display:inline-block; width:14px; height:12px; border-radius:3px; background:repeating-linear-gradient(135deg,#E6E9EF 0 3px,#D5DAE2 3px 6px); }
.mb-pm .mb-td{ cursor:pointer; }
.mb-pm .mb-td:hover{ box-shadow:inset 0 0 0 1.5px #3A6FD8; }
.mb-cnt{ display:inline-block; min-width:20px; padding:3px 5px; border-radius:6px; font-weight:800; font-size:11.5px; font-style:normal; margin:1px; }
.mb-cnt.ok{ background:#E3F6EA; color:#1D6B3A; }
.mb-cnt.pend{ background:#FFF4D6; color:#7A5B00; }
.mb-cnt.mod{ background:#FDE4E4; color:#9B2C2C; }

/* ---------- Hankintalista (tuotekatalogin ostoskori) ---------- */
.pc-bar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:14px; box-shadow:0 2px 8px rgba(20,32,60,0.05); }
.pc-bar.has{ border-color:#9DB6E3; background:#F5F8FE; }
.pc-bar-ico{ font-size:18px; }
.pc-bar-txt{ flex:1; font-size:13px; color:var(--ink-soft); }
.pc-add{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pc-qty{ width:60px !important; }
.pc-incart{ font-size:11.5px; font-weight:700; color:#1D6B3A; background:#E3F6EA; border-radius:10px; padding:1px 7px; }
.pc-table td{ vertical-align:middle; }
.pc-qtycell{ white-space:nowrap; }
.pc-qtycell .ct-input{ width:80px; }
.pc-check{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.pc-req{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-top:10px; background:#fff; }
.pc-req-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-bottom:6px; }
.pc-lines{ margin:4px 0 8px; }
.pc-lines td{ padding:3px 6px; font-size:12.5px; }
.card-green{ border-color:#B5E2C5; background:#F3FBF6; }
.pc-done{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
#pc-flash{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; opacity:0; transition:all 0.2s; pointer-events:none; z-index:1001; }
#pc-flash.show{ opacity:1; transform:translateX(-50%); }

/* ---------- Työsuunnitelma ---------- */
.pl-chip{ display:inline-flex; align-items:center; gap:6px; max-width:100%; border:none; border-radius:6px; padding:4px 8px; font:inherit; font-size:12px; font-weight:700; line-height:1.25; cursor:pointer; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:1px 2px 1px 0; }
.pl-chip.pl-vaihe{ background:#DCEBFF; color:#1F4C8F; box-shadow:inset 3px 0 0 #3A6FD8; }
.pl-chip.pl-valmis{ background:#FFE9E6; color:#9B2C2C; box-shadow:inset 3px 0 0 #E4534A; }
.pl-chip:hover{ filter:brightness(0.96); }
.pl-chip.pl-wide{ width:100%; }
.pl-inst{ background:#fff; color:#1F4C8F; border-radius:9px; padding:0 6px; font-size:10.5px; font-weight:800; }
.pl-when{ font-weight:600; opacity:0.75; font-size:11px; }
.pl-upcoming{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:0 0 12px; }
.pl-cal{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pl-week{ display:flex; border-bottom:1px solid #EEF0F4; min-height:64px; }
.pl-week:last-child{ border-bottom:none; }
.pl-week.current{ background:#F7FAFF; }
.pl-wlabel{ width:120px; flex-shrink:0; padding:8px 10px; border-right:1px solid #EEF0F4; display:flex; flex-direction:column; gap:1px; }
.pl-wlabel[data-action]{ cursor:pointer; }
.pl-wlabel[data-action]:hover{ background:#EDF3FF; }
.pl-wlabel b{ font-size:14px; color:var(--navy); }
.pl-wlabel span{ font-size:11px; color:var(--ink-faint); }
.pl-wlabel em{ font-style:normal; font-size:10.5px; color:#2F5FC4; opacity:0; margin-top:2px; }
.pl-wlabel:hover em{ opacity:1; }
.pl-grid{ flex:1; display:grid; grid-template-columns:repeat(5, 1fr) 0.45fr 0.45fr; grid-auto-rows:minmax(0,auto); position:relative; min-width:0; }
.pl-day{ border-left:1px solid #F1F3F6; padding:4px 6px 24px; position:relative; min-height:62px; }
.pl-day:first-child{ border-left:none; }
.pl-day[data-action]{ cursor:pointer; }
.pl-day[data-action]:hover{ background:#EDF3FF; }
.pl-day.we{ background:#F6F7F9; }
.pl-day.today{ background:#EAF0FA; }
.pl-day.past .pl-dnum{ color:#B7BDC8; }
.pl-dnum{ font-size:10.5px; font-weight:600; color:var(--ink-faint); }
.pl-booked{ position:absolute; bottom:3px; left:6px; font-size:10px; color:#1D6B3A; background:#E3F6EA; border-radius:8px; padding:0 5px; }
.pl-items{ grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:repeat(5, 1fr) 0.45fr 0.45fr; align-content:start; padding:20px 4px 22px; gap:2px 4px; pointer-events:none; position:relative; z-index:1; }
.pl-items .pl-chip{ pointer-events:auto; }
.pl-bar-row{ min-width:0; }
.pl-panel .seg{ flex-wrap:wrap; }
.pl-rm-wk{ font-size:11px; padding:6px 4px; text-align:center; min-width:96px; }
.pl-rm-wk span{ display:block; color:var(--ink-faint); font-weight:500; font-size:10.5px; }
.pl-rm-td{ padding:4px; vertical-align:top; border-left:1px solid #F1F3F6; min-width:96px; }
.pl-rm-td .pl-chip{ display:flex; width:100%; }
.pl-band{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; background:#F5F8FE; border:1px solid #D5E0F5; border-radius:8px; padding:8px 12px; margin:4px 0 10px; font-size:12.5px; }
.pl-band-title{ font-weight:700; color:var(--navy); }
.pl-band-item{ display:inline-flex; align-items:center; gap:4px; }
.mb-table.pl-rm{ table-layout:fixed; min-width:1500px; }
.pl-rm thead th.mb-corner:first-child{ width:190px; }
.pl-rm .pl-chip{ white-space:normal; }

/* ---------- Varmuuskopiot (master) ---------- */
.bu-card{ border:1px solid var(--line); border-left:4px solid #C9D0DC; border-radius:8px; padding:12px 14px; margin:0 0 20px; background:#fff; }
.bu-card.ok{ border-left-color:#27AE60; }
.bu-card.bad{ border-left-color:#E4534A; background:#FFF7F6; }
.bu-status{ font-size:13px; margin:4px 0 6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bu-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#C9D0DC; }
.bu-dot.ok{ background:#27AE60; } .bu-dot.bad{ background:#E4534A; } .bu-dot.wait{ background:#F2C94C; }
.bu-path code{ font-size:11.5px; background:#F4F6F9; padding:2px 6px; border-radius:4px; word-break:break-all; }
.bu-warn{ font-size:12px; color:#7A5B00; background:#FFF8E1; border:1px solid #F2DC9A; border-radius:6px; padding:6px 8px; margin:8px 0 0; }
.bu-second{ border-top:1px dashed var(--line); margin-top:12px; padding-top:10px; }
.bu-sub{ font-size:12px; font-weight:700; color:var(--ink-soft); margin:0 0 4px; }
.bu-list{ margin-top:12px; border-top:1px dashed var(--line); padding-top:8px; }
.bu-list > summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--navy); }
.bu-table td{ padding:4px 6px; font-size:12.5px; }
.bu-actions{ white-space:nowrap; display:flex; gap:10px; align-items:center; }
.bu-restart{ position:fixed; inset:0; background:rgba(20,32,60,0.55); z-index:2000; display:flex; align-items:center; justify-content:center; }
.bu-restart > div{ background:#fff; border-radius:10px; padding:22px 26px; max-width:420px; box-shadow:0 10px 40px rgba(0,0,0,0.25); font-size:14px; }
.wb-empty.ro{ cursor:default; border-style:dashed; color:#AEB5C2; font-size:12px; }
.wb-empty.ro:hover{ border-color:#D3D8E0; background:transparent; color:#AEB5C2; }

/* ---------- Ryhmitelty ylävalikko (tiimipäällikkö, osastopäällikkö) ---------- */
.topnav-group{ position:relative; display:flex; }
.topnav-grp{ gap:6px; }
.topnav-sub{ font-weight:500; opacity:0.85; }
.topnav-caret{ font-size:10px; opacity:0.8; }
.topnav-menu{ display:none; position:absolute; top:100%; left:0; min-width:230px; background:#fff; border-radius:8px; box-shadow:0 10px 30px rgba(12,22,45,0.25); padding:6px; z-index:60; margin-top:2px; }
.topnav-group.open .topnav-menu{ display:block; }
@media (hover:hover){ .topnav-group:hover .topnav-menu{ display:block; } .topnav-group:hover .topnav-menu{ margin-top:0; } }
.topnav-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:transparent; border:none; border-radius:6px; padding:9px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--navy); text-align:left; cursor:pointer; white-space:nowrap; }
.topnav-item:hover{ background:#EEF2F8; }
.topnav-item.active{ background:#E3EBF8; color:#1F4C8F; }

/* ---------- Henkilöstöresurssit (rs-) ---------- */
.rs-wrap{ overflow-x:auto; }
.rs-table{ border-collapse:separate; border-spacing:3px; width:100%; min-width:820px; font-size:12.5px; }
.rs-table th.rs-name{ text-align:left; font-weight:700; color:var(--ink); padding:6px 8px; white-space:nowrap; min-width:150px; }
.rs-table th.rs-name span{ display:block; font-weight:400; font-size:11px; color:var(--ink-faint); }
.rs-wk{ font-size:11px; font-weight:700; color:var(--ink-soft); text-align:center; padding:4px; }
.rs-wk span{ display:block; font-weight:400; color:var(--ink-faint); }
.rs-wk.rs-now{ color:var(--navy); }
.rs-td{ text-align:center; padding:7px 4px; border-radius:6px; font-weight:700; color:var(--ink); background:var(--panel-2); }
.rs-td span{ font-weight:400; color:var(--ink-faint); font-size:11px; }
.rs-td.rs-full{ background:#FDE4E4; }
.rs-td.rs-partial{ background:#FFF4D6; }
.rs-td.rs-free{ background:#E3F6EA; }
.rs-td.rs-abs{ background:repeating-linear-gradient(135deg,#E6E9EF 0 4px,#D5DAE2 4px 8px); color:var(--ink-soft); font-weight:600; }
.rs-td.rs-now{ box-shadow:inset 0 0 0 2px var(--navy); }
.rs-total .rs-td span, .rs-sum span{ display:block; }
.rs-total th, .rs-total td{ border-top:2px solid var(--line-strong); }
.rs-sum{ text-align:center; font-size:12px; padding:6px; }
.rs-sum span{ color:var(--ink-faint); font-size:11px; }
.rs-need .rs-td{ background:transparent; }
.rs-pe .rs-num{ text-align:right; white-space:nowrap; }
.rs-pe th.rs-name{ font-weight:700; text-transform:none; font-size:13px; color:var(--ink); }
.rs-pe th.rs-name span{ display:block; font-weight:400; font-size:11px; color:var(--ink-faint); }
.rs-pe td.rs-num{ vertical-align:middle; }

/* ---------- Projektitilanne (pt-) ---------- */
.pt-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.pt-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin-bottom:12px; }
.pt-kpi{ border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--panel-2); border-left:4px solid var(--line-strong); }
.pt-kpi b{ display:block; font-family:var(--disp); font-size:22px; color:var(--navy); line-height:1.1; }
.pt-kpi span{ font-size:11.5px; color:var(--ink-soft); }
.pt-kpi.open{ border-left-color:#8AA4D6; }
.pt-kpi.run{ border-left-color:#E0A33B; }
.pt-kpi.ready{ border-left-color:#9C7CD1; }
.pt-kpi.done{ border-left-color:#3FA46A; }
.pt-kpi.warn{ border-left-color:var(--red-ink); }
.pt-kpi.warn b{ color:var(--red-ink); }
.pt-wrap{ overflow-x:auto; }
.pt-table{ border-collapse:separate; border-spacing:3px; width:100%; min-width:760px; font-size:12.5px; }
.pt-name{ text-align:left; white-space:nowrap; font-weight:700; color:var(--ink); padding:4px 8px; min-width:130px; }
.pt-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; background:var(--line-strong); }
.pt-dot.k-new{ background:#5E8FD6; } .pt-dot.k-open{ background:#8AA4D6; } .pt-dot.k-run{ background:#E0A33B; } .pt-dot.k-done{ background:#3FA46A; }
.pt-m{ font-size:11px; font-weight:700; color:var(--ink-soft); text-align:center; padding:4px 2px; }
.pt-m.now{ color:var(--navy); }
.pt-m.fut{ color:var(--ink-faint); font-weight:600; }
.pt-c{ text-align:center; background:var(--panel-2); border-radius:6px; padding:0; height:34px; }
.pt-c.now{ box-shadow:inset 0 0 0 2px var(--navy); }
.pt-c.fut{ background:repeating-linear-gradient(135deg, var(--panel-2) 0 6px, transparent 6px 12px); }
.pt-c.k-run:not(.fut){ background:#FFF4D6; } .pt-c.k-done:not(.fut){ background:#E3F6EA; } .pt-c.k-open:not(.fut){ background:#EAF0FA; }
.pt-c.sel{ box-shadow:inset 0 0 0 2px var(--navy-2, #2B4C8C); }
.pt-btn{ width:100%; height:100%; min-height:34px; background:transparent; border:none; font:inherit; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; border-radius:6px; }
.pt-btn:hover{ background:rgba(0,0,0,0.05); }
.pt-est{ display:block; font-size:10.5px; font-weight:600; color:var(--ink-faint); }
.pt-year{ background:transparent; font-size:14px; }
.pt-detail{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.pt-detail-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pt-list .num{ text-align:right; white-space:nowrap; }

/* ---------- Myynnin liitteiden tyypit (si-) ---------- */
select.field-input.si-kind-sel{ width:auto; min-width:0; max-width:190px; padding:3px 6px; font-size:12px; height:auto; border-radius:6px; }
.si-kind-tag{ display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; padding:1px 5px; border-radius:4px; margin-right:5px; background:#ECEAE3; color:var(--ink-soft); }
.si-kind-tag.k-saatokaavio{ background:#E3EEFB; color:#1F4E8C; }
.si-kind-tag.k-tarjouslaskenta{ background:#FFF4D6; color:#7A5A00; }
.si-kind-tag.k-sopimus{ background:#E3F6EA; color:#1E6B3E; }
.si-kind-tag.k-piirustus{ background:#F1E8FB; color:#5B3A8C; }
.si-kind-tag.k-laiteluettelo{ background:#E6F4F4; color:#1F6363; }
.si-group-title{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; margin:12px 0 4px; }
.si-group-title:first-of-type{ margin-top:2px; }
.si-add-kind{ margin-top:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.si-add-kind .form-label{ margin:0; }
.si-file-list li{ flex-wrap:wrap; }

/* Tiimi- ja osastopäälliköt Gantt-rivinä (omat projektit) */
.gn-role{ display:inline-block; margin-left:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:1px 6px; border-radius:4px; background:#EEE8F7; color:#5B3A8C; vertical-align:middle; }
.gn-role.inline{ margin-left:8px; }
.gn-row-lead .gn-name{ background:linear-gradient(90deg, #F6F2FB, transparent); }
.gn-free.lead{ border-style:dotted; color:var(--ink-faint); background:transparent; }

/* Varmuuskopioiden levytila */
.bu-usage{ margin:8px 0 4px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); display:grid; gap:2px; font-size:13px; }
.bu-usage.low{ border-color:var(--red-ink); background:var(--red-bg); }

/* =====================================================================
   TABLETIT JA KOSKETUSNÄYTÖT
   ===================================================================== */
/* Isommat painettavat alueet sormella käytettäessä */
@media (pointer: coarse){
  .btn{ min-height:44px; }
  .btn-sm{ min-height:38px; padding-left:14px; padding-right:14px; }
  .topnav-link, .topnav-item{ min-height:40px; }
  .seg-btn{ min-height:38px; }
  .btn-link{ padding-top:6px; padding-bottom:6px; }
}
.pick-main{ flex:1; min-width:0; }
.pick-week{ margin-top:1px; }
.appr-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }

/* Hyväksynnät: vaakatabletti ja pieni kannettava */
@media (max-width: 1280px){
  .split-left{ width:300px; padding:16px; }
  .split-main{ padding:18px 18px 0; }
  .sticky-foot{ margin:18px -18px 0; padding:12px 18px; }
  .appr-foot{ padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .appr-layout{ grid-template-columns:1fr; }
}
/* Pystytabletti ja puhelin: koko näkymä vierii yhtenä sivuna, jono vaakasuuntaisena nauhana
   ja hyväksyntäpainikkeet pysyvät aina näytön alareunassa näkyvissä. */
@media (max-width: 900px){
  .split{ flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .split-left{ width:auto; overflow:visible; border-right:none; border-bottom:1px solid var(--line); padding:14px 16px; flex-shrink:0; }
  .split-main{ overflow:visible; flex:none; padding:16px 16px 0; }
  .sticky-foot{ margin:18px -16px 0; padding:12px 16px; }
  .queue-list{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
  .queue-list .queue-card{ flex:0 0 260px; margin-bottom:0; scroll-snap-align:start; }
  .appr-recent{ display:none; }
  .appr-foot .appr-foot-info .muted{ display:none; }
  .appr-foot .btn-row{ width:100%; }
  .appr-foot .btn-row .btn{ flex:1; }
}

/* =====================================================================
   PUHELIN (asentaja). Alavalikko, päivälista, isot painikkeet.
   ===================================================================== */
.bottomnav{ display:none; }
.file-pick{ position:relative; }
.file-pick.has-file{ border-color:var(--green-ink); color:var(--green-ink); }
.inst-quick{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.inst-quick .btn{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 700px){
  /* iOS ei zoomaa lomakekenttiin, kun fonttikoko on vähintään 16 px */
  input, select, textarea, .field-input, .field-select{ font-size:16px !important; }
  .page{ padding:16px 16px 40px; }
  .page-title{ font-size:21px; }
  .page-head{ margin-bottom:12px; }

  /* Asentaja ja kuljettaja: yläpalkki yhdelle riville, valikko alareunaan */
  .shell.role-emp .topnav, .shell.role-kuljettaja .topnav{ display:none; }
  .shell.role-emp .topbar, .shell.role-kuljettaja .topbar{ flex-wrap:nowrap; min-height:52px; padding-left:14px !important; padding-right:10px !important; }
  .shell.role-emp .topbar-tools, .shell.role-kuljettaja .topbar-tools{ gap:6px; }
  .shell.role-emp .refresh-btn, .shell.role-kuljettaja .refresh-btn{ padding:5px 7px; }
  .shell.role-emp .bottomnav, .shell.role-kuljettaja .bottomnav{ display:flex; flex-shrink:0; background:var(--panel); border-top:1px solid var(--line); box-shadow:0 -4px 14px rgba(0,0,0,0.06); padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); z-index:30; }
  .bn-item{ flex:1; background:transparent; border:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; min-height:56px; border-radius:10px; color:var(--ink-soft); font:inherit; }
  .bn-item.active{ color:var(--navy); background:#EEF2F8; }
  .bn-ico{ position:relative; width:26px; height:26px; display:block; }
  .bn-ico svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .bn-label{ font-size:11.5px; font-weight:700; }
  .bn-badge{ position:absolute; top:-4px; right:-10px; background:#E4534A; color:#fff; font-size:10px; font-weight:800; border-radius:10px; padding:0 5px; line-height:16px; min-width:16px; text-align:center; }

  /* Asentajan projektisivu */
  .installer-page .ptabs{ flex-wrap:wrap; overflow:visible; border-bottom:none; gap:6px; }
  .installer-page .ptab{ border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-bottom:0; }
  .installer-page .ptab.active{ background:var(--navy); color:#fff; border-color:var(--navy); padding-bottom:9px; margin-bottom:0; }
  .installer-page .task{ flex-wrap:wrap; }
  .installer-page .mini-form-row{ flex-wrap:wrap; }
  .installer-page .mini-form-row .btn{ flex:1 1 140px; }
  .installer-page .two-col{ gap:10px; }

  /* Tuotekatalogi kortteina */
  .ct-table thead{ display:none; }
  .ct-table, .ct-table tbody{ display:block; width:100%; }
  .ct-table tr.ct-row{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 2px; border-bottom:1px solid var(--line); }
  .ct-table td{ display:block; padding:0; border:none; }
  .ct-table td.ct-name{ flex:1 1 100%; font-weight:600; font-size:14px; }
  .ct-table td.ct-unit{ color:var(--ink-faint); }
  .ct-table td.ct-cart{ flex:1 1 100%; }
  .ct-table .pc-add{ display:flex; gap:8px; align-items:center; }
  .ct-table .pc-add .pc-qty{ width:70px; }

  /* Paneeli (esim. tuntien kirjaus) koko leveydelle */
  .panel{ width:100% !important; max-width:100% !important; }
}

/* Päivälista (oma kalenteri puhelimella) */
.m-page{ padding-bottom:24px; }
.m-weekbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px; margin-bottom:10px; }
.m-wk-btn{ width:48px; height:44px; border:none; background:#EEF2F8; color:var(--navy); border-radius:9px; font-size:22px; font-weight:700; }
.m-wk-title{ text-align:center; line-height:1.2; }
.m-wk-title b{ display:block; font-size:16px; color:var(--navy); }
.m-wk-title span{ font-size:12.5px; color:var(--ink-soft); }
.m-full{ width:100%; }
.m-section{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); margin:16px 0 8px; }
.m-job{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--navy-2); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.m-job-time{ font-size:12px; font-weight:700; color:var(--navy-2); }
.m-job-name{ font-family:var(--disp); font-size:18px; font-weight:600; color:var(--navy); margin:2px 0 4px; line-height:1.25; }
.m-job-desc{ font-size:14px; color:var(--ink); margin-bottom:6px; }
.m-job-meta{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12.5px; color:var(--ink-soft); }
.m-job-addr{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
.m-job-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.m-job-actions .btn{ flex:1 1 auto; justify-content:center; text-align:center; }
.m-job-actions .m-wide{ flex:1 1 100%; }
.m-empty{ background:var(--panel-2); border:1.5px dashed var(--line-strong); border-radius:12px; padding:16px; text-align:center; color:var(--ink-soft); }
.m-next{ width:100%; margin-top:8px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; text-align:left; display:flex; flex-direction:column; gap:2px; font:inherit; color:var(--ink); }
.m-days{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.m-day{ display:flex; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); }
.m-day:last-child{ border-bottom:none; }
.m-day.today{ background:#EEF4FF; }
.m-day.past{ opacity:0.72; }
.m-day-date{ flex:0 0 46px; text-align:center; line-height:1.15; padding-top:2px; }
.m-day-date b{ display:block; font-size:15px; color:var(--navy); }
.m-day-date span{ font-size:12px; color:var(--ink-soft); }
.m-day-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.m-day-job{ text-align:left; background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font:inherit; color:var(--ink); display:flex; flex-direction:column; gap:1px; min-height:44px; }
.m-day-job b{ font-size:14px; color:var(--navy); }
.m-day-job span{ font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-free{ font-size:13px; color:var(--ink-faint); padding:10px 0; }
.m-abs{ display:inline-block; background:var(--amber-bg); color:var(--amber-ink); font-size:13px; font-weight:700; border-radius:8px; padding:8px 10px; }
.m-log{ align-self:flex-start; background:transparent; border:none; color:var(--navy-2); font:inherit; font-size:13px; font-weight:700; padding:6px 0; text-decoration:underline; }
/* Linkki- ja tiedostopainikkeet samannäköisiksi kuin tavalliset painikkeet */
a.btn, label.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
@media (max-width: 700px){
  /* ilmoitukset ja ponnahdusviestit alavalikon yläpuolelle */
  #pc-flash{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); max-width:calc(100vw - 32px); }
  #nf-toast{ left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); max-width:none; }
  .ct-search{ flex:1 1 100%; }
  .panel .mini-form-row{ flex-wrap:wrap; }
  .panel .mini-form-row > div{ flex:1 1 100% !important; }

  /* Paneelin lomakkeet puhelimella: väljempi, ei vaakavieritystä */
  .panel-head{ padding:16px 16px 12px; }
  .panel-body{ padding:16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .panel-date{ font-size:19px; }

  /* Valintapainikkeet (esim. "Koko päivä / Puolipäivä", "Ei / Kyllä — maksuerät")
     koko leveydelle, jotta pitkät tekstit eivät valu reunan yli */
  .panel .seg{ display:flex; width:100%; box-sizing:border-box; }
  .panel .seg-btn{ flex:1 1 0; min-width:0; text-align:center; padding:10px 8px; line-height:1.25; }

  /* Maksuerätaulukko korttimuotoon: jokainen erä oma, selkeä lohkonsa.
     Kentät saavat koko leveyden -> selite ei leikkaudu kuten taulukossa. */
  .panel .pms-table thead{ display:none; }
  .panel .pms-table, .panel .pms-table tbody{ display:block; width:100%; }
  .panel .pms-table tr{ display:block; position:relative; border:1px solid var(--line); border-radius:12px; padding:12px 14px 6px; margin-bottom:10px; background:var(--panel); }
  .panel .pms-table td{ display:block; width:100%; border:none; padding:5px 0; }
  .panel .pms-table td::before{ content:attr(data-label); display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--ink-faint); margin-bottom:4px; }
  .panel .pms-table td.pms-idx{ padding:0 44px 6px 0; }
  .panel .pms-table td.pms-idx::before{ content:"Maksuerä "; display:inline; font-size:13px; font-weight:800; color:var(--navy); text-transform:none; letter-spacing:0; margin:0; }
  .panel .pms-table td.pms-idx b{ font-size:14px; color:var(--navy); }
  .panel .pms-table td.pms-del{ position:absolute; top:10px; right:12px; width:auto; padding:0; }
  .panel .pms-table td.pms-del::before{ display:none; }
  .panel .pms-table .field-input{ width:100%; box-sizing:border-box; }
  .panel .pms-table .x-btn{ font-size:22px; padding:2px 6px; }
}

/* ---------- Työsuunnitelma: alustava / vahvistettu ---------- */
.pl-chip.pl-vaihe.pl-prelim{ background:#EEF4FF; color:#2A4F8C; box-shadow:inset 3px 0 0 #8FB0E8; outline:1.5px dashed #9DB8E6; outline-offset:-1.5px; }
.pl-chip.pl-vaihe.pl-confirmed{ background:#DDF3E4; color:#1E6B3E; box-shadow:inset 3px 0 0 #2E9E5B; }
.pl-inst.ok{ color:#1E6B3E; }
.pl-status{ font-size:13px; padding:8px 10px; border-radius:8px; background:var(--panel-2); border:1px dashed var(--line-strong); color:var(--ink-soft); }
.pl-status.ok{ background:#E3F6EA; border:1px solid #B5E2C5; color:#1E6B3E; }
.pl-emps{ display:grid; grid-template-columns:1fr; gap:4px; max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:4px; background:#fff; }
.pl-emp{ display:flex; align-items:center; gap:8px; background:transparent; border:none; border-radius:6px; padding:7px 8px; font:inherit; font-size:13px; text-align:left; cursor:pointer; min-height:38px; }
.pl-emp:hover{ background:var(--panel-2); }
.pl-emp.on{ background:#E3F6EA; }
.pl-emp-box{ width:20px; height:20px; border:1.5px solid var(--line-strong); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; }
.pl-emp.on .pl-emp-box{ background:#2E9E5B; border-color:#2E9E5B; }
.pl-emp-name{ flex:1; font-weight:600; color:var(--ink); }
.pl-emp-busy{ font-size:11.5px; color:var(--amber-ink); }
.pl-emp-busy.free{ color:var(--green-ink); }
.pl-next{ margin-top:10px; }
.pl-soon{ margin-bottom:14px; }
.pl-soon .num{ text-align:right; }
.pl-soon-alert td{ background:#FFF6F5; }

/* ---------- Kysymykset ja tarvikeilmoitukset ---------- */
.qcard.supply{ border-left:4px solid #3A6FD8; }
.ans-form{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.ans-opts{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.ans-chk{ display:flex; gap:6px; align-items:center; }
.ans-date{ display:flex; gap:6px; align-items:center; }
.ans-date .field-input{ width:auto; padding:4px 6px; }
.ans-form .btn{ align-self:flex-start; }
.q-kind .seg-btn{ flex:1; }

/* ---------- Asentajan työlista ---------- */
.wl-group{ margin-bottom:16px; }
.wl-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 6px; font-size:14px; color:var(--navy); }
.task .task-desc{ white-space:pre-line; }

/* ---------- Pikavaraus-asetus (työnjohto) ---------- */
.qb-setting{ display:flex; gap:10px; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:14px; background:#fff; }
.qb-setting.off{ border-color:#F0DC9A; background:#FFF8E1; }
.qb-setting-txt{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; min-width:0; }
.choice.choice-off{ opacity:0.85; background:var(--panel-2); border-style:dashed; cursor:default; }
.choice.choice-off .choice-text b{ color:var(--amber-ink); }

/* ---------- Asennusosaston oma työ (ei projektia) ---------- */
.wb-block.wb-internal{ background:repeating-linear-gradient(135deg,#EEF1F6 0 6px,#E4E8F0 6px 12px); color:#2B3A55; border:1px solid #C9D0DC; }
.mb-block.mb-internal{ background:#E4E8F0; color:#2B3A55; }
.m-job.internal{ border-left-color:#7A869A; }
.m-job.internal .m-job-time{ color:#4A5568; }
.m-day-job.internal{ background:#F3F5F9; cursor:default; }
.emp-chip.internal{ background:#E9EDF3; color:#2B3A55; }
.emp-detail.internal{ border-left:4px solid #7A869A; }
.m-day-tasks{ font-style:normal; font-size:12px; font-weight:700; color:var(--navy-2); margin-top:2px; }
.m-day-job.internal span{ white-space:normal; overflow:visible; }

/* ===================== KULJETUKSET ===================== */
.btn-blue{ background:#2D5BD0; color:#fff; }
.btn-blue:hover{ background:#2449a8; }
.btn-green{ background:#2E8B57; color:#fff; }
.btn-green:hover{ background:#246f45; }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); }
.btn-navy:disabled{ background:#B9BEC8; cursor:not-allowed; }
.btn-red{ background:#fff; border:1px solid #E1B5AE; color:var(--red-ink); }
.btn-red:hover{ background:var(--red-bg); }
.btn-wide{ width:100%; justify-content:center; }
.btn-xs{ padding:4px 9px; font-size:11.5px; }
.pill-done{ background:#E7E4DA; color:#5B5F66; }
.sec-h{ font-family:var(--disp); font-weight:600; font-size:15px; color:var(--navy); margin:4px 0 10px; }
.sub{ color:var(--ink-soft); font-size:13px; margin:0 0 14px; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); margin:10px 0 4px; cursor:pointer; }
.check-row input{ width:17px; height:17px; }

/* huomiolaput (kalusto, kuljetus) */
.flag{ display:flex; gap:9px; align-items:flex-start; border-radius:7px; padding:9px 11px; font-size:13px; line-height:1.45; margin:8px 0; }
.flag>span:first-child{ font-size:16px; line-height:1.1; }
.flag-amber{ background:#FBF2D9; color:#6b5307; border:1px solid #E8D28C; }
.flag-blue{ background:#EAF0FD; color:#1b3c86; border:1px solid #BCD1F6; }
.flag-red{ background:var(--red-bg); color:var(--red-ink); border:1px solid #F1B8B2; }

/* työkaverit asentajan kortissa */
.m-mates{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.m-mates-lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); width:100%; }
.m-mate{ display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:3px 10px 3px 3px; font-size:12.5px; }
.m-mate-av{ width:23px; height:23px; border-radius:50%; background:var(--navy); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.m-mate-tel{ text-decoration:none; font-size:14px; margin-left:1px; }

/* työnjohdon kuljetuskoonti: kaksi palstaa työpöydällä */
.tr-two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.tr-daybar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.tr-daylabel{ font-family:var(--disp); font-weight:600; color:var(--navy); margin-left:4px; }
.tr-warn{ color:#8a6a06; font-weight:600; }
.tr-need-driver{ background:#FFF7E6; border:1px solid #F0DFB0; border-radius:8px; padding:8px 10px; }
.tr-need-driver .form-label{ color:#8a6a06; }

/* kuljetustarpeen rivi */
.trow{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:11px 12px; margin-bottom:10px; position:relative; }
.trow.ok{ border-left:3px solid var(--green); }
.trow.todo{ border-left:3px solid #C99A2E; }
.trow.cancel{ border-left:3px solid var(--red); background:#FCF4F3; }
.trow .tp{ font-weight:600; font-size:14px; color:var(--navy); }
.trow .ta{ font-size:12px; color:var(--ink-soft); margin:1px 0 7px; }
.st-pill{ float:right; font-size:10px; font-weight:800; padding:2px 9px; border-radius:20px; }
.st-pill.ok{ background:var(--green-bg,#E7F3EC); color:var(--green-ink); }
.st-pill.todo{ background:#FBF2D9; color:#8a6a06; }
.st-pill.cancel{ background:var(--red-bg); color:var(--red-ink); }
.who-line{ font-size:12px; color:var(--ink-soft); display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.who-av{ width:19px; height:19px; border-radius:50%; background:var(--navy); color:#fff; font-size:9px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.tr-cancel-note{ font-size:12px; color:var(--red-ink); margin-top:6px; }
.tr-danger{ color:var(--red-ink) !important; border-color:#E6B5AF !important; }

/* ---- kuljettajan päivävalitsin ---- */
.tr-daychips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tr-daychip{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:7px 14px; font-size:13px; font-weight:700; color:var(--ink-soft); cursor:pointer; }
.tr-daychip.on{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---- pooli: vielä lisäämättömät osat ---- */
.tr-pool{ background:#FBF7EC; border:1px solid #E8DCBB; border-radius:9px; padding:11px 12px; margin:8px 0 12px; }
.tr-pool-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#8a6a06; margin-bottom:8px; }
.tr-poolrow{ display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px dashed #E8DCBB; }
.tr-poolrow:last-child{ border-bottom:none; }
.tr-poolnm{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--ink); }
.tr-note{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-faint); margin-top:1px; }
.tr-sec{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); margin:8px 0 2px; }

/* ---- segmenttimerkki (nouto/toimitus/oma) ---- */
.tr-tag{ font-size:10px; font-weight:800; padding:2px 7px; border-radius:5px; margin-right:5px; background:#ECEAE3; color:#5B5F66; white-space:nowrap; }
.tr-tag-n{ background:#E2ECFB; color:#214A86; }
.tr-tag-t{ background:#E1EFE6; color:#1D4A34; }
.tr-nro{ font-family:ui-monospace,monospace; font-size:10px; font-weight:800; background:var(--navy); color:#fff; border-radius:5px; padding:1px 6px; }

/* ---- reittikortti ja pysähdykset ---- */
.tr-route{ border:1px solid var(--line); }
.tr-route-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.tr-live{ background:#EAF0FD; border:1px solid #BCD1F6; color:#1b3c86; border-radius:7px; padding:7px 10px; font-size:13px; margin-bottom:10px; }
.tr-steps{ margin:6px 0; }
.tr-step{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.tr-step:last-child{ border-bottom:none; }
.tr-step-left{ flex:none; }
.tr-n{ flex:none; width:26px; height:26px; border-radius:50%; background:#EFEDE4; color:var(--ink-soft); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tr-n.n0{ background:#E2ECFB; color:#214A86; }
.tr-n.t0{ background:#E1EFE6; color:#1D4A34; }
.tr-n.now{ background:#2D5BD0; color:#fff; }
.tr-n.done{ background:var(--green); color:#fff; }
.tr-n.fail{ background:var(--red-bg); color:var(--red-ink); }
.tr-step-main{ flex:1; min-width:0; }
.tr-t{ font-size:13.5px; font-weight:700; color:var(--ink); }
.tr-s{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.tr-dest{ color:var(--navy); }
.tr-forproj{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.tr-forproj b{ color:var(--ink); }
.tr-now{ font-size:9px; font-weight:800; background:#2D5BD0; color:#fff; padding:1px 7px; border-radius:20px; margin-left:5px; }
.tr-mates{ font-size:12px; margin-top:3px; }
.tr-tel{ color:#2449a8; text-decoration:none; font-weight:600; margin-right:4px; }
.tr-must{ font-size:11.5px; color:#8a6a06; font-weight:600; margin-top:2px; }
.tr-step.failed .tr-t{ text-decoration:line-through; }

/* dokumenttisarake oikeassa reunassa — erillään napeista (ei vahinkopainalluksia) */
.tr-docside{ flex:none; width:56px; display:flex; flex-direction:column; align-items:center; gap:7px; padding-left:8px; border-left:1px solid var(--line); align-self:stretch; justify-content:center; }
.tr-docside:empty{ border-left:none; width:0; padding:0; }
.tr-docbtn{ display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; border:1px solid var(--line-strong); border-radius:8px; padding:6px 3px; width:48px; text-decoration:none; color:var(--navy); cursor:pointer; }
.tr-docbtn .ic{ font-size:16px; }
.tr-docbtn .lb{ font-size:8.5px; font-weight:800; line-height:1.1; text-align:center; color:var(--ink-soft); }

/* navigointi + kuittaus */
.tr-navline{ display:flex; gap:7px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.tr-cfm{ margin-top:9px; }
.tr-okln{ font-size:12.5px; color:var(--green-ink); font-weight:700; margin-top:4px; }
.tr-failbox{ background:var(--red-bg); border-radius:7px; padding:6px 9px; font-size:11.5px; color:var(--red-ink); margin-top:6px; }
.tr-confirm{ background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 10px; margin-top:8px; }
.tr-confirm .label{ margin:0 0 7px; font-weight:700; }

/* järjestely + poisto */
.tr-reord{ display:flex; flex-direction:column; gap:2px; flex:none; align-self:center; }
.tr-reord button{ width:26px; height:20px; border:1px solid var(--line); background:#fff; border-radius:5px; font-size:10px; color:var(--ink-soft); cursor:pointer; }
.tr-reord button:disabled{ opacity:.35; }
.tr-rmlink{ background:none; border:none; padding:4px 0 0; font-size:11.5px; color:var(--ink-faint); text-decoration:underline; cursor:pointer; }

.tr-actions{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.tr-driverpick{ width:100%; }
.tr-form{ background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:11px; margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.tr-form .label{ margin:0; }

/* omat vakiopysähdykset */
.tr-tpls{ display:flex; gap:7px; flex-wrap:wrap; margin:6px 0 8px; }
.tr-tpl{ display:inline-flex; align-items:center; background:var(--panel-2); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.tr-tpl-name{ background:transparent; border:none; padding:4px 4px 4px 11px; font:inherit; font-size:12.5px; color:var(--navy); font-weight:600; cursor:pointer; }
.tr-tpl-x{ background:transparent; border:none; padding:4px 9px 4px 4px; color:var(--ink-faint); cursor:pointer; }

/* ---- työnjohto: välilehdet + kortit ---- */
.tr-tabs{ display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.tr-tab{ background:none; border:none; border-bottom:2px solid transparent; padding:9px 4px; margin-bottom:-1px; font-size:14px; font-weight:700; color:var(--ink-faint); cursor:pointer; margin-right:14px; }
.tr-tab.on{ color:var(--navy); border-bottom-color:var(--navy); }
.tr-tab .b{ font-size:11px; font-weight:800; background:var(--navy); color:#fff; border-radius:20px; padding:1px 8px; margin-left:4px; }
.tr-tab .b-red{ background:#C8453B; }
.tr-ptop{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:var(--navy); margin-bottom:6px; flex-wrap:wrap; }

/* nouto/toimitus-osat hyväksytyssä kortissa */
.tr-part{ border-radius:8px; padding:8px 10px; margin:6px 0; border:1px solid var(--line); }
.tr-part.n{ background:#F3F7FD; border-color:#D4E2F7; }
.tr-part.t{ background:#F1F8F3; border-color:#CFE6D7; }
.tr-part .ph{ display:flex; align-items:center; gap:6px; font-size:13px; }
.tr-part .where{ font-weight:700; color:var(--ink); }
.tr-part .pmeta{ display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-top:4px; }
.tr-part .pmeta .doc{ color:var(--navy); font-weight:600; }
.tr-ps{ font-weight:700; }
.tr-ps.noudettu, .tr-ps.toimitettu{ color:var(--green-ink); }
.tr-ps.epaonnistui{ color:var(--red-ink); }
.tr-failcard{ border-left:3px solid #C8453B; }

/* dokumenttirivi hyväksytyllä kortilla */
.tr-cardocs{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:6px 0 4px; }
.tr-cardoc{ display:inline-flex; align-items:center; gap:5px; background:#F3F0E6; border:1px solid var(--line); border-radius:7px; padding:4px 10px; font-size:12.5px; color:var(--navy); font-weight:600; text-decoration:none; }
.tr-nodoc{ color:var(--ink-faint); }

/* "Suunnittele reitti" -valinta (oletuksena reittiä ei koota) */
.tr-planbar{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.tr-planbar .muted{ margin:8px 0 0; max-width:620px; }
.tr-route-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* kuljettajan työvuorolista */
.tr-vl{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.tr-vlrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 14px; text-align:left; cursor:pointer; width:100%; }
.tr-vlrow.on{ border-color:var(--navy); box-shadow:0 0 0 2px rgba(19,32,56,.08); }
.tr-vl-day{ display:flex; flex-direction:column; gap:2px; }
.tr-vl-day b{ font-size:14px; color:var(--navy); }
.tr-vl-time{ font-size:12px; color:var(--ink-soft); }
.tr-vl-ajot{ font-size:12px; font-weight:800; background:var(--blue-bg); color:var(--blue-ink); border-radius:20px; padding:3px 11px; }
.tr-vl-none{ font-size:12px; font-weight:700; color:var(--ink-faint); }
/* Kuljettajan näkymä: keskitetty, luettava sarake myös isolla näytöllä (ei venytetä koko leveydelle) */
.tr-driver{ max-width:620px; margin:0 auto; }
.tr-startnote{ background:var(--panel-2); border:1px dashed var(--line-strong); border-radius:9px; padding:10px 12px; font-size:13px; font-weight:700; color:var(--ink-soft); text-align:center; }
/* Työnjohdon kuljetukset ryhmiteltynä päivittäin */
.tr-daygroup{ margin-bottom:14px; }
.tr-dayhdr{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); background:var(--panel-2); border-radius:8px; padding:6px 11px; margin:0 0 8px; }
.tr-dh-today{ font-size:11px; font-weight:800; text-transform:none; letter-spacing:0; background:var(--blue-bg); color:var(--blue-ink); border-radius:20px; padding:2px 9px; }
/* Varaston osoite -palkki työnjohdon kuljetussivulla */
.tr-whbar{ background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 13px; margin:0 0 14px; font-size:13px; }
.tr-whbar-warn{ background:#fdf3dc; border-color:#e9d8a6; }
.tr-whedit{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.tr-whedit .field-input{ flex:1; min-width:220px; }
.pw-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* kuljettajan työvuoro työvuorokalenterin solussa */
.wb-shift{ position:relative; background:#EAF0FD; border:1px solid #BCD1F6; border-radius:8px; padding:7px 9px; min-height:46px; display:flex; flex-direction:column; justify-content:center; }
.wb-shift b{ font-size:12px; color:#1b3c86; }
.wb-shift span{ font-size:12px; color:var(--ink-soft); }
.wb-shift-x{ position:absolute; top:3px; right:4px; width:20px; height:20px; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:12px; }
.wb-shift-x:hover{ color:var(--red-ink); }

/* 3-vaiheohje työnjohdolle */
.tr-steps3{ display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 16px; }
.tr-step3{ flex:1; min-width:230px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 14px; }
.tr-step3 b{ display:block; color:var(--navy); margin-bottom:3px; }
.tr-step3 span{ font-size:12.5px; color:var(--ink-soft); }
.tr-step3.s1{ border-left:4px solid var(--navy); }
.tr-step3.s2{ border-left:4px solid var(--green); }
.tr-step3.s3{ border-left:4px solid #2D5BD0; }

/* valmiina kuljettajalle: kuljettajavalinta per kortti + nippulähetys */
.tr-drvpick{ margin-top:8px; }
.tr-drvpick .field-select{ width:100%; }
.tr-sentline{ font-size:13px; font-weight:700; color:var(--green-ink); margin-top:8px; }
.tr-sentcard{ border-left:3px solid var(--green); }
.tr-sendbar{ background:var(--panel-2); border:1px dashed var(--line-strong); border-radius:10px; padding:14px; margin-top:12px; }

/* karttaseuranta (live) */
.tr-livedot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#2fae63; box-shadow:0 0 0 4px #2fae6333; margin-right:4px; vertical-align:middle; }
.tr-trackwrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.tr-leaflet{ height:460px; background:#eef1ec; z-index:0; }
.tr-trackwrap .tr-leaflet{ border-right:1px solid var(--line); }
.tr-trackside{ padding:12px 14px; max-height:460px; overflow:auto; }
.tr-mapempty{ padding:34px 16px; text-align:center; color:var(--ink-faint); font-size:13px; }
@media (max-width:900px){ .tr-trackwrap{ grid-template-columns:1fr; } .tr-trackwrap .tr-leaflet{ border-right:none; border-bottom:1px solid var(--line); height:320px; } }
.tr-drv{ margin-bottom:16px; }
.tr-drvh{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--navy); font-size:14px; margin-bottom:6px; }
.tr-cdot{ width:11px; height:11px; border-radius:50%; flex:none; }
.tr-atm{ font-size:11px; font-weight:800; background:#FFF4E0; color:#7A4508; border-radius:20px; padding:2px 9px; margin-left:auto; }
.tr-drv .sg{ display:flex; gap:9px; align-items:flex-start; padding:6px 0; border-bottom:1px dashed var(--line); }
.tr-drv .sg:last-child{ border-bottom:none; }
.tr-drv .sn{ flex:none; width:22px; height:22px; border-radius:50%; font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center; background:#ECEAE3; color:var(--ink-soft); }
.tr-drv .sn.done{ background:#9AA3AF; color:#fff; }
.tr-drv .sn.now{ background:#2D5BD0; color:#fff; }
.tr-drv .sn.fail{ background:var(--red-bg); color:var(--red-ink); }
.tr-drv .stt{ font-weight:700; font-size:12.5px; }
.tr-drv .ss{ font-size:10.5px; font-weight:700; margin-top:1px; }
.tr-drv .ss.g{ color:var(--green-ink); } .tr-drv .ss.b{ color:#1b3c86; } .tr-drv .ss.m{ color:var(--ink-faint); } .tr-drv .ss.fail{ color:var(--red-ink); }
/* Leaflet-ikonit */
.tr-pin2{ width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.tr-pin2 span{ transform:rotate(45deg); color:#fff; font-size:12px; font-weight:800; }
.tr-truck2{ width:34px; height:34px; border-radius:50%; background:#fff; border:3px solid #2D5BD0; display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 0 0 6px rgba(45,91,208,.15); }

/* kuljetushistoria-sivu */
.trh-card{ background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:14px; overflow:hidden; }
.trh-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel-2); }
.trh-name{ font-weight:700; color:var(--navy); font-size:15px; }
.trh-cnt{ font-size:12px; color:var(--ink-soft); margin-left:auto; }
.trh-route{ font-weight:600; color:var(--navy); }
.tr-kuit{ font-weight:700; }
.tr-kuit.ok{ color:var(--green-ink); }
.tr-kuit.fail{ color:var(--red-ink); }
.sub2{ font-size:11.5px; color:var(--ink-faint); }

.tr-locshare{ background:#E1EFE6; border:1px solid #BEE3CB; color:#1D4A34; border-radius:8px; padding:7px 11px; font-size:12.5px; font-weight:600; margin-bottom:10px; }
.tr-trackbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.tr-track{ margin:4px 0 2px; }
.tr-mapwrap{ margin-top:8px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.tr-map{ display:block; width:100%; height:360px; border:0; }
@media (max-width:700px){ .tr-map{ height:260px; } }

/* kuljettajien saatavuus valittavana päivänä */
.tr-driveravail{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px; }
.tr-dav{ font-size:11.5px; font-weight:700; border-radius:20px; padding:2px 9px; background:#ECEAE3; color:#5B5F66; }
.tr-dav-vapaa{ background:#E1EFE6; color:#1D4A34; }
.tr-dav-ajossa{ background:#E2ECFB; color:#214A86; }
.tr-dav-suunnitteilla{ background:#FBECD6; color:#7A4508; }
.tr-dav-poissa{ background:#F6E3DF; color:#7C281D; text-decoration:line-through; }

/* hyväksy-dialogin osalaatikot */
.tr-apbox{ border-radius:8px; padding:10px 11px; margin:4px 0 8px; border:1px solid var(--line); }
.tr-apbox.n{ background:#F3F7FD; border-color:#D4E2F7; }
.tr-apbox.t{ background:#F1F8F3; border-color:#CFE6D7; }
.tr-ap-chk{ font-size:14px; }

/* kaksi palstaa + historia + listat */
.tr-col .sec-h{ margin-top:0; }
.tr-hist-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; background:transparent; border:none; font:inherit; cursor:pointer; text-align:left; padding:2px 0; }
.tr-hist-body{ margin-top:8px; border-top:1px dashed var(--line); padding-top:6px; }
.tr-listblock{ margin-top:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:11px; }
.tr-list{ margin:6px 0 10px; padding-left:20px; font-size:13px; }
.tr-list li{ margin:2px 0; }

/* Työpöytänäkymä: työnjohdon kuljetussivu isommalla, kun ruutua on enemmän */
/* Työpöytänäkymä: työnjohdon kuljetussivu isommalla, kun ruutua on enemmän */
@media (min-width:1100px){
  .tr-manager{ gap:32px; }
  .tr-manager .sec-h{ font-size:21px; margin-bottom:14px; }
  .tr-manager .card{ padding:18px 20px; border-radius:10px; }
  .tr-manager .btn-sm{ font-size:13.5px; padding:7px 13px; }
  .tr-manager .form-label{ font-size:14.5px; }
  .tr-manager .field-select, .tr-manager .field-input, .tr-manager .form-hint{ font-size:14.5px; }
  .tr-manager .tr-ptop{ font-size:16px; }
  .tr-manager .tr-t{ font-size:16px; }
  .tr-manager .tr-s{ font-size:13.5px; }
  .tr-manager .tr-n{ width:30px; height:30px; font-size:14px; }
  .tr-manager .tr-step{ padding:13px 0; }
  .tr-manager .tr-must{ font-size:13px; }
  .tr-manager .tr-part .ph{ font-size:14.5px; }
  .tr-manager .tr-part .pmeta{ font-size:13.5px; }
  .tr-manager .tr-poolnm{ font-size:14.5px; }
  .tr-manager .tr-docbtn{ width:54px; }
  .tr-tabs .tr-tab{ font-size:15.5px; }
  .tr-daylabel{ font-size:19px; }
  .tr-daybar .btn-sm{ font-size:13.5px; padding:7px 13px; }
}

@media (max-width: 900px){
  .tr-two{ grid-template-columns:1fr; gap:16px; }
}

/* yhteyden tila -merkkivalo */
.conn-wrap{ display:inline-flex; align-items:center; gap:6px; margin-left:2px; }
.conn-dot{ width:11px; height:11px; border-radius:50%; background:#36B37E; box-shadow:0 0 0 2px rgba(54,179,126,.25); flex:none; }
.conn-dot.bad{ background:#E4534A; box-shadow:0 0 0 2px rgba(228,83,74,.3); animation:connblink 1s steps(2,start) infinite; }
@keyframes connblink{ 50%{ opacity:.25; } }
.conn-label{ font-size:11.5px; font-weight:700; color:#FFB4A9; white-space:nowrap; }

/* kuljetuksen dokumentit, epäonnistuminen, toimitettu-merkki, noutokoonti */
.tr-docs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:3px; }
.tr-fail{ margin-top:4px; font-size:12px; color:var(--red-ink); font-weight:600; }
.tr-step.failed{ opacity:.8; }
.tr-step.failed .tr-t{ text-decoration:line-through; }
.tr-delivered{ display:inline-flex; align-items:center; gap:5px; margin:8px 0; padding:4px 10px; border-radius:20px; background:var(--green-bg,#E7F3EC); color:var(--green-ink); font-size:12px; font-weight:700; cursor:pointer; }
.tr-pickups{ background:#FBF7EC; border:1px solid #E8DCBB; border-radius:8px; padding:10px 12px; margin:8px 0 10px; }
.tr-pickup-row{ font-size:13px; padding:4px 0; border-bottom:1px dashed var(--line); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tr-pickup-row:last-child{ border-bottom:none; }

/* ilmoitusasetukset + työkaluasetukset */
.ns-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); }
.ns-row:last-child{ border-bottom:none; }
.ns-label{ flex:1; font-size:13.5px; }
.ns-chk{ flex:none; width:118px; font-size:12.5px; display:flex; align-items:center; gap:6px; color:var(--ink-soft); }
.ns-chk-h{ flex:none; width:118px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); }
.ns-head{ border-bottom:1px solid var(--line); }
.ns-tool{ gap:9px; cursor:pointer; }
.ns-tool input{ flex:none; }

/* käyttäjien tila (presence) */
.up-row{ display:flex; align-items:center; gap:11px; padding:8px 0; border-bottom:1px dashed var(--line); }
.up-row:last-child{ border-bottom:none; }
.up-dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.up-dot.on{ background:#36B37E; box-shadow:0 0 0 2px rgba(54,179,126,.22); }
.up-dot.off{ background:#E4534A; box-shadow:0 0 0 2px rgba(228,83,74,.2); }
.up-name{ flex:1; font-size:13.5px; }
.up-status{ font-size:12px; }
.up-status.on{ color:var(--green-ink); font-weight:600; }
.up-status.off{ color:var(--ink-faint); }