@layer legacy, od-layout;
@layer legacy{
/* Innovadata Portal — design system (matches innovadata.eu + Outreach app).
   Slate canvas, indigo primary, Inter UI. Roboto loaded only for the
   brand-compliant Google button. */
:root {
  /* surfaces */
  --bg: var(--selection);
  --surface: var(--surface);
  --surface-2: var(--selection);
  --surface-hover: var(--selection);
  --border: var(--border);
  --border-strong: var(--border);
  /* text */
  --text: var(--carbon);
  --text-2: var(--muted);
  --text-3: var(--muted); /* slate-500, ~4.6:1 on white — meets WCAG AA for muted/secondary text */
  /* brand */
  --primary: var(--carbon);
  --primary-hover: var(--carbon);
  --primary-tint: rgba(79,70,229,0.08);
  --primary-ring: rgba(79,70,229,0.35);
  /* semantic */
  --success: #059669; --success-bg: rgba(5,150,105,0.10);
  --error: #DC2626;   --error-bg: rgba(220,38,38,0.09);
  --warning: #D97706; --warning-bg: rgba(217,119,6,0.12);
  /* spacing (4/8 scale) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  /* radii */
  --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  /* shadows (soft) */
  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh: 0 4px 12px rgba(15,23,46,.06);
  --sh-lg: 0 12px 32px rgba(15,23,46,.10);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar-w: 248px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font); color: var(--text); background: var(--bg);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible { outline: none; } /* inputs get the box-shadow ring below */

/* ─────────────── Auth (login / register / invite) ─────────────── */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--s6);
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(79,70,229,.06), transparent 70%), var(--bg); }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow:none; padding: 28px;
}
.auth-logo { height: 28px; margin-bottom: var(--s4); }
.auth-card h1 { font-size: 20px; font-weight:500; letter-spacing: -0.01em; }
.auth-card .sub { color: var(--text-2); font-size: 14px; margin: 6px 0 var(--s6); }

.tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px;
  border-radius: var(--r-pill); margin-bottom: var(--s6); }
.tabs button { flex: 1; border: 0; background: transparent; padding: 9px 12px; cursor: pointer;
  border-radius: var(--r-pill); font: 600 13.5px var(--font); color: var(--text-2); }
.tabs button.active { background: var(--surface); color: var(--primary); box-shadow:none; }

label { display: block; font-size: 13px; font-weight:500; color: var(--text-2);
  margin: var(--s4) 0 6px; }
input, select {
  width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--border);
  border-radius: var(--r-sm); font: 400 14px var(--font); background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--text-3); }
input:hover, select:hover { border-color: var(--border-strong); }
input:focus, select:focus { border-color: var(--primary); box-shadow:none; }
input[readonly] { background: var(--surface-2); color: var(--text-2); }
/* radios/checkboxes must not inherit the 100%-wide 44px text-input box */
input[type=radio], input[type=checkbox] {
  width: 16px; height: 16px; padding: 0; margin: 0; flex: 0 0 auto;
  accent-color: var(--primary);
}
input[type=radio]:focus, input[type=checkbox]:focus { box-shadow:none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-sm);
  background: var(--primary); color: var(--surface); font: 600 14.5px var(--font); cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .05s; margin-top: var(--s5); }
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { box-shadow:none; }
.spinner { display:inline-block; width:15px; height:15px; border:2px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:iv-spin .6s linear infinite; vertical-align:middle; }
@keyframes iv-spin { to { transform: rotate(360deg); } }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--surface-2); }
/* anchor-buttons: keep button text colour on hover (override the global a:hover) */
a.btn, a.btn:hover, a.btn:focus { color: var(--surface); }
a.btn.secondary, a.btn.secondary:hover, a.btn.secondary:focus { color: var(--text); }
.btn.danger { background: var(--error); }
.btn.sm { width: auto; height: 36px; margin: 0; padding: 0 13px; font-size: 13px; }

