/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Tailwind CSS is loaded directly in the layout */

/* Desktop sidebar collapsed state */
.desktop-collapsed .sidebar-text {
  display: none;
}

.desktop-collapsed .sidebar-logo-text {
  display: none;
}

.desktop-collapsed .sidebar-user-text {
  display: none;
}

.desktop-collapsed .sidebar-icon {
  justify-content: center;
}

.desktop-collapsed .sidebar-link {
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Ensure logo and icons are always visible */
.desktop-collapsed .sidebar-icon img {
  display: block;
}

.desktop-collapsed .sidebar-link svg {
  display: block;
}

/* Center the logo section when collapsed */
.desktop-collapsed .p-6 {
  padding: 1.5rem 0.5rem;
}

/* Center navigation items when collapsed */
.desktop-collapsed .p-4 {
  padding: 1rem 0.5rem;
}

/* Ensure navigation links are properly centered */
.desktop-collapsed .sidebar-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Make sure the logo is visible and centered */
.desktop-collapsed .sidebar-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep icon sizes the same when collapsed */
.desktop-collapsed .sidebar-link svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}

.desktop-collapsed .sidebar-icon img {
  height: 48px !important;
  width: auto !important;
  flex-shrink: 0;
}

/* Ensure proper spacing for collapsed state */
.desktop-collapsed .sidebar-link {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Login section styling when collapsed */
.desktop-collapsed .sidebar-icon svg {
  display: block;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}

/* Center login link when collapsed */
.desktop-collapsed .sticky a.flex.items-center {
  justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Desktop sidebar toggle caret.
   The collapsed flag is written to <html> by the inline script in
   customer.html.erb, which runs before this button has been parsed, so the
   caret is turned from an ancestor class instead of from the element itself.
   That also keeps the orientation correct across Turbo navigations, before
   Stimulus reconnects. */
.sidebar-toggle-icon {
  transform: rotate(0deg);
}

.sidebar-is-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}
/* Admin account creation mode switch */
.account-mode-switch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
}

.account-mode-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.account-mode-switch__track {
  position: relative;
  display: block;
  width: 3rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #d1d5db;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 8%);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.account-mode-switch__track::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / 28%);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.account-mode-switch__input:checked + .account-mode-switch__track {
  background: #3f7d3a;
  box-shadow: inset 0 0 0 1px rgb(21 80 35 / 24%);
}

.account-mode-switch__input:checked + .account-mode-switch__track::after {
  transform: translateX(1.25rem);
}

.account-mode-switch__input:focus-visible + .account-mode-switch__track {
  outline: 2px solid #3f7d3a;
  outline-offset: 3px;
}

.account-password-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition:
    grid-template-rows 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms ease,
    transform 240ms ease,
    visibility 0s linear 240ms;
}

.account-password-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.account-password-panel__inner {
  min-height: 0;
  overflow: hidden;
}

.account-password-fields {
  padding-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .account-mode-switch__track,
  .account-mode-switch__track::after,
  .account-password-panel {
    transition-duration: 0.01ms;
  }
}