@import "fonts";
@import "theming";

.header-background {
  background-color: inherit !important;
  padding: 24px;

  nav {
    padding: 0;
    display: flex;
    gap: 24px;

    .btn-menu {
      color: inherit;
      margin: 0;

      svg {
        color: inherit;
      }
    }

    .bottom-mode svg {
      margin-left: 8px;
    }
  }
}

.navbar {
  position: sticky;
  top: 0;
  border: none;
  display: none;
}

.offcanvas-header {
  padding: 12px;
  min-height: 68px;
  background-color: var(--board-background-color);
}

.offcanvas-body {
  background-color: var(--board-background-color) !important;
  color: var(--body-color) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: calc(100vh - 100px) !important;
  max-height: calc(100vh - 100px) !important;
  padding: 1rem !important;
  
  .leftnav-container {
    display: block !important;
    width: 100%;
    height: auto !important;
    background-color: var(--board-background-color) !important;
  }

  .leftnav {
    width: 100%;
    display: block !important;
    background-color: var(--board-background-color) !important;
    border: none !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
  }
  
  // Hide search container in sidebar menu within offcanvas
  #sidebar-default .search-container,
  .leftnav .search-container {
    display: none !important;
  }
  
  .navbar-title-padding {
    display: none !important;  // Also hide the logo/title that comes with search
  }

  #sidebar-default {
    display: block !important;
    background-color: var(--board-background-color) !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    
    >div {
      margin-top: 0 !important;
      width: 100%;
      display: block !important;
      color: var(--body-color) !important;
      position: static !important;
    }
  }
  
  // Ensure text is visible
  a, span, p, .sidebar-category, .sidebar-item, .sidebar-subcategory {
    color: var(--body-color) !important;
  }
}

.offcanvas-close {
  background: none;
  border: none;
  padding: 8px;
  display: flex;
  color: var(--offcanvas-close-color);
}

.offcanvas-backdrop {
  background: rgba(4, 4, 4, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.offcanvas-backdrop.show {
  opacity: 1;
}

@media (max-width: $MobileLayoutWidth) {

  // Collapse leftnav on mobile width
  .leftnav-container {
    display: none;
  }

  // Show navbar
  .navbar {
    display: block;
  }

  .header-background .search-container {
    background: none;
    padding: 0;
    display: block !important; // Ensure it's visible
    
    // Fix search input padding for mobile header
    .search.form-control,
    .search.is-search {
      padding-left: 40px !important;
      padding-right: 40px !important;
      
      // Fix placeholder color to be gray, not pink
      &::placeholder {
        color: #6c757d !important;
        opacity: 1 !important;
      }
    }
    
    // Fix vertical alignment of search icon
    .doks-search {
      position: relative;
      
      &::before {
        top: 50% !important;
        transform: translateY(-50%) !important;
      }
      
      &::after {
        top: 50% !important;
        transform: translateY(-50%) !important;
      }
    }
  }

  .suggestions {
    top: 82px !important;
  }

  .docs-content {
    padding-left: 0;
    padding-right: 0;
  }

  .terminal {
    display: none;
  }

  #grab {
    display: none;
  }

  .center-content {
    margin: 72px 0 96px 0;
    padding: 0;
  }

  .docs-toc {
    display: none;
  }

  .content>.row,
  .content>.row>.row,
  .content>.row>.row>.col-md-12 {
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer {
    padding: 96px 24px;
  }

  .footer-column-container {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 0;
  }

  .footer-column-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .footer-column-right {
    flex: 1;
  }

  .footer-column {
    padding: 0;
  }

  .install-container {
    flex-direction: column;
  }

  // Hide verbose "prev" & "next" buttons
  .docs-navigation-button .next-in-line:first-of-type {
    display: none;
  }

  // Show smaller "prev" & "next" buttons
  .docs-navigation-button .next-in-line:last-of-type {
    display: unset;
  }

  .card-container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .top-card-container .card-container {
    // Keep cards in single column on mobile to prevent horizontal scrolling
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .install-container {
    margin-top: 48px !important;
  }

  .section-container {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }

  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  #notification {
    bottom: 24px;
    left: 24px;
    right: 24px;
    width: calc(100dvw - 48px);
    justify-content: center;
  }

  header .toggle-icon {
    margin-bottom: 0;
  }

  .offcanvas {
    width: calc(100dvw - 48px);
    max-width: 400px;
    margin: 24px;
    border-radius: 8px;
    border: none !important;
    outline: none !important;
    background-color: var(--board-background-color) !important;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    
    .leftnav {
      overflow-x: hidden;
      overflow-y: auto;
      background: var(--board-background-color) !important;
      height: auto !important;
      position: static !important;
    }
    
    // Ensure all sidebar content is visible
    .sidebar-category,
    .sidebar-item,
    .sidebar-subcategory,
    .docs-link,
    ul, li, a, span, p {
      display: block !important;
      visibility: visible !important;
      color: var(--body-color) !important;
    }
    
    // Make sure sidebar sections show
    .show, .collapse.show {
      display: block !important;
    }
  }

  .leftnav,
  .offcanvas-header,
  .sidebar-bottom {
    border: none !important;
  }

  .sidebar-bottom .toggle-icon {
    display: none !important;
  }
  
  // Hide the sidebar-bottom toggle in offcanvas on mobile
  .offcanvas .sidebar-bottom .toggle-icon,
  .offcanvas .sidebar-bottom .bottom-mode {
    display: none !important;
  }
  
  // Fix duplicate toggle icons in offcanvas header
  .offcanvas-header {
    .toggle-dark {
      display: block !important;
    }
    
    .toggle-light {
      display: none !important;
    }
  }
  
  // In dark mode, swap the icons
  :root[data-dark-mode] .offcanvas-header {
    .toggle-dark {
      display: none !important;
    }
    
    .toggle-light {
      display: block !important;
    }
  }

  .leftnav {
    display: block !important;
    max-height: unset;
  }

  #sidebar-default,
  .sidebar-bottom {
    background: inherit;
    position: static !important;
    height: auto !important;
  }
  
  .sidebar-bottom {
    display: block !important;
  }

  #severity-picker {
    display: none;
  }
}