
/* ==========================================================================
   SolarDeye Sidebar Clean CSS V21
   Build: v21-purge-sidebar-css-20260429
   This file intentionally replaces all previous sidebar CSS.
   ========================================================================== */

:root {
  --sd-open-w: 230px;
  --sd-closed-w: 69px;
  --sd-bg1: #08172f;
  --sd-bg2: #102e70;
  --sd-card: rgba(255,255,255,.065);
  --sd-card-hover: rgba(59,130,246,.18);
  --sd-border: rgba(191,219,254,.16);
  --sd-text: #ffffff;
  --sd-muted: #b9c8e7;
}

/* Shell: RTL grid means first column is on the RIGHT */
html body.heavy-v100 .app-shell.has-layout-sidebar {
  display: grid !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  direction: rtl !important;
  background: #f5f8ff !important;
  transition: grid-template-columns .22s ease !important;
}

html body.heavy-v100.sd-sidebar-expanded-v21 .app-shell.has-layout-sidebar {
  grid-template-columns: var(--sd-open-w) minmax(0,1fr) !important;
}

html body.heavy-v100.sd-sidebar-collapsed-v21 .app-shell.has-layout-sidebar {
  grid-template-columns: var(--sd-closed-w) minmax(0,1fr) !important;
}

/* Sidebar: static grid item, never fixed/absolute */
html body.heavy-v100 .app-shell.has-layout-sidebar > .sd-sidebar-v11 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  align-self: stretch !important;
  min-height: 100vh !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 9px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  gap: 10px !important;
  color: var(--sd-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(260px circle at 18% 0%, rgba(96,165,250,.22), transparent 62%),
    linear-gradient(180deg, var(--sd-bg1) 0%, var(--sd-bg2) 100%) !important;
  box-shadow: none !important;
  z-index: 2 !important;
  transition: width .22s ease, min-width .22s ease, max-width .22s ease !important;
}

html body.heavy-v100.sd-sidebar-expanded-v21 .app-shell.has-layout-sidebar > .sd-sidebar-v11 {
  width: var(--sd-open-w) !important;
  min-width: var(--sd-open-w) !important;
  max-width: var(--sd-open-w) !important;
}

html body.heavy-v100.sd-sidebar-collapsed-v21 .app-shell.has-layout-sidebar > .sd-sidebar-v11 {
  width: var(--sd-closed-w) !important;
  min-width: var(--sd-closed-w) !important;
  max-width: var(--sd-closed-w) !important;
}

/* Main content: normal second grid column */
html body.heavy-v100 .app-shell.has-layout-sidebar > main,
html body.heavy-v100 .app-shell.has-layout-sidebar > .app-main,
html body.heavy-v100 .app-shell.has-layout-sidebar > .content-area,
html body.heavy-v100 .app-shell.has-layout-sidebar > .content-area.admin-shell-v2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px !important;
  position: relative !important;
  z-index: 1 !important;
  overflow-x: hidden !important;
  direction: rtl !important;
  transform: none !important;
}