/* social buttons — brand-compliant (Google Identity / Microsoft Entra) */
.social { display: grid; gap: 10px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface); transition: box-shadow .15s, background .15s; }
.btn-social svg { width: 18px; height: 18px; flex: none; }
.btn-social:hover { box-shadow:none; }
.btn-social:active { transform: translateY(1px); }
.btn-google   { border: 1px solid #747775; color: #1F1F1F; font: 500 14px 'Roboto', var(--font); }
.btn-google:hover { background: #F7F8F8; }
.btn-microsoft{ border: 1px solid #8C8C8C; color: #5E5E5E; font: 600 14px 'Segoe UI', var(--font); }
.btn-microsoft:hover { background: #F7F8F8; }
.btn-facebook { border: 1px solid #d0d7de; color: #1c1e21; font: 600 14px var(--font); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3);
  font-size: 12px; margin: var(--s5) 0; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background: var(--border); }

.msg { margin-top: var(--s4); padding: 10px 13px; border-radius: var(--r-sm); font-size: 13.5px;
  display: none; align-items: center; gap: 8px; }
.msg.show { display: flex; }
.msg.ok  { background: var(--success-bg); color: var(--success); }
.msg.err { background: var(--error-bg); color: var(--error); }
.muted { color: var(--text-3); font-size: 12.5px; }
.link-btn { background: none; border: 0; color: var(--primary); cursor: pointer; font: 600 13px var(--font); padding: 0; }
.center-row { text-align: center; margin-top: var(--s4); }

/* ─────────────── App shell (dashboard / admin) ─────────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--s5) var(--s4); position: sticky; top: 0; height: 100dvh; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px var(--s5); }
.sidebar .brand img { height: 26px; }
.nav-label { font-size: 11px; font-weight:500; letter-spacing:normal; text-transform:none;
  color: var(--text-3); padding: var(--s4) 10px var(--s2); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight:500; font-size: 13.5px; cursor: pointer; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--primary-tint); color: var(--primary);
  box-shadow:none; }
.nav a svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.sidebar .spacer { flex: 1; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface-2); }
.user-card .avatar { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--primary);
  color: var(--surface); display: grid; place-items: center; font-weight:500; font-size: 13px; flex: none; }
.user-card .who { min-width: 0; }
.user-card .who b { display: block; font-size: 13px; font-weight:500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .who span { font-size: 11.5px; color: var(--text-3); }
.user-card--btn { cursor: pointer; transition: border-color .15s, background .15s; }
.user-card--btn:hover { border-color: var(--border-strong); background: var(--surface); }

/* user-icon dropdown menu */
.user-menu { position: fixed; z-index: 100; display: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow:none;
  padding: 6px; min-width: 210px; }
.user-menu.show { display: block; }
.user-menu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-menu__head b { display: block; font-size: 13px; font-weight:500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.user-menu__head span { font-size: 11.5px; color: var(--text-3); text-transform: capitalize; }
.user-menu__item { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 10px; border-radius: 8px; font: 600 13px var(--font); color: var(--text-2); cursor: pointer; text-decoration: none; }
.user-menu__item:hover { background: var(--surface-2); color: var(--text); }
.user-menu__item.warn { color: var(--warning); }
.user-menu__item.warn:hover { background: var(--warning-bg); }
.user-menu__sep { height: 1px; background: var(--border); margin: 4px 0; }

/* incomplete-registration CTA banner */
.cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--warning-bg); border: 1px solid rgba(217,119,6,.28); border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.cta-banner b { color: var(--warning); display: block; margin-bottom: 2px; }
.cta-banner .btn { width: auto; margin: 0; flex: none; }

.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: var(--s4); padding: var(--s6) var(--s8);
  border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-size: 19px; font-weight:500; letter-spacing: -0.01em; }
.topbar .sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.topbar .spacer { flex: 1; }
.content { padding: var(--s8); max-width: 1180px; }
.section-title { font-size: 12px; font-weight:500; letter-spacing:normal; text-transform:none;
  color: var(--text-3); margin: var(--s8) 0 var(--s3); }
.section-title:first-child { margin-top: 0; }

.grid { display: grid; gap: var(--s4); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px){ .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; } }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow:none; }
.stat .label { font-size: 11px; font-weight:500; letter-spacing:normal; text-transform:none; color: var(--text-3); }
.stat .num { font-size: 30px; font-weight:500; letter-spacing: -0.02em; color: var(--text); margin-top: 6px; line-height: 1; }
.stat .num.indigo { color: var(--primary); }
.stat .hint { font-size: 12px; color: var(--text-2); margin-top: 6px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; text-transform:none; letter-spacing:normal;
  color: var(--text-3); font-weight:500; padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-hover); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight:500; line-height: 1.4; }
