/* ═══════════════════════════════════════════════════════════════════════
   BUILDX PRO — MASTER CSS v2.0
   Construction & Real Estate SaaS Platform
   ─────────────────────────────────────────
   Design System: BuildX Pro (Indigo + Cyan + Violet)
   Fonts: Outfit (headings) · Inter (body) · JetBrains Mono (amounts/codes)
   Theme: Dark default ↔ Light via data-theme="light" on <html>
   
   USAGE: <link href="buildx-pro.css" rel="stylesheet">
   Pages should ONLY add their own page-specific CSS in <style> tags.
   DO NOT copy this file's content into individual pages.
   ═══════════════════════════════════════════════════════════════════════

   §BASE   Core variables, reset, layout, sidebar, topbar
   §EXTRA  Supplementary: project pills, activity rows, cards
   §MODAL  Modal overlay system
   §CONFIRM Confirm/Reject with remarks
   §AUDIT  Audit log components
   §TOOLTIP Tooltip system
   §MISC   Common patterns: upload zone, int-card, settings nav
   ════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BUILDX PRO — DESIGN SYSTEM
   Fonts : Outfit (headings/brand) · Inter (body) · JetBrains Mono (numbers)
   Accent: Indigo + Cyan + Violet
   Theme : Dark default ↔ Light via data-theme="light" on <html>
   ═══════════════════════════════════════════════════════════ */

/* §1 VARIABLES */
:root {
  /* Indigo-based color palette */
  --bg:   #0a0b14;
  --bg2:  #0e1020;
  --s1:   #12152a;
  --s2:   #171b33;
  --s3:   #1d2240;
  --s4:   #232850;

  /* Primary accent: Indigo */
  --ind:      #6366f1;
  --ind2:     #818cf8;
  --ind3:     #4f46e5;
  --ind-lt:   rgba(99,102,241,0.12);
  --ind-glow: rgba(99,102,241,0.22);

  /* Secondary accent: Cyan */
  --cyan:     #22d3ee;
  --cyan2:    #67e8f9;
  --cyan3:    #0891b2;
  --cyan-lt:  rgba(34,211,238,0.10);

  /* Tertiary: Violet */
  --vio:      #a78bfa;
  --vio2:     #c4b5fd;
  --vio3:     #7c3aed;
  --vio-lt:   rgba(167,139,250,0.10);

  /* Borders */
  --b1: rgba(99,102,241,0.10);
  --b2: rgba(99,102,241,0.20);
  --b3: rgba(99,102,241,0.35);

  /* Text */
  --t1: #f1f5fd;
  --t2: #94a3c8;
  --t3: #546080;
  --t4: #2e3555;

  /* Semantic */
  --green: #34d399; --glt: rgba(52,211,153,0.10); --gbr: rgba(52,211,153,0.28);
  --red:   #f87171; --rlt: rgba(248,113,113,0.10); --rbr: rgba(248,113,113,0.28);
  --amber: #fbbf24; --alt: rgba(251,191,36,0.10);  --abr: rgba(251,191,36,0.28);
  --blue:  #60a5fa; --blt: rgba(96,165,250,0.10);  --bbr: rgba(96,165,250,0.28);

  /* Shadows */
  --sh1: 0 2px 12px rgba(0,0,0,0.40);
  --sh2: 0 8px 32px  rgba(0,0,0,0.55);
  --sh3: 0 20px 60px rgba(0,0,0,0.70);

  /* Glow effects — HRMS signature */
  --glow-ind: 0 0 20px rgba(99,102,241,0.25), 0 0 60px rgba(99,102,241,0.08);
  --glow-cyn: 0 0 20px rgba(34,211,238,0.20);

  /* Radii */
  --r:  12px;
  --rm: 8px;
  --rs: 5px;

  /* Sidebar */
  --sb-w:   248px;
  --sb-bg:  #09090f;
  --top-h:  58px;

  /* Transition */
  --tr: all .18s ease;
}

/* §1b LIGHT THEME */
[data-theme="light"] {
  --bg:  #f0f2ff;
  --bg2: #e8eafe;
  --s1:  #ffffff;
  --s2:  #f4f5ff;
  --s3:  #eceeff;
  --s4:  #e4e6fd;

  --ind:    #4f46e5;  --ind2: #3730a3;  --ind3: #6366f1;
  --ind-lt: rgba(79,70,229,0.08);  --ind-glow: rgba(79,70,229,0.15);

  --b1: rgba(79,70,229,0.08);
  --b2: rgba(79,70,229,0.16);
  --b3: rgba(79,70,229,0.30);

  --t1: #0f1035;  --t2: #3d4470;  --t3: #6b74a8;  --t4: #b0b8d8;

  --green: #059669; --glt:rgba(5,150,105,0.08);  --gbr:rgba(5,150,105,0.25);
  --red:   #dc2626; --rlt:rgba(220,38,38,0.08);  --rbr:rgba(220,38,38,0.25);
  --amber: #d97706; --alt:rgba(217,119,6,0.08);  --abr:rgba(217,119,6,0.25);
  --blue:  #2563eb; --blt:rgba(37,99,235,0.08);  --bbr:rgba(37,99,235,0.25);

  --sh1: 0 2px 8px rgba(0,0,0,0.08);
  --sh2: 0 8px 28px rgba(0,0,0,0.12);
  --glow-ind: 0 0 15px rgba(79,70,229,0.15);

  --sb-bg: #fafafe;
}

/* §2 RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--t1);
  font-size:13.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
h1,h2,h3,h4,.head{font-family:'Outfit',sans-serif}
.mono,code{font-family:'JetBrains Mono',monospace}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}

/* §3 AMBIENT BACKGROUND — HRMS signature orbs */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 40% 30% at 15% 20%, rgba(99,102,241,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 85% 75%, rgba(34,211,238,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 25% 20% at 50% 50%, rgba(167,139,250,0.03) 0%, transparent 50%);
}

/* §4 APP SHELL */
.app{display:flex;height:100vh;overflow:hidden;position:relative;z-index:1}
.sidebar{
  width:var(--sb-w);background:var(--sb-bg);
  border-right:1px solid var(--b1);
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;overflow-x:hidden;
  flex-shrink:0;
}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  min-height:var(--top-h);
  background:rgba(18,21,42,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--b1);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 20px;flex-shrink:0;
  position:relative;z-index:50;
}
[data-theme="light"] .topbar{background:rgba(255,255,255,0.88)}
.content{flex:1;overflow-y:auto;padding:22px}

/* §5 SIDEBAR */
.sb-brand{
  display:flex;align-items:center;gap:11px;
  padding:18px 16px 14px;
  border-bottom:1px solid var(--b1);
}
.sb-logo{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--ind),var(--vio));
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
  box-shadow:0 3px 14px var(--ind-glow);
}
.sb-name{font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;color:var(--t1)}
.sb-tag{font-size:8.5px;font-weight:600;color:var(--ind2);letter-spacing:2px;text-transform:uppercase;margin-top:1px}

.sb-sec{padding:14px 12px 2px}
.sb-sec-lbl{font-size:9px;font-weight:700;color:var(--t4);letter-spacing:2px;text-transform:uppercase;padding:0 6px;display:block;margin-bottom:2px}
.sb-tree{position:relative}
.sb-tree::before{content:'';position:absolute;left:9px;top:2px;bottom:10px;width:1.5px;background:var(--b3)}
.sb-sub-lbl{font-size:8px;font-weight:700;color:var(--t4);opacity:.6;letter-spacing:1.5px;text-transform:uppercase;padding:0 6px 0 22px;display:block;margin:12px 0 3px;position:relative}
.sb-sub-lbl::before{content:'';position:absolute;left:9px;top:50%;width:6px;height:1px;background:var(--b2)}

.nb{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px 8px 14px;
  margin:1px 8px;border-radius:var(--rs);
  cursor:pointer;transition:var(--tr);
  text-decoration:none;position:relative;
}
.nb:hover{background:var(--b1)}
.nb.active{
  background:var(--ind-lt);
  border:1px solid var(--b2);
}
.nb.active .nb-ico{color:var(--ind2)}
.nb.active .nb-lbl{color:var(--t1);font-weight:600}
/* Active left border accent — HRMS signature */
.nb.active::before{
  content:'';position:absolute;left:-2px;top:20%;
  width:3px;height:60%;
  background:linear-gradient(180deg,var(--ind),var(--cyan));
  border-radius:2px;
}
.nb-ico{width:16px;text-align:center;font-size:12px;color:var(--t3);flex-shrink:0}
.nb-lbl{font-size:12.5px;color:var(--t2);flex:1}
.nb-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--red);color:#fff}
.nb-badge.cyan{background:var(--cyan);color:#000}
.nb-badge.ind{background:var(--ind);color:#fff}

.sb-foot{margin-top:auto;padding:10px 12px;border-top:1px solid var(--b1)}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--rs);background:var(--b1);cursor:pointer;transition:var(--tr)}
.sb-user:hover{background:var(--b2)}

