/* PrintFlow OS — unified sidebar (loaded by auth.js, overrides all page styles) */
:root {
  --pf-sidebar-w: 230px;
}

/* Prevent default browser margin showing as a white strip */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Fixed sidebar + flex body causes double offset (sidebar width + margin-left).
 * Block layout + margin-left on the main column is the canonical pattern.
 */
body:has(#pf-sidebar),
body:has(aside.sidebar) {
  display: block !important;
}

.layout:has(#pf-sidebar),
.layout:has(aside.sidebar) {
  display: block !important;
}

#pf-sidebar,
aside.sidebar {
  width: var(--pf-sidebar-w) !important;
  min-width: var(--pf-sidebar-w) !important;
  max-width: var(--pf-sidebar-w) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  /* Solid dark — must NOT be transparent or it looks different on light pages */
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 200 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#pf-sidebar .sidebar-logo,
aside.sidebar .sidebar-logo {
  padding: 22px 22px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#pf-sidebar .sidebar-logo h1,
aside.sidebar .sidebar-logo h1 {
  font-size: 1.2em !important;
  color: #00d4ff !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
}

#pf-sidebar .sidebar-section,
aside.sidebar .sidebar-section {
  padding: 16px 14px 4px !important;
}

#pf-sidebar .sidebar-section h3,
aside.sidebar .sidebar-section h3 {
  color: #555 !important;
  font-size: 0.65em !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 8px !important;
  padding: 0 10px !important;
  font-weight: 600 !important;
}

#pf-sidebar .sidebar-divider,
aside.sidebar .sidebar-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  margin: 4px 20px !important;
}

#pf-sidebar .nav-link,
aside.sidebar .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  color: #888 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  margin-bottom: 2px !important;
  transition: all 0.15s !important;
  font-size: 0.88em !important;
  position: relative !important;
}

#pf-sidebar .nav-link:hover,
aside.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ccc !important;
}

#pf-sidebar .nav-link.active,
aside.sidebar .nav-link.active {
  background: rgba(0, 212, 255, 0.12) !important;
  color: #00d4ff !important;
  font-weight: 600 !important;
}

#pf-sidebar .nav-link.active::before,
aside.sidebar .nav-link.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 3px !important;
  background: #00d4ff !important;
  border-radius: 0 3px 3px 0 !important;
}

#pf-sidebar .nav-link .icon,
aside.sidebar .nav-link .icon {
  font-size: 1.1em !important;
  width: 22px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

#pf-sidebar .nav-dropdown-toggle,
aside.sidebar .nav-dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(100% - 28px) !important;
  margin: 0 14px 2px !important;
  padding: 9px 14px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #555 !important;
  font-size: 0.65em !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
}

#pf-sidebar .nav-dropdown-toggle:hover,
aside.sidebar .nav-dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #888 !important;
}

#pf-sidebar .nav-dropdown-toggle .dd-chevron,
aside.sidebar .nav-dropdown-toggle .dd-chevron {
  font-size: 0.9em !important;
  transition: transform 0.15s !important;
  color: #666 !important;
}

#pf-sidebar .nav-dropdown-toggle.open .dd-chevron,
aside.sidebar .nav-dropdown-toggle.open .dd-chevron {
  transform: rotate(90deg) !important;
}

#pf-sidebar .nav-dropdown-toggle.open,
aside.sidebar .nav-dropdown-toggle.open {
  color: #888 !important;
}

#pf-sidebar .nav-dropdown-sub,
aside.sidebar .nav-dropdown-sub {
  display: none !important;
  padding-left: 6px !important;
  margin-bottom: 4px !important;
}

#pf-sidebar .nav-dropdown-sub.open,
aside.sidebar .nav-dropdown-sub.open {
  display: block !important;
}

#pf-sidebar .nav-link-sub,
aside.sidebar .nav-link-sub {
  padding-left: 28px !important;
  font-size: 0.84em !important;
}

/*
 * Sidebar offset — top-level content columns only.
 * Do NOT target bare `.main`: many pages nest `.main` inside `.main-wrapper`
 * which already has the offset (dashboard, scanner-v2, errors, etc.).
 */
.main-wrapper,
.main-content,
body > .main,
body > main.main,
.layout > .main-content {
  margin-left: var(--pf-sidebar-w) !important;
}

/* Undo accidental double-offset on nested inner `.main` blocks */
.main-wrapper > .main,
.main-content > .main,
.layout > .main-content > .main {
  margin-left: 0 !important;
}

@media (max-width: 768px) {
  #pf-sidebar,
  aside.sidebar {
    display: none !important;
  }
  .main-wrapper,
  .main-content,
  body > .main,
  body > main.main,
  .layout > .main-content {
    margin-left: 0 !important;
  }
}