/* ------------------------------------------------------------------
   AVI-OS — View-specific styles
   ------------------------------------------------------------------ */

/* ── KWOT iframe wrapper ─────────────────────────────────────────── */
.kwot-frame-wrap {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  height: calc(100dvh - var(--topbar-h) - 48px);
  min-height: 600px;
  background: var(--bg-sunken);
}
.kwot-frame-wrap iframe {
  width: 100%; height: 100%; border: none; display: block;
}
.kwot-frame-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border-bottom: 1px solid var(--glass-border);
}
.kwot-frame-header__badge {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}

/* ── IB stream panel ─────────────────────────────────────────────── */
.ib-stream {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow-y: auto;
}

/* ── Finance ledger rows ─────────────────────────────────────────── */
.ledger-row { display: grid; grid-template-columns: 1fr 80px 100px 80px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--r-md); }
.ledger-row:hover { background: var(--accent-soft); }
.ledger-row__amt--dr { color: var(--bad); font-weight: 500; font-family: var(--font-mono); }
.ledger-row__amt--cr { color: var(--ok);  font-weight: 500; font-family: var(--font-mono); }

/* ── HR people card ──────────────────────────────────────────────── */
.person-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--t-fast);
}
.person-card:hover { border-color: var(--border-strong); }
.person-card__avatar {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--border-strong); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); font-weight: 700; flex-shrink: 0;
}
.person-card__info { flex: 1; min-width: 0; }
.person-card__name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.person-card__role { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── IP asset card ───────────────────────────────────────────────── */
.ip-card {
  padding: 16px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
}
.ip-card__id { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-faint); }
.ip-card__name { font-size: var(--fs-md); font-weight: 600; color: var(--text); margin: 4px 0; }
.ip-card__type { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Pipeline stage ──────────────────────────────────────────────── */
.pipe-stages { display: flex; gap: 0; overflow-x: auto; }
.pipe-stage {
  flex: 1; min-width: 140px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-right: none;
}
.pipe-stage:first-child { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.pipe-stage:last-child  { border-right: 1px solid var(--border); border-radius: 0 var(--r-xl) var(--r-xl) 0; }
.pipe-stage__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.pipe-stage__count { font-size: var(--fs-3xl); font-weight: 700; color: var(--text); }
.pipe-stage__val   { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; }

/* ── Risk register ───────────────────────────────────────────────── */
.risk-row { display: grid; grid-template-columns: 1fr 80px 80px 100px 48px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); }
.risk-row:hover { background: var(--accent-soft); }
.risk-score { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; }
.risk-score--high { background: var(--bad-bg);  color: var(--bad); }
.risk-score--med  { background: var(--warn-bg); color: var(--warn); }
.risk-score--low  { background: var(--ok-bg);   color: var(--ok); }

/* ── Action plan ─────────────────────────────────────────────────── */
.ap-phase { margin-bottom: 28px; }
.ap-phase__title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 12px; color: var(--text); }
.ap-task {
  display: grid; grid-template-columns: 24px 1fr 100px 100px 80px;
  align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  margin-bottom: 6px; font-size: var(--fs-sm);
}
.ap-task:hover { border-color: var(--border-strong); }
.ap-task__check { width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ap-task__check--done { background: var(--ok); border-color: var(--ok); color: var(--text-inverse); }
.ap-task__check--progress { background: var(--info-bg); border-color: var(--info); }
.ap-task__name  { font-weight: 500; color: var(--text); }
.ap-task__owner { font-size: var(--fs-xs); color: var(--text-muted); }
.ap-task__date  { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-faint); }

/* ── Compliance item ─────────────────────────────────────────────── */
.comp-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
}
.comp-item__icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comp-item__title { font-weight: 600; font-size: var(--fs-sm); color: var(--text); margin-bottom: 3px; }
.comp-item__desc  { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }

/* ── Settings row ────────────────────────────────────────────────── */
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-row__left b { display: block; font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.setting-row__left p { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ── Toggle switch ───────────────────────────────────────────────── */
.toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle__track { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--r-pill); cursor: pointer; transition: background var(--t-fast); }
.toggle input:checked + .toggle__track { background: var(--ok); }
.toggle__thumb { position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; background: white; border-radius: 50%; transition: transform var(--t-fast); pointer-events: none; }
.toggle input:checked ~ .toggle__thumb { transform: translateX(18px); }

/* ── Governance board card ───────────────────────────────────────── */
.board-card {
  padding: 16px; border-radius: var(--r-xl);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
}
.board-card__entity { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.board-card__name   { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.board-card__sub    { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── KWOT Native Module Styles ───────────────────────────────────── */
.page { padding: 28px 32px; max-width: var(--content-max); width: 100%; margin: 0 auto; }
.page__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 16px; }
.page__title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--text); }
.page__sub   { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 4px; }

.section { margin-bottom: 28px; }
.section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section__title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }

.loading-row { display: flex; align-items: center; gap: 14px; padding: 24px 0; color: var(--text-muted); font-size: var(--fs-sm); }

.offer-header {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 32px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.offer-header__id      { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-faint); margin-bottom: 6px; }
.offer-header__company { font-size: var(--fs-2xl); font-weight: 800; color: var(--text); }
.offer-header__meta    { display: flex; gap: 28px; margin-top: 18px; flex-wrap: wrap; }
.offer-header__stat    { display: flex; flex-direction: column; }
.offer-header__stat span { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.offer-header__stat b    { font-size: var(--fs-xl); font-weight: 700; color: var(--text); }

.roi-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.roi-bar__label { width: 50px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 700; }
.roi-bar__track { flex: 1; height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.roi-bar__fill  { height: 100%; border-radius: var(--r-pill); background: var(--accent); transition: width var(--t-slow) var(--ease-out); }
.roi-bar__fill--cost { background: var(--bad); }
.roi-bar__val   { width: 80px; text-align: right; font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 600; color: var(--text-soft); }

.problem-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; position: relative; margin-bottom: 12px; }
.problem-row__remove { position: absolute; top: 10px; right: 10px; }

.funnel-strip { display: flex; gap: 4px; margin-bottom: 28px; flex-wrap: wrap; }
.funnel-stage {
  flex: 1; min-width: 140px; padding: 14px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); position: relative;
}
.funnel-stage::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--border-strong); }
.funnel-stage__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; }
.funnel-stage__val   { font-size: var(--fs-xl); font-weight: 800; color: var(--text); }

.u-mono { font-family: var(--font-mono); }
.u-num  { font-variant-numeric: tabular-nums; }