/* file: portal/app/static/css/sidebar.css
 *
 * All sidebar styles in one file - single source of truth.
 * Loaded via sidebar.html.
 *
 * Table of Contents:
 * ------------------
 * 1. CSS Custom Properties
 * 2. Base Sidebar Styles
 * 3. Navigation Items (btn-toggle, sidebar-link)
 * 4. Sidebar Components (logo, icon, label, chevron)
 * 5. Sub-navigation Styles
 * 6. Dividers
 * 7. Section Header & Account Selector
 * 8. Sidebar Footer
 * 9. Mini Sidebar (Collapsed State)
 * 10. Mini Sidebar (Hover/Expanded State)
 * 11. Utilities
 */

/* ===========================================
   1. CSS Custom Properties
   =========================================== */

:root {
  --sidebar-width: 256px;
  --sidebar-mini-width: 56px;
  --sidebar-padding-x: 0.5rem;
  --sidebar-padding-y: 0.25rem;
  --sidebar-item-spacing: 0.5rem;
  --sidebar-icon-size: 1.5rem;
  --sidebar-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);  /* Material Design standard */
  --sidebar-divider-margin-x: var(--sidebar-padding-x);  /* Consistent divider inset */
  --sidebar-active-bar-width: 3px;
  --sidebar-active-bar-gap: 0.25rem;
}

/* ===========================================
   2. Base Sidebar Styles
   =========================================== */

.sidebar {
  position: sticky;
  top: 0;
  width: var(--sidebar-width);
  height: 100%;  /* Relative to app-shell */
  flex-shrink: 0;
  background-color: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;  /* Children handle scrolling */
  z-index: 1030;
}

/* Hide border when sidebar has no navigation (e.g. login, password reset) */
.sidebar:not(:has(.sidebar-footer)) {
  border-right: none;
}

/* Scrollable navigation area */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--sidebar-border) transparent;
  padding: 1rem;  /* Vertical padding only; horizontal handled by items */
}

/* Ensure list elements take full width */
.sidebar-nav ul,
.sidebar-nav li {
  width: 100%;
}

.sidebar .nav-section {
  margin-bottom: var(--sidebar-item-spacing);
}

/* ===========================================
   3. Navigation Items (btn-toggle, sidebar-link)
   =========================================== */

/* Shared styles for navigation items - use .sidebar prefix for specificity over Bootstrap .btn */
.sidebar .btn-toggle,
.sidebar .sidebar-link {
  padding: var(--sidebar-padding-y) var(--sidebar-padding-x);
  color: var(--sidebar-text);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 0;
  text-decoration: none;
}

.sidebar .btn-toggle {
  font-weight: 600;
}

.sidebar .btn-toggle:hover,
.sidebar .btn-toggle:focus,
.sidebar .sidebar-link:hover,
.sidebar .sidebar-link:focus {
  color: var(--palette-neutral-1000);
  background-color: var(--sidebar-hover-bg);
}

/* Active state for current section (direct or via child) */
.sidebar .btn-toggle.active,
.sidebar .nav-section:has(.btn-toggle-nav a.active) > .btn-toggle,
.sidebar .nav-section:has(.sidebar-link.active) > .btn-toggle {
  color: var(--sidebar-active-text) !important;
  background-color: var(--sidebar-active) !important;
  font-weight: 600;
}

/* Active state for top-level direct links (no children) - blue bg + white text */
.sidebar > .sidebar-nav > ul > li > .sidebar-link.active,
.sidebar .nav-section > .sidebar-link.active {
  color: var(--sidebar-active-text);
  background-color: var(--sidebar-active);
  font-weight: 400;
}

.sidebar .sidebar-link.active::before {
  content: "";
  position: absolute;
  /* text-start - bar-width - gap */
  left: calc(var(--sidebar-padding-x) + var(--sidebar-icon-size) + 1rem - var(--sidebar-active-bar-width) - var(--sidebar-active-bar-gap));
  top: 50%;
  transform: translateY(-50%);
  width: var(--sidebar-active-bar-width);
  height: 1.5em;
  background-color: var(--primary);
  border-radius: 0.125rem;
}

