/* ============================================================
   BCDE Business Suite — Global Stylesheet
   ============================================================ */

/* ─── THEME TOKENS ──────────────────────────────────────────── */
:root {
  --yellow:  #F5C842; --yellow-s: #FFFBEB; --yellow-m: #FFF0B0;
  --purple:  #7B4F9E; --purple-s: #F5F0FA; --purple-m: #E0CEF5;
  --orange:  #F07C3A; --orange-s: #FFF5EE; --orange-m: #FFE0C8;
  --pink:    #E84F7C; --pink-s:   #FEF0F5; --pink-m:   #FFD6E5;
  --green-s: #E8F8EF; --green:    #1A9E50;
  --radius-card: 12px; --radius-item: 8px;
}

[data-theme="light"] {
  --bg-page:    #F2F1EE; --bg-sidebar: #FAFAF8; --bg-card:  #FFFFFF;
  --bg-right:   #FAFAF8; --bg-hover:   #EDEDEB; --bg-active:#F0EBFA;
  --border:     #E7E5E4; --border-mid: #D5D2CE;
  --text-1:     #1C1917; --text-2:     #57534E;  --text-3:  #A8A29E;
  --active-fg:  #7B4F9E; --active-brd: #D4BCE8;
  --topbar-bg:  #FFFFFF; --shadow:     0 1px 4px rgba(0,0,0,0.07);
}

