/* CarLAB ui-v2 — maker.php ($mode==='directory', the manufacturers directory page).
   Dense row list replacing the old 3-column .maker-slot card gallery. Same visual
   language as the homepage model explorer (.cl2-explorer-*, assets/ui-v2/index.css)
   and the maker-detail model list (.cl2-maker-model-*, assets/ui-v2/maker.css) —
   page-scoped under .cl2-dir-* rather than cross-referencing either (same
   duplicate-page-scoped-CSS convention used throughout this rebuild). Continuous
   white canvas: no cards, no shadows, no gray bands. */

/* ── Breadcrumb (page-scoped duplicate of the shared .bc-row/.bc-item pattern,
   assets/carlab-model-detail.css — that file is left untouched, model.php's own
   breadcrumb there is unaffected) ── */

.cl2-dir-bc-row {
  padding: var(--cl2-space-sm) 0;
  border-bottom: 1px solid var(--cl2-border);
}

.cl2-dir-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text-dim);
}

.cl2-dir-bc-item {
  color: var(--cl2-text-muted);
  text-decoration: none;
  transition: color var(--cl2-t-fast) var(--cl2-ease);
  padding: 2px 0;
}

a.cl2-dir-bc-item:hover {
  color: var(--cl2-text);
}

.cl2-dir-bc-item:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
  border-radius: var(--cl2-radius-sm);
}

.cl2-dir-bc-home {
  display: inline-flex;
  align-items: center;
  gap: var(--cl2-space-xs);
}

.cl2-dir-bc-home-icon {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.cl2-dir-bc-sep {
  color: var(--cl2-text-dim);
  margin: 0 7px;
  user-select: none;
}

.cl2-dir-bc-current {
  color: var(--cl2-text);
  font-weight: 600;
}

/* ── Hero: H1 + short intro. No hero card, no donut, no oversized banner. ── */

.cl2-dir-hero {
  padding: var(--cl2-space-2xl) 0 var(--cl2-space-lg);
  max-width: 760px;
}

.cl2-dir-title {
  margin: 0 0 var(--cl2-space-sm);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  font-family: var(--cl2-font-sans);
  color: var(--cl2-text);
}

.cl2-dir-desc {
  margin: 0;
  font-size: var(--cl2-fs-lg);
  line-height: 1.6;
  color: var(--cl2-text-muted);
}

/* Result count moved here from the old full-width toolbar bar — small secondary text
   under the intro, not a dedicated section of its own. */
.cl2-dir-count-label {
  margin: var(--cl2-space-sm) 0 0;
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text-dim);
}

@media (max-width: 760px) {
  .cl2-dir-title {
    font-size: 26px;
  }
}

/* ── Controls row: search, year scope, sort toggle, "more filters" — one
   horizontal bar on desktop, wraps on narrower widths. No sidebar card. ── */

.cl2-dir-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cl2-space-md) var(--cl2-space-lg);
  padding: var(--cl2-space-lg) 0;
  border-bottom: 1px solid var(--cl2-border);
}

.cl2-dir-search-field {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-xs);
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 320px;
}

.cl2-dir-search-label {
  font-size: var(--cl2-fs-xs);
  font-weight: 600;
  color: var(--cl2-text-muted);
}

.cl2-dir-search {
  height: 38px;
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-sm);
  background: var(--cl2-white);
  padding: 0 var(--cl2-space-md);
  font: inherit;
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text);
}

.cl2-dir-search:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 1px;
  border-color: var(--cl2-accent);
}

/* Compact year-scope dropdown — same trigger+menu interaction model as the maker
   detail page's own .yp-* year picker, rebuilt fresh here (this drives the
   site-wide CarLabPreferences window, not a per-maker local scope, so it isn't
   the same control and shouldn't share the same class). */

.cl2-dir-year {
  position: relative;
  flex: 0 0 auto;
}

