/* ============================================================
   03 · APP SHELL + SIDEBAR (COMPLETE)
   AutoCAD Model Space Frame & RJ McLeod Industrial Spec
   ============================================================ */

/* ============================================================
   1. CORE APP SHELL & LAYOUT
   ============================================================ */
.app-shell {
  display: flex;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--cad-bg);
  box-sizing: border-box;
}

.app-body {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  min-width: 0;
  background-color: var(--cad-bg);
}

/* ============================================================
   2. SIDEBAR CONTAINER & BRAND HEADER
   The sidebar has its own palette (--sb-*): near-black in dark mode
   (its original look), light grey in light mode. Everything in the
   sidebar reads from these, so the two themes are defined here and
   nowhere else. Yellow TEXT uses --rjm-yellow-ink, which is already
   dark gold in light mode (bright yellow is unreadable on light grey).
   ============================================================ */
.sidebar {
  --sb-bg:             #141619;  /* dock */
  --sb-inset:          #0B0D0F;  /* recessed: toggle track, group bodies */
  --sb-surface:        #1A1E24;  /* raised: group headers, items */
  --sb-surface-hover:  #242932;
  --sb-border:         #363D4A;
  --sb-border-subtle:  #252B35;
  --sb-text:           #FFFFFF;
  --sb-text-secondary: #C5CBD5;
  --sb-text-muted:     #8C96A5;

  width: var(--sidebar-w, 260px);
  min-width: var(--sidebar-w, 260px);
  max-width: var(--sidebar-w, 260px);
  height: 100%;
  background-color: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  z-index: 100;
  color: var(--sb-text);
}

[data-theme="light"] .sidebar {
  --sb-bg:             #FFFFFF;  /* white dock */
  --sb-inset:          #DEE2E6;
  --sb-surface:        #F8F9FA;
  --sb-surface-hover:  #FFFFFF;
  --sb-border:         #C4CAD1;
  --sb-border-subtle:  #D5DADF;
  --sb-text:           #141619;
  --sb-text-secondary: #2B3036;
  --sb-text-muted:     #5B6572;
}

/* Brand Header */
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sb-border-subtle);
  flex-shrink: 0;
}

/* Logo spans the sidebar's full inner width, lined up with the portal
   name below it. assets/logo.avif is cropped tight to the artwork (~3.3:1,
   original with its wide transparent margins kept as logo-original.avif)
   and has a transparent background. Same in light and dark. */
.sidebar-logo {
  display: block;
  width: 100%;
  max-height: 72px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin: 4px 0 12px;
  background-color: transparent;
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--radius-xs);
}

.sidebar-titles .site-name {
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--sb-text);
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.sidebar-titles .site-company {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--rjm-yellow-ink);
  margin-top: 3px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sidebar-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  padding: 4px 6px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* ============================================================
   3. NAVIGATION MENU LINKS
   ============================================================ */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--sb-text-secondary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-xs);
  background: transparent;
  width: 100%;
  border: 1px solid transparent;
  text-align: left;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  box-sizing: border-box;
  cursor: pointer;
}

.nav-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2px;
}

.nav-link:hover {
  color: var(--sb-text);
  background-color: var(--sb-surface-hover);
  border-color: var(--sb-border);
}

/* Active Navigation: RJ McLeod High-Vis Yellow Fill */
.nav-link.active {
  color: var(--accent-on-fill);
  background-color: var(--accent-fill);
  border-color: var(--accent-line);
  font-weight: 700;
}

.nav-link.active svg {
  stroke: #000000;
  stroke-width: 2.5px;
}

/* ============================================================
   4. CATEGORY & MAP LAYER CONTROLLER
   Same visual language as the rest of the portal: square corners,
   yellow-filled active state (nav links, preset buttons, map mode
   buttons), yellow hover borders, sidebar palette (--sb-*).
   ============================================================ */
.sidebar-filter-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sb-border-subtle);
  overflow: hidden;
}

/* sidebar-legend-filter.js renders its own .sidebar-filter-wrapper INSIDE
   the one in index.html -- without this the divider/spacing doubles up. */
.sidebar-filter-container .sidebar-filter-wrapper {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sidebar-category-filter {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Layers / Focus switcher -- same pattern as the map's mode switcher */
.sidebar-mode-toggle {
  display: flex;
  background-color: var(--sb-inset);
  border: 1px solid var(--sb-border);
  border-radius: var(--radius-none);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
  user-select: none;
  margin-bottom: 8px;
}

.sidebar-mode-toggle .mode-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sb-text-muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 4px;
  border-radius: var(--radius-none);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.12s ease;
}

.sidebar-mode-toggle .mode-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
}

.sidebar-mode-toggle .mode-btn:hover {
  color: var(--sb-text);
  background-color: var(--sb-surface-hover);
}

.sidebar-mode-toggle .mode-btn.active {
  background-color: var(--accent-fill);
  border-color: var(--accent-line);
  color: var(--accent-on-fill);
  font-weight: 800;
}

.sidebar-mode-toggle .mode-btn.active svg {
  stroke: #000000;
}

/* Layer Utility Bar */
.sidebar-layer-utility-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 2px 6px 2px;
  flex-shrink: 0;
}

.sidebar-utility-link {
  background: none;
  border: none;
  color: var(--sb-text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.12s ease;
}

.sidebar-utility-link:hover {
  color: var(--rjm-yellow-ink);
}

/* Scrollable Container */
.sidebar-filter-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-border) transparent;
}

