/* ============================================================
   Tria SKU Search — Main Stylesheet
   Tria Technologies branding
   ------------------------------------------------------------
   REBRANDING / HOST-PAGE OVERRIDES:
   Do not edit this file when integrating into a host page (e.g. a
   WordPress plugin). Instead, load a small companion stylesheet
   AFTER this file and override the relevant :root CSS variables
   (e.g. --font-heading, --radius, --color-navy) or specific
   selectors. This keeps mainline updates drop-in replaceable.
   ============================================================ */

/* ----------------------------------------------------------
   1. Custom Properties
   ---------------------------------------------------------- */
:root {
  --color-navy:         #001f63;
  --color-magenta:      #e10098;
  --color-magenta-hover:#c80085;
  --color-white:        #ffffff;
  --color-slate:        #334155;
  --color-light-gray:   #f1f5f9;
  --color-border:       #e2e8f0;
  --color-card-bg:      #ffffff;
  --color-highlight:    #fdf2f8;
  --color-highlight-blue:#e9eefb;
  --font-heading:       'Oswald', sans-serif;
  --font-body:          Arial, Helvetica, sans-serif;
  --shadow-card:        0px 4px 10px -2px rgba(0,0,0,0.1);
  --radius:             6px;
}

/* ----------------------------------------------------------
   2. Reset & Base
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-slate);
  background: var(--color-light-gray);
  min-height: 100vh;
}

a {
  color: var(--color-magenta);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font-body);
  font-size: 14px;
}

/* ----------------------------------------------------------
   3. Header
   ---------------------------------------------------------- */
.site-header {
  background: var(--color-navy);
  color: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   4. Loading Overlay
   ---------------------------------------------------------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-light-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#loading-overlay-text,
.loading-overlay p {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-slate);
  opacity: 0.8;
}

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-magenta);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   5. App Container
   ---------------------------------------------------------- */
.app-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

/* ----------------------------------------------------------
   6. Category Bar
   ---------------------------------------------------------- */
.category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 10px;
  align-items: center;
}

.category-pill {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 16px;
  border-radius: 20px;
  border: 2px solid var(--color-navy);
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.category-pill:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.category-pill.active {
  background: var(--color-magenta);
  border-color: var(--color-magenta);
  color: var(--color-white);
}

/* ----------------------------------------------------------
   7. Tab Bar
   ---------------------------------------------------------- */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  color: var(--color-slate);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover {
  color: var(--color-magenta);
}

.tab-btn.active {
  color: var(--color-magenta);
  border-bottom-color: var(--color-magenta);
}

/* ----------------------------------------------------------
   8. Tab Panels
   ---------------------------------------------------------- */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ----------------------------------------------------------
   9. Spec Layout (sidebar + results)
   ---------------------------------------------------------- */
.spec-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}

/* ----------------------------------------------------------
   10. Filter Panel
   ---------------------------------------------------------- */
.filter-panel {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  position: sticky;
  top: 72px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.filter-panel::-webkit-scrollbar {
  width: 5px;
}

.filter-panel::-webkit-scrollbar-track {
  background: transparent;
}

.filter-panel::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

/* Mobile filter toggle button — hidden on desktop */
.filter-toggle {
  display: none;
  width: 100%;
  margin-bottom: 12px;
  padding: 9px 16px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-align: left;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-section-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

/* Filter group (collapsible section) */
.filter-group {
  margin-bottom: 10px;
}

.filter-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}

.filter-group-header:hover {
  background: var(--color-light-gray);
}

.filter-group-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-slate);
  flex: 1;
}

.filter-chevron {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.15s;
}

.filter-group.collapsed .filter-chevron {
  transform: rotate(-90deg);
}

.filter-count-badge {
  display: none;
  background: var(--color-magenta);
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
}

.filter-selected-summary {
  display: none;
  font-size: 12px;
  color: var(--color-magenta);
  font-weight: 600;
  padding: 2px 6px 6px;
  line-height: 1.4;
}

/* Checkbox list */
.filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-checkboxes label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.1s;
}

.filter-checkboxes label:hover {
  background: var(--color-light-gray);
}

.filter-checkboxes input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-magenta);
  cursor: pointer;
  flex-shrink: 0;
}