.cl2-dir-year-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--cl2-space-xs);
  height: 38px;
  padding: 0 var(--cl2-space-md);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-sm);
  background: var(--cl2-white);
  font: inherit;
  font-size: var(--cl2-fs-md);
  font-weight: 600;
  color: var(--cl2-text);
  cursor: pointer;
}

.cl2-dir-year-trigger:hover {
  border-color: var(--cl2-text-muted);
}

.cl2-dir-year-trigger:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 1px;
}

.cl2-dir-year-caret {
  font-size: 10px;
  color: var(--cl2-text-dim);
}

.cl2-dir-year-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40;
  width: 240px;
  max-width: 80vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  box-shadow: var(--cl2-shadow-lg);
  padding: var(--cl2-space-sm);
}

.cl2-dir-year-item,
.cl2-dir-year-all {
  display: block;
  width: 100%;
  text-align: start;
  padding: 7px var(--cl2-space-sm);
  border: none;
  border-radius: var(--cl2-radius-sm);
  background: none;
  font: inherit;
  font-size: var(--cl2-fs-md);
  color: var(--cl2-text);
  cursor: pointer;
}

.cl2-dir-year-item:hover,
.cl2-dir-year-all:hover {
  background: var(--cl2-surface);
}

.cl2-dir-year-item:focus-visible,
.cl2-dir-year-all:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: -2px;
}

.cl2-dir-year-item[aria-pressed="true"],
.cl2-dir-year-all[aria-pressed="true"] {
  background: var(--cl2-accent);
  color: var(--cl2-white);
  font-weight: 700;
}

.cl2-dir-year-range {
  border-top: 1px solid var(--cl2-border);
  border-bottom: 1px solid var(--cl2-border);
  margin: var(--cl2-space-xs) 0;
  padding: var(--cl2-space-sm) var(--cl2-space-sm) var(--cl2-space-md);
}

.cl2-dir-year-range-row {
  display: flex;
  gap: var(--cl2-space-sm);
}

.cl2-dir-year-range-field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cl2-dir-year-range-label {
  font-size: var(--cl2-fs-2xs);
  color: var(--cl2-text-muted);
}

.cl2-dir-year-range-select {
  height: 32px;
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-sm);
  background: var(--cl2-white);
  font: inherit;
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text);
}

.cl2-dir-year-apply {
  margin-top: var(--cl2-space-sm);
  width: 100%;
  height: 32px;
  border: 1px solid var(--cl2-accent);
  border-radius: var(--cl2-radius-sm);
  background: var(--cl2-accent);
  color: var(--cl2-white);
  font: inherit;
  font-size: var(--cl2-fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.cl2-dir-year-list {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
}

/* Sort toggle — identical component to the maker-page model list's
   .cl2-model-sort/.cl2-model-sort-btn (assets/ui-v2/maker.css), duplicated
   page-scoped rather than shared across pages. */

.cl2-dir-sort {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--cl2-surface);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-pill);
  flex: 0 0 auto;
}

.cl2-dir-sort-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--cl2-radius-pill);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--cl2-fs-xs);
  font-weight: 600;
  color: var(--cl2-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cl2-t-fast) var(--cl2-ease), background var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-dir-sort-btn:hover {
  color: var(--cl2-text);
}

.cl2-dir-sort-btn:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 2px;
}

.cl2-dir-sort-btn[aria-pressed="true"] {
  background: var(--cl2-accent);
  color: var(--cl2-white);
}

/* "עוד סינון" popover — vehicle-count range + reset. Same compact
   trigger+popover pattern as the year control, reused visually not by class. */

.cl2-dir-more {
  position: relative;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.cl2-dir-more-btn {
  height: 38px;
  padding: 0 var(--cl2-space-md);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-sm);
  background: var(--cl2-white);
  font: inherit;
  font-size: var(--cl2-fs-md);
  font-weight: 600;
  color: var(--cl2-text-muted);
  cursor: pointer;
}

