/* AIRSPACE STANDOFF: Hangar Operations Header with Obsidian Glass */

.procurement-top-scroll {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  transition: max-height 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease, transform 0.22s ease;
  overflow: visible;
  position: relative;
  z-index: 100;
  max-height: 380px;
  opacity: 1;
  transform: translateY(0);
}

.procurement-top-scroll.has-open-dropdown,
.procurement-top-scroll:has(.custom-dropdown.open) {
  z-index: 6500;
  overflow: visible !important;
}

.procurement-window.header-hidden .procurement-top-scroll {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transform: translateY(-10px);
  overflow: hidden !important;
}

.procurement-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 6px;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  z-index: 50;
}

.title-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.brand-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.game-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.8px;
  font-family: var(--font-aeonikpro);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.hangar-badge {
  background: var(--glass-3d-btn-bg);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--liquid-glass-border-top);
  color: var(--theme-accent);
  font-family: var(--font-dotdigital);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-badge);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: 0 0 8px var(--theme-primary-dim);
}

.title-right-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.squad-callsign-tag,
.proc-manual-btn,
.proc-leaderboard-btn,
.proc-settings-btn,
.proc-exit-btn {
  font-size: 0.74rem;
  font-family: var(--font-untitled-sans);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 0.14s ease, border-color 0.14s ease;
  gap: 6px;
  background: var(--glass-3d-btn-bg);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--liquid-glass-border-top);
  box-shadow: var(--glass-3d-btn-shadow);
  flex-shrink: 0;
}

.squad-callsign-tag { color: var(--stat-tier-3); text-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }
.proc-manual-btn, .proc-settings-btn, .proc-leaderboard-btn { color: var(--color-frost-glow); }

.proc-exit-btn {
  background: rgba(244, 63, 94, 0.2);
  border-color: rgba(244, 63, 94, 0.45);
  border-top-color: rgba(255, 255, 255, 0.4);
  color: #fecdd3;
}

.squad-callsign-tag:hover,
.proc-leaderboard-btn:hover,
.proc-settings-btn:hover,
.proc-manual-btn:hover {
  background: var(--glass-3d-btn-bg-hover);
  color: #ffffff;
  border-color: var(--theme-accent);
  border-top-color: #ffffff;
  transform: translateY(-1px);
}

.proc-exit-btn:hover {
  background: rgba(244, 63, 94, 0.38);
  color: #ffffff;
  border-color: #f43f5e;
  transform: translateY(-1px);
}

.mode-and-ai-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 60;
}

.segmented-control {
  display: flex;
  background: var(--glass-3d-well-bg);
  border: 1px solid var(--glass-3d-well-border);
  border-radius: var(--radius-btn);
  padding: 2px;
  flex-shrink: 0;
  box-shadow: var(--glass-3d-well-shadow);
}

.seg-btn {
  border: 1px solid transparent;
  font-family: var(--font-untitled-sans);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}

.seg-btn:hover { color: #ffffff; }
.seg-btn.active {
  background: rgba(2, 132, 199, 0.45);
  color: #ffffff;
  border-color: var(--theme-accent);
  border-top-color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 8px var(--theme-primary-glow);
}

.ai-config-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
}

.ai-config-group > div {
  display: inline-flex;
  flex-shrink: 0;
}

.proc-right-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.proc-right-actions .hud-btn {
  font-size: 0.74rem;
  padding: 5px 12px;
  font-weight: 600;
  height: 30px;
  border-radius: var(--radius-btn);
}

#btn-proc-fullscreen.active,
#btn-fullscreen-toggle.active {
  background: var(--theme-primary);
  color: #ffffff;
  border-color: var(--theme-accent);
}

.is-android-apk #btn-proc-fullscreen,
.is-android-apk #btn-fullscreen-toggle {
  display: none !important;
}

.budget-display {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-dotdigital);
  background: var(--glass-3d-card-bg);
  border: 1px solid var(--glass-3d-card-border);
  border-top: 1px solid var(--liquid-glass-border-top);
  border-radius: var(--radius-btn);
  padding: 4px 12px;
  box-shadow: var(--glass-3d-card-shadow);
  flex-wrap: wrap;
}

.budget-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.budget-display .label {
  font-size: 0.60rem;
  color: var(--color-moon-mist);
  font-weight: 700;
}

.budget-display .amount {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.budget-display .amount .spent-val { color: var(--stat-tier-2); text-shadow: 0 0 6px rgba(0, 245, 160, 0.5); }
.budget-display .amount .spent-val.overbudget { color: var(--stat-tier-5) !important; text-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }
.budget-display .amount .rem-val {
  font-size: 0.62rem;
  color: var(--color-moon-mist);
  font-weight: 600;
  margin-left: 2px;
}

.budget-display .count-tag {
  font-size: 0.62rem;
  color: var(--color-pure-white);
  background: var(--glass-3d-well-bg);
  border: 1px solid var(--glass-3d-well-border);
  padding: 2px 7px;
  border-radius: var(--radius-badge);
  font-weight: 700;
  box-shadow: var(--glass-3d-well-shadow);
}

@media (max-width: 1024px) {
  .procurement-header { padding-bottom: 4px; gap: 4px; }
  .game-name { font-size: 1.02rem; }
  .hangar-badge { font-size: 0.60rem; padding: 2px 6px; }
  .title-group {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .title-group::-webkit-scrollbar { display: none; }
  .squad-callsign-tag, .proc-leaderboard-btn, .proc-settings-btn, .proc-manual-btn, .proc-exit-btn {
    padding: 4px 8px;
    font-size: 0.68rem;
    height: 28px;
    gap: 4px;
  }
  .mode-and-ai-controls { gap: 4px; flex-wrap: wrap; overflow: visible; }
  .seg-btn { padding: 3px 6px; font-size: 0.66rem; }
  .budget-display { padding: 3px 8px; }
  .budget-display .amount { font-size: 0.78rem; }
}