.badge.active   { background: var(--success-bg); color: var(--success); }
.badge.pending,.badge.invited { background: var(--warning-bg); color: var(--warning); }
.badge.disabled { background: var(--error-bg); color: var(--error); }
.badge.role { background: var(--primary-tint); color: var(--primary); }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: var(--s4); flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; height: 38px; }

/* sortable column headers (admin Accounts table) */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .35; vertical-align: middle; }
th.sortable:not(.sorted)::after { border-top: 5px solid currentColor; border-bottom: 0; }
th.sortable.sorted { color: var(--primary); }
th.sortable.sorted::after { opacity: 1; }
th.sortable.sorted[data-order="desc"]::after { border-top: 5px solid currentColor; border-bottom: 0; }
th.sortable.sorted[data-order="asc"]::after { border-bottom: 5px solid currentColor; border-top: 0; }

/* key/value detail table (user profile in admin modal) */
table.kv { width: 100%; border-collapse: collapse; }
table.kv td { padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: top; }
table.kv tr:last-child td { border-bottom: none; }

/* destructive action footer */
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: var(--s5); padding: 14px 16px; border: 1px solid var(--error);
  border-radius: var(--r-lg); background: var(--error-bg); }
.danger-zone .muted { color: var(--text-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
code.key { background: var(--surface-2); padding: 4px 8px; border-radius: 6px;
  font: 12.5px ui-monospace, 'JetBrains Mono', monospace; color: var(--text); word-break: break-all; }

/* modal */
.modal-bg { display:none; position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 50; padding: var(--s6); overflow: auto; }
/* While a modal is open, keep the cookie banner / floating button (z-index ~9999)
   from covering the modal's Pay / Start-monitoring button. openModal() adds this
   class; closeModal() removes it once no modal remains open. */
body.modal-open .cc-banner, body.modal-open .cc-float { display: none !important; }
.modal-bg.show { display: block; }
.modal { width: 100%; max-width: 680px; margin: var(--s8) auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow:none; padding: var(--s6);
  /* Never exceed the viewport: scroll inside the modal when content is tall
     (e.g. the monitor trigger grid with expanded threshold panels). */
  max-height: calc(100dvh - 2 * var(--s8)); overflow-y: auto; }
@media (max-width: 640px) { .modal { max-height: calc(100dvh - 2 * var(--s4)); } }

/* ─────────────── Top navigation (shared app chrome) ─────────────── */
.topnav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s5);
  height: 60px; padding: 0 var(--s6); background: var(--surface);
  border-bottom: 1px solid var(--border); box-shadow:none; }
.topnav__brand { display: flex; align-items: center; flex: none; }
.topnav__brand img { height: 24px; display: block; }
.topnav__links { display: flex; align-items: stretch; gap: 2px; height: 100%; flex: 1; }
.topnav__links a { position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; font: 600 14px var(--font); color: var(--text-2); text-decoration: none;
  transition: color .15s; }
.topnav__links a:hover { color: var(--text); }
.topnav__links a.active { color: var(--primary); }
.topnav__links a.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 3px; background: var(--primary); border-radius: 3px 3px 0 0; }
.topnav__links a svg { width: 16px; height: 16px; flex: none; }
.topnav__right { display: flex; align-items: center; gap: 12px; flex: none; }

