/* TenderRadar components. Built on tokens.css. RTL-first, logical properties. */

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); padding-block: var(--s6); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) var(--s5);
}
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .mark { color: var(--seal); display: inline-flex; }
.nav { display: flex; align-items: center; gap: var(--s1); }
.nav a { color: var(--ink-soft); padding: var(--s2) var(--s3); border-radius: var(--r-control); font-weight: 500; font-size: var(--t-sm); }
.nav a:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.nav a.active { color: var(--ink); background: var(--paper); }
.nav-icon { display: inline-flex; vertical-align: -3px; margin-inline-end: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px var(--s4); border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--paper); border-color: #d3d6cd; text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-lg { padding: 14px var(--s6); font-size: var(--t-md); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent-ink); }
.btn-block { width: 100%; }

/* ---------- Forms ---------- */
label { font-weight: 500; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field > span, .field-label { font-size: var(--t-sm); color: var(--ink); font-weight: 500; }
input, select, textarea {
  font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink);
  padding: 10px var(--s3); border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: #d3d6cd; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }
select { cursor: pointer; }

.alert { padding: var(--s3) var(--s4); border-radius: var(--r-control); border: 1px solid var(--bad); background: var(--bad-wash); color: var(--bad); margin-bottom: var(--s4); }
.alert-ok { border-color: var(--ok); background: var(--ok-wash); color: var(--ok); }

/* ---------- Chips (pure-CSS selectable via :has(:checked)) ---------- */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s3); border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font-size: var(--t-sm); font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s; user-select: none;
}
.chip:hover { background: var(--paper); }
.chip input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; }
.chip:has(input:checked), .chip.selected { background: var(--seal-wash); border-color: var(--seal); color: var(--seal); font-weight: 700; }
.chip:has(input:focus-visible) { outline: 2px solid var(--seal); outline-offset: 2px; }

.cert-group { margin-bottom: var(--s4); }
.cert-group > .cert-label { font-size: var(--t-xs); color: var(--ink-soft); font-weight: 700; margin-bottom: var(--s2); display: block; }

/* Deadline chip */
.deadline-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.deadline-chip.soon { border-color: var(--check); background: var(--check-wash); color: var(--check); }
.deadline-chip.urgent { border-color: var(--accent); background: var(--accent); color: #fff; }
.deadline-chip.passed { color: var(--ink-soft); background: var(--paper); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.section-title { margin: var(--s6) 0 var(--s4); display: flex; align-items: baseline; gap: var(--s3); }
.section-title .count { color: var(--ink-soft); font-size: var(--t-sm); font-family: var(--font-body); }

/* ---------- Score seal ---------- */
.seal { position: relative; display: inline-grid; place-items: center; }
.seal svg { display: block; transform: rotate(0deg); }
.seal .seal-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.seal .seal-num b { font-family: var(--font-display); color: var(--seal); line-height: 1; }
.seal .seal-num small { display: block; font-size: 9px; color: var(--ink-soft); letter-spacing: .04em; margin-top: 2px; }
.seal.size-lg .seal-num b { font-size: 26px; }
.seal.size-sm .seal-num b { font-size: 15px; }
.seal.size-sm .seal-num small { display: none; }

/* ---------- Fit Card (תעודת התאמה) ---------- */
.fitcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.fitcard + .fitcard { margin-top: var(--s4); }
.fitcard-head { display: flex; gap: var(--s4); padding: var(--s4) var(--s5); align-items: flex-start; }
.fitcard-head .seal { flex: none; }
.fitcard-main { flex: 1; min-width: 0; }
.fitcard-title { font-family: var(--font-display); font-size: var(--t-md); color: var(--ink); margin: 0 0 6px; }
.fitcard-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--ink-soft); font-size: var(--t-sm); align-items: center; }
.fitcard-meta .verdict-ok { color: var(--ok); font-weight: 700; }
.fitcard-meta .verdict-no { color: var(--accent-ink); font-weight: 700; }
.fitcard-summary { margin: var(--s3) 0 0; color: var(--ink); }
.fitcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--paper); }

details.fitcard-details > summary { list-style: none; cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: var(--t-sm); display: flex; align-items: center; gap: 6px; padding: var(--s3) var(--s5); }
details.fitcard-details > summary:hover { background: var(--paper); }
details.fitcard-details > summary::-webkit-details-marker { display: none; }
details.fitcard-details > summary .chev { transition: transform .18s ease; }
details.fitcard-details[open] > summary .chev { transform: rotate(180deg); }

