/* ============================================================
   MainMenu.uss - Main Menu / Navigation Hub Styles
   Commander AI Lab - Unity UI Toolkit
   ============================================================ */

/* ---------- Header Bar ---------- */
.header-bar {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: rgba(15,5,25,0.95);
  border-bottom-width: 2px;
  border-bottom-color: #6b21a8;
}

.app-title {
  font-size: 28px;
  color: #e9d5ff;
  -unity-font-style: bold;
  letter-spacing: 1px;
}

.version-label {
  font-size: 12px;
  color: #9ca3af;
  padding: 4px 10px;
  background-color: rgba(107,33,168,0.3);
  border-radius: 8px;
}

/* ---------- Server Config Panel ---------- */
.server-config-panel {
  margin: 16px 24px;
  padding: 16px;
  background-color: rgba(30,15,50,0.8);
  border-radius: 10px;
  border-width: 1px;
  border-color: #374151;
}

.server-row {
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
}

.server-url-input {
  flex-grow: 1;
  margin-right: 10px;
}

.server-url-input > .unity-text-field__input {
  background-color: #1f1135;
  border-color: #4b5563;
  border-radius: 6px;
  color: #e5e7eb;
  padding: 8px 12px;
  font-size: 14px;
}

.server-url-input > .unity-text-field__input:focus {
  border-color: #a855f7;
}

.status-row {
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  margin-right: 8px;
}

.status-connected {
  background-color: #22c55e;
}

.status-disconnected {
  background-color: #ef4444;
}

.status-connecting {
  background-color: #eab308;
}

.status-text {
  font-size: 13px;
  color: #9ca3af;
}

/* ---------- Navigation Grid ---------- */
.nav-grid {
  flex-grow: 1;
  padding: 8px 24px 16px 24px;
}

.nav-cards-row {
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.nav-cards-row-single {
  justify-content: flex-start;
}

/* ---------- Navigation Card ---------- */
.nav-card {
  width: 30%;
  min-width: 220px;
  margin-right: 12px;
  padding: 20px;
  background-color: rgba(30,15,50,0.85);
  border-radius: 12px;
  border-width: 1px;
  border-color: #374151;
  transition-property: border-color,background-color;
  transition-duration: 0.2s;
}

.nav-card:hover {
  border-color: #a855f7;
  background-color: rgba(45,20,75,0.9);
}

.nav-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 10px;
}

/* Icon colour placeholders (swap for real textures later) */
.collection-icon  { background-color: #3b82f6; }
.deckbuilder-icon { background-color: #8b5cf6; }
.deckgen-icon     { background-color: #10b981; }
.simulator-icon   { background-color: #f59e0b; }
.coach-icon       { background-color: #ec4899; }
.training-icon    { background-color: #06b6d4; }
.scanner-icon     { background-color: #6366f1; }

.nav-card-title {
  font-size: 18px;
  color: #e9d5ff;
  -unity-font-style: bold;
  margin-bottom: 6px;
}

.nav-card-desc {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 14px;
  white-space: normal;
}

/* ---------- Error Panel ---------- */
.error-panel {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 24px 12px 24px;
  padding: 12px 16px;
  background-color: rgba(127,29,29,0.6);
  border-radius: 8px;
  border-width: 1px;
  border-color: #dc2626;
}

.error-text {
  font-size: 13px;
  color: #fca5a5;
  flex-grow: 1;
  margin-right: 12px;
}

/* ---------- Footer ---------- */
.footer {
  padding: 12px 24px;
  border-top-width: 1px;
  border-top-color: #1f2937;
  align-items: center;
}

.footer-text {
  font-size: 11px;
  color: #6b7280;
}