.sidebar-filter-container::-webkit-scrollbar {
  width: 6px;
}

.sidebar-filter-container::-webkit-scrollbar-thumb {
  background: var(--sb-border);
}

.sidebar-legend-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sb-text-muted);
  padding: 20px 4px;
  text-align: center;
  letter-spacing: 0.05em;
}

.sidebar-legend-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Plain text divider between Status/Category -- NOT a box, no toggle,
   just a small label so the flat list reads in two logical groups. */
.sidebar-legend-section-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  padding: 8px 2px 2px;
}
.sidebar-legend-section-label:first-child {
  padding-top: 2px;
}

/* Count badge on a legend item -- how many times this status/category
   actually appears across what's currently on screen. */
.sidebar-legend-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--sb-text-muted);
  background-color: var(--sb-inset);
  border: 1px solid var(--sb-border-subtle);
  padding: 1px 5px;
  border-radius: var(--radius-none);
  flex-shrink: 0;
}
.sidebar-legend-item.active .sidebar-legend-count {
  color: var(--rjm-yellow-ink);
  border-color: var(--accent-line);
  background-color: var(--accent-dim);
}

/* ============================================================
   5. ACCORDION LAYER GROUPS & COMPACT ITEMS
   ============================================================ */
.sidebar-layer-group {
  border: 1px solid var(--sb-border);
  border-radius: var(--radius-none);
  background-color: var(--sb-inset);
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 7px 10px;
  background-color: var(--sb-surface);
  border: none;
  color: var(--sb-text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.sidebar-group-toggle:hover {
  background-color: var(--sb-surface-hover);
}

.sidebar-group-toggle .toggle-icon {
  font-size: 10px;
  color: var(--sb-text-muted);
}

/* Count badge -- yellow variant of the HUD panels' count pill */
.group-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  background-color: var(--accent-dim);
  color: var(--rjm-yellow-ink);
  border: 1px solid var(--accent-line);
  padding: 1px 6px;
  border-radius: var(--radius-none);
  margin-left: 6px;
  font-weight: 700;
}

.group-badge.is-zero {
  display: none;
}

.sidebar-group-content {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--sb-border-subtle);
  background-color: var(--sb-inset);
}

.sidebar-layer-group.is-collapsed .sidebar-group-content {
  display: none;
}

/* Legend Item */
.sidebar-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border-subtle);
  padding: 6px 8px;
  border-radius: var(--radius-none);
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  color: var(--sb-text);
  font-size: 11px;
  font-weight: 600;
  transition: all 0.12s ease;
  box-sizing: border-box;
}

.sidebar-legend-item:hover {
  background-color: var(--sb-surface-hover);
  border-color: var(--accent-line);
}

/* Selected / visible -- same yellow tint as the cog menu's active items */
.sidebar-legend-item.active {
  background-color: var(--accent-dim);
  border-color: var(--accent-line);
}

.sidebar-legend-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sidebar-legend-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sidebar-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-none);
  flex-shrink: 0;
}

.sidebar-legend-text {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sb-text);
}

.sidebar-layer-check,
.sidebar-selected-indicator {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--sb-text-muted);
}

.sidebar-legend-item.active .sidebar-layer-check,
.sidebar-selected-indicator {
  color: var(--rjm-yellow-ink);
}

/* --- RAG STATUS ENCLOSED HIGHLIGHTS --- */
.sidebar-legend-item[data-status="Overdue"] .sidebar-legend-dot {
  background-color: var(--rag-red);
}
.sidebar-legend-item[data-status="Overdue"].active {
  background-color: var(--rag-red-dim);
  border: var(--border-rag-red);
  color: var(--sb-text);
}

.sidebar-legend-item[data-status="Open"] .sidebar-legend-dot {
  background-color: var(--rag-amber);
}
.sidebar-legend-item[data-status="Open"].active {
  background-color: var(--rag-amber-dim);
  border: var(--border-rag-amber);
  color: var(--sb-text);
}

.sidebar-legend-item[data-status="Resolved"] .sidebar-legend-dot,
.sidebar-legend-item[data-status="Complete"] .sidebar-legend-dot {
  background-color: var(--rag-green);
}
.sidebar-legend-item[data-status="Resolved"].active,
.sidebar-legend-item[data-status="Complete"].active {
  background-color: var(--rag-green-dim);
  border: var(--border-rag-green);
  color: var(--sb-text);
}

/* Off / not highlighted -- faded but still readable */
.sidebar-legend-item.dimmed {
  opacity: 0.45;
  filter: grayscale(60%);
  background-color: var(--sb-inset);
  border-color: var(--sb-border-subtle);
}
.sidebar-legend-item.dimmed:hover {
  opacity: 0.85;
  filter: none;
  border-color: var(--accent-line);
}

/* ============================================================
   6. DOCKED FOOTER FOR RESET BUTTON
   ============================================================ */
.sidebar-filter-footer {
  padding-top: 8px;
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--sb-border-subtle);
  background-color: var(--sb-bg);
}

.sidebar-legend-reset-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background-color: var(--rag-red-dim);
  border: var(--border-rag-red);
  color: var(--rag-red);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  border-radius: var(--radius-none);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s ease;
  box-sizing: border-box;
}

.sidebar-legend-reset-btn:hover {
  background-color: var(--rag-red);
  color: #FFFFFF;
}