/* ===========================================================
   PROFILE TABLES — tab + table component styles
   Colour tokens (--navy-*, --blue-*, --ink-*, --page-bg, --red-500)
   and the global reset/body rules already live in style.css,
   which loads before this file — intentionally NOT redeclared
   here to avoid two files disagreeing about the same value later.
   Only tokens genuinely new to this component are added below.
=========================================================== */

:root {
  --gold: #f4c542;
  --table-bg: #0b1d31;
  --table-bg-alt: #102640;
  --shadow: 0 12px 32px rgba(0, 0, 0, .28);

  /* tab construct controls */
  --tab-gap: 40px;        /* the gap between the two tabs — much larger now that
                              nothing needs to peek through it */
  --tab-radius: 8px;      /* top-left/top-right rounding on each tab */
  --frame-radius: 10px;   /* rounding on the table box's bottom corners */
}

.profiles {
  width: 100%;
  padding: clamp(8px, 1.5vw, 18px);
}

/* ---------------------------------------------------------
   Outer frame
   Tabs and table are now two independent boxes stacked flush
   together — the table's own border only runs down its own
   sides and along its own bottom; it never has a top edge, so
   there's nothing for the tabs to mask or connect into. Each
   tab manages its own corners/borders completely independently.
--------------------------------------------------------- */
.table-construct {
  width: min(100%, 1500px);
  margin: 0 auto;
}

