/* Staff portal: same brand tokens, calmer and denser for daily work */
body.staff { background: #f6f3fb; padding: 0 !important; font-size: 16px; line-height: 1.6; }
.staff h1, .staff h2, .staff legend { font-family: var(--f-head); font-weight: 900; color: var(--ink); }
.staff .btn { min-height: 44px; padding: 8px 18px; font-size: .95rem; box-shadow: var(--hard-sm); }
.staff .btn-xs { min-height: 36px; padding: 4px 14px; font-size: .86rem; }
.staff .btn-sm { min-height: 40px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: var(--bw) solid var(--ink); background: var(--surface); cursor: pointer; color: var(--ink); flex: none; }
.icon-btn.flip svg { transform: scaleX(-1); }
[dir="rtl"] .icon-btn svg { transform: scaleX(-1); } [dir="rtl"] .icon-btn.flip svg { transform: none; }
.demo { display: inline-block; font: 900 .68rem var(--f-body); padding: 1px 8px; border-radius: 999px; background: #fff3c4; color: #5c4700; border: 1.5px solid #5c4700; vertical-align: middle; }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: .8rem; padding: 4px 12px; border-radius: 999px; background: #fff3c4; color: #5c4700; border: 1.5px solid #5c4700; }
.note { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.empty { color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 12px 0; margin: 0; }
.empty.big { font-size: 1.2rem; justify-content: center; padding: 60px 0; }
.num { direction: ltr; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ltr { direction: ltr; text-align: end; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--pink-soft); }
.login-card { width: min(420px, 100%); background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--hard-lg); text-align: center; }
.login-logo { width: 120px; margin: -10px auto 4px; }
.login-card h1 { font-size: 1.8rem; margin: 0; }
.login-form { display: grid; gap: 14px; text-align: start; margin: 20px 0 16px; }
.login-form label { display: grid; gap: 6px; font-weight: 900; color: var(--ink); font-size: .92rem; }
.login-form input, .s-body input, .s-body select, .s-body textarea { font: inherit; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: var(--bw) solid var(--ink); background: var(--surface); color: var(--ink); width: 100%; }
.s-body textarea { min-height: 90px; resize: vertical; }
.login-form input:focus, .s-body input:focus, .s-body select:focus, .s-body textarea:focus { outline: none; box-shadow: var(--hard-sm); }
.s-body input.err { border-color: #c0262d; box-shadow: 0 0 0 3px #ffd4d6; }
.login-err { color: #a3141b; font-weight: 900; font-size: .9rem; margin: 0; }
.quick { border-top: 1.5px dashed var(--ink); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.quick p { width: 100%; margin: 0; font-size: .85rem; color: var(--muted); }
.login-warn { display: flex; gap: 8px; align-items: flex-start; text-align: start; font-size: .82rem; background: #fff3c4; color: #5c4700; border-radius: 12px; padding: 10px 12px; margin: 18px 0 0; }

/* shell */
.s-app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.s-side { position: sticky; top: 0; height: 100vh; background: var(--ink); color: #dfe1f3; display: flex; flex-direction: column; padding: 18px 14px; gap: 14px; }
.s-brand { display: flex; align-items: center; gap: 10px; font: 900 1.15rem var(--f-head); color: #fff; padding: 4px 8px 12px; border-bottom: 1px dashed rgba(255,255,255,.2); }
.s-brand img { width: 38px; background: #fff; border-radius: 10px; padding: 3px; }
.s-side nav { display: grid; gap: 4px; flex: 1; align-content: start; }
.s-side nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 900; min-height: 46px; transition: background var(--t-fast); }
.s-side nav a:hover { background: rgba(255,255,255,.08); }
.s-side nav a[aria-current] { background: var(--pink); color: var(--ink); border: var(--bw) solid var(--ink); }
.nav-badge { margin-inline-start: auto; min-width: 24px; height: 24px; border-radius: 12px; background: var(--cyan); color: var(--ink); display: grid; place-items: center; font-size: .78rem; padding: 0 6px; }
.s-user { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.2); }
.s-user b { display: block; color: #fff; } .s-user small { font-size: .78rem; color: #b9bcd8; }
.s-user .icon-btn { margin-inline-start: auto; background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--cyan); color: var(--ink); display: grid; place-items: center; font: 900 1.1rem var(--f-head); flex: none; border: var(--bw) solid var(--ink); }
.s-main { min-width: 0; display: flex; flex-direction: column; }
.s-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: #f6f3fb; border-bottom: var(--bw) solid var(--ink); }
.s-top h1 { font-size: 1.6rem; margin: 0; outline: none; }
.s-top-act { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.s-menu { display: none; }
.s-body { padding: 24px 28px 60px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; width: 100%; }  /* minmax(0): wide children (scrolling chip rows, tables) must not widen the page — Safari otherwise does */
.hello { font-weight: 900; color: var(--ink); margin: 0; font-size: 1.05rem; }

/* kpis */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { display: grid; gap: 2px; padding: 16px 18px; background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--hard-sm); color: var(--ink); position: relative; transition: transform var(--t-fast); }
a.kpi:hover { transform: translateY(-2px); }
.kpi b { font: 900 1.9rem/1.2 var(--f-head); direction: ltr; text-align: start; }
[dir="rtl"] .kpi b { padding-left: 44px; } [dir="ltr"] .kpi b { padding-right: 44px; }
[dir="rtl"] .kpi b { text-align: right; }
.kpi span:not(.kpi-ico) { color: var(--muted); font-weight: 900; font-size: .88rem; }
.kpi-ico { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cyan-soft); border: 1.5px solid var(--ink); }
.kpi.hot { background: var(--pink); } .kpi.hot span:not(.kpi-ico) { color: var(--ink); }
.kpi.warn { background: #fff3c4; } .kpi.good { background: #d9f5e3; }
.kpis.money .kpi b { font-size: 1.5rem; }

/* panels & rows */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 18px 20px; min-width: 0; }
.panel > h2, .panel > legend { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 12px; flex-wrap: wrap; }
.panel > h2 small { font: 400 .82rem var(--f-body); color: var(--muted); }
fieldset.panel { margin: 0; } fieldset.panel legend { float: inline-start; width: 100%; }
fieldset.panel > :not(legend) { clear: both; }  /* floated legend must not squeeze the grids beside it */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #ece6f3; cursor: pointer; border-radius: 10px; }
.rows li:hover { background: var(--pink-soft); }
.r-main { flex: 1; min-width: 0; display: grid; } .r-main b { color: var(--ink); } .r-main small { color: var(--muted); font-size: .84rem; }
.age { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1.5px solid var(--ink); }
.dot.bad { background: #e5484d; } .dot.warn { background: #ffcc33; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 14px; cursor: pointer; }
.tl li:hover { background: var(--cyan-soft); }
.tl-time { display: grid; text-align: center; min-width: 56px; } .tl-time b { font: 900 1.15rem var(--f-head); color: var(--ink); direction: ltr; } .tl-time small { font-size: .72rem; color: var(--muted); }

/* status chips (text + colour, never colour alone) */
.st { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-weight: 900; font-size: .8rem; border: 1.5px solid var(--ink); white-space: nowrap; color: var(--ink); }
.st-new { background: var(--pink); } .st-contacted { background: #fff3c4; } .st-quoted { background: var(--cyan); }
.st-confirmed { background: var(--ink); color: #fff; } .st-done { background: #d9f5e3; } .st-cancelled { background: #eee; color: #666; text-decoration: line-through; }
.flag { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 900; padding: 2px 8px; border-radius: 999px; white-space: nowrap; color: var(--ink); }
.flag svg { width: 1em; height: 1em; }
.flag.ok { background: #d9f5e3; } .flag.warn { background: #fff3c4; } .flag.bad { background: #ffd4d6; color: #7a0d12; }

/* toolbar, segments, search */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg a { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--surface); font-weight: 900; font-size: .9rem; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.seg a b { font-size: .78rem; background: var(--paper); border-radius: 999px; padding: 0 7px; border: 1px solid var(--ink); }
.seg a[aria-current] { background: var(--ink); color: #fff; } .seg a[aria-current] b { color: var(--ink); }
.seg.big a { font-size: 1.05rem; min-height: 48px; padding: 8px 22px; }
.s-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 420px; }
.s-search svg { position: absolute; inset-inline-start: 12px; color: var(--muted); }
.s-search input { padding-inline-start: 40px !important; }

/* tables */
.table-wrap { overflow-x: auto; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--surface); }
.panel .table-wrap { border-width: 1.5px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { position: sticky; top: 0; background: var(--paper); text-align: start; font-weight: 900; color: var(--ink); padding: 10px 12px; border-bottom: var(--bw) solid var(--ink); white-space: nowrap; font-size: .84rem; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid #ece6f3; vertical-align: middle; }
.tbl td small { display: block; color: var(--muted); font-size: .76rem; }
.tbl tbody tr { cursor: pointer; transition: background var(--t-fast); }
.tbl tbody tr:hover, .tbl tbody tr:focus-visible { background: var(--pink-soft); outline: none; }
.tbl.compact td { padding: 7px 10px; }
.t-img img, .t-img .noimg { width: 52px; height: 42px; object-fit: contain; border-radius: 8px; background: var(--cyan-soft); border: 1px solid #d8d0e4; display: block; }
.code, .tbl .code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.mini-thumbs { display: inline-flex; } .mini-thumbs img, .mini-thumbs .noimg { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); background: #fff; margin-inline-start: -8px; }
.mini-thumbs img:first-child { margin-inline-start: 0; }
.noimg { display: inline-block; background: var(--pink-soft); }

/* order detail */
.od-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.od-title { font-size: 1.6rem; margin: 4px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.od-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stepper li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1.5px solid #d8d0e4; font-weight: 900; font-size: .86rem; color: var(--muted); }
.stepper li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-size: .8rem; flex: none; }
.stepper li.done { color: var(--ink); background: #d9f5e3; border-color: var(--ink); }
.stepper li.now { color: var(--ink); background: var(--pink); border-color: var(--ink); box-shadow: var(--hard-sm); }
.od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.od-grid .wide { grid-column: 1 / -1; }
.facts { display: grid; gap: 0; margin: 0; }
.facts div { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e3dcec; align-items: center; }
.facts dt { color: var(--muted); font-size: .88rem; } .facts dd { margin: 0; color: var(--ink); font-weight: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.facts dd small { font-weight: 400; color: var(--muted); }
.facts .hl { background: var(--cyan-soft); border-radius: 10px; padding-inline: 10px; border-bottom: 0; margin: 2px 0; }
.facts .hl.good { background: #d9f5e3; }
.facts.tight div { grid-template-columns: 46% 1fr; padding: 6px 0; }
.lnk { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: var(--pink-ink); font-size: .84rem; }
.ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ops div { border: 1.5px solid var(--ink); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; background: var(--paper); }
.ops div span { color: var(--pink-ink); } .ops b { font: 900 1.5rem var(--f-head); color: var(--ink); } .ops b i { font-style: normal; font-size: .8rem; margin-inline-start: 2px; } .ops small { font-size: .78rem; color: var(--muted); }
.issues { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.issues li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 12px; background: #fff3c4; font-size: .9rem; color: #4a3a00; }
.issues li.bad { background: #ffd4d6; color: #7a0d12; } .issues svg { margin-top: 3px; flex: none; }
.crew { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.person { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--cyan-soft); border: 1.5px solid var(--ink); font-weight: 900; }
[dir="rtl"] .person { padding: 4px 12px 4px 6px; }
.person button { border: 0; background: none; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.person button:hover { background: #fff; }
.log { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: .9rem; max-height: 240px; overflow: auto; }
.log li { padding-inline-start: 14px; border-inline-start: 3px solid var(--pink); }
.note-form { display: flex; gap: 8px; } .note-form input { flex: 1; }

/* new order */
.new-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.new-main { display: grid; gap: 16px; }
.f-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.f-row label { display: grid; gap: 6px; font-weight: 900; font-size: .88rem; color: var(--ink); }
.f-row.dims { margin-top: 12px; }
.sticky { position: sticky; top: 90px; display: grid; gap: 10px; }
.pick-results, .picked { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pick-results button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: start; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); cursor: pointer; font: inherit; }
.pick-results button:hover { background: var(--cyan-soft); }
.pick-results img, .picked img, .pick-results .noimg, .picked .noimg { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #d8d0e4; flex: none; }
.pick-results span, .picked li > span { flex: 1; display: grid; } .pick-results small, .picked small { color: var(--muted); font-size: .8rem; }
.picked li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--surface); }
.picked li.busy { background: #ffd4d6; }
.picked small.ok { color: #1b6b3a; font-weight: 900; } .picked small.bad { color: #7a0d12; font-weight: 900; }
.picked button { border: 0; background: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.picked button:hover { background: var(--pink-soft); }
.empty.ok { color: #1b6b3a; font-weight: 900; }

/* calendar */
.cal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-head h2 { margin: 0; font-size: 1.4rem; min-width: 180px; text-align: center; }
.legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-inline-start: auto; font-size: .82rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.cal-dow { overflow: hidden; text-overflow: clip; white-space: nowrap; padding: 8px; text-align: center; font-weight: 900; font-size: .84rem; background: var(--paper); border-bottom: var(--bw) solid var(--ink); }
.cal-cell { min-height: 108px; padding: 6px; border-inline-start: 1px solid #ece6f3; border-top: 1px solid #ece6f3; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell:hover { background: var(--pink-soft); }
.cal-cell.pad { background: #faf8fd; }
.cal-cell b { font-size: .9rem; color: var(--ink); }
.cal-cell.today b { background: var(--pink); border: 1.5px solid var(--ink); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
.cal-cell.sel { box-shadow: inset 0 0 0 3px var(--ink); }
.ev { font-size: .72rem; font-weight: 900; padding: 1px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--ink); color: var(--ink); }
.ev.st-confirmed { color: #fff; } .ev.st-contacted { background: #fff3c4; }
.more { font-size: .72rem; color: var(--muted); font-weight: 900; }

/* crew jobs */
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.job { background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard); display: grid; gap: 12px; padding: 18px; }
.job header { display: flex; gap: 14px; align-items: flex-start; }
.job header h2 { font-size: 1.2rem; margin: 0; } .job header small { color: var(--muted); }
.job-time { background: var(--pink); border: var(--bw) solid var(--ink); border-radius: 16px; padding: 8px 12px; text-align: center; display: grid; min-width: 84px; }
.job-time b { font: 900 1.5rem var(--f-head); direction: ltr; color: var(--ink); } .job-time small { font-size: .72rem; color: var(--ink) !important; }
.jstate { margin-inline-start: auto; font-size: .78rem; font-weight: 900; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--ink); white-space: nowrap; }
.j-none { background: #eee; } .j-onway { background: #fff3c4; } .j-setup { background: var(--cyan); } .j-removed { background: #d9f5e3; }
.job-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.job-facts span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; font-weight: 900; font-size: .86rem; }
.job-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.job-items li { display: flex; align-items: center; gap: 10px; } .job-items span { display: grid; } .job-items small { color: var(--muted); font-size: .8rem; }
.job-items img, .job-items .noimg { width: 50px; height: 50px; object-fit: contain; border-radius: 10px; background: var(--cyan-soft); border: 1px solid #d8d0e4; }
.checklist { border: 1.5px dashed var(--ink); border-radius: 14px; padding: 8px 12px; }
.checklist summary { cursor: pointer; font-weight: 900; min-height: 36px; display: flex; align-items: center; }
.checklist label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .92rem; cursor: pointer; }
.checklist input { width: 22px; height: 22px; accent-color: var(--pink); flex: none; min-height: 0; }
.job footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.job footer .btn-primary { margin-inline-start: auto; }

/* catalog item */
.item-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.item-grid > div { display: grid; gap: 16px; }
.item-img { margin: 0; background: var(--cyan-soft); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); padding: 18px; aspect-ratio: 1; display: grid; place-items: center; position: sticky; top: 90px; }
.item-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* finance charts */
.bars { display: flex; align-items: flex-end; gap: 12px; height: 240px; padding: 10px 4px 0; border-bottom: var(--bw) solid var(--ink); }
.bar-col { flex: 1; display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; gap: 4px; }
.bar-stack { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.bar { width: 36%; border: 1.5px solid var(--ink); border-radius: 6px 6px 0 0; min-height: 2px; }
.bar.rev { background: var(--pink); } .bar.cost { background: var(--cyan); }
.bar-col b { font-size: .74rem; direction: ltr; } .bar-col small { font-size: .78rem; color: var(--muted); }
.legend .sw, p.legend .sw { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 4px; vertical-align: middle; }
.sw.rev { background: var(--pink); } .sw.cost { background: var(--cyan); }
p.legend { font-size: .84rem; color: var(--muted); display: flex; gap: 8px; align-items: center; margin: 10px 0 0; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.hbar { height: 16px; background: #f1ecf7; border-radius: 8px; overflow: hidden; border: 1px solid #d8d0e4; }
.hbar i { display: block; height: 100%; background: var(--pink); }
.hbars b { font-size: .84rem; direction: ltr; }
.reset-row { text-align: center; }

.s-toast { position: fixed; bottom: 24px; left: 50%; translate: -50% 20px; background: var(--ink); color: #fff; padding: 10px 22px; border-radius: 999px; font-weight: 900; opacity: 0; transition: all var(--t) var(--ease); z-index: 100; pointer-events: none; box-shadow: 4px 4px 0 var(--pink); }
.s-toast.on { opacity: 1; translate: -50% 0; }
.s-update { position: fixed; z-index: 200; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 52px; border-radius: 16px; border: var(--bw) solid var(--ink); background: var(--cyan); color: var(--ink); font: 900 1rem var(--f-body); box-shadow: var(--hard-sm); cursor: pointer; }

/* dashboard: 3 panels side by side on wide screens */
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dash-grid .rows li, .dash-grid .tl li { min-width: 0; }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 20px; align-items: start; }
.day-panel { position: sticky; top: 90px; }
.push { margin-inline-start: auto; }
.sheet-ico { padding: 4px 10px !important; min-width: 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1700px) { .od-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* foreman worksheet: A4 on screen, clean black-and-white print */
.ws-wrap { padding: 20px 16px 60px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; }
.ws-bar { position: sticky; top: 0; z-index: 5; width: min(210mm, 100%); display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--r); }
.ws-bar { flex-wrap: wrap; } .ws-bar b { flex: 1 1 140px; min-width: 0; color: var(--ink); }
.ws-page { width: min(210mm, 100%); background: #fff; color: #111; border: 1.5px solid #cfc8da; border-radius: 6px; box-shadow: 0 10px 30px rgba(20,22,58,.12); padding: 12mm; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 1.5; }
.ws-page h2 { font: 900 14px var(--f-head); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; color: #111; border-bottom: 2px solid #111; padding-bottom: 3px; }
.ws-page h2 svg, .ws-page h3 svg { width: 16px; height: 16px; }
.ws-page h3 { font: 900 12.5px var(--f-body); margin: 0 0 4px; color: #111; }
.ws-head { display: flex; align-items: center; gap: 12px; border-bottom: 3px solid #111; padding-bottom: 8px; }
.ws-head img { width: 46px; }
.ws-head h1 { font: 900 20px var(--f-head); margin: 0; color: #111; } .ws-head p { margin: 0; font-weight: 700; }
.ws-id { margin-inline-start: auto; display: grid; text-align: end; } .ws-id b { font-size: 15px; } .ws-id small { color: #444; }
.ws-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ws-t { border: 1.5px solid #111; border-radius: 8px; padding: 6px 8px; display: grid; text-align: center; }
.ws-t small { font-size: 11px; color: #333; } .ws-t b { font: 900 20px var(--f-head); direction: ltr; }
.ws-t.hot { background: #111; color: #fff; } .ws-t.hot small { color: #ddd; }
.ws-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ws-cols section { display: grid; align-content: start; gap: 4px; }
.ws-facts { margin: 0 0 8px; display: grid; }
.ws-facts div { display: grid; grid-template-columns: 34% 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px dotted #999; }
.ws-facts dt { color: #444; } .ws-facts dd { margin: 0; font-weight: 700; }
.ws-crew { margin: 0; padding-inline-start: 20px; display: grid; gap: 2px; }
.ws-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ws-tbl th, .ws-tbl td { border: 1px solid #999; padding: 4px 6px; text-align: start; vertical-align: middle; }
.ws-tbl th { background: #eee; font-weight: 900; white-space: nowrap; }
.ws-tbl td small { display: block; color: #555; font-size: 10.5px; }
.ws-tbl img, .ws-tbl .noimg { width: 44px; height: 36px; object-fit: contain; display: block; }
.ws-tbl .code { font-size: 11px; }
.ws-box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #111; border-radius: 3px; flex: none; vertical-align: middle; }
.ws-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.ws-kit ul, .ws-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ws-kit li { display: flex; gap: 8px; align-items: center; } .ws-kit li span:not(.ws-box) { flex: 1; } .ws-kit li b { white-space: nowrap; }
.ws-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; } .ws-checks li { display: flex; gap: 8px; align-items: center; }
.ws-warn { border: 2px solid #111; border-radius: 8px; padding: 6px 10px; } .ws-warn ul { margin: 0; padding-inline-start: 18px; }
.ws-page:not(.qd) { display: flex; flex-direction: column; aspect-ratio: 210 / 297; }
.ws-page:not(.qd) .ws-sign { margin-top: auto; padding-top: 12px; }
.ws-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.ws-sign div { display: grid; gap: 22px; } .ws-sign small { color: #333; } .ws-sign span { border-bottom: 1.5px solid #111; }
.ws-foot { font-size: 10.5px; color: #555; border-top: 1px solid #ccc; padding-top: 6px; }
@media (max-width: 640px) {
  .ws-page { padding: 14px; } .ws-page:not(.qd) { aspect-ratio: auto; } .ws-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-cols, .ws-checks { grid-template-columns: 1fr; } .ws-sign { grid-template-columns: 1fr; }
  .ws-tbl { display: block; overflow-x: auto; }
}
/* quotation */
.q-wrap { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.q-edit { display: grid; gap: 14px; position: sticky; top: 90px; }
.q-lines { display: grid; gap: 8px; }
.q-line { display: grid; grid-template-columns: 46px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 6px 8px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.q-line img, .q-line .noimg { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; }
.q-line span { display: grid; min-width: 0; } .q-line small { color: var(--muted); font-size: .78rem; }
.q-check { display: flex; gap: 10px; align-items: center; font-weight: 900; color: var(--ink); flex-wrap: wrap; }
.q-check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--pink); } .q-check small { font-weight: 400; color: var(--muted); }
.q-field { display: grid; gap: 6px; font-weight: 900; font-size: .88rem; color: var(--ink); }
.q-act { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-wa { background: var(--wa); color: #fff; }
.q-preview { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.qd { display: flex; flex-direction: column; gap: 14px; aspect-ratio: 210 / 297; }  /* A4-shaped on screen; grows if content is longer */
.qd-sign { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 18px; }
.qd-sign div { display: grid; gap: 26px; } .qd-sign small { color: #444; } .qd-sign span { border-bottom: 1.5px solid var(--ink); }
.qd-sign p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #444; }
.qd-draft { margin: 0; text-align: center; font-weight: 900; font-size: 12px; background: #fff3c4; color: #5c4700; border: 1.5px dashed #5c4700; border-radius: 6px; padding: 4px; }
.qd-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--pink); padding-bottom: 10px; }
.qd-head img { width: 100px; } .qd-head h1 { font: 900 26px var(--f-head); margin: 0; color: var(--ink); } .qd-head p { margin: 0; color: #555; }
.qd-meta { margin: 0 auto 0 0; display: grid; gap: 2px; font-size: 12.5px; } [dir="ltr"] .qd-meta { margin: 0 0 0 auto; }
.qd-meta div { display: flex; gap: 8px; justify-content: space-between; } .qd-meta dt { color: #555; } .qd-meta dd { margin: 0; font-weight: 700; }
.qd-to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qd-to div { display: grid; background: #f2fbfe; border: 1.5px solid var(--cyan); border-radius: 8px; padding: 8px 10px; }
.qd-to small { color: #555; font-size: 11px; } .qd-to b { font-size: 15px; color: var(--ink); }
.qd-tbl th { background: #f2fbfe; } .qd-tbl td:first-child { width: 28px; text-align: center; }
.qd-sum { margin: 0 auto 0 0; width: min(300px, 100%); display: grid; } [dir="ltr"] .qd-sum { margin: 0 0 0 auto; }
.qd-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dotted #999; } .qd-sum dd { margin: 0; font-weight: 700; }
.qd-sum .qd-total { border: 0; border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 8px; font: 900 17px var(--f-head); color: var(--ink); }
.qd-p { margin: 0; } .qd-terms { margin: 0; padding-inline-start: 18px; font-size: 12px; }
.qd-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1.5px solid var(--pink); padding-top: 6px; font-size: 11.5px; color: #444; }
@media (max-width: 1100px) { .q-wrap { grid-template-columns: minmax(0, 1fr); } .q-edit { position: static; } }
@media (max-width: 640px) { .qd { aspect-ratio: auto; } .qd-sign { grid-template-columns: 1fr; } .qd-to { grid-template-columns: 1fr; } .q-line { grid-template-columns: 40px minmax(0, 1fr) 90px; } .qd-head img { width: 60px; } }

/* off-screen A4 copy used to build PDFs; undoes the phone layout so the file always looks like the desktop A4 */
.pdf-render { position: fixed; left: -10000px; top: 0; width: 794px; pointer-events: none; }
.pdf-render .ws-page { width: 794px; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 38px; margin: 0; }
.pdf-render .qd, .pdf-render .ws-page:not(.qd) { aspect-ratio: 210 / 297; }
.pdf-render .qd-to, .pdf-render .ws-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdf-render .ws-times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdf-render .qd-sign, .pdf-render .ws-sign { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdf-render .ws-tbl { display: table; overflow: visible; }
.pdf-render .qd-head img { width: 100px; }
.pdf-render .ws-page:not(.qd) { gap: 8px; font-size: 11.5px; line-height: 1.4; }
.pdf-render .ws-page:not(.qd) h2 { font-size: 13px; margin-bottom: 4px; }
.pdf-render .ws-t b { font-size: 17px; } .pdf-render .ws-t { padding: 4px 6px; }
.pdf-render .ws-kit, .pdf-render .ws-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; }
.pdf-render .ws-tbl img, .pdf-render .ws-tbl .noimg { width: 34px; height: 28px; } .pdf-render .ws-tbl th, .pdf-render .ws-tbl td { padding: 3px 5px; }
.pdf-render .ws-sign { margin-top: 4px; } .pdf-render .ws-sign div { gap: 16px; }

@page { size: A4; margin: 10mm; }
@media print {
  body.staff { background: #fff; }
  .ws-bar, .s-toast, .no-print, .s-side, .s-top { display: none !important; }
  .s-app { display: block; } .s-body { padding: 0; display: block; } .q-wrap, .q-preview { display: block; }
  .qd-draft { border-width: 1px; }
  .qd, .ws-page:not(.qd) { aspect-ratio: auto; min-height: 250mm; }  /* fill the A4 page so the footer sits at the bottom */
  .ws-wrap { padding: 0; gap: 0; display: block; }
  .ws-page { width: 100% !important; max-width: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; break-after: page; }
  .ws-page:last-child { break-after: auto; }
  .ws-section, .ws-kit > div, .ws-tbl tr, .ws-sign { break-inside: avoid; }
  .ws-t.hot { background: #fff; color: #111; border-width: 3px; } .ws-t.hot small { color: #333; }
  .ws-tbl th { background: #fff; }
  .ws-page:not(.qd) { gap: 8px; font-size: 11.5px; line-height: 1.4; }
  .ws-page:not(.qd) h2 { font-size: 13px; margin-bottom: 4px; }
  .ws-t b { font-size: 17px; } .ws-t { padding: 4px 6px; }
  .ws-kit, .ws-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; }
  .ws-tbl img, .ws-tbl .noimg { width: 34px; height: 28px; } .ws-tbl th, .ws-tbl td { padding: 3px 5px; }
  .ws-sign { margin-top: 4px; } .ws-sign div { gap: 16px; }
}

/* responsive */
@media (max-width: 1500px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #dash-alerts { grid-column: 1 / -1; }
  .cal-wrap { grid-template-columns: 1fr; } .day-panel { position: static; }
}
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* minmax(0): big money figures must not widen the page */
  .dash-grid { grid-template-columns: 1fr; }
  .cols, .od-grid { grid-template-columns: 1fr; }
  .new-grid { grid-template-columns: 1fr; } .sticky { position: static; }
  .item-grid { grid-template-columns: 1fr; } .item-img { position: static; max-width: 360px; }
}
@media (max-width: 480px) { .kpi { padding: 12px 14px; } .kpi b, .kpis.money .kpi b { font-size: 1.25rem; } [dir="rtl"] .kpi b { padding-left: 40px; } .kpi-ico { width: 30px; height: 30px; } }
@media (max-width: 860px) {
  .s-app { grid-template-columns: 1fr; }
  .s-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 270px; z-index: 50; transform: translateX(100%); transition: transform var(--t) var(--ease); }
  [dir="rtl"] .s-side { transform: translateX(100%); }
  [dir="ltr"] .s-side { transform: translateX(-100%); }
  .s-side.open { transform: none !important; box-shadow: -20px 0 60px rgba(0,0,0,.3); }
  .s-side:not(.open) { display: none; }  /* iPhone Safari counts an off-screen fixed menu as page width → page shifts/zooms; remove it entirely while closed */
  .s-menu { display: grid; }
  .s-top { padding: 10px 16px; flex-wrap: wrap; row-gap: 8px; } .s-top h1 { font-size: 1.25rem; min-width: 0; overflow-wrap: anywhere; }
  .s-top-act { flex-wrap: wrap; }
  .cal-dow { font-size: .7rem; padding: 6px 2px; }
  .demo-pill { display: none; }
  .s-body { padding: 16px 16px 60px; }
  .stepper { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stepper li { flex-direction: column; font-size: .7rem; padding: 6px 4px; text-align: center; }
  .ops { grid-template-columns: repeat(2, 1fr); }
  .jobs { grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; } .ev { display: none; } .cal-cell:has(.ev) b::after { content: " •"; color: var(--pink-ink); }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* catalogue table: products easier to scan (bigger photo, bolder name, roomier rows) */
.tbl-cat { font-size: 1rem; }
.tbl-cat td { padding: 9px 14px; }
.tbl-cat td b { font-size: 1.08rem; font-weight: 900; white-space: nowrap; }
.tbl-cat td small { font-size: .82rem; white-space: nowrap; }
.tbl-cat .t-img img, .tbl-cat .t-img .noimg { width: 70px; height: 56px; background: #fff; border-radius: 10px; }

/* ---------- new order: a numbered colour path the eye can follow (same language as the public site) ---------- */
.new-main { counter-reset: step; }
.new-main > .panel { --tone: var(--pink); --tone-soft: var(--pink-soft); position: relative; overflow: hidden;
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease), border-color var(--t-fast); }
.new-main > .panel:nth-child(even) { --tone: var(--cyan); --tone-soft: var(--cyan-soft); }
.new-main > .panel:last-child { --tone: var(--ink-2); --tone-soft: #ece9f6; }
/* colour strip on the reading edge = where each step starts */
.new-main > .panel::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--tone); }
.new-main > .panel > legend { counter-increment: step; }
.new-main > .panel > legend::before { content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; border: var(--bw) solid var(--ink); background: var(--tone-soft); color: var(--ink); font-size: .95rem;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t) var(--spring); }
.new-main > .panel.is-done > legend::before { content: "✓"; background: #2e9b5f; border-color: #2e9b5f; color: #fff; }
.new-main > .panel:hover { transform: translate(calc(var(--sx) * -.3), -2px); box-shadow: var(--hard-sm); }
/* the step being filled in is the focal point */
.new-main > .panel:focus-within { transform: translate(calc(var(--sx) * -.5), -3px); box-shadow: var(--hard); background: linear-gradient(var(--tone-soft), var(--tone-soft)) top / 100% 58px no-repeat, var(--surface); }
.new-main > .panel:focus-within > legend::before { background: var(--tone); color: #fff; transform: scale(1.1); }
.new-main input:focus, .new-main select:focus, .new-main textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
@media (prefers-reduced-motion: reduce) { .new-main > .panel, .new-main > .panel > legend::before { transition: none; } .new-main > .panel:hover, .new-main > .panel:focus-within { transform: none; } }

/* invoice table on phones: compact, and if still too wide it scrolls inside its own box instead of being cut (print unaffected) */
.qd-scroll { max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) {
  .qd-tbl { font-size: .74rem; }
  .qd-tbl th, .qd-tbl td { padding: 6px 4px; }
  .qd-tbl th { white-space: normal; line-height: 1.25; }
  .qd-tbl .num { white-space: nowrap; }
}
@media print { .qd-scroll { overflow: visible; } }

/* ---------- payments: paid / still owed at a glance ---------- */
.pay { margin-top: 14px; border-top: 1.5px dashed var(--ink); padding-top: 12px; display: grid; gap: 10px; }
.pay-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-sum > div { border: var(--bw) solid var(--ink); border-radius: var(--r-sm); padding: 8px 12px; background: var(--surface); }
.pay-sum small { display: block; color: var(--muted); font-size: .8rem; }
.pay-sum b { font-size: 1.15rem; }
.pay-sum .due { background: var(--pink-soft); }
.pay-sum .ok { background: #dff4e8; border-color: #2e9b5f; }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pay-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--paper); }
.pay-list li small { color: var(--muted); font-size: .78rem; grid-column: 1; }
.pay-list li .link-btn { grid-row: 1 / span 2; grid-column: 2; }
.pay-list li.is-void { opacity: .55; text-decoration: line-through; }
.pay-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; align-items: end; }
.pay-form label { display: grid; gap: 4px; font-size: .82rem; font-weight: 700; }
.qd-sum .qd-paid dd { color: #1f7a48; }
/* split payment */
.pay-form [hidden] { display: none; }
.pay-form-act { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-split-sum { grid-column: 1 / -1; margin: 0; font-size: .88rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* expenses */
.cost-form { display: grid; gap: 12px; }
.cost-form .wide { grid-column: span 2; }
.cost-form label.chk { align-content: center; }
.cost-form label.chk span { display: flex; gap: 8px; align-items: center; }
.cost-form label.chk input { width: 20px; height: 20px; accent-color: var(--pink); }
.cost-form label.chk small { color: var(--muted); font-weight: 700; min-height: 1.2em; }
.cost-act { display: flex; justify-content: flex-end; }
.cost-new { margin-bottom: 14px; }
.month-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 14px; }
.month-bar b { font: 900 1.2rem var(--f-head); min-width: 9em; text-align: center; }
.cost-tbl tr.is-void td { opacity: .5; text-decoration: line-through; }
.cost-tbl td:nth-child(2) { min-width: 180px; }
.cost-pay { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.cost-pay select { padding: 4px 6px; font-size: .8rem; }
@media (max-width: 560px) { .cost-form .wide { grid-column: auto; } }