:root {
  --bg: #0f1117;
  --bg2: #161b27;
  --bg3: #1e2535;
  --bg4: #252d40;
  --border: #2a3349;
  --border2: #3a4560;
  --text: #e8eaf0;
  --text2: #9aa3b8;
  --text3: #6b7490;
  --accent: #6366f1;
  --accent-h: #5254cc;
  --accent2: #06b6d4;
  --green: #10b981;
  --yellow: #f59e0b;
  --red: #ef4444;
  --orange: #f97316;
  --purple: #8b5cf6;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --sidebar-w: 220px;
  --sidebar-collapsed: 56px;
  --topbar-h: 56px;
  --transition: 0.18s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none;}
input,select,textarea,button{font-family:inherit;font-size:inherit;}
.hidden{display:none!important;}

/* ── Login ─────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 60% 20%,#1a1f35 0%,var(--bg) 70%);}
.login-card{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;box-shadow:var(--shadow);}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:2rem;}
.login-logo h1{font-size:1.1rem;font-weight:600;color:var(--text);}
.logo-icon{font-size:2rem;color:var(--accent);}

/* ── Layout ────────────────────────────────────────────── */
.app-layout{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width var(--transition);overflow:hidden;flex-shrink:0;z-index:100;}
.sidebar.collapsed{width:var(--sidebar-collapsed);}

/* Header — always shows logo + toggle; title fades out */
.sidebar-header{display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--border);min-height:var(--topbar-h);min-width:0;}
.sidebar-logo{flex-shrink:0;font-size:2rem;}
.sidebar-title{font-weight:700;font-size:1rem;white-space:nowrap;flex:1;overflow:hidden;transition:opacity var(--transition),max-width var(--transition);max-width:200px;}
.sidebar-collapse-btn,.sidebar-toggle{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color var(--transition),transform var(--transition);flex-shrink:0;}
.sidebar-toggle:hover{background:var(--bg4);color:var(--text);}
.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg);}
/* Collapsed header — show logo centered, hide title and toggle */
.sidebar.collapsed .sidebar-header{justify-content:center;padding:0;gap:0;}
.sidebar.collapsed .sidebar-logo{font-size:2rem;cursor:pointer;opacity:.8;transition:opacity var(--transition);}
.sidebar.collapsed .sidebar-logo:hover{opacity:1;}
.sidebar.collapsed .sidebar-title{opacity:0;max-width:0;pointer-events:none;overflow:hidden;}
.sidebar.collapsed .sidebar-toggle{display:none;}

/* Nav — icon-only when collapsed */
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section-label{opacity:0;width:0;overflow:hidden;pointer-events:none;display:none;}
.sidebar.collapsed .nav-item{justify-content:center;padding:9px 0;}
.sidebar.collapsed .nav-icon{font-size:1.15rem;}

/* Footer — avatar centered, everything else hidden */
.sidebar.collapsed .user-info{display:none;}
.sidebar.collapsed .user-version{display:none;}
.sidebar.collapsed #logout-btn{display:none;}
.sidebar.collapsed .user-chip{justify-content:center;padding:8px 4px;gap:0;}
.sidebar.collapsed .user-avatar{margin:0;flex-shrink:0;}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 0;}
.sidebar-nav::-webkit-scrollbar{width:4px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.nav-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text3);padding:12px 16px 4px;white-space:nowrap;overflow:hidden;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 14px;color:var(--text2);border-radius:6px;margin:1px 6px;cursor:pointer;white-space:nowrap;transition:background var(--transition),color var(--transition);}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--accent);color:#fff;}
.nav-icon{font-size:1.1rem;min-width:20px;text-align:center;}
.sidebar-footer{padding:10px;border-top:1px solid var(--border);}
.user-chip{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius);background:var(--bg3);}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;}
.user-name{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}
.user-role{font-size:.7rem;color:var(--text3);white-space:nowrap;}
.user-info{flex:1;min-width:0;}