/* Avatar — HRMS style: gradient ring */
.ava{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--ind),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.ava-lg{
  width:36px;height:36px;font-size:13px;
  box-shadow:0 0 0 2px var(--ind-lt), 0 0 0 4px var(--s1);
}
.sb-uname{font-size:11.5px;font-weight:600;color:var(--t1)}
.sb-urole{font-size:10px;color:var(--t3)}

/* §6 TOPBAR */
.pg-title{font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;color:var(--t1)}
.pg-sub{font-size:11px;color:var(--t3);margin-left:4px}
.tb-space{flex:1 1 auto;min-width:0}
.tb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.tb-search{
  display:flex;align-items:center;gap:7px;
  background:var(--s2);border:1px solid var(--b1);
  border-radius:var(--rm);padding:0 11px;
  height:33px;width:200px;transition:var(--tr);
}
.tb-search:focus-within{border-color:var(--ind);box-shadow:0 0 0 3px var(--ind-lt)}
.tb-search input{background:none;border:none;outline:none;color:var(--t1);font-size:12.5px;flex:1;font-family:'Inter',sans-serif}
.tb-search input::placeholder{color:var(--t4)}

.tb-ico{
  width:33px;height:33px;border-radius:var(--rm);
  border:1px solid var(--b1);background:var(--s2);
  color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:var(--tr);position:relative;
}
.tb-ico:hover{border-color:var(--ind);color:var(--ind2);background:var(--ind-lt)}
.notif-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}

.proj-pill{
  display:flex;align-items:center;gap:7px;
  padding:5px 12px;background:var(--s2);
  border:1px solid var(--b1);border-radius:20px;
  cursor:pointer;transition:var(--tr);flex-shrink:0;
}
.proj-pill:hover{border-color:var(--ind)}
.proj-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.proj-name{font-size:11.5px;font-weight:600;color:var(--t1);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-lbl{font-size:9px;color:var(--t3)}

/* §7 BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:var(--rm);font-size:12.5px;font-weight:600;cursor:pointer;border:none;font-family:'Inter',sans-serif;transition:var(--tr);white-space:nowrap}
/* HRMS primary: indigo gradient */
.btnprime{
  background:linear-gradient(135deg,var(--ind),var(--vio3));
  color:#fff;
  box-shadow:0 3px 12px var(--ind-glow);
}
.btnprime:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:var(--glow-ind)}
.btnout{background:transparent;color:var(--t2);border:1px solid var(--b2)}
.btnout:hover{border-color:var(--ind);color:var(--ind2);background:var(--ind-lt)}
.btnghost{background:var(--b1);color:var(--t2);border:1px solid transparent}
.btnghost:hover{background:var(--b2);color:var(--t1)}
.btncyan{background:var(--cyan-lt);color:var(--cyan);border:1px solid rgba(34,211,238,0.25)}
.btncyan:hover{background:var(--cyan);color:#000}
.btnsm{padding:4px 11px;font-size:11.5px}
.btnxs{padding:2px 8px;font-size:10.5px;border-radius:4px}

/* §8 SPILL BADGES */
/* .pill — generic chip base (company/masters.blade.php renders these fully
   inline-styled for color, but had no layout/shape rule at all anywhere). */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:600}
.spill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600;border:1px solid transparent}
.spill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.spill.ok    {background:var(--glt);color:var(--green);border-color:var(--gbr)}
.spill.err   {background:var(--rlt);color:var(--red);border-color:var(--rbr)}
.spill.warn  {background:var(--alt);color:var(--amber);border-color:var(--abr)}
.spill.info  {background:var(--blt);color:var(--blue);border-color:var(--bbr)}
.spill.ind   {background:var(--ind-lt);color:var(--ind2);border-color:var(--b2)}
.spill.cyan  {background:var(--cyan-lt);color:var(--cyan);border-color:rgba(34,211,238,0.25)}
.spill.vio   {background:var(--vio-lt);color:var(--vio);border-color:rgba(167,139,250,0.25)}
.spill.gray  {background:var(--b1);color:var(--t3);border-color:var(--b1)}

/* §9 KPI CARDS — HRMS style: glass + top accent line */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:16px 16px 13px;
  position:relative;overflow:hidden;
  transition:var(--tr);cursor:default;
}
/* Top accent line — HRMS signature */
.kpi::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--kpi-c1,var(--ind)),var(--kpi-c2,var(--cyan)));
}
/* Ambient glow */
.kpi::after{
  content:'';position:absolute;
  top:-15px;right:-15px;width:80px;height:80px;
  border-radius:50%;filter:blur(28px);opacity:.12;
  background:var(--kpi-c1,var(--ind));
}
.kpi:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:var(--sh1)}

.kpi.ind  {--kpi-c1:var(--ind);  --kpi-c2:var(--cyan)}
.kpi.cyan {--kpi-c1:var(--cyan); --kpi-c2:var(--vio)}
.kpi.green{--kpi-c1:var(--green);--kpi-c2:var(--cyan);--kpi-c3:var(--green)}
.kpi.red  {--kpi-c1:var(--red);  --kpi-c2:var(--amber)}
.kpi.amber{--kpi-c1:var(--amber);--kpi-c2:var(--red)}
.kpi.vio  {--kpi-c1:var(--vio);  --kpi-c2:var(--ind)}

.kpi-ico{width:34px;height:34px;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:11px}
.kpi.ind   .kpi-ico{background:var(--ind-lt);color:var(--ind2)}
.kpi.cyan  .kpi-ico{background:var(--cyan-lt);color:var(--cyan)}
.kpi.green .kpi-ico{background:var(--glt);color:var(--green)}
.kpi.red   .kpi-ico{background:var(--rlt);color:var(--red)}
.kpi.amber .kpi-ico{background:var(--alt);color:var(--amber)}
.kpi.vio   .kpi-ico{background:var(--vio-lt);color:var(--vio)}

.kpi-val{font-family:'Outfit',sans-serif;font-size:28px;font-weight:700;line-height:1;margin-bottom:3px}
.kpi-lbl{font-size:11px;color:var(--t3);margin-bottom:8px}
.kpi-trend{font-size:10.5px;font-weight:600;display:flex;align-items:center;gap:3px}
.kpi-trend.up{color:var(--green)}.kpi-trend.down{color:var(--red)}.kpi-trend.flat{color:var(--t3)}
/* .kpi-trend only defined up/down/flat — several pages (P24 announcements/notifications,
   P27 marketplace) use a "warn" modifier for attention-needed trends, which rendered with
   no color at all. */
.kpi-trend.warn{color:var(--amber)}

/* §10 PANEL + TABLE */
.panel{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.ph{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--b1)}
.ph-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--t1);flex:1}
/* .ph-sub: panel-header subtitle line. Used across P14/P15/P16 blades, almost always
   with an inline style repeating these exact values — added here as the real base rule
   so pages that omit the inline style (e.g. p14 dashboard "Requires immediate attention")
   still render with the intended muted subtitle look instead of falling back to defaults. */
.ph-sub{font-size:10.5px;color:var(--t3);margin-top:2px}
.ph-act{font-size:11.5px;color:var(--ind2);cursor:pointer}
.ph-act:hover{text-decoration:underline}
.fbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 17px;border-bottom:1px solid var(--b1);background:var(--s2)}
.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}
.fbar-space{flex:1}

.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;padding:9px 14px;text-align:left;border-bottom:1px solid var(--b1);white-space:nowrap}
.tbl td{padding:10px 14px;font-size:12.5px;color:var(--t2);border-bottom:1px solid var(--b1);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s;cursor:pointer}
.tbl tbody tr:hover{background:var(--b1)}
/* HRMS: row left accent on hover */
.tbl tbody tr:hover td:first-child{border-left:2px solid var(--ind)}
.tname{font-weight:600;color:var(--t1);font-size:12.5px}
.tsub{font-size:10.5px;color:var(--t3);margin-top:1px}
.tamt{font-family:'JetBrains Mono',monospace;font-size:12px}

.tava{width:30px;height:30px;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0}

/* §11 VIEW TOGGLE */
.vtog{display:flex;gap:2px;background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);padding:2px}
.vtog-btn{width:28px;height:26px;border-radius:4px;border:none;background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:var(--tr)}
.vtog-btn.on{background:var(--s1);color:var(--ind2);box-shadow:var(--sh1)}

/* §12 LEGEND BAR */
.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)}