.conditions { display: grid; gap: var(--s4); padding: var(--s4) var(--s5) var(--s5); border-top: 1px dashed var(--line); }
.cond-group h4 { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 700; margin: 0 0 var(--s2); }
.cond-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cond-group li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-sm); }
.cond-group li .ic { flex: none; margin-top: 2px; }
.cond-ok h4 { color: var(--ok); } .cond-ok .ic { color: var(--ok); }
.cond-bad h4 { color: var(--bad); } .cond-bad .ic { color: var(--bad); }
.cond-check h4 { color: var(--check); } .cond-check .ic { color: var(--check); }
.fitcard-extra { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: 0 var(--s5) var(--s4); color: var(--ink-soft); font-size: var(--t-sm); }
.fitcard-extra b { color: var(--ink); font-weight: 600; }

.seal-ring { animation: drawRing .55s ease-out both; }
@keyframes drawRing { from { stroke-dashoffset: var(--circ); } }

/* Dashboard stagger-in */
.fade-rise { opacity: 0; transform: translateY(8px); animation: fadeRise .4s ease forwards; }
@keyframes fadeRise { to { opacity: 1; transform: none; } }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.page-sub { margin: var(--s2) 0 0; font-size: var(--t-sm); }

/* Sort toggle (segmented control) */
.sort-toggle { display: inline-flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.sort-label { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-xs); color: var(--ink-soft); font-weight: 500; }
.sort-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 2px; }
.sort-seg .sort-opt {
  padding: 3px 10px; border-radius: 999px;
  color: var(--ink-soft); font-size: var(--t-xs); font-weight: 600; line-height: 1.4;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.sort-seg .sort-opt:hover { color: var(--ink); text-decoration: none; }
.sort-seg .sort-opt.is-active { background: var(--accent); color: #fff; }

.match-list { display: flex; flex-direction: column; gap: var(--s4); }

/* Dashboard is a focused work queue — keep it to a comfortable reading column. */
.work-queue { max-width: 760px; margin-inline: auto; }
.work-queue .fitcard-title { font-size: var(--t-lg); }
.work-queue .fitcard-summary { max-width: 60ch; }

/* ---------- Tables (browse / admin) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th, table.data td { padding: var(--s3) var(--s4); text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data thead th { position: sticky; top: 0; background: var(--paper); color: var(--ink-soft); font-weight: 700; font-size: var(--t-xs); }
table.data tbody tr:hover { background: var(--paper); }
table.data tbody tr:last-child td { border-bottom: none; }
.row-expired { opacity: .55; }
.t-title { font-weight: 500; color: var(--ink); max-width: 46ch; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.status-dot.ok::before { background: var(--ok); }
.status-dot.failed::before { background: var(--bad); }
.status-dot.running::before { background: var(--check); }

/* ---------- Admin stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.stat-card { padding: var(--s5); }
.stat-card.stat-alert { border-color: var(--bad); background: var(--bad-wash); }
.stat-label { color: var(--ink-soft); font-size: var(--t-sm); }
.stat-value { font-family: var(--font-display); font-size: var(--t-lg); margin-top: 4px; }
.stat-flag { color: var(--bad); font-size: var(--t-xs); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.err { font-size: var(--t-xs); }
form.inline { display: inline; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-card); }
.empty h3 { color: var(--ink); margin-bottom: var(--s2); }

/* ---------- Wizard ---------- */
.wizard { max-width: 640px; margin-inline: auto; }
.wizard > h1 { margin-bottom: var(--s4); }
.steps { list-style: none; display: flex; gap: var(--s2); padding: 0; margin: 0 0 var(--s5); flex-wrap: wrap; counter-reset: step; }
.step-pill { counter-increment: step; display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-soft); padding: 4px 0; flex: 1; min-width: 90px; }
.step-pill::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); font-weight: 700; background: var(--surface); flex: none; }
.step-pill.active { color: var(--seal); }
.step-pill.active::before { background: var(--seal); color: #fff; border-color: var(--seal); }
.step-pill.current { color: var(--ink); font-weight: 700; }
.wizard-step { padding: var(--s5); }
.wizard-step h2 { font-size: var(--t-md); margin-bottom: var(--s4); }
.wizard-step .field { margin-bottom: var(--s4); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.chip-row .chip { padding: 8px var(--s4); font-size: var(--t-sm); }
.wizard-nav { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.preview-note { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: var(--t-sm); margin: var(--s5) 0 var(--s2); }
.preview-note .lucide { color: var(--ok); }
.preview-card { border-style: dashed; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100vh - 130px); display: grid; place-items: center; padding: var(--s5); }
.auth-card { width: 100%; max-width: 400px; padding: var(--s6); }
.auth-card h1 { font-size: var(--t-lg); margin-bottom: var(--s5); }

/* ---------- Settings ---------- */
.settings-block { padding: var(--s5); margin-bottom: var(--s4); }
.settings-block h2 { font-size: var(--t-md); margin-bottom: var(--s4); }
.stacked .field { margin-bottom: var(--s4); }
.grid-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.row-form { display: flex; align-items: flex-end; gap: var(--s3); }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.check input { width: auto; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Filter bar (browse) ---------- */
.filterbar { position: sticky; top: 61px; z-index: 30; background: var(--paper); padding-block: var(--s3); margin-bottom: var(--s4); }
.filterbar form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.filterbar .field { margin: 0; min-width: 150px; flex: 1 1 150px; }
.filterbar .field > span { font-size: var(--t-xs); color: var(--ink-soft); }
.filterbar .actions { display: flex; gap: var(--s2); align-items: flex-end; }
.filter-check { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.filter-check input { width: auto; }

/* ---------- Landing ---------- */
.hero { background: var(--paper); border-bottom: 1px solid var(--line); }
.hero-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s8) var(--s5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.hero-copy h1 { font-size: var(--t-2xl); line-height: 1.1; }
.hero-copy .lead { font-size: var(--t-md); color: var(--ink-soft); margin: var(--s4) 0 var(--s5); max-width: 30ch; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-demo .fitcard { box-shadow: 0 10px 30px rgb(28 43 51 / 0.08); }

.strip { border-block: 1px solid var(--line); background: var(--surface); }
.strip-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s6) var(--s5);
  display: flex; align-items: center; justify-content: center; gap: var(--s4); flex-wrap: wrap; }
.step { text-align: center; max-width: 220px; }
.step-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--seal-wash); color: var(--seal); margin-bottom: var(--s2); }
.step h3 { margin-bottom: 4px; }
.step p { color: var(--ink-soft); font-size: var(--t-sm); margin: 0; }
.step-arrow { color: var(--line); transform: rotate(90deg); }

.coverage { background: var(--ink); color: #E9EDEA; }
.coverage-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s5);
  display: flex; align-items: center; gap: var(--s3); justify-content: center; text-align: center; font-size: var(--t-sm); }