.cl2-dir-more-btn:hover {
  color: var(--cl2-text);
  border-color: var(--cl2-text-muted);
}

.cl2-dir-more-btn:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 1px;
}

.cl2-dir-more-pop {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 40;
  width: 260px;
  max-width: 80vw;
  background: var(--cl2-white);
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-md);
  box-shadow: var(--cl2-shadow-lg);
  padding: var(--cl2-space-md);
}

.cl2-dir-more-group {
  display: flex;
  flex-direction: column;
  gap: var(--cl2-space-xs);
  margin-bottom: var(--cl2-space-md);
}

.cl2-dir-more-label {
  font-size: var(--cl2-fs-xs);
  font-weight: 700;
  color: var(--cl2-text-dim);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.cl2-dir-range-vals {
  display: flex;
  justify-content: space-between;
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-muted);
}

.cl2-dir-range-vals b {
  color: var(--cl2-text);
  font-variant-numeric: tabular-nums;
}

.cl2-dir-slider {
  position: relative;
  height: 28px;
  direction: ltr;
}

.cl2-dir-slider .cl2-dir-track {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--cl2-radius-pill);
  background: var(--cl2-border);
}

.cl2-dir-slider .cl2-dir-track-fill {
  position: absolute;
  top: 12px;
  height: 4px;
  border-radius: var(--cl2-radius-pill);
  background: var(--cl2-accent);
}

.cl2-dir-slider input[type=range] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
}

.cl2-dir-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cl2-white);
  border: 2px solid var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
  cursor: pointer;
  /* Track-fill center is at top:12px + 4px/2 = y=14. The runnable-track below
     is stretched to the full 28px input height, so this 16px thumb needs
     margin-top: 14 - 16/2 = 6px to land its own center on that same line. */
  margin-top: 6px;
}

.cl2-dir-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cl2-white);
  border: 2px solid var(--cl2-accent);
  box-shadow: var(--cl2-shadow-sm);
  cursor: pointer;
}

.cl2-dir-slider input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  height: 28px;
}

.cl2-dir-slider input[type=range]::-moz-range-track {
  background: transparent;
  height: 28px;
}

.cl2-dir-reset {
  width: 100%;
  height: 34px;
  border: 1px solid var(--cl2-border);
  border-radius: var(--cl2-radius-sm);
  background: var(--cl2-white);
  color: var(--cl2-text-muted);
  font: inherit;
  font-size: var(--cl2-fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.cl2-dir-reset:hover {
  color: var(--cl2-text);
  border-color: var(--cl2-text-muted);
}

.cl2-dir-reset:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: 1px;
}

/* ── Dense manufacturer list — same grid-row language as .cl2-maker-model-row
   (assets/ui-v2/maker.css): fixed-width secondary columns + one flexible name
   column, subtle bottom border as the only separator, restrained hover/focus. ── */

.cl2-dir-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl2-dir-item {
  border-bottom: 1px solid var(--cl2-border);
}

.cl2-dir-item:first-child {
  border-top: 1px solid var(--cl2-border);
}

.cl2-dir-row {
  display: grid;
  /* Spark column is 100px, not 70px: the shared fixed-axis sparkline (assets/
     carlab-sparklines.js fixedRangeSparklineHtml() / cl_maker_fixed_sparkline_html())
     always renders 31 non-shrinking 2px bars + 30px of 1px gaps = 92px natural width;
     a narrower cell let it overflow ~11px on each side. */
  grid-template-columns: 22px 40px minmax(0, 1fr) 70px 170px 90px 100px;
  align-items: center;
  gap: var(--cl2-space-md);
  padding: var(--cl2-space-sm) var(--cl2-space-xs);
  text-decoration: none;
  color: inherit;
  transition: background var(--cl2-t-fast) var(--cl2-ease);
}

.cl2-dir-row:hover {
  background: var(--cl2-surface);
}

.cl2-dir-row:focus-visible {
  outline: 2px solid var(--cl2-accent);
  outline-offset: -2px;
}

.cl2-dir-rank {
  text-align: end;
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-dim);
  font-variant-numeric: tabular-nums;
}

