/* ============================================================
   iSeeMore Portal — Desktop Shell v0.2
   portal.iseemore.ru · Vanilla JS SPA
   Modules in topbar + contextual sidebar + JSON dashboard
   ============================================================ */

/* ---- TOKENS ---- */
:root, [data-theme="dark"] {
  --bg:#0f172a; --surface:#1e293b; --surface2:#334155; --surface3:#475569;
  --border:#475569; --border-light:#334155;
  --primary:#3b82f6; --primary-hover:#2563eb; --primary-bg:rgba(59,130,246,0.12);
  --secondary:#8b5cf6; --secondary-bg:rgba(139,92,246,0.12);
  --success:#22c55e; --success-bg:#052e16; --success-border:#16a34a;
  --warning:#eab308; --warning-bg:#422006; --warning-border:#ca8a04;
  --danger:#ef4444; --danger-bg:#450a0a; --danger-border:#dc2626;
  --info:#06b6d4; --info-bg:#083344; --info-border:#0891b2;
  --orange:#f97316; --orange-bg:#431407; --orange-border:#ea580c;
  --text:#f1f5f9; --text2:#94a3b8; --text3:#64748b;
  --shadow:0 4px 12px rgba(0,0,0,0.3); --shadow-lg:0 8px 24px rgba(0,0,0,0.4);
  --radius:10px; --radius-sm:6px; --radius-lg:14px; --radius-full:9999px;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --sidebar-w:240px; --header-h:48px; --transition:0.2s ease;
}
[data-theme="light"] {
  --bg:#f8fafc; --surface:#ffffff; --surface2:#f1f5f9; --surface3:#e2e8f0;
  --border:#cbd5e1; --border-light:#e2e8f0;
  --primary:#2563eb; --primary-hover:#1d4ed8; --primary-bg:rgba(37,99,235,0.08);
  --secondary:#7c3aed; --secondary-bg:rgba(124,58,237,0.08);
  --success:#16a34a; --success-bg:#f0fdf4; --success-border:#86efac;
  --warning:#ca8a04; --warning-bg:#fefce8; --warning-border:#fde047;
  --danger:#dc2626; --danger-bg:#fef2f2; --danger-border:#fca5a5;
  --info:#0891b2; --info-bg:#ecfeff; --info-border:#67e8f9;
  --orange:#ea580c; --orange-bg:#fff7ed; --orange-border:#fdba74;
  --text:#0f172a; --text2:#475569; --text3:#94a3b8;
  --shadow:0 4px 12px rgba(0,0,0,0.08); --shadow-lg:0 8px 24px rgba(0,0,0,0.12);
}

/* ---- RESET ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13px;line-height:1.6;height:100vh;overflow:hidden;transition:background var(--transition),color var(--transition)}
a{color:var(--primary);text-decoration:none}

/* ---- LAYOUT ---- */
.app{display:flex;flex-direction:column;height:100vh}
.app-body{display:flex;flex:1;overflow:hidden}

/* ---- TOPBAR ---- */
.topbar{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:0;flex-shrink:0;transition:background var(--transition);z-index:10}
.topbar-brand{display:flex;align-items:center;gap:8px;padding-right:20px;border-right:1px solid var(--border);margin-right:4px;height:100%}
.topbar-brand .logo{font-size:15px;font-weight:700;white-space:nowrap}
.topbar-brand .logo span{color:var(--primary)}

/* Module tabs */
.module-tabs{display:flex;align-items:center;height:100%;gap:0;margin-left:auto;overflow:hidden}
.mtab{display:flex;align-items:center;gap:7px;padding:0 14px;height:100%;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition);white-space:nowrap;text-decoration:none;flex-shrink:0}
.mtab:hover{color:var(--text);background:var(--surface2)}
.mtab.mtab-active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.mtab .mtab-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mtab .mtab-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtab .mtab-dot{width:6px;height:6px;border-radius:50%;background:var(--danger);flex-shrink:0}

