*{box-sizing:border-box}
:root{
  --radius:16px;
  --shadow:0 20px 60px #0006, 0 2px 10px #0002;
}
html,body{height:100%;}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:#111827; background-size:cover; background-position:center; background-attachment:fixed;
}
.container{max-width:1100px;margin:40px auto;padding:0 16px}
.desktop{position:relative; width:100%; height:100vh; overflow:hidden;font-family:Roboto;}

.window{ position:absolute; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; border:1px solid #e5e7eb; }
.window.hidden{ display:none; }
.window.minimized{ opacity:.98 }
.window.collapsed .win-content{ display:none; }
.window.separated{ outline:1px solid #eceff3; }

.win-header{ height:38px; display:flex; align-items:center; gap:10px; padding:0 10px; color:#fff; font-weight:700; user-select:none; cursor:grab; }
.win-header:active{ cursor:grabbing }
.win-title{ flex:1; text-align:left; letter-spacing:.2px; padding-left:6px; } /* zarovnání vlevo s mezerou */
.win-controls{ display:flex; gap:8px; margin-left:auto } /* ovládací vpravo */
.btn{ width:22px; height:22px; border:none; border-radius:999px; background:#ffffff33; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; line-height:1; cursor:pointer }
.btn:hover{ background:#ffffff55 }

.win-content{ padding:12px; height:calc(100% - 38px); overflow:auto;    padding: 20px; line-height: 22px; }

/* Resize handles */
.resizer{ position:absolute; background:transparent; }
.resizer.r{ right:0; top:10px; width:8px; height:calc(100% - 20px); cursor:ew-resize; }
.resizer.b{ left:10px; bottom:0; width:calc(100% - 20px); height:8px; cursor:ns-resize; }
.resizer.br{ right:0; bottom:0; width:12px; height:12px; cursor:nwse-resize; }

/* Dock */
.dock{ position:fixed; left:0; right:0; bottom:14px; display:flex; justify-content:center; pointer-events:none;z-index:9999 }
.dock-inner{ display:flex; gap:14px; background:#111827cc; padding:8px 12px; border-radius:999px; box-shadow:0 10px 30px #0007; backdrop-filter: saturate(1.2) blur(6px); pointer-events:auto }
.dock-item{ background:transparent; border:none; padding:6px 8px; border-radius:12px; display:flex; align-items:center; gap:4px; cursor:pointer; color:#e5e7eb; font-weight:600 }
.dock-item:hover{ background:#ffffff1a }
.dock-item img{ width:48px; height:48px; object-fit:contain; filter:grayscale(1); transition:filter .2s ease }
.dock-item.active img{ filter:none } /* barevná verze při zadokování */
.dock-label{ font-size:.75rem; opacity:.9;display:none; }

/* Editor utility + toolbar alignment */
.notice{padding:12px 14px;border-radius:12px;margin:10px 0}
.notice.error{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}
body.dragging{ cursor:grabbing }

.toolbar{position:fixed;bottom:0;left:0;right:0;background:#111827;color:#fff;
padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;box-shadow:0 -6px 20px #0005, 0 -1px 0 #0b1220;z-index:1000;overflow-x:auto;overscroll-behavior:contain}

.toolbar .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;white-space:nowrap}
.btn, .btn.secondary, .btn.danger{ display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 14px }
.badge{display:inline-flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;color:#374151}

.btn, .btn.secondary, .btn.danger{white-space:nowrap; min-height:28px;}
/* Prevent overlap with toolbar */
body.editor-has-toolbar{padding-bottom:140px;}

/* ===== Scoped page styles to prevent leakage between main desktop and editor ===== */

/* Desktop page specific (index.php) */
.desktop-page .site-logo{
  position:fixed; top:16px; right:16px; width:96px; height:96px;
  object-fit:cover; border-radius:12px; z-index:1500; box-shadow:0 6px 18px #0004;
}

/* Editor page isolation (editor.php) */
.editor-page main.container{ max-width:1200px }
.editor-page .form-card{
  background:#fff; border:2px solid #EEEEEE; border-radius:16px; padding:16px;
  margin:16px 0; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.editor-page .form-card .card-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px; border-bottom:1px dashed #e5e7eb; padding-bottom:8px;
}
.editor-page .danger-link{ color:#b91c1c; cursor:pointer; font-weight:600 }
.editor-page .row, .editor-page .row3{
  display:grid; gap:12px;
}
.editor-page .row{ grid-template-columns:1fr 1fr }
.editor-page .row3{ grid-template-columns:repeat(3, 1fr) }
.editor-page label{ display:block; font-size:.9rem; color:#374151; margin-bottom:6px }
.editor-page input[type="text"], .editor-page input[type="number"], .editor-page textarea{
  width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; font:inherit; background:#fff;
}
.editor-page textarea{ min-height:100px; resize:vertical }

/* Preview stage for each window (keeps content contained and visually separated) */
.editor-page .preview{
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:16px; padding:12px;
  position:relative; height:260px; overflow:hidden;
}
.editor-page .preview .window.separated{ outline:1px solid #eceff3 }
.editor-page .preview .window{ box-shadow:0 12px 28px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.04) }

/* Editor toolbar pinned to bottom, separated from content */
.editor-page .toolbar{
  position:sticky; bottom:0; left:0; right:0; background:#0b1220; color:#fff;
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; box-shadow:0 -6px 20px rgba(0,0,0,.35);
}
.editor-page body.editor-has-toolbar{ padding-bottom:140px } /* safety */

/* Avoid generic .btn clashes in editor by scoping key overrides */
.editor-page .toolbar .btn{ height:38px; padding:0 14px; border-radius:12px; border:none;width:200px; }
.editor-page .toolbar .btn.secondary{ background:#374151; color:#fff }
.editor-page .toolbar .btn.danger{ background:#b91c1c; color:#fff }

/* === Dock icons as circles with grayscale toggle === */
.desktop-page .dock img,
.editor-page .dock img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease, filter 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Default (not docked) – grayscale */
.desktop-page .dock img:not(.docked),
.editor-page .dock img:not(.docked) {
  filter: grayscale(100%) brightness(0.9);
}

/* Docked (active) – colored */
.desktop-page .dock img.docked,
.editor-page .dock img.docked {
  filter: grayscale(0%) brightness(1.05);
}

/* Hover effect */
.desktop-page .dock img:hover,
.editor-page .dock img:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}


/* Minimalizovaný režim během přetahování */
.form-card.compact {
  overflow: hidden;
  height: auto;
  padding: 6px 10px;
  margin: 6px 0;
  transition: all 0.15s ease;
}
.form-card.compact > *:not(.card-header) {
  display: none !important;
}
.form-card.compact .card-header {
  margin: 0;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 15px;
  background: #f3f4f6;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

body.dragging {
  cursor: grabbing !important;
}

.form-card.drag-active {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
  border: 2px solid #2563eb;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}