/*
 * HAON Leads — enterprise ergonomic polish
 * Staging-only additive layer. No DOM hooks or application behavior changed.
 * Rollback: remove this file and its <link> from index.html.
 */

:root {
  --hl-bg: #f3f6f8;
  --hl-surface: #ffffff;
  --hl-surface-soft: #f7f9fb;
  --hl-border: #d8e0e7;
  --hl-border-strong: #b9c5d0;
  --hl-text: #132238;
  --hl-muted: #526278;
  --hl-blue: #245cc7;
  --hl-blue-soft: #eaf1ff;
  --hl-green: #15744d;
  --hl-green-soft: #e9f6ef;
  --hl-amber: #a8620a;
  --hl-amber-soft: #fff4df;
  --hl-red: #b73c37;
  --hl-red-soft: #fff0ef;
  --hl-shadow: 0 1px 2px rgba(20, 36, 56, .05), 0 8px 24px rgba(20, 36, 56, .06);
  --hl-shadow-raised: 0 2px 5px rgba(20, 36, 56, .08), 0 14px 34px rgba(20, 36, 56, .09);
  --hl-radius: 14px;
  --hl-control: 42px;
}

[data-theme="dark"],
[data-theme="stone-dark"] {
  --hl-bg: #08111d;
  --hl-surface: #101c29;
  --hl-surface-soft: #142231;
  --hl-border: #2b3b4c;
  --hl-border-strong: #405469;
  --hl-text: #edf4fb;
  --hl-muted: #aebbc9;
  --hl-blue: #83adff;
  --hl-blue-soft: rgba(70, 119, 211, .18);
  --hl-green: #72d5a9;
  --hl-green-soft: rgba(37, 139, 92, .18);
  --hl-amber: #f3bd67;
  --hl-amber-soft: rgba(178, 113, 21, .18);
  --hl-red: #ff9e99;
  --hl-red-soft: rgba(183, 60, 55, .17);
  --hl-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 30px rgba(0, 0, 0, .22);
  --hl-shadow-raised: 0 3px 7px rgba(0, 0, 0, .28), 0 18px 42px rgba(0, 0, 0, .28);
}

/* Calm, legible operating surface. */
#appContainer {
  grid-template-columns:
    clamp(290px, 17.5vw, 350px)
    minmax(680px, 1fr)
    clamp(330px, 21vw, 420px);
  grid-template-rows: minmax(72px, auto) minmax(0, 1fr) 28px;
  gap: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(36, 92, 199, .035), transparent 160px),
    var(--hl-bg) !important;
  color: var(--hl-text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#appContainer .panel,
#appContainer .topbar {
  background: var(--hl-surface) !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-radius) !important;
  box-shadow: var(--hl-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#appContainer .topbar::before {
  display: none;
}

#appContainer .left,
#appContainer .center,
#appContainer .right {
  gap: 12px;
}

#appContainer .panel.pad {
  padding: 16px;
}

#appContainer .panel-title {
  min-height: 28px;
  margin-bottom: 13px;
}

#appContainer .panel-title h2,
#appContainer .panel h2 {
  color: var(--hl-text);
  font-size: 15.5px;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: -.012em;
}

/* Header: clear product identity, then primary workflows, then utilities. */
#appContainer .topbar {
  min-height: 72px;
  padding: 11px 14px;
  gap: 12px 18px;
}

#appContainer .topbar .brand {
  flex: 0 0 auto;
  min-width: 222px;
  gap: 11px;
}

#appContainer .topbar .logo {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 5px 16px rgba(36, 92, 199, .19) !important;
}

#appContainer .topbar .brand small,
#appContainer .mission small {
  color: var(--hl-muted);
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .16em;
}

#appContainer .topbar .brand h1 {
  color: var(--hl-text);
  font-size: 20px;
  font-weight: 780;
  letter-spacing: -.025em;
}

#appContainer .mission {
  flex: 1 1 280px;
}

#appContainer .mission strong {
  color: var(--hl-muted);
  font-size: 12.5px;
  font-weight: 630;
}

#appContainer .top-actions {
  flex: 0 1 auto;
  gap: 7px;
}