/* More dropdown */
.more-wrap{position:relative;height:100%;display:flex;align-items:center}
.more-btn{display:flex;align-items:center;gap:4px;padding:0 12px;height:100%;font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;border:none;background:none;transition:all var(--transition);white-space:nowrap;font-family:var(--font)}
.more-btn:hover{color:var(--text);background:var(--surface2)}
.more-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.more-dropdown{position:absolute;top:100%;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:200px;display:none;z-index:50}
.more-dropdown.open{display:block}
.more-dropdown .mtab-dd{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;transition:all var(--transition)}
.more-dropdown .mtab-dd:hover{background:var(--surface2);color:var(--text)}
.more-dropdown .mtab-dd .mtab-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.more-dropdown .mtab-dd .mtab-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Topbar right */
.topbar-right{display:flex;align-items:center;gap:6px;padding-left:12px;border-left:1px solid var(--border);height:100%}
.topbar-btn{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);position:relative}
.topbar-btn:hover{background:var(--surface2);color:var(--text)}
.topbar-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar-btn .dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--danger);border:1.5px solid var(--surface)}
.topbar-user{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition)}
.topbar-user:hover{background:var(--surface2)}
.topbar-user .avatar{width:28px;height:28px;font-size:10px}
.topbar-user .uname{font-size:12px;font-weight:600}

/* ---- SIDEBAR (contextual per module) ---- */
.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:background var(--transition);overflow:hidden}
.sidebar-header{padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.sidebar-header h3{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.sidebar-header h3 svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar-header p{font-size:11px;color:var(--text3);margin-top:2px}
.sidebar-nav{flex:1;padding:6px 8px;overflow-y:auto}
.sidebar-section{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text3);padding:12px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition);margin-bottom:1px;text-decoration:none}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--primary-bg);color:var(--primary);font-weight:600}
.nav-item .icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-item .icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:var(--radius-full);min-width:16px;text-align:center}
.sidebar-footer{padding:8px;border-top:1px solid var(--border)}

/* ---- MAIN CONTENT ---- */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.content{flex:1;overflow-y:auto;padding:20px 24px}
.content-max{max-width:1200px}

/* ---- SCREENS ---- */
.screen{display:none}
.screen.active{display:block}

/* ---- DASHBOARD WIDGETS (JSON-driven) ---- */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;transition:box-shadow var(--transition)}
.widget:hover{box-shadow:var(--shadow)}
.widget-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.widget-title{font-size:13px;font-weight:700}
.widget-subtitle{font-size:11px;color:var(--text3)}

/* Widget spans */
.w-3{grid-column:span 3}.w-4{grid-column:span 4}.w-6{grid-column:span 6}.w-8{grid-column:span 8}.w-12{grid-column:span 12}

/* Stat widget */
.w-stat .ws-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.w-stat .ws-val{font-size:26px;font-weight:700}
.w-stat .ws-sub{font-size:11px;color:var(--text3);margin-top:4px;display:flex;align-items:center;gap:4px}
.ws-up{color:var(--success)}.ws-down{color:var(--danger)}

/* Tiles widget */
.w-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.w-tile{padding:16px 12px;border-radius:var(--radius-lg);border:1px solid var(--border);text-align:center;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all var(--transition)}
.w-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.w-tile-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.w-tile-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.w-tile-name{font-size:12px;font-weight:700}
.w-tile-desc{font-size:10px;color:var(--text3);margin-top:2px}

/* Feed widget */
.w-feed-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-light)}
.w-feed-item:last-child{border:none}
.w-feed-icon{width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.w-feed-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.w-feed-text{font-size:12px;flex:1}
.w-feed-time{font-size:10px;color:var(--text3);margin-top:2px}

/* KPI chips widget */
.w-kpi-row{display:flex;gap:8px;flex-wrap:wrap}
.kpi-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--radius-full);background:var(--surface2);font-size:12px;font-weight:600;border:1px solid var(--border)}
.kpi-chip .val{color:var(--primary)}

