:root{--bx-modules:1}
/* modal-body alias — .mbd has padding:20px but modal-body is missing from version CSS */
.modal-body{padding:20px}
/* form-input / form-group / form-label — aliases for .fi / .fg used in blade templates */
.form-input{width:100%;padding:9px 12px;background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);color:var(--t1);font-size:12.5px;font-family:'Inter',sans-serif;transition:var(--tr);outline:none}
.form-input:focus{border-color:var(--ind);box-shadow:0 0 0 3px var(--ind-lt)}
.form-input::placeholder{color:var(--t4)}
select.form-input{cursor:pointer}
textarea.form-input{resize:vertical;min-height:90px}
.form-group{margin-bottom:12px}
.form-group.mb0{margin-bottom:0}
.form-label{display:block;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.7px;text-transform:uppercase;margin-bottom:5px}

/* ═══════════════════════════════════════════════════════
   SHARED — Legend, Alert Strips, Tooltips
   ═══════════════════════════════════════════════════════ */
.legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 15px;background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);margin-bottom:16px;font-size:11px;color:var(--t2)}
.legend-item{display:flex;align-items:center;gap:5px}
.ldot{width:7px;height:7px;border-radius:50%}
.lsep{width:1px;height:13px;background:var(--b1)}
.mb14{margin-bottom:14px}
.mb12{margin-bottom:12px}
.mt4{margin-top:4px}
.mt1{margin-top:1px}
.mt2{margin-top:2px}
.mt3{margin-top:3px}
.f9{font-size:9px}
.f10{font-size:10px}
.f11{font-size:11px}
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.fw6{font-weight:600}
.fw7{font-weight:700}
.fw8{font-weight:800}
.t1{color:var(--t1)}
.t2{color:var(--t2)}
.t3{color:var(--t3)}
.t4{color:var(--t4)}
.mono{font-family:'JetBrains Mono',monospace}
.alert-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--rm);border:1px solid;margin-bottom:8px}

/* ═══════════════════════════════════════════════════════
   FILTER BAR — Chips, Dropdowns, View Toggle
   ═══════════════════════════════════════════════════════ */
.fbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0}
.fc{padding:4px 12px;border-radius:20px;border:1px solid var(--b1);background:transparent;font-size:11.5px;color:var(--t2);cursor:pointer;transition:var(--tr);font-family:'Inter',sans-serif}
.fc:hover{border-color:var(--ind);color:var(--ind2)}
.fc.on{background:var(--ind-lt);border-color:var(--b2);color:var(--ind2);font-weight:600}

.vtog-wrap{display:flex;gap:4px;border:1px solid var(--b2);border-radius:var(--rs);padding:2px;background:var(--s2)}
.vtog-btn2{padding:5px 10px;border-radius:5px;font-size:10px;font-weight:600;color:var(--t3);cursor:pointer;transition:var(--tr);display:flex;align-items:center;gap:5px;border:none;background:transparent}
.vtog-btn2.on{background:var(--s1);color:var(--ind2);box-shadow:var(--sh1)}

/* ═══════════════════════════════════════════════════════
   P12 INVENTORY — 8-column table + alerts + movements
   ═══════════════════════════════════════════════════════ */