/* ===========================================
   4. Sidebar Components (logo, icon, label, chevron)
   =========================================== */

/* Sidebar logo */
.sidebar-logo {
  padding: 0 var(--sidebar-padding-x);
  color: var(--palette-neutral-1000);
  justify-content: center;
}

/* Sidebar icon - consistent size and spacing */
.sidebar-icon {
  font-size: 1.125rem;
  width: var(--sidebar-icon-size);
  text-align: center;
  flex-shrink: 0;
}

/* Sidebar label - with flex-grow to push chevron right */
.sidebar-label {
  flex-grow: 1;
  font-weight: 400;
  margin-left: 1rem;  /* Room for active vertical bar + gap on each side */
  text-align: left;
}

/* Chevron for collapsible sections */
.btn-toggle[data-bs-toggle="collapse"] .sidebar-chevron {
  font-family: "bootstrap-icons";
  font-size: 0.75rem;
  margin-left: auto;
  transition: transform 0.25s ease;
  opacity: 0.6;
}

.btn-toggle[data-bs-toggle="collapse"] .sidebar-chevron::before {
  content: "\F285"; /* bi-chevron-right */
}

.btn-toggle[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(90deg);
}

/* ===========================================
   5. Sub-navigation Styles
   =========================================== */

.btn-toggle-nav {
  margin-top: 0.25rem;
}

.sidebar .btn-toggle-nav a {
  padding: calc(var(--sidebar-item-spacing) * 0.75) var(--sidebar-padding-x);
  padding-left: calc(var(--sidebar-padding-x) + var(--sidebar-icon-size) + 1rem);
  border-radius: var(--radius-field);
  display: block;
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: normal;
}

.sidebar .btn-toggle-nav a:hover,
.sidebar .btn-toggle-nav a:focus {
  background-color: var(--sidebar-hover-bg);
  color: var(--palette-neutral-1000);
}

.sidebar .btn-toggle-nav a.active {
  font-weight: 500;
  color: var(--page-text);
  position: relative;
}

/* Vertical bar indicator for active sub-item */
.btn-toggle-nav a.active::before {
  content: "";
  position: absolute;
  /* text-start - bar-width - gap (text-start = padding-left of sub-item) */
  left: calc(var(--sidebar-padding-x) + var(--sidebar-icon-size) + 1rem - var(--sidebar-active-bar-width) - var(--sidebar-active-bar-gap));
  top: 50%;
  transform: translateY(-50%);
  width: var(--sidebar-active-bar-width);
  height: 1.5em;
  background-color: var(--primary);
  border-radius: 0.125rem;
}

/* ===========================================
   6. Dividers
   =========================================== */

/* Base divider style - takes full width with consistent margins */
.sidebar .nav-divider {
  border-top: 1px solid var(--sidebar-divider);
  margin: var(--sidebar-item-spacing) 0;
}

/* ===========================================
   7. Section Header & Account Selector
   =========================================== */

/* Section header with decorative lines */
.nav-section-header {
  display: flex;
  align-items: center;
  width: 100%;
  margin: calc(var(--sidebar-item-spacing) * 2) 0 var(--sidebar-item-spacing);
  padding: 0 var(--sidebar-padding-x);
  gap: var(--sidebar-padding-x);
}

.nav-section-header::before,
.nav-section-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--sidebar-divider);
}

.nav-section-header span {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--sidebar-text);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

/* Account selector (customer/domain tree) */
.account-selector {
  width: 100%;
  padding: 0 var(--sidebar-padding-x);
}

.account-selector .form-select {
  font-size: 0.875rem;
  background-color: var(--input);
  color: var(--input-text);
}

/* ===========================================
   8. Sidebar Footer
   =========================================== */

.sidebar-footer {
  flex-shrink: 0;
  background-color: var(--sidebar);
  padding: 0 0 1rem 0;
}

.sidebar-footer-actions {
  display: flex;
  gap: 0.25rem;
  padding: 0 var(--sidebar-padding-x);
}

.sidebar-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--sidebar-text);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  text-decoration: none;
}

