/* =====================================================================
   Squinchos — White-Label Construction Management + POS + BOQ
   Design system: "SquinchOS Light"
   Palette, type and layout are white-label driven by CSS variables.
   Accent + brand are overridable at runtime from Settings.
   ===================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* Brand-controlled (overridden from Settings) */
  --accent:#E67E22;              /* Construction Amber */
  --accent-ink:#FFFFFF;          /* text on accent */
  --accent-2:#2563EB;            /* blueprint cyan/blue */

  /* Structural palette - SquinchOS Light Theme */
  --bg:#F8F9FA;                  /* Primary Canvas: Off-white / Blueprint Paper */
  --bg-grid:rgba(74,85,104,.07); /* Technical Grid */
  --surface:#FFFFFF;             /* Surface / Cards / Containers: Pure White */
  --surface-2:#F1F5F9;           /* Secondary Surface / Table Headers / Inputs */
  --surface-3:#E2E8F0;           /* Elevated Surface / Hover States / Badges */
  --border:#E2E8F0;              /* Technical Grid & Borders */
  --border-soft:#EDF2F7;         /* Soft border divider */
  --text:#121820;                /* Primary Text & Headings: Structural Graphite */
  --text-dim:#4A5568;            /* Secondary Text & Labels: Concrete Slate */
  --text-faint:#718096;          /* Unit labels, footers & faint hints */
  --good:#16A34A;                /* Success / Profit */
  --warn:#E67E22;                /* Warning / Pending */
  --bad:#DC2626;                 /* Danger / Expense */

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 10px 25px -5px rgba(18,24,32,.06),0 8px 10px -6px rgba(18,24,32,.04);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --sidebar-w:248px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  /* blueprint grid */
  background-image:
    linear-gradient(var(--bg-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
  background-size:32px 32px;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:20px}
::-webkit-scrollbar-track{background:transparent}

/* ============ App shell ============ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

.sidebar{
  background:#FFFFFF;
  border-right:1px solid var(--border);
  padding:22px 14px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),#d35400);
  display:grid;place-items:center;color:var(--accent-ink);
  font-family:var(--font-display);font-weight:700;font-size:18px;
  box-shadow:0 6px 18px -6px var(--accent);
}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.2px;line-height:1.1}
.brand-sub{font-size:10.5px;color:var(--text-faint);letter-spacing:.14em;text-transform:uppercase;margin-top:2px}

.nav-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);padding:16px 10px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  color:var(--text-dim);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .15s,color .15s;position:relative;
}
.nav-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--surface-3);color:var(--text)}
.nav-item.active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;
  background:var(--accent);border-radius:0 3px 3px 0;
}
.nav-spacer{flex:1}
.nav-foot{font-size:10.5px;color:var(--text-faint);padding:10px;border-top:1px solid var(--border-soft);margin-top:8px;line-height:1.5}

/* ============ Main ============ */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:16px;padding:16px 26px;
  border-bottom:1px solid var(--border-soft);
  position:sticky;top:0;background:rgba(248,249,250,.85);backdrop-filter:blur(10px);z-index:20;
}
.page-title{font-family:var(--font-display);font-size:19px;font-weight:600}
.page-eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:2px}
.topbar-spacer{flex:1}
.search{
  display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:10px;padding:8px 12px;min-width:220px;
}
.search input{background:none;border:none;outline:none;color:var(--text);font-size:13px;width:100%}
.search input::placeholder{color:var(--text-faint)}

.content{padding:26px;max-width:1320px;width:100%;margin:0 auto;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);padding:9px 15px;border-radius:10px;
  font-size:13px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--accent);background:var(--surface-3)}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.07);background:var(--accent)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-danger:hover{border-color:var(--bad);color:var(--bad)}

/* ============ Cards ============ */
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:18px;position:relative;overflow:hidden;
}
.card.pad-lg{padding:22px}
.kpi .kpi-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.kpi .kpi-val{font-family:var(--font-mono);font-size:26px;font-weight:700;margin-top:8px;letter-spacing:-.5px}
.kpi .kpi-val small{font-size:14px;color:var(--text-dim);font-weight:500}
.kpi .kpi-foot{font-size:11.5px;color:var(--text-faint);margin-top:6px;display:flex;align-items:center;gap:5px}
.kpi-icon{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--accent)}
.kpi-icon svg{width:17px;height:17px}
.trend-up{color:var(--good)} .trend-down{color:var(--bad)}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px}
.section-head:first-child{margin-top:0}
.section-head h2{font-family:var(--font-display);font-size:16px;font-weight:600;margin:0}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}