/* §13 PROGRESS BARS */
.pbar{height:4px;background:var(--b1);border-radius:4px;overflow:hidden}
.pfill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ind),var(--cyan));transition:width .6s ease}
.pfill.green{background:linear-gradient(90deg,var(--green),#34d399)}
.pfill.red  {background:linear-gradient(90deg,var(--red),#f87171)}
.pfill.vio  {background:linear-gradient(90deg,var(--vio),var(--ind))}
.mbar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.mbar-lbl{font-size:11.5px;color:var(--t3);width:120px;flex-shrink:0}
.mbar-track{flex:1}
.mbar-val{font-size:11.5px;font-weight:700;width:38px;text-align:right;font-family:'JetBrains Mono',monospace}

/* §14 INFO GRID */
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--b1);border-radius:var(--rm);overflow:hidden}
.irow{display:flex;flex-direction:column;padding:10px 13px;border-bottom:1px solid var(--b1);border-right:1px solid var(--b1)}
.irow:nth-child(even){border-right:none}
.irow:last-child,.irow:nth-last-child(2){border-bottom:none}
.ikey{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px}
.ival{font-size:12.5px;color:var(--t1);font-weight:500}
/* .ival had no severity color modifiers — P24 notifications KPI drill-down and P27
   marketplace drill-downs use .ival ok/.ival warn/.ival err for colored values. */
.ival.ok{color:var(--green)}
.ival.warn{color:var(--amber)}
.ival.err{color:var(--red)}

/* Bare .ok/.warn/.err text-color utilities (like .t1-.t4) — only compound
   variants (.spill.ok, .ttv.ok, .nb-badge.ok, etc.) existed; buildx-modules.css
   had .err scoped ONLY to [data-page="company-masters"], so every other page
   using bare class="... ok/warn/err ..." (P24 alerts-config/announcements,
   P26 payment-methods/subscription, P27 api-webhooks/gst-portal, and others)
   rendered with no color at all. Lower specificity than the compound rules
   above, so it never overrides them — it only fills the gap where those don't
   apply. */
.ok{color:var(--green)}
.warn{color:var(--amber)}
.err{color:var(--red)}

/* §15 TOOLTIP SYSTEM — same structure, indigo theme
   NOTE: default show/position is pure CSS (:hover), matching buildx-v1.css's
   working implementation. Pages that need viewport-aware auto-flip (e.g.
   stock-dashboard.blade.php) may layer their own mouseenter/mouseleave JS on
   top — that JS sets position:fixed + inline !important top/left, which wins
   over these defaults regardless. Pages WITHOUT such JS (e.g. material-receipt,
   stock-register, stock-transfer) previously had zero working tooltips because
   this file only had a comment claiming "JS handles it" with no rule and no
   such JS existing — fixed to actually render via CSS like v1.css does. */
.tt{position:relative}
.tt .ttb{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#0a0b14;border:1px solid rgba(99,102,241,0.25);border-radius:var(--r);min-width:190px;max-width:320px;z-index:99999;box-shadow:var(--sh2);overflow:visible;pointer-events:none;transition:none}
.tt .ttb::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#0a0b14;border-bottom:none}
/* Direct-child combinator, not descendant — a .tt containing another nested
   .tt (e.g. a row-level tooltip wrapping per-button tooltips) must only
   reveal its OWN .ttb on hover, not cascade into nested .tt's .ttb too. The
   JS tooltip engine (buildx-shared.js §11) already assumes this — its
   getTTB() only ever looks at direct children — so the old descendant
   selector let a nested tooltip pop into view (position:absolute, never
   handed off to the JS engine's position:fixed placement) any time its
   outer .tt ancestor was hovered, even with the cursor nowhere near it. */
.tt:hover>.ttb{display:block}
.tt.tt-r .ttb{left:auto;right:0;transform:none}
.tt.tt-r .ttb::after{left:auto;right:14px;transform:none}
.tt.tt-l .ttb{left:0;transform:none}
.tt.tt-l .ttb::after{left:14px;transform:none}
.tt.tt-b .ttb{bottom:auto;top:calc(100% + 10px)}
.tt.tt-b .ttb::after{bottom:auto;top:-7px;border-top-color:transparent;border-bottom:7px solid #0a0b14;border-top:none}
.tth{font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ind2);padding:7px 11px 5px;border-bottom:1px solid rgba(99,102,241,0.15)}
.ttr{display:flex;border-bottom:1px solid rgba(255,255,255,0.04)}
.ttr:last-child{border-bottom:none}
.ttk{font-size:9px;color:rgba(255,255,255,0.32);padding:5px 8px 5px 11px;min-width:68px;flex-shrink:0;line-height:1.4}
.ttv{font-size:11px;color:rgba(255,255,255,0.82);padding:5px 11px 5px 0;flex:1;line-height:1.4}
.ttv.ok{color:#34d399;font-weight:600}
.ttv.err{color:#f87171;font-weight:600}
.ttv.warn{color:#fbbf24;font-weight:600}
.ttv.dim{color:rgba(255,255,255,0.28)}
.ttv.mono{font-family:'JetBrains Mono',monospace;font-size:10px}
.ttnote{padding:5px 11px 7px;font-size:9.5px;color:rgba(255,255,255,0.25);border-top:1px solid rgba(255,255,255,0.05);font-style:italic}
.ttp{padding:7px 11px 8px;font-size:11px;color:rgba(255,255,255,0.78);line-height:1.5}

/* §16 MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(5,6,16,.82);backdrop-filter:blur(8px);z-index:800;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--s1);border:1px solid var(--b2);border-radius:calc(var(--r) + 2px);padding:24px;width:500px;max-width:95vw;max-height:90vh;overflow-y:auto;animation:mIn .25s cubic-bezier(.34,1.2,.64,1);box-shadow:var(--sh3)}
.modal-lg{width:700px}
@keyframes mIn{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mtitle{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--t1)}
.mclose{width:28px;height:28px;border-radius:var(--rs);background:var(--s2);border:1px solid var(--b1);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
.mclose:hover{color:var(--t1);background:var(--b2)}
.mfoot{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--b1)}

/* §17 TOAST */
.toast-wrap{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:#0a0b14;border:1px solid rgba(99,102,241,0.22);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:9px;min-width:265px;max-width:340px;box-shadow:var(--sh2),var(--glow-ind);pointer-events:auto;animation:tIn .28s ease}
@keyframes tIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
.t-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.toast.ok   .t-ico{background:var(--glt);color:var(--green)}
.toast.warn .t-ico{background:var(--alt);color:var(--amber)}
.toast.err  .t-ico{background:var(--rlt);color:var(--red)}
.toast.info .t-ico{background:var(--ind-lt);color:var(--ind2)}
.t-title{font-size:12.5px;font-weight:600;color:var(--t1)}
.t-msg{font-size:10.5px;color:var(--t3)}

/* §18 UNDO BAR */
.undo-bar{display:none;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--s3);border:1px solid var(--b2);border-radius:30px;padding:11px 20px;align-items:center;gap:14px;box-shadow:var(--sh2),var(--glow-ind);z-index:600;animation:slUp .28s ease;min-width:320px}
.undo-bar.show{display:flex}
@keyframes slUp{from{transform:translateX(-50%) translateY(18px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.undo-msg{font-size:12.5px;color:var(--t1);flex:1}
.undo-timer{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--amber);font-weight:700}
.undo-btn{padding:5px 13px;border-radius:var(--rs);background:var(--ind-lt);border:1px solid var(--b2);color:var(--ind2);font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
.undo-btn:hover{background:var(--ind);color:#fff}

/* §19 FORM + INPUTS */
.fcard{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:20px;margin-bottom:16px}
.fcard-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;margin-bottom:16px;color:var(--t1)}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.7px;text-transform:uppercase;margin-bottom:5px}
.fi{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}
.fi:focus{border-color:var(--ind);box-shadow:0 0 0 3px var(--ind-lt)}
.fi::placeholder{color:var(--t4)}
.inp{width:100%;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}
.inp:focus{outline:none;border-color:var(--ind);box-shadow:0 0 0 3px var(--ind-lt)}
.inp::placeholder{color:var(--t3)}
select.inp{cursor:pointer}
.fi-wrap{position:relative}
.fi-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:11px;pointer-events:none}
.fi-wrap .fi{padding-left:34px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* §20 ACTIVITY FEED */
.feed-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--b1)}
.feed-item:last-child{border-bottom:none}
.fdot{width:28px;height:28px;border-radius:var(--rm);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.ftext{font-size:12px;color:var(--t2);line-height:1.5}
.ftext strong{color:var(--t1)}
.ftime{font-size:9.5px;color:var(--t3);margin-top:2px}

/* §21 ROLE CHIPS */
.role-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border:1px solid}
.role-chip.super  {background:var(--vio-lt);color:var(--vio);border-color:rgba(167,139,250,0.3)}
.role-chip.admin  {background:var(--ind-lt);color:var(--ind2);border-color:var(--b2)}
.role-chip.pm     {background:var(--cyan-lt);color:var(--cyan);border-color:rgba(34,211,238,0.25)}
.role-chip.site   {background:var(--glt);color:var(--green);border-color:var(--gbr)}
.role-chip.finance{background:var(--blt);color:var(--blue);border-color:var(--bbr)}
.role-chip.vendor {background:var(--alt);color:var(--amber);border-color:var(--abr)}

/* §22 UTILITY */
.flex{display:flex}.flex-c{display:flex;align-items:center}.flex-b{display:flex;align-items:center;justify-content:space-between}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.f1{flex:1}.fs0{flex-shrink:0}
/* P04 Finance Dashboard cash-flow bar chart — its bar-wrap children use flex:1
   to distribute evenly, but the container itself had no width so it never
   stretched to the panel's full width. */
.rev-chart{width:100%}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.g3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px}
.mb3{margin-bottom:3px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}
.ind{color:var(--ind2)}.ind2{color:var(--ind2)}.cyan{color:var(--cyan)}.green{color:var(--green)}.red{color:var(--red)}
.f10{font-size:10px}.f11{font-size:11px}.f12{font-size:12px}.f13{font-size:13px}.f15{font-size:15px}.f16{font-size:16px}
/* .mod-pill — small module/tag pill badge. Was only ever defined scoped to
   [data-page="p22-06"] inside p22/insights.blade.php's own <style> block (and
   only worked there because that page also wraps its whole content in a
   <div data-page="p22-06">). p23/report-library.blade.php uses the same class
   for its tag pills with no scoping wrapper at all, so it rendered completely
   unstyled there. Promoted to a real global rule (identical values) so both
   pages — and any future page reusing the same pill pattern — get it for free. */
.mod-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;background:var(--s3);color:var(--t3);border:1px solid var(--b2)}
.fw4{font-weight:400}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}
.mono{font-family:'JetBrains Mono',monospace}.head{font-family:'Outfit',sans-serif}
.div{height:1px;background:var(--b1);margin:14px 0}
.screen{display:none;animation:fadeUp .25s ease}.screen.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}



body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 40% 30% at 15% 20%,rgba(99,102,241,.07) 0%,transparent 60%),
    radial-gradient(ellipse 30% 25% at 85% 75%,rgba(34,211,238,.05) 0%,transparent 55%);}