/* Action row inside an open filter dropdown: Clear Selected + Done.
   Sits ABOVE the checkbox list so the buttons clearly act on what's below. */
.filter-actions {
  display: flex;
  gap: 4px;
  padding: 2px 4px 4px;
}

.filter-actions button {
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-light-gray);
  color: var(--color-slate);
  cursor: pointer;
  line-height: 1.4;
}

.filter-actions .btn-filter-done {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.filter-actions button:hover:not(:disabled) {
  background: var(--color-magenta);
  color: var(--color-white);
  border-color: var(--color-magenta);
}

.filter-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tri-state toggle button */
.tristate-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 20px;
  border: 2px solid #94a3b8;
  background: var(--color-white);
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 60px;
  text-align: center;
}

.tristate-btn:hover {
  border-color: var(--color-slate);
}

.tristate-btn.yes {
  background: #16a34a;
  border-color: #16a34a;
  color: var(--color-white);
}

.tristate-btn.no {
  background: #dc2626;
  border-color: #dc2626;
  color: var(--color-white);
}

/* ----------------------------------------------------------
   11. Results Panel
   ---------------------------------------------------------- */
.results-panel {
  min-width: 0; /* prevent grid blowout */
}

/* ----------------------------------------------------------
   12. Search Box
   ---------------------------------------------------------- */
.search-box {
  margin-bottom: 14px;
}

.search-box input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-slate);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-box input[type="text"]:focus {
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 3px rgba(225, 0, 152, 0.12);
}

.search-box input[type="text"]::placeholder {
  color: #94a3b8;
}

/* Clear (x) button inside the Browse All filter input */
.search-clearable {
  position: relative;
}
.search-clearable input[type="text"] {
  padding-right: 38px;
}
.search-clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-slate);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-clear-btn:hover {
  background: var(--color-magenta);
  color: var(--color-white);
}
.search-clear-btn[hidden] {
  display: none;
}

/* ----------------------------------------------------------
   12b. Welcome Guide
   ---------------------------------------------------------- */
.welcome-guide {
  max-width: 700px;
  margin: 40px auto;
  text-align: center;
  padding: 40px 30px;
}

/* ID-prefixed selectors mirror the modal-title pattern: when this app is
   embedded as a WordPress plugin, the host theme's `.entry-content h2` and
   `.entry-content p` rules beat our class selectors on specificity. Carry
   `!important` on every font/spacing property the host theme might set. */
#welcome-guide-title,
.welcome-guide h2 {
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#welcome-guide-subtitle,
.welcome-guide > p {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  color: var(--color-slate);
}

.welcome-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  margin-bottom: 32px;
}

.welcome-tab {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

/* welcome-tab h3 and p appear 4× (one per card), so no single id; rely on
   `!important` to outweigh host-theme `.entry-content h3` / `p` rules. */
.welcome-tab h3 {
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  color: var(--color-magenta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.welcome-tab p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-slate);
}

#welcome-guide-hint,
.welcome-hint {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-magenta);
}

@media (max-width: 768px) {
  .welcome-tabs {
    grid-template-columns: 1fr;
  }
  .welcome-guide {
    padding: 20px 16px;
    margin: 20px auto;
  }
  #welcome-guide-title,
  .welcome-guide h2 {
    font-size: 1.4rem !important;
  }
}

/* ----------------------------------------------------------
   13. Result Count
   ---------------------------------------------------------- */
.result-count {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
  min-height: 18px;
}

/* ----------------------------------------------------------
   14. Card Grid
   ---------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

/* ----------------------------------------------------------
   15. SKU Card
   ---------------------------------------------------------- */
.sku-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  transition: box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sku-card:hover {
  box-shadow: 0px 6px 16px -2px rgba(0,0,0,0.14);
  border-color: #c7d2de;
}

.sku-card.selected {
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 2px rgba(225, 0, 152, 0.18), var(--shadow-card);
}

/* Card header row */
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-order-no {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  min-width: 0;
}