/* ---- TEAM SCREEN ---- */
.search-box{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;width:280px;transition:border-color var(--transition)}
.search-box:focus-within{border-color:var(--primary)}
.search-box input{background:none;border:none;color:var(--text);font-family:var(--font);font-size:12px;outline:none;flex:1}
.search-box input::placeholder{color:var(--text3)}
.search-box svg{width:15px;height:15px;stroke:var(--text3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.team-table{width:100%;border-collapse:collapse}
.team-table th{text-align:left;padding:9px 12px;border-bottom:2px solid var(--border);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3)}
.team-table td{padding:9px 12px;border-bottom:1px solid var(--border-light)}
.team-table tr:hover td{background:var(--surface)}
.team-table .emp{display:flex;align-items:center;gap:10px}
.team-table .emp-name{font-weight:600;font-size:12px}

/* ── Team tree (Команда) ── */
.team-tree{width:100%;border-collapse:collapse;font-size:13px}
.team-tree th{text-align:left;padding:12px 14px;border-bottom:2px solid var(--border);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3)}
.team-tree th.r{text-align:right}
.team-tree td{padding:10px 14px;border-bottom:1px solid var(--border)}
.team-tree td.r{text-align:right;font-family:var(--mono);font-size:12px}
.team-tree .t-rm{background:var(--surface);font-weight:700;cursor:pointer;user-select:none}
.team-tree .t-rm:hover{background:var(--primary-bg)}
.team-tree .t-rm td{border-bottom:2px solid var(--border);font-size:14px}
.team-tree .t-rm td:first-child{padding-left:14px}
.team-tree .t-tm{font-weight:600;cursor:pointer;user-select:none}
.team-tree .t-tm:hover{background:var(--primary-bg)}
.team-tree .t-tm td{font-size:13px}
.team-tree .t-tm td:first-child{padding-left:32px}
.team-tree .t-sv{cursor:pointer;user-select:none;color:var(--text2)}
.team-tree .t-sv:hover{background:var(--primary-bg)}
.team-tree .t-sv td{font-size:12px;font-weight:500}
.team-tree .t-sv td:first-child{padding-left:52px}
.team-tree .t-tp td{font-size:12px;font-weight:400;color:var(--text2)}
.team-tree .t-tp:hover td{background:var(--surface2)}
.team-tree .t-tp td:first-child{padding-left:72px}
.team-tree .t-rm .r,.team-tree .t-tm .r{font-weight:700}
.team-tree .chevron{display:inline-block;margin-right:6px;font-size:11px;color:var(--text3);transition:transform 0.15s}
.team-lvl-btns{display:flex;gap:4px;align-items:center;margin-bottom:14px}
.team-lvl-btns .lbl{font-size:11px;color:var(--text3);margin-right:4px}
.team-lvl-btns button{padding:5px 14px;border-radius:6px;font-size:12px;font-weight:600;background:var(--surface2);color:var(--text2);border:1px solid var(--border);cursor:pointer;transition:all 0.15s}
.team-lvl-btns button:hover{background:var(--surface);color:var(--text)}
.team-lvl-btns button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.role-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px}
.role-rm{background:var(--primary-bg);color:var(--primary)}
.role-tm{background:var(--secondary-bg);color:var(--secondary)}
.role-sv{background:var(--warning-bg);color:var(--warning)}
.role-tp{background:var(--success-bg);color:var(--success)}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.avatar-sm{width:26px;height:26px;font-size:10px}
.tile-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 7px;border-radius:4px;border:1px solid}
.badge-done{background:var(--success-bg);color:var(--success);border-color:var(--success-border)}
.badge-wip{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border)}
.badge-next{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-border)}
.badge-plan{background:var(--surface2);color:var(--text3);border-color:var(--border)}
.badge-ext{background:var(--info-bg);color:var(--info);border-color:var(--info-border)}

/* ---- PROFILE ---- */
.profile-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.profile-header{background:linear-gradient(135deg,var(--primary),var(--secondary));padding:20px;display:flex;align-items:center;gap:16px}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff}
.profile-info h2{font-size:18px;font-weight:700;color:#fff}
.profile-info p{font-size:12px;color:rgba(255,255,255,0.8)}
.profile-body{padding:20px}
.profile-section{margin-bottom:20px}
.profile-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:10px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.profile-field{padding:10px;background:var(--surface2);border-radius:var(--radius-sm);border:1px solid var(--border)}
.profile-field .label{font-size:10px;color:var(--text3);margin-bottom:3px}
.profile-field .value{font-size:13px;font-weight:600}
.data-layers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.data-layer{padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2)}
.data-layer .from{font-size:10px;color:var(--text3);margin-bottom:3px;display:flex;align-items:center;gap:5px}
.data-layer .from svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.data-layer .data{font-size:12px;font-weight:600}
.data-layer .sub{font-size:10px;color:var(--text2);margin-top:2px}