/* ── Main ──────────────────────────────────────────────── */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;}
.topbar-title{font-size:1rem;font-weight:600;flex:1;}
.topbar-actions{display:flex;align-items:center;gap:8px;}
.page-content{flex:1;overflow-y:auto;padding:24px;}
.page-content::-webkit-scrollbar{width:6px;}
.page-content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ── Forms ─────────────────────────────────────────────── */
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--text2);margin-bottom:4px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=url],select,textarea{
  width:100%;padding:8px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;transition:border-color var(--transition);}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
select{cursor:pointer;}
textarea{resize:vertical;min-height:80px;}

/* ── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:none;border-radius:var(--radius);cursor:pointer;font-weight:500;transition:opacity var(--transition),background var(--transition);}
.btn:hover{opacity:.88;}
.btn:active{opacity:.75;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-secondary{background:var(--bg4);color:var(--text);border:1px solid var(--border2);}
.btn-danger{background:var(--red);color:#fff;}
.btn-success{background:var(--green);color:#fff;}
.btn-warning{background:var(--yellow);color:#000;}
.btn-sm{padding:4px 10px;font-size:.8rem;}
.btn-block{width:100%;justify-content:center;}
.btn-icon{background:none;border:none;color:var(--text2);cursor:pointer;padding:5px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;transition:color var(--transition),background var(--transition);}
.btn-icon:hover{color:var(--text);background:var(--bg4);}

/* ── Cards / Panels ────────────────────────────────────── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card-title{font-size:.95rem;font-weight:600;}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:6px;}
.stat-value{font-size:2rem;font-weight:700;}
.stat-label{font-size:.78rem;color:var(--text2);}
.stat-card.accent{border-color:var(--accent);background:linear-gradient(135deg,var(--bg2),rgba(99,102,241,.08));}

/* ── Tables ────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--bg3);}
th{padding:10px 14px;text-align:left;font-size:.78rem;font-weight:700;color:var(--text2);letter-spacing:.04em;white-space:nowrap;}
td{padding:10px 14px;border-top:1px solid var(--border);vertical-align:middle;}
tr:hover td{background:var(--bg3);}
.table-empty{text-align:center;padding:40px;color:var(--text3);}

/* ── Badges / Tags ─────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:.72rem;font-weight:600;}
.badge-green{background:rgba(16,185,129,.15);color:#34d399;}
.badge-red{background:rgba(239,68,68,.15);color:#f87171;}
.badge-yellow{background:rgba(245,158,11,.15);color:#fbbf24;}
.badge-blue{background:rgba(6,182,212,.15);color:#22d3ee;}
.badge-purple{background:rgba(139,92,246,.15);color:#a78bfa;}
.badge-gray{background:rgba(107,114,128,.15);color:#9ca3af;}
.badge-orange{background:rgba(249,115,22,.15);color:#fb923c;}

/* ── Alerts ────────────────────────────────────────────── */
.alert{padding:10px 14px;border-radius:var(--radius);font-size:.85rem;margin-bottom:12px;}
.alert-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5;}
.alert-success{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#6ee7b7;}
.alert-info{background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.3);color:#67e8f9;}

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow);}
.modal-lg{max-width:800px;}
.modal-xl{max-width:1000px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal-header h3{font-size:1rem;font-weight:600;}
.modal-body{flex:1;overflow-y:auto;padding:20px;}
.modal-body::-webkit-scrollbar{width:4px;}
.modal-body::-webkit-scrollbar-thumb{background:var(--border2);}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:8px;}

