@font-face { font-family:Cabin; font-weight:400; font-display:swap; src:url(fonts/cabin-regular.woff2) format("woff2"); }
@font-face { font-family:Cabin; font-weight:500; font-display:swap; src:url(fonts/cabin-medium.woff2) format("woff2"); }
@font-face { font-family:Cabin; font-weight:600; font-display:swap; src:url(fonts/cabin-semibold.woff2) format("woff2"); }
@font-face { font-family:Cabin; font-weight:700; font-display:swap; src:url(fonts/cabin-bold.woff2) format("woff2"); }
:root {
  color-scheme:light dark;
  --bg:#F4F8FB; --surface:#FFFFFF; --surface-2:#EDF3F8; --surface-3:#E1EAF1; --border:#D6DEE4; --outline:#7D8890;
  --text:#383A35; --text-2:#4F565C; --text-3:#6B7278;
  --primary:#0065A1; --on-primary:#FFFFFF; --primary-container:#E8F1F7; --on-primary-container:#0065A1;
  --link:#0065A1; --secondary:#288DC1; --on-secondary:#08141D; --focus:#288DC1;
  --header:#0065A1; --on-header:#FFFFFF; --on-header-2:#D6E9F5; --bulk:#0065A1; --on-bulk:#FFFFFF;
  --ok-fg:#0F6B37; --ok-bg:#E2F3E8; --ok-solid:#1B7F46; --on-ok:#FFFFFF;
  --warn-fg:#8A4600; --warn-bg:#FCEFD4; --warn-solid:#C47A00; --on-warn:#2A1A00;
  --danger-fg:#B42318; --danger-bg:#FDE8E6; --danger-solid:#D92D20; --on-danger:#FFFFFF;
  --info-fg:#0065A1; --info-bg:#E3EEF7; --info-solid:#0065A1;
  --neutral-fg:#4F565C; --neutral-bg:#E7EDF2; --neutral-solid:#8A949C;
  --violet-fg:#5B2B9E; --violet-bg:#EFE7FB; --teal-fg:#0B6B5C; --teal-bg:#DAF2EC;
  --e1:0 1px 2px rgba(20,38,54,.07),0 1px 1px rgba(20,38,54,.04);
  --e2:0 6px 16px -6px rgba(20,38,54,.15),0 2px 4px rgba(20,38,54,.04); --e3:0 16px 40px -10px rgba(20,38,54,.30);
  --muted:var(--text-2); --ok:var(--ok-solid); --danger:var(--danger-solid);
  --radius:16px; --shadow:var(--e1); --warn:var(--warn-fg); --info:var(--info-fg);
  --primary-hover:var(--primary); --wa:var(--ok-fg);
  --s-check:var(--neutral-fg); --s-check-bg:var(--neutral-bg);
  --s-need:var(--warn-fg); --s-need-bg:var(--warn-bg);
  --s-search:var(--warn-fg); --s-search-bg:var(--warn-bg);
  --s-approve:var(--violet-fg); --s-approve-bg:var(--violet-bg);
  --s-go:var(--info-fg); --s-go-bg:var(--info-bg);
  --s-way:var(--teal-fg); --s-way-bg:var(--teal-bg);
  --s-done:var(--ok-fg); --s-done-bg:var(--ok-bg);
  --s-off:var(--neutral-fg); --s-off-bg:var(--neutral-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
--bg:#1C1D1A; --surface:#252623; --surface-2:#2D2F2B; --surface-3:#383A35; --border:#42453F; --outline:#8A9086;
--text:#ECEEE9; --text-2:#C3C8BF; --text-3:#A3A99E;
--primary:#73B5D7; --on-primary:#06293F; --primary-container:#17384F; --on-primary-container:#CDE7F6;
--link:#73B5D7; --secondary:#288DC1; --on-secondary:#08141D; --focus:#73B5D7;
--header:#2D2F2B; --on-header:#ECEEE9; --on-header-2:#C3C8BF; --bulk:#17384F; --on-bulk:#CDE7F6;
--ok-fg:#6ED49A; --ok-bg:#17301F; --ok-solid:#35B26B; --on-ok:#06210F;
--warn-fg:#F4C266; --warn-bg:#33280E; --warn-solid:#E3A33A; --on-warn:#2A1A00;
--danger-fg:#FF9088; --danger-bg:#3C1B19; --danger-solid:#F0605A; --on-danger:#2E0705;
--info-fg:#73B5D7; --info-bg:#17384F; --info-solid:#4FA3D1;
--neutral-fg:#C3C8BF; --neutral-bg:#32342F; --neutral-solid:#8A9086;
--violet-fg:#CBAAFF; --violet-bg:#2D2347; --teal-fg:#6FD6C3; --teal-bg:#143029;
--e1:none; --e2:0 -1px 0 rgba(255,255,255,.05); --e3:0 16px 40px -10px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
--bg:#1C1D1A; --surface:#252623; --surface-2:#2D2F2B; --surface-3:#383A35; --border:#42453F; --outline:#8A9086;
--text:#ECEEE9; --text-2:#C3C8BF; --text-3:#A3A99E;
--primary:#73B5D7; --on-primary:#06293F; --primary-container:#17384F; --on-primary-container:#CDE7F6;
--link:#73B5D7; --secondary:#288DC1; --on-secondary:#08141D; --focus:#73B5D7;
--header:#2D2F2B; --on-header:#ECEEE9; --on-header-2:#C3C8BF; --bulk:#17384F; --on-bulk:#CDE7F6;
--ok-fg:#6ED49A; --ok-bg:#17301F; --ok-solid:#35B26B; --on-ok:#06210F;
--warn-fg:#F4C266; --warn-bg:#33280E; --warn-solid:#E3A33A; --on-warn:#2A1A00;
--danger-fg:#FF9088; --danger-bg:#3C1B19; --danger-solid:#F0605A; --on-danger:#2E0705;
--info-fg:#73B5D7; --info-bg:#17384F; --info-solid:#4FA3D1;
--neutral-fg:#C3C8BF; --neutral-bg:#32342F; --neutral-solid:#8A9086;
--violet-fg:#CBAAFF; --violet-bg:#2D2347; --teal-fg:#6FD6C3; --teal-bg:#143029;
--e1:none; --e2:0 -1px 0 rgba(255,255,255,.05); --e3:0 16px 40px -10px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Cabin, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
  line-height: 1.5;
}
.has-side { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
a { color: var(--primary); text-underline-offset: 3px; }
h1 { font-size: 1.5rem; font-weight:600; line-height: 1.333; margin: .4rem 0 .8rem; }
h2 { font-size: 1.25rem; line-height:1.4; margin: 0 0 .7rem; display: flex; align-items: center; gap: .45rem; }
.ic { flex: none; vertical-align: middle; }
.muted { color: var(--muted); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- Top bar and bottom nav ---- */
.topbar { background: var(--surface); color: var(--text); border-bottom:1px solid var(--border); position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top); }
.tb-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 16px; min-height: 60px; }
.brand { color: var(--text); text-decoration: none; font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; gap: .5rem; }


.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 70px; color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 600; }
.bottomnav a.on { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@media (min-width: 1024px) { .bottomnav { display: none; } }

.wrap { width:100%; min-width:0; max-width:1440px; margin:0 auto; padding:20px 16px 24px; }

/* ---- Flash ---- */
.flash { padding: .9rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; font-weight: 600; border: 2px solid; }
.flash.ok { background: var(--s-done-bg); color: var(--s-done); border-color: currentColor; }
.flash.error { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; }

/* ---- Cards, lists ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--primary); }
.list { display: grid; gap: 12px; }
@media (min-width: 1024px) { .list { grid-template-columns: 1fr 1fr; } }
.block { margin: 1.6rem 0; }
.page-head, .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1, .sec-head h2 { margin-bottom: .4rem; }
.back { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; padding: .4rem 0; font-size: 1.05rem; }
.more-link { display: inline-block; margin-top: .8rem; font-weight: 600; font-size: 1.05rem; }
.big-empty { font-size: 1rem; padding: 1rem 0; }
.group-head { margin: 1.2rem 0 .2rem; color: var(--muted); font-size: 1.05rem; letter-spacing: 0; }
.list .group-head { grid-column: 1 / -1; }
.notes { white-space: pre-line; background: var(--neutral-bg); color:var(--neutral-fg); padding: .8rem 1rem;
  border-radius: 8px; margin: .8rem 0; }
.pre { white-space: pre-line; }
ul.plain { padding-left: 1.2rem; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px;
  padding: .55rem 1.1rem; border-radius: 12px; border: 1px solid var(--outline); background: var(--surface);
  color: var(--link); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.btn.primary, .btn.ok { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.btn.tonal { background:var(--primary-container); color:var(--on-primary-container); border-color:transparent; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-danger); }
.btn.danger-ghost { border-color: var(--danger-fg); color: var(--danger-fg); }
.btn.wa { background:var(--surface); border-color:var(--ok-fg); color:var(--ok-fg); }
.btn.ghost { background:transparent; border-color:transparent; }
.btn.big { min-height: 56px; font-size: 1rem; padding: .7rem 1.4rem; }
.btn.small { min-height: 40px; padding: .3rem .7rem; font-size: .9rem; }
.btn-row, .contact-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: .8rem; }
.contact-btns .btn { flex: 1 1 auto; }

/* ---- Forms ---- */
.stack { display: grid; gap: 14px; }
label { display:grid; gap:6px; font-size:.875rem; color:var(--text-2); font-weight:600; }
label.check { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
input, select, textarea { font: inherit; font-size: 1rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--outline); border-radius: 12px; padding: .65rem .8rem; min-height: 48px; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex:none; min-height: 0; accent-color: var(--primary); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline:2px solid var(--focus); outline-offset:2px; }
.form-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr; } .span2 { grid-column: 1 / -1; } }
.two-col { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .two-col { grid-template-columns: 1fr 1fr; } }
.actions { display: flex; justify-content: flex-end; }
.actions .btn { width: 100%; }
@media (min-width: 640px) { .actions .btn { width: auto; min-width: 220px; } }
.file-pick { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; border: 3px dashed var(--border);
  border-radius: var(--radius); padding: 1rem; cursor: pointer; color: var(--primary); font-weight: 600; }