/* ---- SERVICE SCREENS ---- */
.service-empty{text-align:center;padding:48px 20px;color:var(--text3);border:2px dashed var(--border);border-radius:var(--radius-lg)}
.service-empty h3{font-size:15px;font-weight:600;color:var(--text2);margin-bottom:4px}
.service-empty p{font-size:12px}

/* ---- SETTINGS ---- */
.settings-group{margin-bottom:20px}
.settings-group-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:10px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px}
.settings-row .sr-label{font-size:12px;font-weight:600}
.settings-row .sr-desc{font-size:10px;color:var(--text3);margin-top:1px}
.toggle-switch{width:36px;height:20px;border-radius:10px;background:var(--surface3);cursor:pointer;position:relative;transition:background var(--transition);flex-shrink:0}
.toggle-switch.on{background:var(--primary)}
.toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition)}
.toggle-switch.on::after{transform:translateX(16px)}

/* ---- NOTIFICATIONS ---- */
.notif-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:300;transition:right 0.3s ease;display:flex;flex-direction:column}
.notif-panel.open{right:0}
.notif-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-header h3{font-size:14px;font-weight:700}
.notif-close{background:none;border:none;color:var(--text2);cursor:pointer;padding:4px}
.notif-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.notif-body{flex:1;overflow-y:auto;padding:10px}
.notif-item{padding:10px;border-radius:var(--radius-sm);margin-bottom:6px;border-left:3px solid;cursor:pointer;transition:background var(--transition)}
.notif-item:hover{background:var(--surface2)}
.notif-item.n-info{border-color:var(--info);background:var(--info-bg)}
.notif-item.n-success{border-color:var(--success);background:var(--success-bg)}
.notif-item.n-warning{border-color:var(--warning);background:var(--warning-bg)}
.notif-title{font-size:12px;font-weight:600;margin-bottom:2px}
.notif-desc{font-size:11px;color:var(--text2)}
.notif-time{font-size:10px;color:var(--text3);margin-top:3px}
.notif-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:299;display:none}
.notif-overlay.open{display:block}

/* ---- TOAST ---- */
.toast-container{position:fixed;top:60px;right:20px;z-index:400;display:flex;flex-direction:column;gap:6px}
.toast{padding:10px 14px;border-radius:var(--radius);border-left:4px solid;display:flex;align-items:center;gap:8px;font-size:12px;box-shadow:var(--shadow-lg);animation:slideIn 0.3s ease;min-width:280px}
.toast.t-success{background:var(--success-bg);border-color:var(--success)}
.toast svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ---- ADMIN: ORG TREE ---- */
.org-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.org-toolbar .search-box{flex:1;min-width:200px;max-width:340px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:all var(--transition);font-family:var(--font)}
.btn:hover{background:var(--surface2)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-sm svg{width:12px;height:12px}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--surface2);border-color:var(--border)}
.btn-danger{color:var(--danger);border-color:var(--danger-border)}
.btn-danger:hover{background:var(--danger-bg)}
.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab-bar-item{padding:8px 16px;font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition)}
.tab-bar-item:hover{color:var(--text)}
.tab-bar-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* Org tree */
.org-tree{padding:0 0 0 8px}
.org-node{margin-bottom:2px}
.org-node-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
.org-node-row:hover{background:var(--surface2)}
.org-node-row.selected{background:var(--primary-bg);border-left:3px solid var(--primary)}
.org-toggle{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--text3);transition:transform 0.2s;flex-shrink:0}
.org-toggle svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.org-toggle.open{transform:rotate(90deg)}
.org-toggle.leaf{visibility:hidden}
.org-node-info{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.org-node-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-node-role{font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;white-space:nowrap}
.org-node-count{font-size:10px;color:var(--text3);margin-left:auto;white-space:nowrap}
.org-children{padding-left:22px;border-left:1px solid var(--border-light);margin-left:17px;display:none}
.org-children.open{display:block}

/* Admin stats row */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.admin-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:12px}
.admin-stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.admin-stat-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.admin-stat-val{font-size:22px;font-weight:700}
.admin-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px}

