/*
 * Lampdra — Shared Sidebar
 * shared.css  v4 — White sidebar (original brand colours)
 */

:root {
  --sb-width:        248px;
  --sb-transition:   0.22s cubic-bezier(.4,0,.2,1);

  /* White sidebar palette */
  --sb-bg:           #FFFFFF;
  --sb-bg2:          #F9FAFB;
  --sb-border:       #E5E7EB;
  --sb-border2:      #D1D5DB;
  --sb-text:         #111827;
  --sb-muted:        #6B7280;
  --sb-muted2:       #9CA3AF;
  --sb-surface:      #F3F4F6;
  --sb-surface2:     #E5E7EB;
  --sb-hover:        #F3F4F6;
  --sb-accent:       #00B894;
  --sb-accent-soft:  rgba(0,184,148,.1);
  --sb-accent-mid:   rgba(0,184,148,.15);
  --sb-accent-glow:  rgba(0,184,148,.25);

  --sb-s3-bg:        #F9FAFB;
}

/* ── BODY SHIFT ── */
body {
  padding-left: var(--sb-width) !important;
  transition: padding-left var(--sb-transition);
}

/* ── NAV BAR OFFSET ── */
body > nav {
  position: fixed !important;
  top: 0 !important;
  left: var(--sb-width) !important;
  width: calc(100% - var(--sb-width)) !important;
  z-index: 200 !important;
  transition: left var(--sb-transition), width var(--sb-transition);
}

body > nav + div,
body > nav + section,
body > nav + main,
body > nav + .hero,
body > nav + .studio-wrap {
  margin-top: 62px;
}

/* ═══════════════════════════════════════════
   SIDEBAR SHELL
   Divided into 3 flex sections using flex-basis
   Total = 10 units  →  S1: 20%, S2: 45%, S3: 35%
═══════════════════════════════════════════ */
#lampdra-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: var(--sb-width);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  z-index: 500;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 2px 0 12px rgba(0,0,0,.06);
}

/* ═══════════════════════════════════════════
   SECTION 1 — HEADER  (2/10 = 20%)
   Contains: logo, toggle, home btn, hint
═══════════════════════════════════════════ */
.sb-s1 {
  flex: 0 0 20%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--sb-border);
  overflow: hidden;
  padding-bottom: 6px;   /* breath before the S1 border divider */
}

/* Logo row */
.sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 54px;
  min-height: 54px;
  flex-shrink: 0;
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.sb-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #00B894, #00E0BE);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 12px var(--sb-accent-glow);
  letter-spacing: -1px;
}

.sb-logo-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--sb-text);
  white-space: nowrap;
  opacity: 1;
}

.sb-logo-text em {
  color: var(--sb-accent);
  font-style: normal;
}

/* Home + extra controls row */
.sb-controls {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sb-ctrl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  color: var(--sb-muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: all .13s;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1.5px solid transparent;
}

.sb-ctrl-item:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
}

.sb-ctrl-item.active {
  background: var(--sb-accent-mid);
  color: var(--sb-accent);
  border-color: rgba(0,184,148,.2);
}

.sb-ctrl-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--sb-surface);
  flex-shrink: 0;
  transition: background .13s;
  color: var(--sb-muted);
}

.sb-ctrl-item:hover .sb-ctrl-icon {
  background: var(--sb-surface2);
  color: var(--sb-text);
}

.sb-ctrl-item.active .sb-ctrl-icon {
  background: var(--sb-accent-soft);
  color: var(--sb-accent);
}

.sb-ctrl-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity var(--sb-transition);
}

/* ═══════════════════════════════════════════
   SECTION 2 — TOOLS  (4.5/10 = 45%)
   Contains: search bar + scrollable tool list
═══════════════════════════════════════════ */
.sb-s2 {
  flex: 0 0 45%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--sb-border);
  overflow: hidden;
}

/* Section label */
.sb-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--sb-muted2);
  padding: 8px 16px 3px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--sb-transition);
  flex-shrink: 0;
}

/* Search */
.sb-search-wrap {
  padding: 0 8px 5px;
  flex-shrink: 0;
}

.sb-search {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border2);
  border-radius: 9px;
  padding: 7px 10px;
  transition: all .15s;
  cursor: text;
}

.sb-search:focus-within {
  border-color: var(--sb-accent);
  background: rgba(0,184,148,.05);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}

.sb-search svg {
  flex-shrink: 0;
  color: var(--sb-muted);
}

.sb-search input {
  border: none;
  background: none;
  outline: none;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  color: var(--sb-text);
  width: 100%;
  font-weight: 500;
}

.sb-search input::placeholder {
  color: var(--sb-muted2);
}