/* compact user trigger lives in the top bar */
.topnav .user-card { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  cursor: pointer; transition: background .15s, border-color .15s; }
.topnav .user-card:hover { background: var(--surface-2); border-color: var(--border-strong); }
.topnav .user-card .avatar { width: 28px; height: 28px; font-size: 12px; }
.topnav .user-card .who-name { font: 600 13px var(--font); color: var(--text); max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topnav .user-card .chev { width: 14px; height: 14px; color: var(--text-3); flex: none; }

.page { min-height: calc(100dvh - 61px); }
.page-content { padding: var(--s8); max-width: 1180px; margin: 0 auto; }
.page-content.wide { max-width: 1320px; }
.page-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); }
.page-head h1 { font-size: 22px; font-weight:500; letter-spacing: -0.01em; }
.page-head .sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.page-head .spacer { flex: 1; }

@media (max-width: 760px) {
  /* Two-row top bar: [brand · balance · avatar] on row 1, nav tabs on row 2.
     The nav MUST sit on its own line — base `.topnav__links{flex:1}` sets
     flex-basis:0% which makes `width:100%` a no-op, so the links used to
     collide with the right-side controls and scroll off-screen. `flex:0 0 100%`
     forces a real full-width wrap. */
  .topnav { height: auto; flex-wrap: wrap; padding: 8px var(--s4); gap: 8px; row-gap: 0; }
  .topnav__brand { order: 1; flex: 0 0 auto; }
  .topnav__brand img { height: 22px; }
  .topnav__right { order: 2; margin-left: auto; flex: 0 0 auto; gap: 8px; }
  .topnav__links { order: 3; flex: 0 0 100%; width: 100%; margin-top: 8px; height: 46px;
    gap: 0; border-top: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .topnav__links::-webkit-scrollbar { display: none; }
  .topnav__links a { flex: 0 0 auto; padding: 0 13px; white-space: nowrap; font-size: 13.5px; }
  .topnav__links a svg { width: 15px; height: 15px; }
  .topnav__links a.active::after { left: 13px; right: 13px; }
  .topnav .user-card { padding: 4px 6px; }
  .topnav .user-card .who-name { display: none; }
  .topnav .bal-pill { padding: 6px 10px; }
  .page-content { padding: var(--s5) var(--s4); }
  .page-head h1 { font-size: 20px; }
  /* 16px stops iOS Safari from zooming the page on focus */
  input, select, textarea { font-size: 16px; }
  /* Data tables: scroll horizontally inside their card instead of crushing
     columns into unreadable wrapped text. min-width keeps columns legible;
     the .panel/.results-wrap scroll container carries the overflow. */
  .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel > table, .results-wrap > table, .panel table.runs-table { min-width: 480px; }
  .panel th, .panel td, .results-wrap th, .results-wrap td { white-space: nowrap; }
  /* toolbars (search + filter rows above tables) wrap and go full width */
  .toolbar { gap: 8px; }
  .toolbar input, .toolbar select { flex: 1 1 auto; min-width: 0; }
}

/* ─────────────── Search page ─────────────── */
.search-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--s5); align-items: start; }
/* grid children must be allowed to shrink, or a wide results table drags the
   whole page wider than the viewport (min-width:auto is the grid default) */
.search-grid > * { min-width: 0; }
@media (max-width: 940px){ .search-grid { grid-template-columns: 1fr; } }
.filter-field { margin-bottom: var(--s4); }
.filter-field > label:first-child { margin-top: 0; }
/* country picker — click a flag (replaces the <select>) */
.country-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.country-opt { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  cursor: pointer; font: 600 13px var(--font); color: var(--text-2); transition: border-color .12s, background .12s, color .12s; }
.country-opt:hover { border-color: var(--border-strong); color: var(--text); }
.country-opt.active { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }
.country-opt .flag { width: 22px; height: 15px; border-radius: 2px; flex: none; overflow: hidden;
  box-shadow:none; }
.country-opt .flag svg { display: block; width: 100%; height: 100%; }

/* EMTAK/NACE/EHAK tree picker — same UX as innovadata.eu */
.industry-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; max-height: 80px;
  overflow-y: auto; scrollbar-width: thin; }