/* Identity table */
.id-table{width:100%;border-collapse:collapse}
.id-table th{text-align:left;padding:9px 12px;border-bottom:2px solid var(--border);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3)}
.id-table td{padding:9px 12px;border-bottom:1px solid var(--border-light);font-size:12px}
.id-table tr:hover td{background:var(--surface)}
.id-emp{display:flex;align-items:center;gap:8px}
.id-emp-name{font-weight:600}
.id-emp-email{font-size:11px;color:var(--text3)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.status-active .status-dot{background:var(--success)}
.status-blocked .status-dot{background:var(--danger)}
.status-new .status-dot{background:var(--warning)}
.service-pills{display:flex;gap:4px;flex-wrap:wrap}
.service-pill{font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px;background:var(--surface2);border:1px solid var(--border);white-space:nowrap}
.service-pill.active{background:var(--primary-bg);color:var(--primary);border-color:rgba(59,130,246,0.3)}

/* Detail panel (slide-in from right) */
.detail-panel{position:fixed;top:0;right:-420px;width:420px;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:200;transition:right 0.3s ease;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.detail-panel.open{right:0}
.detail-panel-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.detail-panel-header h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.detail-panel-header h3 svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.detail-panel-body{flex:1;overflow-y:auto;padding:16px}
.detail-section{margin-bottom:18px}
.detail-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text3);margin-bottom:8px}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-light)}
.detail-row:last-child{border:none}
.detail-row .dl{font-size:11px;color:var(--text3)}
.detail-row .dv{font-size:12px;font-weight:600}
.detail-panel-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px}

/* Audit log */
.audit-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-light)}
.audit-item:last-child{border:none}
.audit-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.audit-text{font-size:12px;flex:1}
.audit-time{font-size:10px;color:var(--text3);white-space:nowrap;margin-top:1px}

/* Architecture diagram */
.arch-diagram{display:flex;flex-direction:column;gap:16px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
.arch-row{display:flex;gap:12px;align-items:stretch;justify-content:center;flex-wrap:wrap}
.arch-box{padding:12px 16px;border-radius:var(--radius);border:2px solid;text-align:center;min-width:120px;flex:1;max-width:200px}
.arch-box-title{font-size:11px;font-weight:700;margin-bottom:2px}
.arch-box-desc{font-size:9px;color:var(--text3)}
.arch-arrow{display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:18px}
.arch-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}


/* ═══════════════════════════════════════════
   RESPONSIVE — Burger + sidebar overlay + adaptive grids + bottom tabs
   3 breakpoints: 900px (tablet), 640px (phone-landscape), 480px (phone)
   ═══════════════════════════════════════════ */

/* Burger button (hidden on desktop) */
.burger-btn{display:none;width:36px;height:36px;border:none;background:none;color:var(--text);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-sm);transition:background var(--transition)}
.burger-btn:hover{background:var(--surface2)}
.burger-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Sidebar overlay backdrop (mobile only) */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:49;display:none}
.sidebar-overlay.open{display:block}

/* Bottom tab bar — ism-bottomnav from design system (hidden on desktop) */
.ism-bottomnav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--surface);border-top:1px solid var(--border);z-index:40;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom,0)}
.ism-bottomnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text3);font-size:10px;font-weight:500;cursor:pointer;padding:6px 12px;transition:color var(--transition);text-decoration:none;position:relative;border:none;background:none;font-family:var(--font);-webkit-tap-highlight-color:transparent}
.ism-bottomnav-item:hover,.ism-bottomnav-item.active{color:var(--primary);text-decoration:none}
.ism-bottomnav-item:active{opacity:0.7}
.ism-bottomnav-item .icon{display:flex;align-items:center;justify-content:center}
.ism-bottomnav-item .ism-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.ism-bottomnav-item .ism-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ism-bottomnav-item .nav-badge{position:absolute;top:2px;right:4px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;padding:0 4px;border-radius:var(--radius-full);min-width:14px;text-align:center;line-height:14px}