#appContainer .top-actions > .pill {
  min-height: var(--hl-control);
  padding: 8px 12px;
  border-radius: 11px;
  border-color: var(--hl-border) !important;
  background: var(--hl-surface-soft) !important;
  box-shadow: none !important;
  color: var(--hl-text) !important;
  font-size: 13px;
  font-weight: 690;
}

#appContainer .top-actions > .pill:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--hl-surface) !important;
  border-color: var(--hl-border-strong) !important;
  box-shadow: 0 5px 14px rgba(20, 36, 56, .09) !important;
}

#appContainer .top-actions > .pill.active {
  background: var(--hl-green) !important;
  border-color: var(--hl-green) !important;
  color: #fff !important;
}

#appContainer .top-actions > #btnSair.orange {
  background: var(--hl-amber-soft) !important;
  border-color: color-mix(in srgb, var(--hl-amber) 40%, var(--hl-border)) !important;
  color: var(--hl-amber) !important;
}

#appContainer .top-actions > .pill:disabled {
  opacity: .52;
  cursor: not-allowed;
}

/* Existing project icons become consistent professional icon modules. */
#appContainer .top-actions > .pill > .ops-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 7px;
  background: var(--hl-blue-soft);
  color: var(--hl-blue);
}

#appContainer .top-actions > .pill.active > .ops-icon {
  background: rgba(255, 255, 255, .17);
  color: #fff;
}

#appContainer .top-actions > #btnSair > .ops-icon {
  background: transparent;
  color: currentColor;
}

/* Form controls: minimum 42px target and stronger labels for 60+ users. */
#appContainer .field {
  margin-bottom: 10px;
}

#appContainer .field label,
#appContainer .history-quick label {
  margin-bottom: 5px;
  color: var(--hl-muted);
  font-size: 12.5px;
  font-weight: 720;
  letter-spacing: .005em;
}

#appContainer .field input,
#appContainer .field select,
#appContainer .field textarea,
#appContainer .filters select,
#appContainer .history-quick select,
#appContainer #bucketSelect {
  min-height: var(--hl-control) !important;
  padding: 8px 11px !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: 10px !important;
  background: var(--hl-surface) !important;
  color: var(--hl-text) !important;
  font-size: 13.5px !important;
  box-shadow: inset 0 1px 1px rgba(20, 36, 56, .025);
}

#appContainer .field input::placeholder,
#appContainer .field textarea::placeholder {
  color: color-mix(in srgb, var(--hl-muted) 78%, transparent);
}

#appContainer .field input:focus,
#appContainer .field select:focus,
#appContainer .field textarea:focus,
#appContainer .filters select:focus,
#appContainer .history-quick select:focus,
#appContainer #bucketSelect:focus {
  outline: 3px solid color-mix(in srgb, var(--hl-blue) 20%, transparent) !important;
  outline-offset: 1px;
  border-color: var(--hl-blue) !important;
}

#appContainer .btn,
#appContainer .pill,
#appContainer .view-toggle button,
#appContainer .right-tab,
#appContainer .act-btn {
  min-height: var(--hl-control);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 690;
}

#appContainer .btn:focus-visible,
#appContainer .pill:focus-visible,
#appContainer .view-toggle button:focus-visible,
#appContainer .right-tab:focus-visible,
#appContainer .act-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hl-blue) 32%, transparent) !important;
  outline-offset: 2px;
}

#appContainer #sbnToggle {
  gap: 6px !important;
  margin: 3px 0 8px !important;
}

#appContainer #sbnToggle > button {
  min-height: 34px;
  padding: 7px 8px !important;
  border-color: var(--hl-border) !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

#appContainer .type-hint,
#appContainer .selection-summary,
#appContainer #resultsMeta {
  color: var(--hl-muted) !important;
  font-size: 12px !important;
  line-height: 1.45;
}

/* KPIs read as a single executive strip instead of six decorative cards. */
#appContainer #scopeKpiPanel {
  padding: 12px 14px;
}

#appContainer .kpis {
  gap: 8px;
}

#appContainer .kpi {
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--hl-border);
  border-radius: 10px;
  background: var(--hl-surface-soft) !important;
  box-shadow: none;
}

#appContainer .kpi span {
  color: var(--hl-muted);
  font-size: 11.5px;
  font-weight: 690;
  letter-spacing: .015em;
}