body.auth-centered{display:flex;align-items:center;justify-content:center;min-height:100vh}
body.auth-centered .auth-wrap{display:block;width:100%;max-width:440px;padding:24px 16px;min-height:auto;grid-template-columns:none}
body.auth-centered .selector-wrap{margin:0 auto}
[data-page="p01"] .modal-overlay .modal{width:420px}
[data-page="p01"] .plan-card{background:var(--s2);border:2px solid var(--b1);border-radius:var(--r);padding:22px;position:relative;transition:var(--tr);cursor:pointer;text-align:left}
[data-page="p01"] .plan-card:hover{border-color:rgba(99,102,241,.4)}
[data-page="p01"] .plan-card .feat-row{display:flex;align-items:center;gap:8px;padding:6px 0;background:none;border:none;border-bottom:1px solid var(--b1);border-radius:0;margin-bottom:0;font-size:12px}
[data-page="p01"] .plan-card .feat-row:last-child{border-bottom:none}
[data-page="p01"] .plan-card .feat-row:hover{background:none;border-color:transparent;border-bottom-color:var(--b1)}
[data-page="p01"] .plan-card .feat-ico{width:16px;height:auto;text-align:center;font-size:11px;flex-shrink:0}
[data-page="p02"] .content{padding:0;overflow:hidden;display:flex;flex-direction:column}
[data-page="p06"] .content{padding:22px}
[data-page="p06"] .tl-head:hover{background:var(--s2)}
[data-page="p06"] .cat-item.inactive{opacity:0.5}
[data-page="p06"] .cat-item.inactive .cat-name{color:var(--t3)}
[data-page="p06"] .tpl-card:hover .tpl-foot{opacity:1}
[data-page="p06"] .kb-count{min-width:20px;padding:0 4px}
/* ═══════════════════════════════════════════════════════
   P12 INVENTORY — CSS matching HTML design (8-column layout)
   ═══════════════════════════════════════════════════════ */

/* Table layout — 8 columns matching HTML structure */
[data-page^="p12"] .mat-row,
[data-page^="p12"] .mat-head{
  display:grid;
  grid-template-columns:90px 1fr 90px 90px 90px 90px 80px 100px;
  gap:8px;
  padding:9px 14px;
  align-items:center;
  border-bottom:1px solid var(--b1);
}

[data-page^="p12"] .mat-head{
  background:var(--s2);
  font-size:10px;
  font-weight:700;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.4px;
  border-bottom:1px solid var(--b2) !important;
}

/* Material chips and styling */
[data-page^="p12"] .cat-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:20px;
  font-size:10px;
  font-weight:600;
}

/* Stock bar styling */
[data-page^="p12"] .stk-bar-wrap{
  height:7px;
  border-radius:4px;
  background:var(--b1);
  overflow:hidden;
  margin-top:4px;
}

[data-page^="p12"] .stk-bar-fill{
  height:100%;
  border-radius:4px;
  transition:width .4s ease;
}

/* Table row hover effect */
[data-page^="p12"] .mat-row:hover{
  background:var(--b1);
}

/* Card styling */
[data-page^="p12"] .card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:16px;
}

[data-page^="p12"] .card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 17px;
  border-bottom:1px solid var(--b1);
  background:var(--s2);
}

[data-page^="p12"] .card-title{
  font-family:'Outfit',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--t1);
  flex:1;
}

/* Empty state */
[data-page^="p12"] .empty-state{
  padding:24px;
  text-align:center;
  color:var(--t3);
}

/* Recent movements styling */
[data-page^="p12"] .mv-in{background:rgba(52,211,153,.06);border-left:2px solid var(--green);}
[data-page^="p12"] .mv-out{background:rgba(248,113,113,.06);border-left:2px solid var(--red);}
[data-page^="p12"] .mv-return{background:rgba(99,102,241,.06);border-left:2px solid var(--ind2);}
[data-page^="p12"] .mv-wastage{background:rgba(251,191,36,.06);border-left:2px solid var(--amber);}

/* Panel header styling */
[data-page^="p12"] .ph{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 17px;
  border-bottom:1px solid var(--b1);
}

[data-page^="p12"] .ph-title{
  font-family:'Outfit',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--t1);
  flex:1;
}

/* Panel base */
[data-page^="p12"] .panel{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r);
  overflow:visible;
  margin-bottom:16px;
}

[data-page^="p12"] .panel > :first-child {
  overflow:hidden;
}

/* Tooltip positioning - make sure tooltips show above/below content */
[data-page^="p12"] .tt {
  position:relative;
  z-index:auto;
}

[data-page^="p12"] .ttb {
  position:fixed !important;
  z-index:99999 !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  background:var(--s2) !important;
  border:1px solid var(--b2) !important;
  border-radius:var(--rs) !important;
  padding:8px 12px !important;
  box-shadow:var(--sh2) !important;
  font-size:11px !important;
  color:var(--t2) !important;
  max-width:280px !important;
  display:none !important;
  pointer-events:none !important;
}