/* ── TABLET (≤900px) ── */
@media(max-width:900px){
  /* Show burger and bottom nav, hide module tabs in topbar */
  .burger-btn{display:flex}
  .ism-bottomnav{display:flex}
  .module-tabs{display:none}
  .more-wrap{display:none!important}
  .topbar-user .uname{display:none}
  .topbar-brand{border-right:none;padding-right:8px;margin-right:0}

  /* Content needs bottom padding for bottom nav */
  .content{padding-bottom:120px}

  /* Sidebar → overlay drawer */
  .sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;width:280px;z-index:50;transform:translateX(-100%);transition:transform 0.3s ease;box-shadow:none;border-right:1px solid var(--border)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}

  /* Module tabs move into sidebar top */
  .sidebar-module-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface2)}
  .sidebar-module-tabs .mtab-mobile{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;transition:all var(--transition);white-space:nowrap;background:none;border:none;font-family:var(--font)}
  .sidebar-module-tabs .mtab-mobile:hover{background:var(--surface);color:var(--text)}
  .sidebar-module-tabs .mtab-mobile.mtab-active{background:var(--primary-bg);color:var(--primary);font-weight:600}
  .sidebar-module-tabs .mtab-mobile .mtab-icon{width:14px;height:14px;display:flex;align-items:center;justify-content:center}
  .sidebar-module-tabs .mtab-mobile .mtab-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* Dashboard grid */
  .dash-grid{grid-template-columns:repeat(6,1fr)}
  .w-3{grid-column:span 3}.w-4{grid-column:span 6}.w-6{grid-column:span 6}.w-8{grid-column:span 6}.w-12{grid-column:span 6}

  /* Content padding */
  .content{padding:16px 16px 120px 16px}

  /* Detail panel */
  .detail-panel{width:100%;right:-100%}

  /* Admin stats */
  .admin-stats{grid-template-columns:repeat(2,1fr)}

  /* Profile */
  .profile-grid{grid-template-columns:repeat(2,1fr)}

  /* Notification panel full width */
  .notif-panel{width:320px}
}

/* ── PHONE LANDSCAPE (≤640px) ── */
@media(max-width:640px){
  /* Sidebar slightly narrower */
  .sidebar{width:260px}

  /* Dashboard all single column */
  .dash-grid{grid-template-columns:1fr}
  .w-3,.w-4,.w-6,.w-8,.w-12{grid-column:span 1}

  /* Tables scroll horizontally */
  .team-table,.id-table,.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* KPI target rows */
  .kpi-target-row{grid-template-columns:1fr 60px 120px 40px;gap:6px;padding:8px 10px}

  /* Admin stats */
  .admin-stats{grid-template-columns:1fr 1fr}

  /* Login */
  .login-box{width:calc(100vw - 32px);max-width:380px;padding:24px}

  /* Stat values smaller */
  .stat-val{font-size:22px}
  .admin-stat-val{font-size:18px}

  /* Notification panel full width */
  .notif-panel{width:100%;right:-100%}
}

/* ── PHONE PORTRAIT (≤480px) ── */
@media(max-width:480px){
  /* Topbar compact */
  .topbar{padding:0 8px;gap:0}
  .topbar-brand .logo{font-size:13px}
  .topbar-right{gap:2px;padding-left:8px}
  .topbar-btn{width:28px;height:28px}
  .topbar-btn svg{width:14px;height:14px}

  /* Content minimal padding */
  .content{padding:10px 8px 120px 8px}

  /* Sidebar full width */
  .sidebar{width:100%}

  /* Profile single column */
  .profile-grid{grid-template-columns:1fr}
  .profile-header{flex-direction:column;text-align:center;gap:10px}

  /* Admin stats single column */
  .admin-stats{grid-template-columns:1fr}

  /* Cards less padding */
  .card{padding:12px}
  .widget{padding:12px}

  /* Org toolbar stack */
  .org-toolbar{flex-direction:column;align-items:stretch}
  .org-toolbar .search-box{max-width:100%;width:100%}

  /* Search box full width */
  .search-box{width:100%}

  /* KPI target rows stack */
  .kpi-target-row{grid-template-columns:1fr;gap:4px}

  /* Tiles grid */
  .w-tiles-grid{grid-template-columns:1fr 1fr}

  /* Data layers */
  .data-layers{grid-template-columns:1fr}

  /* Settings */
  .settings-row{flex-direction:column;align-items:flex-start;gap:8px}

  /* Toast */
  .toast-container{right:8px;left:8px}
  .toast{min-width:auto}
}

/* ── Desktop: hide sidebar-module-tabs (they're in topbar) ── */
@media(min-width:901px){
  .sidebar-module-tabs{display:none}
}


