/* Sidebar demo bridge (see sidebar.js). Scoped to .skd / img.skicon. */
svg.ico.skicon image { pointer-events: none; }
/* "Home Assistant" icons: grey glyphs, the active app in HA's primary blue. */
svg.skicon-ha { color: #a0a0a0; }
.sb-item:hover svg.skicon-ha { color: #e1e1e1; }
.sb-item.active svg.skicon-ha { color: #03a9f4; }

.skd {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.skd-pill {
  border: 1px solid #3b3b3b; background: rgba(20, 20, 20, .92); color: #cfcfcf;
  border-radius: 18px; padding: 6px 14px; cursor: pointer; font: inherit;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.skd-pill:hover { color: #fff; border-color: #555; }
.skd-body {
  width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 70px); overflow: auto; background: #f4f4f2; color: #1b1b1b;
  border-radius: 14px; padding: 12px 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}
.skd-body[hidden], .skd-opts[hidden] { display: none; }
.skd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.skd-head a { color: #2c6bed; text-decoration: none; }
.skd label { display: block; margin: 10px 0 4px; color: #5b5b5b; font-size: 12px; }
.skd-seg { display: flex; flex-wrap: wrap; background: #e2e2de; border-radius: 8px; padding: 2px; gap: 2px; }
.skd-seg button {
  flex: 1 0 auto; border: 0; background: transparent; border-radius: 6px; padding: 5px 6px;
  font: inherit; font-size: 12px; color: #333; cursor: pointer;
}
.skd-seg button.on { background: #fff; color: #000; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.skd select { width: 100%; font: inherit; padding: 5px 6px; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #1b1b1b; }
.skd-note { margin: 10px 0 0; color: #6b6b6b; font-size: 12px; }
@media (max-width: 760px) {
  .skd { top: auto; bottom: 12px; left: 16px; transform: none; align-items: flex-start; }
  .skd-body { order: -1; }
}

/* The device UI's green "Internet status" globe after the SKAARHOJ logo.
   It follows the logo: same breakpoints, hidden wherever the logo is. */
.skd-globe { flex: none; width: 24px; height: 24px; color: #4caf50; margin-left: -6px; }
.topbar.legacy .skd-globe { margin-left: 10px; }
.skd-noglobe .lg-globe { display: none; }
.shell.open.rt-logo .topbar .skd-globe { display: none; }
@media (min-width: 761px) and (max-width: 1100px) { .skd-globe { width: 20px; height: 20px; } }
@media (max-width: 760px) {
  .skd-globe { width: 16px; height: 16px; margin-left: -2px; }
  .shell.rt-logo .topbar .skd-globe { display: block; }
  .topbar.legacy .skd-globe { display: none; }
}
@media (max-width: 760px) { body:has(.rx-bar) .skd { bottom: 80px; } } /* clear the mockup's Reactor tab bar */