.card-family {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

/* Status badge */
.status-badge {
  display: inline-block;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: uppercase;
  flex-shrink: 0;
}

.status-badge.status-active {
  background: var(--color-magenta);
}

.status-badge.status-obsolete {
  background: #64748b;
}

.status-badge.status-new,
.status-badge.status-preview {
  background: #0369a1;
}

/* PV / OR — outlined "good vs on-request" badges. Both pale fill + theme
   border/text; box-sizing:border-box is global so the border adds no size. */
.status-badge.status-pv {
  background: var(--color-highlight);
  color: var(--color-magenta);
  border: 1px solid var(--color-magenta);
}

.status-badge.status-or {
  background: var(--color-highlight-blue);
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
}

/* Card reference line */
.card-reference {
  font-size: 12px;
  color: #64748b;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "N variants ▸" inline link — appears next to the part number on cards and
   in the Details modal. Magenta + underline so it reads as a link, separated
   from the part-number text by a wider margin so it doesn't look adjacent. */
.variants-link {
  display: inline-block;
  margin-left: 18px;
  color: var(--color-magenta);
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--font-heading), Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 11px;
  user-select: none;
}
.variants-link:hover {
  color: var(--color-magenta-hover);
}
.variants-link-detail {
  font-size: 13px;
}

/* Spec grid inside card */
.card-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px 10px;
  margin-top: 4px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.spec-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-slate);
}