.table-panel {
  background: var(--navy-950);
  border: 1px solid var(--blue-300);
  border-top: 0;                              /* only left/right/bottom — see comment above */
  border-radius: 0 0 var(--frame-radius) var(--frame-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.main-tabs {
  display: flex;
  gap: var(--tab-gap);
  /* NOTE: this is a box-shadow, not a border-bottom. border-bottom
     would add 1px to this container's own height, landing the line
     one pixel below where the tabs actually end — an inset shadow
     paints on that same row instead, so it lines up exactly with
     each tab's own bottom edge rather than sitting just past it. */
  box-shadow: inset 0 -1px 0 var(--blue-300);
}

/* the flex item is now this wrapping slot, not .main-tab itself —
   that's what lets .tab-reset sit as a sibling INSIDE the tab's
   visual footprint without nesting a <button> inside a <button>,
   which is invalid HTML and unreliable across browsers */
.main-tab-slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.main-tab {
  display: block;
  width: 100%;
  min-width: 0;
  height: 58px;
  padding: 10px 18px;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  border-bottom-color: var(--blue-300);   /* default (not selected): only the bottom edge is drawn */
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  /* lighter than the selected tab and the table body below, so
     the unselected tab visibly recedes */
  background: var(--navy-800);
  color: var(--ink-300);
  font: inherit;
  font-size: clamp(.98rem, 1.45vw, 1.25rem);
  font-weight: 800;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.main-tab:hover {
  color: var(--ink-100);
  background: rgba(19, 135, 243, .14);
}

/*
  Selected tab: top+left+right blue, no bottom (so it reads as
  flush/continuous with the table box directly below it — same
  background colour, no seam). Because tabs are no longer nested
  inside the table's own bordered box, this is just the tab's own
  border — no masking or overlap tricks needed at all.
*/
.main-tab.is-active {
  color: var(--ink-100);
  background: var(--navy-950);
  border-color: var(--blue-300);
  border-bottom-color: transparent;
}

/* ---------------------------------------------------------
   Reset filters — sits inside the LEFT side of whichever tab
   is currently selected (JS toggles the [hidden] attribute
   when the active tab changes). It's a sibling of .main-tab,
   not a child, so its click never triggers the tab-switch
   handler underneath it.
--------------------------------------------------------- */
.tab-reset {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--navy-800);
  border-radius: 6px;
  background: rgba(1, 12, 29, .4);
  color: var(--blue-300);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

/* Explicitly setting display above means it overrides the browser's
   own [hidden] { display:none } default (author CSS always beats
   the user-agent stylesheet, regardless of specificity) — so the
   JS toggling the hidden attribute on the non-active tab's button
   had no visible effect without this rule to hand control back. */
.tab-reset[hidden] {
  display: none;
}

.tab-reset:hover,
.tab-reset:focus-visible {
  color: var(--ink-100);
  border-color: var(--blue-500);
  background: rgba(19, 135, 243, .18);
}

.tab-reset__icon {
  font-size: .9rem;
  line-height: 1;
}

@media (max-width: 720px) {
  /* icon only at narrow widths — the tab itself is already
     tight on space there (see .main-tab's own mobile rule) */
  .tab-reset__label { display: none; }
  .tab-reset { padding: 5px 7px; left: 8px; }
}

.main-tab:focus-visible,
.sort-button:focus-visible,
.download-button:focus-visible,
.profile-table select:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
}

.tab-panel {
  background: var(--table-bg);
  /* no border-top here on purpose — the boundary under the tab
     row is drawn by each tab's own border-bottom (see .main-tab
     above), not by the panel, so the active tab can suppress it */
}

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

.table-scroll {
  width: 100%;
  max-height: min(68vh, 720px);
  overflow: auto;
  scrollbar-color: var(--blue-600) var(--navy-900);
}

/* ---------------------------------------------------------
   Empty state
   Shown (toggled via JS) when every row is filtered out. This
   isn't just a nicer message than a blank table — it's also
   what stops an open dropdown from getting clipped: with zero
   visible rows, .table-scroll's own height would otherwise
   collapse to just the header, and overflow:auto clips any
   dropdown list that tries to extend past that shrunk box.
   Reserving real height here (well past the dropdown's own
   220px max-height) keeps that from happening regardless of
   which filter combination produced zero results.
--------------------------------------------------------- */
.table-empty {
  padding: 64px 24px;
  text-align: center;
}

.table-empty__text {
  margin: 0 0 14px;
  color: var(--ink-300);
  font-size: .9rem;
}

.table-empty__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--blue-500);
  border-radius: 6px;
  background: transparent;
  color: var(--blue-300);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.table-empty__reset:hover {
  background: var(--blue-600);
  color: var(--ink-100);
}

/* Header stays fixed while tbody rows scroll. */
.profile-table {
  width: 100%;
  min-width: 1500px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.profile-table th,
.profile-table td {
  padding: 9px 10px;
  border-right: 1px solid var(--navy-800);
  border-bottom: 1px solid var(--navy-800);
  text-align: left;
  vertical-align: top;
}

.profile-table th:last-child,
.profile-table td:last-child { border-right: 0; }

.profile-table tbody tr:last-child td { border-bottom: 0; }

.profile-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  /* every header cell gets the same reserved height regardless
     of what's inside it (plain text, a <select>, or a full combo
     widget) — combined with vertical-align:top above, this is
     what guarantees every label starts on the same row instead
     of drifting based on how tall each cell's own content is */
  height: 76px;
  background: var(--navy-900);
  color: var(--ink-100);
  font-size: .76rem;
  line-height: 1.15;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--navy-800);
}

/* ---------------------------------------------------------
   Column sizing
   Device (10) and Aircraft (11) have different column counts
   again — Aircraft has an extra "Aircraft" column the Device
   table doesn't — so sizing is scoped per table via the
   [data-table] attribute.

   DEVICE (10):   1 Device · 2 Aircraft Category · 3 Profile Type ·
                  4 Rating · 5 Download · 6 Creator · 7 Description ·
                  8 Vers. · 9 Date · 10 D/L's
   AIRCRAFT (11): 1 Device · 2 Aircraft Category · 3 Aircraft ·
                  4 Profile Type · 5 Rating · 6 Download · 7 Creator ·
                  8 Description · 9 Vers. · 10 Date · 11 D/L's
--------------------------------------------------------- */