.industry-tags:empty { display: none; }
.industry-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
  background: var(--primary-tint); color: var(--primary); font-size: 11.5px; font-weight:500;
  border: 1px solid var(--primary-ring); line-height: 1.5; }
.industry-tag b { font-weight:500; }
.industry-tag .remove { cursor: pointer; font-size: 14px; line-height: 1; color: var(--text-3); margin-left: 2px; }
.industry-tag .remove:hover { color: var(--error); }
.industry-picker { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.industry-picker__search { width: 100%; height: auto; border: none; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: 9px 12px; font-size: 13px; background: transparent; box-shadow:none; }
.industry-picker__search:focus { border-bottom-color: var(--primary); box-shadow:none; }
.industry-tree-wrap { position: relative; max-height: 300px; overflow-y: auto; padding: 4px 0; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 22px), rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 22px), rgba(0,0,0,.25) 100%); }
.industry-tree-wrap.at-end { -webkit-mask-image: none; mask-image: none; }
.industry-tree { font-size: 13px; }
.industry-tree ul { list-style: none; margin: 0; padding: 0 0 0 18px; }
.industry-tree > ul { padding-left: 6px; }
.industry-tree li.hidden { display: none; }
.industry-tree .node-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px;
  cursor: pointer; user-select: none; transition: background .12s; }
.industry-tree .node-row:hover { background: var(--surface-2); }
.industry-tree .toggle { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--text-3); flex: none; transition: transform .12s; }
.industry-tree .toggle.expanded { transform: rotate(90deg); }
.industry-tree .toggle.leaf { visibility: hidden; }
.industry-tree .node-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.industry-tree .node-kood { font-weight:500; color: var(--primary); margin-right: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.industry-tree .node-text { color: var(--text-2); }
.industry-tree input[type=checkbox] { width: 14px; height: 14px; margin: 0; flex: none;
  accent-color: var(--primary); cursor: pointer; }
.industry-tree .highlight { background: var(--primary-tint); color: var(--primary); border-radius: 2px; }

/* ─── Mobile: the company-selection tree is the core flow — make it tappable
   and readable (desktop density is unusable on a phone) ─── */
@media (max-width: 760px) {
  .search-grid { gap: var(--s4); }
  .industry-tree { font-size: 15px; }
  .industry-tree-wrap { max-height: 60vh;
    -webkit-mask-image: none; mask-image: none; }
  .industry-tree ul { padding-left: 14px; }
  .industry-tree .node-row { padding: 10px 8px; gap: 11px; align-items: flex-start; }
  .industry-tree .node-label { white-space: normal; overflow: visible;
    text-overflow: clip; line-height: 1.35; padding-top: 1px; }
  .industry-tree .node-kood { font-size: 13px; }
  .industry-tree input[type=checkbox] { width: 22px; height: 22px; margin-top: 1px; }
  .industry-tree .toggle { width: 28px; height: 28px; font-size: 12px; margin: -4px -4px -4px 0; }
  .industry-picker__search { font-size: 16px; padding: 12px 14px; }
  .industry-tags { max-height: 130px; }
  .industry-tag { font-size: 13px; padding: 4px 10px; }
  .industry-tag .remove { font-size: 17px; padding: 0 2px; }
  .country-opt { padding: 9px 14px 9px 9px; font-size: 15px; }
  .country-opt .flag { width: 26px; height: 18px; }
  .chip { padding: 8px 13px; font-size: 14px; }
  .range-row { flex-wrap: wrap; }
}
.range-row { display: flex; gap: 8px; align-items: center; }
.range-row input { width: 100%; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip { display: inline-flex; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: 12px; cursor: pointer; background: var(--surface); color: var(--text-2); }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 68px; z-index: 4; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow:none; margin-bottom: var(--s4); }
@media (max-width: 940px){ .cta-bar { position: static; } }
.cta-bar .btn { width: auto; margin: 0; min-width: 230px; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: var(--s4); }
.results-wrap { overflow-x: auto; }
.results-wrap table { font-variant-numeric: tabular-nums; }
.filter-panel { position: sticky; top: 76px; align-self: start; }
.results-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 56px 20px; text-align: center; color: var(--text-3); }
.results-empty svg { width: 40px; height: 40px; color: var(--border-strong); }
.results-empty div { font-size: 14px; max-width: 320px; }