/* Category colors */
[data-page^="p12"] .cat-cement{background:rgba(251,191,36,.12);color:var(--amber);}
[data-page^="p12"] .cat-steel{background:rgba(34,211,238,.10);color:var(--cyan);}
[data-page^="p12"] .cat-bricks{background:rgba(248,113,113,.10);color:var(--red);}
[data-page^="p12"] .cat-sand{background:rgba(251,191,36,.10);color:var(--amber);}
[data-page^="p12"] .cat-aggregate{background:rgba(52,211,153,.10);color:var(--green);}
[data-page^="p12"] .cat-shuttering{background:rgba(167,139,250,.10);color:var(--vio);}
[data-page^="p12"] .cat-plumbing{background:rgba(34,211,238,.10);color:var(--cyan);}
[data-page^="p12"] .cat-finishing{background:rgba(99,102,241,.12);color:var(--ind2);}
[data-page^="p12"] .cat-drainage{background:rgba(52,211,153,.10);color:var(--green);}
[data-page^="p12"] .cat-other{background:rgba(99,102,241,.08);color:var(--t2);}

/* Button style for view all links */
[data-page^="p12"] .btnghost{
  background:var(--b1);
  color:var(--t2);
  border:1px solid transparent;
}

[data-page^="p12"] .btnghost:hover{
  background:var(--b2);
  color:var(--t1);
}

/* Spill badges (status indicators) */
[data-page^="p12"] .spill{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:4px 10px !important;
  border-radius:20px !important;
  font-size:10px !important;
  font-weight:600 !important;
  border:1px solid !important;
  white-space:nowrap !important;
}

[data-page^="p12"] .spill::before{
  content:'' !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:currentColor !important;
  flex-shrink:0 !important;
}

[data-page^="p12"] .spill.ok{background:rgba(52,211,153,.15) !important;color:var(--green) !important;border-color:rgba(52,211,153,.3) !important;}
[data-page^="p12"] .spill.err{background:rgba(248,113,113,.15) !important;color:var(--red) !important;border-color:rgba(248,113,113,.3) !important;}
[data-page^="p12"] .spill.warn{background:rgba(251,191,36,.15) !important;color:var(--amber) !important;border-color:rgba(251,191,36,.3) !important;}
[data-page^="p12"] .spill.ind{background:rgba(99,102,241,.15) !important;color:var(--ind2) !important;border-color:rgba(99,102,241,.3) !important;}
[data-page^="p12"] .spill.gray{background:var(--b1) !important;color:var(--t3) !important;border-color:var(--b2) !important;}
[data-page^="p12"] .spill.cyan{background:rgba(34,211,238,.15) !important;color:var(--cyan) !important;border-color:rgba(34,211,238,.3) !important;}

/* ═══════════════════════════════════════════════════════
   P14 QC MODULE — Scoped overrides (only affect p14 pages)
   Master CSS .g2/.g3 use gap:14px; P14 uses gap:16px.
   Master .bar-fill/.bar-col/.bar-lbl/.bar-val are for
   horizontal progress bars; P14 analytics uses them for
   vertical stacked bar charts.
   Master .gauge-wrap is semicircle; P14 analytics has
   its own gauge pattern.
   ═══════════════════════════════════════════════════════ */