.profile-table[data-table="device"] th:nth-child(1),
.profile-table[data-table="device"] td:nth-child(1) { width: 17%; }
.profile-table[data-table="device"] th:nth-child(2),
.profile-table[data-table="device"] td:nth-child(2) { width: 12%; }
.profile-table[data-table="device"] th:nth-child(3),
.profile-table[data-table="device"] td:nth-child(3) { width: 9%; }
.profile-table[data-table="device"] th:nth-child(4),
.profile-table[data-table="device"] td:nth-child(4) { width: 7%; }
.profile-table[data-table="device"] th:nth-child(5),
.profile-table[data-table="device"] td:nth-child(5) { width: 6%; }
.profile-table[data-table="device"] th:nth-child(6),
.profile-table[data-table="device"] td:nth-child(6) { width: 10%; }
.profile-table[data-table="device"] th:nth-child(7),
.profile-table[data-table="device"] td:nth-child(7) { width: 25%; }
.profile-table[data-table="device"] th:nth-child(8),
.profile-table[data-table="device"] td:nth-child(8) { width: 4%; white-space: nowrap; }
.profile-table[data-table="device"] th:nth-child(9),
.profile-table[data-table="device"] td:nth-child(9) { width: 5%; }
.profile-table[data-table="device"] th:nth-child(10),
.profile-table[data-table="device"] td:nth-child(10) { width: 5%; white-space: nowrap; }

.profile-table[data-table="aircraft"] th:nth-child(1),
.profile-table[data-table="aircraft"] td:nth-child(1) { width: 12%; }
.profile-table[data-table="aircraft"] th:nth-child(2),
.profile-table[data-table="aircraft"] td:nth-child(2) { width: 11%; }
.profile-table[data-table="aircraft"] th:nth-child(3),
.profile-table[data-table="aircraft"] td:nth-child(3) { width: 16%; }
.profile-table[data-table="aircraft"] th:nth-child(4),
.profile-table[data-table="aircraft"] td:nth-child(4) { width: 8%; }
.profile-table[data-table="aircraft"] th:nth-child(5),
.profile-table[data-table="aircraft"] td:nth-child(5) { width: 6%; }
.profile-table[data-table="aircraft"] th:nth-child(6),
.profile-table[data-table="aircraft"] td:nth-child(6) { width: 6%; }
.profile-table[data-table="aircraft"] th:nth-child(7),
.profile-table[data-table="aircraft"] td:nth-child(7) { width: 9%; }
.profile-table[data-table="aircraft"] th:nth-child(8),
.profile-table[data-table="aircraft"] td:nth-child(8) { width: 20%; }
.profile-table[data-table="aircraft"] th:nth-child(9),
.profile-table[data-table="aircraft"] td:nth-child(9) { width: 3%; white-space: nowrap; }
.profile-table[data-table="aircraft"] th:nth-child(10),
.profile-table[data-table="aircraft"] td:nth-child(10) { width: 5%; }
.profile-table[data-table="aircraft"] th:nth-child(11),
.profile-table[data-table="aircraft"] td:nth-child(11) { width: 4%; white-space: nowrap; }

/* Date wraps onto two lines (day+month / year) via explicit
   markup rather than relying on natural wrap at whatever width
   happens to be available — see .date-dm / .date-y below */
.date-cell {
  white-space: normal;
  line-height: 1.3;
}

.date-y { color: var(--ink-300); }

.profile-table tbody tr {
  background: var(--table-bg);
  transition: background .15s ease;
}

