/*
 * 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;
}

/* TASK-116: DaisyUI's .label never wraps, so long help text ran off the card
   (and off a 360px screen). Let it wrap and never exceed its container. */
.label {
  white-space: normal;
  max-width: 100%;
}

/* TASK-117: touch-friendly sizes. Keyed on the input device (a coarse pointer:
   phones and tablets), not on width, so a narrow desktop window stays compact
   and an iPad gets big targets. Unlayered, so these beat DaisyUI's layered
   rules. Tests: test/system/touch_targets_test.rb. */

/* Nothing is smaller than 12px, on any screen. */
.btn-xs,
.badge-xs,
.badge-sm {
  font-size: 0.75rem;
}

@media (pointer: coarse) {
  /* Buttons, fields and icon buttons are at least 44px both ways. */
  .btn,
  .input,
  .select,
  .file-input,
  [role="button"],
  summary {
    min-height: 2.75rem;
  }
  .btn,
  [role="button"] {
    min-width: 2.75rem;
  }

  /* A checkbox, radio or toggle is tapped through its label: make that row 44px. */
  label:has(input[type="checkbox"], input[type="radio"], .toggle),
  .label:has(input[type="checkbox"], input[type="radio"]) {
    min-height: 2.75rem;
    align-items: center;
  }
  .tab {
    min-height: 2.75rem;
  }
  /* A label standing beside a toggle (the toggle itself is tapped through it). */
  .touch-label {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  /* The small status icons in the compliance grids. */
  td a:has(> svg:only-child) {
    min-width: 2.75rem;
    justify-content: center;
  }

  /* A link that is an action on its own (not a word inside a sentence) gets a
     44px row to tap. Links inside a <p> stay inline; a link in a sentence that
     isn't in a <p> carries .link-inline to opt out. */
  a:not(.btn):not(.tab):not(.menu a):not(p a):not(.label a):not(.link-inline):not(.flex):not(.block):not(.inline-flex) {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  /* Links that already lay themselves out (a card, a block row) keep their
     width and only get the minimum height. */
  a.flex,
  a.block,
  a.inline-flex {
    min-height: 2.75rem;
  }
  /* A hidden tooltip still takes up room and can push the page wider than the
     phone (dashboard issue chips at 360px). Only lay it out while it is shown. */
  .tooltip:not(:hover):not(:focus-within) > .tooltip-content {
    display: none;
  }
  .menu :where(li > a, li > button, li > details > summary) {
    min-height: 2.75rem;
  }
}

/* TASK-121: sideways-scrolling grids. scroll_hint_controller.js sets
   data-can-scroll-left/-right and data-scrolled on .scroll-hint-wrap. The
   "Swipe sideways" line is for touch screens only and goes away once the
   grid has been scrolled; the edge shadows show wherever there is more. */
.scroll-hint-wrap {
  position: relative;
}
.scroll-hint-line {
  display: none;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, currentColor 70%, transparent);
}
@media (pointer: coarse) {
  .scroll-hint-wrap[data-can-scroll-right]:not([data-scrolled]) > .scroll-hint-line {
    display: block;
  }
}
.scroll-hint-wrap::before,
.scroll-hint-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 30;
}
.scroll-hint-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgb(0 0 0 / 0.18), transparent);
}
.scroll-hint-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgb(0 0 0 / 0.18), transparent);
}
.scroll-hint-wrap[data-can-scroll-left]::before,
.scroll-hint-wrap[data-can-scroll-right]::after {
  opacity: 1;
}

/* TASK-123: centre the initials in every avatar circle, and let the tiny count
   badges on the nav bells grow to fit their number instead of clipping it
   (scoped to .indicator-item: plain empty .badge-xs status dots must keep their size). */
.avatar.placeholder > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.indicator-item.badge-xs {
  min-width: 1rem;
  height: auto;
  padding-inline: 0.25rem;
  line-height: 1.25;
}