[data-page="p14"] .g2{gap:16px}
[data-page="p14"] .g3{gap:16px}
/* P14 analytics vertical bar chart overrides */
[data-page="p14"] .bar-chart{display:flex;align-items:flex-end;gap:6px;height:140px;border-bottom:1px solid var(--b1);padding-bottom:0;position:relative}
[data-page="p14"] .bar-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}
[data-page="p14"] .bar-fill{border-radius:3px 3px 0 0;width:100%;transition:height .5s ease;min-height:2px;position:relative;cursor:pointer;background:none}
[data-page="p14"] .bar-fill:hover{filter:brightness(1.2)}
[data-page="p14"] .bar-lbl{font-size:9px;color:var(--t3);text-align:center;margin-top:4px;white-space:nowrap}
[data-page="p14"] .bar-val{font-size:10px;font-weight:700;color:var(--t2);font-family:'JetBrains Mono',monospace}
/* P14 analytics gauge override (full circle score ring, not semicircle) */
[data-page="p14"] .gauge-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0 8px;width:auto;height:auto;overflow:visible}
[data-page="p14"] .gauge-num{font-family:'Outfit',sans-serif;font-size:32px;font-weight:800;line-height:1}
[data-page="p14"] .gauge-lbl{font-size:10px;color:var(--t3);margin-top:4px}
/* P14 dtab override: P14 uses different padding than master .dtab */
[data-page="p14"] .dtab{padding:10px 14px;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:var(--tr);white-space:nowrap}
[data-page="p14"] .dtab:hover{color:var(--t2)}
[data-page="p14"] .dtab.on{color:var(--ind2);border-bottom-color:var(--ind)}

/* ═══════════════════════════════════════════════════════
   P16 Equipment Module — Scoped overrides
   Master .dtab has padding:9px 18px; P16 uses 10px 14px.
   Master .mini-stat .v has font-size:22px; P16 uses 24px.
   ═══════════════════════════════════════════════════════ */
[data-page="p16"] .dtab{padding:10px 14px;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:var(--tr)}
[data-page="p16"] .dtab:hover{color:var(--t2)}
[data-page="p16"] .dtab.on{color:var(--ind2);border-bottom-color:var(--ind)}
[data-page="p16"] .mini-stat .v{font-size:24px}

/* ═══════════════════════════════════════════════════════
   SESSION 3 SHARED CLASSES (P15–P28, unscoped)
   Each class confirmed in 3+ Session 3 HTML files with
   identical or near-identical CSS values.
   ═══════════════════════════════════════════════════════ */

/* ── Detail Panel (dpanel) — used in P18, P19, P20, P21, P28 ── */
/* Canonical width 540px; individual pages vary 480–560px via inline override */
.dpanel{position:fixed;top:0;right:-540px;width:540px;height:100vh;background:var(--s1);border-left:1px solid var(--b2);z-index:600;display:flex;flex-direction:column;transition:right .25s cubic-bezier(.4,0,.2,1);box-shadow:var(--sh2)}
.dpanel.open{right:0}
.dp-overlay{display:none;position:fixed;inset:0;z-index:599;background:rgba(0,0,0,.4)}
.dp-overlay.open{display:block}
.dp-hd{padding:16px 20px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;flex-shrink:0}
.dp-body{flex:1;overflow-y:auto}

/* ── AI/ML indicator — used across all P22 pages + P28 ── */
.ai-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:10px;font-weight:700}
.progress-pulse{animation:pulse 1.5s ease-in-out infinite}

/* ── Report tab system — used in P23, P27, P28 ── */
.report-tab{padding:8px 16px;font-size:11px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;color:var(--t3);white-space:nowrap;transition:var(--tr)}
.report-tab.on{color:var(--ind2);border-bottom-color:var(--ind)}
.tab-content{display:none}
.tab-content.on{display:block}

