/* ===== t_px_tests_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Anvil's server strips a
   <style> block out of an HTML template, so the form's rules live here.

   ROOT RULE. `.tab-tests` stays a bare class so it outranks the scoped reset.
   It declares `min-height: 100%` and `position: relative`. It takes no `flex: 1 0 auto`: this tab is a section
   mounted into a classic panel inside training_authoring, not a screen root in
   the shared layout's scroller. It declares no `height` and no `overflow`.

   SCOPING. Every other rule is `:where(.tab-tests)`-prefixed, which adds zero
   specificity, so no rule can change which declaration wins on that account.
   No rule names the root as an ancestor, and no rule other than the root's own has the root as its
   subject — including inside the 1023px media query, whose rules all name
   descendants.

   TIES AUDITED, none live. `tab-tests-` appears in no other template and in no
   other asset in this app; `test_card_row_html.css` names it only in a comment
   about keeping its own grid columns in step. This form applies no `.px-*`
   class, so the dependency's runtime theme injection reaches nothing here.
   `.ta-root select` — the one selector in this section whose subject carries no
   form prefix — has no <select> to reach in this form. theme.css reaches a bare
   <button> only through `button.close` and the `.anvil-role-*-button` families,
   and neither matches these buttons. `.tab-chip*` lives in training.css and is
   not declared here.

   DESIGNER GATE: none. The three hiding rules — `.tab-tests-empty`,
   `.tab-tests-loading` and `.tab-tests-resume`, each `display: none` — are
   their block's base state, and each block is empty in the template until
   JavaScript fills it. The form carries no live class to gate on.

   ONE DEAD RULE. `.tab-tests-rows-host:empty + .tab-tests-empty.show` matches
   nothing: the rows mount point carries `id="tab-tests-rows-host"` and no class
   of that name. Making it live would be a behaviour change, so it is left as
   written.

   No url() in this form. The one @keyframes, `tab-tests-spin`, is
   form-prefixed and unique across the section. */

.tab-tests {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
  background: #f8fafc;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  position: relative;
}