.file-pick:hover { border-color: var(--primary); }
.file-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-pick:focus-within { outline: 2px solid var(--focus); }
.fp-count { flex-basis: 100%; font-weight: 600; }
.fp-previews { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.fp-previews img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
details > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; min-height: 48px; display: flex; align-items: center; gap: .4rem; }

/* ---- Chips ---- */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: 3px 9px 3px 6px; border-radius: 999px;
  min-height:24px; font-size:.8125rem; line-height:1.125rem; font-weight:600; background: var(--s-off-bg); color: var(--s-off); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-checking { background: var(--s-check-bg); color: var(--s-check); }
.st-needed { background:var(--danger-bg); color:var(--danger-fg); }
.st-searching { background: var(--s-search-bg); color: var(--s-search); }
.st-price-to-approve { background: var(--s-approve-bg); color: var(--s-approve); }
.st-approved, .st-ordered, .st-paid { background: var(--s-go-bg); color: var(--s-go); }
.st-on-the-way { background: var(--s-way-bg); color: var(--s-way); }
.st-delivered, .st-fitted { background: var(--s-done-bg); color: var(--s-done); }
.st-on-file, .st-on-hold, .st-cancelled { background: var(--s-off-bg); color: var(--s-off); }
.wait { background: transparent; border: 1px solid var(--border); color: var(--text); }
.wait-shane { border-color: var(--s-approve); color: var(--s-approve); }
.wait-site { border-color:var(--warn-fg); color:var(--warn-fg); }
.wait-supplier { border-color:var(--neutral-fg); color:var(--neutral-fg); }
.wait-coordinator { border-color: var(--s-go); color: var(--s-go); }
.urgent { background:var(--danger-bg); color:var(--danger-fg); }
.high { background: var(--s-search-bg); color: var(--s-search); }
.spare { background: var(--s-way-bg); color: var(--s-way); }
.ms-working { background: var(--s-done-bg); color: var(--s-done); }
.ms-needs-attention { background: var(--s-search-bg); color: var(--s-search); }
.ms-down { background:var(--danger-bg); color:var(--danger-fg); }
.ms-out-of-service { background: var(--s-off-bg); color: var(--s-off); }
.open-n { background:var(--danger-bg); color:var(--danger-fg); }
.none-n { background: var(--s-done-bg); color: var(--s-done); }
.units { font-size: .85em; color: var(--muted); font-weight: 600; }

