/**
 * Sidebar Responsive Behavior
 * ===========================
 * Unified responsive handling for both .bases-sidebar and .people-sidebar
 * 
 * Breakpoints:
 *   Mobile (≤768px)  - Hidden by default, overlay when shown
 *   Tablet (769-1024px) - Collapsed to 48px icon rail
 *   Desktop (>1024px) - Full 240px width
 */

/* ==========================================================================
   CSS Custom Properties for Sidebars
   ========================================================================== */

:root {
  --sidebar-width-full: 240px;
  --sidebar-width-collapsed: 48px;
  --sidebar-transition: 0.3s ease;
  --sidebar-backdrop-color: rgba(0, 0, 0, 0.5);
  --sidebar-z-index: 100;
  --sidebar-backdrop-z-index: 99;
}


/* ==========================================================================
   Pull Tab Indicator (Mobile Edge Swipe Hint)
   ========================================================================== */

/* Pull tab - subtle indicator on left edge for swipe gesture */
.sidebar-pull-tab {
  display: none;
  position: fixed;
  left: 0;
  bottom: 5px !important;
  z-index: calc(var(--sidebar-z-index) + 1);
  width: 4px !important;
  height: 18px !important;
  max-width: 4px !important;
  max-height: 18px !important;
  min-width: 4px !important;
  min-height: 18px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: pan-y;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar-pull-tab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

/* Inner element with glass/neon styling */
.pull-tab-inner {
  width: 100% !important;
  height: 100% !important;
  max-width: 4px !important;
  max-height: 18px !important;
  background: rgba(0, 245, 212, 0.4);
  border: none;
  border-radius: 0 2px 2px 0;
  transition: all 0.2s ease;
}

/* Remove the inner glow line - too big for small tab */
.pull-tab-inner::before {
  display: none;
}

/* Hover/active state */
.sidebar-pull-tab:hover .pull-tab-inner,
.sidebar-pull-tab:active .pull-tab-inner {
  background: linear-gradient(
    135deg,
    rgba(0, 245, 212, 0.25) 0%,
    rgba(0, 245, 212, 0.12) 100%
  );
  border-color: rgba(0, 245, 212, 0.5);
  box-shadow: 
    0 0 15px rgba(0, 245, 212, 0.35),
    inset 0 0 10px rgba(0, 245, 212, 0.1);
}

.sidebar-pull-tab:active .pull-tab-inner {
  transform: scaleX(1.2);
}

/* Tablet expand button - shown in collapsed state */
.sidebar-expand-btn {
  display: none;
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--sidebar-transition);
}

.sidebar-expand-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #fff);
}

.sidebar-expand-btn svg {
  width: 18px;
  height: 18px;
}


/* ==========================================================================
   Sidebar Backdrop (Mobile Overlay)
   ========================================================================== */

.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--sidebar-backdrop-color);
  z-index: var(--sidebar-backdrop-z-index);
  opacity: 0;
  transition: opacity var(--sidebar-transition);
}

.sidebar-backdrop.visible {
  display: block;
  opacity: 1;
}


/* ==========================================================================
   Shared Sidebar Base Styles (ensure consistency)
   ========================================================================== */

.bases-sidebar,
.people-sidebar,
.calendar-sidebar {
  transition: width var(--sidebar-transition), 
              min-width var(--sidebar-transition),
              transform var(--sidebar-transition);
}


/* ==========================================================================
   Mobile (≤768px) - Hidden by default, edge swipe + pull tab to open
   ========================================================================== */

@media (max-width: 768px) {
  /* Show pull tab on mobile */
  .sidebar-pull-tab {
    display: flex;
  }

  /* Position based on which sidebar's parent is active */
  .bases-layout .sidebar-pull-tab,
  .people-layout .sidebar-pull-tab,
  .calendar-layout .sidebar-pull-tab {
    display: flex;
  }

  /* Sidebar base mobile styles */
  .bases-sidebar,
  .people-sidebar,
  .calendar-sidebar {
    position: fixed;
    top: 60px; /* Below main nav */
    left: 0;
    height: calc(100vh - 60px);
    width: var(--sidebar-width-full);
    min-width: var(--sidebar-width-full);
    z-index: var(--sidebar-z-index);
    transform: translateX(-100%);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
  }

  /* Show sidebar when .sidebar-open is on the layout */
  .bases-layout.sidebar-open .bases-sidebar,
  .people-layout.sidebar-open .people-sidebar,
  .calendar-layout.sidebar-open .calendar-sidebar {
    transform: translateX(0);
  }

  /* Adjust main content to take full width on mobile */
  .bases-main-content,
  .people-main-content,
  .calendar-main {
    width: 100%;
    margin-left: 0;
  }

  /* Hide certain sidebar elements on mobile if needed */
  .bases-sidebar .sidebar-header,
  .people-sidebar .sidebar-header,
  .calendar-sidebar .calendar-sidebar-group {
    padding: 0.75rem;
  }
}