.app{position:relative;z-index:1}
.bx-dd{display:none;animation:ddIn .15s ease}
.bx-dd.open{display:block}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dd-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;font-size:12.5px;color:var(--t2);transition:background .1s;border-bottom:1px solid var(--b1);text-decoration:none}
.dd-item:last-child{border-bottom:none}
.dd-item:hover{background:var(--b1);color:var(--t1)}
.bx-dd-cur{background:var(--ind-lt);color:var(--ind2)}
.proj-pill{display:flex;align-items:center;gap:7px;padding:5px 12px;background:var(--s2);border:1px solid var(--b1);border-radius:20px;cursor:pointer;transition:var(--tr);flex-shrink:0}
.proj-pill:hover{border-color:var(--ind)}
.proj-dot{width:7px;height:7px;border-radius:50%}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.dash-grid{display:grid;grid-template-columns:1fr 320px;gap:14px;margin-bottom:14px}
.ph-row{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .12s;position:relative;text-decoration:none}
.ph-row:last-child{border-bottom:none}
.ph-row:hover{background:var(--b1)}
.ph-row:hover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ind)}
.al-row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .12s;text-decoration:none}
.al-row:last-child{border-bottom:none}
.al-row:hover{background:var(--b1)}
.al-ico{width:28px;height:28px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.act-row{display:flex;align-items:flex-start;gap:10px;padding:9px 14px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .12s;text-decoration:none}
.act-row:last-child{border-bottom:none}
.act-row:hover{background:var(--b1)}
.act-ico{width:26px;height:26px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.mb-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;cursor:pointer;padding:3px 0;border-radius:3px;transition:background .1s;text-decoration:none}
.mb-row:hover{background:var(--b1)}
.mb-lbl{font-size:11.5px;color:var(--t3);width:118px;flex-shrink:0}
.mb-val{font-size:11.5px;font-weight:700;width:32px;text-align:right;font-family:'JetBrains Mono',monospace}
.proj-card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--rm);padding:14px;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden;text-decoration:none;display:block}
.proj-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.proj-card.g::before{background:linear-gradient(90deg,var(--green),#34d399)}
.proj-card.a::before{background:linear-gradient(90deg,var(--amber),#f59e0b)}
.proj-card.x::before{background:var(--b2)}
.proj-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-1px)}
.cards-grid{display:none;padding:14px;grid-template-columns:1fr 1fr;gap:10px}


/* ═══════════════════════════════════════════════════════════════════════
   §MODAL — Common modal system (all pages use these)
   ═══════════════════════════════════════════════════════════════════════ */
.m-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:800;align-items:center;justify-content:center}
.m-overlay.open{display:flex}
.modal{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r);width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh2)}
.modal-sm{width:420px}
.modal-lg{width:640px}
.modal-xl{width:780px}
.mhd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--b1)}
.mbd{padding:20px}
.mft{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--b1)}
.fg{margin-bottom:12px}
.fg.mb0{margin-bottom:0}
.frow{display:grid;gap:10px;margin-bottom:12px}
.frow.f2{grid-template-columns:1fr 1fr}
.frow.f3{grid-template-columns:1fr 1fr 1fr}
.frow.f4{grid-template-columns:1fr 1fr 1fr 1fr}
.frow:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════════════
   §CONFIRM — Confirmation modal with remarks + audit (GLOBAL RULE)
   All Reject / Delete / Deactivate / Suspend must use this pattern
   ═══════════════════════════════════════════════════════════════════════ */
.confirm-modal-warn{background:var(--alt);border:1px solid rgba(251,191,36,.25);border-radius:var(--rs);padding:12px 14px;margin-bottom:14px}
.confirm-modal-danger{background:var(--rlt);border:1px solid rgba(248,113,113,.25);border-radius:var(--rs);padding:12px 14px;margin-bottom:14px}
.confirm-modal-info{background:var(--ind-lt);border:1px solid rgba(99,102,241,.2);border-radius:var(--rs);padding:12px 14px;margin-bottom:14px}
.confirm-subject{background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);padding:10px 12px;margin-bottom:14px}
.remarks-required::after{content:" *";color:var(--red)}

/* ═══════════════════════════════════════════════════════════════════════
   §AUDIT — Audit log components
   ═══════════════════════════════════════════════════════════════════════ */
.audit-row{display:flex;align-items:flex-start;gap:10px;padding:9px 14px;border-bottom:1px solid var(--b1);transition:background .1s}
.audit-row:last-child{border-bottom:none}
.audit-row:hover{background:var(--b1)}
.audit-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.audit-time{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3);white-space:nowrap;flex-shrink:0;width:110px}
.audit-action{font-size:12px;color:var(--t1);flex:1}
.audit-by{font-size:10px;color:var(--t3);margin-top:2px}
.audit-remark{font-size:11px;color:var(--amber);background:var(--alt);border-radius:3px;padding:2px 7px;margin-top:4px;display:inline-block;font-style:italic}

/* ═══════════════════════════════════════════════════════════════════════
   §DETAIL-PANEL — Slide-in detail panels (used in Tasks, Bills, Users etc)
   ═══════════════════════════════════════════════════════════════════════ */