/* ---- Home tiles ---- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: .6rem 0 1rem; }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { display: flex; flex-direction: column; gap: .2rem; padding: 14px 16px; border-radius: var(--radius); text-decoration: none;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-left:1px solid var(--border); box-shadow: var(--shadow); }
.tile b { font-size: 2rem; line-height: 1; }
.tile span { font-weight: 600; }
.t-shane { border-left-color: var(--s-approve); }
.t-coord { border-left-color: var(--s-go); }
.t-site { border-left-color:var(--warn-fg); }
.t-supp { border-left-color:var(--neutral-fg); }

.approve-card { display: grid; gap: 10px; border-left:1px solid var(--border); margin-bottom: 12px; }
@media (min-width: 640px) { .approve-card { grid-template-columns: 1fr auto; align-items: center; } }
.ac-main { color: inherit; text-decoration: none; }
.ac-price { font-size: 1.25rem; font-weight: 600; margin-top: .2rem; }
.ac-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ac-actions form { flex: 1; }
.ac-actions .btn { width: 100%; }

/* ---- Part card ---- */
.part-card { border-left:1px solid var(--border); display: grid; gap: 6px; }
.part-card.pri-1 { border-left-color: var(--danger-fg); }
.part-card.pri-2 { border-left-color: var(--primary); }
.pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pc-name { font-weight: 600; font-size: 1rem; }
.pc-machine { color: var(--muted); font-weight: 600; }
.pc-numbers { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; overflow-wrap: anywhere; }
.pc-next { font-size: .98rem; }
.pc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.pc-price { font-weight: 600; }
.pc-when { color: var(--muted); font-size: .9rem; margin-left: auto; }
.row-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rc-name { font-weight: 600; font-size: 1rem; }

