/* Northgate Managed IT — Proposal Generator (AIEG demo)
   Brand tokens are injected by app.js from BRAND, with these fallbacks. */
:root{
  --primary:#102A43; --primary-dark:#0A1D30; --accent:#2E8FA8; --accent-soft:#E3F0F3;
  --ink:#1B2733; --muted:#5B6B7B; --line:#E2E8EE; --bg:#F6F8FA; --good:#1E8E5A; --warn:#B45309;
  --card:#FFFFFF; --radius:12px; --shadow:0 1px 2px rgba(16,42,67,.06), 0 6px 20px rgba(16,42,67,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
h2,h3,h4{color:var(--primary); margin:0 0 .35rem}
p{margin:0 0 .5rem}
.muted{color:var(--muted)}
a{color:var(--accent)}

/* -------- Demo banner (pinned to top, sticky, shows in iframe) -------- */
#demo-banner{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,#0A1D30,#102A43); color:#EAF2F6;
  border-bottom:3px solid var(--accent);
}
.db-inner{max-width:1180px; margin:0 auto; padding:9px 18px; display:flex; gap:12px; align-items:flex-start}
.db-badge{
  flex:0 0 auto; background:var(--accent); color:#04141b; font-weight:700; font-size:11px;
  letter-spacing:.08em; padding:3px 9px; border-radius:6px; margin-top:2px;
}
.db-text{margin:0; font-size:12.5px; color:#D7E6ED}
.db-text strong{color:#fff}
.db-sep{opacity:.5; padding:0 6px}

/* ----------------------------- App bar ------------------------------- */
#appbar{
  max-width:1180px; margin:0 auto; padding:18px; display:flex; align-items:center; gap:14px;
}
.brandmark{
  width:42px; height:42px; border-radius:10px; flex:0 0 auto;
  background:radial-gradient(120% 120% at 30% 20%, var(--accent), var(--primary));
  position:relative;
}
.brandmark::after{
  content:"N"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:22px;
}
.brandwrap{flex:1 1 auto}
.brandname{font-weight:700; font-size:19px; color:var(--primary); line-height:1.1}
.brandtag{font-size:12.5px; color:var(--muted)}
.catalog-pill{
  font-size:11px; color:var(--muted); border:1px solid var(--line); padding:4px 9px; border-radius:20px; background:#fff;
}

/* ----------------------------- Layout -------------------------------- */
#layout{
  max-width:1180px; margin:0 auto 30px; padding:0 18px;
  display:grid; grid-template-columns:minmax(360px,440px) 1fr; gap:22px; align-items:start;
}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
#console{padding:18px; position:sticky; top:64px}
.console-head h2{font-size:17px}
.console-head p{font-size:12.5px}

/* fields */
.field{margin:12px 0}
.field-label{display:block; font-size:12px; font-weight:600; color:var(--primary); margin-bottom:5px; letter-spacing:.01em}
input[type=text],input[type=number],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font:inherit; color:var(--ink); background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
textarea{resize:vertical}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.check-inline label{display:flex; align-items:center; gap:8px; font-size:13px; margin-top:24px}

/* sample buttons */
.sample-row{display:flex; flex-wrap:wrap; gap:8px}
.sample-btn{
  border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 11px; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--primary); text-align:left; line-height:1.25; transition:.12s;
}
.sample-btn:hover{border-color:var(--accent); background:var(--accent-soft)}
.sample-btn b{display:block; font-size:13px}
.sample-btn span{color:var(--muted); font-size:11px}