/* custom checkbox (replaces native form look) */
.chk { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 0;
  border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); cursor: pointer;
  position: relative; transition: background .12s, border-color .12s; }
.chk:hover { border-color: var(--primary); }
.chk:checked { background: var(--primary); border-color: var(--primary); }
.chk:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk:focus-visible { outline: none; box-shadow:none; }

/* checkbox list for multi-value filters (SE size bands, legal forms) */
.chk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px 10px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.chk-list__item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; cursor: pointer; font-size: 13px;
}
.chk-list__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk-list__item:hover span { color: var(--primary); }

/* search-first picker */
.picker { position: relative; }
.picker-list { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 5px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow:none; max-height: 320px; overflow: auto; }
.picker-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; position: relative; }
.picker-list li:hover, .picker-list li.active { background: var(--primary-tint); }
.picker-list .opt-label { font-weight:500; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-right: 52px; }
.picker-list .opt-path { font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.picker-list .opt-code { position: absolute; top: 8px; right: 10px; font-size: 11px;
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.picker-list .opt-none { padding: 10px; color: var(--text-3); font-size: 13px; cursor: default; }
.browse-link { display: inline-block; margin-top: 8px; font-size: 12.5px; }
.bal-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--primary-tint); color: var(--primary); font-weight:500; font-size: 13px; }

/* mobile: collapse sidebar to top bar */
@media (max-width: 720px){
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .sidebar .brand { padding: 0 8px 0 0; }
  .nav-label, .sidebar .spacer, .sidebar .user-card { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav a.active { box-shadow:none; }
  .topbar, .content { padding: var(--s5); }
}

/* ─────────────── Portal footer (legal) ─────────────── */
.portal-footer { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s8) var(--s8);
  display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center;
  color: var(--text-3); font-size: 12.5px; }
.portal-footer a { color: var(--text-3); }
.portal-footer a:hover { color: var(--primary); }
.portal-footer .dot { opacity: .5; }
@media (max-width: 760px){ .portal-footer { padding: var(--s5); } }

/* password show/hide */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--text-3); border-radius: 6px; }
.pw-toggle:hover { color: var(--text-2); background: var(--surface-2); }
.pw-toggle svg { width: 18px; height: 18px; }

/* monitor details / runs history */
.runs-table td, .runs-table th { font-size: 13px; }
.badge.paused { background: var(--warning-bg); color: var(--warning); }
.banner-error { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--error-bg); border: 1px solid rgba(220,38,38,.25); border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.banner-error b { color: var(--error); display: block; margin-bottom: 2px; }
.banner-error .btn { width: auto; margin: 0; flex: none; }

/* inline copy button for one-time API keys */
.copy-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); border-radius: 7px; padding: 4px 10px;
  font: 600 12px var(--font); cursor: pointer; }
.copy-btn:hover { border-color: var(--primary); color: var(--primary); }

/* quick-start chips: slightly branded so they read as suggestions, not state */
.chip.qs { border-color: var(--primary-ring); color: var(--primary); background: var(--primary-tint); }
.chip.qs:hover { background: rgba(79,70,229,.15); }
/* pressed/applied state — solid brand fill so a clicked chip is unmistakably active */
.chip.sel, .chip.qs.sel { background: var(--primary); border-color: var(--primary); color: var(--surface); font-weight:500; }
.chip.sel:hover, .chip.qs.sel:hover { background: var(--primary-hover); color: var(--surface); }