/* ---- Machines ---- */
.machine-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .machine-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .machine-grid { grid-template-columns: 1fr 1fr 1fr; } }
.machine-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mc-photo { aspect-ratio: 4 / 3; background: var(--s-off-bg); }
.mc-photo img, .mh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-nophoto { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  color: var(--muted); font-weight: 600; }
.mc-nophoto.big { min-height: 240px; }
.mc-body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.mc-name { font-weight: 600; font-size: 1.2rem; }
.mc-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.machine-hero { display: grid; gap: 16px; margin: .4rem 0 1rem; }
@media (min-width: 640px) { .machine-hero { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.mh-photo { border-radius: var(--radius); overflow: hidden; background: var(--s-off-bg); max-height: 460px; }
.mh-info { display: grid; gap: 12px; align-content: start; }
.mh-info h1 { margin: 0; }

.facts { display: grid; gap: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.facts > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: .7rem 1rem; border-top: 1px solid var(--border); }
.facts > div:first-child { border-top: 0; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.numbers { display: flex; flex-wrap: wrap; gap: 6px; }
.numbers span { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: .1rem .5rem; }

.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align:left; height:44px; font-size:.875rem; padding: .65rem .8rem; border-top: 1px solid var(--border); vertical-align: top; }
.tbl th { border-top:0; background:var(--surface-2); color:var(--text-2); font-size:.8125rem; font-weight:600; }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl tr:has(input:checked) { background:var(--primary-container); }

/* ---- Gallery, docs ---- */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 1rem; }
.gal-item { margin: 0; display: grid; gap: 6px; }
.gal-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--border); }
.gal-item figcaption { font-size: .9rem; font-weight: 600; }
.docs { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 8px; }
.docs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; flex-wrap: wrap; }
.docs a { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; overflow-wrap: anywhere; }
.upload-form { margin-top: .5rem; }

/* ---- Part page ---- */
.part-head h1 { margin-bottom: .5rem; }
.progress { margin: 1rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.prog-label { font-size: 1rem; margin-bottom: .6rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.steps li { height: 14px; border-radius: 4px; background: var(--s-off-bg); position: relative; }
.steps li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.steps li.done { background: var(--ok); }
.steps li.now { background: var(--primary); outline:2px solid var(--focus); outline-offset:2px; }
.steps.off li { opacity: .45; }
@media (min-width: 1024px) {
  .steps { gap: 6px; }
  .steps li { height: auto; min-height: 48px; padding: .4rem .2rem; display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: .78rem; font-weight: 600; color: var(--muted); }
  .steps li span { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .steps li.done { color:var(--on-ok); }
  .steps li.now { color:var(--on-primary); }
}
.approve-box { border: 3px solid var(--s-approve); margin: 1rem 0; }
.ab-price { font-size: 1.5rem; font-weight: 600; margin: .3rem 0; }
.sendback { margin-top: .8rem; }
.next-box { border-left: 8px solid var(--primary); margin: 1rem 0; }
.next-text { white-space: pre-line; font-size: 1rem; font-weight: 600; }
.update-box { border: 2px solid var(--primary); }
.enquiry { margin-bottom: 10px; border-left:1px solid var(--border); display: grid; gap: 4px; }
.enquiry.res-quoted, .enquiry.res-ordered { border-left-color: var(--ok); }
.enquiry.res-cannot-help, .enquiry.res-not-used { border-left-color: var(--s-off); opacity: .85; }
.enquiry.res-no-reply { border-left-color: var(--danger-fg); }
.enquiry.res-waiting { border-left-color: var(--primary); }
.eq-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.eq-name { font-weight: 600; font-size: 1rem; }
.eq-price { font-weight: 600; }
.eq-note { white-space: pre-line; }
.add-enquiry { margin-top: 12px; }
.res { background: var(--bg); border: 1px solid var(--border); color: var(--text); }

/* ---- History ---- */
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.history li { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .9rem; }
.h-meta { color: var(--muted); font-size: .9rem; font-weight: 600; }
.h-status { margin: .3rem 0; }
.h-text { white-space: pre-line; }
.h-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5rem; }
.h-files img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.h-doc { display: inline-flex; gap: .3rem; align-items: center; font-weight: 600; }

/* ---- Filters / views ---- */
.views { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--border); margin:.5rem 0 1rem; scrollbar-width:thin; }
.view-btn { flex:none; padding:10px 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-2); text-decoration:none; font-size:.875rem; font-weight:600; min-height:44px; display:inline-flex; align-items:center; gap:6px; }
.view-btn b { background: var(--bg); border-radius: 999px; padding: 0 .5rem; }
.view-btn.on { border-bottom-color:var(--primary); color:var(--link); }
.view-btn.on b { background:var(--primary-container); }
.filters { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: .6rem; }
@media (min-width: 640px) { .filters { grid-template-columns: 2fr 1.4fr auto; } }