.detail-panel{position:fixed;right:-500px;top:0;bottom:0;width:480px;background:var(--s1);border-left:1px solid var(--b2);box-shadow:var(--sh2);z-index:700;transition:right .3s ease;overflow-y:auto;display:flex;flex-direction:column}
.detail-panel.open{right:0}
.dp-head{padding:14px 18px;border-bottom:1px solid var(--b1);background:var(--s2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0}
.dp-tabs{display:flex;border-bottom:1px solid var(--b1);background:var(--s2);flex-shrink:0;overflow-x:auto}
.dp-tab{padding:9px 16px;font-size:12px;font-weight:500;color:var(--t3);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;transition:all .12s;white-space:nowrap}
.dp-tab.on{color:var(--ind2);border-bottom-color:var(--ind);font-weight:700}
.dp-tab:hover{color:var(--t2)}
.dp-body{padding:16px 18px;flex:1;overflow-y:auto}
.dp-backdrop{display:none;position:fixed;inset:0;z-index:699;background:rgba(0,0,0,.2)}

/* ═══════════════════════════════════════════════════════════════════════
   §KPI-PANEL — Slide-in KPI drill-down panel
   ═══════════════════════════════════════════════════════════════════════ */
.kpi-panel{position:fixed;right:-520px;top:0;bottom:0;width:500px;background:var(--s1);border-left:1px solid var(--b2);box-shadow:var(--sh2);z-index:700;transition:right .3s ease;overflow-y:auto;display:flex;flex-direction:column}
.kpi-panel.open{right:0}
.kp-head{padding:14px 18px;border-bottom:1px solid var(--b1);background:var(--s2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0}
.kp-body{padding:16px;flex:1;overflow-y:auto}
.kp-sub{font-size:11px;color:var(--t3);margin-top:3px}

/* ═══════════════════════════════════════════════════════════════════════
   §SETTINGS — Settings page patterns (M02, M01-12)
   ═══════════════════════════════════════════════════════════════════════ */
.set-layout{display:grid;grid-template-columns:210px 1fr;height:calc(100vh - 54px);overflow:hidden}
.set-nav{background:var(--s1);border-right:1px solid var(--b1);overflow-y:auto;flex-shrink:0}
.set-nav::-webkit-scrollbar{width:3px}.set-nav::-webkit-scrollbar-thumb{background:var(--b2)}
.set-content{overflow-y:auto;padding:22px 26px}
.set-content::-webkit-scrollbar{width:4px}.set-content::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.set-tab{display:none}.set-tab.active{display:block}
.sn-item{display:flex;align-items:center;gap:9px;padding:9px 14px;cursor:pointer;color:var(--t2);font-size:12.5px;font-weight:500;border-left:2px solid transparent;transition:all .12s;text-decoration:none}
.sn-item:hover{background:var(--b1);color:var(--t1)}
.sn-item.active{background:var(--ind-lt);color:var(--ind2);border-left-color:var(--ind);font-weight:600}
.sn-item i{width:14px;text-align:center;flex-shrink:0;font-size:12px}
.sn-badge{margin-left:auto;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px}
.sn-sec{padding:10px 14px 4px;font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);font-weight:700}
.sc2{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.sc2-head{padding:12px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;background:var(--s2)}
.sc2-hd{font-size:13px;font-weight:700;color:var(--t1);flex:1}
.sc2-hs{font-size:11px;color:var(--t3)}
.sc2-body{padding:16px}

/* ═══════════════════════════════════════════════════════════════════════
   §INTEGRATION — Integration cards (notification channels, 3rd party)
   ═══════════════════════════════════════════════════════════════════════ */
.int-card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-bottom:10px;transition:var(--tr)}
.int-card:hover{border-color:var(--b2)}
.int-head{padding:13px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--b1)}
.int-logo{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0}
.int-name{font-size:13px;font-weight:700;color:var(--t1)}
.int-desc{font-size:11px;color:var(--t3);margin-top:2px}
.int-body{padding:14px 16px}
.int-foot{padding:10px 16px;border-top:1px solid var(--b1);background:var(--s2);display:flex;gap:7px;align-items:center}
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sync-dot.ok{background:var(--green);box-shadow:0 0 6px rgba(52,211,153,.5)}
.sync-dot.warn{background:var(--amber);box-shadow:0 0 6px rgba(251,191,36,.4)}
.sync-dot.err{background:var(--red);box-shadow:0 0 6px rgba(248,113,113,.4)}
.sync-dot.off{background:var(--t3)}

/* ═══════════════════════════════════════════════════════════════════════
   §FORM-HELPERS — Toggle switch, password wrap, upload zone
   ═══════════════════════════════════════════════════════════════════════ */
.tog-lbl{display:flex;align-items:center;cursor:pointer;position:relative}
.tog-lbl input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}
.tog-sl{display:inline-block;width:32px;height:18px;border-radius:9px;background:var(--b2);position:relative;transition:background .2s;cursor:pointer}
.tog-lbl input:checked + .tog-sl{background:var(--ind)}
.tog-sl::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .2s}
.tog-lbl input:checked + .tog-sl::after{left:17px}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--b1)}
.tog-row:last-child{border-bottom:none}
.pw-wrap{position:relative;display:flex}
.pw-wrap input{flex:1;padding-right:36px}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--t3);font-size:11px;background:none;border:none;padding:2px}
.pw-eye:hover{color:var(--t1)}
.upload-zone{border:2px dashed var(--b2);border-radius:var(--rm);padding:24px;text-align:center;cursor:pointer;transition:all .15s;background:var(--s2)}
.upload-zone:hover{border-color:var(--ind);background:var(--ind-lt)}
.location-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--b1)}
.location-row:last-child{border-bottom:none}

/* ═══════════════════════════════════════════════════════════════════════
   §ROLES — Role builder, permission matrix, team cards
   ═══════════════════════════════════════════════════════════════════════ */
.role-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;transition:var(--tr);cursor:pointer}
.role-card:hover{border-color:var(--b2);box-shadow:var(--sh1);transform:translateY(-1px)}
.role-card-accent{height:4px}
.role-card-body{padding:16px}
/* p03/roles/advanced-index.blade.php (page="p03") renders .role-card-head/-ico/-name/-desc
   inside each role card but never defined them — p03-team/p03-audit/p03-project-access each
   carry their own [data-page] scoped copies of these four rules (verbatim, see those blades'
   own <style> blocks) but page="p03" (the live Advanced Roles Index + Advanced Builder) has
   no matching scope, so cards rendered with zero layout/typography. Promoted here as global
   bare classes (same values as the scoped copies) since the component is reused verbatim
   across every one of those pages, not truly page-specific. */
.role-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.role-card-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.role-card-name{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:2px}
.role-card-desc{font-size:11px;color:var(--t3);line-height:1.4}
.perm-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--b2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;background:var(--s2)}
.perm-check.on{background:var(--ind);border-color:var(--ind)}
.perm-check.on::after{content:"";display:block;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-top:-1px}
.perm-check.partial{background:var(--amber);border-color:var(--amber)}
.perm-check.partial::after{content:"";display:block;width:8px;height:2px;background:#fff}
.perm-mini{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--s2);color:var(--t3);border:1px solid var(--b1);margin:2px}
.perm-mini.on{background:var(--ind-lt);color:var(--ind2);border-color:rgba(99,102,241,.2)}
.perm-mini.ok{background:var(--glt);color:var(--green);border-color:var(--gbr)}

/* ═══════════════════════════════════════════════════════════════════════
   §TEMPLATE-EDITOR — Notification template pages
   ═══════════════════════════════════════════════════════════════════════ */
.tmpl-layout{display:grid;grid-template-columns:240px 1fr;height:calc(100vh - 98px);overflow:hidden}
.tmpl-list{border-right:1px solid var(--b1);overflow-y:auto;display:flex;flex-direction:column;background:var(--s1)}
.tmpl-list::-webkit-scrollbar{width:3px}.tmpl-list::-webkit-scrollbar-thumb{background:var(--b2)}
.tl-filter{padding:10px 12px;border-bottom:1px solid var(--b1);background:var(--s2)}
.tl-item{padding:8px 12px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .09s}
.tl-item:hover{background:var(--b1)}
.tl-item.active{background:var(--ind-lt);border-left:3px solid var(--ind)}
.tl-name{font-size:12.5px;font-weight:600;color:var(--t1)}
.tl-code{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--t4);margin-top:2px}
.tl-badges{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap}
.tl-ch{font-size:7.5px;font-weight:700;padding:1px 5px;border-radius:4px}
.tl-sec{padding:6px 12px 3px;font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);font-weight:700;background:var(--s2);border-bottom:1px solid var(--b1)}
.tmpl-editor{overflow-y:auto;display:flex;flex-direction:column}
.te-head{padding:14px 20px;border-bottom:1px solid var(--b1);background:var(--s2);flex-shrink:0}
.ch-tabs{display:flex;border-bottom:2px solid var(--b1);padding:0 20px;background:var(--s2);flex-shrink:0}
.ch-tab{padding:9px 16px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .12s;display:flex;align-items:center;gap:6px;white-space:nowrap}
.ch-tab:hover{color:var(--t2)}
.ch-tab.active{color:var(--ind2);border-bottom-color:var(--ind);font-weight:700}
.ch-tab.off{opacity:.35;cursor:not-allowed;pointer-events:none}
.te-body{padding:18px 20px;flex:1;overflow-y:auto}
.code-area{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rm);padding:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t1);line-height:1.65;resize:vertical;min-height:180px;outline:none;width:100%;box-sizing:border-box;transition:border-color .15s}
.code-area:focus{border-color:var(--ind);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.var-chip{font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:3px 8px;background:var(--ind-lt);border:1px solid rgba(99,102,241,.2);border-radius:4px;color:var(--ind2);cursor:pointer;transition:all .12s}
.var-chip:hover{background:var(--ind);color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   §A11Y — Accessibility: keyboard focus + touch targets (app-wide)
   ═══════════════════════════════════════════════════════════════════════ */
/* Visible keyboard-focus ring on all interactive controls. Mouse/touch
   clicks don't trigger :focus-visible in modern browsers, so this never
   shows the ring on a click — only on real keyboard navigation. */
.btn:focus-visible, .nb:focus-visible, .tb-ico:focus-visible, .vtog-btn:focus-visible,
.mclose:focus-visible, .fc:focus-visible, .fi:focus-visible, .inp:focus-visible,
.sn-item:focus-visible, .dd-item:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ind);
  outline-offset: 2px;
}