/* ── NAV LIST (scrollable) ── */
.sb-nav {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;   /* always show scrollbar track, not just auto */
  overflow-x: hidden;
  padding: 2px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Always-visible scrollbar — dark grey on white sidebar */
.sb-nav::-webkit-scrollbar {
  width: 5px;
}
.sb-nav::-webkit-scrollbar-track {
  background: #E5E7EB;   /* matches --sb-border: clearly visible on white */
  border-radius: 10px;
  margin: 4px 0;
}
.sb-nav::-webkit-scrollbar-thumb {
  background: #9CA3AF;   /* matches --sb-muted2: solid grey, always visible */
  border-radius: 10px;
  min-height: 36px;
}
.sb-nav::-webkit-scrollbar-thumb:hover {
  background: #6B7280;   /* matches --sb-muted: darker on hover */
}

/* Firefox */
.sb-nav {
  scrollbar-width: thin;
  scrollbar-color: #9CA3AF #E5E7EB;
}

/* ── NAV ITEM ── */
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  color: var(--sb-muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: all .13s;
  white-space: nowrap;
  position: relative;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}

.sb-item:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
}

.sb-item.active {
  background: var(--sb-accent-mid);
  color: var(--sb-accent);
  border-color: rgba(0,184,148,.22);
}

/* Icon box */
.sb-item-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--sb-surface);
  transition: background .13s;
  color: var(--sb-muted);
}

.sb-item.active .sb-item-icon {
  background: var(--sb-accent-soft);
  color: var(--sb-accent);
}

.sb-item:hover .sb-item-icon {
  background: var(--sb-hover);
  color: var(--sb-text);
}

/* SVG icons inside tool items */
.sb-item-icon svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

/* Collapsed: icon must be perfectly centred in the row */

/* Label */
.sb-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity var(--sb-transition);
  line-height: 1.2;
  min-width: 0;
}

.sb-item-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--sb-muted2);
  margin-top: 1px;
}

.sb-item.active .sb-item-sub {
  color: rgba(0,184,148,.65);
}

/* ── HIDDEN ITEMS / NO RESULTS ── */
.sb-item.sb-hidden { display: none; }

.sb-no-results {
  font-size: 12px;
  color: var(--sb-muted2);
  text-align: center;
  padding: 16px 8px;
  display: none;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   SECTION 3 — SYSTEM
   Sized to content, not a fixed percentage —
   this prevents excess empty space when few items exist.
═══════════════════════════════════════════ */
.sb-s3 {
  flex: 0 0 auto;     /* shrink to content height, no fixed percentage */
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sb-s3-bg);
  overflow: hidden;
  border-top: 1px solid var(--sb-border);  /* clean top separator instead of box-shadow */
}

.sb-s3-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--sb-muted2);
  padding: 8px 16px 3px;  /* 8px top breathing space, 3px bottom before items */
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--sb-transition);
  flex-shrink: 0;
}

.sb-s3-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 8px 10px;  /* 10px bottom end-space — clear but not excessive */
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-x: hidden;
}

/* System items (same structure as .sb-item) */
.sb-sys-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;    /* reduced from 9px to match S1 ctrl-item density */
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  color: var(--sb-muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: all .13s;
  white-space: nowrap;
  position: relative;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}

.sb-sys-item:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
}

.sb-sys-item.active {
  background: var(--sb-accent-mid);
  color: var(--sb-accent);
  border-color: rgba(0,184,148,.2);
}

/* Danger: logout */
.sb-sys-item.danger:hover {
  background: rgba(239,68,68,.1);
  color: #F87171;
  border-color: rgba(239,68,68,.18);
}

.sb-sys-item.danger:hover .sb-sys-icon {
  color: #F87171;
  background: rgba(239,68,68,.1);
}

.sb-sys-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--sb-surface);
  transition: all .13s;
  color: var(--sb-muted);
}

.sb-sys-item:hover .sb-sys-icon {
  background: var(--sb-hover);
  color: var(--sb-text);
}

.sb-sys-icon svg {
  width: 14px;
  height: 14px;
}

.sb-sys-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity var(--sb-transition);
}

/* "Coming soon" badge */
.sb-soon-badge {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--sb-muted2);
  background: var(--sb-surface);
  border: 1px solid var(--sb-border2);
  border-radius: 4px;
  padding: 2px 5px;
  letter-spacing: .4px;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity var(--sb-transition);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════ */
.sb-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 499;
  backdrop-filter: blur(3px);
}

.sb-mobile-overlay.show {
  display: block;
}

.sb-mobile-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--sb-text);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  body {
    padding-left: 0 !important;
  }

  body > nav {
    left: 0 !important;
    width: 100% !important;
  }

  #lampdra-sidebar {
    transform: translateX(-100%);
    transition: transform var(--sb-transition), width var(--sb-transition);
    width: var(--sb-width) !important;
    z-index: 600;
  }

  #lampdra-sidebar.mobile-open {
    transform: translateX(0);
  }

  .sb-mobile-btn {
    display: flex;
  }
}