/* ---- Suppliers ---- */
.supplier-card { display: grid; gap: 4px; }
.supplier-card.dnu { opacity: .7; }
.sc-main { color: inherit; text-decoration: none; }
.sc-name { font-weight: 600; font-size: 1rem; color: var(--primary); }
.sc-sells { font-size: .95rem; }
.creds-text { white-space: pre-wrap; font-size: 1rem; background: var(--bg); padding: 1rem; border-radius: 10px; border: 1px solid var(--border); }
.help-box { margin-top: 1.5rem; }
.menu-list { display: grid; gap: 10px; }
.menu-item { display: flex; align-items: center; gap: .8rem; font-weight: 600; font-size: 1rem; min-height: 64px; }
.menu-item.as-button { width: 100%; font: inherit; font-weight: 600; font-size: 1rem; color: var(--danger-fg); cursor: pointer; text-align: left; }
.login-page { padding-bottom:0; }
.login-page .wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.login-box { width: 100%; max-width: 440px; padding: 28px 22px; }
.login-box h1 { text-align: center; margin: .2rem 0; }
.login-logo { display:flex; justify-content:center; margin:4px 0 24px; }
.center-box { max-width: 560px; margin: 2rem auto; text-align: center; }
.err-code { font-size: 3rem; font-weight: 600; color: var(--muted); }
.danger-zone { margin-top: 2rem; border-color: var(--danger-fg); }
.danger-zone summary { color: var(--danger-fg); }

/* ---- When new vs now, specs, private ---- */
.specs { white-space: pre-line; font-size: 1.02rem; }
.compare { display: grid; gap: 16px; }
@media (min-width: 640px) { .compare { grid-template-columns: 1fr 1fr; } }
.cmp-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.cmp-col .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-bottom: 0; }
.private-box { border: 2px dashed var(--s-approve); }

/* =====================================================================================
   Added for Pembroke Site
   ===================================================================================== */

.bottomnav.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bottomnav.cols-3 { grid-template-columns: repeat(3, 1fr); }
.bottomnav.cols-4 { grid-template-columns: repeat(4, 1fr); }
.bottomnav.cols-5 { grid-template-columns: repeat(5, 1fr); }
.big-text { font-size: 1rem; }
.red { color: var(--danger-fg); font-weight: 600; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* Banners (maintenance off, clock, warnings) */
.banner { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-radius: var(--radius);
  margin: 0 0 1rem; font-weight: 600; border:1px solid transparent; font-size:.875rem; }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background:var(--danger-bg); color:var(--danger-fg); }
.banner.info { background: var(--info-bg); color: var(--info); }

/* Chips by meaning */
.chip.c-ok { background: var(--s-done-bg); color: var(--s-done); }
.chip.c-warn { background: var(--warn-bg); color: var(--warn); }
.chip.c-bad { background:var(--danger-bg); color:var(--danger-fg); }
.chip.site-warning { background:var(--danger-solid); color:var(--on-danger); }
.chip.c-info { background: var(--info-bg); color: var(--info); }
.chip.c-off { background: var(--s-off-bg); color: var(--s-off); }
.chip.big { font-size: 1.05rem; padding: .4rem .9rem; }
.chip.site-warning { white-space: normal; }

