/* ==========================================================================
   Project Stella - Mobile Responsive Overrides
   ========================================================================== */

/* Mobile Layout Grid overrides */
.hud-main-grid {
  grid-template-areas:
    "header"
    "main" !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
}

/* Left Navigation Bar to sticky Bottom Tab Bar */
.left-nav-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  width: 100% !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 0 8px !important;
  border-top: 0.5px solid rgba(130, 170, 255, 0.25) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  z-index: 1000 !important;
  background: rgba(11, 14, 20, 0.95) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
}

.left-nav-bar .nav-button {
  flex: 1 !important;
  height: 100% !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
}

.left-nav-bar .nav-button .nav-icon {
  font-size: 1.1rem !important;
  margin-bottom: 2px !important;
  margin-right: 0 !important;
}

.left-nav-bar .nav-button .nav-label {
  font-size: 0.62rem !important;
  letter-spacing: 0px !important;
  white-space: nowrap !important;
}

/* Center Workspace padding to clear bottom tab bar */
.center-workspace {
  padding-bottom: 66px !important;
}

/* Right Status Sidebar to slide-over drawer */
.right-status-bar {
  position: fixed !important;
  top: 72px !important;
  bottom: 60px !important;
  right: -250px !important;
  width: 240px !important;
  z-index: 999 !important;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: block !important;
  height: auto !important;
  border-left: 0.5px solid rgba(130, 170, 255, 0.2) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.hud-main-grid:not(.hide-aside) .right-status-bar {
  right: 0 !important;
}

/* Top Resource Bar responsiveness */
.top-resource-bar {
  height: auto !important;
  min-height: 72px !important;
  padding: 8px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  display: flex !important;
}

.top-resource-bar .logo-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 4px !important;
}

.top-resource-bar .logo-wrapper .logo {
  font-size: 0.9rem !important;
}

.top-resource-bar .logo-wrapper .user-id-label {
  font-size: 0.68rem !important;
  margin-top: 0 !important;
}

.top-resource-bar .resources-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px 8px !important;
  margin-left: 0 !important;
  width: 100% !important;
  padding: 2px 0 !important;
}

.top-resource-bar .res-item {
  padding: 4px 6px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 4px !important;
  justify-content: space-between !important;
  font-size: 0.72rem !important;
  gap: 4px !important;
  width: 100% !important;
}

.top-resource-bar .res-item .res-label {
  font-size: 0.65rem !important;
  gap: 4px !important;
}

.top-resource-bar .res-item .res-icon-inline {
  width: 12px !important;
  height: 12px !important;
}

.top-resource-bar .res-item .res-value {
  font-size: 0.72rem !important;
}

.top-resource-bar .res-item .res-cap {
  font-size: 0.65rem !important;
  opacity: 0.7 !important;
}

.top-resource-bar .res-item .res-rate {
  font-size: 0.62rem !important;
}

.top-resource-bar .header-actions {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  gap: 4px !important;
  margin-left: 0 !important;
}

.top-resource-bar .header-actions button {
  padding: 3px 6px !important;
  font-size: 0.68rem !important;
  height: 24px !important;
}

/* Auth Screen mobile scaling */
.auth-screen-overlay {
  justify-content: center !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.auth-card {
  width: 92% !important;
  max-width: 440px !important;
  padding: 20px 16px !important;
}
.system-select-item {
  padding: 8px 10px !important;
}
.system-info {
  gap: 6px !important;
}
.system-meta {
  gap: 6px !important;
}
.hud-btn-connect {
  padding: 4px 6px !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
}
.system-user-count {
  white-space: nowrap !important;
}
.system-name {
  white-space: nowrap !important;
  font-size: 0.76rem !important;
}