:where(.tab-tests) .tab-tests-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
:where(.tab-tests) .tab-tests-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
:where(.tab-tests) .tab-tests-new-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  background: #e11d48;
  color: #ffffff;
  border: 1px solid #be123c;
  font-family: inherit;
  min-height: 36px;
}
:where(.tab-tests) .tab-tests-new-btn:hover { background: #be123c; }
:where(.tab-tests) .tab-tests-new-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

:where(.tab-tests) .tab-tests-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
:where(.tab-tests) .tab-tests-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #e2e8f0;
  flex: 1;
  min-width: 280px;
}
:where(.tab-tests) .tab-tests-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #64748b;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  min-height: 36px;
}
:where(.tab-tests) .tab-tests-tab:hover { color: #334155; background: #f1f5f9; }
:where(.tab-tests) .tab-tests-tab.active { color: #e11d48; border-bottom-color: #e11d48; }
:where(.tab-tests) .tab-tests-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

:where(.tab-tests) .tab-tests-search {
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  min-width: 220px;
  flex: 0 1 auto;
}
:where(.tab-tests) .tab-tests-search:focus {
  outline: none;
  border-color: #e11d48;
  box-shadow: 0 0 0 3px rgba(225,29,72,0.1);
}

:where(.tab-tests) .tab-tests-table {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
/* Header + body-row grids share IDENTICAL column declarations.
   Title and Actions are 1fr-flexible (absorb spare horizontal
   space). Inner columns use minmax(content-floor, max-content):
   the floor is sized to the WIDEST content that column ever
   renders (chip label for State / Required; uppercase header
   label for Pass mark / Pass rate / Last edited; etc.), so both
   the header grid and every per-row grid clamp to the same
   value and stay in lock-step. Combined with tightened gap (8px)
   and padding (12px horizontal), the row's minimum content width
   is ~1003px — fits comfortably in 1024px+ desktop viewports
   with no scrollbar. overflow:hidden becomes safe.
   Keep these column declarations in sync with test_card_row_html. */
:where(.tab-tests) .tab-tests-thead {
  display: grid;
  grid-template-columns:
    minmax(130px, 1fr)         /* Title (flex) */
    minmax(85px, max-content)  /* State (chip "Archived" ~85) */
    minmax(95px, max-content)  /* Required (chip "Required" ~95) */
    minmax(80px, max-content)  /* Pass mark (header "PASS MARK" ~80) */
    minmax(55px, max-content)  /* Time */
    minmax(75px, max-content)  /* Expiry ("12 months" ~75) */
    minmax(80px, max-content)  /* Pass rate (header "PASS RATE" ~80) */
    minmax(95px, max-content)  /* Last edited (header "LAST EDITED" ~95) */
    minmax(220px, 1fr);        /* Actions (flex) */
  gap: 8px;
  padding: 12px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Mobile: header row is hidden — body rows become labelled cards.
   Breakpoint at 1023px (not 768) because the table's content
   floors sum to ~1003px; below that the row would silently clip
   against overflow:hidden. Cards layout is more honest in that
   range and reads better at narrow widths. */
@media (max-width: 1023px) {
  :where(.tab-tests) .tab-tests-thead { display: none; }
  :where(.tab-tests) .tab-tests-table {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  /* Controls strip — stack the tab strip and the search input so the
     tab strip's own horizontal scroll never fights the search input
     for width, and neither pushes the page wider than the viewport. */
  :where(.tab-tests) .tab-tests-controls { flex-direction: column; align-items: stretch; }
  :where(.tab-tests) .tab-tests-tabs {
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  :where(.tab-tests) .tab-tests-tabs::-webkit-scrollbar { display: none; }
  :where(.tab-tests) .tab-tests-tab { flex-shrink: 0; }
  :where(.tab-tests) .tab-tests-search { min-width: 0; width: 100%; box-sizing: border-box; }
}
:where(.tab-tests) .tab-tests-th {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
:where(.tab-tests) .tab-tests-th-sortable {
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  letter-spacing: inherit;
  text-transform: inherit;
}
:where(.tab-tests) .tab-tests-th-sortable:hover { color: #0f172a; }
:where(.tab-tests) .tab-tests-th-sortable.active { color: #e11d48; }
:where(.tab-tests) .tab-tests-th-sortable:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
:where(.tab-tests) .tab-tests-sort-arrow { font-size: 10px; opacity: 0.6; }
:where(.tab-tests) .tab-tests-th-sortable.active .tab-tests-sort-arrow { opacity: 1; }

:where(.tab-tests) .tab-tests-rows-host:empty + .tab-tests-empty.show { display: flex; }
:where(.tab-tests) .tab-tests-empty {
  display: none;
  padding: 48px 24px;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}
:where(.tab-tests) .tab-tests-empty.show { display: flex; }

:where(.tab-tests) .tab-tests-loading {
  display: none;
  padding: 32px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #64748b;
}
:where(.tab-tests) .tab-tests-loading.show { display: flex; }
:where(.tab-tests) .tab-tests-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: #e11d48;
  border-radius: 50%;
  animation: tab-tests-spin 0.8s linear infinite;
}
@keyframes tab-tests-spin { to { transform: rotate(360deg); } }

/* Resume prompt — inline banner-style above the table when a
   (user, 'new') localStorage slot exists */
:where(.tab-tests) .tab-tests-resume {
  display: none;
  padding: 12px 16px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
:where(.tab-tests) .tab-tests-resume.show { display: flex; }
:where(.tab-tests) .tab-tests-resume-msg { flex: 1; font-size: 14px; }
:where(.tab-tests) .tab-tests-resume-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  min-height: 32px;
}
:where(.tab-tests) .tab-tests-resume-restore {
  background: #2563eb; color: #ffffff; border: 1px solid #1d4ed8;
}
:where(.tab-tests) .tab-tests-resume-restore:hover { background: #1d4ed8; }
:where(.tab-tests) .tab-tests-resume-discard {
  background: #ffffff; color: #1e40af; border: 1px solid #bfdbfe;
}
:where(.tab-tests) .tab-tests-resume-discard:hover { background: #dbeafe; }