/*
  Clean redesign layout:
  - calmer surfaces
  - fixed hover clipping on buttons/links
  - consistent spacing
*/

.shell{
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 160ms ease;
}
.shell.is-collapsed{ grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

.scrim{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  z-index: 15;
}


/* Sidebar */
.sidebar{
  padding: 14px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  backdrop-filter: blur(10px);
}
.sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 4px 12px 4px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: inherit;
  min-width:0;
}
.brand-logo{ width:30px; height:30px; object-fit:contain; }
.brand-text{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}

.top-actions{ display:flex; align-items:center; gap:10px; }

/* Icon buttons */
.icon-btn-sm{
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.icon-btn-sm .i{ width: 18px; height: 18px; }

.mobile-menu-btn{ display:none; }


.icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  box-shadow: var(--shadow2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 44px;
  position: relative;

  /* crucial: clip hover/focus layers to circle */
  overflow: hidden;
  background-clip: padding-box;

  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}
html[data-theme="light"] .icon-btn{ background: rgba(255,255,255,0.92); }

.icon-btn:hover{
  transform: translateY(-1px);
  background: var(--hover);
  border-color: rgba(52,211,153,0.35);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}
.icon-btn:active{ transform: translateY(0px) scale(.98); }

/* SVG icons inherit color */
.icon-btn .i{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.icon-btn .i-moon path{
  fill: currentColor;
  stroke: none;
  opacity: .92;
}

/* Theme icon switching */
#themeToggle .i-sun{ display:none; }
html[data-theme="light"] #themeToggle .i-sun{ display:block; }
html[data-theme="light"] #themeToggle .i-moon{ display:none; }

/* Collapse icon switching */
#sidebarToggle .i-chev-right{ display:none; }
.shell.is-collapsed #sidebarToggle .i-chev-left{ display:none; }
.shell.is-collapsed #sidebarToggle .i-chev-right{ display:block; }

.sidebar-content{
  padding: 6px 4px 4px 4px;
  height: calc(100vh - 98px);
  overflow:auto;
}

/* Collapse behaviour */
.shell.is-collapsed .sidebar-content{ display:none; }
.shell.is-collapsed .brand-text{ display:none; }
.shell.is-collapsed .sidebar-top{ justify-content:center; }
.shell.is-collapsed .brand{ display:none; }
.shell.is-collapsed #themeToggle{ display:none; }

/* Main */
.main{
  padding: 18px 18px 34px 18px;
  min-width:0;
  width: 100%;
}

.hudbar{
  width: 100%;
  margin: 0 0 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--border2);
  background: linear-gradient(90deg, rgba(52,211,153,0.10), rgba(255,255,255,0.00));
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-radius: var(--radius);
}
html[data-theme="light"] .hudbar{
  background: linear-gradient(90deg, rgba(52,211,153,0.12), rgba(255,255,255,0.92));
}

.hudbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.hud-where{
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: .90;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hud-desc{
  font-size: 11px;
  opacity: .62;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hud-desc:empty{ display:none; }

.hud-chip{
  font-size: 10px;
  letter-spacing: 1.2px;
  padding: 6px 10px;
  border: 1px solid rgba(52,211,153,0.40);
  background: rgba(52,211,153,0.10);
  text-transform: uppercase;
  border-radius: 999px;
}
.hud-title{
  font-size: 12px;
  opacity: .82;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.hudbar-right{ display:flex; align-items:center; gap:10px; }
.hud-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(52,211,153,0.12);
}
.hud-status{
  font-size: 10px;
  letter-spacing: 1.2px;
  opacity: .72;
  text-transform: uppercase;
}

/* Content card */
.content-card{
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
  will-change: opacity, transform, filter;

  width: 100%;
  max-width: none;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
  padding: 26px 26px 20px 26px;
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  margin: 0;
}

.content-card.is-transition-out{
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
}

.content-card.is-transition-in{
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
}


.footer{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 4px 0 4px;
}
.muted{ color: var(--muted); font-size: 12px; }

/* Prevent the page from generating horizontal scrollbars.  On some
 * mobile pages the combination of negative margins and long
 * breadcrumb strings can cause the document to overflow the
 * viewport horizontally.  By explicitly hiding horizontal
 * overflow on the html/body we avoid unsightly side scroll.
 */
html, body {
  overflow-x: hidden;
}

/* Allow header and description text in the HUD bar to wrap and
 * truncate properly.  Without these rules long page titles or
 * breadcrumb paths may force the HUD bar to expand beyond its
 * container on mobile.  We give flex children the ability to
 * shrink and wrap as needed.
 */
.hudbar-left, .hudbar-right {
  min-width: 0;
}
.hud-where, .hud-title, .hud-desc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 860px) {
  /* Allow the hud bar to wrap on small screens rather than
   * overflowing horizontally.  Right side is pushed to new line
   * automatically.  Breadcrumbs wrap onto multiple lines.  */
  .hudbar {
    flex-wrap: wrap;
  }
  .hudbar-right {
    width: 100%;
    justify-content: flex-end;
  }
  .hud-where {
    white-space: normal;
  }
}

/* Responsive */
@media (max-width: 860px){
  /* Single-column layout on mobile (no "content shifts left") */
  .shell,
  .shell.is-collapsed{ grid-template-columns: 1fr !important; }

  .mobile-menu-btn{ display:inline-flex; }

  /* Off-canvas sidebar */
  .sidebar{
    position: fixed;
    left: 12px;
    top: 12px;
    height: calc(100vh - 24px);
    width: min(var(--sidebar-w), calc(100vw - 24px));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 20;
    border-radius: var(--radius);

    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .shell.is-mobile-open .sidebar{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .shell.is-mobile-open .scrim{ display:block; }

  /* Don't hide sidebar content on mobile even if desktop state is "collapsed" */
  .shell.is-collapsed .sidebar-content{ display:block; }
  .shell.is-collapsed .brand{ display:inline-flex; }
  .shell.is-collapsed .brand-text{ display:inline; }
  .shell.is-collapsed #themeToggle{ display:inline-flex; }

  .main{ padding: 14px 12px 26px 12px; }
  .content-card{ padding: 18px 16px; }
}