/* assets/sidebar.css */

/* --------------------------------------------------
   1. Desktop & MD+ styling for the small side-nav
--------------------------------------------------- */

/* The small side-nav container: fixed on the left, wider on desktop */
.small-sidenav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #131C1E;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0.75rem;
  padding-right: 0.5rem; /* avoid highlight touching edge */
  z-index: 1040; /* Above main content but below modals */
}


.small-sidenav .sidebar-logo {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

.small-sidenav .sidebar-logo img {
  max-width: 60%;
  height: auto;
}

/* Slightly smaller logo on the gate page */
.gate-logo {
  max-width: 150px;
}

/* Navigation links below the logo (desktop/MD+) */
.small-sidenav .expanded-nav {
  margin-top: 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Each NavLink inside expanded-nav */
.small-sidenav .expanded-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem;
  color: #ffffff;
}
.small-sidenav .expanded-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.small-sidenav .expanded-nav .link-icon {
  width: 1.5rem;
  text-align: center;
  font-size: 1.2rem;
}
.small-sidenav .expanded-nav .link-text {
  margin-left: 0.75rem;
  white-space: nowrap;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #047388;
  color: #ffffff!important;
}


/* User section pinned to bottom on desktop */
.small-sidenav .user-section {
  width: 100%;
}

/* Style the card used for the desktop user menu */
.small-sidenav .user-section .dropdown-toggle {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

/* Hide dropdown trigger on desktop */
.small-sidenav .user-dropdown {
  display: none;
}

/* Ensure dropdown trigger matches nav link styling */
.small-sidenav .user-dropdown .nav-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem;
  color: #ffffff;
}
.small-sidenav .user-dropdown .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Desktop bug link styling */
.small-sidenav .bug-report-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem;
  color: #ffffff;
}
.small-sidenav .feedback-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem;
  color: #ffffff;
}
.small-sidenav .bug-report-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.small-sidenav .feedback-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.small-sidenav .bug-report-link .link-icon {
  width: 1.5rem;
  text-align: center;
  font-size: 1.2rem;
}
.small-sidenav .feedback-link .link-icon {
  width: 1.5rem;
  text-align: center;
  font-size: 1.2rem;
}
.small-sidenav .bug-report-link .link-text {
  margin-left: 0.75rem;
  white-space: nowrap;
}
.small-sidenav .feedback-link .link-text {
  margin-left: 0.75rem;
  white-space: nowrap;
}


/* --------------------------------------------------
   3. XS/SM media query: pin small-sidenav to top as a bar
         and force horizontal layout
--------------------------------------------------- */

@media (max-width: 576px) {
  .small-sidenav .sidebar-logo {
    display: none !important;
  }

  /* Move the side-nav to the top; full width, 80px tall */
  .small-sidenav {
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 80px;
    flex-direction: row;        /* lay out children horizontally */
    justify-content: center;    /* center horizontally */
    align-items: center;
    background-color: #131C1E;
    padding: 0;
  }

  /* Force the nav to be a horizontal row (override vertical=True) */
  .small-sidenav .expanded-nav {
    margin-top: 0;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
  }
  .small-sidenav .expanded-nav .nav-link {
    width: auto !important;
    text-align: center;
    padding: 0.75rem;
    margin: 0 0.5rem!important;
    flex: none;
    position: relative;
  }
  .small-sidenav .expanded-nav .link-text {
    margin-left: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Show dropdown icon on small screens */
  .small-sidenav .user-dropdown {
    display: block !important;
  }
  .small-sidenav .user-dropdown .nav-link {
    margin: 0 0.5rem !important;
  }

  /* Hide desktop bug link */
  .small-sidenav .bug-report-link {
    display: none !important;
  }
  .small-sidenav .feedback-link {
    display: none !important;
  }

  /* Hide the desktop user section */
  .small-sidenav .user-section {
    display: none !important;
  }
}

/* --------------------------------------------------
   4. Ensure main content is not hidden under the top bar on XS/SM
--------------------------------------------------- */

/* By default (desktop), main content is pushed right by the sidebar width */
.main-content {
  margin-left: 200px;
  padding: 0;
}

/* On XS/SM, remove left margin and add top padding = 80px */
@media (max-width: 576px) {
  .main-content {
    margin-left: 0 !important;
    padding-top: 100px; /* 80px bar + 20px buffer */
  }
}

/* Width utility */
.w-80 {
  width: 80% !important;
}