[data-theme="dark"] {
  --bg-page:    #0F0D14; --bg-sidebar: #15121E; --bg-card:  #1E1A2A;
  --bg-right:   #17141F; --bg-hover:   #231E30; --bg-active:#2A2040;
  --border:     #2E2840; --border-mid: #3A3350;
  --text-1:     #EDE9FA; --text-2:     #9D98B8;  --text-3:  #5E5A78;
  --active-fg:  #B088D8; --active-brd: #4A3468;
  --topbar-bg:  #1A1725; --shadow:     0 1px 6px rgba(0,0,0,0.3);
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Outfit',sans-serif;
  background:var(--bg-page); color:var(--text-1);
  display:flex; height:100vh; overflow:hidden;
  transition:background .25s,color .25s;
}
a { text-decoration:none; color:inherit; }

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.sidebar {
  width:220px; min-width:220px;
  background:var(--bg-sidebar); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto;
  transition:background .25s,border-color .25s;
}
.page-wrap { flex:1; display:flex; overflow:hidden; }
.main      { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ─── LOGO ───────────────────────────────────────────────────── */
.logo-area {
  padding:14px 15px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.logo-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5px; width:30px; height:30px; flex-shrink:0; }
.logo-grid span { border-radius:3px; display:block; }
.logo-grid span:nth-child(1){background:#F5C842;}
.logo-grid span:nth-child(2){background:#7B4F9E;}
.logo-grid span:nth-child(3){background:#F07C3A;}
.logo-grid span:nth-child(4){background:#E84F7C;}
.logo-name { font-size:14px; font-weight:800; color:var(--text-1); letter-spacing:.04em; line-height:1.1; }
.logo-sub  { font-size:9px; font-weight:500; color:var(--text-3); letter-spacing:.12em; text-transform:uppercase; }

/* ─── TENANT / WORKSPACE ─────────────────────────────────────── */
.tenant-row {
  padding:6px 14px; display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-active); border-bottom:1px solid var(--active-brd); flex-shrink:0;
}
.tenant-name { font-size:11px; font-weight:600; color:var(--active-fg); }
.tenant-link { font-size:10px; color:var(--active-fg); opacity:.6; }
.ws-picker {
  margin:8px 10px; padding:7px 10px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-item); display:flex; align-items:center; gap:8px;
  cursor:pointer; flex-shrink:0; transition:border-color .15s;
}
.ws-picker:hover { border-color:var(--border-mid); }
.ws-ava {
  width:20px; height:20px; border-radius:5px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  font-size:8px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ws-name { font-size:11.5px; font-weight:500; color:var(--text-2); flex:1; }
.ws-chev { font-size:9px; color:var(--text-3); }

/* ─── NAV ────────────────────────────────────────────────────── */
.nav-section { padding:6px 0 2px; }
.nav-section-label {
  font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); padding:2px 14px 5px;
}
.nav-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; margin:1px 6px;
  border-radius:var(--radius-item); cursor:pointer;
  border:1px solid transparent; transition:background .12s;
  text-decoration:none;
}
.nav-item:hover { background:var(--bg-hover); }
.nav-item.active { background:var(--bg-active); border-color:var(--active-brd); }
.nav-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-icon svg { width:14px; height:14px; }
.nav-item.active .nav-icon { background:var(--active-brd); }
.nav-text { font-size:12.5px; font-weight:400; color:var(--text-2); flex:1; }
.nav-item.active .nav-text { font-weight:600; color:var(--active-fg); }
.nav-item:hover .nav-text { color:var(--text-1); }
.nav-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; font-family:'JetBrains Mono',monospace; flex-shrink:0; }
.b-p  { background:var(--purple-m); color:var(--purple); }
.b-o  { background:var(--orange-m); color:var(--orange); }
.b-pk { background:var(--pink-m);   color:var(--pink); }
.b-y  { background:var(--yellow-m); color:#8A6800; }
[data-theme="dark"] .b-p  { background:#3D2860; color:#C09AE8; }
[data-theme="dark"] .b-o  { background:#3D2210; color:#F5A06A; }
[data-theme="dark"] .b-pk { background:#3D1028; color:#F088B0; }
[data-theme="dark"] .b-y  { background:#3D3000; color:#F0C030; }
.nav-divider { height:1px; background:var(--border); margin:4px 12px; }
.core-pill {
  font-size:8px; font-weight:800; padding:1px 5px; border-radius:4px;
  background:var(--active-brd); color:var(--active-fg);
  letter-spacing:.04em; text-transform:uppercase; flex-shrink:0;
}
[data-theme="dark"] .core-pill { background:#3D2260; color:#C090E8; }

/* ─── PLUGIN SECTION ─────────────────────────────────────────── */
.plugin-section-banner {
  margin:8px 10px 3px; padding:7px 11px;
  background:linear-gradient(135deg,var(--purple-s),var(--orange-s));
  border:1px solid var(--active-brd); border-radius:9px;
  display:flex; align-items:center; gap:7px;
}
[data-theme="dark"] .plugin-section-banner { background:linear-gradient(135deg,#1E1030,#201008); }
.psb-label { font-size:9.5px; font-weight:700; color:var(--active-fg); letter-spacing:.08em; text-transform:uppercase; flex:1; }
.psb-count { font-size:9px; font-weight:700; background:var(--active-brd); color:var(--active-fg); padding:1px 6px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
.installed-plugins { margin:0 10px 4px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.ip-head { padding:6px 12px; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.ip-add { font-size:10px; color:var(--active-fg); cursor:pointer; font-weight:600; }
.ip-item { display:flex; align-items:center; gap:8px; padding:5px 12px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .1s; }
.ip-item:last-child { border-bottom:none; }
.ip-item:hover { background:var(--bg-hover); }
.ip-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ip-name { font-size:11.5px; color:var(--text-2); flex:1; }

/* ─── SIDEBAR FOOTER ─────────────────────────────────────────── */
.sidebar-footer { margin-top:auto; padding:10px 12px 12px; border-top:1px solid var(--border); flex-shrink:0; }
.user-row { display:flex; align-items:center; gap:8px; }
.user-ava { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--pink)); font-size:10px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-info { flex:1; }
.user-name { font-size:11.5px; font-weight:600; color:var(--text-1); }
.user-role { font-size:9.5px; color:var(--text-3); }

/* ─── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  background:var(--topbar-bg); border-bottom:1px solid var(--border);
  height:52px; padding:0 22px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  transition:background .25s;
}
.breadcrumb { flex:1; display:flex; align-items:center; gap:6px; }
.bc-parent { font-size:12px; color:var(--text-3); }
.bc-sep    { font-size:12px; color:var(--text-3); }
.bc-page   { font-size:14px; font-weight:700; color:var(--text-1); }
.theme-toggle { display:flex; align-items:center; background:var(--bg-page); border:1px solid var(--border); border-radius:8px; padding:2px; }
.tt-btn { width:30px; height:26px; border-radius:6px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-3); transition:all .15s; font-size:13px; }
.tt-btn.active { background:var(--bg-card); color:var(--active-fg); box-shadow:var(--shadow); }
.icon-btn { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-3); transition:all .12s; position:relative; }
.icon-btn:hover { background:var(--bg-hover); color:var(--text-1); }
.notif-dot { position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--pink); border:1.5px solid var(--topbar-bg); }

/* ─── CONTENT AREA ───────────────────────────────────────────── */
.content { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:14px; }

/* ─── WELCOME BANNER ─────────────────────────────────────────── */
.welcome-banner {
  background:linear-gradient(125deg,#6B3D92 0%,#4E2670 45%,#321650 100%);
  border-radius:var(--radius-card); padding:18px 22px;
  display:flex; align-items:center; gap:20px;
  position:relative; overflow:hidden; flex-shrink:0;
}
.wb-glow-1 { position:absolute; right:-20px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(245,200,66,.07); }
.wb-glow-2 { position:absolute; right:80px; bottom:-50px; width:110px; height:110px; border-radius:50%; background:rgba(232,79,124,.09); }
.wb-text { flex:1; z-index:1; }
.wb-label { font-size:10px; font-weight:600; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.12em; }
.wb-title { font-size:18px; font-weight:800; color:#fff; margin:2px 0 4px; }
.wb-sub   { font-size:11.5px; color:rgba(255,255,255,.55); }
.wb-meta  { display:flex; gap:18px; z-index:1; }
.wb-stat  { text-align:center; }
.wb-val   { font-size:20px; font-weight:800; color:#fff; line-height:1; }
.wb-lbl   { font-size:10px; color:rgba(255,255,255,.5); margin-top:2px; }
.wb-divider { width:1px; background:rgba(255,255,255,.12); }

/* ─── STAT CARDS ─────────────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; flex-shrink:0; }
.stat-card {
  background:var(--bg-card); border-radius:var(--radius-card);
  padding:13px 15px; border:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:5px;
  position:relative; overflow:hidden; transition:background .25s,border-color .25s;
}
.stat-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:12px 0 0 12px; }
.sc-p::before  { background:var(--purple); }
.sc-y::before  { background:var(--yellow); }
.sc-o::before  { background:var(--orange); }
.sc-pk::before { background:var(--pink); }
.sc-top { display:flex; align-items:flex-start; justify-content:space-between; }
.sc-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.sc-trend { font-size:10px; font-weight:600; padding:2px 6px; border-radius:5px; }
.tr-u { background:var(--green-s); color:var(--green); }
.tr-d { background:var(--pink-s);  color:var(--pink); }
[data-theme="dark"] .tr-u { background:#0D2E1A; color:#40C870; }
[data-theme="dark"] .tr-d { background:#2E0A18; color:#F080A0; }
.sc-val { font-size:22px; font-weight:800; color:var(--text-1); line-height:1; }
.sc-sub { font-size:10.5px; color:var(--text-3); }

/* ─── SECTION CARDS ──────────────────────────────────────────── */
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.section-card { background:var(--bg-card); border-radius:var(--radius-card); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; transition:background .25s; }
.sc-head { padding:12px 15px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sch-title { font-size:12.5px; font-weight:700; color:var(--text-1); flex:1; }
.sch-action { font-size:11px; color:var(--active-fg); cursor:pointer; font-weight:500; white-space:nowrap; }

/* ─── ACTIVITY / NOTIF / USER ITEMS ──────────────────────────── */
.act-item { display:flex; align-items:flex-start; gap:9px; padding:9px 15px; border-bottom:1px solid var(--border); transition:background .1s; }
.act-item:last-child { border-bottom:none; }
.act-item:hover { background:var(--bg-hover); }
.act-ava { width:26px; height:26px; border-radius:7px; font-size:9.5px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.act-body { flex:1; }
.act-text { font-size:11.5px; color:var(--text-1); }
.act-text b { color:var(--active-fg); }
.act-time { font-size:10px; color:var(--text-3); margin-top:1px; }
.act-chip { font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:5px; flex-shrink:0; margin-top:2px; }
.notif-item { display:flex; align-items:flex-start; gap:9px; padding:10px 15px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { background:var(--bg-active); }
.ni-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ni-body { flex:1; }
.ni-title { font-size:11.5px; font-weight:600; color:var(--text-1); }
.ni-sub   { font-size:10px; color:var(--text-3); margin-top:1px; }
.ni-dot   { width:7px; height:7px; border-radius:50%; background:var(--purple); flex-shrink:0; margin-top:5px; }
.ni-dot.hidden { visibility:hidden; }
.user-item { display:flex; align-items:center; gap:9px; padding:8px 15px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.user-item:last-child { border-bottom:none; }
.user-item:hover { background:var(--bg-hover); }
.ui-ava { width:26px; height:26px; border-radius:7px; font-size:9.5px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ui-name { font-size:12px; font-weight:600; color:var(--text-1); }
.ui-role { font-size:10px; color:var(--text-3); }
.ui-status { font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; flex-shrink:0; }
.ui-perm  { font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:5px; flex-shrink:0; }

/* ─── PLUGIN STORE (dashboard) ────────────────────────────────── */
.store-grid { display:grid; grid-template-columns:1fr 1fr; }
.si { padding:11px 13px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); cursor:pointer; transition:background .1s; }
.si:nth-child(even) { border-right:none; }
.si:nth-last-child(-n+2) { border-bottom:none; }
.si:hover { background:var(--bg-hover); }
.si-top { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.si-ico { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.si-name { font-size:12px; font-weight:700; color:var(--text-1); }
.si-desc { font-size:10.5px; color:var(--text-3); line-height:1.4; }
.si-cta  { margin-top:5px; font-size:10px; font-weight:700; }
.si-cta.inst  { color:var(--green); }
.si-cta.avail { color:var(--active-fg); }

/* ─── PLUGIN PAGE ─────────────────────────────────────────────── */
.plugin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.plugin-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card); padding:16px; transition:background .2s; }
.plugin-card.installed { border-color:var(--active-brd); }
.plugin-card-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.plugin-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.plugin-name { font-size:13px; font-weight:700; color:var(--text-1); }
.plugin-meta { font-size:10.5px; color:var(--text-3); margin-top:1px; }
.plugin-desc { font-size:11.5px; color:var(--text-2); line-height:1.5; margin-bottom:12px; }
.plugin-status-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; flex-shrink:0; }
.installed-badge { background:var(--green-s); color:var(--green); }
.available-badge { background:var(--bg-hover); color:var(--text-3); }
[data-theme="dark"] .installed-badge { background:#0D2E1A; color:#40C870; }
.plugin-actions { display:flex; gap:8px; }

/* ─── TABLE ──────────────────────────────────────────────────── */
.table-card { background:var(--bg-card); border-radius:var(--radius-card); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
.table-header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:600px; }
thead th { padding:9px 14px; text-align:left; font-size:10.5px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.07em; background:var(--bg-page); border-bottom:1px solid var(--border); }
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg-hover); }
tbody td { padding:10px 14px; font-size:12.5px; color:var(--text-1); }

/* ─── BADGES / PILLS ──────────────────────────────────────────── */
.st-on  { background:var(--green-s); color:var(--green); }
.st-off { background:var(--bg-hover); color:var(--text-3); }
[data-theme="dark"] .st-on { background:#0D2E1A; color:#40C870; }
.status-pill { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px; display:inline-block; }
.role-badge { background:var(--purple-s); color:var(--purple); font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:5px; display:inline-block; }
[data-theme="dark"] .role-badge { background:#2A1848; color:#C09AE8; }
.perm-chip { font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:6px; display:inline-block; }
.perm-on  { background:var(--green-s); color:var(--green); border:1px solid #B3E6C9; }
.perm-off { background:var(--bg-hover); color:var(--text-3); border:1px solid var(--border); }
[data-theme="dark"] .perm-on { background:#0D2E1A; color:#40C870; border-color:#1A4830; }

/* ─── RIGHT PANEL ─────────────────────────────────────────────── */
.right-panel { width:178px; min-width:178px; background:var(--bg-right); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; transition:background .25s; }
.rp-title { font-size:12.5px; font-weight:700; color:var(--text-1); padding:14px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.rp-group { border-bottom:1px solid var(--border); padding:7px 0 4px; }
.rp-group-lbl { font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); padding:0 13px 4px; }
.rp-item { display:flex; align-items:center; gap:8px; padding:6px 8px; margin:1px 5px; border-radius:7px; cursor:pointer; transition:background .12s; }
.rp-item:hover { background:var(--bg-hover); }
.rp-ico { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rp-text { font-size:11.5px; font-weight:500; color:var(--text-1); }
.rp-text.danger { color:var(--pink); }
.ic-p  { background:var(--purple-s); border:1px solid var(--purple-m); }
.ic-y  { background:var(--yellow-s); border:1px solid var(--yellow-m); }
.ic-o  { background:var(--orange-s); border:1px solid var(--orange-m); }
.ic-pk { background:var(--pink-s);   border:1px solid var(--pink-m); }
.ic-g  { background:var(--green-s);  border:1px solid #B3E6C9; }
.ic-n  { background:var(--bg-hover); border:1px solid var(--border); }
[data-theme="dark"] .ic-p  { background:#2A1848; border-color:#4A3068; }
[data-theme="dark"] .ic-y  { background:#2A2008; border-color:#4A3800; }
[data-theme="dark"] .ic-o  { background:#2A1808; border-color:#4A2808; }
[data-theme="dark"] .ic-pk { background:#2A0818; border-color:#4A1830; }
[data-theme="dark"] .ic-g  { background:#0A2018; border-color:#1A4830; }
[data-theme="dark"] .ic-n  { background:var(--bg-hover); border-color:var(--border); }
.health-widget { margin:10px 11px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:10px 11px; }
.hw-title { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); margin-bottom:9px; }
.hw-row { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.hw-row:last-child { margin-bottom:0; }
.hw-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.hw-label { font-size:10.5px; color:var(--text-2); flex:1; }
.hw-val { font-size:9.5px; font-family:'JetBrains Mono',monospace; color:var(--text-3); }

/* ─── FORMS ──────────────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-group:last-child { margin-bottom:0; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-label { display:block; font-size:11.5px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.form-input {
  width:100%; padding:8px 12px; border:1.5px solid var(--border); border-radius:8px;
  background:var(--bg-page); color:var(--text-1); font-size:13px;
  font-family:'Outfit',sans-serif; outline:none; transition:border-color .15s;
}
.form-input:focus { border-color:var(--purple); }
textarea.form-input { resize:vertical; }
.search-input {
  padding:7px 12px; border:1.5px solid var(--border); border-radius:8px;
  background:var(--bg-page); color:var(--text-1); font-size:12.5px;
  font-family:'Outfit',sans-serif; outline:none; transition:border-color .15s; width:100%;
}
.search-input:focus { border-color:var(--purple); }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary {
  background:var(--purple); color:#fff; border:none; border-radius:8px;
  padding:8px 16px; font-size:12.5px; font-weight:700; cursor:pointer;
  font-family:'Outfit',sans-serif; transition:background .15s; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 2px 8px rgba(123,79,158,.2);
}
.btn-primary:hover { background:#6a3f8f; }
.btn-ghost {
  background:transparent; color:var(--text-2); border:1.5px solid var(--border);
  border-radius:8px; padding:7px 14px; font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:'Outfit',sans-serif; transition:all .15s; display:inline-flex; align-items:center; gap:6px;
}
.btn-ghost:hover { border-color:var(--border-mid); color:var(--text-1); background:var(--bg-hover); }
.btn-danger { background:var(--pink); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:'Outfit',sans-serif; transition:background .15s; }
.btn-danger:hover { background:#c93060; }
.btn-sm { padding:5px 10px !important; font-size:11px !important; }
.act-btn { padding:4px 8px; border-radius:6px; border:1px solid var(--border); background:transparent; cursor:pointer; font-size:12px; color:var(--text-2); transition:all .12s; }
.act-btn:hover { background:var(--bg-hover); }
.act-edit:hover { border-color:var(--purple); color:var(--purple); }
.act-del:hover  { border-color:var(--pink);   color:var(--pink); }

/* ─── TABS ────────────────────────────────────────────────────── */
.tab-strip { display:flex; border-bottom:1px solid var(--border); }
.tab { padding:8px 14px; font-size:12px; font-weight:500; color:var(--text-3); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:all .12s; text-decoration:none; white-space:nowrap; }
.tab:hover  { color:var(--text-1); }
.tab.active { color:var(--purple); border-bottom-color:var(--purple); font-weight:700; }
.tab-count  { font-size:10px; background:var(--pink-m); color:var(--pink); padding:1px 5px; border-radius:8px; margin-left:4px; font-family:'JetBrains Mono',monospace; }

/* ─── MODAL ───────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg-card); border-radius:14px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); margin:20px; border:1px solid var(--border); }
.modal-lg { max-width:600px; }
.modal-header { padding:16px 20px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:15px; font-weight:700; }
.modal-close { background:none; border:none; font-size:16px; cursor:pointer; color:var(--text-3); padding:2px 6px; border-radius:5px; }
.modal-close:hover { background:var(--bg-hover); }
.modal form { padding:20px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }

/* ─── PERM GRID ───────────────────────────────────────────────── */
.perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.perm-toggle { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; border:1.5px solid var(--border); cursor:pointer; transition:border-color .15s; font-size:12px; color:var(--text-2); }
.perm-toggle:hover { border-color:var(--purple); }
.perm-toggle input:checked + span { color:var(--purple); font-weight:600; }
.perm-toggle input { accent-color:var(--purple); }

/* ─── TOGGLE SWITCH ──────────────────────────────────────────── */
.toggle-switch { display:flex; align-items:center; gap:0; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-slider { width:38px; height:20px; background:var(--border); border-radius:20px; position:relative; transition:background .2s; flex-shrink:0; }
.toggle-slider::after { content:''; position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle-switch input:checked + .toggle-slider { background:var(--purple); }
.toggle-switch input:checked + .toggle-slider::after { left:21px; }

/* ─── ALERTS ─────────────────────────────────────────────────── */
.alert { padding:10px 16px; border-radius:8px; font-size:12.5px; margin-bottom:4px; }
.alert-success { background:var(--green-s); color:#0D5C30; border:1px solid #B3E6C9; }
.alert-error   { background:var(--pink-s);  color:#9A1A45; border:1px solid var(--pink-m); }

/* ─── TOAST ──────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:11px 16px; border-radius:10px; font-size:13px; font-weight:600; min-width:220px; max-width:360px; box-shadow:0 4px 20px rgba(0,0,0,.18); animation:slideIn .25s ease; border:1px solid transparent; }
.toast.success { background:#E8F8EF; color:#0D5C30; border-color:#B3E6C9; }
.toast.error   { background:var(--pink-s); color:#9A1A45; border-color:var(--pink-m); }
.toast.info    { background:var(--purple-s); color:#3D1060; border-color:var(--purple-m); }
@keyframes slideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-mid); border-radius:2px; }

/* ═══════════════════════════════════════════════════════════════
   DISPLAY SIZE SCALING
   data-size="normal"  → default (no overrides needed)
   data-size="large"   → ~115% scale
   data-size="xlarge"  → ~130% scale
═══════════════════════════════════════════════════════════════ */

/* ── LARGE ── */
[data-size="large"] .logo-name                { font-size: 16px; }
[data-size="large"] .logo-sub                 { font-size: 10.5px; }
[data-size="large"] .tenant-name              { font-size: 12.5px; }
[data-size="large"] .ws-name                  { font-size: 13px; }
[data-size="large"] .nav-section-label        { font-size: 10.5px; }
[data-size="large"] .nav-text                 { font-size: 14px; }
[data-size="large"] .nav-badge                { font-size: 11.5px; }
[data-size="large"] .nav-item                 { padding: 8px 10px; }
[data-size="large"] .nav-icon                 { width: 30px; height: 30px; }
[data-size="large"] .nav-icon svg             { width: 16px; height: 16px; }
[data-size="large"] .core-pill                { font-size: 9.5px; }
[data-size="large"] .psb-label                { font-size: 11px; }
[data-size="large"] .ip-name                  { font-size: 13px; }
[data-size="large"] .user-name                { font-size: 13px; }
[data-size="large"] .user-role                { font-size: 11px; }
[data-size="large"] .user-ava                 { width: 30px; height: 30px; font-size: 11px; }
[data-size="large"] .topbar                   { height: 58px; }
[data-size="large"] .bc-parent                { font-size: 13.5px; }
[data-size="large"] .bc-page                  { font-size: 16px; }
[data-size="large"] .wb-title                 { font-size: 20px; }
[data-size="large"] .wb-sub                   { font-size: 13px; }
[data-size="large"] .wb-val                   { font-size: 22px; }
[data-size="large"] .wb-lbl                   { font-size: 11.5px; }
[data-size="large"] .sc-val                   { font-size: 25px; }
[data-size="large"] .sc-label                 { font-size: 11.5px; }
[data-size="large"] .sc-sub                   { font-size: 12px; }
[data-size="large"] .sc-trend                 { font-size: 11.5px; }
[data-size="large"] .sch-title                { font-size: 14px; }
[data-size="large"] .sch-action               { font-size: 12.5px; }
[data-size="large"] .act-ava                  { width: 28px; height: 28px; font-size: 11px; }
[data-size="large"] .act-text                 { font-size: 13px; }
[data-size="large"] .act-time                 { font-size: 11.5px; }
[data-size="large"] .act-chip                 { font-size: 11px; }
[data-size="large"] .ni-icon                  { width: 30px; height: 30px; }
[data-size="large"] .ni-title                 { font-size: 13px; }
[data-size="large"] .ni-sub                   { font-size: 11.5px; }
[data-size="large"] .ni-dot                   { width: 8px; height: 8px; }
[data-size="large"] .ui-ava                   { width: 28px; height: 28px; font-size: 11px; }
[data-size="large"] .ui-name                  { font-size: 13.5px; }
[data-size="large"] .ui-role                  { font-size: 11.5px; }
[data-size="large"] .ui-status                { font-size: 11.5px; padding: 3px 9px; }
[data-size="large"] .ui-perm                  { font-size: 11px; }
[data-size="large"] .si-name                  { font-size: 13.5px; }
[data-size="large"] .si-desc                  { font-size: 12px; }
[data-size="large"] .plugin-name              { font-size: 14.5px; }
[data-size="large"] .plugin-desc              { font-size: 13px; }
[data-size="large"] .plugin-meta              { font-size: 12px; }
[data-size="large"] thead th                  { font-size: 12px; padding: 11px 14px; }
[data-size="large"] tbody td                  { font-size: 14px; padding: 12px 14px; }
[data-size="large"] .form-label               { font-size: 13px; }
[data-size="large"] .form-input               { font-size: 14.5px; padding: 10px 13px; }
[data-size="large"] .search-input             { font-size: 14px; }
[data-size="large"] .btn-primary              { font-size: 14px; padding: 9px 18px; }
[data-size="large"] .btn-ghost                { font-size: 14px; padding: 9px 16px; }
[data-size="large"] .btn-danger               { font-size: 14px; padding: 9px 18px; }
[data-size="large"] .btn-sm                   { font-size: 12.5px !important; padding: 6px 11px !important; }
[data-size="large"] .tab                      { font-size: 13.5px; padding: 10px 16px; }
[data-size="large"] .modal-header h3          { font-size: 17px; }
[data-size="large"] .modal form               { padding: 22px; }
[data-size="large"] .role-badge               { font-size: 12px; padding: 3px 9px; }
[data-size="large"] .status-pill              { font-size: 12px; padding: 3px 9px; }
[data-size="large"] .perm-chip                { font-size: 12px; padding: 4px 10px; }
[data-size="large"] .perm-toggle              { font-size: 13.5px; padding: 9px 11px; }
[data-size="large"] .rp-title                 { font-size: 14px; }
[data-size="large"] .rp-group-lbl             { font-size: 10.5px; }
[data-size="large"] .rp-text                  { font-size: 13px; }
[data-size="large"] .rp-item                  { padding: 8px 9px; }
[data-size="large"] .rp-ico                   { width: 28px; height: 28px; }
[data-size="large"] .rp-ico svg               { width: 15px; height: 15px; }
[data-size="large"] .hw-title                 { font-size: 11px; }
[data-size="large"] .hw-label                 { font-size: 12px; }
[data-size="large"] .hw-val                   { font-size: 11px; }
[data-size="large"] .toast                    { font-size: 14.5px; }
[data-size="large"] .act-btn                  { font-size: 13px; }
[data-size="large"] .sc-head                  { padding: 14px 16px; }

/* ── EXTRA LARGE ── */
[data-size="xlarge"] .logo-name               { font-size: 18px; }
[data-size="xlarge"] .logo-sub                { font-size: 12px; }
[data-size="xlarge"] .tenant-name             { font-size: 14px; }
[data-size="xlarge"] .ws-name                 { font-size: 14.5px; }
[data-size="xlarge"] .nav-section-label       { font-size: 12px; }
[data-size="xlarge"] .nav-text                { font-size: 15.5px; }
[data-size="xlarge"] .nav-badge               { font-size: 13px; }
[data-size="xlarge"] .nav-item                { padding: 9px 10px; }
[data-size="xlarge"] .nav-icon                { width: 32px; height: 32px; }
[data-size="xlarge"] .nav-icon svg            { width: 17px; height: 17px; }
[data-size="xlarge"] .core-pill               { font-size: 11px; }
[data-size="xlarge"] .psb-label               { font-size: 12.5px; }
[data-size="xlarge"] .ip-name                 { font-size: 14.5px; }
[data-size="xlarge"] .user-name               { font-size: 14.5px; }
[data-size="xlarge"] .user-role               { font-size: 12.5px; }
[data-size="xlarge"] .user-ava                { width: 34px; height: 34px; font-size: 12px; }
[data-size="xlarge"] .topbar                  { height: 64px; }
[data-size="xlarge"] .bc-parent               { font-size: 15px; }
[data-size="xlarge"] .bc-page                 { font-size: 18px; }
[data-size="xlarge"] .wb-title                { font-size: 23px; }
[data-size="xlarge"] .wb-sub                  { font-size: 14.5px; }
[data-size="xlarge"] .wb-val                  { font-size: 24px; }
[data-size="xlarge"] .wb-lbl                  { font-size: 13px; }
[data-size="xlarge"] .sc-val                  { font-size: 28px; }
[data-size="xlarge"] .sc-label                { font-size: 13px; }
[data-size="xlarge"] .sc-sub                  { font-size: 13.5px; }
[data-size="xlarge"] .sc-trend                { font-size: 13px; }
[data-size="xlarge"] .sch-title               { font-size: 15.5px; }
[data-size="xlarge"] .sch-action              { font-size: 14px; }
[data-size="xlarge"] .act-ava                 { width: 32px; height: 32px; font-size: 12px; }
[data-size="xlarge"] .act-text                { font-size: 14.5px; }
[data-size="xlarge"] .act-time                { font-size: 13px; }
[data-size="xlarge"] .act-chip                { font-size: 12.5px; }
[data-size="xlarge"] .ni-icon                 { width: 34px; height: 34px; }
[data-size="xlarge"] .ni-title                { font-size: 14.5px; }
[data-size="xlarge"] .ni-sub                  { font-size: 13px; }
[data-size="xlarge"] .ni-dot                  { width: 9px; height: 9px; }
[data-size="xlarge"] .ui-ava                  { width: 32px; height: 32px; font-size: 12px; }
[data-size="xlarge"] .ui-name                 { font-size: 15px; }
[data-size="xlarge"] .ui-role                 { font-size: 13px; }
[data-size="xlarge"] .ui-status               { font-size: 13px; padding: 4px 10px; }
[data-size="xlarge"] .ui-perm                 { font-size: 12.5px; }
[data-size="xlarge"] .si-name                 { font-size: 15px; }
[data-size="xlarge"] .si-desc                 { font-size: 13.5px; }
[data-size="xlarge"] .plugin-name             { font-size: 16px; }
[data-size="xlarge"] .plugin-desc             { font-size: 14.5px; }
[data-size="xlarge"] .plugin-meta             { font-size: 13.5px; }
[data-size="xlarge"] thead th                 { font-size: 13.5px; padding: 12px 15px; }
[data-size="xlarge"] tbody td                 { font-size: 15.5px; padding: 14px 15px; }
[data-size="xlarge"] .form-label              { font-size: 14.5px; }
[data-size="xlarge"] .form-input              { font-size: 16px; padding: 11px 14px; }
[data-size="xlarge"] .search-input            { font-size: 15.5px; }
[data-size="xlarge"] .btn-primary             { font-size: 15.5px; padding: 10px 20px; }
[data-size="xlarge"] .btn-ghost               { font-size: 15.5px; padding: 10px 18px; }
[data-size="xlarge"] .btn-danger              { font-size: 15.5px; padding: 10px 20px; }
[data-size="xlarge"] .btn-sm                  { font-size: 14px !important; padding: 7px 13px !important; }
[data-size="xlarge"] .tab                     { font-size: 15px; padding: 11px 18px; }
[data-size="xlarge"] .modal-header h3         { font-size: 19px; }
[data-size="xlarge"] .modal form              { padding: 24px; }
[data-size="xlarge"] .role-badge              { font-size: 13.5px; padding: 4px 10px; }
[data-size="xlarge"] .status-pill             { font-size: 13.5px; padding: 4px 10px; }
[data-size="xlarge"] .perm-chip               { font-size: 13.5px; padding: 5px 11px; }
[data-size="xlarge"] .perm-toggle             { font-size: 15px; padding: 10px 12px; }
[data-size="xlarge"] .rp-title                { font-size: 15.5px; }
[data-size="xlarge"] .rp-group-lbl            { font-size: 12px; }
[data-size="xlarge"] .rp-text                 { font-size: 14.5px; }
[data-size="xlarge"] .rp-item                 { padding: 9px 10px; }
[data-size="xlarge"] .rp-ico                  { width: 30px; height: 30px; }
[data-size="xlarge"] .rp-ico svg              { width: 16px; height: 16px; }
[data-size="xlarge"] .hw-title                { font-size: 12.5px; }
[data-size="xlarge"] .hw-label                { font-size: 13.5px; }
[data-size="xlarge"] .hw-val                  { font-size: 12.5px; }
[data-size="xlarge"] .toast                   { font-size: 16px; }
[data-size="xlarge"] .act-btn                 { font-size: 14.5px; }
[data-size="xlarge"] .sc-head                 { padding: 16px 18px; }