#appContainer .kpi strong {
  color: var(--hl-blue);
  font-size: clamp(22px, 1.5vw, 28px);
  font-weight: 760;
  letter-spacing: -.035em;
}

#appContainer .kpi.green strong { color: var(--hl-green); }
#appContainer .kpi.orange strong { color: var(--hl-amber); }

/* Filters group by purpose, with consistent semantic icon treatment. */
#appContainer #scopeFilterPanel {
  padding: 10px 12px;
}

#appContainer #scopeFilterPanel .filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) repeat(6, auto);
  gap: 7px;
  align-items: center;
}

#appContainer #scopeFilterPanel .filters > .btn {
  min-width: 0;
  min-height: var(--hl-control);
  padding: 8px 10px;
  border: 1px solid var(--hl-border);
  background: var(--hl-surface);
  color: var(--hl-text);
  box-shadow: none;
}

#appContainer #scopeFilterPanel .filters > .btn > .ops-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--hl-blue);
}

#appContainer #scopeFilterPanel .filters > .btn.orange {
  background: var(--hl-amber-soft);
  border-color: color-mix(in srgb, var(--hl-amber) 35%, var(--hl-border));
  color: var(--hl-amber);
}

#appContainer #scopeFilterPanel .filters > .btn.active {
  background: var(--hl-blue) !important;
  border-color: var(--hl-blue) !important;
  color: #fff !important;
}

#appContainer #scopeFilterPanel .filters > .btn.active > .ops-icon {
  color: #fff;
}

/* Map/results establish a stable scan path: heading, map, opportunities. */
#appContainer .results-panel .results-head {
  min-height: 64px;
  padding: 12px 15px;
  gap: 12px;
  border-bottom: 1px solid var(--hl-border);
  background: var(--hl-surface) !important;
}

#appContainer .results-head strong {
  color: var(--hl-text);
  font-size: 15px;
  font-weight: 760;
}

#appContainer .view-toggle {
  border: 1px solid var(--hl-border);
  border-radius: 10px;
  background: var(--hl-surface-soft);
  padding: 3px;
}

#appContainer .view-toggle button {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 7px;
  color: var(--hl-muted);
}

#appContainer .view-toggle button.active {
  background: var(--hl-surface);
  color: var(--hl-blue);
  box-shadow: 0 1px 4px rgba(20, 36, 56, .12);
}

#appContainer .results {
  padding: 12px;
}

#appContainer .map-stage {
  border-radius: 12px !important;
  border: 1px solid var(--hl-border) !important;
  box-shadow: none !important;
}

#appContainer .cards {
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

#appContainer .result-item,
#appContainer .lead-card {
  padding: 15px !important;
  gap: 9px !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: 12px !important;
  background: var(--hl-surface) !important;
  box-shadow: 0 1px 3px rgba(20, 36, 56, .05) !important;
}

#appContainer .result-item:hover,
#appContainer .lead-card:hover {
  transform: translateY(-1px);
  border-color: var(--hl-border-strong) !important;
  box-shadow: var(--hl-shadow-raised) !important;
}

#appContainer .result-item.selected,
#appContainer .lead-card.selected {
  border-color: var(--hl-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl-blue) 16%, transparent) !important;
}

#appContainer .result-item h3,
#appContainer .lead-card h3 {
  color: var(--hl-text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.32;
}

#appContainer .result-item .result-meta,
#appContainer .lead-card p {
  color: var(--hl-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

#appContainer .act-btn,
#appContainer .result-links a {
  min-height: 36px;
  padding: 8px 11px;
  border-color: var(--hl-border);
  background: var(--hl-surface-soft);
  box-shadow: none;
  font-size: 12px;
}

#appContainer .act-btn:hover svg,
#appContainer .result-links a:hover svg {
  animation: none !important;
}

/* Right column: selected company remains readable before action buttons. */
#appContainer .right-card.client-box,
#appContainer .right > .panel {
  border-radius: var(--hl-radius) !important;
}

#appContainer .client-box #clientName {
  color: var(--hl-text);
  font-size: 18px;
  font-weight: 760;
}

#appContainer .client-box #clientSub {
  color: var(--hl-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

#appContainer .score-row {
  gap: 8px;
}

