/* Skin: dark sidebar + light content (reference layout) */
:root {
	--bg:#f1f5f9;
	--panel:#ffffff;
	--muted:#64748b;
	--text:#0f172a;
	--primary:#0d9488;
	--success:#16a34a;
	--danger:#dc2626;
	--warning:#ea580c;
	--border:#e2e8f0;
	/* Sidebar (dark) */
	--sidebar-bg:#19130f;
	--sidebar-text:#ffffff;
	--sidebar-link:#c9bdb3;
	--sidebar-muted:#8a7a70;
	--sidebar-group:#8a7a70;
	--sidebar-hover-bg:rgba(255,255,255,.06);
	--sidebar-active-bg:#2a211c;
	--sidebar-active-accent:#f2994a;
	--sidebar-width:224px;
	--sidebar-collapsed:68px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial}
a{color:var(--text);text-decoration:none}

/* Sidebar: dark, narrow, collapsible */
.sidebar{
	position:fixed;left:0;top:0;bottom:0;
	width:var(--sidebar-width);
	background:var(--sidebar-bg);
	border-right:1px solid var(--border);
	padding:12px 0;
	transition:width .2s ease;
	z-index:100;
	display:flex;
	flex-direction:column;
}
body.sidebar-collapsed .sidebar{
	width:var(--sidebar-collapsed);
}
.sidebar-toggle{
	flex-shrink:0;
	padding:8px 12px;
	border-bottom:1px solid var(--border);
	margin-bottom:8px;
}
.sidebar-toggle button{
	width:100%;
	background:transparent;
	border:none;
	color:var(--sidebar-text);
	cursor:pointer;
	padding:8px;
	border-radius:6px;
	font-size:16px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.sidebar-toggle button:hover{
	background:var(--sidebar-active-bg);
	color:var(--sidebar-text);
}
body.sidebar-collapsed .sidebar-toggle button{justify-content:center}
.sidebar nav{
	flex:1;
	overflow-y:auto;
	padding:0 8px;
}
.sidebar nav a{
	display:block;
	padding:10px 12px;
	border-radius:8px;
	color:var(--sidebar-link);
	font-size:14px;
	border-left:3px solid transparent;
	transition:color .15s, background .15s;
}
.sidebar nav a:hover{
	background:var(--sidebar-hover-bg);
	color:var(--sidebar-text);
}
.sidebar nav details.nav-group{margin-top:6px}
.sidebar nav details.nav-group summary{list-style:none;cursor:pointer;padding:8px 12px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sidebar-group);display:flex;align-items:center;gap:6px}
.sidebar nav details.nav-group summary::-webkit-details-marker{display:none}
.sidebar nav details.nav-group summary::before{content:'\25B8';font-size:9px;transition:transform .15s;color:var(--sidebar-group)}
.sidebar nav details.nav-group[open] summary::before{transform:rotate(90deg)}
.sidebar nav a.active{
	background:var(--sidebar-active-bg);
	color:var(--sidebar-text);
	font-weight:500;
	border-left-color:var(--sidebar-active-accent);
}
body.sidebar-collapsed .sidebar nav{
	display:none;
}

/* Sidebar redesign: icons, pin control, pinned section, icon-rail collapse */
.sidebar nav a{display:flex;align-items:center;gap:10px}
.sidebar nav a .navicon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--sidebar-muted)}
.sidebar nav a.active .navicon{color:var(--sidebar-active-accent)}
.sidebar nav a .nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar nav a .navpin{flex-shrink:0;opacity:0;display:flex;align-items:center;padding:3px;border-radius:5px;color:var(--sidebar-muted);transition:opacity .15s,background .15s}
.sidebar nav a:hover .navpin{opacity:1}
.sidebar nav a .navpin.pinned{opacity:1;color:var(--sidebar-active-accent)}
.sidebar nav a .navpin:hover{background:rgba(255,255,255,.12)}
.sidebar nav .nav-group-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sidebar-group);padding:8px 12px 4px}
.sidebar nav .pinned-group{border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px;padding-bottom:6px}
body.sidebar-collapsed .sidebar nav{display:block !important;overflow-y:auto !important;padding:0 8px !important}
body.sidebar-collapsed .sidebar nav a .nav-label,
body.sidebar-collapsed .sidebar nav a .navpin,
body.sidebar-collapsed .sidebar nav .nav-group-label,
body.sidebar-collapsed .sidebar nav details.nav-group summary{display:none}
body.sidebar-collapsed .sidebar nav a{justify-content:center;padding:10px 0}