/* Photo thumbs */
.thumb { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  border-radius: 10px; background: var(--s-off-bg); color: var(--muted); border: 1px solid var(--border); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.t-s { width: 56px; height: 56px; }
.thumb.t-m { width: 96px; height: 96px; }
.thumb.t-l { width: 100%; max-width: 420px; aspect-ratio: 1; }
.thumb.t-xl { width: 100%; aspect-ratio: 4 / 3; }

/* Person chip and lists */
.person-chip { display: flex; gap: 12px; align-items: flex-start; }
.person-chip .pc-body { display: grid; gap: 3px; min-width: 0; }
.person-chip .pc-name { font-weight: 600; font-size: 1rem; text-decoration: none; overflow-wrap: anywhere; }
.person-chip.not-allowed .pc-name { color: var(--danger-fg); }
.voided .ev-name, .voided .ev-dir, tr.voided td { text-decoration: line-through; }
.not-allowed-box { border: 3px solid var(--danger); background:var(--danger-bg); color:var(--danger-fg); }
.tile .sub { font-weight: 600; color: var(--muted); }
.area-tiles { display: grid; gap: 14px; grid-template-columns: 1fr; margin: .6rem 0 1.2rem; }
@media (min-width: 640px) { .area-tiles { grid-template-columns: 1fr 1fr; } }
.area-tile { display:grid; gap:12px; }
.area-tile h2 { margin: 0; }
.area-tile .nums { display:flex; flex-direction:column; gap:0; margin:0 -16px -16px; }
.area-tile .num { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-top:1px solid var(--border); font-size:.875rem; }
.area-tile .num b { font-size:.875rem; line-height:1.25rem; font-weight:600; }
.area-tile .num span { font-weight:400; color:var(--text-2); }

/* Gate */
.onsite-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .onsite-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .onsite-grid { grid-template-columns: 1fr 1fr 1fr; } }
.onsite-card { display: flex; gap: 12px; align-items: center; }
.onsite-card .thumb { width:56px; height:56px; }
.oc-body { display: grid; gap: 2px; min-width: 0; }
.oc-name { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.counts { display: flex; flex-wrap: wrap; gap: 8px; margin: .4rem 0 1rem; }
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.events li { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: .5rem .8rem; }
.events .ev-time { font-weight: 600; font-size: 1rem; min-width: 3.2em; }
.events .ev-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.events .ev-name { font-weight: 600; overflow-wrap: anywhere; }
.ev-dir { font-weight: 600; padding: .15rem .6rem; border-radius: 8px; font-size: .95rem; }
.ev-dir.in { background: var(--s-done-bg); color: var(--s-done); }
.ev-dir.out { background: var(--warn-bg); color: var(--warn); }
.event-photos { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .event-photos { grid-template-columns: 1fr 1fr; } }
.event-photos figure { margin: 0; display: grid; gap: 6px; }
.event-photos figcaption { font-weight: 600; }
.day-nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: .4rem 0 1rem; }

/* Tables (attendance, admin) */
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl tr.total td { font-weight: 600; border-top: 2px solid var(--text); }
.tbl .flag { color: var(--danger-fg); font-weight: 600; }
.tbl tr.bad td { background: var(--s-need-bg); }
.tbl a { font-weight: 600; }
.filter-form { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 640px) { .filter-form { grid-template-columns: repeat(4, 1fr); align-items: end; } }
.filter-form .btn { width: 100%; }

/* Phones list */
.phone-card { display: grid; gap: 4px; border-left:1px solid var(--border); }
.phone-card.stale { border-left-color: var(--danger-fg); }
.phone-card .pn-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Forms */
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-row label { display: flex; align-items: center; gap: .5rem; border: 2px solid var(--border); border-radius: 12px;
  padding: .6rem .9rem; min-height: 52px; font-weight: 600; cursor: pointer; }