/* ── Mobile bottom nav — used across all P25 pages ── */
.bnav{position:fixed;bottom:0;left:0;right:0;background:var(--s1);border-top:1px solid var(--b1);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom)}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px 8px;cursor:pointer;color:var(--t3);font-size:9px;font-weight:600;gap:4px;text-decoration:none;transition:color .15s}
.bnav-item.on{color:var(--ind2)}
.bnav-badge{position:absolute;top:4px;right:calc(50% - 14px);background:var(--red);color:#fff;font-size:8px;font-weight:700;min-width:14px;height:14px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.mob-topbar{background:var(--s1);padding:10px 16px 12px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px}
[data-page="p14-01"] .spark { height: 28px; }
[data-page="p14-01"] .spark-bar { width: 4px; }
/* P05 DPR Submit — issue-row grid (missing from buildx-pro.css) */
.issue-row{display:grid;grid-template-columns:130px 1fr 36px;gap:6px;align-items:center;padding:4px 0}
/* P04 Project Overview — hero-grid and hero-stat differ from master (master uses 4-equal cols + border treatment; overview page uses 3+200px cols, gap, no border) */
[data-page="p04"] .hero-grid{grid-template-columns:1fr 1fr 1fr 200px;gap:20px;align-items:start;border:none;border-radius:0;overflow:visible;margin-top:16px}
[data-page="p04"] .hero-stat{padding:0;border-right:none;display:flex;flex-direction:column;gap:3px}
/* P04 phase-row: overview uses cursor:default + gap:0, master has cursor:pointer + gap:12px */
[data-page="p04"] .phase-row{cursor:default;gap:0}

/* ═══════════════════════════════════════════════════════
   P27 Integration Marketplace — Scoped overrides
   Master .int-card is for notification channels (vertical layout);
   P27 marketplace uses .int-card as grid cards with different sizing.
   Master .int-logo is 38x38px for channel cards;
   P27 uses 44x44px for marketplace integration icons.
   ═══════════════════════════════════════════════════════ */
[data-page="p27-01"] .int-card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--rm);padding:16px;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:10px;margin-bottom:0;overflow:visible}
[data-page="p27-01"] .int-card:hover{border-color:var(--ind);box-shadow:0 2px 14px rgba(0,0,0,.2)}
[data-page="p27-01"] .int-logo{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   COMPANY MASTERS — Custom Categories (P02-02)
   Tab navigation + card layout for material/vendor categories
   ═══════════════════════════════════════════════════════ */
[data-page="company-masters"] .tab-btn{padding:11px 18px;font-size:12.5px;font-weight:600;border:none;border-bottom:2px solid transparent;color:var(--t3);background:none;cursor:pointer;transition:all .15s}
[data-page="company-masters"] .tab-btn.on{border-bottom-color:var(--ind);color:var(--ind2)}
[data-page="company-masters"] .tab-btn:hover{color:var(--t1)}
[data-page="company-masters"] .inp{background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);color:var(--t1);padding:8px 12px;font-size:13px;font-family:'Inter',sans-serif;transition:border-color .15s,box-shadow .15s}
[data-page="company-masters"] .inp:focus{outline:none;border-color:var(--ind);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
[data-page="company-masters"] .inp::placeholder{color:var(--t3)}
[data-page="company-masters"] .card-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--b1)}
[data-page="company-masters"] .err{color:var(--red)}
[data-page="company-masters"] .hide{display:none !important}
[data-page="company-masters"] .spill{display:inline-block;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600}
[data-page="company-masters"] .spill.ok{background:rgba(52,211,153,.15);color:var(--green)}
[data-page="company-masters"] .spill.err{background:rgba(248,113,113,.15);color:var(--red)}

/* ═══════════════════════════════════════════════════════
   USER PROFILE MENU — Fixed dropdown above sidebar footer
   Works with topbar + sidebar avatars, breaks out of overflow
   ═══════════════════════════════════════════════════════ */
.sb-user-menu{
  display:none;
  position:fixed;
  bottom:12px;
  left:12px;
  width:calc(var(--sb-w) - 24px);
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:var(--rm);
  box-shadow:var(--sh2);
  z-index:900;
  overflow-y:auto;
  max-height:300px;
}
.sb-user-menu.open{display:block}

/* Menu item styling — ensure flex layout for icons + text */
.sb-user-menu .sb-menu-item{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:8px 14px !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:var(--t2) !important;
  cursor:pointer !important;
  text-decoration:none !important;
  transition:var(--tr) !important;
}
.sb-user-menu .sb-menu-item:hover{
  background:var(--b1) !important;
  color:var(--t1) !important;
}
.sb-user-menu .sb-mico{
  width:14px !important;
  color:var(--t3) !important;
  font-size:12px !important;
  flex-shrink:0 !important;
}

/* Logout button */
.sb-logout-btn{
  color:var(--red) !important;
  width:100% !important;
  background:none !important;
  border:none !important;
  text-align:left !important;
  font-family:'Inter',sans-serif !important;
  padding:8px 14px !important;
}
.sb-logout-btn .sb-mico{
  color:var(--red) !important;
}