#appContainer .mini-score {
  min-height: 64px;
  border: 1px solid var(--hl-border);
  border-radius: 10px;
  background: var(--hl-surface-soft);
}

#appContainer .mini-score span {
  color: var(--hl-muted);
  font-size: 10.5px;
}

#appContainer .mini-score strong {
  color: var(--hl-text);
  font-size: 18px;
}

#appContainer .right-tabs {
  gap: 5px;
  padding: 5px;
  border-bottom: 1px solid var(--hl-border);
  background: var(--hl-surface-soft);
}

#appContainer .right-tab {
  min-height: 40px;
  border-radius: 9px;
}

#appContainer .right-tab.active {
  background: var(--hl-surface);
  color: var(--hl-green);
  box-shadow: 0 1px 5px rgba(20, 36, 56, .1);
}

/* Scrollbars: visible enough to discover, quiet enough not to distract. */
#appContainer * {
  scrollbar-width: thin;
  scrollbar-color: var(--hl-border-strong) transparent;
}

#appContainer *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#appContainer *::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--hl-border-strong);
  background-clip: padding-box;
}

#appContainer *::-webkit-scrollbar-track {
  background: transparent;
}

/* Dark themes keep the same information architecture. */
[data-theme="dark"] #appContainer,
[data-theme="stone-dark"] #appContainer {
  background:
    linear-gradient(180deg, rgba(80, 135, 239, .055), transparent 180px),
    var(--hl-bg) !important;
}

[data-theme="dark"] #appContainer .top-actions > .pill.active,
[data-theme="stone-dark"] #appContainer .top-actions > .pill.active {
  color: #07161f !important;
}

/* Responsive desktop/tablet: preserve the same order without horizontal scroll. */
@media (max-width: 1500px) and (min-width: 1181px) {
  #appContainer {
    grid-template-columns: 280px minmax(600px, 1fr) 310px;
    grid-template-rows: minmax(116px, auto) minmax(0, 1fr) 28px;
  }

  #appContainer .mission {
    display: none;
  }

  #appContainer .top-actions {
    max-width: calc(100% - 250px);
  }

  #appContainer #scopeFilterPanel .filters {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  }
}

@media (max-width: 1180px) {
  #appContainer {
    height: auto;
    min-height: 100vh;
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    overflow: visible;
  }

  #appContainer .topbar {
    grid-column: 1 / -1;
  }

  #appContainer .left {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  #appContainer .center {
    grid-column: 2;
    grid-row: 2;
  }

  #appContainer .right {
    grid-column: 2;
    grid-row: 3;
  }

  #appContainer .left,
  #appContainer .center,
  #appContainer .right {
    display: grid;
  }

  #appContainer #scopeFilterPanel .filters {
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  }
}

@media (max-width: 820px) {
  #appContainer,
  #appContainer.app {
    padding: 8px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  #appContainer .topbar,
  #appContainer .left,
  #appContainer .center,
  #appContainer .right,
  #appContainer .footer {
    width: 100%;
    margin-bottom: 10px;
  }

  #appContainer .topbar {
    min-height: 64px;
    padding: 10px 12px;
  }

  #appContainer .topbar .brand {
    min-width: 0;
  }

  #appContainer .panel.pad {
    padding: 14px;
  }

  #appContainer #scopeFilterPanel .filters {
    grid-template-columns: 1fr 1fr;
  }

  #appContainer .kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  #appContainer .results-head {
    align-items: stretch;
  }
}

@media (max-width: 520px) {
  :root {
    --hl-control: 44px;
  }

  #appContainer {
    font-size: 14px;
  }

  #appContainer .topbar .logo {
    width: 40px;
    height: 40px;
  }

  #appContainer .topbar .brand small {
    display: none;
  }

  #appContainer #scopeFilterPanel .filters,
  #appContainer .kpis {
    grid-template-columns: 1fr;
  }

  #appContainer .cards {
    grid-template-columns: 1fr;
  }

  #appContainer .results {
    padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appContainer *,
  #appContainer *::before,
  #appContainer *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  #appContainer .panel,
  #appContainer .topbar,
  #appContainer .btn,
  #appContainer .pill,
  #appContainer .field input,
  #appContainer .field select {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
}


/* Official HAON mark in the operational header; replaces the generic placeholder glyph. */
#appContainer .ops-logo .ops-brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}