/* ============================================
   Washy Oakville — Collapsible Left Sidebar
   ============================================ */

:root {
  --sidebar-w: 72px;
  --sb-width-collapsed: 72px;
  --sb-width-expanded: 260px;
  --sb-bg: #0d1f35;
  --sb-border: rgba(255,255,255,0.08);
  --sb-icon-inactive: rgba(255,255,255,0.6);
  --sb-icon-active: #ffffff;
  --sb-label-inactive: rgba(255,255,255,0.75);
  --sb-label-active: #ffffff;
  --sb-active-bg: rgba(255,255,255,0.1);
  --sb-active-border: #00c8ee;
  --sb-hover-bg: rgba(255,255,255,0.06);
  --sb-cta-bg: #0097B2;
  --sb-transition: 0.3s ease;
  --sb-z: 100;
}

/* ── Hide old header nav ── */
#mad-header { display: none !important; }

/* ── Sidebar Core ── */
.washy-sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--sb-width-collapsed);
  height: 100vh;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  z-index: var(--sb-z);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width var(--sb-transition);
  font-family: 'Mulish', sans-serif;
}

/* ── Expand on hover (desktop) ── */
@media (min-width: 1024px) {
  .washy-sidebar:hover,
  .washy-sidebar.expanded {
    width: var(--sb-width-expanded);
  }
  .washy-sidebar:hover .sb-label,
  .washy-sidebar.expanded .sb-label {
    opacity: 1;
    max-width: 200px;
    visibility: visible;
  }
  .washy-sidebar:hover .sb-chevron,
  .washy-sidebar.expanded .sb-chevron {
    opacity: 1;
  }
  .washy-sidebar:hover .sb-logo-full,
  .washy-sidebar.expanded .sb-logo-full {
    opacity: 1;
    visibility: visible;
  }
  .washy-sidebar:hover .sb-logo-icon,
  .washy-sidebar.expanded .sb-logo-icon {
    opacity: 0;
    visibility: hidden;
  }
}

/* ── Page content shift ── */
.mad-page-wrapper {
  margin-left: var(--sb-width-collapsed) !important;
  transition: margin-left var(--sb-transition);
}

