:root{
  /* Dark only — the workshop never runs this in a light room. */
  --bg:#0b0e13;
  --surface:#181f28;
  --surface-2:#1e2630;
  --hover:#26303b;
  --border:#2f3945;
  --topbar:#121821;
  --search-bg:#232d3a;
  --search-border:#41506380;
  --text:#e6edf5;
  --muted:#93a1b3;
  --primary:#4b93ff;
  --primary-ink:#fff;
  --danger:#ff6b5e;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 16px -4px rgba(0,0,0,.5),0 16px 32px -16px rgba(0,0,0,.65);
  --radius:12px;
  --radius-sm:8px;
  --st-new:#3b82f6;
  --st-progress:#f59e0b;
  --st-waiting:#a855f7;
  --st-ready:#10b981;
  --st-delivered:#64748b;
  --st-cancelled:#ef4444;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.35rem;margin:0}
h2{font-size:.98rem;margin:0 0 .6rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.nowrap{white-space:nowrap}
.prewrap{white-space:pre-wrap}
.inline{display:inline}

/* Topbar */
.topbar{
  display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;
  background:var(--topbar);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:600}
.brand:hover{text-decoration:none}
/* The brand logo is white-on-transparent, so it sits on a dark chip
   to stay legible in both the light and dark themes. */
.brand-mark{
  display:grid;place-items:center;padding:.3rem .55rem;border-radius:8px;
  background:#191f27;border:1px solid rgba(255,255,255,.08);
}
.brand-logo{display:block;height:20px;width:auto}
.brand-mark-lg{padding:.6rem 1rem;border-radius:12px}
.brand-mark-lg .brand-logo{height:38px}
.topnav{display:flex;align-items:center;gap:1rem;margin-left:1rem}
.viewtools{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.userbox{display:flex;align-items:center;gap:.75rem}
@media(max-width:820px){.viewtools{display:none}}
.user-name{font-weight:500}

.container{max-width:1560px;margin:0 auto;padding:1rem 1rem 3rem}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.card-head h2{margin:0}

.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.page-head h1{margin-bottom:.15rem}
.head-actions,.form-actions,.status-buttons{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
/* A form is a flex item here, so it stretches to the tallest row unless told
   otherwise, which left the button inside it sitting higher than its bare
   neighbours. */
.head-actions .inline,.form-actions .inline,.status-buttons .inline{
  display:inline-flex;align-items:center;margin:0;
}
/* Controls in a row of buttons must be one height. Matching padding is not
   enough: a select is a replaced element and lays out its own box, so it comes
   out taller than a button given identical padding. Fix the height, drop the
   vertical padding, and let each centre its own text. */
.head-actions{--ctl-h:38px}
.head-actions .btn,
.head-actions select,
.head-actions input{
  height:var(--ctl-h);
  box-sizing:border-box;
  padding-top:0;padding-bottom:0;
  font-size:.9rem;line-height:1;
}
.head-actions .btn{padding-left:.9rem;padding-right:.9rem}
.head-actions select,.head-actions input{width:auto;padding-left:.7rem;padding-right:.7rem}
/* A destructive action in a row of buttons still reads as a button. */
.head-actions .btn-danger{border-color:var(--border)}
.stack{display:flex;flex-direction:column;gap:1rem}

/* Buttons */
.btn{
  --b:var(--border);
  display:inline-flex;align-items:center;gap:.4rem;justify-content:center;
  padding:.5rem .9rem;border:1px solid var(--b);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-weight:500;font-size:.9rem;cursor:pointer;
  transition:.12s ease;white-space:nowrap;
}
.btn:hover{border-color:var(--primary);text-decoration:none;transform:translateY(-1px)}
.btn-sm{padding:.35rem .65rem;font-size:.82rem}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-danger{color:var(--danger);border-color:transparent;background:transparent}
.btn-danger:hover{background:rgba(209,36,47,.1);border-color:transparent}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--hover);border-color:var(--border)}
.btn-block{width:100%}

/* Login */
.login-wrap{min-height:80vh;display:grid;place-items:center}
.login-card{width:min(380px,92vw);text-align:center}
.login-head{margin-bottom:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.login-head h1{font-size:1.2rem}
.stack label,.form-grid label{display:flex;flex-direction:column;gap:.3rem;text-align:left;font-size:.85rem;font-weight:500;color:var(--muted)}
input,select,textarea{
  width:100%;padding:.55rem .65rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:.92rem;font-weight:400;
}

/* The order form is the main data-entry surface, so its fields carry weight. */
.form-grid input,.form-grid select,.form-grid textarea,
.msg-form input,.msg-form select,.msg-form textarea{
  padding:.6rem .7rem;font-size:1rem;font-weight:500;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover,
.msg-form input:hover,.msg-form select:hover,.msg-form textarea:hover{border-color:var(--primary)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,
.msg-form input:focus,.msg-form select:focus,.msg-form textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent);
}
.form-grid label,.msg-form label{
  font-size:.76rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);
}
.form-grid .fs,.msg-form .fs{
  background:var(--surface-2);border-color:var(--border);
  padding:1rem 1.05rem 1.1rem;gap:1rem;
}
.form-grid .fs legend,.msg-form .fs legend{
  font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--primary);padding:0 .45rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent);outline-offset:1px;border-color:var(--primary)}