/* Main content: full remaining width, scrollable tables */
.content{
	margin-left:var(--sidebar-width);
	padding:24px;
	min-height:100vh;
	transition:margin-left .2s ease;
}
body.sidebar-collapsed .content{
	margin-left:var(--sidebar-collapsed);
}

/* Table wrapper so wide listings don’t shrink the layout */
.table-wrapper,
.card:has(.table){
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.table-wrapper .table,
.card .table{
	min-width:600px;
}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.page-header h2{margin:0;font-size:1.35rem;font-weight:600;color:var(--text)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:#fff;border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px}
.btn:hover{background:#f1f5f9}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:#0f766e;color:#fff}
.btn.danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn.danger:hover{background:#991b1b;color:#fff}
.btn.success{background:var(--success);border-color:var(--success);color:#fff}
.btn.success:hover{background:#15803d;color:#fff}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* Table: header like reference (subtle gradient), clear hierarchy */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left}
.table th{
	color:rgba(255,255,255,.95);
	font-weight:600;
	background:linear-gradient(135deg, #475569 0%, #334155 100%);
	white-space:nowrap;
}
.table th:first-child{border-radius:8px 0 0 0}
.table th:last-child{border-radius:0 8px 0 0}
.table tbody tr:hover{background:#f8fafc}
.table tbody tr:last-child td{border-bottom:none}
.badge{padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;min-width:90px;text-align:center}
.badge.green{background:rgba(22,163,74,.25);color:#15803d;border:1px solid rgba(22,163,74,.5)}
.badge.red{background:rgba(220,38,38,.25);color:#b91c1c;border:1px solid rgba(220,38,38,.5)}
.badge.badge-neutral{background:var(--muted-bg, rgba(0,0,0,.06));color:var(--muted, #64748b);border:1px solid var(--border, rgba(0,0,0,.1))}
.alert{padding:12px 14px;border-radius:10px;margin:10px 0;border:1px solid var(--border)}
.alert.success{background:rgba(22,163,74,.08);color:#166534}
.alert.error{background:rgba(220,38,38,.08);color:#b91c1c}
.icon-btn{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px}
.icon-btn:hover{background:#f1f5f9;color:var(--text)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
.modal[aria-hidden="false"]{display:flex}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.modal-body{padding:14px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.form-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.form-row label{width:160px;color:var(--muted);font-size:14px}
.form-row input,.form-row select{flex:1;padding:8px 10px;background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--text)}

/* Dynamic list rows (transfer routes, menu digit options): a compact single-line row
   so the route select + % + Remove never need horizontal scrolling inside the
   narrow node-properties panel. */
.menu-options-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.menu-option-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;width:100%}
.menu-option-row select{flex:1 1 auto;min-width:0;width:auto;padding:6px 8px;font-size:13px}
.menu-option-row input[type="number"]{flex:0 0 56px;width:56px;min-width:0;padding:6px;text-align:center}
.menu-option-row .btn{flex:0 0 auto;padding:6px 10px;font-size:12px;white-space:nowrap}
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi .card{display:flex;flex-direction:column;gap:6px}
.kpi .title{color:var(--muted);font-size:13px}
.kpi .value{font-size:22px;font-weight:700}

.modal.slide-panel { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.modal .modal-dialog { transform: translateX(100%); transition: transform 0.35s ease-in-out; position:fixed; top:0; right:0; width:700px; height:100%; background:var(--panel); padding:20px; overflow-y:auto; border-left:1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,.1); pointer-events:auto; }
.modal[aria-hidden="false"] .modal-dialog { transform: translateX(0); }

@media (max-width:768px) {
	.sidebar{width:var(--sidebar-collapsed)}
	.sidebar nav{display:none}
	.content{margin-left:var(--sidebar-collapsed)}
}
@media (max-width:600px) {
	.modal .modal-dialog { width:100%; }
	.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}