:root{
  --sidebar-width: 280px;
  --sidebar-bg: #0f172a;
  --sidebar-fg: #e2e8f0;
  --sidebar-active: #38bdf8;
  --topbar-bg: #111827;
  --content-bg: #0b1220;
  --content-fg: #e5e7eb;
  --border: #1f2937;
  --muted: #9ca3af;
  --dropdown-bg: #0d1426;
  --dropdown-hover: rgba(255,255,255,0.06);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  background: var(--content-bg);
  color: var(--content-fg);
}


/* iframe u contentu da zauzme skoro ceo ekran ispod topbara */
.iframe-wrap { position: relative; width: 100%; height: calc(100vh - 72px); }
.iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* Layout */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  grid-template-areas: "topbar topbar" "sidebar content";
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

/* Topbar */
.topbar { grid-area: topbar; display:flex; align-items:center; justify-content:space-between;
  position: sticky; top: 0; z-index: 70;
  background: var(--topbar-bg); border-bottom:1px solid var(--border); padding: 0 12px; }
.brand { font-size:16px; margin:0 8px; font-weight:600; }
.hamburger { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:none; background:transparent; color:var(--sidebar-fg); font-size:22px; cursor:pointer; }

.topbar-actions { display:flex; gap:8px; }
.btn { border:1px solid var(--border); background:transparent; color:var(--sidebar-fg);
  border-radius:8px; padding:6px 10px; cursor:pointer; }
.btn:hover { border-color: var(--sidebar-active); }
.btn-profile .btn-label { margin-left:6px; }

/* Profile dropdown */
.profile-wrapper { position: relative; }
#profileBtn { display:inline-flex; align-items:center; gap:8px; }
.caret-profile { font-size: 12px; opacity: .7; }

.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--dropdown-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  padding: 6px;
  display: none;
  z-index: 80;
}
.profile-menu.open { display: block; }

.profile-item {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius: 8px;
  color: var(--sidebar-fg);
  text-decoration: none;
  font-size: 14px;
}
.profile-item:hover { background: var(--dropdown-hover); }

/* button form look like link */
.profile-item.as-form { padding: 0; }
.profile-item.as-form button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--sidebar-fg);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
.profile-item.as-form button:hover { background: var(--dropdown-hover); }

/* Sidebar */
.sidebar { grid-area: sidebar; background: var(--sidebar-bg); border-right:1px solid var(--border);
  min-height: 0;
  padding:10px; overflow:auto; overscroll-behavior: contain; transition: transform .25s ease; }
.menu-root, .menu-level { list-style:none; margin:0; padding:0; }
.menu-item { display:block; }
.menu-link, .menu-toggle { width:100%; text-align:left; display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; border:1px solid transparent; color:var(--sidebar-fg);
  background:transparent; text-decoration:none; cursor:pointer; }
.menu-link:hover, .menu-toggle:hover { background: rgba(255,255,255,0.06); }
.menu-item.active > .menu-link { border-color: var(--sidebar-active); color: var(--sidebar-active); }
.mi-icon { font-size:18px; opacity:.9; }
.caret { margin-left:auto; font-size:12px; opacity:.7; }

/* Submenu */
.submenu { display:none; margin-left:0; }
.submenu.open { display:block; }

/* Indent */
.depth-0 { padding-left: 6px; }
.depth-1 { padding-left: 22px; }
.depth-2 { padding-left: 38px; }
.depth-3 { padding-left: 54px; }
.depth-4 { padding-left: 70px; }

/* Content */
.content,
.main-content,
#main-content {
  grid-area: content;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.page-title { margin-top: 6px; font-size: 22px; }

/* Desktop collapse via hamburger */
@media (min-width: 981px) {
  body.sidebar-collapsed .layout { grid-template-columns: 0 1fr; }
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); pointer-events: none; }
}

/* Mobile drawer */
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "content"; }
  .sidebar {
    position: fixed; z-index: 50; top: 56px; bottom: 0; left: 0; width: var(--sidebar-width);
    transform: translateX(-100%); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  }
  .sidebar.open { transform: translateX(0); }

  .brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn-profile .btn-label { display: none; }
}




/* ################################################################# */

#main-content > plc-app {
    display: block;
    position: relative;
    z-index: 1;
    min-width: max-content;
}