/* Top Banner - Fixed positioning and layout */
#top-info-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  justify-content: flex-start;
}

/* Banner spacer to prevent content overlap */
#top-banner-spacer {
  height: 60px;
}

/* Search container (left side) */
.banner-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Search input - desktop size */
#global-search-input {
  width: 300px;
  min-width: 200px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 0.9em;
}

/* Search button */
#global-search-button {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  font-size: 1.1em;
  flex-shrink: 0;
}

/* User info container (right side) */
.banner-user-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
}

/* Tablet and Mobile responsive styles - show hamburger menu */
@media (max-width: 1366px) {
  /* Hide desktop icons, show mobile menu */
  .banner-icons-desktop {
    display: none !important;
  }

  .banner-icons-mobile {
    display: inline-block !important;
  }
}

/* Small mobile specific styles */
@media (max-width: 768px) {
  #top-banner-spacer {
    height: 60px;
  }

  #top-info-banner {
    padding: 8px 12px;
    gap: 8px;
  }

  /* Hide clock on mobile */
  #current-time,
  #current-time-admin {
    display: none;
  }

  /* Search container - allow more space but prevent overlap */
  .banner-search-container {
    flex-shrink: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 50%;
    gap: 6px;
  }

  /* Search input - larger on mobile now that there's more room, but not too large */
  #global-search-input {
    width: auto !important;
    min-width: 150px !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    font-size: 0.85em !important;
    padding: 6px 10px !important;
  }

  /* Search button - smaller on mobile */
  #global-search-button {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    font-size: 0.8em !important;
  }

  /* User container - ensure it stays visible */
  .banner-user-container {
    flex-shrink: 0;
    gap: 4px;
    max-width: 60%;
  }

  /* Smaller text and buttons on mobile */
  .banner-user-container > div {
    margin-right: 4px;
  }

  .banner-user-container > div > span {
    font-size: 0.7em;
  }

  .banner-user-container > div > span:last-child {
    font-size: 0.65em;
  }

  /* Banner button styles moved to buttons.css */

  .banner-user-container > a[title="Settings"] {
    font-size: 1.5em;
    padding: 4px;
  }

  /* Ensure Settings menu item uses normal font size */
  .banner-menu-item .banner-menu-item-link[title="Settings"] {
    font-size: 0.9em !important;
  }

  /* Hide logout button on mobile (it's in the menu now) */
  .logout-desktop {
    display: none !important;
  }
}

/* Desktop (>1366px): Show individual icons, hide menu */
@media (min-width: 1367px) {
  .banner-icons-desktop {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .banner-icons-mobile {
    display: none;
  }

  /* Desktop: Hide mobile menu dropdown completely */
  .banner-menu-container,
  .banner-menu-dropdown {
    display: none !important;
  }
}

/* Banner menu container */
.banner-menu-container {
  position: relative;
  display: inline-block;
}

/* Menu toggle button */
.btn.menu-toggle {
  padding: 8px 12px;
  font-size: 1.2em;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown menu */
.banner-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #1a1f2e;
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 160px;
  z-index: 1000;
  padding: 4px 0;
}

/* Menu items */
.banner-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.banner-menu-item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9em !important;
  transition: background 0.2s;
  padding: 0;
  width: 100%;
  background: transparent;
  overflow: hidden;
}

.banner-menu-item-link > span:first-child {
  flex-shrink: 0;
}

.banner-menu-item-link > span:not(:first-child):not(.banner-menu-badges):not(.banner-submenu-toggle) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-menu-item-with-submenu {
  margin: 0;
  padding: 0;
}

.banner-menu-item-with-submenu .banner-menu-item {
  padding: 6px 16px;
}

.banner-menu-item:hover {
  background: rgba(255,255,255,0.05);
}

.banner-menu-item-link:hover {
  text-decoration: none;
  background: rgba(255,255,255,0.05);
}

.banner-menu-item-link.active {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}

/* Theme switcher button - style like menu item */
#theme-switcher-menu,
#theme-switcher-menu-admin {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  background: none !important;
  color: var(--text) !important;
  font-size: 0.9em !important;
  font-family: inherit !important;
  cursor: pointer;
  padding: 10px 16px !important;
  margin: 0 !important;
  transition: background 0.2s;
  box-sizing: border-box;
}

#theme-switcher-menu:hover,
#theme-switcher-menu-admin:hover {
  background: rgba(255,255,255,0.05) !important;
  text-decoration: none;
}

