:root{
  --bg: #eef1f4;
  --panel: #ffffff;
  --panel-2: #f6f8fa;
  --nav-bg: #1c2733;
  --nav-hover: #263242;
  --nav-active: #2e5f8a;
  --line: #dbe1e8;
  --text: #1f2937;
  --text-dim: #6b7688;
  --text-faint: #98a2b3;
  --accent: #2e6f8a;
  --accent-2: #d98a2b;
  --danger: #c14e3a;
  --ok: #2e8a5f;
  --mono: "SFMono-Regular", Consolas, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:13.5px; display:flex; flex-direction:column; height:100vh; overflow:hidden;}

header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding:10px 18px; background:var(--nav-bg); color:#fff; flex-shrink:0; border-bottom:3px solid var(--accent);
}
.brand{display:flex; align-items:center; gap:10px;}
.logo-dot{width:10px; height:10px; border-radius:3px; background:var(--accent-2);}
.brand-text h1{font-size:14.5px; margin:0; font-weight:700;}
.brand-text small{display:block; color:#a9b4c2; font-size:11px; margin-top:2px; font-family:var(--mono);}
#menuBtn{display:none; background:none; border:1px solid #3a4a5c; color:#fff; border-radius:6px; padding:4px 8px; cursor:pointer; margin-right:6px;}

.toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.mode-pill{font-size:11px; color:#a9b4c2; background:#151d26; padding:4px 10px; border-radius:12px; border:1px solid #33404f;}
.mode-pill.dirty{color:#ffd28a; border-color:#8a6a2e;}
.toolbtn{
  font-size:11.5px; background:#26313e; color:#dbe4ee; border:1px solid #3a4a5c; border-radius:6px;
  padding:6px 11px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:5px;
}
.toolbtn:hover{border-color:var(--accent-2); color:var(--accent-2);}
.toolbtn-danger:hover{border-color:var(--danger); color:#ff8a70;}
.toolbtn-link{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.toolbtn-link:hover{opacity:.88; color:#fff;}

.layout{flex:1; display:flex; min-height:0;}

/* Navigation pane — mirrors the ACLI menu tree, like the real Session Element Manager */
nav#navTree{
  width:280px; min-width:280px; background:var(--nav-bg); color:#c7d1dc; overflow-y:auto; padding:10px 0;
}
.nav-node{}
.nav-label{
  display:flex; align-items:center; gap:7px; padding:7px 16px; cursor:pointer; font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-label:hover{background:var(--nav-hover);}
.nav-label.active{background:var(--nav-active); color:#fff; font-weight:600;}
.nav-label .arrow{width:10px; font-size:9px; color:#7c8899; transition:transform .12s;}
.nav-label .arrow.open{transform:rotate(90deg);}
.nav-children{display:none; padding-left:14px; border-left:1px solid #2c3947; margin-left:20px;}
.nav-children.open{display:block;}
.nav-label.leaf{color:#9fb8cc;}
.nav-label.leaf.has-instances::after{
  content: attr(data-count); margin-left:auto; background:var(--accent); color:#fff; font-size:9.5px;
  padding:1px 6px; border-radius:8px; font-weight:700;
}

/* Main panel */
main#mainPanel{flex:1; overflow-y:auto; padding:20px 26px 60px; min-width:0;}
#breadcrumb{font-size:11.5px; color:var(--text-dim); margin-bottom:14px; font-family:var(--mono);}
#breadcrumb b{color:var(--text);}

.obj-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.obj-header h2{font-size:19px; margin:0; color:var(--text);}
.obj-header p{margin:4px 0 0; color:var(--text-dim); font-size:12.5px; max-width:640px;}

.btn{
  font-family:var(--sans); font-size:12.5px; font-weight:600; padding:8px 16px; border-radius:7px;
  border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer;
}
.btn:hover{opacity:.9;}
.btn-secondary{background:#fff; color:var(--text); border-color:var(--line);}
.btn-danger{background:#fff; color:var(--danger); border-color:var(--danger);}
.btn-sm{padding:5px 10px; font-size:11.5px;}

/* Category grid (when a category/folder is selected) */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px;}
.obj-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; cursor:pointer;
  transition:box-shadow .1s, border-color .1s;
}
.obj-card:hover{border-color:var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.06);}
.obj-card .card-icon{font-size:18px; margin-bottom:6px;}
.obj-card .card-title{font-weight:700; font-size:13px; color:var(--text);}
.obj-card .card-sub{font-size:11px; color:var(--text-faint); margin-top:3px;}
.obj-card .card-count{
  display:inline-block; margin-top:8px; font-size:10.5px; background:var(--panel-2); color:var(--text-dim);
  padding:2px 8px; border-radius:10px;
}

/* Instance table (when an element is selected) */
table.instance-table{width:100%; border-collapse:collapse; background:var(--panel); border-radius:10px; overflow:hidden; border:1px solid var(--line);}
table.instance-table th{
  text-align:left; padding:9px 14px; background:var(--panel-2); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--text-dim); border-bottom:1px solid var(--line);
}
table.instance-table td{padding:10px 14px; border-bottom:1px solid #eef1f4; font-size:12.5px; vertical-align:middle;}
table.instance-table tr:last-child td{border-bottom:none;}
table.instance-table tr:hover td{background:#fbfcfd;}
.row-actions{display:flex; gap:6px; justify-content:flex-end;}
.row-actions button{
  font-size:11px; padding:4px 9px; border-radius:5px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--text-dim);
}
.row-actions button:hover{border-color:var(--accent); color:var(--accent);}
.row-actions button.del:hover{border-color:var(--danger); color:var(--danger);}
.empty-state{
  text-align:center; padding:50px 20px; color:var(--text-faint); background:var(--panel); border:1px dashed var(--line); border-radius:10px;
}

/* Dialog / configuration form */
.dialog-overlay{
  position:fixed; inset:0; background:rgba(20,26,32,.55); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px;
}
.dialog{
  background:var(--panel); border-radius:12px; width:640px; max-width:100%; max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.dialog-header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
.dialog-header h2{margin:0; font-size:15px;}
.dialog-close{background:none; border:none; font-size:20px; color:var(--text-dim); cursor:pointer; line-height:1;}
.dialog-tabs{display:flex; border-bottom:1px solid var(--line); padding:0 20px;}
.dialog-tab{background:none; border:none; padding:10px 14px; font-size:12px; font-weight:600; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent;}
.dialog-tab.active{color:var(--accent); border-bottom-color:var(--accent);}
.dialog-body{padding:16px 20px; overflow-y:auto; flex:1;}
.dialog-footer{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--line); gap:10px;}
.dialog-hint{font-size:11px; color:var(--text-faint);}

.field-row{margin-bottom:14px;}
.field-row label{display:block; font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px;}
.field-row label .req{color:var(--danger); margin-left:2px;}
.field-row .field-desc{font-size:11px; color:var(--text-faint); margin-top:4px; line-height:1.5;}
.field-row input[type="text"], .field-row input[type="number"], .field-row select{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-family:var(--mono); font-size:12.5px;
  background:#fff; color:var(--text);
}
.field-row input:focus, .field-row select:focus{outline:none; border-color:var(--accent);}
.field-row .field-default{font-size:10.5px; color:var(--text-faint); margin-top:3px;}

.acli-preview{
  background:#151d26; color:#c9e8d4; font-family:var(--mono); font-size:12px; padding:14px 16px; border-radius:8px; line-height:1.8; white-space:pre;
}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-thumb{background:#c7cfd8; border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

@media (max-width: 880px){
  nav#navTree{position:fixed; left:0; top:57px; bottom:0; z-index:5; transform:translateX(-100%); transition:transform .15s; box-shadow:2px 0 12px rgba(0,0,0,.2);}
  nav#navTree.open{transform:translateX(0);}
  #menuBtn{display:inline-block;}
}