.profile-table tbody tr:nth-child(even) { background: var(--table-bg-alt); }
.profile-table tbody tr:hover { background: #163654; }

.profile-table tbody td {
  color: var(--ink-300);
  font-size: .82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* bold/highlighted columns: the row's primary identity,
   Profile Type, and Creator — positions differ per table again */
.profile-table[data-table="device"] tbody td:nth-child(1),
.profile-table[data-table="device"] tbody td:nth-child(3),
.profile-table[data-table="device"] tbody td:nth-child(6) {
  color: var(--ink-100);
  font-weight: 650;
}

.profile-table[data-table="aircraft"] tbody td:nth-child(1),
.profile-table[data-table="aircraft"] tbody td:nth-child(4),
.profile-table[data-table="aircraft"] tbody td:nth-child(7) {
  color: var(--ink-100);
  font-weight: 650;
}

/* ---------------------------------------------------------
   Profile Type's <select>
   Wrapped in the same .combo/.combo__label-row structure as
   the search combos for layout parity, but a native <select>
   still renders its own OS-chrome box (a different intrinsic
   height/arrow than our custom text input) unless explicitly
   stripped — that mismatch, not the label markup, was the
   remaining cause of misalignment. appearance:none removes the
   native chrome; an explicit height matching .combo__control
   and a hand-drawn arrow (via .combo__select-wrap::after,
   since ::after doesn't render reliably ON a <select> itself)
   make it pixel-identical to the search combos next to it.
--------------------------------------------------------- */
.combo__select-wrap {
  position: relative;
}

.combo__select-wrap::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--blue-300);
  pointer-events: none;
}

.combo__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 26px 0 7px;
  border: 1px solid var(--navy-800);
  border-radius: 5px;
  background: var(--navy-950);
  color: var(--ink-100);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------
   Searchable combo dropdown
   A text input that filters an option list as you type, in
   place of a plain <select>, for columns where scrolling a
   long native dropdown isn't practical (Device, Aircraft
   Category, Aircraft, Creator).
--------------------------------------------------------- */
.combo {
  position: relative;
  margin-top: 0;
}

.combo__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}

.combo__label {
  /* the plain <select> variant's label sits directly above it
     with no extra markup — this keeps the combo variant's
     spacing/typography identical to that baseline */
  display: block;
}

.combo__control {
  display: flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--navy-800);
  border-radius: 5px;
  background: var(--navy-950);
  overflow: hidden;
}

.combo__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink-100);
  font: inherit;
  font-size: .72rem;
  padding: 7px 4px 7px 7px;
}

.combo__input::placeholder { color: var(--ink-300); }

.combo__input:focus { outline: none; }

.combo__toggle {
  flex: 0 0 auto;
  width: 22px;
  border: 0;
  border-left: 1px solid var(--navy-800);
  background: transparent;
  color: var(--blue-300);
  font-size: .65rem;
  cursor: pointer;
}

.combo__toggle:hover { color: var(--ink-100); }

.combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--navy-900);
  border: 1px solid var(--navy-800);
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
}

.combo__option {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: var(--ink-100);
  cursor: pointer;
}

.combo__option:hover,
.combo__option:focus {
  background: rgba(19, 135, 243, .18);
}

.combo__option[hidden] { display: none; }

.sort-button {
  margin-left: 2px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--blue-300);
  font: inherit;
  cursor: pointer;
}

.sort-button:hover { color: var(--ink-100); }

.description {
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: .77rem !important;
  line-height: 1.28;
}

.rating {
  color: var(--gold) !important;
  font-size: .96rem !important;
  letter-spacing: 0;
  white-space: nowrap;
  /* the fix for stars bleeding into the Creator column: clip
     to the cell's own (fixed-layout) width instead of letting
     nowrap content render past it */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Not yet rated" is a much wider string than five star glyphs
   — a smaller size keeps it inside the same column comfortably
   rather than relying on the ellipsis to cut it off */
.rating--unrated {
  font-size: .7rem !important;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-300) !important;
}

.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 7px 8px;
  border: 1px solid var(--blue-500);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-800));
  color: white;
  text-decoration: none;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease;
}

.download-button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .profiles { padding: 5px; }
  .table-panel { border-radius: 0 0 6px 6px; }
  .main-tabs { gap: 16px; }
  .main-tab { height: 52px; padding: 8px; font-size: .92rem; }
  .table-scroll { max-height: 72vh; }
  .profile-table { min-width: 1300px; }
}