/* ==========================================================================
   Layout and Navigation Styles
   ========================================================================== */

/* Base HTML/Body styles for tab layout */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Main container for tab interface */
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tab navigation bar */
.tab {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-sm);
  overflow: hidden;
  /* Ensure tab container is above other elements */
  position: relative;
  z-index: 100;
}

/* Tab buttons */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  margin-right: var(--spacing-sm);
  transition: background-color var(--transition-normal);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  /* Ensure buttons maintain proper positioning */
  position: relative;
  z-index: 10;
  pointer-events: auto;
  /* Prevent button text from being selected */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.tab button:hover {
  background-color: var(--bg-tertiary);
}

.tab button.active {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

/* Main content frame */
#mainFrame {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  display: block;
  background-color: var(--brand-primary);
}

/* Mobile hamburger menu button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-sm);
  margin-right: var(--spacing-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-normal);
}

.mobile-menu-toggle:hover {
  background-color: var(--bg-tertiary);
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.theme-toggle:hover {
  background-color: var(--bg-tertiary);
}

.theme-toggle:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.theme-icon {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-normal);
}

.theme-toggle:hover .theme-icon {
  transform: scale(1.1);
}

/* Right-aligned controls container */
.right-controls {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: var(--spacing-xs);
}

/* PWA Install button */
.pwa-install-button {
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.pwa-install-button:hover {
  background-color: var(--bg-tertiary);
}

.pwa-install-button:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.pwa-icon {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-normal);
}

.pwa-install-button:hover .pwa-icon {
  transform: scale(1.1);
}

/* Account toggle button */
.account-toggle {
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.account-toggle:hover {
  background-color: var(--bg-tertiary);
}

.account-toggle:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.account-icon {
  transition: transform var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}

.account-icon svg {
  width: 20px;
  height: 20px;
  transition: all var(--transition-normal);
  filter: drop-shadow(0 0 4px rgba(33, 150, 243, 0.3));
}

.account-toggle:hover .account-icon {
  transform: scale(1.1);
}

.account-toggle:hover .account-icon svg {
  filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.6)) brightness(1.2);
}

/* Enhanced visibility for dark theme */
[data-theme="dark"] .account-icon {
  color: #64b5f6;
}

[data-theme="dark"] .account-icon svg {
  filter: drop-shadow(0 0 6px rgba(100, 181, 246, 0.6));
}

[data-theme="dark"] .account-toggle:hover .account-icon svg {
  filter: drop-shadow(0 0 10px rgba(100, 181, 246, 0.9)) brightness(1.2);
}

/* High contrast mode */
[data-theme="high-contrast"] .account-icon {
  color: #0000ff !important;
}

[data-theme="high-contrast"] .account-icon svg {
  filter: none !important;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: block;
  }
  
  /* Tab navigation adjustments for mobile */
  .tab {
    flex-wrap: wrap;
    height: auto;
    min-height: 40px;
    padding: var(--spacing-xs);
    transition: height var(--transition-normal);
  }
  
  /* Hide tab buttons by default on mobile */
  .tab .tablinks {
    display: none;
    width: 100%;
    margin: var(--spacing-xs) 0;
    text-align: left;
  }
  
  /* Show tab buttons when mobile menu is open */
  .tab.mobile-menu-open .tablinks {
    display: block;
  }
  
  /* Active tab should always be visible */
  .tab .tablinks.active {
    display: block;
    order: -1;
  }
  
  /* Adjust button styling for mobile */
  .tab button {
    margin-right: 0;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    min-height: 44px; /* Ensure touch targets are large enough */
  }
  
  /* Improve touch targets */
  .tab button:not(.active) {
    border-radius: var(--radius-sm);
  }
  
  /* Right controls on mobile */
  .right-controls {
    order: 1;
    margin-left: auto;
    gap: var(--spacing-xs);
  }
  
  /* Always show right controls even when menu is closed */
  .right-controls button {
    display: flex !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .tab {
    padding: var(--spacing-xs);
  }
  
  .tab button {
    padding: var(--spacing-lg) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
  
  /* Ensure container uses full height */
  #container {
    min-height: 100vh;
  }
}