/* Touch-target sizing: bump small icon-only controls to >=44px on touch
   devices only (pointer:coarse / no hover) so dense desktop tables/topbars
   keep their existing look — only touch users get the larger hit area. */
@media (hover: none), (pointer: coarse) {
  .tb-ico, .vtog-btn, .mclose, .btnxs, .btnsm, .pw-eye, .al-ico, .act-ico {
    min-width: 44px;
    min-height: 44px;
  }
}


/* ══════════════════════════════════════════════════════════════
   EXTENDED CLASSES — from buildx-master.css
   Only classes NOT present in buildx-pro.css are added here.
   Base layout, typography, body rules are NOT overridden.
══════════════════════════════════════════════════════════════ */
.tb-menu {
  width:34px; height:34px;
  border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r1); color:var(--t2);
  font-size:16px; transition:var(--tr-fast);
}
.tb-menu:hover { background:var(--b1); color:var(--t1); }
.tb-title { font-family:var(--ff-head); font-size:17px; color:var(--t1); }
.tb-sub   { font-size:11px; color:var(--t3); margin-left:4px; }
.tb-project {
  display:flex; align-items:center; gap:8px;
  padding:6px 12px;
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:var(--r2); cursor:pointer;
  transition:var(--tr-fast); flex-shrink:0;
  position:relative;
}
.tb-project:hover { border-color:var(--gold); }
.tb-project-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.tb-project-name { font-size:12px; font-weight:600; color:var(--t1); max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-project-label { font-size:9px; color:var(--t3); }
.tb-project-arrow { font-size:10px; color:var(--t3); }
.tb-project-drop {
  display:none; position:absolute;
  top:calc(100% + 6px); left:0;
  min-width:220px; background:var(--card);
  border:1px solid var(--b2); border-radius:var(--r2);
  box-shadow:var(--sh2); z-index:500; overflow:hidden;
  animation:fadeIn .15s ease;
}
.tb-project.open .tb-project-drop { display:block; }
.tb-proj-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; cursor:pointer;
  transition:background .12s;
}
.tb-proj-item:hover { background:var(--b1); }
.tb-proj-item.active { background:var(--gold-lt); }
.tb-proj-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tb-proj-dot.green  { background:var(--green); }
.tb-proj-dot.amber  { background:var(--amber); }
.tb-proj-dot.red    { background:var(--red); }
.tb-proj-info { flex:1; }
.tb-proj-pname { font-size:12px; font-weight:600; color:var(--t1); }
.tb-proj-psub  { font-size:10px; color:var(--t3); }
.tb-search i { color:var(--t3); font-size:12px; }
.tb-btn {
  width:34px; height:34px; border-radius:var(--r1);
  border:1px solid var(--b2); background:var(--bg2);
  color:var(--t2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:var(--tr-fast); position:relative;
}
.tb-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-lt); }
.tb-notif-dot {
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--red); border:1.5px solid var(--card);
}
.tb-ava {
  width:34px; height:34px; border-radius:var(--r1);
  background:linear-gradient(135deg,var(--gold),var(--gold3));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#0a0a0a;
  cursor:pointer; flex-shrink:0;
}
.btn-prime {
  background:linear-gradient(135deg,var(--gold),var(--gold3));
  color:#0a0a0a;
  box-shadow:0 3px 12px var(--gold-glow);
}
.btn-prime:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 5px 20px var(--gold-glow); }
.btn-prime:active { transform:translateY(0); }
.btn-out {
  background:transparent; color:var(--t2);
  border:1px solid var(--b2);
}
.btn-out:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-lt); }
.btn-ghost { background:var(--b1); color:var(--t2); border:1px solid transparent; }
.btn-ghost:hover { background:var(--b2); color:var(--t1); }
.btn-danger { background:var(--rlt); color:var(--red); border:1px solid var(--rbr); }
.btn-danger:hover { background:var(--red); color:#fff; }
.btn-green { background:var(--glt); color:var(--green); border:1px solid var(--gbr); }
.btn-green:hover { background:var(--green); color:#fff; }
.btn-blue  { background:var(--blt); color:var(--blue); border:1px solid var(--bbr); }
.btn-sm { padding:5px 11px; font-size:12px; }
.btn-xs { padding:3px 8px;  font-size:11px; border-radius:var(--r1); }
.btn-ico { padding:7px; border-radius:var(--r1); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
.spill.green  { background:var(--glt); color:var(--green);  border-color:var(--gbr); }
.spill.red    { background:var(--rlt); color:var(--red);    border-color:var(--rbr); }
.spill.amber  { background:var(--alt); color:var(--amber);  border-color:var(--abr); }
.spill.blue   { background:var(--blt); color:var(--blue);   border-color:var(--bbr); }
.spill.purple { background:var(--plt); color:var(--purple); border-color:var(--pbr); }
.spill.gold   { background:var(--gold-lt); color:var(--gold); border-color:rgba(201,150,60,.3); }
.spill.dot::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.role-chip.viewer  { background:var(--b1); color:var(--t3); border-color:var(--b2); }
.kpi-grid-3 { grid-template-columns:repeat(3,1fr); }
.kpi-grid-6 { grid-template-columns:repeat(6,1fr); }
.kpi.gold::after   { background:var(--gold); }
.kpi.green::after  { background:var(--green); }
.kpi.red::after    { background:var(--red); }
.kpi.blue::after   { background:var(--blue); }
.kpi.amber::after  { background:var(--amber); }
.kpi.purple::after { background:var(--purple); }
.kpi.cyan::after   { background:var(--cyan); }
.kpi.gold   .kpi-ico { background:var(--gold-lt); color:var(--gold); }
.kpi.blue   .kpi-ico { background:var(--blt); color:var(--blue); }
.kpi.purple .kpi-ico { background:var(--plt); color:var(--purple); }
.kpi-label { font-size:12px; color:var(--t3); margin-bottom:8px; }
.panel-head {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--b1);
}
.panel-title { font-family:var(--ff-head); font-size:15px; color:var(--t1); flex:1; }
.panel-sub   { font-size:11px; color:var(--t3); }
.panel-body  { padding:18px; }
.panel-act   { font-size:12px; color:var(--gold); cursor:pointer; }
.panel-act:hover { text-decoration:underline; }
.filter-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--b1);
  background:var(--bg2);
}
.filter-chip {
  padding:5px 12px; border-radius:20px;
  border:1px solid var(--b2); background:transparent;
  font-size:12px; color:var(--t2); cursor:pointer;
  transition:var(--tr-fast); font-family:var(--ff-body);
}
.filter-chip:hover { border-color:var(--gold); color:var(--gold); }
.filter-chip.active { background:var(--gold-lt); border-color:rgba(201,150,60,.3); color:var(--gold); font-weight:600; }
.filter-space { flex:1; }
.tbl-name { font-weight:600; color:var(--t1); font-size:13px; }
.tbl-sub  { font-size:11px; color:var(--t3); margin-top:1px; }
.tbl-amt  { font-family:var(--ff-mono); font-size:13px; }
.tbl-ava {
  width:30px; height:30px; border-radius:var(--r1);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}
