/* ============================================================
   SPMS — Pricing Module · Concept design system
   Client brand restyle: navy primary + mint/teal accents on a
   light, high-legibility enterprise surface. Mint is sparing.
   Tokens are tweakable: accent shade + density override these vars.
   ============================================================ */

:root {
  /* ---- brand navy (primary) — overridden by Tweaks ---- */
  --navy:      #0B1B2E;   /* headers, primary buttons, totals panel */
  --navy-700:  #16304B;   /* primary-button hover / lifted navy */
  --navy-800:  #07121E;   /* gradient dark end (totals panel) */
  --navy-050:  #E9EDF1;   /* light cool tint: ghost hover, avatar, inset */
  --navy-100:  #D6DDE4;
  --navy-200:  #B7C2CD;

  /* ---- brand accents ---- */
  --mint:      #2FE6C4;   /* SPARING: active/selected + focus highlight */
  --mint-bg:   #DFFAF4;   /* light mint ring tint */
  --teal:      #157E7C;   /* links, secondary accents */
  --teal-700:  #0F6361;

  /* ---- ink / text ---- */
  --ink:    #0B1B2E;      /* primary dark text (brand navy) */
  --ink-2:  #3A4452;      /* grey-700 — secondary text, labels */
  --ink-3:  #5C6675;      /* muted */
  --ink-4:  #8B94A0;      /* faint */

  /* ---- surfaces ---- */
  --bg:          #F0EFE9; /* off-white brand surface */
  --surface:     #FFFFFF;
  --surface-2:   #F7F6F1; /* table header / subtle band */
  --surface-3:   #EFEEE7; /* hover / inset */
  --border:      #D9DDE2; /* grey-300 — rules, dividers */
  --border-2:    #CBD0D7;
  --border-3:    #B8BEC8;

  /* ---- semantic ---- */
  --pos:        #12A05C;  /* emerald — positive / implemented */
  --pos-2:      #0E8A4E;  /* emerald text */
  --pos-bg:     #E4F4EC;
  --neg:        #3A4452;  /* price increases: neutral dark — no red (brand has none) */
  --neg-bg:     #EFF0F2;
  --warn:       #A6710F;  /* amber — attention / date-in-past (text-safe) */
  --warn-bg:    #FAF1DC;
  --warn-border:#EAD9AC;

  /* ---- probability tiers (grey → teal → navy → emerald) ---- */
  --t-whatif: #7C8595;    /* neutral grey */
  --t-low:    #2BA39F;    /* light teal */
  --t-med:    #157E7C;    /* teal */
  --t-high:   #0B1B2E;    /* navy */
  --t-impl:   #12A05C;    /* emerald */

  /* ---- shape ---- */
  --r-lg: 12px;
  --r:    9px;
  --r-sm: 6px;
  --pill: 999px;
  --sh-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.04);
  --sh-md: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.06);
  --sh-pop: 0 8px 28px rgba(16,24,40,.14);

  /* ---- density (overridden by [data-density]) ---- */
  --gap: 18px;
  --card-pad: 20px;
  --cell-y: 11px;
  --row-fs: 13.5px;
  --tile-num: 30px;

  --font: Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;

  --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6675' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-density="comfortable"] {
  --gap: 24px; --card-pad: 24px; --cell-y: 15px; --row-fs: 14px; --tile-num: 33px;
}
[data-density="compact"] {
  --gap: 13px; --card-pad: 15px; --cell-y: 7.5px; --row-fs: 13px; --tile-num: 27px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- App chrome ---------- */
.app { min-height: 100vh; }

.topbar {
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding: 0 26px;
  gap: 28px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
}
.brand .mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--navy), var(--navy-800));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.brand .sub { color: var(--ink-4); font-weight: 500; font-size: 12.5px; }
.brand .divider { width: 1px; height: 20px; background: var(--border-2); }

.nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
}
.nav a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--teal); }
.nav a.active { color: var(--navy); border-bottom-color: var(--mint); font-weight: 600; }
.nav a.disabled {
  color: var(--ink-4);
  pointer-events: none;
}
.nav a.disabled::after {
  content: "";
  width: 11px; height: 11px;
  margin-left: 7px;
  background: currentColor;
  -webkit-mask: var(--lock) center/contain no-repeat;
  mask: var(--lock) center/contain no-repeat;
  opacity: .7;
}

.topbar-right { display: flex; align-items: center; gap: 14px; }
.searchbox {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  color: var(--ink-4);
  font-size: 13px;
  width: 210px;
  white-space: nowrap;
  overflow: hidden;
}
.searchbox svg { flex: none; }
.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--ink-3);
  background: transparent;
  border: 0; cursor: pointer;
  position: relative;
}
.icon-btn:hover { background: var(--surface-3); color: var(--teal); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn); border: 1.5px solid var(--surface);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-050);
  color: var(--navy-700);
  display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px;
  border: 1px solid var(--navy-100);
}

/* ---------- Layout shell ---------- */
.canvas { max-width: 1440px; margin: 0 auto; padding: 26px 26px 60px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card-pad { padding: var(--card-pad); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px var(--card-pad);
  border-bottom: 1px solid var(--border);
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; }
.card-head .meta { font-size: 12.5px; color: var(--ink-3); }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-3); }
.btn svg { flex: none; }
.btn.primary {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 1px 1px rgba(16,24,40,.12);
}
.btn.primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--teal); }
.btn.ghost:hover { background: rgba(21,126,124,.09); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn.danger { color: var(--neg); }
.btn.danger:hover { background: var(--neg-bg); border-color: var(--neg-bg); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: var(--pill);
  font-size: 11.5px; font-weight: 600;
  background: var(--surface-3); color: var(--ink-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.chip .dotc { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.t-whatif { color: var(--t-whatif); background: #F0F1F3; border-color: #E1E3E8; }
.chip.t-low    { color: #137370;  background: #E3F4F1; border-color: #C6E8E3; }
.chip.t-med    { color: var(--teal); background: #DEF0EF; border-color: #BFE3DF; }
.chip.t-high   { color: var(--navy); background: #E6EAEF; border-color: #CCD4DE; }
.chip.t-impl   { color: var(--pos-2); background: var(--pos-bg); border-color: #C5E7D3; }
.chip.warn     { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }

.amt-pos { color: var(--pos-2); font-weight: 700; }
.amt-neg { color: var(--neg); font-weight: 700; }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--row-fs); }
.tbl thead th {
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
}
.tbl tbody td {
  padding: var(--cell-y) 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .strong { color: var(--ink); font-weight: 600; }
.tbl .mono { font-variant-numeric: tabular-nums; }
.tbl tr.flagged { background: linear-gradient(90deg, var(--warn-bg), transparent 60%); }
.tbl tr.flagged:hover { background: linear-gradient(90deg, #F4E6C2, transparent 60%); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.field label .req { color: var(--neg); }
.field .hint { font-size: 11.5px; color: var(--ink-4); }
.control {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font); font-size: 13.5px; color: var(--ink);
  width: 100%;
}
.control:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,230,196,.45); }
textarea.control { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.5; }
select.control { appearance: none; background-image: var(--chev); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; cursor: pointer; }
.control.readonly { background: var(--surface-3); color: var(--ink-2); border-style: dashed; border-color: var(--border-2); }
.control-icon { position: relative; }
.control-icon svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-4); }
.control-icon .control { padding-left: 34px; }

/* toggle */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track {
  width: 38px; height: 22px; border-radius: var(--pill);
  background: var(--border-3); position: relative; transition: background .15s;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.switch input:checked + .track { background: var(--navy); }
.switch input:checked + .track::after { transform: translateX(16px); }

/* ---------- misc ---------- */
.kicker-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.dual { color: var(--ink-3); font-size: .82em; font-weight: 600; }
.divider-h { height: 1px; background: var(--border); border: 0; margin: 0; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #C8CDD4; border-radius: 7px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #B2B8C1; }