/* Nilasu Platform — layout.css */

/* ── APP ────────────────────────────────────────────────────────── */
#app{display:none;height:100vh;flex-direction:row}
#app.visible{display:flex}

/* ── SIDEBAR ────────────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:8px 0 0;overflow-y:auto;overflow-x:hidden;transition:width .22s ease,min-width .22s ease}
.sidebar-logo{display:flex;align-items:center;gap:9px;padding:10px 14px 14px;border-bottom:1px solid var(--border);margin-bottom:6px}
.logo-mark{width:26px;height:26px;background:var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:12px;color:white;flex-shrink:0;letter-spacing:-.5px}
.logo-text{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.sidebar-collapse-btn{margin-left:auto;flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--text-muted);padding:3px;display:flex;align-items:center;justify-content:center;border-radius:5px;transition:transform .22s ease,background .15s}
.sidebar-collapse-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.sidebar-section{padding:0 6px 4px}
.sidebar-section-label{font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding:10px 9px 3px;display:flex;align-items:center;justify-content:space-between;white-space:nowrap;overflow:hidden;cursor:pointer;border-radius:4px;user-select:none}
.sidebar-section-label:hover{color:var(--text-secondary)}
.section-chevron{font-size:9px;opacity:.6;transition:transform .2s ease;flex-shrink:0}
.sidebar-section.closed .section-chevron{transform:rotate(-90deg)}
.sidebar-section-items{overflow:hidden;transition:max-height .22s ease,opacity .18s ease;max-height:500px;opacity:1}
.sidebar-section.closed .sidebar-section-items{max-height:0;opacity:0}
.nav-item{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:6px;cursor:pointer;font-size:13.5px;color:var(--text-secondary);user-select:none;font-weight:400;letter-spacing:-.1px;white-space:nowrap}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:var(--bg-hover);color:var(--text-primary);font-weight:500}
.nav-item.esf-item,.nav-item.admin-item{color:var(--text-secondary)}
.nav-item.esf-item:hover,.nav-item.admin-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.esf-item.active,.nav-item.admin-item.active{background:var(--bg-hover);color:var(--text-primary);font-weight:500}
.nav-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0;opacity:.75}
.nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-badge{margin-left:auto;background:var(--bg-elevated);color:var(--text-secondary);font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;border:1px solid var(--border);flex-shrink:0}
.nav-badge.blue{background:var(--blue-soft);color:var(--blue);border-color:transparent}
.sidebar-bottom{margin-top:auto;padding:10px 6px;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;overflow:hidden}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:11px;color:white;flex-shrink:0}
.user-info{flex:1;min-width:0;overflow:hidden}
.user-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:11px;color:var(--text-muted);text-transform:capitalize;white-space:nowrap}
.logout-btn{margin-top:4px;width:100%;background:none;border:1px solid var(--border);border-radius:6px;padding:6px;color:var(--text-secondary);font-family:var(--font-body);font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden}
.logout-btn:hover{background:var(--red-soft);color:var(--red);border-color:var(--red-mid)}

/* ── SIDEBAR COLLAPSED ──────────────────────────────────────────── */
.sidebar.collapsed{width:52px;min-width:52px}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .user-info,
.sidebar.collapsed .logout-btn{display:none}
.sidebar.collapsed .sidebar-section-items{max-height:500px;opacity:1}
.sidebar.collapsed .sidebar-collapse-btn{transform:rotate(180deg)}
.sidebar.collapsed .sidebar-logo{justify-content:center;padding:10px 6px 14px}
.sidebar.collapsed .nav-item{justify-content:center;padding:8px 6px;gap:0}
.sidebar.collapsed .nav-icon{width:auto;font-size:15px;opacity:.9}
.sidebar.collapsed .user-card{justify-content:center;padding:4px 6px;gap:0}
.sidebar.collapsed .sidebar-bottom{padding:10px 4px}
.sidebar.collapsed .tt-track{margin-left:0}

/* ── MAIN CONTENT ───────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.topbar{padding:11px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-card)}
.topbar-title{font-family:var(--font-display);font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.content{flex:1;overflow-y:auto;padding:24px 28px;position:relative}

/* ── PANELS ─────────────────────────────────────────────────────── */
.panel{display:none !important}.panel.visible{display:block !important;width:100%}
.panel.visible.as-splitpane-panel{display:flex !important;position:absolute;inset:0;height:100%}
.panel.visible#panel-connect-all{display:flex !important;flex-direction:column;height:100%;position:absolute;inset:0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.3px}
.section-action{font-size:12.5px;color:var(--text-secondary);cursor:pointer;border:1px solid var(--border);padding:5px 12px;border-radius:6px;background:var(--bg-elevated);font-family:var(--font-body);font-weight:500}
.section-action:hover{background:var(--bg-hover);color:var(--text-primary)}
.section-action.blue{color:var(--blue);background:var(--blue-soft);border-color:transparent}
.section-action.blue:hover{opacity:.85}