/* ================================================================
   sidebar.css  –  Compliance Checker
   Right-anchored sticky sidebar + edge-tab toggle button. The
   toggle is rendered as a sibling of .sticky-sidebar so the CSS
   sibling combinator can flip it between two positions: tucked
   against the closed sidebar, or aligned with the open sidebar's
   inner edge.
   ================================================================ */


/* === SIDEBAR PANEL ============================================= */

.sticky-sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: var(--card-bg);
  padding: 1rem;
  border-radius: 12px 0 0 12px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  width: 260px;
  z-index: var(--z-tooltip);
  transition: right 0.3s ease-in-out;
}

/* Off-screen state: 260px panel + 20px buffer so the box-shadow
   doesn't peek back onto the page. */
.sticky-sidebar.hidden {
  right: -280px;
}


/* === FORM CONTROLS INSIDE THE SIDEBAR ========================== */

.sticky-sidebar form {
  margin-bottom: 1rem;
}

.sticky-sidebar label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.sticky-sidebar select {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-input-border);
}


/* === TOGGLE BUTTON (edge tab) ================================== */

.toggle-button {
  position: fixed;
  top: 40%;
  right: 0;
  transform: translateY(-50%);
  z-index: calc(var(--z-tooltip) + 1);  /* one rung above the sidebar so the toggle stays clickable */
  background-color: navy;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: right 0.3s ease-in-out;
}

/* Toggle position tracks the sidebar via sibling combinator:
   tucked against the screen edge when sidebar is closed; aligned
   with the sidebar's inner edge (260px in) when open. */
.sticky-sidebar.hidden + .toggle-button {
  right: 0;
}

.sticky-sidebar:not(.hidden) + .toggle-button {
  right: 260px;
}