/* Application styles */

/* === Sidebar collapse — spring / rubber animation === */

/* Suppress transitions on initial load (no flash) */
html.sidebar-no-transition .sidebar-nav-container,
html.sidebar-no-transition .sidebar-inner,
html.sidebar-no-transition .sidebar-offset,
html.sidebar-no-transition .sidebar-item-text,
html.sidebar-no-transition .sidebar-section-label,
html.sidebar-no-transition .sidebar-section-divider {
  transition: none !important;
}

@media (min-width: 1024px) {
  .sidebar-nav-container {
    width: 18rem;
    overflow: hidden;
    transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  html[data-sidebar-collapsed] .sidebar-nav-container {
    width: 4.5rem;
  }

  .sidebar-offset {
    padding-left: 18rem;
    overflow-x: hidden;
    transition: padding-left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  html[data-sidebar-collapsed] .sidebar-offset {
    padding-left: 4.5rem;
  }
}

.sidebar-inner {
  overflow-x: hidden;
  transition: padding-left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              padding-right 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-sidebar-collapsed] .sidebar-inner {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Nav item text — collapse width + fade */
.sidebar-item-text {
  flex: 1 1 auto;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.35s ease, opacity 0.2s ease, margin-left 0.35s ease;
}

html[data-sidebar-collapsed] .sidebar-item-text {
  flex: 0 0 0;
  max-width: 0;
  opacity: 0;
  margin-left: 0 !important;
  pointer-events: none;
}

/* Section labels */
.sidebar-section-label {
  max-height: 2rem;
  overflow: hidden;
  white-space: nowrap;
  transition: max-height 0.35s ease, opacity 0.2s ease;
}

html[data-sidebar-collapsed] .sidebar-section-label {
  max-height: 0;
  opacity: 0;
}

/* Section dividers (only visible when collapsed) */
.sidebar-section-divider {
  max-height: 0;
  overflow: hidden;
  background-color: #e5e7eb;
  margin: 0 0.75rem;
  transition: max-height 0.35s ease, margin 0.35s ease;
}

html[data-sidebar-collapsed] .sidebar-section-divider {
  max-height: 1px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Center icons when collapsed */
html[data-sidebar-collapsed] .sidebar-nav-item {
  justify-content: center;
}

/* Hide "coming soon" badges when collapsed */
html[data-sidebar-collapsed] .sidebar-badge {
  display: none;
}

/* Logo swap */
.sidebar-logo-icon {
  display: none;
}

html[data-sidebar-collapsed] .sidebar-logo-full {
  display: none;
}

html[data-sidebar-collapsed] .sidebar-logo-icon {
  display: block;
}

html[data-sidebar-collapsed] .sidebar-logo-area {
  justify-content: center;
}

/* Toggle button appearance */
.sidebar-toggle-btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Active (sidebar expanded) */
html:not([data-sidebar-collapsed]) .sidebar-toggle-btn {
  border-color: #c7d2fe;
  background-color: #eef2ff;
  color: #4f46e5;
}

/* Inactive (sidebar collapsed) */
html[data-sidebar-collapsed] .sidebar-toggle-btn {
  border-color: #e5e7eb;
  background-color: transparent;
  color: #6b7280;
}

/* Tooltip styles */
.tooltip-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #111827;
}

/* === Dark mode overrides for hardcoded CSS values === */

html.dark .sidebar-section-divider {
  background-color: #374151; /* gray-700 */
}

html.dark:not([data-sidebar-collapsed]) .sidebar-toggle-btn {
  border-color: #3730a3;   /* indigo-800 */
  background-color: #1e1b4b; /* indigo-950 */
  color: #818cf8;          /* indigo-400 */
}

html.dark[data-sidebar-collapsed] .sidebar-toggle-btn {
  border-color: #374151;     /* gray-700 */
  background-color: transparent;
  color: #6b7280;            /* gray-500 */
}

html.dark .tooltip-arrow {
  border-top-color: #374151;
}