.radio-row input { width: 24px; height: 24px; min-height: 0; accent-color: var(--primary); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.inline-form { display: inline; }
.photo-box { display: grid; gap: 12px; justify-items: start; }

/* Holdings */
.holdings { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.holdings li { display: flex; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .8rem; font-weight: 600; flex-wrap: wrap; }
.holdings li.overdue { border-color: var(--danger-fg); color: var(--danger-fg); }

/* Credentials card */
.creds { border: 3px solid var(--ok); }

/* Dashboard and registry access controls. */
.area-slot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.area-slot > .area-tile { flex: 1; min-height: 120px; }
.area-tile { overflow-wrap: anywhere; }
.bottomnav a { min-width: 0; min-height: 48px; }
.bottomnav span { overflow-wrap: anywhere; text-align: center; }
.menu-item { min-height: 48px; }
.levels-grid { display:grid; gap:14px; grid-template-columns:1fr; }
.levels-grid label { display: grid; grid-template-columns: 1fr; gap: 8px; font-weight: 600; }
.levels-grid select { min-height: 48px; font-weight: 600; }
@media (min-width: 640px) {
  .levels-grid label { grid-template-columns: minmax(140px, 1fr) minmax(220px, 2fr); align-items: center; }
}

.brand-mark { display:block; flex:none; }
.brand-logo { display:block; height:auto; max-width:100%; }
.tnum, .tbl td.num, .tbl th.num { font-variant-numeric:tabular-nums; }

/* Shared navigation and dense office controls. */
.sidenav { display:none; }
.top-account { display:flex; align-items:center; gap:8px; min-height:48px; text-decoration:none; color:var(--text-2); font-size:.875rem; }
.top-account span { max-width:12rem; overflow:hidden; text-overflow:ellipsis; }
.sidenav .brand:focus-visible { outline-offset:-4px; }
.sidenav .brand { font-size:.9375rem; gap:10px; padding:24px 20px; min-height:80px; }
.sidenav nav { display:grid; gap:4px; padding:0 12px; }
.sidenav nav a { position:relative; display:flex; align-items:center; gap:12px; min-height:40px; padding:8px 12px; border-radius:8px; color:var(--text-2); text-decoration:none; font-size:.875rem; font-weight:500; }
.sidenav nav a span { flex:1; }
.sidenav nav a:hover { background:var(--surface-2); }
.sidenav nav a.on { background:var(--primary-container); color:var(--on-primary-container); font-weight:600; }
.sidenav nav a.on::before { content:""; position:absolute; left:-12px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--secondary); }
.sidenav .grp { font-size:.75rem; color:var(--text-3); margin:20px 12px 4px; }
.me { display:flex; gap:10px; align-items:center; margin:auto 12px 0; padding:16px 8px; min-height:72px; border-top:1px solid var(--border); color:var(--text); text-decoration:none; font-size:.875rem; }
.me small { display:block; color:var(--text-2); font-size:.75rem; }
.avatar { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:50%; background:var(--primary); color:var(--on-primary); font-weight:600; }
.bulk-bar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:12px 16px; background:var(--bulk); color:var(--on-bulk); border-radius:12px 12px 0 0; }
.bulk-bar label { color:inherit; }
.bulk-bar select, .bulk-bar .btn { background:color-mix(in srgb, currentColor 12%, transparent); border-color:color-mix(in srgb, currentColor 32%, transparent); color:inherit; }
.bulk-bar option { background:var(--surface); color:var(--text); }
.bulk-bar .btn.primary { background:var(--surface); color:var(--link); }
.btn:disabled { opacity:.5; cursor:default; }
h3 { font-size:1rem; line-height:1.5; font-weight:600; margin:.4rem 0 .6rem; }
.hint { font-size:.875rem; color:var(--text-2); font-weight:400; }
.stack > *, .form-grid > *, label > select { min-width:0; }
select { max-width:100%; text-overflow:ellipsis; }
.scroll-box { max-width:100%; overflow:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px; }
.scroll-box pre { margin:0; font-size:.8125rem; }
.chip .ic { width:16px; height:16px; }
@media (min-width:1024px) {
  .has-side { display:grid; grid-template-columns:248px minmax(0,1fr); padding-bottom:0; min-height:100vh; }
  .sidenav { display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--surface); border-right:1px solid var(--border); }
  .has-side > .topbar, .has-side > .bottomnav { display:none; }
  .has-side > .wrap { padding:28px 32px 40px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* Area panels share the same hierarchy on home. */
.home-heading { margin:0 0 24px; }
.home-heading h1 { margin:0 0 4px; }
.home-heading p { margin:0; font-size:.875rem; }
.area-tiles { gap:16px; align-items:stretch; }
.area-slot > .area-tile { height:100%; min-height:180px; }
.area-tile { min-width:0; overflow:hidden; }
.area-tile h2 { font-size:1rem; }
.area-tile h2 a { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; min-height:40px; width:100%; }
.area-tile h2 .ic { box-sizing:content-box; width:20px; height:20px; padding:8px; border-radius:12px; background:var(--primary-container); color:var(--on-primary-container); }
.area-tile .num:first-child { flex-direction:row; justify-content:flex-start; border-top:0; min-height:84px; padding-bottom:24px; }
.area-tile .num:first-child b { font-size:2rem; line-height:2.5rem; font-weight:600; }
.area-tile .num:first-child span { font-size:.875rem; }
.area-tile .nums + div { font-size:.875rem; border-top:1px solid var(--border); margin:16px -16px -16px; padding:10px 16px; color:var(--text-2); }
.area-tile .num:not(:first-child) b.red { background:var(--danger-bg); color:var(--danger-fg); padding:2px 8px; border-radius:999px; }
.home-support { display:grid; gap:16px; align-items:start; }
.home-aside { display:grid; gap:16px; min-width:0; }
.home-aside .facts { border:0; border-radius:0; margin:0 -16px; font-size:.875rem; }
.home-aside .facts > div { grid-template-columns:1fr auto; }
.home-aside .facts dd a { display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; }
.home-aside .facts dd b { background:var(--neutral-bg); color:var(--neutral-fg); padding:2px 8px; border-radius:999px; }
.home-phones { font-size:.875rem; }
.home-phones.is-stale { border-color:var(--danger-fg); }
.home-latest { min-width:0; padding:0; overflow:hidden; }
.home-latest h2 { padding:16px; margin:0; font-size:1rem; }
.home-latest .events { gap:0; }
.home-latest .events li { border:0; border-top:1px solid var(--border); border-radius:0; font-size:.875rem; flex-wrap:wrap; }
.home-latest .events .ev-time { font-size:.8125rem; color:var(--text-2); font-weight:400; }
.home-latest .events .ev-main { flex-basis:40%; }
.people-list { grid-template-columns:1fr; }
.people-list > .card { min-height:80px; }
.person-chip .thumb { width:44px; height:44px; border-radius:50%; }
.person-chip .pc-name { font-size:1rem; }
.person-chip .muted { font-size:.875rem; }
.machine-list { grid-template-columns:1fr; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
a.card.machine-card { display:flex; flex-direction:row; align-items:center; gap:12px; border:0; border-radius:0; box-shadow:none; padding:12px 16px; }
a.card.machine-card + .machine-card { border-top:1px solid var(--border); }
.machine-list .mc-photo { width:56px; height:56px; flex:none; border-radius:8px; overflow:hidden; }
.machine-list .mc-photo .mc-nophoto span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.machine-list .mc-body { padding:0; min-width:0; }
.machine-list .mc-name { font-size:1rem; }
.machine-list .mc-body > .muted { font-size:.875rem; }
.machine-list .mc-foot { margin:0; }
.record-page { min-width:0; }
.record-page .mh-photo { height:236px; }
.record-page .mh-photo img { height:236px; }
.record-page .block { margin:16px 0; }
.record-page .facts dt { font-size:.875rem; font-weight:400; }
.record-page .facts dd { font-size:1rem; font-weight:400; }
.office-form { max-width:640px; margin:16px 0; }
.office-form > button:last-child { box-shadow:var(--e2); }
.filter-form { align-items:end; }
.filter-form > label { min-width:0; }
.filter-form input, .filter-form select { width:100%; }
.events .thumb { width:40px; height:40px; }
.ev-dir { display:inline-flex; align-items:center; gap:4px; font-size:.8125rem; border-radius:999px; }
.ev-dir .ic { width:16px; height:16px; }
.ev-time { font-size:.875rem; }
@media (min-width:1024px) {
  .area-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-support { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .home-aside:only-child { grid-column:1/-1; grid-template-columns:1fr 1fr; }
  .record-page { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; align-items:start; }
  .record-page > h1, .record-page > h2, .record-page > p, .record-page > .back, .record-page > .banner, .record-page > .machine-hero, .record-page > .part-head, .record-page > .compare { grid-column:1/-1; }
  .record-page > * { min-width:0; }

}

/* Shared tabs and forms override the old area selectors until their removal. */
.logistics .views, .projects-area .views { flex-wrap:nowrap; gap:4px; }
.logistics .views a, .projects-area .views a { min-height:44px; font-size:.875rem; font-weight:600; }
.defects-area .filter-form label, .logistics .filter-form label { display:grid; gap:6px; margin:0; }
.projects-area .office-form label { display:grid; gap:6px; margin:0; }
.logistics .office-form input[type=checkbox], .projects-area .office-form input[type=checkbox] { width:20px; min-height:0; }

.office-form label.check, .projects-area .office-form label.check { display:flex; align-items:center; gap:8px; margin:0; min-height:48px; }
.tbl.admin-users { min-width:1160px; }
.tbl.admin-users th, .tbl.admin-users td { white-space:nowrap; }
.chip.open-n, .chip.none-n { background:transparent; color:var(--text-2); font-weight:400; }

.area-tile .num:not(:first-child) b.warn-text { background:var(--warn-bg); color:var(--warn-fg); padding:2px 8px; border-radius:999px; }
.area-tile .num:not(:first-child) b.violet-text { background:var(--violet-bg); color:var(--violet-fg); padding:2px 8px; border-radius:999px; }
.area-tile .num b .ic { width:16px; height:16px; }

a.card.onsite-card { display:flex; }
input, select, textarea { font-weight:400; }
.tbl td:has(.btn.small) { padding-top:2px; padding-bottom:2px; }
.tiles .tile:not(:first-child) b { font-size:1.75rem; }

.wrap > form.stack, .wrap > .form-grid { max-width:640px; }
.area-slot > .area-tile { display:flex; flex-direction:column; gap:12px; }
.area-slot > .area-tile > .nums { flex:1; }
.area-slot .num:first-child { flex:1; }
.area-slot .num:first-child { align-items:baseline; }
.home-aside .facts > div { grid-template-columns:minmax(110px,1fr) minmax(0,1.4fr); }
.home-aside .facts dd a { max-width:100%; }

.preserve { white-space:pre-wrap; overflow-wrap:anywhere; }
@media print { .has-side { display:block !important; min-height:0; } .sidenav { display:none !important; } }