#theme-switcher-menu:active,
#theme-switcher-menu-admin:active {
  background: rgba(255,255,255,0.08) !important;
}

.banner-menu-item-with-submenu {
  background: transparent;
}

.banner-menu-item-with-submenu .banner-menu-item-link {
  background: transparent;
}

.banner-menu-item-with-submenu:hover .banner-menu-item-link {
  background: rgba(255,255,255,0.05);
}

.banner-menu-item-with-submenu .banner-menu-item-link.active {
  background: transparent !important;
  color: var(--text) !important;
}

.banner-menu-item span {
  font-size: 1.1em;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.banner-menu-item > span:first-child {
  flex-shrink: 0;
}

/* Submenu toggle button (chevron) */
.banner-submenu-toggle {
  margin-left: auto;
  font-size: 1.5em;
  font-weight: 300;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 8px;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s, background 0.2s;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  background: none;
  border: none;
  border-radius: 4px;
  position: relative;
  line-height: 1;
}

.banner-submenu-toggle:hover {
  color: var(--text);
  background: rgba(255,255,255,0.1);
}

.banner-submenu-toggle:active {
  background: rgba(255,255,255,0.15);
}

.banner-menu-item-with-submenu.expanded .banner-submenu-toggle {
  transform: rotate(90deg);
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

/* Submenu container */
.banner-submenu {
  display: none;
  background: transparent;
  border-left: 2px solid var(--line);
  margin-left: 20px;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.banner-menu-item-with-submenu.expanded .banner-submenu {
  display: block;
}

.banner-submenu .banner-menu-item {
  padding: 5px 16px 5px 32px;
}

/* Badge container styling */
.banner-menu-badges {
  margin-left: auto;
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

/* Badge styles */
.badge {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.7em;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-danger {
  background: #ff6b6b;
  color: #fff;
}

.badge-warning {
  background: #ffcc00;
  color: #000;
}

.badge-warning-orange {
  background: #ff9800;
  color: #fff;
}

.badge-due-soon {
  background: #ff7700;
  color: #fff;
}

/* Tablet and Mobile (≤1366px): Use mobile responsive menu sizes, positioned on right */
@media (max-width: 1366px) {
  .banner-menu-dropdown {
    position: fixed;
    top: 60px;
    right: 12px;
    left: auto;
    min-width: 300px;
    max-width: 400px;
    width: auto;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Ensure menu items wrap properly and don't overflow */
  .banner-menu-item {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .banner-menu-item-link {
    padding: 6px 12px;
  }

  #theme-switcher-menu,
  #theme-switcher-menu-admin {
    padding: 6px 12px !important;
  }

  .banner-menu-item-with-submenu .banner-menu-item {
    padding: 6px 12px;
  }

  .banner-submenu .banner-menu-item {
    padding: 5px 12px 5px 28px;
  }

  /* Keep items on one line, allow text to shrink if needed */
  .banner-menu-item {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .banner-menu-item > span:first-child {
    flex-shrink: 0;
  }

  /* Text content (not icon, not badges, not toggle) - allow shrinking */
  .banner-menu-item > span:not(:first-child):not(.banner-menu-badges):not(.banner-submenu-toggle) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Badge containers stay to the right, don't wrap - show all badges */
  .banner-menu-badges {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    flex-basis: auto !important;
    order: 0;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    max-width: none !important;
  }

  /* Make badges smaller to prevent overflow but show all */
  .banner-menu-badges .badge {
    font-size: 0.65em !important;
    padding: 2px 4px !important;
    min-width: 16px !important;
    flex-shrink: 0 !important;
  }

  /* Module menu items styling - make them match other items (remove green background) */
  .banner-menu-item-link.module-menu-item {
    background: transparent !important;
    color: var(--text) !important;
  }

  .banner-menu-item-link.module-menu-item:hover {
    background: rgba(255,255,255,0.05) !important;
  }

  .banner-menu-item-link.module-menu-item.active {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #4caf50 !important;
  }

  /* Sub-menu items - indented */
  .banner-sub-menu-item {
    font-size: 0.85em;
  }

  .banner-sub-menu-item > span:first-child {
    display: none;
  }
}

/* Reports dropdown styling */
.reports-dropdown-item {
  transition: background 0.2s;
}

.reports-dropdown-item:hover {
  background: rgba(255,255,255,0.05);
  text-decoration: none;
}

.reports-dropdown-item.active {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}