textarea{resize:vertical}

/* Toolbar / search + chips */
.toolbar{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}
.toolbar #q{max-width:100%}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);cursor:pointer;font-size:.82rem;user-select:none;transition:.12s;
}
.chip:hover{border-color:var(--primary)}
.chip input{display:none}
.chip-on{background:var(--primary);border-color:var(--primary);color:#fff}
.chip-on .chip-n{background:rgba(255,255,255,.25)}
.chip-n{background:var(--hover);border-radius:999px;padding:0 .4rem;font-size:.72rem;color:inherit}
.chip-on .dot{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data th{
  text-align:left;padding:.5rem .7rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);border-bottom:1px solid var(--border);background:var(--hover);position:sticky;top:0;
}
table.data td{padding:.5rem .7rem;border-bottom:1px solid var(--border);vertical-align:top}
table.data tbody tr:last-child td{border-bottom:0}
.row-link{cursor:pointer;transition:background .1s}
.row-link:hover{background:var(--hover)}
.sub{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.plate{
  display:inline-block;font-family:ui-monospace,monospace;font-weight:700;letter-spacing:1px;
  background:#16233b;color:#bcd3f7;border:1px solid #2b3f63;border-radius:4px;padding:.05rem .4rem;font-size:.8rem;
}

/* Badges + priority */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600;color:#fff}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85)}
.st-new{background:var(--st-new)} .st-progress{background:var(--st-progress)}
.st-waiting{background:var(--st-waiting)} .st-ready{background:var(--st-ready)}
.st-delivered{background:var(--st-delivered)} .st-cancelled{background:var(--st-cancelled)}
.prio{font-size:.82rem;font-weight:600}
.prio-low{color:var(--muted)} .prio-normal{color:var(--text)}
.prio-high{color:#c2660c} .prio-urgent{color:var(--danger)}

/* Detail */
.detail-grid{display:grid;grid-template-columns:1fr 340px;gap:1rem;align-items:start}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;margin:0}
.kv dt{color:var(--muted);font-size:.85rem}
.kv dd{margin:0;font-weight:500}
.status-set.is-active{border-color:var(--primary);background:var(--hover)}
.note-form{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.timeline li{border-left:2px solid var(--border);padding:.1rem 0 .1rem .75rem}
.tl-meta{display:flex;justify-content:space-between;gap:.5rem}
.tl-note{margin-top:.15rem;font-size:.9rem}

/* Form layout */
.form-grid{display:flex;flex-direction:column;gap:1.25rem}
.fs{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.fs legend{padding:0 .4rem;font-weight:600;color:var(--text);font-size:.9rem}
.fs .col-2{grid-column:span 2}
.fs .col-full{grid-column:1/-1}
@media(max-width:640px){.fs{grid-template-columns:1fr}.fs .col-2{grid-column:auto}}

/* Flash */
.flash{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;border:1px solid transparent}
.flash-success{background:color-mix(in srgb,var(--st-ready) 15%,var(--surface));border-color:var(--st-ready);color:var(--text)}
.flash-error{background:color-mix(in srgb,var(--danger) 12%,var(--surface));border-color:var(--danger);color:var(--text)}
.flash-x{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);width:auto;padding:0}
.empty{text-align:center;padding:2.5rem 1rem;display:flex;flex-direction:column;gap:.75rem;align-items:center}

/* htmx niceties */
.htmx-request{opacity:.6;transition:opacity .1s}

/* ============ Dashboard: calendar + tilaukset side by side ============ */
/* One 12-column grid; each section spans --w columns and can be reordered. */
.dash-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.85rem;align-items:start;
}
.dash-grid > .panel{grid-column:span var(--w,12);min-width:0}
@media(max-width:1100px){.dash-grid > .panel{grid-column:span 12}}
.dash-grid > .panel[hidden]{display:none}

/* Quick action buttons */
.quick-stack{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:.4rem;width:max-content;margin-left:auto;
}
@media(max-width:900px){
  .quick-stack{grid-auto-flow:row;grid-auto-columns:auto;width:100%;margin-left:0}
}
.qbtn{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.42rem .55rem;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);
  font-weight:600;font-size:.82rem;line-height:1.2;text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 3px 8px -3px rgba(0,0,0,.55);
  transition:.12s;
}
.qbtn:hover{
  border-color:var(--primary);background:var(--surface);color:var(--primary);
  text-decoration:none;transform:translateY(-1px);
  box-shadow:0 3px 6px rgba(0,0,0,.45),0 8px 18px -6px rgba(0,0,0,.6);
}
.qbtn:active{transform:translateY(0)}
.qbtn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.qbtn-primary:hover{filter:brightness(1.07);background:var(--primary)}
.qbtn-t{display:block;line-height:1.2;min-width:0}
.qbtn-t small{font-weight:400;font-size:.7rem;color:var(--muted)}
.qbtn-primary .qbtn-t small{color:rgba(255,255,255,.8)}
.dash-sub{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:1040px){.dash-sub{grid-template-columns:1fr}}
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.8rem .9rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
/* Each section reads as its own card: an accent cap, an accent-tinted border
   and a tinted heading strip, so the page is parts rather than one slab. */
.panel[data-accent]{
  padding:0;
  border-color:color-mix(in srgb,var(--accent) 32%,var(--border));
  box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
.panel[data-accent]::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent);
}
.panel[data-accent] > *{padding-left:.95rem;padding-right:.95rem}
.panel[data-accent] > .panel-head,
.panel[data-accent] > .act-bar{
  margin:0;padding-top:.7rem;padding-bottom:.7rem;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
}
.panel[data-accent] > .panel-head + *,
.panel[data-accent] > .act-bar + *{padding-top:.85rem}
.panel[data-accent] > :last-child{padding-bottom:.95rem}
.panel[data-accent] .panel-head h2,
.panel[data-accent] .act-bar h2{color:var(--accent-ink,var(--text))}