/* ---- LOGIN SCREEN ---- */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-box{width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg)}
.login-box .logo-wrap{text-align:center;margin-bottom:24px}
.login-box .logo-wrap .logo{font-size:22px;font-weight:700}
.login-box .logo-wrap .logo span{color:var(--primary)}
.login-box .logo-wrap p{font-size:12px;color:var(--text3);margin-top:4px}
.login-box .form-group{margin-bottom:16px}
.login-box label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px}
.login-box input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:border-color var(--transition)}
.login-box input:focus{border-color:var(--primary)}
.login-box input::placeholder{color:var(--text3)}
.login-box .login-btn{width:100%;padding:10px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--transition)}
.login-box .login-btn:hover{background:var(--primary-hover)}
.login-box .login-btn:disabled{opacity:0.5;cursor:not-allowed}
.login-box .login-error{color:var(--danger);font-size:12px;margin-top:8px;text-align:center;display:none}
.login-box .login-error.show{display:block}
.login-box .login-footer{text-align:center;margin-top:16px}
.login-box .login-footer a{color:var(--text3);font-size:12px}
.login-box .login-footer a:hover{color:var(--primary)}

/* ═══════════════════════════════════════════
   KPI MODULE STYLES
   ═══════════════════════════════════════════ */

/* General badges */
.badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap}
.badge-green{background:var(--success-bg,#f0fdf4);color:var(--success);border:1px solid var(--success)}
.badge-red{background:#fef2f2;color:var(--danger);border:1px solid var(--danger)}
.badge-orange{background:var(--warning-bg,#fffbeb);color:var(--warning,#f59e0b);border:1px solid var(--warning,#f59e0b)}
.badge-blue{background:var(--info-bg,#eff6ff);color:var(--primary);border:1px solid var(--primary)}

/* Stat cards */
.stat-val{font-size:28px;font-weight:700}
.stat-val.primary{color:var(--primary)}
.stat-val svg{width:32px;height:32px}
.stat-lbl{font-size:11px;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

/* Loading */
.loading-msg{text-align:center;padding:40px;color:var(--text3);font-size:14px}

/* Info bars */
.info-bar{padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.info-bar svg{width:16px;height:16px;flex-shrink:0}

/* KPI Drop zone */
.kpi-drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:40px 20px;text-align:center;cursor:pointer;transition:all 0.2s}
.kpi-drop-zone:hover{border-color:var(--primary);background:rgba(37,99,235,0.03)}
.kpi-drop-zone svg{width:32px;height:32px}

/* KPI Target rows */
.kpi-target-row{display:grid;grid-template-columns:1fr 70px 150px 50px;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);transition:background 0.15s}
.kpi-target-row:hover{background:var(--surface2)}
.kpi-target-row svg{flex-shrink:0;color:var(--text3)}

/* Right-aligned cells */
.r{text-align:right}

/* Card (used by KPI module and reusable) */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px}
.card-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text)}
.card-title svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Content wrapper */
.content-max{max-width:1200px}

/* ── Data Table (shared by KPI and other modules) ── */
.data-table{width:100%;border-collapse:separate;border-spacing:0}
.data-table th{text-align:left;padding:10px 14px;border-bottom:2px solid var(--border);color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:10px;position:sticky;top:0;background:var(--surface);z-index:1}
.data-table th.r,.data-table td.r{text-align:right}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.data-table tr:hover{background:var(--surface2)}
.data-table .mono{font-family:var(--mono,'JetBrains Mono',monospace)}

/* === Sparklines KPI === */
.spark-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding:4px 0}
.spark-period-inline{font-size:12px;color:var(--text3);font-weight:400;margin-left:8px}
.spark-item{min-width:0}
.spark-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.spark-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:0.3px}
.spark-delta{font-size:11px;font-weight:600}
.spark-val{font-size:22px;font-weight:800;min-width:68px;white-space:nowrap}
.spark-chart-wrap{flex:1;min-width:0}
.spark-svg{width:100%;height:48px;display:block}
.spark-y-labels{display:flex;flex-direction:column;justify-content:space-between;min-width:30px;height:48px;text-align:right;padding-right:6px}
.spark-y-labels span{font-size:10px;color:var(--text2);font-weight:600;line-height:1}
@media(max-width:480px){.spark-grid{grid-template-columns:1fr;gap:12px}.spark-val{font-size:18px;min-width:58px}}