/* Card footer with Details button */
.card-footer {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.btn-details {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 16px;
  background: none;
  color: var(--color-magenta);
  border: 2px solid var(--color-magenta);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-details:hover {
  background: var(--color-magenta);
  color: white;
}

/* Compare checkbox */
.compare-check {
  width: 16px;
  height: 16px;
  accent-color: var(--color-magenta);
  cursor: pointer;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   16. Decoded Panel (Part No. tab)
   ---------------------------------------------------------- */
.decoded-panel {
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 16px;
}

.decoded-panel:empty {
  display: none;
}

.decoded-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.decoded-field-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.decoded-field-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
}

.decoded-field-value.unknown {
  color: #94a3b8;
  font-weight: 400;
  font-style: italic;
}

/* ----------------------------------------------------------
   17. Browse Table
   ---------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.browse-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--color-card-bg);
}

.browse-table thead th {
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 11px 14px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.browse-table thead th:hover {
  background: #003090;
}

.browse-table thead th::after {
  content: '';
  display: inline-block;
  width: 14px;
  margin-left: 4px;
  text-align: center;
  opacity: 0.7;
}

.browse-table thead th.sort-asc::after {
  content: '▲';
}

.browse-table thead th.sort-desc::after {
  content: '▼';
}

.browse-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}

.browse-table tbody tr:last-child {
  border-bottom: none;
}

.browse-table tbody tr:hover {
  background: var(--color-highlight);
}

.browse-table tbody td {
  padding: 10px 14px;
  color: var(--color-slate);
  vertical-align: middle;
}

.browse-table tbody td:nth-child(2) {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}

/* Browse All compare checkbox column */
.browse-table th.browse-check-col,
.browse-table td.browse-check-col {
  width: 36px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.browse-table th.browse-check-col {
  cursor: default;
}

/* Browse All Select All / Compare All toolbar */
.browse-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

/* Select All sits on the light Browse All toolbar, not the dark compare bar,
   so the white-on-dark .btn-secondary needs navy text/border to be visible. */
.browse-toolbar .btn-secondary {
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.browse-toolbar .btn-secondary:hover {
  border-color: var(--color-navy);
  background: rgba(0, 31, 99, 0.08);
}

/* ----------------------------------------------------------
   18. Compare Bar (sticky top of app content)
   ---------------------------------------------------------- */
/* Lives inside `<main id="app">` just under the tab bar. position:sticky
   pins it to the top of the viewport while the user scrolls through cards
   or the Browse All table, then releases when the app container scrolls
   past. Kept inside the app container on purpose: any host-page chrome
   (Tria's Manage Consent button, a future chat widget, scroll-to-top, etc.)
   can occupy any edge of the page without colliding with our buttons.

   --compare-bar-sticky-top controls the offset from the viewport top when
   the bar is stuck. Default 0 for the standalone site (no host nav above
   us). Embedders with their own sticky header should override this in a
   brand stylesheet to that header's height so the bar parks just below it
   instead of being hidden behind it. See tria-branding.css for an example. */
:root {
  --compare-bar-sticky-top: 0px;
}
.compare-bar {
  position: sticky;
  top: var(--compare-bar-sticky-top);
  z-index: 200;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  margin-bottom: 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

#compare-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}

/* ----------------------------------------------------------
   19. Utility Buttons
   ---------------------------------------------------------- */
.btn-accent {
  background: var(--color-magenta);
  color: var(--color-white);
  border: 2px solid var(--color-magenta);
  padding: 8px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn-accent:hover {
  background: var(--color-magenta-hover);
  border-color: var(--color-magenta-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.6);
  padding: 8px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------------------------
   20. Compare Modal
   ---------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-content {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  max-width: 90vw;
  max-height: 85vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  /* Size to content so a 2-column comparison doesn't fill the viewport;
     90vw cap keeps wide comparisons readable. The detail modal overrides
     this with its own max-width (700px). */
  width: max-content;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 10;
  flex-shrink: 0;
}

/* ID-based selectors win on specificity against host-page theme rules
   (e.g. a WordPress theme's global `h2 { font-size: 2rem }` that would
   otherwise blow up the modal title and push the toolbar buttons out
   of alignment when this app is embedded as a plugin). Mirror every
   font/spacing property the host theme might set. */
#detail-modal-title,
#compare-modal-title,
.modal-header h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem !important;
  font-weight: 600;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-close {
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.modal-close:hover {
  background: var(--color-light-gray);
  color: var(--color-slate);
}

/* Detail modal */
.detail-modal-content {
  max-width: 700px;
}

.detail-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  gap: 8px;
}

.detail-label {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-slate);
  text-align: right;
}

.detail-value a {
  font-weight: 400;
  word-break: break-all;
}

.detail-description {
  font-size: 13px;
  color: var(--color-slate);
  white-space: pre-line;
  line-height: 1.5;
  background: var(--color-light-gray);
  padding: 10px 12px;
  border-radius: var(--radius);
  max-height: 150px;
  overflow-y: auto;
}

/* Similar Configurations section */
.similar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.similar-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--color-slate);
}
.similar-count {
  font-style: italic;
}
.similar-maxdiffs-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.similar-mfronly-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.similar-mfronly {
  margin: 0;
}
.similar-maxdiffs {
  font-size: 12px;
  padding: 2px 4px;
}

.detail-similar-section .similar-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.similar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.similar-check {
  accent-color: var(--color-magenta);
  flex: 0 0 auto;
  cursor: pointer;
}

.similar-text {
  font-size: 12px;
  color: var(--color-slate);
  flex: 1 1 auto;
  line-height: 1.5;
  word-break: break-word;
}

.similar-order {
  font-weight: 600;
  color: var(--color-navy);
}

.similar-sep {
  color: var(--color-slate);
}

.similar-diff-label {
  color: var(--color-slate);
}

.similar-diff-value {
  color: var(--color-magenta);
  font-weight: 600;
}

.btn-similar-details {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-similar-details:hover {
  background: var(--color-magenta);
}

/* Tab-level "Similar Configurations" button — shown beneath the Order No /
   Part No cards when exactly one SKU matched the search. Opens the Details
   modal in similar-configurations mode for that single SKU. */
.tab-similar-host {
  margin-top: 16px;
}

.tab-similar-host:empty {
  margin-top: 0;
}

.btn-tab-similar {
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-tab-similar:hover {
  background: var(--color-magenta);
}

/* Detail modal: condense view (similar mode) hides non-essential spec sections */
.detail-modal-body.detail-mode-similar .detail-section-condense-hide {
  display: none;
}

/* Action toolbar embedded in the detail-modal header, between the title and
   the close button. Stays visible while the body scrolls. */
.detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px;
  flex: 1 1 auto;
  align-items: center;
}

.detail-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}

.detail-toolbar-right {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.detail-toolbar button {
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  background: var(--color-navy);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.detail-toolbar button:hover {
  background: var(--color-magenta);
}

.detail-toolbar .btn-similar-clear {
  background: var(--color-border);
  color: var(--color-slate);
}

.detail-toolbar .btn-similar-clear:hover {
  background: #cbd5e1;
  color: var(--color-slate);
}

/* Legacy styles kept harmless for any callers still rendering .detail-footer */
.detail-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
}

.detail-footer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}

.detail-footer-right {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.detail-footer button {
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.detail-footer button:hover {
  background: var(--color-magenta);
}

.detail-footer .btn-similar-clear {
  background: var(--color-border);
  color: var(--color-slate);
}

.detail-footer .btn-similar-clear:hover {
  background: #cbd5e1;
  color: var(--color-slate);
}

.compare-table-wrapper {
  overflow-x: auto;
  padding: 16px 20px;
  flex: 1;
}

/* Comparison table inside modal */
.compare-table-wrapper table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 500px;
}

.compare-table-wrapper table th,
.compare-table-wrapper table td {
  padding: 9px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.compare-table-wrapper table thead th {
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* First column sticky (row labels) */
.compare-table-wrapper table th:first-child,
.compare-table-wrapper table td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--color-light-gray);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 130px;
}

.compare-table-wrapper table thead th:first-child {
  background: var(--color-navy);
  color: var(--color-white);
  top: 0;
  z-index: 15;
}

/* Diff highlight */
.compare-table-wrapper table td.diff {
  background: var(--color-highlight);
  font-weight: 600;
}

/* Order-number link in the comparison-table column header. Underlined and
   light-blue against the dark navy header so it reads as a clickable link
   (left-click drills into the SKU; right-click → "open in new tab" works
   via #sku=NNNN hash routing). */
.compare-table-wrapper table thead th .order-link,
.order-link {
  color: #7ec3ff;
  text-decoration: underline;
  cursor: pointer;
}
.order-link:hover {
  color: #ffffff;
}

/* Per-column "x" in comparison header — sits beside the order-link, drops
   that SKU from the table and unticks its Compare checkbox in the main list. */
.compare-table-wrapper table thead th .compare-col-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.compare-table-wrapper table thead th .compare-remove-col {
  background: transparent;
  border: none;
  color: var(--color-white);
  opacity: 0.6;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: opacity 0.12s ease, background 0.12s ease;
}

.compare-table-wrapper table thead th .compare-remove-col:hover,
.compare-table-wrapper table thead th .compare-remove-col:focus {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.compare-table-wrapper table tbody tr:hover td {
  background: #f8f9ff;
}

.compare-table-wrapper table tbody tr:hover td:first-child {
  background: #eef0f7;
}

/* ----------------------------------------------------------
   21. Empty / No-results state
   ---------------------------------------------------------- */
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: #94a3b8;
  font-size: 14px;
}

.no-results-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* No-match CTA: shown on the spec-filter tab when filters return 0 SKUs */
.no-match-cta {
  grid-column: 1 / -1;
  max-width: 640px;
  margin: 32px auto;
  padding: 32px 28px;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

#no-match-cta-title,
.no-match-cta h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}

#no-match-cta-body,
.no-match-cta p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  color: var(--color-slate);
}

.no-match-cta-actions {
  margin-top: 22px !important;
}

.no-match-cta-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
   22. Responsive — 768px–1024px (medium)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .spec-layout {
    grid-template-columns: 1fr;
  }

  .filter-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
    display: none; /* hidden until toggled */
  }

  .filter-panel.open {
    display: block;
  }

  .filter-toggle {
    display: block;
  }

  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* ----------------------------------------------------------
   23. Responsive — <768px (mobile)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .header-inner {
    padding: 12px 16px;
  }

  .site-title {
    font-size: 1.25rem;
  }

  .app-container {
    padding: 0 10px 80px;
  }

  /* Category bar — horizontal scroll on mobile */
  .category-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0 8px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .category-bar::-webkit-scrollbar {
    display: none;
  }

  .category-pill {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 12px;
  }

  /* Tab bar — horizontal scroll */
  .tab-bar {
    gap: 0;
  }

  .tab-btn {
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Cards — single column */
  .card-grid {
    grid-template-columns: 1fr;
  }

  .decoded-panel {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .compare-bar {
    padding: 10px 14px;
    gap: 8px;
  }

  .btn-accent,
  .btn-secondary {
    padding: 7px 14px;
    font-size: 13px;
  }

  .modal-content {
    max-height: 92vh;
    max-width: 98vw;
  }
}

/* ----------------------------------------------------------
   24. Accessibility & Focus
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

button:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}