/* chips (pains) */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:6px 11px; cursor:pointer;
  font-size:12px; color:var(--ink); user-select:none; transition:.12s;
}
.chip[aria-pressed=true]{background:var(--primary); color:#fff; border-color:var(--primary)}

/* tier selector */
.tier-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.tier-opt{
  border:1px solid var(--line); border-radius:10px; padding:9px; cursor:pointer; text-align:center; position:relative; transition:.12s; background:#fff;
}
.tier-opt:hover{border-color:var(--accent)}
.tier-opt[aria-pressed=true]{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.tier-opt b{display:block; font-size:13px; color:var(--primary)}
.tier-opt small{color:var(--muted); font-size:11px}
.tier-opt .pop{position:absolute; top:-8px; left:50%; transform:translateX(-50%); background:var(--accent); color:#04141b; font-size:9px; font-weight:700; padding:2px 6px; border-radius:10px; letter-spacing:.04em}
.rec-hint{margin-top:8px; font-size:12px; background:var(--accent-soft); border:1px solid #cfe6ec; color:#13414e; padding:8px 10px; border-radius:8px}

/* advanced sections */
.adv{border:1px solid var(--line); border-radius:10px; padding:6px 12px; margin:12px 0; background:#fff}
.adv>summary{cursor:pointer; font-weight:600; font-size:13px; color:var(--primary); padding:6px 0; list-style:none}
.adv>summary::-webkit-details-marker{display:none}
.adv>summary::before{content:"▸"; color:var(--accent); margin-right:8px; font-size:11px}
.adv[open]>summary::before{content:"▾"}
.checks{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; padding:6px 0 10px}
.checks label{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; cursor:pointer}
.checks input{margin-top:2px}
.checks .price{color:var(--muted); font-size:11px}
@media (max-width:520px){ .checks{grid-template-columns:1fr} }

/* live preview */
.preview{margin:14px 0; border:1px dashed #c7d3dd; border-radius:10px; padding:12px; background:#fbfdfe}
.prev-row{display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:var(--ink)}
.prev-row.tot{border-top:1px solid var(--line); margin-top:6px; padding-top:8px; font-size:15px}
.prev-row.tot strong{color:var(--primary)}

.gov-note{font-size:11px; margin-top:5px}
.gov-note.manager{color:var(--warn)} .gov-note.vp{color:#B91C1C}

/* buttons */
.btn-primary{
  width:100%; background:var(--primary); color:#fff; border:0; border-radius:10px; padding:13px; font:inherit;
  font-weight:600; font-size:15px; cursor:pointer; transition:.12s;
}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:disabled{opacity:.6; cursor:wait}
.grounding-note{font-size:11px; color:var(--muted); text-align:center; margin:9px 0 0}

/* ----------------------------- Output -------------------------------- */
#output{min-height:300px}
.empty{padding:44px 26px; text-align:center}
.empty-illu{font-size:40px; margin-bottom:8px}
.empty h3{font-size:17px}
.empty p{font-size:13px; max-width:380px; margin:0 auto}

/* loading */
.loading{padding:50px 26px; text-align:center}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading .muted{font-size:13px}

/* error */
.errbox{padding:22px; border-left:4px solid #B91C1C}
.errbox h3{color:#B91C1C}
.errbox code{display:block; background:#fbf0f0; padding:8px; border-radius:6px; font-size:11px; margin-top:8px; white-space:pre-wrap}

/* ----------------------- Proposal document --------------------------- */
.proposal{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.prop-actions{display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; background:#f4f7f9; border-bottom:1px solid var(--line)}
.btn-ghost{border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 13px; font:inherit; font-size:13px; cursor:pointer; color:var(--primary)}
.btn-ghost:hover{border-color:var(--accent); background:var(--accent-soft)}
.prop-body{padding:30px 34px}
@media (max-width:560px){ .prop-body{padding:20px 18px} }

.prop-header{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--primary); padding-bottom:16px; margin-bottom:20px; gap:16px}
.prop-header .ph-left h1{font-size:22px; color:var(--primary); margin:0 0 2px}
.prop-header .ph-left .sub{color:var(--muted); font-size:13px}
.prop-header .ph-right{text-align:right; font-size:12px; color:var(--muted)}
.prop-header .ph-right b{color:var(--primary); display:block; font-size:14px}

.prop-section{margin:22px 0}
.prop-section h2{font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:11px}
.prop-section p{font-size:14px; color:var(--ink)}

.tier-callout{display:flex; align-items:center; gap:14px; background:var(--accent-soft); border:1px solid #cfe6ec; border-radius:10px; padding:14px 16px; margin-bottom:12px}
.tier-callout .tc-tier{font-size:20px; font-weight:700; color:var(--primary)}
.tier-callout .tc-pos{font-size:12px; color:#13414e}
.tier-callout .tc-price{margin-left:auto; text-align:right}
.tier-callout .tc-price b{font-size:20px; color:var(--primary)}
.tier-callout .tc-price small{display:block; color:var(--muted); font-size:11px}

.reasons{margin:8px 0 0; padding-left:18px}
.reasons li{font-size:13px; margin:3px 0; color:var(--ink)}

.scope-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){ .scope-cols{grid-template-columns:1fr} }
.scope-cols ul{margin:6px 0 0; padding-left:18px}
.scope-cols li{font-size:13px; margin:3px 0}
.scope-cols .lead{font-weight:600; color:var(--primary)}

table.lines{width:100%; border-collapse:collapse; font-size:13px; margin-top:6px}
table.lines th{text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); padding:7px 6px}
table.lines td{padding:7px 6px; border-bottom:1px solid #eef2f5; vertical-align:top}
table.lines td.amt,table.lines th.amt{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
table.lines td .det{display:block; color:var(--muted); font-size:11px}
table.lines tr.subtotal td{font-weight:600; border-top:1px solid var(--line)}
table.lines tr.adj td{color:var(--good)}
table.lines tr.total td{font-weight:700; color:var(--primary); border-top:2px solid var(--primary); font-size:14px}

.totals-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px}
@media (max-width:560px){ .totals-grid{grid-template-columns:1fr 1fr} }
.tcell{border:1px solid var(--line); border-radius:10px; padding:12px; text-align:center; background:#fbfdfe}
.tcell .lab{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.tcell .val{font-size:18px; font-weight:700; color:var(--primary); font-variant-numeric:tabular-nums; margin-top:3px}
.tcell.hi{background:var(--primary); border-color:var(--primary)}
.tcell.hi .lab{color:#aecada} .tcell.hi .val{color:#fff}

table.sla{width:100%; border-collapse:collapse; font-size:12.5px}
table.sla th{background:var(--primary); color:#fff; padding:8px 9px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em}
table.sla td{padding:8px 9px; border-bottom:1px solid var(--line)}
table.sla tr:nth-child(even) td{background:#f8fafb}
.sla-notes{font-size:11.5px; color:var(--muted); margin-top:8px}
.sla-notes div{margin:2px 0}

.terms{font-size:12px; color:var(--muted)}
.terms div{margin:4px 0}
.terms b{color:var(--ink)}

.included-note{font-size:11.5px; color:var(--good); margin-top:8px}
.gov-flag{font-size:12px; padding:8px 11px; border-radius:8px; margin-top:10px}
.gov-flag.manager{background:#FEF3E2; color:#92500a; border:1px solid #f5d9ad}
.gov-flag.vp{background:#FDE8E8; color:#9b1c1c; border:1px solid #f3c0c0}

.prop-disclaimer{margin-top:24px; border-top:1px dashed var(--line); padding-top:12px; font-size:11px; color:var(--muted)}

.ai-tag{display:inline-block; font-size:10px; background:var(--accent-soft); color:#13414e; border:1px solid #cfe6ec; border-radius:5px; padding:1px 6px; margin-left:7px; vertical-align:middle; letter-spacing:.02em}

/* ----------------------------- Footer -------------------------------- */
#appfoot{
  max-width:1180px; margin:0 auto; padding:18px; display:flex; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); flex-wrap:wrap;
}

/* ----------------------------- Responsive ---------------------------- */
@media (max-width:880px){
  #layout{grid-template-columns:1fr}
  #console{position:static}
}

/* ----------------------------- Print --------------------------------- */
@media print{
  @page{margin:14mm}
  body{background:#fff; font-size:12px}
  #appbar,#console,#appfoot,.prop-actions,.sample-row,.catalog-pill{display:none !important}
  #demo-banner{position:static; background:#fff !important; color:#000; border-bottom:1px solid #999}
  .db-badge{background:#000; color:#fff}
  .db-text,.db-text strong{color:#000}
  #layout{display:block; margin:0; padding:0; max-width:none}
  #output{min-height:0}
  .proposal{border:0; box-shadow:none; border-radius:0}
  .prop-body{padding:0}
  .tier-callout,.tcell.hi{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  table.sla th,.tcell.hi{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .prop-section{break-inside:avoid}
}