/* =============================================================================
   SHADOW SEARCH — empty-state UI when a query has no matches in the current
   view but the system found the doc in the archive.
   Used by .cons__state--shadow inside the .cons__rows container.
   ============================================================================= */

/* state visibility — extends the existing state machine in console.css */
.cons[data-state="shadow"] .cons__state--shadow { display: block; }
.cons[data-state="shadow"] .cons__rows .row,
.cons[data-state="shadow"] .cons__totals,
.cons[data-state="shadow"] .cons__substrip { display: none !important; }
.cons[data-state="shadow"] .cons__head .th { color: var(--sd-ink-400); }

.cons__state--shadow {
  text-align: center;
  padding: 28px 24px 22px;
}

.cons__state--shadow .ss__hint {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  color: var(--sd-ink-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cons__state--shadow .ss__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sd-bg-soft);
  color: var(--sd-ink-500);
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cons__state--shadow .ss__icon svg { width: 22px; height: 22px; }

.cons__state--shadow .ss__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-ink-900);
  margin-bottom: 4px;
}

.cons__state--shadow .ss__body {
  font-size: 13px;
  color: var(--sd-ink-500);
  line-height: 1.55;
  margin: 0 auto 18px;
  max-width: 520px;
}
.cons__state--shadow .ss__body b {
  font-family: var(--sd-mono);
  font-size: 12px;
  color: var(--sd-ink-900);
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
}
.cons__state--shadow .ss__filter-pill {
  font-family: var(--sd-font);
  font-size: 12px;
  font-weight: 500;
  color: #8E5A14;
  background: var(--sd-amber-100);
  border: 1px solid #F2D9A6;
  padding: 1px 6px;
  border-radius: 3px;
}

/* single-match shadow card */
.cons__state--shadow .ss-card {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  margin: 0 auto 16px;
  overflow: hidden;
  text-align: left;
  transition: border-color 150ms ease;
  max-width: 560px;
}
.cons__state--shadow .ss-card:hover {
  border-color: var(--shadow-accent, var(--sd-teal-600));
}
.ss-card__side {
  background: var(--sd-bg-soft);
  border-right: 1px solid var(--sd-line-200);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 84px;
}
.ss-card__num {
  font-family: var(--sd-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--shadow-accent, var(--sd-ink-700));
  line-height: 1;
  margin-bottom: 3px;
}
.ss-card__lbl {
  font-size: 10px;
  color: var(--sd-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.2;
}
.ss-card__main {
  padding: 12px 18px 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  min-width: 320px;
}
.ss-card__ref {
  font-family: var(--sd-mono);
  font-size: 13px;
  color: var(--sd-ink-900);
  font-weight: 500;
  margin-bottom: 3px;
}
.ss-card__meta {
  font-size: 11.5px;
  color: var(--sd-ink-500);
  line-height: 1.45;
}
.ss-card__meta strong { color: var(--sd-ink-700); font-weight: 500; }
.ss-card__meta .why {
  color: #8E5A14;
  font-weight: 500;
}
.ss-card__tail {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--shadow-accent, var(--sd-teal-600));
  border-left: 1px solid var(--sd-line-200);
}
.ss-card__tail svg { width: 14px; height: 14px; }

/* multi-match stacked list */
.ss-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 auto 16px;
  max-width: 600px;
  text-align: left;
}
.ss-stack__row {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.ss-stack__row:hover {
  border-color: var(--shadow-accent, var(--sd-teal-600));
  background: #fff;
}
.ss-stack__ref {
  font-family: var(--sd-mono);
  font-size: 12.5px;
  color: var(--sd-ink-900);
  font-weight: 500;
}
.ss-stack__meta {
  font-size: 11.5px;
  color: var(--sd-ink-500);
}
.ss-stack__open {
  font-size: 11px;
  color: var(--shadow-accent, var(--sd-teal-600));
  font-family: var(--sd-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* CTAs */
.ss__cta-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.ss__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ss__cta svg { width: 13px; height: 13px; }
.ss__cta--primary {
  background: var(--shadow-accent, var(--sd-navy-900));
  color: #fff;
  border-color: var(--shadow-accent, var(--sd-navy-900));
}
.ss__cta--ghost {
  background: #fff;
  color: var(--sd-ink-700);
  border-color: var(--sd-line-300);
}
.ss__cta--ghost:hover { border-color: var(--sd-ink-400); }

/* module-scoped accents */
[data-module="invoice"] .cons__state--shadow { --shadow-accent: var(--sd-navy-900); }
[data-module="invoice"] .cons__state--shadow .ss-card__side { background: #EEF1F8; }
[data-module="po"]      .cons__state--shadow { --shadow-accent: var(--sd-blue-600); }
[data-module="po"]      .cons__state--shadow .ss-card__side { background: var(--sd-blue-050); }
[data-module="grn"]     .cons__state--shadow { --shadow-accent: var(--sd-teal-600); }
[data-module="grn"]     .cons__state--shadow .ss-card__side { background: var(--sd-teal-050); }
[data-module="disc"]    .cons__state--shadow { --shadow-accent: var(--sd-amber-text); }
[data-module="disc"]    .cons__state--shadow .ss-card__side { background: #FEF6E7; }

/* gone variant — no archive match either */
.cons__state--shadow.is-gone .ss__icon {
  background: var(--sd-red-100);
  color: var(--sd-red-600);
}

/* the visual "you're in a search state" hint on the search input
   (already styled via .cons__search:focus-within in console.css if present;
   this is a defensive fallback) */
.cons__search.has-query input {
  color: var(--sd-ink-900);
  font-family: var(--sd-mono);
}
.cons__search-clear {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sd-bg-soft);
  color: var(--sd-ink-500);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.cons__search-clear svg { width: 10px; height: 10px; }
.cons__search.has-query .cons__search-clear { display: inline-flex; }
.cons__search.has-query .cons__search-kbd { display: none; }