/* ── Logo area ── */
.sb-header {
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  border-bottom: 1px solid var(--sb-border);
  position: relative;
  flex-shrink: 0;
}
.sb-logo-icon {
  width: 32px; height: 32px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.sb-logo-full {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  height: 36px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* ── Nav items container ── */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
  list-style: none;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ── Single nav item ── */
.sb-item {
  position: relative;
  list-style: none;
  margin: 4px 8px;
}
.sb-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0;
  gap: 12px;
  border-radius: 8px;
  background: transparent;
  text-decoration: none;
  color: var(--sb-label-inactive);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.sb-link:hover,
.sb-link:focus {
  background: var(--sb-hover-bg);
  color: var(--sb-label-active);
  text-decoration: none;
}
.sb-link:hover .sb-icon-wrap .sb-icon,
.sb-link:focus .sb-icon-wrap .sb-icon {
  color: var(--sb-icon-active) !important;
}

/* Active state */
.sb-item.active > .sb-link {
  background: var(--sb-active-bg);
  color: var(--sb-label-active);
}
.sb-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 4px;
  background: var(--sb-active-border);
  border-radius: 0 4px 4px 0;
}
.sb-item.active > .sb-link .sb-icon-wrap .sb-icon {
  color: var(--sb-icon-active) !important;
}

/* Icon */
.sb-icon-wrap {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-icon {
  font-size: 20px;
  color: var(--sb-icon-inactive);
  transition: color 0.15s ease;
  line-height: 1;
}

/* Label (hidden when collapsed) */
.sb-label {
  opacity: 0;
  max-width: 0;
  visibility: hidden;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s ease, max-width 0.3s ease, visibility 0.3s ease;
  flex: 1;
}

/* Force Tabler Icon visibility */
.washy-sidebar .sb-item i,
.washy-sidebar .sb-icon,
.washy-sidebar i[class^="ti-"],
.washy-sidebar i[class*=" ti-"] {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-block !important;
  min-width: 20px;
  min-height: 20px;
}

/* Chevron (hidden when collapsed) */
.sb-chevron {
  font-size: 16px;
  color: rgba(255,255,255,0.3);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-left: auto;
}
.sb-item.sub-open > .sb-link .sb-chevron {
  transform: rotate(90deg);
}

/* ── CTA item (Find a Location) ── */
.sb-item.cta > .sb-link {
  background: var(--sb-cta-bg);
  border-radius: 8px;
  color: #ffffff;
  padding: 10px 0;
  width: 100%;
}
.sb-item.cta > .sb-link .sb-icon-wrap .sb-icon {
  color: #ffffff;
}
.sb-item.cta > .sb-link:hover {
  background: #007A91;
}

/* collapsed: teal icon only */
@media (min-width: 1024px) {
  .washy-sidebar:not(:hover):not(.expanded) .sb-item.cta > .sb-link {
    background: transparent;
    color: var(--sb-label-inactive);
  }
  .washy-sidebar:not(:hover):not(.expanded) .sb-item.cta > .sb-link .sb-icon-wrap .sb-icon {
    color: var(--sb-cta-bg);
  }
}

/* ── Logout (bottom separator) ── */
.sb-logout-separator {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
  padding: 8px 8px 12px;
}

/* ── Inline submenu (expanded accordion) ── */
.sb-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.sb-item.sub-open > .sb-submenu {
  max-height: 300px;
}
.sb-submenu .sb-sub-link {
  display: block;
  padding: 8px 16px 8px 52px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.sb-submenu .sb-sub-link:hover {
  color: #ffffff;
  background: var(--sb-hover-bg);
}

/* ── Fly-out panel (collapsed state) ── */
.sb-flyout {
  position: fixed;
  left: var(--sb-width-collapsed);
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 180px;
  z-index: 101;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.sb-flyout.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.sb-flyout a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sb-label-inactive);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.sb-flyout a:hover {
  color: #ffffff;
  background: var(--sb-hover-bg);
}

/* ── Footer (contact info) ── */
.sb-footer {
  padding: 16px 8px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-footer-line {
  display: flex;
  align-items: center;
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
  white-space: nowrap;
}
.sb-footer-line:last-child { margin-bottom: 0; }
.sb-footer-line .sb-footer-icon {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

/* ── Mobile hamburger ── */
.sb-hamburger {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 102;
  width: 42px; height: 42px;
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 22px;
  transition: background 0.15s ease;
}
.sb-hamburger:hover { background: rgba(255,255,255,0.06); }

/* ── Mobile backdrop ── */
.sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sb-backdrop.visible {
  display: block;
  opacity: 1;
}

/* ── Mobile overrides ── */
@media (max-width: 1023px) {
  .sb-hamburger { display: flex; }

  .washy-sidebar {
    width: 0;
    transform: translateX(-260px);
    transition: transform var(--sb-transition), width var(--sb-transition);
  }
  .washy-sidebar.mobile-open {
    width: 260px;
    transform: translateX(0);
  }
  .washy-sidebar.mobile-open .sb-label,
  .washy-sidebar.mobile-open .sb-chevron {
    opacity: 1;
    visibility: visible;
    max-width: 200px;
  }
  .washy-sidebar.mobile-open .sb-logo-full {
    opacity: 1;
    visibility: visible;
    left: 72px; /* Shift right to clear the hamburger button */
  }
  .washy-sidebar.mobile-open .sb-logo-icon {
    opacity: 0;
    visibility: hidden;
  }
  .washy-sidebar.mobile-open .sb-footer {
    opacity: 1;
    visibility: visible;
  }

  /* Content does NOT shift on mobile */
  .mad-page-wrapper {
    margin-left: 0 !important;
  }
  
  :root {
    --sidebar-w: 0px !important;
  }

  /* Flyouts disabled on mobile */
  .sb-flyout { display: none !important; }
}

/* ── Tooltip (collapsed icon hover) ── */
.sb-tooltip {
  position: fixed;
  left: calc(var(--sb-width-collapsed) + 8px);
  background: #1a2d45;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 102;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.sb-tooltip.visible { opacity: 1; }

/* Hide tooltips when expanded */
@media (min-width: 1024px) {
  .washy-sidebar:hover .sb-tooltip,
  .washy-sidebar.expanded .sb-tooltip {
    opacity: 0 !important;
  }
}