/* Condition Standards Styles */

.condition-standards-description {
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}

.condition-type-header {
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 0.5rem;
}

.condition-unit-header {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-700);
}

.condition-unit-header:first-child {
  margin-top: 0;
}

.condition-standards-table {
  width: 100%;
  margin-bottom: 1.5rem;
}

.condition-standards-table thead th {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid var(--gray-200);
}

.condition-standards-table thead th:last-child {
  text-align: right;
}

.condition-standards-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
}

.condition-standards-table tbody td {
  padding: 0.75rem;
}

.condition-standards-table tbody td:last-child {
  text-align: right;
}

.no-standards-message {
  color: var(--gray-500);
  font-style: italic;
  margin-bottom: 1.5rem;
}

/* Tabs - Mobile First */

/* Mobile dropdown - visible on small screens */
.tabs-mobile-select {
  display: block;
  margin-bottom: 1.5rem;
}

.tabs-mobile-select .form-select {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  background-color: white;
  color: var(--dark-gray);
  min-height: 44px; /* Touch-friendly */
}

.tabs-mobile-select .form-select:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-color: var(--primary-500);
}

/* Desktop tabs - hidden on mobile */
.tabs-nav {
  display: none;
}

/* Tab panels */
.tabs-content {
  margin-top: 1rem;
}

.tab-panel {
  display: block;
}

.tab-panel.hidden {
  display: none;
}

/* Screen reader only class for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Desktop styles (≥768px) */
@media (min-width: 768px) {
  /* Hide mobile dropdown on desktop */
  .tabs-mobile-select {
    display: none;
  }

  /* Show desktop tabs */
  .tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    bottom: -2px; /* Align with border-bottom */
  }

  .tab-button:hover {
    color: var(--gray-900);
    background-color: var(--gray-50);
  }

  .tab-button:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    z-index: 1;
  }

  .tab-button.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
    font-weight: 600;
  }

  .tab-button[aria-selected="true"] {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
  }
}

/* Larger desktop styles (≥1024px) - more comfortable spacing */
@media (min-width: 1024px) {
  .tab-button {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
  }
}