.view-toggle {
  display:flex; gap:2px;
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:var(--r1); padding:2px;
}
.vt-btn {
  width:30px; height:28px; border-radius:5px;
  border:none; background:transparent;
  color:var(--t3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; transition:var(--tr-fast);
}
.vt-btn.active { background:var(--card); color:var(--gold); box-shadow:var(--sh1); }
.view-container.list .cards-grid,
.view-container.list .tiles-grid { display:none; }
.view-container.list .tbl-wrap    { display:block; }
.view-container.cards .tbl-wrap,
.view-container.cards .tiles-grid { display:none; }
.view-container.cards .cards-grid { display:grid; }
.vcard {
  background:var(--card); border:1px solid var(--b1);
  border-radius:var(--r2); padding:16px;
  transition:var(--tr); cursor:pointer; position:relative;
}
.vcard:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--sh1); }
.vcard-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.vcard-name { font-weight:600; font-size:14px; color:var(--t1); }
.vcard-sub  { font-size:11px; color:var(--t3); margin-top:2px; }
.vcard-body { font-size:12px; color:var(--t2); }
.vcard-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid var(--b1); }
.view-container.tiles .tbl-wrap,
.view-container.tiles .cards-grid { display:none; }
.view-container.tiles .tiles-grid { display:grid; }
.tiles-grid {
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:10px; padding:18px;
}
.vtile {
  background:var(--card); border:1px solid var(--b1);
  border-radius:var(--r2); padding:14px;
  text-align:center; cursor:pointer;
  transition:var(--tr);
}
.vtile:hover { border-color:var(--gold); box-shadow:var(--sh1); }
.vtile-ico { font-size:22px; margin-bottom:8px; }
.vtile-name { font-size:12px; font-weight:600; color:var(--t1); margin-bottom:4px; }
.vtile-val  { font-family:var(--ff-mono); font-size:16px; font-weight:700; }
.vtile-sub  { font-size:10px; color:var(--t3); margin-top:2px; }
.form-card {
  background:var(--card); border:1px solid var(--b1);
  border-radius:var(--r3); padding:22px;
  margin-bottom:18px;
}
.form-card-title { font-family:var(--ff-head); font-size:15px; margin-bottom:18px; color:var(--t1); }
.fi-eye  { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--t3); cursor:pointer; font-size:12px; }
.fi-eye:hover { color:var(--gold); }
.fi-addon {
  display:flex; align-items:center;
  background:var(--bg3); border:1px solid var(--b2);
  border-radius:var(--r1); overflow:hidden;
}
.fi-addon-pre,.fi-addon-suf {
  padding:0 12px; font-size:12px; color:var(--t3);
  background:var(--bg3); white-space:nowrap;
  border-right:1px solid var(--b2);
}
.fi-addon-suf { border-right:none; border-left:1px solid var(--b2); }
.fi-addon .fi { border:none; border-radius:0; background:var(--bg2); }
.fi-addon .fi:focus { box-shadow:none; }
.fc input { width:15px; height:15px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; margin-top:2px; }
.fc-label { font-size:13px; color:var(--t2); line-height:1.45; }
.fc-label a { color:var(--gold); }
.fg3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
select.fi { cursor:pointer; }
textarea.fi { resize:vertical; min-height:90px; }
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-title { font-family:var(--ff-head); font-size:18px; color:var(--t1); }
.modal-close {
  width:30px; height:30px; border-radius:var(--r1);
  background:var(--bg2); border:1px solid var(--b2);
  color:var(--t3); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover { color:var(--t1); background:var(--b2); }
.modal-foot {
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--b1);
}
@keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
.toast-ico { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.toast.ok   .toast-ico { background:var(--glt); color:var(--green); }
.toast.warn .toast-ico { background:var(--alt); color:var(--amber); }
.toast.err  .toast-ico { background:var(--rlt); color:var(--red); }
.toast.info .toast-ico { background:var(--blt); color:var(--blue); }
.toast-body { flex:1; }
.toast-title { font-size:13px; font-weight:600; color:var(--t1); }
.toast-msg   { font-size:11px; color:var(--t3); }
.legend-bar {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:9px 16px;
  background:var(--bg2); border:1px solid var(--b1);
  border-radius:var(--r1); margin-bottom:18px;
  font-size:11px; color:var(--t2);
}
.legend-dot  { width:7px; height:7px; border-radius:50%; }
.legend-sep  { width:1px; height:14px; background:var(--b2); }
.pbar-lg { height:8px; }
.pbar-fill {
  height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--gold),var(--gold3));
  transition:width .6s ease;
}
.pbar-fill.green  { background:linear-gradient(90deg,var(--green),#34d399); }
.pbar-fill.red    { background:linear-gradient(90deg,var(--red),#f87171); }
.pbar-fill.blue   { background:linear-gradient(90deg,var(--blue),#60a5fa); }
.pbar-fill.purple { background:linear-gradient(90deg,var(--purple),#a78bfa); }
.mbar-label { font-size:12px; color:var(--t3); width:130px; flex-shrink:0; }
.info-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; border:1px solid var(--b1); border-radius:var(--r2);
  overflow:hidden;
}
.info-row {
  display:flex; flex-direction:column;
  padding:11px 14px; border-bottom:1px solid var(--b1);
  border-right:1px solid var(--b1);
}
.info-row:nth-child(even) { border-right:none; }
.info-row:last-child,.info-row:nth-last-child(2) { border-bottom:none; }
.info-key   { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:3px; }
.info-val   { font-size:13px; color:var(--t1); font-weight:500; }
.feed-dot-wrap { display:flex; flex-direction:column; align-items:center; }
.feed-dot {
  width:28px; height:28px; border-radius:var(--r1);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; flex-shrink:0;
}
.feed-line { flex:1; width:1px; background:var(--b1); margin:4px 0; }
.feed-body { flex:1; }
.feed-text { font-size:12px; color:var(--t2); line-height:1.5; }
.feed-text strong { color:var(--t1); }
.feed-time { font-size:10px; color:var(--t3); margin-top:3px; }
.undo-bar.hidden { display:none !important; }
@keyframes slideUp { from{transform:translateX(-50%) translateY(20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
.revert-btn  { padding:6px 14px; border-radius:var(--r1); background:var(--rlt); border:1px solid var(--rbr); color:var(--red); font-size:12px; font-weight:700; cursor:pointer; font-family:var(--ff-body); display:none; }
.revert-btn:hover { background:var(--red); color:#fff; }
.perm-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--b1);
}
.perm-row:last-child { border-bottom:none; }
.perm-name  { font-size:13px; color:var(--t1); flex:1; }
.perm-desc  { font-size:11px; color:var(--t3); }
.perm-tog {
  width:38px; height:22px; border-radius:11px;
  background:var(--b2); border:none; cursor:pointer;
  position:relative; transition:background .2s; flex-shrink:0;
}
.perm-tog::after {
  content:''; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; transition:transform .2s;
}
.perm-tog.on { background:var(--green); }
.perm-tog.on::after { transform:translateX(16px); }
@keyframes fadeIn    { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes shimmer   { to{background-position:200% 0} }
.anim-fade  { animation:fadeIn .3s ease; }
.anim-up    { animation:fadeUp .3s ease; }
.spinner    { width:16px; height:16px; border-radius:50%; border:2px solid rgba(0,0,0,.15); border-top-color:rgba(0,0,0,.7); animation:spin .7s linear infinite; display:inline-block; }
.skeleton   { background:linear-gradient(90deg,var(--b1) 25%,var(--b2) 50%,var(--b1) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r1); }
.screen.active { display:block; }
::-webkit-scrollbar-thumb:hover { background:var(--b3); }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-gap4    { gap:4px; }
.flex-gap8    { gap:8px; }
.flex-gap12   { gap:12px; }
.flex-gap16   { gap:16px; }
.flex-1       { flex:1; }
.flex-shrink0 { flex-shrink:0; }
.grid2  { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid3  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid21 { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.grid12 { display:grid; grid-template-columns:1fr 2fr; gap:16px; }
.mb4  { margin-bottom:4px; }
.mb22 { margin-bottom:22px; }
.mb32 { margin-bottom:32px; }
.mt4  { margin-top:4px; }
.mt24 { margin-top:24px; }
.p0   { padding:0; }
.p16  { padding:16px; }
.p24  { padding:24px; }
.pt16 { padding-top:16px; }
.pb16 { padding-bottom:16px; }
.text-right  { text-align:right; }
.text-center { text-align:center; }
.t4  { color:var(--t4); }
.gold   { color:var(--gold); }
.amber  { color:var(--amber); }
.blue   { color:var(--blue); }
.f14 { font-size:14px; }
.fw5 { font-weight:500; }
.serif { font-family:var(--ff-head); }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.divider  { height:1px; background:var(--b1); margin:16px 0; }
.hidden   { display:none !important; }
.visible  { display:block !important; }
.auth-layout {
  display:grid; grid-template-columns:1fr 440px; min-height:100vh;
}
.auth-left {
  background:var(--bg2); border-right:1px solid var(--b1);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:60px 50px; position:relative; overflow:hidden;
}
.auth-left-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 28% 38%, var(--gold-lt) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 72% 68%, var(--blt) 0%, transparent 55%);
}
.auth-left-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--b1) 1px,transparent 1px),linear-gradient(90deg,var(--b1) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at center, black 30%, transparent 80%);
}
.auth-right {
  background:var(--card); border-left:1px solid var(--b1);
  display:flex; flex-direction:column; justify-content:center;
  padding:44px 40px; position:relative; overflow-y:auto;
}
.auth-tabs {
  display:flex; gap:0;
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:var(--r2); padding:3px; margin-bottom:26px;
}
.auth-tab {
  flex:1; padding:8px; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer;
  color:var(--t3); transition:var(--tr-fast);
  border:none; background:none; font-family:var(--ff-body);
}
.auth-tab.active {
  background:var(--card); color:var(--t1);
  box-shadow:var(--sh1); border:1px solid var(--b2);
}
.auth-heading { font-family:var(--ff-head); font-size:24px; color:var(--t1); margin-bottom:4px; }
.auth-sub     { font-size:13px; color:var(--t3); margin-bottom:24px; }
.auth-panel   { display:none; animation:fadeIn .28s ease; }
.auth-panel.active { display:block; }
.auth-link    { text-align:center; font-size:13px; color:var(--t3); margin-top:14px; }
.auth-link span,
.auth-link a  { color:var(--gold); cursor:pointer; font-weight:600; }
.auth-divider {
  display:flex; align-items:center; gap:12px;
  margin:18px 0; color:var(--t4); font-size:12px;
}
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--b2); }
.social-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.social-btn {
  padding:9px 14px; background:var(--bg2);
  border:1px solid var(--b2); border-radius:var(--r1);
  color:var(--t2); font-size:13px; font-weight:500;
  font-family:var(--ff-body); cursor:pointer; transition:var(--tr-fast);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.social-btn:hover { background:var(--b1); border-color:var(--b3); color:var(--t1); }
.stepper { display:flex; align-items:flex-start; margin-bottom:28px; }
.step    { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.step::after {
  content:''; position:absolute; top:15px; left:55%; width:90%;
  height:1px; background:var(--b2); z-index:0;
}
.step:last-child::after { display:none; }
.step-num {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; z-index:1;
  transition:var(--tr-fast);
}
.step-num.done    { background:var(--green); color:#fff; }
.step-num.active  { background:var(--gold);  color:#0a0a0a; }
.step-num.pending { background:var(--bg2); border:1px solid var(--b2); color:var(--t3); }
.step-lbl { font-size:10px; color:var(--t3); margin-top:5px; text-align:center; }
.step.active .step-lbl { color:var(--gold); font-weight:600; }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.plan-card {
  padding:16px 12px; background:var(--bg2);
  border:2px solid var(--b2); border-radius:var(--r2);
  cursor:pointer; transition:var(--tr-fast); text-align:center; position:relative;
}
.plan-card:hover { border-color:var(--gold3); }
.plan-card.sel   { border-color:var(--gold); background:var(--gold-lt); }
.plan-badge {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#0a0a0a;
  font-size:9px; font-weight:800; letter-spacing:1px;
  padding:3px 10px; border-radius:20px; white-space:nowrap;
}
.plan-name  { font-size:11px; font-weight:700; color:var(--t1); margin-bottom:5px; }
.plan-price { font-family:var(--ff-head); font-size:20px; color:var(--gold); }
.plan-period{ font-size:10px; color:var(--t3); }
.plan-feats { font-size:10px; color:var(--t3); margin-top:8px; text-align:left; }
.otp-wrap { display:flex; gap:10px; }
.otp-inp {
  width:50px; height:54px; text-align:center;
  font-size:20px; font-weight:700; font-family:var(--ff-mono);
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:var(--r1); color:var(--t1); outline:none;
  transition:var(--tr-fast);
}
.otp-inp:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-lt); }
.form-err {
  padding:9px 13px; background:var(--rlt); border:1px solid var(--rbr);
  border-radius:var(--r1); font-size:12px; color:var(--red);
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.form-ok {
  padding:9px 13px; background:var(--glt); border:1px solid var(--gbr);
  border-radius:var(--r1); font-size:12px; color:var(--green);
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.pw-bars { display:flex; gap:3px; margin-top:5px; }
.pw-bar  { flex:1; height:3px; border-radius:3px; background:var(--b2); transition:background .3s; }
.pw-bar.weak { background:var(--red); }
.pw-bar.fair { background:var(--amber); }
.pw-bar.good { background:var(--green); }
.pw-lbl { font-size:10px; color:var(--t3); margin-top:3px; }
@media(max-width:860px){
  .auth-layout{grid-template-columns:1fr}
  .auth-left{display:none}
  .auth-right{padding:36px 24px}
}

/* ══════════════════════════════════════════════════════════════
   BRIDGE VARIABLES — aliases for page components
   Maps to existing tokens for full compatibility
══════════════════════════════════════════════════════════════ */
:root {
  --s1: #12152a;
  --s2: #171b33;
  --s3: #1d2240;
  --rm: 10px;
  --rs: 6px;
  --ind:     #6366f1;
  --ind2:    #818cf8;
  --ind3:    #4f46e5;
  --ind-lt:  rgba(99,102,241,.12);
  --vio:     #a78bfa;
  --vio2:    #c4b5fd;
  --vio-lt:  rgba(167,139,250,.12);
  --cyan-lt: rgba(6,182,212,.12);
  --glow-ind:0 0 20px rgba(99,102,241,.18);
  --alt:     rgba(245,158,11,.10);
  --rlt:     rgba(239,68,68,.10);
  --glt:     rgba(34,197,94,.10);
}
/* ══════════════════════════════════════════════════════════════
   RESTORED FROM LEGACY buildx-pro.css — these classes are used by
   several page blades (P02 Company Settings, P00 auth, P03 Team, P04
   Project Overview, P23 Reports, P24 Notifications) but buildx-pro.css
   is never loaded for any page (app.blade.php's CSS match() always
   resolves to a versioned bundle), so they rendered unstyled. Values
   copied verbatim from buildx-pro.css so the UI matches the source HTML.
══════════════════════════════════════════════════════════════ */
.msg-err{padding:9px 12px;background:var(--rlt);border:1px solid var(--rbr);border-radius:var(--rs);font-size:12px;color:var(--red);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.msg-ok{padding:9px 12px;background:var(--glt);border:1px solid var(--gbr);border-radius:var(--rs);font-size:12px;color:var(--green);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.notif-row{display:grid;grid-template-columns:1fr 50px 50px 50px 50px 50px 50px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--b1);gap:6px}
.notif-row:last-child{border-bottom:none}
.notif-hd{display:grid;grid-template-columns:1fr 50px 50px 50px 50px 50px 50px;padding:7px 14px;border-bottom:1px solid var(--b1);background:var(--s2);gap:6px}
.ch-pill{display:flex;flex-direction:column;align-items:center;gap:3px}
.ch-pill-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px}
.phase-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .12s;text-decoration:none}
.phase-row:last-child{border-bottom:none}
.phase-row:hover{background:var(--b1)}
.workday{cursor:pointer}
.workday.on{background:var(--ind-lt);border-color:var(--ind);color:var(--ind2)}
.cf-row{display:grid;grid-template-columns:100px 1fr 120px 120px 120px 120px;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--b1)}
.cf-row:hover{background:var(--b1)}
/* .row-hover was previously only scoped to [data-page^="p05"] in buildx-modules.css
   (a copy of the ".inp"-class bug) even though P02's workflow.blade.php (Approval
   Matrix table rows) uses the same class with the same identical intent — made
   global here since the effect (subtle hover highlight) is generic and page-agnostic. */
.row-hover:hover{background:var(--b1)}
/* .up-row (P02 Security "Active Sessions"/"Recent Login History" and Notifications
   "Role-wise Notification Config" rows) — never defined anywhere; each row pairs a
   label/detail block on the left with a value/date or per-role checkbox group on the
   right, so it needs the same space-between flex row as .location-row/.notif-row. */
.up-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--b1)}
.up-row:last-child{border-bottom:none}

[data-theme="light"] {
  --s1: #ffffff;
  --s2: #f4f7fb;
  --s3: #e8eef8;
  --ind-lt: rgba(99,102,241,.08);
}

/* QA fix — Toggle Theme Mismatch (WhatsApp Integration, p27-04):
   whatsapp.blade.php's own <style> block reimplemented .toggle with a
   green (#00a884 / var(--green)) checked-state track, straight out of the
   original HTML mock (WhatsApp-brand green). Every other module's toggle
   (e.g. p24-02 Alert Config, [data-page="p24-02"] .toggle above/elsewhere
   in this same versions CSS) uses the app's standard indigo brand color
   via var(--ind), matching .bx-toggle in the shared buildx-pro.css. Scoped
   override here restores the standard indigo toggle for this page only —
   the page's own inline <style> block still defines the same selectors,
   so this must win the cascade: same specificity, declared later in the
   document (this stylesheet <link> is emitted before the page's @push
   ('styles') block) is NOT guaranteed, hence !important is used narrowly
   for the checked-state background only. */
[data-page="p27-04"] .toggle input:checked + .toggle-slider{background:var(--ind) !important}