/* ==========================================================================
   Tablet Portrait (769px - 1024px) - Collapsed icon rail
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  /* Collapsed sidebar state */
  .bases-sidebar,
  .people-sidebar,
  .calendar-sidebar {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
    overflow: hidden;
  }

  /* Show expand button */
  .sidebar-expand-btn {
    display: flex;
  }

  /* ===== COLLAPSED STATE: HIDE ALL TEXT ===== */
  
  /* New Base / New Person buttons - icon only */
  .bases-sidebar .sidebar-new-base-btn,
  .people-sidebar .sidebar-new-person-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 6px auto;
    border-radius: 50%;
    font-size: 0 !important;          /* Hide all text */
    color: transparent;               /* Extra safety */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
  }

  .bases-sidebar .sidebar-new-base-btn::before,
  .people-sidebar .sidebar-new-person-btn::before {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-primary, #fff) !important;
    width: 100%;
    height: 100%;
  }

  /* Add Group buttons - icon only */
  .bases-sidebar .sidebar-add-group-btn,
  .people-sidebar .sidebar-add-group-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 0 !important;          /* Hide all text */
    color: transparent;               /* Extra safety */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
  }

  .bases-sidebar .sidebar-add-group-btn::before,
  .people-sidebar .sidebar-add-group-btn::before {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-primary, #fff) !important;
    width: 100%;
    height: 100%;
  }

  /* Collapse sidebar header */
  .bases-sidebar .sidebar-header,
  .people-sidebar .sidebar-header {
    flex-direction: column;
    padding: 0.5rem 0;
    gap: 0.25rem;
  }

  /* Hide toggle groups button in collapsed state */
  .bases-sidebar .toggle-groups-btn,
  .people-sidebar .toggle-groups-btn {
    display: none;
  }

  /* Hide ALL text labels in collapsed state */
  .bases-sidebar .sidebar-group-name,
  .bases-sidebar .sidebar-base-name,
  .bases-sidebar .person-name,
  .people-sidebar .sidebar-group-name,
  .people-sidebar .sidebar-base-name,
  .people-sidebar .person-name,
  .calendar-sidebar .sidebar-group-name {
    display: none !important;
  }

  /* Hide empty state messages completely */
  .bases-sidebar .sidebar-empty,
  .people-sidebar .sidebar-empty,
  .calendar-sidebar .sidebar-empty,
  .bases-sidebar .text-muted,
  .people-sidebar .text-muted {
    display: none !important;
  }

  /* Sidebar items - show only icons, centered */
  .sidebar-group-header,
  .sidebar-base-item,
  .sidebar-person-item {
    padding: 0.5rem;
    justify-content: center;
  }

  /* Show icons/avatars centered */
  .sidebar-base-icon,
  .sidebar-person-avatar {
    margin: 0 auto;
  }

  /* Core bases container in collapsed mode */
  .sidebar-core-bases-container {
    padding: 0.25rem;
  }
  
  /* Calendar sidebar - hide labels */
  .calendar-sidebar .calendar-sidebar-label,
  .calendar-sidebar .calendar-filter-label {
    display: none !important;
  }

  /* Calendar sidebar - New Calendar button icon only */
  .calendar-sidebar .sidebar-new-calendar-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 6px auto;
    border-radius: 50%;
    font-size: 0 !important;          /* Hide all text */
    color: transparent;               /* Extra safety */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
  }

  .calendar-sidebar .sidebar-new-calendar-btn::before {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-primary, #fff) !important;
    width: 100%;
    height: 100%;
  }

  /* Calendar sidebar toggle buttons - icon only */
  .calendar-sidebar .calendar-sidebar-toggle {
    font-size: 0 !important;
    color: transparent;
    padding: 0.5rem;
    justify-content: center;
  }

  .calendar-sidebar .calendar-sidebar-toggle .toggle-chevron {
    font-size: initial;
    color: var(--text-primary, #fff);
  }

  .calendar-sidebar .calendar-sidebar-toggle span,
  .calendar-sidebar .section-count {
    display: none !important;
  }

  /* ===== EXPANDED STATE: SHOW ALL TEXT ===== */
  
  /* Expanded state on hover or when .sidebar-expanded is set */
  .bases-sidebar.sidebar-expanded,
  .people-sidebar.sidebar-expanded,
  .calendar-sidebar.sidebar-expanded,
  .bases-sidebar:hover,
  .people-sidebar:hover,
  .calendar-sidebar:hover {
    width: var(--sidebar-width-full);
    min-width: var(--sidebar-width-full);
  }

  /* Show text when expanded - New Base/Person buttons */
  .bases-sidebar.sidebar-expanded .sidebar-new-base-btn,
  .people-sidebar.sidebar-expanded .sidebar-new-person-btn,
  .bases-sidebar:hover .sidebar-new-base-btn,
  .people-sidebar:hover .sidebar-new-person-btn {
    width: calc(100% - 1.5rem);
    height: auto;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem !important;      /* Restore text */
    color: var(--text-primary, #fff);  /* Restore text color */
  }

  .bases-sidebar.sidebar-expanded .sidebar-new-base-btn::before,
  .people-sidebar.sidebar-expanded .sidebar-new-person-btn::before,
  .bases-sidebar:hover .sidebar-new-base-btn::before,
  .people-sidebar:hover .sidebar-new-person-btn::before {
    content: none;
  }

  .bases-sidebar.sidebar-expanded .sidebar-header,
  .people-sidebar.sidebar-expanded .sidebar-header,
  .bases-sidebar:hover .sidebar-header,
  .people-sidebar:hover .sidebar-header {
    flex-direction: row;
    padding: 1rem;
  }

  /* Add Group buttons - restore text */
  .bases-sidebar.sidebar-expanded .sidebar-add-group-btn,
  .people-sidebar.sidebar-expanded .sidebar-add-group-btn,
  .bases-sidebar:hover .sidebar-add-group-btn,
  .people-sidebar:hover .sidebar-add-group-btn {
    width: auto;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem !important;     /* Restore text */
    color: var(--text-primary, #fff);  /* Restore text color */
  }

  .bases-sidebar.sidebar-expanded .sidebar-add-group-btn::before,
  .people-sidebar.sidebar-expanded .sidebar-add-group-btn::before,
  .bases-sidebar:hover .sidebar-add-group-btn::before,
  .people-sidebar:hover .sidebar-add-group-btn::before {
    content: none;
  }

  .bases-sidebar.sidebar-expanded .toggle-groups-btn,
  .people-sidebar.sidebar-expanded .toggle-groups-btn,
  .bases-sidebar:hover .toggle-groups-btn,
  .people-sidebar:hover .toggle-groups-btn {
    display: flex;
  }

  /* Show all text labels when expanded */
  .bases-sidebar.sidebar-expanded .sidebar-group-name,
  .bases-sidebar.sidebar-expanded .sidebar-base-name,
  .bases-sidebar.sidebar-expanded .person-name,
  .people-sidebar.sidebar-expanded .sidebar-group-name,
  .people-sidebar.sidebar-expanded .sidebar-base-name,
  .people-sidebar.sidebar-expanded .person-name,
  .bases-sidebar:hover .sidebar-group-name,
  .bases-sidebar:hover .sidebar-base-name,
  .bases-sidebar:hover .person-name,
  .people-sidebar:hover .sidebar-group-name,
  .people-sidebar:hover .sidebar-base-name,
  .people-sidebar:hover .person-name,
  .calendar-sidebar.sidebar-expanded .sidebar-group-name,
  .calendar-sidebar:hover .sidebar-group-name {
    display: block !important;
  }

  /* Show empty state and muted text when expanded */
  .bases-sidebar.sidebar-expanded .sidebar-empty,
  .people-sidebar.sidebar-expanded .sidebar-empty,
  .calendar-sidebar.sidebar-expanded .sidebar-empty,
  .bases-sidebar:hover .sidebar-empty,
  .people-sidebar:hover .sidebar-empty,
  .calendar-sidebar:hover .sidebar-empty,
  .bases-sidebar.sidebar-expanded .text-muted,
  .people-sidebar.sidebar-expanded .text-muted,
  .bases-sidebar:hover .text-muted,
  .people-sidebar:hover .text-muted {
    display: block !important;
  }

  /* Calendar sidebar - show labels when expanded */
  .calendar-sidebar.sidebar-expanded .calendar-sidebar-label,
  .calendar-sidebar:hover .calendar-sidebar-label,
  .calendar-sidebar.sidebar-expanded .calendar-filter-label,
  .calendar-sidebar:hover .calendar-filter-label {
    display: block !important;
  }

  /* Calendar sidebar - restore New Calendar button text */
  .calendar-sidebar.sidebar-expanded .sidebar-new-calendar-btn,
  .calendar-sidebar:hover .sidebar-new-calendar-btn {
    width: calc(100% - 1.5rem);
    height: auto;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem !important;
    color: var(--text-primary, #fff);
  }

  .calendar-sidebar.sidebar-expanded .sidebar-new-calendar-btn::before,
  .calendar-sidebar:hover .sidebar-new-calendar-btn::before {
    content: none;
  }

  /* Calendar sidebar toggle - restore text */
  .calendar-sidebar.sidebar-expanded .calendar-sidebar-toggle,
  .calendar-sidebar:hover .calendar-sidebar-toggle {
    font-size: inherit !important;
    color: var(--text-primary, #fff);
    padding: 0.5rem 0.75rem;
    justify-content: flex-start;
  }

  .calendar-sidebar.sidebar-expanded .calendar-sidebar-toggle span,
  .calendar-sidebar:hover .calendar-sidebar-toggle span,
  .calendar-sidebar.sidebar-expanded .section-count,
  .calendar-sidebar:hover .section-count {
    display: inline !important;
  }

  .bases-sidebar.sidebar-expanded .sidebar-group-header,
  .bases-sidebar.sidebar-expanded .sidebar-base-item,
  .bases-sidebar.sidebar-expanded .sidebar-person-item,
  .people-sidebar.sidebar-expanded .sidebar-group-header,
  .people-sidebar.sidebar-expanded .sidebar-base-item,
  .people-sidebar.sidebar-expanded .sidebar-person-item,
  .bases-sidebar:hover .sidebar-group-header,
  .bases-sidebar:hover .sidebar-base-item,
  .bases-sidebar:hover .sidebar-person-item,
  .people-sidebar:hover .sidebar-group-header,
  .people-sidebar:hover .sidebar-base-item,
  .people-sidebar:hover .sidebar-person-item {
    padding: 0.5rem 0.75rem;
    justify-content: flex-start;
  }

  .bases-sidebar.sidebar-expanded .sidebar-base-icon,
  .bases-sidebar.sidebar-expanded .sidebar-person-avatar,
  .people-sidebar.sidebar-expanded .sidebar-base-icon,
  .people-sidebar.sidebar-expanded .sidebar-person-avatar,
  .bases-sidebar:hover .sidebar-base-icon,
  .bases-sidebar:hover .sidebar-person-avatar,
  .people-sidebar:hover .sidebar-base-icon,
  .people-sidebar:hover .sidebar-person-avatar {
    margin: 0;
    margin-right: 0.5rem;
  }
}


/* ==========================================================================
   Desktop (>1024px) - Full width, standard behavior
   ========================================================================== */

@media (min-width: 1025px) {
  .bases-sidebar,
  .people-sidebar,
  .calendar-sidebar {
    width: var(--sidebar-width-full);
    min-width: var(--sidebar-width-full);
  }

  /* Hide mobile/tablet controls on desktop */
  .sidebar-pull-tab,
  .sidebar-expand-btn {
    display: none;
  }
}


/* ==========================================================================
   Landscape Orientation Handling
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  /* On tablet landscape, show full sidebar if there's enough room */
  .bases-sidebar,
  .people-sidebar,
  .calendar-sidebar {
    width: var(--sidebar-width-full);
    min-width: var(--sidebar-width-full);
  }

  /* Show all text elements */
  .sidebar-group-name,
  .sidebar-base-name,
  .person-name {
    display: block;
  }

  /* Normal button styles */
  .bases-sidebar .sidebar-new-base-btn,
  .people-sidebar .sidebar-new-person-btn {
    width: calc(100% - 1.5rem);
    height: auto;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
  }

  .bases-sidebar .sidebar-new-base-btn::before,
  .people-sidebar .sidebar-new-person-btn::before {
    content: none;
  }
}