.cl2-dir-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--cl2-surface);
}

.cl2-dir-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cl2-dir-logo-fallback,
.cl2-dir-logo > span {
  font-size: var(--cl2-fs-md);
  font-weight: 700;
  color: var(--cl2-text-dim);
}

.cl2-dir-id {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--cl2-space-sm);
}

.cl2-dir-name {
  font-family: var(--cl2-font-sans);
  font-weight: 700;
  font-size: 18px; /* explicit per product direction — no token in the scale matches it */
  color: var(--cl2-text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl2-dir-name-en {
  font-family: var(--cl2-font-mono);
  font-weight: 500;
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-dim);
  letter-spacing: .2px;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.cl2-dir-years {
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-xs);
  color: var(--cl2-text-muted);
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.cl2-dir-count {
  text-align: end;
  font-family: var(--cl2-font-mono);
  font-size: var(--cl2-fs-sm);
  color: var(--cl2-text);
  white-space: nowrap;
}

.cl2-dir-count b {
  font-size: var(--cl2-fs-md);
  font-weight: 700;
}

.cl2-dir-count span {
  margin-inline-start: 3px;
  font-size: var(--cl2-fs-2xs);
  color: var(--cl2-text-muted);
}

.cl2-dir-spark {
  display: block;
  width: 100%;
  height: 22px;
}

/* Pagination "show more" button: assets/ui-v2/components.css (.cl2-load-more),
   shared with the homepage explorer and the models directory. */

.cl2-dir-empty {
  padding: var(--cl2-space-4xl) var(--cl2-space-lg);
  text-align: center;
  color: var(--cl2-text-dim);
}

/* ── Responsive ── */

/* Below desktop width, the shared .main-content max-width:80%
   (carlab-analytics-shell.css) is more gutter than the dense directory row
   list can spare — neutralized here exactly as assets/ui-v2/maker.css and
   assets/ui-v2/model.css do for the two detail pages (same breakpoint, same
   value, same cascade-order reasoning: this file loads after the shared
   shell stylesheet, so the same-specificity class wins). */
@media (max-width: 1180px) {
  .main-content {
    max-width: none;
  }
}

@media (max-width: 1024px) {
  .cl2-dir-row {
    grid-template-columns: 20px 36px minmax(0, 1fr) 150px 80px 100px;
  }

  .cl2-dir-years {
    display: none;
  }
}

@media (max-width: 768px) {
  .cl2-dir-controls {
    align-items: stretch;
  }

  .cl2-dir-search-field {
    flex: 1 1 100%;
    max-width: none;
    order: -1;
  }

  .cl2-dir-more {
    margin-inline-start: 0;
  }

  .cl2-dir-row {
    grid-template-columns: 18px 32px minmax(0, 1fr) 120px 74px;
    gap: var(--cl2-space-sm);
  }

  .cl2-dir-spark {
    display: none;
  }

  /* .status-mix's shared min-width:160px (carlab-analytics-shell.css) is wider
     than the 120px this breakpoint's row grid allocates it — the bar was
     overflowing past its own column and rendering on top of the count text
     next to it. Same override the 480px step below already applies for the
     same reason; the count column keeps its fixed 74px (already enough for
     "748,912"-sized values), so this just lets the bar honor the space left
     over instead of forcing its desktop-width floor. */
  .status-mix {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .cl2-dir-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .cl2-dir-rank,
  .cl2-dir-logo {
    display: none;
  }

  /* Status bar drops to its own second line under the name; count stays on the
     first line next to the name so it's still visible without scrolling. */
  .cl2-dir-id {
    grid-column: 1;
    grid-row: 1;
  }

  .cl2-dir-count {
    grid-column: 2;
    grid-row: 1;
  }

  .status-mix {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
}