.panel[data-accent="calendar"]{--accent:#3b82f6;--accent-ink:#7fb0ff}
.panel[data-accent="queue"]{--accent:#f59e0b;--accent-ink:#f0b752}
.panel[data-accent="actions"]{--accent:#a855f7;--accent-ink:#c894ff}

.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.panel-head h2{margin:0;font-size:1rem}
.hint{background:var(--hover);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:.5rem .7rem;font-size:.85rem;margin-bottom:.7rem;color:var(--muted)}

/* Calendar */
.cal-nav{display:flex;gap:.3rem}
/* Two months side by side across the full page width; stack only when narrow. */
/* --w is the panel's column span; 10 is the default, so the cell height
   tracks the width and the calendar shrinks and grows in proportion. */
.panel[data-sec="calendar"]{--cal-cell:calc(84px * var(--w,12) / 12)}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;align-items:start}
/* below half width two months side by side stop being legible */
.panel[data-sec="calendar"][style*="--w:3"] .cal-months,
.panel[data-sec="calendar"][style*="--w:4"] .cal-months{grid-template-columns:1fr}
.cal-months .cal-month{min-width:0}
@media(max-width:900px){.cal-months{grid-template-columns:1fr}}
.cal-month .cal-title{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.cal-title{font-weight:600;margin-bottom:.5rem;color:var(--muted);font-size:.9rem}
.cal-month-name{text-transform:capitalize}
/* One grid for the weekday header and every week, so the columns line up
   across all rows. The week/header wrappers are display:contents, and the
   columns use minmax(0,1fr) — a plain 1fr refuses to shrink below its
   content, which let wide job chips push a row's columns out of step. */
.cal{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;
}
.cal-dow{display:contents}
.cal-dow span{
  padding:.35rem .4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);text-align:left;font-weight:600;
  background:var(--hover);border-bottom:1px solid var(--border);
}
.cal-week{display:contents}
.cal-day{
  min-width:0;min-height:var(--cal-cell,84px);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:.3rem;cursor:pointer;transition:background .1s;display:flex;flex-direction:column;gap:.15rem;
}
.cal-week:last-child .cal-day{border-bottom:0}
.cal-day:nth-child(7n){border-right:0}
.cal-day:hover{background:var(--hover)}
.cal-day.out{opacity:.4}
.cal-day.weekend{background:color-mix(in srgb,var(--hover) 55%,transparent)}
/* Today has to be findable at a glance across two months, so it breathes. */
@keyframes today-pulse{
  0%,100%{
    box-shadow:inset 0 0 0 2px var(--primary),
               0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent),
               0 0 10px -3px color-mix(in srgb,var(--primary) 40%,transparent);
  }
  50%{
    box-shadow:inset 0 0 0 2px var(--primary),
               0 0 0 6px color-mix(in srgb,var(--primary) 14%,transparent),
               0 0 22px 0 color-mix(in srgb,var(--primary) 62%,transparent);
  }
}
.cal-day.today{
  position:relative;z-index:1;
  background:color-mix(in srgb,var(--primary) 12%,transparent);
  box-shadow:inset 0 0 0 2px var(--primary),
             0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent),
             0 0 14px -2px color-mix(in srgb,var(--primary) 55%,transparent);
  animation:today-pulse 3.2s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.cal-day.today{animation:none}}
