:root{
  --concrete:#E6E7E4;
  --concrete-2:#F2F2EF;
  --asphalt:#10161B;
  --asphalt-70:#48535C;
  --line:#C9CBC5;
  --sea:#1F5C73;
  --sea-soft:#DCE8ED;
  --paint:#F2B705;
  --rust:#C0431F;
  --grass:#2E7D5B;
  --radius:3px;
  --shadow:0 1px 0 rgba(16,22,27,.08);
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--concrete);
  color:var(--asphalt);
  font-family:Inter,system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.num{font-family:Archivo,Inter,sans-serif;letter-spacing:-.02em;margin:0}
h1{font-size:34px;font-weight:700;line-height:1.05}
h2{font-size:22px;font-weight:600}
h3{font-size:17px;font-weight:600}
a{color:var(--sea)}
button{font:inherit}
input,select,textarea{
  font:inherit;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 10px;width:100%;
}
input:focus,select:focus,textarea:focus,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--sea);outline-offset:1px;
}
label{display:block;font-size:12px;font-weight:500;color:var(--asphalt-70);margin-bottom:4px}
.field{margin-bottom:12px}
.row{display:grid;gap:12px}
@media(min-width:680px){.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:1fr 1fr 1fr}}

/* ---------- chrome ---------- */
header.top{
  background:var(--asphalt);color:#fff;position:sticky;top:0;z-index:40;
  border-bottom:3px solid var(--paint);
}
.top .bar{max-width:1180px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand .mark{width:30px;height:30px;flex:none}
.brand b{font-family:Archivo;font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand span{display:block;font-size:11px;color:#9AA6AE;font-weight:400;letter-spacing:.01em}
nav.tabs{display:flex;gap:2px;flex-wrap:wrap}
nav.tabs button{
  background:transparent;border:0;color:#C3CCD2;padding:7px 12px;border-radius:var(--radius);
  cursor:pointer;font-size:14px;font-weight:500;
}
nav.tabs button:hover{background:#1E2830;color:#fff}
nav.tabs button[aria-current="true"]{background:var(--paint);color:var(--asphalt);font-weight:600}
.langsw{display:flex;border:1px solid #37424B;border-radius:var(--radius);overflow:hidden}
.langsw button{background:transparent;border:0;color:#C3CCD2;padding:6px 9px;cursor:pointer;font-size:12px;font-weight:600}
.langsw button[aria-pressed="true"]{background:#fff;color:var(--asphalt)}

main{max-width:1180px;margin:0 auto;padding:22px 18px 80px}
.view{display:none}
.view.on{display:block}

/* ---------- generic pieces ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel.pad{padding:18px}
.panel + .panel{margin-top:16px}
.lede{color:var(--asphalt-70);max-width:62ch;margin:8px 0 0}
.btn{
  background:var(--asphalt);color:#fff;border:1px solid var(--asphalt);border-radius:var(--radius);
  padding:10px 16px;cursor:pointer;font-weight:600;font-size:14px;
}
.btn:hover{background:#1E2830}
.btn.primary{background:var(--paint);border-color:#D9A404;color:var(--asphalt)}
.btn.primary:hover{background:#FFC512}
.btn.ghost{background:transparent;color:var(--asphalt);border-color:var(--line)}
.btn.ghost:hover{background:var(--concrete-2)}
.btn.danger{background:var(--rust);border-color:var(--rust)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 8px;border-radius:20px;border:1px solid}
.tag.free{color:var(--grass);border-color:#B6D6C7;background:#EAF4EF}
.tag.taken{color:var(--rust);border-color:#EBC4B7;background:#FAEDE9}
.tag.res{color:#8A6A00;border-color:#EBD79A;background:#FBF3DA}
.tag.off{color:var(--asphalt-70);border-color:var(--line);background:var(--concrete-2)}
.muted{color:var(--asphalt-70)}
.small{font-size:13px}
.mono-amt{font-family:Archivo;font-weight:600;font-variant-numeric:tabular-nums}
hr.rule{border:0;border-top:1px solid var(--line);margin:16px 0}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;font-size:12px;color:var(--asphalt-70);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid #EDEEEA;vertical-align:middle}
tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto}
.empty{padding:26px;text-align:center;color:var(--asphalt-70)}

/* ---------- site plan ---------- */
.planhead{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.planhead .grow{flex:1 1 260px}
.sitepick{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.sitecard{
  flex:1 1 250px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;cursor:pointer;display:block;
}
.sitecard:hover{border-color:var(--sea)}
.sitecard[aria-pressed="true"]{border-color:var(--asphalt);box-shadow:inset 3px 0 0 var(--paint)}
.sitecard b{font-family:Archivo;font-size:15px;display:block}
.sitecard em{font-style:normal;font-size:13px;color:var(--asphalt-70);display:block}
.sitecard .avail{margin-top:6px;font-size:12px;font-weight:600;color:var(--grass)}

.planbox{background:var(--asphalt);border-radius:var(--radius);padding:10px;overflow:auto}
svg.plan{display:block;width:100%;min-width:720px;height:auto}
svg.plan .spot{cursor:pointer}
svg.plan .spot rect{transition:fill .12s}
svg.plan .spot:hover rect.body{stroke:#fff;stroke-width:2}
svg.plan text{font-family:Archivo;font-weight:600;pointer-events:none}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.legend i{width:13px;height:13px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:-2px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filters .field{margin:0;min-width:150px}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(16,22,27,.5);display:none;z-index:50}
.scrim.on{display:block}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--concrete-2);
  z-index:51;transform:translateX(100%);transition:transform .2s ease;overflow-y:auto;display:flex;flex-direction:column;
}
.drawer.on{transform:none}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer .dhead{background:var(--asphalt);color:#fff;padding:16px 20px;display:flex;align-items:flex-start;gap:12px;position:sticky;top:0}
.drawer .dhead h2{color:#fff}
.drawer .dhead .sub{font-size:13px;color:#9AA6AE}
.drawer .dbody{padding:20px;flex:1}
.xclose{margin-left:auto;background:transparent;border:1px solid #37424B;color:#fff;border-radius:var(--radius);cursor:pointer;padding:4px 9px;font-size:16px;line-height:1}
.pricebox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.pricebox .line{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.pricebox .line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-size:16px}
.steps{display:flex;gap:6px;margin-bottom:16px}
.steps div{flex:1;height:4px;background:var(--line);border-radius:2px}
.steps div.on{background:var(--paint)}

/* signature */
.sigwrap{background:#fff;border:1px dashed var(--sea);border-radius:var(--radius);position:relative}
canvas#sigpad{width:100%;height:150px;display:block;touch-action:none;cursor:crosshair}
.sighint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#A8B0B5;font-size:13px;pointer-events:none}
.contractbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;max-height:240px;overflow-y:auto;font-size:13px;line-height:1.55}
.contractbox h4{margin:12px 0 4px}
.contractbox p{margin:0 0 8px}

/* ---------- kpi ---------- */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;border-left:3px solid var(--sea)}
.kpi .v{font-family:Archivo;font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .k{font-size:13px;color:var(--asphalt-70)}
.kpi.paint{border-left-color:var(--paint)}
.kpi.rust{border-left-color:var(--rust)}
.kpi.grass{border-left-color:var(--grass)}
.bars{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:8px}
.bars .b{flex:1;background:var(--sea-soft);border-top:3px solid var(--sea);position:relative;min-height:2px;border-radius:2px 2px 0 0}
.bars .b span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11px;color:var(--asphalt-70)}
.bars .b em{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:11px;font-style:normal;font-weight:600}

/* plan editor */
.planedit{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.planedit{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}#inspector{position:sticky;top:80px}}
#editPlan .spot{cursor:grab}
#editPlan .spot:active{cursor:grabbing}
#editPlan:focus{box-shadow:0 0 0 2px var(--paint)}
#editPlan .hnd,#editPlan .spot{touch-action:none}
#editPlan .bg{cursor:crosshair}
textarea{resize:vertical;line-height:1.5}

/* subtabs */
.subtabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px}
.subtabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:9px 12px;cursor:pointer;font-size:14px;color:var(--asphalt-70);font-weight:500}
.subtabs button[aria-current="true"]{color:var(--asphalt);border-bottom-color:var(--paint);font-weight:600}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(16,22,27,.5)}
.modal.on{display:flex}
.modal .box{background:#fff;border-radius:var(--radius);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:22px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--asphalt);color:#fff;
  padding:11px 18px;border-radius:var(--radius);z-index:70;font-size:14px;display:none;box-shadow:0 6px 24px rgba(16,22,27,.28);
  border-left:3px solid var(--paint);max-width:90vw;
}
.toast.on{display:block}

[hidden]{display:none !important}
/* person / company switch */
.segm{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.segm button{flex:1;background:transparent;border:0;padding:9px 10px;cursor:pointer;font-weight:500;color:var(--asphalt-70)}
.segm button.on{background:var(--asphalt);color:#fff;font-weight:600}

/* several spaces in one booking */
.multibar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:45;background:var(--asphalt);color:#fff;
  border-left:3px solid var(--paint);border-radius:var(--radius);padding:10px 14px;display:flex;gap:14px;align-items:center;
  box-shadow:0 8px 28px rgba(16,22,27,.35);max-width:92vw}
.multibar .small{color:#C3CCD2;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* role pages */
.rolefoot{max-width:1180px;margin:0 auto;padding:14px 18px 28px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--asphalt-70)}
.rolefoot .links{margin-left:auto}
.rolefoot a{color:var(--asphalt-70)}
/* staff mode: no deletions, crediting, price edits or plan/settings tools */
body.role-staff [data-condel],body.role-staff [data-custdel],body.role-staff [data-invdel],body.role-staff [data-logdel],
body.role-staff #logClear,body.role-staff [data-credit],body.role-staff [data-unpay],body.role-staff [data-rent],
body.role-staff [data-spotpr],body.role-staff [data-spotin],body.role-staff [data-spotty],body.role-staff #spotsFit{display:none !important}

/* invoice / contract print sheet */
.sheet{background:#fff;color:#000;padding:26px;font-size:13px;line-height:1.55;border:1px solid var(--line)}
.sheet h2{font-size:22px}
.sheet table{font-size:13px}
.sheet .sheethead{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--asphalt);padding-bottom:12px;margin-bottom:16px;flex-wrap:wrap}
.sheet .totals{margin-left:auto;width:min(300px,100%)}
.sheet .totals .line{display:flex;justify-content:space-between;padding:3px 0}
.sheet .totals .grand{border-top:2px solid var(--asphalt);margin-top:6px;padding-top:7px;font-weight:700;font-size:16px}
.sheet .sigline{border-top:1px solid #999;margin-top:38px;padding-top:5px;font-size:12px}
.sheet img.sig{max-height:70px;display:block}
#printArea{display:none}
@media print{
  body{background:#fff}
  header.top,main,.drawer,.scrim,.modal,.toast{display:none !important}
  #printArea{display:block}
  .sheet{border:0;padding:0}
}