/* Shared Side Tab Styles */

/* Base tab styling - shared by all tabs */
.side-tab {
  position: fixed;
  right: 0;
  padding: 16px 10px;
  height: 160px;
  width: 40px;
  border-radius: 0;
  cursor: pointer;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
  transition: padding 0.3s ease, background 0.3s ease, opacity 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  opacity: 1;
}

/* When a tab is active (its panel is open) */
.side-tab.active {
  opacity: 1;
}

/* When ANY tab is active, fade out the non-active tabs */
body.drawer-open .side-tab:not(.active) {
  opacity: 0.5;
}

.side-tab:hover {
  padding-left: 16px;
  opacity: 1 !important;
}

.side-tab svg {
  transform: rotate(90deg);
}

/* Specific tab positions and colors — gradient: Search #8b1a2e → Ezra #7b2a27 → Summary #6b3a1f */
.search-tab {
  top: 220px;
  background: #8b1a2e;
}

.search-tab:hover {
  background: #7a1628;
}

.ezra-tab {
  top: 380px;
  background: #7b2a27;
}

.ezra-tab:hover {
  background: #6b2320;
}

.summary-tab {
  top: 540px;
  background: #6b3a1f;
  color: white;
}

.summary-tab:hover {
  background: #5a2e18;
}

/* Panel visibility - keep tabs visible when panels are open */
/* Tabs remain visible at right edge */

/* Responsive */
@media (max-width: 768px) {
  .side-tab {
    width: 36px;
    min-height: 80px;
    padding: 12px 8px;
    font-size: 12px;
  }
}

/* Dark mode — same gradient, slightly darker */
[data-theme="dark"] .search-tab {
  background: #6b1222;
}

[data-theme="dark"] .search-tab:hover {
  background: #580f1c;
}

[data-theme="dark"] .ezra-tab {
  background: #5e201e;
}

[data-theme="dark"] .ezra-tab:hover {
  background: #4e1a19;
}

[data-theme="dark"] .summary-tab {
  background: #4d2a14;
  color: white;
}

[data-theme="dark"] .summary-tab:hover {
  background: #3d2010;
}