.cal-day.today .cal-daynum{color:var(--primary);font-weight:800}
.cal-day.today.weekend{background:color-mix(in srgb,var(--primary) 12%,transparent)}
.cal-day.selected{background:color-mix(in srgb,var(--primary) 12%,var(--surface))}
.cal-daynum{display:flex;align-items:center;justify-content:space-between;gap:.25rem;font-size:.82rem;font-weight:600;min-width:0}
.cal-hours{font-size:.66rem;font-weight:500;color:var(--muted);background:var(--hover);border-radius:4px;padding:0 .25rem}
.cal-jobs{display:flex;flex-direction:column;gap:.12rem;overflow:hidden;min-width:0}
/* Two lines: the time sits above the plate, so the registration — the thing
   you actually scan for — is never the part that gets truncated. */
.cal-job{
  display:flex;flex-direction:column;line-height:1.2;
  font-size:.7rem;padding:.12rem .32rem;border-radius:3px;color:#fff;
  min-width:0;max-width:100%;overflow:hidden;
}
.cal-job .t{font-size:.63rem;font-weight:600;opacity:.85;letter-spacing:.01em}
.cal-job .r{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-more{font-size:.64rem;color:var(--muted);padding-left:.2rem}
.cal-hint{margin:.75rem 0 0}
.day-detail{margin-top:.9rem;border-top:1px solid var(--border);padding-top:.75rem}
.day-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.day-head .btn{margin-left:auto}
.time-chip{
  display:inline-block;min-width:42px;text-align:center;font-family:ui-monospace,monospace;font-size:.75rem;
  font-weight:700;background:var(--hover);border:1px solid var(--border);border-radius:4px;padding:.05rem .3rem;
}

/* Priority listing */
.prio-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;align-items:start}
.grouped{display:flex;flex-direction:column;gap:1rem}
.prio-group{display:flex;flex-direction:column;gap:.35rem}
.prio-head{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.prio-bar{width:3px;height:16px;border-radius:2px;background:var(--muted)}
.prio-urgent .prio-bar{background:var(--danger)}
.prio-high   .prio-bar{background:#e08307}
.prio-normal .prio-bar{background:var(--primary)}
.prio-low    .prio-bar{background:var(--muted)}

/* Compact list rows shared by panels */
.mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.mini-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.4rem .55rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);
  transition:.1s;
}
.mini-row:hover{border-color:var(--primary);background:var(--hover);text-decoration:none;transform:translateX(2px)}
.mini-main{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;min-width:0}
.mini-meta{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.amount{font-weight:700;font-size:.85rem}

/* Parts */
.parts-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.part-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.45rem .6rem;
  border:1px solid var(--border);border-left:3px solid var(--muted);border-radius:var(--radius-sm);background:var(--surface);
}
.part-row.is-needed{border-left-color:var(--danger)}
.part-row.is-ordered{border-left-color:var(--st-progress)}
.part-row.is-received{border-left-color:var(--st-ready)}
.part-main{min-width:0}
.part-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.pill{font-size:.7rem;font-weight:600;padding:.1rem .45rem;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.pill.is-needed{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.pill.is-ordered{color:#a86400;border-color:color-mix(in srgb,var(--st-progress) 50%,transparent)}
.pill.is-received{color:#0a7a54;border-color:color-mix(in srgb,var(--st-ready) 50%,transparent)}

/* Items table on order detail */
.item-form{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.item-form input,.item-form select{width:auto;flex:1 1 120px;min-width:0}
.item-form .w-qty{flex:0 0 62px}
.item-form .w-price{flex:0 0 88px}
table.items{width:100%;border-collapse:collapse;font-size:.88rem}
table.items td{padding:.4rem .5rem;border-bottom:1px solid var(--border);vertical-align:middle}
table.items .items-head th{
  text-align:left;padding:.45rem .5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);background:var(--hover);border-bottom:1px solid var(--border);
}
table.items tfoot td{padding:.5rem;font-weight:600;border-top:2px solid var(--border)}
table.items .num{text-align:right;white-space:nowrap}
.item-actions{display:flex;align-items:center;gap:.3rem;justify-content:flex-end}
/* As a table cell it must stay one: display:flex takes the cell out of the row
   box, so its border-bottom is drawn at the flex height and the rules across the
   row no longer meet. Alignment is done with the table's own tools instead. */
td.item-actions{
  display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap;
}
td.item-actions > *{vertical-align:middle}
td.item-actions form.inline{display:inline-flex;align-items:center;margin:0}
td.item-actions > * + *{margin-left:.3rem}
.quote-form{display:flex;align-items:flex-end;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.quote-form label{flex:1 1 120px}

/* Toolbar layout with grouping toggle */
.toolbar-top{display:flex;gap:.6rem;align-items:flex-end}
.toolbar-top #q{flex:1}
.group-toggle{display:flex;flex-direction:column;gap:.2rem;flex:0 0 150px}

/* New status colours */
.st-quote{background:#7c3aed}
.st-quote-sent{background:#0891b2}

/* Contacts lookup */
.big-search{font-size:1.05rem;padding:.6rem .8rem}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.7rem;margin-top:.85rem}
.contact-card{display:flex;flex-direction:column;gap:.45rem}
.contact-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.contact-body{display:flex;flex-direction:column;gap:.15rem}
.contact-link{font-size:.88rem;font-weight:500}
.contact-regs{display:flex;flex-wrap:wrap;gap:.25rem}
.contact-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.35rem;border-top:1px solid var(--border)}
.contact-history{border-top:1px solid var(--border);padding-top:.5rem;margin-top:.35rem}

/* Right-click menu on a calendar day */
[x-cloak]{display:none!important}
.ctx-menu{
  position:fixed;z-index:60;min-width:200px;padding:.28rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.ctx-head{
  padding:.3rem .5rem .35rem;font-size:.72rem;font-weight:700;color:var(--muted);
  border-bottom:1px solid var(--border);margin-bottom:.22rem;
}
.ctx-item{
  display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .5rem;
  border:0;border-radius:6px;background:transparent;color:var(--text);
  font:inherit;font-size:.84rem;text-align:left;cursor:pointer;
}
.ctx-item:hover{background:var(--primary);color:var(--primary-ink);text-decoration:none}
.ctx-sep{height:1px;background:var(--border);margin:.22rem 0}
.cal-day{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ── Global search ─────────────────────────────────────── */
.gsearch{position:relative;flex:1 1 340px;max-width:560px;margin:0 auto}
/* The bar sits on its own tone with a ring, so it reads as a control rather
   than blending into the top bar behind it. */
.gsearch input{
  width:100%;padding:.6rem 1.05rem;font-size:1rem;font-weight:500;
  color:var(--text);background:var(--search-bg);
  border:2px solid var(--search-border);border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),
             0 1px 2px rgba(0,0,0,.4),
             0 8px 20px -8px rgba(0,0,0,.7);
  transition:border-color .12s,box-shadow .12s,background .12s;
}.gsearch input::placeholder{color:var(--muted);font-weight:600;letter-spacing:.02em}
.gsearch input::placeholder{color:var(--muted);font-weight:500}
.gsearch input:hover{border-color:var(--primary)}
.gsearch input:focus{
  outline:none;background:var(--surface);border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 25%,transparent),
             0 10px 26px -8px rgba(0,0,0,.7);
}
.gs-panel{
  position:absolute;z-index:50;top:calc(100% + .35rem);left:0;right:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  max-height:min(70vh,440px);overflow-y:auto;padding:.25rem;
}
.gs-panel:empty{display:none}
.gs-group{
  padding:.35rem .5rem .2rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.gs-item{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.4rem .5rem;border-radius:6px;color:var(--text);text-decoration:none;
}
.gs-item:hover{background:var(--hover);text-decoration:none}
.gs-main{display:flex;align-items:center;gap:.4rem;min-width:0;flex-wrap:wrap}
.gs-empty{padding:.6rem .5rem}

/* ── Työjono toolbar + rows ────────────────────────────── */
.queue-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.queue-tools input[type=search]{width:min(220px,42vw);padding:.3rem .55rem;font-size:.84rem}
.queue-tools select{width:auto;padding:.3rem .5rem;font-size:.84rem}
#queue-body{display:flex;flex-direction:column;gap:.75rem}
#queue-body .chips{margin-bottom:0}

.qlist{list-style:none;margin:0;padding:0}
.qrow{
  display:flex;align-items:center;gap:.65rem;
  padding:.4rem .45rem;border-bottom:1px solid var(--border);
}
.qrow > .st-select{flex:0 0 auto;order:-1}
.qrow:last-child{border-bottom:0}
.qrow:hover{background:var(--hover)}
.qrow-link{
  display:flex;align-items:center;gap:.45rem;flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;color:var(--text);text-decoration:none;
}
.qrow-link:hover{text-decoration:none}
.qrow-veh{min-width:0;overflow:hidden;text-overflow:ellipsis}
.qrow-meta{display:flex;align-items:center;gap:.55rem;flex-shrink:0}

/* Status is changed in place. The colour is a dot, not a fill — eight
   saturated slabs down the list read as noise. */
.st-select{
  width:auto;min-width:150px;
  padding:.2rem 1.35rem .2rem 1.45rem;
  font-size:.78rem;font-weight:500;line-height:1.5;
  color:var(--text);background-color:var(--surface);
  border:1px solid var(--border);border-radius:999px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:
    radial-gradient(circle at center, var(--dot,var(--muted)) 46%, transparent 50%),
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:8px 50%, calc(100% - 13px) 54%, calc(100% - 9px) 54%;
  background-size:9px 9px, 4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.st-select:hover{border-color:var(--primary)}
.st-select:focus{outline:2px solid var(--primary);outline-offset:1px}
.st-select option{background:var(--surface);color:var(--text)}

/* zero-count filters stay available but recede */
.chip.chip-zero{opacity:.45}
.chip.chip-zero:hover{opacity:1}

/* ── Vaatii toimenpiteitä strip ───────────────────────── */
.act-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.act-bar h2{margin:0;margin-right:.25rem}
.act-chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--text);font:inherit;font-size:.82rem;cursor:pointer;transition:.12s;
}
.act-chip:hover{border-color:var(--primary)}
.act-on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.act-on .chip-n{background:rgba(255,255,255,.25);color:inherit}
.act-body{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}
.act-bar h2{margin-right:.35rem}

/* ── Lähetä viesti ─────────────────────────────────────── */
.msg-form{max-width:760px}
.recipients{position:relative}
.rcp-list{
  list-style:none;margin:.3rem 0 0;padding:.25rem;display:flex;flex-direction:column;gap:.1rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  box-shadow:var(--shadow);
}
.rcp{
  display:flex;align-items:center;gap:.45rem;width:100%;padding:.35rem .5rem;
  border:0;border-radius:6px;background:transparent;color:var(--text);
  font:inherit;text-align:left;cursor:pointer;
}
.rcp:hover{background:var(--hover)}
.msg-actions{align-items:center}
.msg-actions .is-off{opacity:.45;pointer-events:none}

/* ── Mukauta näkymää ───────────────────────────────────── */
.sec-tools{display:none}
body.customizing .sec-tools{
  display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
  padding:.4rem .6rem;border-bottom:1px dashed var(--border);
  background:color-mix(in srgb,var(--primary) 7%,var(--surface));
}
body.customizing .dash-grid > .panel{outline:1px dashed color-mix(in srgb,var(--primary) 45%,transparent)}
body.customizing .dash-grid > .panel[data-off]{display:block;opacity:.42}
body.customizing .dash-grid > .panel[data-off] > :not(.sec-tools){display:none}
body.customizing .dash-grid > .panel.dragging{opacity:.4}
body.customizing .dash-grid > .panel.drop-target{outline:2px solid var(--primary)}
.sec-name{font-weight:600;font-size:.82rem;margin-right:auto;display:flex;align-items:center;gap:.4rem}
.sec-grip{cursor:grab;color:var(--muted);letter-spacing:.1em;user-select:none}
.sec-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  border-radius:6px;min-width:24px;height:24px;padding:0 .35rem;
  font:inherit;font-size:.78rem;line-height:1;cursor:pointer;
}
.sec-btn:hover{border-color:var(--primary)}
.sec-btn[disabled]{opacity:.35;cursor:default}
.sec-w{font-family:ui-monospace,monospace;font-size:.72rem;color:var(--muted);min-width:2.6rem;text-align:center}
.customize-on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}

/* ── Asetukset ─────────────────────────────────────────── */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem;align-items:start}
.settings-grid .panel h3{margin:1rem 0 .5rem;font-size:.9rem}
.user-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.user-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  padding:.5rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);
}
.user-main{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.user-main .mono{color:var(--muted)}
.user-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.user-actions select{width:auto;padding:.25rem .45rem;font-size:.8rem}
.user-actions input[type=password]{width:9rem;padding:.25rem .45rem;font-size:.8rem}
.inline-form{display:flex;align-items:center;gap:.3rem;margin:0}
.new-user{margin-top:.5rem}
.new-user .fs{grid-template-columns:1fr 1fr}
a.user-name{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--muted)}
a.user-name:hover{color:var(--primary);border-bottom-color:var(--primary);text-decoration:none}