/* ── Toast ─────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:2000;}
.toast{padding:12px 16px;border-radius:var(--radius);font-size:.85rem;font-weight:500;box-shadow:var(--shadow);animation:slideIn .2s ease;max-width:320px;}
.toast-success{background:#065f46;color:#6ee7b7;border:1px solid #059669;}
.toast-error{background:#7f1d1d;color:#fca5a5;border:1px solid #dc2626;}
.toast-info{background:#1e3a5f;color:#67e8f9;border:1px solid #0891b2;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Search / Filter bar ───────────────────────────────── */
.search-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:nowrap;}
.search-bar select{flex-shrink:0;width:auto;min-width:110px;max-width:160px;}
.search-bar input[type=date]{flex-shrink:0;width:140px;}
.search-bar .btn{flex-shrink:0;}
.search-input-wrap{position:relative;flex:1 1 0;min-width:0;}
.search-input-wrap input{padding-left:32px;width:100%;}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;}
/* Two-row filter bars (audit) */
.filter-bar{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
.filter-row select{flex-shrink:0;width:auto;min-width:120px;max-width:170px;}
.filter-row input[type=date]{flex-shrink:0;width:140px;}
.filter-row .search-input-wrap{flex:1 1 0;min-width:0;}
.filter-row .btn{flex-shrink:0;}

/* ── Tabs ──────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tab-btn{padding:8px 18px;background:none;border:none;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500;transition:color var(--transition),border-color var(--transition);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ── Permission grid ───────────────────────────────────── */
.perm-grid{display:grid;grid-template-columns:1fr repeat(4,80px);gap:0;border:1px solid var(--border);border-radius:var(--radius);}
.perm-row{display:contents;}
.perm-row:not(:last-child) > *{border-bottom:1px solid var(--border);}
.perm-cell{padding:8px 12px;display:flex;align-items:center;}
.perm-cell.header{background:var(--bg3);font-size:.75rem;font-weight:700;color:var(--text2);text-align:center;justify-content:center;}
.perm-cell.page-name{font-size:.82rem;font-weight:500;}
.perm-cell.center{justify-content:center;}
.perm-toggle{width:18px;height:18px;cursor:pointer;accent-color:var(--accent);}

/* ── Status dots ───────────────────────────────────────── */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;}
.dot-green{background:var(--green);}
.dot-red{background:var(--red);}
.dot-yellow{background:var(--yellow);}
.dot-gray{background:var(--text3);}
.dot-blue{background:var(--accent2);}

/* ── Breadcrumbs ───────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text2);margin-bottom:16px;}
.breadcrumb span:last-child{color:var(--text);}
.bc-sep{color:var(--text3);}

/* ── Pagination ────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:6px;margin-top:16px;justify-content:center;}
.page-btn{padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text2);transition:background var(--transition);}
.page-btn:hover,.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.page-info{color:var(--text2);font-size:.8rem;padding:0 8px;}

/* ── Detail view ───────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.detail-item label{font-size:.75rem;color:var(--text3);display:block;margin-bottom:2px;}
.detail-item span{font-size:.9rem;}

/* ── Empty state ───────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px;color:var(--text3);}
.empty-state-icon{font-size:3rem;margin-bottom:12px;}
.empty-state h3{font-size:1rem;font-weight:600;color:var(--text2);margin-bottom:6px;}

/* ── Tag select ────────────────────────────────────────── */
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--bg4);border-radius:20px;font-size:.78rem;}
.tag .remove{cursor:pointer;color:var(--text3);margin-left:2px;}
.tag .remove:hover{color:var(--red);}

/* ── Color swatch ──────────────────────────────────────── */
.color-dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex-shrink:0;}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{position:fixed;left:-var(--sidebar-w);height:100vh;transition:left var(--transition);z-index:200;}
  .sidebar.mobile-open{left:0;}
  .form-row,.form-row-3{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .panel-grid{grid-template-columns:1fr 1fr;}
  #mobile-menu-btn{display:block;}
}
@media(min-width:769px){#mobile-menu-btn{display:none;}}

/* ── Utility ───────────────────────────────────────────── */
.mt-1{margin-top:4px;}.mt-2{margin-top:8px;}.mt-3{margin-top:16px;}.mt-4{margin-top:24px;}
.mb-1{margin-bottom:4px;}.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:16px;}.mb-4{margin-bottom:24px;}
.flex{display:flex;}.flex-1{flex:1;}.items-center{align-items:center;}.gap-2{gap:8px;}.gap-3{gap:12px;}
.justify-between{justify-content:space-between;}.text-sm{font-size:.8rem;}.text-muted{color:var(--text2);}
.text-danger{color:var(--red);}.text-success{color:var(--green);}.font-bold{font-weight:700;}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.w-full{width:100%;}
.inline-flex{display:inline-flex;align-items:center;gap:4px;}
.section-title{font-size:.95rem;font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}