.sidebar-footer-btn:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--palette-neutral-1000);
  transform: scale(1.05);
}

.sidebar-footer-btn:focus {
  outline: none;
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--focus-ring);
}

.sidebar-footer-btn:active {
  transform: scale(0.95);
}

/* Logout button subtle warning on hover */
.sidebar-footer-btn-logout:hover {
  background-color: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

/* ===========================================
   9. Mini Sidebar (Collapsed State)
   =========================================== */

.sidebar-mini {
  position: absolute;  /* Relative to app-shell */
  left: 0;
  top: 0;
  width: var(--sidebar-mini-width);
  height: 100%;
  z-index: 1030;  /* Above content, below modal backdrop (1040) */
  transition: width var(--sidebar-transition);
  padding: 1rem 0.5rem;
}

/* Content area needs margin when sidebar is mini (flyout mode) */
.page-wrapper:has(.sidebar-mini) .content-wrapper {
  margin-left: var(--sidebar-mini-width);
}

/* Disable scrollbar gutter in mini mode - no scrolling needed */
.sidebar-mini .sidebar-nav {
  scrollbar-gutter: auto;
  overflow-y: hidden;
  padding: 0;
}

/* Hide text elements when mini */
.sidebar-mini .sidebar-label,
.sidebar-mini .sidebar-chevron,
.sidebar-mini #domain-form,
.sidebar-mini .btn-toggle-nav,
.sidebar-mini .collapse {
  display: none;
}

/* Reserve vertical space for top-of-sidebar elements that appear on hover,
   so the icon column below doesn't shift when the rail expands.
   visibility:hidden keeps the box occupying space while hiding content. */
.sidebar-mini .nav-section-header,
.sidebar-mini .account-selector {
  visibility: hidden;
  pointer-events: none;
}

/* Hide active vertical bar in collapsed mini mode - only meaningful with text visible */
.sidebar-mini:not(:hover) .sidebar-link.active::before {
  display: none;
}

/* Short centered divider in mini mode */
.sidebar-mini .nav-divider {
  width: var(--sidebar-icon-size);  /* Match icon width for visual consistency */
  margin-left: auto;
  margin-right: auto;
}

/* Footer in mini mode - show only profile icon, centered */
.sidebar-mini .sidebar-footer .nav-divider {
  display: none;
}

.sidebar-mini .sidebar-footer-actions {
  justify-content: center;
}

.sidebar-mini .sidebar-footer-btn:not(:first-child) {
  display: none;
}

/* ===========================================
   10. Mini Sidebar (Hover/Expanded State)
   =========================================== */

.sidebar-mini:hover {
  width: var(--sidebar-width);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
}

/* Restore scrollbar gutter on hover */
.sidebar-mini:hover .sidebar-nav {
  scrollbar-gutter: stable;
  overflow-y: auto;
}

/* Show hidden elements on hover */
.sidebar-mini:hover .sidebar-label {
  display: inline;
}

.sidebar-mini:hover .sidebar-chevron,
.sidebar-mini:hover #domain-form,
.sidebar-mini:hover .btn-toggle-nav,
.sidebar-mini:hover .collapse.show {
  display: block;
}

/* Reveal space-reserved top elements on hover */
.sidebar-mini:hover .nav-section-header,
.sidebar-mini:hover .account-selector {
  visibility: visible;
  pointer-events: auto;
}

/* Restore divider full width on hover */
.sidebar-mini:hover .nav-divider {
  width: auto;
  margin-left: 0;
  margin-right: var(--sidebar-divider-margin-x);
}

/* Restore footer on hover */
.sidebar-mini:hover .sidebar-footer .nav-divider {
  display: block;
}

.sidebar-mini:hover .sidebar-footer-actions {
  justify-content: flex-start;
}

.sidebar-mini:hover .sidebar-footer-btn:not(:first-child) {
  display: inline-flex;
}

/* ===========================================
   11. Utilities
   =========================================== */

/* Wide tooltip for account/domain selectors */
.tooltip-wide .tooltip-inner {
  max-width: max-content;
}