/* ── Phones ────────────────────────────────────────────────
   The dashboard is built for a workshop monitor; on a phone the
   same information has to stack without anything overflowing. */
@media (max-width: 720px) {
  body{font-size:14px}
  .container{padding:.7rem .6rem 3rem}

  /* Top bar: brand and account on one line, search on its own. */
  .topbar{flex-wrap:wrap;gap:.5rem;padding:.5rem .6rem}
  .gsearch{order:3;flex:1 0 100%;max-width:none;margin:0}
  .gsearch input{font-size:16px}          /* 16px stops iOS zooming on focus */
  .userbox{margin-left:auto;gap:.5rem}
  .user-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .viewtools{display:none}                 /* customising needs a pointer */

  /* Quick actions: two per row instead of five full-width slabs. */
  .page-head{flex-direction:column;align-items:stretch;gap:.6rem}
  .quick-stack{
    grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;
    width:100%;margin:0;gap:.4rem;
  }
  .qbtn{padding:.55rem .5rem;font-size:.8rem}
  .qbtn-primary{grid-column:1 / -1}

  /* Työjono: each row becomes two lines, status first, nothing cut off. */
  .panel-head{flex-wrap:wrap;gap:.5rem}
  .queue-tools{width:100%}
  .queue-tools input[type=search]{flex:1;width:auto;min-width:0;font-size:16px}
  .queue-tools select{font-size:16px}
  .qrow{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"status main" "status meta";
    gap:.15rem .6rem;align-items:center;padding:.55rem .5rem;
  }
  .qrow > .st-select{grid-area:status;order:0;min-width:0;width:7.5rem}
  .qrow-link{grid-area:main;flex-wrap:wrap;white-space:normal;gap:.35rem}
  .qrow-veh{flex-basis:100%}
  .qrow-meta{grid-area:meta;justify-content:flex-start}
  .chips{gap:.3rem}
  .chip{font-size:.78rem;padding:.28rem .55rem}

  /* Calendar: one month, roomier cells, still tappable. */
  .cal-months{grid-template-columns:1fr}
  .panel[data-sec="calendar"]{--cal-cell:64px}
  .cal-day{padding:.25rem}
  .cal-job{font-size:.62rem}
  .cal-nav .btn{padding:.4rem .7rem}

  /* Panels and forms */
  .panel{padding:.65rem .7rem}
  .panel[data-accent] > *{padding-left:.7rem;padding-right:.7rem}
  .fs{grid-template-columns:1fr}
  .fs .col-2{grid-column:auto}
  .form-grid input,.form-grid select,.form-grid textarea,
  .msg-form input,.msg-form select,.msg-form textarea{font-size:16px}
  .settings-grid{grid-template-columns:1fr}
  .user-row{flex-direction:column;align-items:stretch}
  .user-actions{justify-content:space-between}
  .user-actions input[type=password]{width:100%}
  .detail-grid{grid-template-columns:1fr}
  .table-wrap{-webkit-overflow-scrolling:touch}

  /* Touch targets: nothing important smaller than a fingertip. */
  .btn,.qbtn,.act-chip,.chip,.st-select{min-height:38px}

  /* The day menu is reachable by long press, so give it finger-sized rows. */
  .ctx-menu{min-width:min(224px,calc(100vw - 16px))}
  .ctx-item{padding:.6rem .6rem;font-size:.9rem}
  .ctx-head{font-size:.76rem;padding:.4rem .6rem .45rem}
}