/* ── Asset Hierarchy Cards ─────────────────────────────── */

/* Root card */
.asset-root-card {
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
.asset-root-header {
  display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;
  background:var(--bg3);border-bottom:1px solid var(--border);
  user-select:none;transition:background var(--transition);
}
.asset-root-header:hover{background:var(--bg4);}
.asset-root-toggle{font-size:.85rem;color:var(--text3);flex-shrink:0;transition:transform var(--transition);}
.asset-root-card.collapsed .asset-root-toggle{transform:rotate(-90deg);}
.asset-root-icon{font-size:1.3rem;flex-shrink:0;}
.asset-root-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap;}
.asset-root-name{font-weight:600;font-size:.95rem;}
.asset-root-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex-shrink:0;}
.asset-root-body{padding:16px;}
.asset-root-card.collapsed .asset-root-body{display:none;}

/* Shared detail grid */
.asset-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 16px;margin-bottom:12px;}
.asset-detail-item label{font-size:.72rem;color:var(--text3);display:block;margin-bottom:2px;}
.asset-detail-item span{font-size:.85rem;}

/* Software row */
.asset-software-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--border);margin-top:4px;}
.asset-software-label{font-size:.72rem;font-weight:700;color:var(--text3);letter-spacing:.05em;white-space:nowrap;padding-top:2px;min-width:64px;}
.asset-software-list{display:flex;flex-wrap:wrap;gap:6px;}

/* Children section */
.asset-children-section{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.asset-children-label{font-size:.75rem;font-weight:700;color:var(--text3);letter-spacing:.05em;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.asset-children-list{display:flex;flex-direction:column;gap:8px;}

/* Child card — always fully visible */
.asset-child-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;border-left:3px solid var(--accent);}
.asset-child-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.asset-child-icon{font-size:1rem;flex-shrink:0;margin-top:1px;}
.asset-child-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;}
.asset-child-name{font-weight:600;font-size:.88rem;}
.asset-child-details{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;}

/* Credential cards */
.cred-card { transition:box-shadow var(--transition); }
.cred-card:hover { box-shadow:0 0 0 1px var(--accent); }

/* ── Inactive row dimming ────────────────────────────────── */
tr.opacity-inactive td { opacity: .5; }

/* ── Version label in sidebar footer ───────────────────── */
.user-version{font-size:.68rem;color:var(--text3);margin-top:1px;font-family:monospace;}

/* ── Collapsed nav tooltips ─────────────────────────────── */
.sidebar.collapsed .nav-item{position:relative;}
.sidebar.collapsed .nav-item:hover::after{
  content: attr(data-tooltip);
  position:absolute;left:calc(var(--sidebar-collapsed) - 4px);top:50%;
  transform:translateY(-50%);
  background:var(--bg4);color:var(--text);
  padding:5px 10px;border-radius:6px;font-size:.8rem;
  white-space:nowrap;z-index:200;
  border:1px solid var(--border);
  pointer-events:none;
}

/* ── Permission toggle cells ─────────────────────────────── */
.perm-toggle-btn {
  width: 28px; height: 28px;
  border: none; border-radius: 6px;
  cursor: pointer; font-size: .85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.perm-toggle-btn:active { transform: scale(.9); }
.perm-toggle-btn.granted  { background: rgba(16,185,129,.2); color: #10b981; }
.perm-toggle-btn.revoked  { background: rgba(239,68,68,.12); color: #ef4444; }
.perm-toggle-btn.granted:hover { background: rgba(16,185,129,.35); }
.perm-toggle-btn.revoked:hover { background: rgba(239,68,68,.25); }
.perm-lock {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: var(--text3);
  background: var(--bg3); border-radius: 6px;
  cursor: not-allowed; opacity: .5;
}

/* ── Sortable table headers ──────────────────────────────── */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover { color: var(--text); background: var(--bg4); }
th.sort-active    { color: var(--accent); }
.sort-icon        { font-size: .7rem; opacity: .8; }