:root {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  color: #202522;
  background: #f4f5f4;
  font-synthesis: none;
  --green: #17362f;
  --border: #d9dedb;
  --muted: #68716d;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
a { color: #185d4b; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-header {
  min-height: 84px;
  padding: 18px max(24px, calc((100% - 1360px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: white;
  background: var(--green);
}
.app-header h1 { margin: 0; font-size: 21px; font-weight: 650; }
.app-header p { margin: 5px 0 0; color: #c1cdc8; font-size: 13px; }
.app-header nav { display: flex; gap: 8px; }
.app-header a { padding: 8px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; color: white; text-decoration: none; font-size: 12px; }
.app-header a:hover { background: rgba(255,255,255,.1); }

main { width: min(1360px, calc(100% - 40px)); margin: 24px auto 60px; }
.source-status { min-height: 42px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 5px; background: white; font-size: 13px; }
.status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #9aa19e; }
.source-status.ok { color: #285247; background: #f4faf7; border-color: #cfe0d8; }
.source-status.ok .status-dot { background: #2c8b70; }
.source-status.warning { color: #6d5928; background: #fffaf0; border-color: #e6d8b8; }
.source-status.warning .status-dot { background: #c49220; }
.source-status.error { color: #8d2f2f; background: #fff4f4; border-color: #e7c9c9; }
.source-status.error .status-dot { background: #bb4444; }
.source-status.loading .status-dot { animation: pulse 1s infinite alternate; }
.api-access { margin-top: 12px; padding: 12px 13px; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 440px) auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 5px; background: white; }
.api-access div { display: flex; flex-direction: column; gap: 3px; }
.api-access strong { font-size: 12px; }
.api-access div span { color: var(--muted); font-size: 11px; }
.api-access input { width: 100%; height: 37px; padding: 0 10px; border: 1px solid #cbd1ce; border-radius: 4px; }

.query-builder { margin-top: 16px; border: 1px solid var(--border); border-radius: 6px; background: white; }
.builder-heading { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.builder-heading h2 { margin: 0; font-size: 18px; }
.builder-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.query-filters { padding: 16px 20px; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; border-bottom: 1px solid var(--border); background: #fafbfa; }
.query-filters label { display: flex; flex-direction: column; gap: 5px; }
.query-filters label > span, .generated-query > label { color: #5f6965; font-size: 11px; font-weight: 600; }
.query-filters input, .query-filters select, .generated-query input { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #cbd1ce; border-radius: 4px; color: #202522; background: white; outline: none; }
.query-filters input:focus, .query-filters select:focus, .generated-query input:focus { border-color: #5e877b; box-shadow: 0 0 0 2px rgba(94,135,123,.14); }
.query-search { grid-column: span 2; }
.compact-contract { padding: 12px 20px; display: flex; gap: 10px; border-bottom: 1px solid var(--border); color: #4f5b56; background: #f7faf8; font-size: 12px; line-height: 1.45; }
.compact-contract strong { flex: none; color: #244b40; }
.generated-query { padding: 16px 20px 12px; }
.generated-query > div { margin-top: 6px; display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; gap: 8px; }
.generated-query input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.generated-query p { min-height: 16px; margin: 5px 0 0; color: #276650; font-size: 11px; }
.primary-button { color: white; border-color: var(--green); background: var(--green); }
.primary-button:hover { background: #244a41; }
.json-preview { border-top: 1px solid var(--border); }
.json-preview summary { padding: 12px 20px; cursor: pointer; color: #4e5a55; font-size: 12px; font-weight: 600; }
.json-preview pre { max-height: 420px; margin: 0; padding: 16px 20px; overflow: auto; border-top: 1px solid var(--border); color: #d8e8df; background: #18231f; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.summary { margin: 16px 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 6px; background: white; }
.summary article { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--border); }
.summary article:last-child { border: 0; }
.summary span { color: var(--muted); font-size: 12px; }
.summary strong { font-size: 25px; font-weight: 650; }

.inventory-panel { border: 1px solid var(--border); border-radius: 6px; background: white; }
.panel-heading { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.panel-heading h2 { margin: 0; font-size: 20px; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
button { border: 1px solid #abb6b1; border-radius: 5px; padding: 9px 12px; color: #26332f; background: white; cursor: pointer; }
button:hover { background: #f4f6f5; }
button:disabled { opacity: .55; cursor: wait; }

.filters { padding: 16px 20px; display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(150px, 1fr)); gap: 12px; border-bottom: 1px solid var(--border); background: #fafbfa; }
.filters label { display: flex; flex-direction: column; gap: 5px; }
.filters label > span { color: #5f6965; font-size: 11px; font-weight: 600; }
.filters input, .filters select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #cbd1ce; border-radius: 4px; color: #202522; background: white; outline: none; }
.filters input:focus, .filters select:focus { border-color: #5e877b; box-shadow: 0 0 0 2px rgba(94,135,123,.14); }
.result-line { min-height: 42px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.result-line strong { color: #303733; }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 10px 12px; color: #5c6662; background: #f4f6f5; font-size: 11px; font-weight: 650; text-align: left; white-space: nowrap; }
td { padding: 10px 12px; border-top: 1px solid #e5e8e6; vertical-align: middle; }
.vehicle-row { cursor: pointer; }
.vehicle-row:hover, .vehicle-row:focus-visible { background: #f7faf8; outline: none; }
.vehicle-cell { min-width: 310px; display: flex; align-items: center; gap: 12px; }
.thumbnail, .thumbnail-placeholder { width: 92px; height: 58px; flex: none; border: 1px solid #e0e4e2; border-radius: 3px; background: #f1f3f2; object-fit: contain; }
.thumbnail-placeholder { display: grid; place-items: center; color: #8a938f; font-size: 10px; }
.vehicle-identity { display: flex; flex-direction: column; gap: 4px; }
.vehicle-identity strong { font-weight: 650; }
.vehicle-identity span { max-width: 260px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; padding: 5px 7px; border-radius: 4px; background: #edf0ee; color: #59625e; font-size: 11px; white-space: nowrap; }
.badge.success, .enrichment-matched { color: #26634f; background: #e5f2ec; }
.enrichment-partial { color: #6d5928; background: #fff5d9; }
.enrichment-error, .enrichment-not_configured { color: #8d3737; background: #fbeaea; }
.price-cell { white-space: nowrap; }
.price-cell strong, .price-cell small { display: block; }
.price-cell small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.action-cell { width: 1%; }
.row-action { padding: 6px 9px; font-size: 11px; }
.empty-state { padding: 36px; color: var(--muted); text-align: center; }

dialog { width: min(900px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: auto; border: 0; border-radius: 7px; box-shadow: 0 20px 65px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(15,24,21,.55); }
.dialog-header { position: sticky; top: 0; z-index: 2; padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); background: white; }
.dialog-kicker { color: #557169; font-size: 11px; font-weight: 650; text-transform: uppercase; }
.dialog-header h2 { margin: 4px 0; font-size: 24px; }
.dialog-header p { margin: 0; color: var(--muted); font-size: 13px; }
.dialog-close { padding: 7px 10px; }
.dialog-content { background: white; }
.dialog-loading { min-height: 200px; display: grid; place-items: center; color: var(--muted); }
.dialog-loading.error { color: #9b3434; }
.detail-section { padding: 20px; border-bottom: 1px solid var(--border); }
.detail-section h3 { margin: 0 0 14px; font-size: 15px; }
.source-detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: #f6f8f7; }
.source-message { grid-column: 1 / -1; margin: 0; padding-top: 8px; color: #7a4e2a; font-size: 12px; }
.info-grid { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.info-item { min-width: 0; }
.info-item dt { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.info-item dd { margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.image-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.image-grid .thumbnail, .image-grid .thumbnail-placeholder { width: 100%; height: 125px; object-fit: contain; }
.equipment-group { border-top: 1px solid #e4e7e5; }
.equipment-group:last-child { border-bottom: 1px solid #e4e7e5; }
.equipment-group summary { padding: 11px 2px; cursor: pointer; font-size: 13px; font-weight: 600; }
.equipment-group ul { margin: 0 0 14px; padding-left: 23px; columns: 2; color: #47504c; font-size: 12px; line-height: 1.55; }
.raw-link { display: inline-block; margin: 18px 20px 24px; font-size: 12px; }
.muted { color: var(--muted); font-size: 12px; }

footer { width: min(1360px, calc(100% - 40px)); margin: 0 auto 30px; color: var(--muted); font-size: 11px; }
@keyframes pulse { to { opacity: .35; } }

@media (max-width: 900px) {
  .api-access { grid-template-columns: 1fr auto; }
  .api-access div { grid-column: 1 / -1; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .summary article:nth-child(2) { border-right: 0; }
  .summary article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .query-filters { grid-template-columns: repeat(2, 1fr); }
  .search-field { grid-column: 1 / -1; }
  .source-detail, .info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .api-access { grid-template-columns: 1fr; }
  .app-header { align-items: flex-start; flex-direction: column; }
  .app-header nav { width: 100%; }
  .app-header a { flex: 1; text-align: center; }
  main { width: min(100% - 24px, 1360px); margin-top: 14px; }
  .summary article { padding: 13px; }
  .summary strong { font-size: 21px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .filters { grid-template-columns: 1fr; }
  .query-filters { grid-template-columns: 1fr; }
  .query-search { grid-column: auto; }
  .compact-contract { flex-direction: column; gap: 4px; }
  .generated-query > div { grid-template-columns: 1fr 1fr; }
  .generated-query input { grid-column: 1 / -1; }
  .search-field { grid-column: auto; }
  .result-line span { display: none; }
  .vehicle-cell { min-width: 260px; }
  .thumbnail, .thumbnail-placeholder { width: 74px; height: 48px; }
  .source-detail, .info-grid { grid-template-columns: 1fr 1fr; }
  .image-grid { grid-template-columns: repeat(2, 1fr); }
  .equipment-group ul { columns: 1; }
  footer { width: calc(100% - 24px); }
}