@media (max-width: 400px) {
  .quick-stack{grid-template-columns:1fr}
  .qrow > .st-select{width:100%}
  .qrow{grid-template-columns:1fr;grid-template-areas:"status" "main" "meta"}
}

/* ── Luo lasku / Luo tosite ────────────────────────────── */
.doc-form{max-width:900px}
.fs-lines{grid-template-columns:1fr}
.lines{display:flex;flex-direction:column;gap:.4rem}
.line-row{display:flex;gap:.4rem;align-items:center}
.line-row input{flex:1 1 auto;min-width:0}
.line-row .w-part{flex:0 0 8rem}
.line-row .w-qty{flex:0 0 4.5rem}
.line-row .w-price{flex:0 0 6.5rem}
.line-sum{flex:0 0 6.5rem;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.line-add{margin-top:.5rem}
.line-totals{
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.25rem;align-items:flex-end;
}
.line-totals div{display:flex;gap:1.2rem;min-width:16rem;justify-content:space-between}
.line-totals span{color:var(--muted)}
.line-totals b{font-variant-numeric:tabular-nums}
.line-totals .grand{border-top:1px solid var(--border);padding-top:.35rem;font-size:1.05rem}
@media(max-width:720px){
  .line-row{flex-wrap:wrap}
  .line-row input{flex:1 1 100%}
  .line-row .w-part,.line-row .w-qty,.line-row .w-price{flex:1 1 30%}
  .line-sum{flex:1 1 100%;text-align:left}
}
.inv-form{display:inline-flex;align-items:center;gap:.35rem}
.inv-form select{width:auto}
.line-totals .mode-note{border:0;padding-top:.2rem;min-width:0}

/* Demo mode wears its name where the logo goes. */
.brand-demo {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 .7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel-2, var(--panel));
  white-space: nowrap;
}