/* Header */
html body.heavy-v100 .sd-sidebar-head-v11 {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.heavy-v100 .sd-menu-btn-v11 {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
  border: 1px solid var(--sd-border) !important;
  color: #dbeafe !important;
  background: rgba(255,255,255,.06) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

html body.heavy-v100 .sd-menu-btn-v11 * {
  pointer-events: none !important;
}

html body.heavy-v100 .sd-menu-btn-v11 .hs-icon-v180 {
  width: 18px !important;
  height: 18px !important;
}

html body.heavy-v100 .sd-user-v11 {
  display: grid !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

html body.heavy-v100.sd-sidebar-expanded-v21 .sd-user-v11 {
  grid-template-columns: 38px minmax(0,1fr) !important;
}

html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-user-v11 {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}

html body.heavy-v100 .sd-avatar-v11 {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  background: linear-gradient(145deg,#3b5bff,#1d4ed8) !important;
  color: #fff !important;
  font-size: .75rem !important;
  font-weight: 950 !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.28), inset 0 0 0 1px rgba(255,255,255,.18) !important;
}

html body.heavy-v100 .sd-avatar-v11 span {
  position: absolute !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  right: 2px !important;
  bottom: 4px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 3px #0b1b3d !important;
}

html body.heavy-v100 .sd-user-copy-v11 {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

html body.heavy-v100 .sd-user-copy-v11 strong {
  color: #fff !important;
  font-size: .76rem !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  white-space: normal !important;
  overflow: visible !important;
}

html body.heavy-v100 .sd-user-copy-v11 small {
  color: var(--sd-muted) !important;
  font-size: .58rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

/* Language */
html body.heavy-v100 .sd-lang-v11 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

html body.heavy-v100 .sd-lang-v11 a {
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  color: #d7e4ff !important;
  text-decoration: none !important;
  font-size: .64rem !important;
  font-weight: 900 !important;
  border: 1px solid var(--sd-border) !important;
  background: rgba(255,255,255,.055) !important;
}

html body.heavy-v100 .sd-lang-v11 a.active {
  color: #fff !important;
  border-color: rgba(147,197,253,.55) !important;
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
}

/* Nav */
html body.heavy-v100 .sd-nav-v11 {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 0 0 10px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(147,197,253,.38) transparent !important;
}

html body.heavy-v100 .sd-group-title-v11 {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 7px 2px 3px !important;
  color: #9fb3d8 !important;
  font-size: .58rem !important;
  font-weight: 900 !important;
}

html body.heavy-v100 .sd-group-title-v11::before,
html body.heavy-v100 .sd-group-title-v11::after {
  content: "" !important;
  height: 1px !important;
  background: rgba(191,219,254,.16) !important;
}

html body.heavy-v100 .sd-nav-item-v11 {
  width: 100% !important;
  min-height: 42px !important;
  display: grid !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 13px !important;
  color: #e5efff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.055) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body.heavy-v100.sd-sidebar-expanded-v21 .sd-nav-item-v11 {
  grid-template-columns: 22px minmax(0,1fr) auto !important;
  justify-items: stretch !important;
}

html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-nav-item-v11 {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}

html body.heavy-v100 .sd-nav-item-v11.active {
  color: #fff !important;
  background: linear-gradient(135deg,#4f9cff,#2563eb) !important;
  border-color: rgba(147,197,253,.55) !important;
}

html body.heavy-v100 .sd-nav-icon-v11 {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  color: #c8d8f5 !important;
}

html body.heavy-v100 .sd-nav-icon-v11 .hs-icon-v180 {
  width: 16px !important;
  height: 16px !important;
}

html body.heavy-v100 .sd-nav-text-v11 {
  color: inherit !important;
  font-size: .72rem !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: start !important;
}

html body.heavy-v100 .sd-nav-badge-v11 {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #0f1b3d !important;
  background: #fbbf24 !important;
  font-size: .6rem !important;
  font-weight: 950 !important;
}

/* Footer/logout */
html body.heavy-v100 .sd-sidebar-footer-v11 {
  margin-top: auto !important;
  position: sticky !important;
  bottom: 0 !important;
  border-top: 1px solid rgba(191,219,254,.16) !important;
  background: linear-gradient(180deg, rgba(16,46,112,0) 0%, rgba(16,46,112,.94) 25%, rgba(16,46,112,1) 100%) !important;
  padding-top: 12px !important;
}

html body.heavy-v100 .sd-sidebar-footer-v11 form {
  margin: 0 !important;
}

html body.heavy-v100 .sd-logout-v11 {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(248,113,113,.56) !important;
  background: rgba(127,29,29,.12) !important;
  color: #fca5a5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font: inherit !important;
  font-size: .7rem !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  position: relative !important;
}

html body.heavy-v100 .sd-logout-v11::after {
  content: none !important;
  display: none !important;
}

html body.heavy-v100 .sd-logout-v11 .hs-icon-v180 {
  width: 16px !important;
  height: 16px !important;
}

/* collapsed hides text only */
html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-user-copy-v11,
html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-lang-v11,
html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-group-title-v11,
html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-nav-text-v11,
html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-nav-badge-v11,
html body.heavy-v100.sd-sidebar-collapsed-v21 .sd-logout-v11 span {
  display: none !important;
}

html body.heavy-v100.sd-sidebar-expanded-v21 .sd-user-copy-v11,
html body.heavy-v100.sd-sidebar-expanded-v21 .sd-lang-v11,
html body.heavy-v100.sd-sidebar-expanded-v21 .sd-group-title-v11 {
  display: grid !important;
}

html body.heavy-v100.sd-sidebar-expanded-v21 .sd-nav-text-v11,
html body.heavy-v100.sd-sidebar-expanded-v21 .sd-logout-v11 span {
  display: block !important;
}

.dev-build-notice-v11 {
  position: fixed;
  top: 18px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: min(560px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg,#0f172a,#1d4ed8);
  color: #fff;
  border: 1px solid rgba(147,197,253,.35);
  box-shadow: 0 18px 50px rgba(15,23,42,.28);
}

.dev-build-notice-v11[hidden] {
  display: none !important;
}

.dev-build-notice-v11 span {
  display: block;
  color: #bfdbfe;
  font-size: .85rem;
  direction: ltr;
  text-align: start;
}

.dev-build-notice-v11 button {
  border: 0;
  border-radius: 12px;
  padding: 8px 14px;
  background: #fbbf24;
  color: #111827;
  font-weight: 900;
  cursor: pointer;
}

.dev-build-badge-v11 {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
  box-shadow: 0 8px 22px rgba(15,23,42,.18);
}

.dev-build-badge-v11::after {
  /* Sidebar build trail removed in v32 — single subtle badge in base.html. */
  content: "";
}

@media(max-width:900px) {
  html body.heavy-v100 .app-shell.has-layout-sidebar {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  html body.heavy-v100 .app-shell.has-layout-sidebar > .sd-sidebar-v11 {
    position: fixed !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    z-index: 1055 !important;
  }
  html body.heavy-v100.sd-sidebar-expanded-v21 .app-shell.has-layout-sidebar > .sd-sidebar-v11 {
    width: min(84vw, var(--sd-open-w)) !important;
    min-width: min(84vw, var(--sd-open-w)) !important;
    max-width: min(84vw, var(--sd-open-w)) !important;
  }
}