/* amber expectation notes inside the monitor modal */
.hint-note { background: var(--warning-bg); color: #92400E; border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 12.5px; margin-top: 10px; line-height: 1.5; }

/* onboarding checklist (dashboard, new accounts) */
.onboard { display: flex; flex-direction: column; gap: 10px; }
.onboard .step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.onboard .step .n { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight:500; font-size: 13px; background: var(--primary-tint);
  color: var(--primary); flex: none; }
.onboard .step.done .n { background: var(--success-bg); color: var(--success); }
.onboard .step.done .t { color: var(--text-3); }
.onboard .step .t { font-weight:500; font-size: 13.5px; }
.onboard .step .d { font-size: 12.5px; color: var(--text-3); }
.onboard .step .spacer { flex: 1; }

/* modals must scroll, not clip, when taller than a phone screen */
.modal-bg { overflow-y: auto; }
.bal-pill[role="button"] { cursor: pointer; }
.bal-pill[role="button"]:hover { background: rgba(79,70,229,.14); }
@media (max-width: 760px){
  textarea { font-size: 16px; }
  .modal { margin: var(--s4) auto; }
  .modal-bg.show { padding: 0 var(--s3); }
}

/* trigger editor (monitoring page) */
.trigger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 720px){ .trigger-grid { grid-template-columns: 1fr; } }
.trigger-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-weight: 500; }
.trigger-row:hover { border-color: var(--border-strong); }
.trigger-row span { flex: 1; min-width: 0; }
.trigger-row b { display: block; font-size: 13px; }
.trigger-row small { color: var(--text-3); font-size: 11.5px; line-height: 1.4; }

/* compact trigger picker in the search-page monitor modal */
.mon-trg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.mon-trg { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: 13px; cursor: pointer; }

/* Terms & Conditions checkbox on every Pay step */
.terms-row { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 12px;
  font-size: 12.5px; color: var(--text-2); font-weight: 500; cursor: pointer; line-height: 1.5; }
.terms-row input { width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto;
  accent-color: var(--primary); cursor: pointer; }
.terms-row a { font-weight:500; }

/* Monitor signal builder — recipe cards + direction toggle + slider */
.mon-sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; align-items: start; }
/* An expanded metric tile (with a threshold panel) takes the full row so its
   segmented controls + inputs have room and never sit at a mismatched height. */
.mon-sig:has(.mon-thr) { grid-column: 1 / -1; }
@media (max-width: 560px) { .mon-sig-grid { grid-template-columns: 1fr; } }
.mon-sig { border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 10px 11px;
  cursor: pointer; transition: border-color .12s, background .12s; background: var(--surface); }
.mon-sig:hover:not(.off) { border-color: var(--border-strong); }
.mon-sig.on { border-color: var(--primary); background: var(--primary-tint); }
.mon-sig.off { opacity: .6; cursor: not-allowed; background: var(--surface-2); }
.mon-sig-h { display: flex; gap: 8px; align-items: flex-start; }
.mon-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-strong);
  flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center; color: var(--surface); font-size: 11px; background: var(--surface); }