.brand-demo-lg { height: 40px; font-size: .95rem; }
.demo-hint { text-align: center; margin-top: .35rem; letter-spacing: .04em; }

/* Language lever: two codes, the active one filled. */
.langbar { display: inline-flex; gap: 2px; margin-right: .5rem; vertical-align: middle; }
.langbar .lang {
  display: inline-block; padding: .16rem .42rem; border-radius: 5px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-decoration: none; color: var(--muted); border: 1px solid transparent;
}
.langbar .lang:hover { color: var(--text); border-color: var(--line); }
.langbar .lang.is-on { color: var(--text); background: var(--panel-2, var(--panel)); border-color: var(--line); }
.langbar-login { display: flex; justify-content: center; margin-top: .5rem; }

/* Timecard: one decision per screen, readable at arm's length. */
.tc-card { text-align: center; }
.tc-state {
  margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.tc-state.is-on { color: var(--ok, #4ea87a); font-weight: 700; }
.tc-clock {
  margin: .1rem 0 .2rem; font-size: clamp(2.4rem, 12vw, 3.6rem);
  font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.btn-lg { padding: .95rem 1.2rem; font-size: 1.05rem; }

/* Maker's mark. A customer sets their own company name and logo from Settings,
   so this is the one piece of chrome under all of that which stays put. It is
   deliberately quiet — none of the scanline and flicker treatment the same
   badge gets on sihilisko.com's own footer, because this one sits under a job
   sheet all day and must never compete with it.

   The art is drawn on a black plate. Blending that away only half works (JPEG
   never quite reaches #000), so the asset is cropped tight to the artwork and
   the plate is owned rather than hidden — rounded, sized to read, dimmed until
   pointed at. */
.app-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1rem; margin-top: .5rem; padding: 1.3rem 1rem 1.5rem;
  text-align: center; font-size: .8rem; color: var(--muted);
  border-top: 1px solid var(--border);
}
.app-foot a { color: inherit; text-decoration: none; }
.app-foot a:hover { color: var(--text); text-decoration: underline; }
.app-foot-group, .app-foot-links { display: inline-flex; align-items: center; gap: .5rem; }
.app-foot-links a + a::before { content: "·"; margin-right: .5rem; color: currentColor; }
/* The phosphor treatment the same badge gets in sihilisko.com's own footer:
   sitting on the text's line, nudged up so its centre lines up rather than
   hanging low, lit with a green glow, scanlined, and flickering rarely enough
   that you are never quite sure you saw it.

   One deviation from the site's rules. There the scanlines are an ::after laid
   over the badge's black plate, which is safe because the plate is opaque.
   This badge is transparent, so the same overlay would stripe the page showing
   through it. The lines are a mask on the image instead, so they modulate only
   the artwork. */
.app-foot-sig {
  position: relative; display: inline-block; vertical-align: middle;
  height: 1.9em; top: -0.18em; line-height: 0;
}
.app-foot-sig:hover { text-decoration: none; }
.app-foot-sig img {
  display: block; height: 100%; width: auto;
  filter: saturate(1.1) drop-shadow(0 0 0.25em rgba(47, 220, 12, .4));
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 1px, rgba(0,0,0,.72) 1px 2px);
          mask-image: repeating-linear-gradient(to bottom, #000 0 1px, rgba(0,0,0,.72) 1px 2px);
  animation: app-foot-flicker 5.5s steps(1) infinite;
}
@keyframes app-foot-flicker {
  0%, 96% { opacity: 1; }
  97%     { opacity: .9; }
  98%     { opacity: 1; }
  99%     { opacity: .94; }
  100%    { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .app-foot-sig img { animation: none; } }

/* Sign-in carries the same badge, tucked under the login box rather than left
   at the foot of an otherwise empty page. A size down and dimmer than the
   footer's: it is the first thing a customer sees every morning, so it signs
   the screen without asking to be read. */
.login-sig { display: block; width: min(380px, 92vw); margin: 1.15rem auto 0; opacity: .42; transition: opacity .15s ease; }
.login-sig:hover, .login-sig:focus-visible { opacity: .85; }
/* The anchor is exactly as wide as .login-card, so margin-left:auto lands the
   badge on the card's right edge rather than somewhere near it. */
.login-sig img { display: block; width: 6rem; height: auto; margin-left: auto; }