.coverage b { color: #fff; font-weight: 700; }

.pricing { max-width: var(--maxw); margin-inline: auto; padding: var(--s7) var(--s5); }
.price-grid { display: flex; justify-content: center; margin-top: var(--s5); }
.price-card { padding: var(--s6); max-width: 360px; width: 100%; text-align: start; }
.price-name { color: var(--ink-soft); font-weight: 700; }
.price-amount { font-family: var(--font-display); font-size: var(--t-xl); margin: var(--s2) 0; }
.price-list { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s2); font-size: var(--t-sm); }
.price-list li { display: flex; align-items: center; gap: var(--s2); color: var(--ink); }
.price-list .lucide { color: var(--ok); }

@media (max-width: 720px) {
  .hero-inner { grid-template-columns: 1fr; padding: var(--s6) var(--s4); gap: var(--s5); }
  .hero-copy h1 { font-size: var(--t-xl); }
  .step-arrow { display: none; }
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-xs); background: var(--surface); }
.footer-inner {
  max-width: var(--maxw); margin-inline: auto; padding: var(--s5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
}
.footer-product { color: var(--ink-soft); }
.footer-meta { display: inline-flex; align-items: center; gap: var(--s2); }
.footer-brand { font-family: var(--font-display); color: var(--ink); letter-spacing: .01em; }
.footer-sep { color: var(--line); }
.footer-contact { color: var(--ink-soft); }
.footer-contact:hover { color: var(--accent-ink); text-decoration: underline; }
.disclaimer { color: var(--ink-soft); font-size: var(--t-xs); border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s5); }

/* Responsive: stack the browse table into cards on narrow screens */
@media (max-width: 600px) {
  .table-wrap { border: none; background: transparent; overflow: visible; }
  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); margin-bottom: var(--s3); padding: var(--s2) var(--s4); }
  table.data td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; }
  table.data td[data-label]::before { content: attr(data-label); color: var(--ink-soft); font-size: var(--t-xs); font-weight: 700; flex: none; }
  table.data td .t-title { white-space: normal; max-width: none; text-align: start; }
  table.data td[data-label="כותרת"] { display: block; }
  table.data td[data-label=""]::before { display: none; }
}

@media (max-width: 720px) {
  .container { padding-inline: var(--s4); padding-block: var(--s5); }
  .topbar-inner { padding: var(--s3) var(--s4); }
  .nav a { padding: var(--s2); }
  .nav a .label { display: none; }
  .nav-icon { margin: 0; }
  h1 { font-size: var(--t-lg); }
  .fitcard-head { flex-direction: row; padding: var(--s4); }
  .filterbar { position: static; }
}