/* ============ Tables ============ */
.table-wrap{overflow-x:auto;border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  text-align:left;padding:12px 14px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2);
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-family:var(--font-mono)}
.mono{font-family:var(--font-mono)}
.empty{padding:44px;text-align:center;color:var(--text-faint)}
.empty svg{width:38px;height:38px;opacity:.4;margin-bottom:10px}

/* ============ Badges ============ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--surface-3);color:var(--text-dim)}
.badge.good{background:rgba(22,163,74,.12);color:var(--good)}
.badge.warn{background:rgba(230,126,34,.14);color:var(--warn)}
.badge.bad{background:rgba(220,38,38,.12);color:var(--bad)}
.badge.info{background:rgba(37,99,235,.12);color:var(--accent-2)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* progress bar */
.pbar{height:7px;border-radius:20px;background:var(--surface-3);overflow:hidden;min-width:90px}
.pbar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:20px}

/* ============ Forms / Modal ============ */
.overlay{position:fixed;inset:0;background:rgba(18,24,32,.45);backdrop-filter:blur(3px);z-index:60;
  display:grid;place-items:center;padding:22px;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);animation:pop .2s ease}
.modal.wide{max-width:860px}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:var(--surface);z-index:2}
.modal-head h3{font-family:var(--font-display);font-size:16px;margin:0}
.modal-body{padding:22px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--border-soft);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--surface)}
.x{cursor:pointer;color:var(--text-dim);width:30px;height:30px;display:grid;place-items:center;border-radius:8px}
.x:hover{background:var(--surface-2);color:var(--text)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px;color:var(--text-dim);font-weight:600;letter-spacing:.03em}
.field input,.field select,.field textarea{
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;
  color:var(--text);font-size:13.5px;outline:none;font-family:inherit;transition:border .15s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field input.mono{font-family:var(--font-mono)}
.field .hint{font-size:11px;color:var(--text-faint)}
.field textarea{resize:vertical;min-height:70px}
input[type=color]{padding:4px;height:40px;cursor:pointer}

/* ============ Tabs ============ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-soft);margin-bottom:20px;overflow-x:auto}
.tab{padding:10px 15px;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}

/* ============ BOQ specific ============ */
.boq-row-add{display:grid;grid-template-columns:1.4fr repeat(4,.8fr) auto;gap:8px;align-items:end;margin-bottom:12px}
.boq-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.stat{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;padding:15px}
.stat .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.stat .v{font-family:var(--font-mono);font-size:21px;font-weight:700;margin-top:6px}
.chip{display:inline-block;padding:3px 10px;border-radius:8px;background:var(--surface-3);font-size:11.5px;font-family:var(--font-mono);margin:3px 3px 0 0}

/* charts */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.bars .bar{flex:1;background:linear-gradient(180deg,var(--accent),rgba(230,126,34,.25));border-radius:6px 6px 0 0;position:relative;min-height:4px;transition:height .5s ease}
.bars .bar span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:10px;font-family:var(--font-mono);color:var(--text-dim)}
.bars-x{display:flex;gap:10px;margin-top:8px}
.bars-x div{flex:1;text-align:center;font-size:10.5px;color:var(--text-faint)}

/* toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface-3);border:1px solid var(--border);
  border-left:3px solid var(--accent);padding:13px 18px;border-radius:10px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow);z-index:90;animation:slide .25s ease}
@keyframes slide{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--text-dim);border:1px solid transparent}
.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-soft)}
.icon-btn svg{width:15px;height:15px}

.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter-pill{padding:7px 13px;border-radius:20px;font-size:12.5px;font-weight:600;background:var(--surface-2);
  border:1px solid var(--border-soft);color:var(--text-dim);cursor:pointer}
.filter-pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.list-line{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border-soft)}
.list-line:last-child{border:none}
.avatar{width:34px;height:34px;border-radius:9px;background:var(--surface-3);display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--accent);font-family:var(--font-display)}

/* ============ Responsive ============ */
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.boq-summary{grid-template-columns:1fr}}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:80;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(18,24,32,.35);z-index:70;display:none}
  .scrim.show{display:block}
  .menu-btn{display:grid !important}
  .form-grid{grid-template-columns:1fr}
  .boq-row-add{grid-template-columns:1fr 1fr}
  .content{padding:18px}
}
.menu-btn{display:none;width:38px;height:38px;border-radius:9px;place-items:center;background:var(--surface-2);border:1px solid var(--border-soft);cursor:pointer;color:var(--text)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}