/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* T042: Autocomplete Dropdown Styles */
/* T047: Mobile-responsive with touch-friendly tap targets */
.autocomplete-item {
  padding: 1rem;
  cursor: pointer;
  border-bottom: 1px solid hsl(var(--bc) / 0.1);
  transition: background-color 0.15s ease;
  min-height: 3.5rem; /* Touch-friendly on mobile */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Desktop: Smaller padding */
@media (min-width: 640px) {
  .autocomplete-item {
    padding: 0.75rem 1rem;
    min-height: auto;
  }
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background-color: hsl(var(--b2));
}

/* Mobile: Better touch feedback */
@media (max-width: 639px) {
  .autocomplete-item:active {
    background-color: hsl(var(--b3));
  }
}

.autocomplete-identifier {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--bc) / 0.6);
  margin-bottom: 0.25rem;
}

/* Mobile: Slightly larger text */
@media (max-width: 639px) {
  .autocomplete-identifier {
    font-size: 0.8125rem;
  }
}

.autocomplete-title {
  font-size: 0.875rem;
  color: hsl(var(--bc));
}

/* Mobile: Slightly larger text */
@media (max-width: 639px) {
  .autocomplete-title {
    font-size: 0.9375rem;
  }
}

/* Responsive Standards Tables */
.standards-table {
  table-layout: fixed;
  width: 100%;
}

.standards-table th,
.standards-table td {
  word-break: break-word;
  white-space: normal;
  font-size: 0.875rem; /* 14px */
  padding: 0.75rem 0.5rem;
  vertical-align: top;
}

/* Desktop: Column widths optimized for 4-column training requirements table */
.standards-table th:nth-child(1),
.standards-table td:nth-child(1) {
  width: 12%; /* Weight column (narrow) */
}

.standards-table th:nth-child(2),
.standards-table td:nth-child(2) {
  width: 28%; /* Type of training column */
}

.standards-table th:nth-child(3),
.standards-table td:nth-child(3) {
  width: 28%; /* Who is required column */
}

.standards-table th:nth-child(4),
.standards-table td:nth-child(4) {
  width: 32%; /* When must training be completed column */
}

/* Mobile: Convert table to stacked card layout (under 768px) */
@media (max-width: 767px) {
  .standards-table-wrapper {
    overflow-x: visible;
  }

  .standards-table thead {
    display: none;
  }

  .standards-table,
  .standards-table tbody,
  .standards-table tr {
    display: block;
    width: 100%;
  }

  .standards-table tr {
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }

  .standards-table td {
    display: block;
    text-align: left;
    padding: 0.5rem 0;
    border: none;
    width: 100%;
  }

  .standards-table td:before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
    color: #374151;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .standards-table td:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
}

/* T046, T047, T048 - Navigation title truncation with ellipsis */
.nav-title-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Desktop: Allow more space for titles */
@media (min-width: 768px) {
  .nav-title-truncate {
    max-width: 250px;
  }
}

/* Mobile: Tighter truncation for narrow screens */
@media (max-width: 767px) {
  .nav-title-truncate {
    max-width: 200px;
  }
}

/* Very small mobile (320px) */
@media (max-width: 375px) {
  .nav-title-truncate {
    max-width: 150px;
  }
}

/* Custom badge for "Expiring Soon" status */
.badge-orange {
  background-color: #f8812c; /* Orange-500 */
  border-color: transparent;
}