/* === TÉMA / ZÁKLAD === */
:root{
	--c-bg:#121212; --c-fg:#fff; --c-accent:#00cc00; --c-muted:#adb5bd;
	--c-card:#1c2526; --c-surface:#2a2a2a; --c-border:#495057;
	--c-danger:#dc3545; --c-success:#155724; --c-success-fg:#d4edda; --c-danger-fg:#f8d7da;
	--sticky-nav:56px;
	--sticky-header-offset:56px; /* JS dopočítá: nav + případná subnav */
}
body { background: var(--c-bg); color: var(--c-fg); font-family:'Segoe UI', Arial, sans-serif; margin:0; padding:0; transition:background .3s,color .3s; }
body.light-mode { background:#f8f9fa; color:#212529; }

/* === HORNÍ NAV === */
nav { background:#1c2526; padding:.75rem 1rem; box-shadow:0 2px 4px rgba(0,0,0,.2); display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:1000; }
body.light-mode nav{ background:#e9ecef; }
.nav-brand{font-weight:700; letter-spacing:.2px; margin-right:.5rem;}
nav a { color:#ffffff; text-decoration:none; font-weight:500; padding:.35rem .7rem; transition:color .2s, background .2s; border-radius:6px; }
body.light-mode nav a { color:#212529; }
nav a:hover, nav a.active { color:var(--c-accent); background:rgba(0,204,0,.12); }

/* === SEKCE + PODNAV === */
.section { display:none; padding:1rem 1.25rem; max-width:1400px; margin:0 auto; animation:fadeIn .25s ease-in; }
.section.active { display:block; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.subnav{ display:flex; gap:.25rem; border-bottom:1px solid var(--c-border); margin:.25rem 0 1rem; position:sticky; top:var(--sticky-nav); z-index:900; background:inherit; padding:.25rem 0; }
.subnav a{ padding:.5rem .9rem; border-radius:6px; color:inherit; text-decoration:none; }
.subnav a.active{ background:rgba(0,204,0,.12); color:var(--c-accent); }
.subnav .spacer{ flex:1; }

/* === TABULKY === */
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--c-surface); border-radius:10px; margin-top:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.18); }
body.light-mode table { background:#fff; }
th, td { border-bottom:1px solid #444; padding:.6rem .65rem; text-align:left; vertical-align:middle; }
body.light-mode th, body.light-mode td { border-color:#e9ecef; }
th { background:#343a40; font-weight:600; position:sticky; top:var(--sticky-header-offset); z-index:5; box-shadow:0 1px 0 rgba(0,0,0,.25); }
body.light-mode th { background:#f1f3f5; }
tr:nth-child(even) { background:#323232; } body.light-mode tr:nth-child(even){ background:#f8f9fa; }
tr:hover { background:#3e444a; } body.light-mode tr:hover{ background:#eef2f6; }
.table-compact th, .table-compact td{ padding:.45rem .55rem; }

.th-sort { cursor:pointer; user-select:none; }
.th-sort .arrow{ opacity:.5; font-size:.8rem; margin-left:.25rem; }
.th-sort[data-order="asc"] .arrow{ transform:rotate(180deg); }

/* === OVLÁDACÍ PRVKY === */
input, button, select, textarea { background:var(--c-surface); color:var(--c-fg); border:1px solid var(--c-border); padding:0.5rem; border-radius:6px; font-size:.95rem; transition:border-color .2s, background .2s; }
body.light-mode input, body.light-mode button, body-light-mode select, body-light-mode textarea { background:#fff; color:#212529; border-color:#ced4da; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 2px rgba(0,204,0,.2); }
button { cursor:pointer; transition:background .2s,color .2s; }
button:hover { background:var(--c-accent); color:#000; }
button.delete { background:var(--c-danger); }
button.delete:hover { background:#c82333; color:#fff; }
.btn-sm { font-size:.82rem; padding:.28rem .5rem; border-radius:6px; }
.btn-ghost { background:transparent; border:none; padding:0 .25rem; cursor:pointer; }
.btn-ghost:hover { background:rgba(0,204,0,.15); }
.btn-chips{ display:flex; gap:.35rem; flex-wrap:wrap; }

/* === MODAL === */
.modal { display:none; position:fixed; z-index:1000; inset:0; background:rgba(0,0,0,.55); animation:fadeIn .2s ease-in; }
.modal-content { background:#1c2526; margin:6% auto; padding:1.1rem 1.25rem; border:1px solid var(--c-border); width:92%; max-width:560px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.4); }
body.light-mode .modal-content { background:#fff; border-color:#ced4da; }
.close { color:#adb5bd; float:right; font-size:1.5rem; font-weight:700; cursor:pointer; }
.close:hover,.close:focus { color:#fff; } body.light-mode .close:hover, body-light-mode .close:focus{ color:#212529; }
.form-group { margin: .75rem 0; }
.form-group label { display:block; margin-bottom:.35rem; font-weight:600; }

/* === DIAGRAM === */
#diagram-canvas{ border:2px solid #fff; background:var(--c-surface); width:800px; height:600px; display:block; border-radius:10px; margin:1rem 0; box-shadow:0 2px 8px rgba(0,0,0,.2); }
body.light-mode #diagram-canvas{ border-color:#212529; background:#fff; }
#context-menu{ position:absolute; background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; display:none; box-shadow:0 8px 16px rgba(0,0,0,.3); z-index:1000; }
#context-menu ul{ list-style:none; margin:0; padding:.25rem; } #context-menu li{ padding:.45rem .75rem; cursor:pointer; border-radius:6px; }
#context-menu li:hover{ background:#3e444a; } body.light-mode #context-menu li:hover{ background:#eff3f7; }

/* === NODE POPOVER + HIGHLIGHT === */
.node-popover{ position:absolute; z-index:1100; background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:.75rem .9rem; min-width:240px; max-width:320px; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.node-popover h4{ margin:0 0 .25rem; font-size:1rem; }
.node-popover .muted{ color:var(--c-muted); font-size:.9rem; margin-bottom:.35rem; }
.node-popover .actions{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem; }

.node-highlight{
	position:absolute; z-index:1050; pointer-events:none;
	border:2px solid var(--c-accent); border-radius:8px;
	animation:nodePulse 1.2s ease-out 3;
}
@keyframes nodePulse{ 0%{ box-shadow:0 0 0 0 rgba(0,204,0,.6);} 100%{ box-shadow:0 0 0 14px rgba(0,204,0,0);} }

/* === LOADER / SPINNER === */
.spinner-overlay{
	position:absolute; inset:0; background:rgba(0,0,0,.25);
	display:flex; align-items:center; justify-content:center; gap:.6rem;
	z-index:100; border-radius:inherit;
}
.spinner{
	width:28px; height:28px; border:3px solid rgba(255,255,255,.25);
	border-top-color:var(--c-accent); border-radius:50%;
	animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.spinner-text{ font-size:.9rem; color:#eee; }
body.light-mode .spinner-text{ color:#333; }

/* === TOASTY === */
#toast-root{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:2000; }
.toast{
	background:#1f1f1f; color:#fff; border:1px solid #444; border-radius:10px; padding:.6rem .8rem; min-width:220px;
	box-shadow:0 8px 16px rgba(0,0,0,.4); animation:toastIn .15s ease-out;
}
.toast.error{ border-color:#8b0000; background:#2a1111; }
.toast.success{ border-color:#0b5e0b; background:#112a11; }
.toast .small{ font-size:.85rem; color:#c8c8c8; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px)} to{ opacity:1; transform:translateY(0)} }

/* === LAYOUT / UTILITY === */
#controls{ display:flex; gap:.5rem; margin:.5rem 0; flex-wrap:wrap; }
#devices-sidebar div{ padding:.5rem; margin:.3rem 0; background:#3e444a; cursor:move; border-radius:6px; }
body.light-mode #devices-sidebar div{ background:#e9ecef; }
#devices-sidebar div:hover{ background:rgba(0,204,0,.15); color:#000; }
#devices-list{ margin-bottom:1rem; }
#qr-code{ background:#fff; padding:.5rem; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.2); }

.flex{ display:flex; } .gap-8{ gap:.5rem; } .justify-between{ justify-content:space-between; }
.mb-2{ margin-bottom:.5rem; } .mb-4{ margin-bottom:1rem; } .mt-1{ margin-top:.25rem; } .mt-2{ margin-top:.5rem; } .mt-4{ margin-top:1rem; }
.ml-2{ margin-left:.5rem; } .mx-auto{ margin-left:auto; margin-right:auto; } .w-full{ width:100%; }
.text-2xl{ font-size:1.5rem; line-height:2rem; } .text-lg{ font-size:1.125rem; } .font-semibold{ font-weight:600; }

.highlighted-row{ outline:2px solid var(--c-accent); background:#2f3a2f !important; }

/* === STAV ZAŘÍZENÍ === */
.status-cell{ min-width:160px; white-space:nowrap; }
.status-dot{ display:inline-block; padding:2px 8px; border-radius:999px; background:#6c757d; color:#fff; font-size:.85rem; }
.status-dot[data-status="up"]{ background:var(--c-success); color:var(--c-success-fg); }
.status-dot[data-status="down"]{ background:#721c24; color:var(--c-danger-fg); }
.status-dot[data-status="blocked"]{ background:#795548; }
.status-dot[data-status="unknown"]{ background:#6c757d; color:#fff; }
.badge{ display:inline-block; padding:.15rem .5rem; font-size:.78rem; border-radius:999px; border:1px solid var(--c-border); color:#ccc; }

/* === ROW MENU (⋮) === */
.rowmenu-wrap{ position:relative; }
.rowmenu-btn{ background:transparent; border:1px solid var(--c-border); padding:.25rem .45rem; border-radius:8px; }
.rowmenu{ position:absolute; right:0; top:calc(100% + 4px); background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; display:none; z-index:50; min-width:230px; box-shadow:0 8px 14px rgba(0,0,0,.25); }
.rowmenu.open{ display:block; }
.rowmenu a, .rowmenu button{ display:block; width:100%; text-align:left; background:transparent; border:none; padding:.5rem .7rem; border-radius:6px; color:inherit; }
.rowmenu a:hover, .rowmenu button:hover{ background:rgba(255,255,255,.06); } body.light-mode .rowmenu a:hover, body-light-mode .rowmenu button:hover{ background:#f1f3f5; }

/* === SERVIS === */
.service-panel{ background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:1rem; }
.service-toolbar{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
.service-list{ display:grid; gap:.6rem; margin-top:.5rem; }
.service-item{ background:#2a2a2a; border:1px solid var(--c-border); border-radius:8px; padding:.7rem .8rem; }
body.light-mode .service-item{ background:#fff; border-color:#ced4da; }
.service-item .meta{ color:var(--c-muted); font-size:.88rem; margin-bottom:.35rem; }
.service-item .note{ white-space:pre-wrap; }

/* === FILE MANAGER === */
.file-manager{ margin-top:1rem; }
.fm-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.fm-breadcrumbs a{ color:var(--c-accent); text-decoration:none; }
.fm-breadcrumbs a:hover{ text-decoration:underline; }
.fm-actions{ display:flex; gap:.5rem; align-items:center; }
.fm-content{ display:grid; grid-template-columns: 2fr 1fr; gap:1rem; margin-top:.75rem; }
.fm-side table input.fm-link{ width:100%; background:#1f1f1f; color:#fff; border:1px solid #444; padding:.3rem; border-radius:4px; }
body.light-mode .fm-side table input.fm-link{ background:#fff; color:#000; border-color:#ccc; }
.fm-side h4{ margin:.5rem 0; }
@media (max-width: 900px){ .fm-content{ grid-template-columns:1fr; } }

/* === QR === */
.qr-whiteframe{ background:#fff; padding:12px; border-radius:6px; display:inline-block; }

/* === TISK === */
@media print{
	button { display:none !important; }
	#qr-code, #device-qr-code { display:block; }
}
/* === VYLEPŠENÍ VZHLEDU: Objekty grid + separace === */
.objects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}
.objects-grid-item {
	background: var(--c-card);
	border: 1px solid var(--c-border);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	transition: box-shadow .2s;
}
.objects-grid-item:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
body.light-mode .objects-grid-item {
	background: #fff;
	border-color: #dee2e6;
}
.section {
	padding: 1.5rem 1.25rem;  /* Zvětšený padding pro separaci */
	max-width: 1400px;
	margin: 0 auto;
	animation: fadeIn .25s ease-in;
}

/* === HESLA + OBRÁZKY === */
.password-cell {
	font-family: monospace;
	font-size: 0.9rem;
	padding: 0.4rem;
	border-radius: 4px;
	background: rgba(0,0,0,0.1);
}
.password-cell:hover {
	background: rgba(0,204,0,0.1);
}
body.light-mode .password-cell {
	background: rgba(0,0,0,0.05);
}
.password-cell.masked {
	color: var(--c-muted);
}

/* === SERVIS / FILE MANAGER (lepší separace) === */
.service-panel, .file-manager {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 10px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
}
body.light-mode .service-panel, body.light-mode .file-manager {
	background: #fff;
	border-color: #dee2e6;
}