.mon-sig.on .mon-box { background: var(--primary); border-color: var(--primary); }
.mon-sig b { font-size: 13px; }
.mon-sig small { display: block; color: var(--text-3); font-size: 11px; line-height: 1.35; margin-top: 1px; }
.mon-lock { font-size: 10.5px; color: var(--warning); font-weight:500; margin-top: 7px; }
.mon-thr { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border); cursor: default; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-2); font: 600 11.5px var(--font); padding: 4px 11px; border-radius: var(--r-pill); cursor: pointer; }
.seg button.sel { background: var(--primary); color: var(--surface); }
.slider-row { display: flex; align-items: center; gap: 11px; margin-top: 9px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--primary); }
.thrval { font-weight:500; font-size: 13px; color: var(--primary); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.readout { margin-top: 8px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
/* Slider-first (simple) trigger controls */
.mon-slwrap { display: flex; align-items: center; gap: 10px; margin: 11px 0 2px; }
.mon-sllabel { font-size: 12.5px; color: var(--text-2); flex: none; }
.mon-slider { display: flex; align-items: center; gap: 10px; flex: 1; }
.mon-slider input[type=range] { flex: 1; accent-color: var(--primary); height: 5px; cursor: pointer; }
.mon-slval { font-weight:500; color: var(--primary); font-size: 14px; min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.mon-adv { display: inline-block; margin-top: 10px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--primary); font: 600 12px var(--font); }
.mon-adv:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .mon-thr, .mon-adv { transition: none; } }
.mon-recipe { margin-top: 12px; font-size: 13.5px; line-height: 1.55; background: var(--surface-2);
  border-radius: var(--r-sm); padding: 11px 13px; color: var(--text-2); }
.mon-recipe b { color: var(--text); font-weight:500; }
/* "Only new companies" simple-mode toggle — the prospecting default; hides the
   full signal grid when ticked (see toggleNewSimple). */
.mon-simple { display: flex; gap: 11px; align-items: flex-start; margin-top: 6px;
  padding: 12px 14px; border: 1.5px solid var(--primary); border-radius: var(--r-sm);
  background: var(--primary-tint); cursor: pointer; }
.mon-simple input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--primary); cursor: pointer; }
.mon-simple b { display: block; font-size: 13.5px; color: var(--text); }
.mon-simple small { display: block; color: var(--text-2); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.mon-simple-hint { font-size: 12px; color: var(--text-3); margin: 6px 0 0; }

/* ─────────────── Monitoring list cards (calmer than plain .panel rows) ─────────────── */
.moncard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow:none; padding: 16px 18px; margin-bottom: 14px; }
.moncard__top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.moncard__title { font-weight:500; font-size: 15px; letter-spacing: -0.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moncard__meta { color: var(--text-3); font-size: 12.5px; margin-top: 3px; }
.moncard__spacer { flex: 1; }
.moncard__chips { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.moncard__chips:empty { display: none; }
.moncard__foot { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
.moncard__stat { color: var(--text-2); font-size: 12.5px; }
.moncard__stat b { color: var(--text); font-weight:500; font-variant-numeric: tabular-nums; }
.moncard__actions { margin-left: auto; display: flex; gap: 8px; }

/* collapsible "how monitoring works" — moves the big reference table out of the way */
details.mon-how { margin-top: 26px; }
details.mon-how > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight:500; letter-spacing:normal; text-transform:none; color: var(--text-3); }
details.mon-how > summary::-webkit-details-marker { display: none; }
details.mon-how > summary::after { content: "+"; color: var(--primary); font-weight:500; font-size: 15px; line-height: 1; }
details.mon-how[open] > summary::after { content: "\2212"; }
details.mon-how[open] > summary { margin-bottom: 6px; }

/* ─────────────── Dashboard wallet hero (prominent balance + top-up) ─────────────── */
.wallet-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
  background: radial-gradient(120% 140% at 100% 0, var(--primary-tint), transparent 60%), var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow:none; padding: 22px 24px; }
.wallet-hero__main { flex: 1; min-width: 0; }
.wallet-hero__label { font-size: 11px; font-weight:500; letter-spacing:normal; text-transform:none; color: var(--text-3); }
.wallet-hero__amt { font-size: 38px; font-weight:500; letter-spacing: -.03em; color: var(--primary);
  line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.wallet-hero__hint { font-size: 12.5px; color: var(--text-2); margin-top: 8px; }
.wallet-hero .btn { width: auto; flex: none; margin: 0; }

/* ─────────────── Search: essentials-first progressive disclosure ─────────────── */
.more-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px 0 2px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--primary); font: 600 13px var(--font); cursor: pointer; transition: background .12s, border-color .12s; }
.more-toggle:hover { background: var(--primary-tint); border-color: var(--primary); }
.more-toggle .sign { font-size: 15px; font-weight:500; }
.more-panel { display: none; }
.more-panel.open { display: block; }

/* `hidden` must win over component display rules (.terms-row is flex): the
   consumer-only rows (app/consumer.py) are hidden for company accounts. */
[hidden] { display: none !important; }

/* Search: a number we could not read (LT filter audit 2026-09-28, FLT-01) */
input.is-invalid { border-color: var(--error); box-shadow:none; }

}