/* KES Quoting System — Kaufman brand: steel blue #206090 + black (from Logo1.png) */
:root{
  --navy:#14181c; --teal:#206090; --teal-deep:#174a70;
  --paper:#F5F8FA; --surface:#fff; --ink:#1f2937; --muted:#64748b;
  --line:#D5DEE4; --teal-soft:#E6EEF6;
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.45}
main{max-width:1180px; margin:0 auto; padding:18px 22px 60px}
a{color:var(--teal-deep)}
h1{font-size:1.35rem; color:var(--navy); margin:.4em 0 .6em}
h2{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}

.topbar{background:var(--navy); color:#fff; display:flex; align-items:center; gap:22px; padding:10px 22px}
.topbar .brand{color:#fff; text-decoration:none; font-weight:650; display:flex; align-items:center; gap:8px}
.topbar nav{display:flex; gap:16px; flex:1}
.topbar nav a{color:#cfe0ee; text-decoration:none; font-size:.92rem; padding:4px 2px}
.topbar nav a:hover{color:#fff}
.userpick select{background:#232c35; color:#fff; border:1px solid #3a4a58; border-radius:6px; padding:4px 8px; font:inherit; font-size:.85rem}
.preview-note{background:var(--teal-soft); color:var(--teal-deep); font-size:.8rem; text-align:center; padding:4px 10px}

.toolbar{display:flex; gap:12px; align-items:center; margin:14px 0 4px; flex-wrap:wrap}
.filters{display:flex; gap:8px; flex:1; flex-wrap:wrap}
.filters input[type=search]{flex:1; min-width:240px}
input,select,textarea{border:1px solid var(--line); border-radius:6px; padding:7px 10px; font:inherit; background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:0; border-color:var(--teal)}
button{cursor:pointer}
.btn{display:inline-block; border-radius:6px; padding:7px 16px; font:inherit; text-decoration:none; border:1px solid var(--line); background:#fff; color:var(--navy)}
.btn.primary{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600}
.btn.primary:hover{background:var(--teal-deep)}
.btn.ghost:hover{border-color:var(--teal)}
.btn.tiny{padding:3px 10px; font-size:.8rem}
.btn.tiny.won{color:#1d7a43} .btn.tiny.lost{color:#a33} .btn.tiny.open{color:var(--navy)}
.filters button{background:var(--navy); color:#fff; border:none; border-radius:6px; padding:7px 16px}

.count{color:var(--muted); font-size:.85rem; margin:.4em 0}
.tablewrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:10px}
table.grid{border-collapse:collapse; width:100%; font-size:.9rem}
table.grid th{text-align:left; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
table.grid td{padding:7px 12px; border-bottom:1px solid #EEF2F5; white-space:nowrap}
table.grid tr:last-child td{border-bottom:none}
/* Only rows that actually navigate (they carry an onclick) look clickable.
   Static rows like the activity log and customer list do not — their links
   (e.g. the quote number) are the clickable elements. */
table.grid tr[onclick]{cursor:pointer}
table.grid tr[onclick]:hover td{background:#F4FAFB}
table.grid td.num a{font-weight:600; color:var(--teal); text-decoration:none}
table.grid td.num a:hover{text-decoration:underline}
table.grid td.numeric{text-align:right; font-variant-numeric:tabular-nums}
table.grid.slim td, table.grid.slim th{padding:6px 10px}

.pill{display:inline-block; border-radius:99px; font-size:.72rem; font-weight:600; padding:1px 10px; text-transform:capitalize}
.pill.open{background:#FFF4D6; color:#8a6116}
.pill.won{background:#DDF2E4; color:#1d7a43}
.pill.lost{background:#F3E0DC; color:#a33}
.pill.act{background:var(--teal-soft); color:var(--teal-deep); text-transform:none}

.pager{display:flex; gap:14px; align-items:center; justify-content:center; margin:14px 0; color:var(--muted); font-size:.88rem}

.formcard{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px 26px; max-width:860px}
.nextnum{font-size:.8rem; color:var(--teal-deep); background:var(--teal-soft); border-radius:99px; padding:2px 12px; margin-left:10px; vertical-align:middle}
.qform .field{display:flex; flex-direction:column; gap:3px; margin:10px 0; flex:1; min-width:150px}
.qform .field.sm{max-width:130px; min-width:90px}
.qform .field.wide{width:100%}
.qform label{font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.cols{display:flex; gap:14px; flex-wrap:wrap}
.revise{display:flex; gap:8px; align-items:center; margin:14px 0 0; font-size:.9rem; color:var(--muted)}
.actions{display:flex; gap:10px; margin-top:18px}

.banner{background:var(--teal-soft); border:1px solid var(--teal); color:#0e6a72; border-radius:8px; padding:12px 16px; margin:14px 0; font-size:1rem}
.detailhead{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:10px}
.detailhead .rev{font-size:.78rem; color:var(--muted); margin-left:8px}
.headactions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.statusform{display:inline-flex; gap:6px}
.detailgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0}
@media(max-width:760px){.detailgrid{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin:14px 0}
dl{display:grid; grid-template-columns:120px 1fr; gap:4px 14px; margin:0; font-size:.92rem}
dt{color:var(--muted)} dd{margin:0}

.fy{font-size:.75rem; color:var(--muted); font-weight:400; margin-left:10px}
.dashtabs{display:flex; gap:6px; margin:2px 0 14px}
.dashtabs a{
  text-decoration:none; color:var(--navy); border:1px solid var(--line); background:var(--surface);
  border-radius:99px; padding:4px 16px; font-size:.85rem;
}
.dashtabs a.on{background:var(--navy); border-color:var(--navy); color:#fff}
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin:14px 0}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.tile b{display:block; font-size:1.5rem; color:var(--teal-deep); font-variant-numeric:tabular-nums}
.tile span{font-size:.75rem; color:var(--muted)}
.bars{display:flex; gap:8px; align-items:flex-end; height:120px; padding:6px 2px 0}
.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; gap:4px}
.bar .fill{width:70%; background:var(--teal); border-radius:3px 3px 0 0; min-height:2px}
.bar .lbl{font-size:.65rem; color:var(--muted)}
.newbtns{display:flex; gap:8px; align-items:center}

/* customer autocomplete — a clearly-floating, outlined menu (not blended into the card) */
.ac{position:relative}
.ac-list{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  background:#EAF1F8; border:2px solid var(--teal); border-radius:8px;
  max-height:300px; overflow:auto; box-shadow:0 12px 28px rgba(20,24,28,.18)}
.ac-item{padding:9px 13px; cursor:pointer; font-size:.92rem; color:var(--ink);
  border-bottom:1px solid #D5E1EC}
.ac-item:last-child{border-bottom:none}
.ac-item:hover, .ac-item.on{background:var(--teal); color:#fff}

/* duplicate warning on the quote form */
.dupwarn{margin-top:6px; background:#FFF4D6; border:1px solid #E6C86A; color:#8a6116;
  border-radius:6px; padding:7px 10px; font-size:.85rem}
.hint{font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted)}

/* customer management */
.btn.danger{border-color:#d9b1a9; color:#a33}
.btn.danger:hover{background:#F3E0DC}
.searchrow{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.searchrow input{flex:1; min-width:200px}
.dupgroup{border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:10px 0}
.dupgroup .btn{margin-top:8px}
.backlink{font-size:.85rem; margin:0 0 6px}

/* forecast */
.filters .ctl{display:flex; flex-direction:column; gap:3px; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
/* forecast controls bar: bottom-align the dropdowns, push Export to the right */
.fcbar{align-items:flex-end}
.fcbar .export{margin-left:auto}
/* sortable table headings */
th.sortable{white-space:nowrap}
th.sortable a{color:inherit; text-decoration:none; cursor:pointer}
th.sortable a:hover{color:var(--teal)}
.arrow{color:var(--teal)}
.searchrow select{padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:#fff}
/* Quotes list: fixed layout so all 10 columns (incl. Rev) always fit the width;
   long Customer/By values truncate with an ellipsis instead of pushing columns
   off-screen. Full value shows on hover (title attribute). */
table.grid.quotes{table-layout:fixed}
table.grid.quotes td, table.grid.quotes th{padding:6px 8px; overflow:hidden; text-overflow:ellipsis}
/* one readable line per change in the activity trail / change log */
.chg{padding:1px 0; line-height:1.4}
.whoami{color:#fff; font-weight:600; font-size:.85rem; opacity:.92}
.chg + .chg{border-top:1px dotted var(--line)}
.assumptions ul{margin:6px 0 0; padding-left:18px}
.assumptions li{margin:5px 0; font-size:.9rem; color:var(--ink)}
.grid.slim tr.totalrow td{border-top:2px solid var(--line); background:var(--teal-soft)}
.fcform{margin-top:4px}
.fcform .actions{margin-top:10px}


/* ---- hot list (9/8) ---- */
.hlblock h2{margin:0}
.hlblockhead{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap}
.hltotals{font-size:.85rem; color:var(--muted)}
.hlrow{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; background:#fff}
.hlrow.won{border-color:#8fcfa5; background:#F3FBF5}
.hlrow.lost{border-color:#e0b3ab; background:#FBF3F1}
.hlmain{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
.hlmain label, .hlnotes label{display:flex; flex-direction:column; gap:2px; font-size:.68rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; flex:1 1 140px; min-width:110px}
.hlmain label.sm{flex:0 1 120px; min-width:100px}
.hlmain label.xs{flex:0 1 84px; min-width:72px}
.hlmain label.md{flex:0 1 170px; min-width:150px}
.hlmain label.grow, .hlnotes label.grow{flex:1 1 100%}
.hlmain label.rm{flex:0 0 auto; flex-direction:row; align-items:center; gap:6px; text-transform:none; font-weight:400; color:#a33; padding-bottom:8px}
.hlmain input, .hlmain select, .hlnotes input{padding:6px 8px; font-size:.9rem}
.hlnotes{margin-top:6px}
.hlmore{margin-top:6px; font-size:.85rem}
.hlmore summary{color:var(--teal-deep); cursor:pointer}
.hloutcome{margin-top:6px; border-top:1px dashed var(--line); padding-top:6px}
.actions.sticky{position:sticky; bottom:0; background:var(--paper); padding:12px 0; border-top:1px solid var(--line); align-items:center; flex-wrap:wrap}
.addrow{margin-top:4px}

/* ---- Forecast-NEW charts ---- */
.chartgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:900px){.chartgrid{grid-template-columns:1fr}}
.chartbox{position:relative; height:260px}
.chartbox.tall{height:320px}
table.grid td.notes{white-space:normal; max-width:360px; font-size:.85rem; color:var(--muted)}
td.dim{color:#9aa5b1}
table.threemo tr.won td{background:#F3FBF5}
table.threemo tr.lost td{background:#FBF3F1}

/* ---- quote body editor ---- */
.bodysec{margin:16px 0}
.bodysec h2{margin-bottom:6px}
table.lines td{white-space:normal; vertical-align:top; padding:4px 6px}
table.lines input, table.lines textarea{width:100%; padding:6px 8px; font-size:.9rem}
table.lines textarea{resize:vertical}
table.summary td{white-space:normal}


/* ---- the proposal as a document (9/8 evening) ---- */
.paper{background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 2px 14px rgba(20,24,28,.06);
  max-width:900px; margin:14px auto; padding:48px 64px; font-family:"Calibri","Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.5; color:#111}
@media(max-width:760px){.paper{padding:24px 18px}}
.paper p{margin:.5em 0}
.letterhead{display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:2px solid #206090; padding-bottom:10px; margin-bottom:16px}
.letterhead img{height:54px}
.lh-right{font-size:.8rem; color:var(--muted); text-align:right; line-height:1.35}
.docdate{margin-top:14px}
table.attn{border-collapse:collapse; margin:10px 0}
table.attn td{padding:2px 14px 2px 0; vertical-align:top}
table.attn td:first-child{font-weight:600; width:110px}
.doch{font-size:1rem; font-weight:700; letter-spacing:.04em; color:#111; margin:26px 0 8px; padding-top:8px; border-top:1px solid #e5e9ee}
.doch2{font-size:.9rem; font-weight:700; margin:12px 0 6px}
.docul{margin:6px 0 6px 20px; padding:0}
.docul li{margin:3px 0}
.docbox{border:1px solid #444; padding:10px 14px; margin:8px 0; font-size:.86rem}
.docbox p{margin:.35em 0}
table.docrows{border-collapse:collapse; margin:6px 0}
table.docrows td{border:1px solid #444; padding:4px 10px; font-size:.9rem}
table.doctable{border-collapse:collapse; width:100%; margin:6px 0 10px}
table.doctable th, table.doctable td{border:1px solid #555; padding:5px 8px; font-size:.9rem; vertical-align:top}
table.doctable th{background:#f0f3f6; text-align:left; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase}
table.doctable td.numeric{text-align:right; white-space:nowrap}
table.doctable td.wrap{white-space:normal}
table.doctable tr.totalrow td{background:#eef2f6}
table.doctable.summary td:first-child{font-size:.82rem; letter-spacing:.02em}
.sig{margin:16px 0}
.sig p{margin:.3em 0}

/* sections: editable vs locked vs off */
.sec{position:relative; border-radius:8px; padding:10px 12px; margin:10px -12px}
.sec.editable{background:#EEF6FA; border:1px dashed #7fb3d5}
.sec.locked{background:#f6f7f8; border:1px solid #e1e5ea}
.sec.locked.unlocked{background:#FFF7E6; border:1px dashed #E08A2E}
.sec.off{opacity:.6; background:#f3f3f3; border:1px dashed #bbb}
.sec .doch{margin-top:0; border-top:none; padding-top:0}
.secbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:4px}
.sectitle{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.secctl{margin-left:auto; display:flex; gap:10px; align-items:center; font-size:.8rem}
.secctl .inc{display:flex; gap:6px; align-items:center; color:var(--muted); font-size:.8rem}
.sechelp{font-size:.8rem; color:var(--muted); margin:0 0 6px}
.badge{display:inline-block; border-radius:99px; font-size:.68rem; font-weight:600; padding:1px 9px; letter-spacing:.02em}
.badge.editable, .badge.std{background:#DCEBF5; color:#174a70}
.badge.edited{background:#DDF2E4; color:#1d7a43}
.badge.lock{background:#e9ecef; color:#4b5563}
.badge.unlocked{background:#FFE8C2; color:#8a5a00}
.badge.off{background:#eee; color:#777}
.legend{display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:.82rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 14px; margin:10px 0}
.legend .sw{display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:6px}
.legend .sw.editable{background:#EEF6FA; border:1px dashed #7fb3d5}
.legend .sw.locked{background:#f6f7f8; border:1px solid #cfd5dc}
.legend .sw.off{background:#f3f3f3; border:1px dashed #bbb}
.sec textarea{width:100%; font:inherit; font-size:.92rem; line-height:1.45; padding:8px 10px}
.sec textarea[disabled]{background:#f6f7f8; color:#333; border-color:#e1e5ea}
.bullets{display:flex; flex-direction:column; gap:4px; margin:4px 0 8px}
.bl{display:flex; gap:8px; align-items:flex-start; font-size:.92rem; line-height:1.4}
.bl input{margin-top:4px}
.bl.custom em{color:#1d7a43; font-size:.75rem; margin-left:6px}
.fieldlbl{display:block; font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:6px 0 3px}
.inline-ref{color:var(--teal-deep); border-bottom:1px dotted var(--teal)}
.figures{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin:8px 0}
.fig{margin:0; border:1px solid var(--line); border-radius:8px; padding:8px; background:#fff}
.fig img{width:100%; height:auto; display:block; border-radius:4px}
.fig figcaption{font-size:.8rem; color:var(--muted); text-align:center; margin-top:6px; font-style:italic}
.fig input{width:100%; margin-top:6px; font-size:.85rem}
.fig .rm{font-size:.8rem; color:#a33; display:flex; gap:6px; align-items:center; margin-top:4px}
.fig .missing{background:#f3e0dc; color:#a33; padding:30px; text-align:center; border-radius:4px}
.previewwrap{margin:10px 0}
.pdfpreview{width:100%; height:900px; border:1px solid var(--line); border-radius:8px; background:#fff}

/* document edit mode: section controls keep normal text, not the form's uppercase labels */
.qform .sec label.bl, .qform .sec label.inc, .qform .fig label.rm{text-transform:none; letter-spacing:0; font-weight:400; color:inherit; font-size:.92rem; flex-direction:row}
.qform .sec label.inc{font-size:.8rem; color:var(--muted)}
.tplta{width:100%; font:inherit; font-size:.9rem; line-height:1.45; padding:8px 10px}

/* hot list: banded rows so each opportunity reads as its own block (John, 9/8) */
.hlblock .hlrow{border:1px solid #b9c7d6; background:#fff; margin:10px 0}
.hlblock .hlrow:nth-of-type(odd){background:#E4EEF8}
.hlblock .hlrow.won, .hlblock .hlrow.won:nth-of-type(odd){background:#EAF7EE; border-color:#8fcfa5}
.hlblock .hlrow.lost, .hlblock .hlrow.lost:nth-of-type(odd){background:#FBEFEC; border-color:#e0b3ab}
.hlblock .hlrow .hlmain input, .hlblock .hlrow .hlmain select, .hlblock .hlrow .hlnotes input{background:#fff}
.hlmain label .ac{position:relative; display:block}
.hlmain label .ac input{width:100%}

/* ---- Version 2: lifecycle, pricing modes, overdue, checks ---- */
.pill.state-draft{background:#FFF4D6; color:#8a6116; text-transform:none}
.pill.state-issued{background:#DDF2E4; color:#1d7a43; text-transform:none}
.pill.state-legacy{background:#e9ecef; color:#4b5563; text-transform:none}
.checks .chk{margin:.25em 0; font-size:.92rem}
.checks .chk.block{color:#a33; font-weight:600}
.checks .chk.remind{color:#8a5a00}
.badge.mismatch{background:#FFE8C2; color:#8a5a00}
table.lines td.pricecell{min-width:230px}
table.lines td.pricecell select.mode{width:100%; margin-bottom:4px; font-size:.8rem; padding:4px 6px}
table.lines td.pricecell input.unit{margin-bottom:4px}
table.lines td.pricecell input[readonly]{background:#f3f5f7; color:#333}
table.lines td.pricecell .incl{display:flex; gap:6px; align-items:center; font-size:.8rem; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; margin-top:4px}
table.lines tr.excluded td{opacity:.7}
table.doctable tr.excluded td{color:#666}
input.bad{border-color:#a33; background:#FBEFEC}
.hlrow.overdue, .hlblock .hlrow.overdue, .hlblock .hlrow.overdue:nth-of-type(odd){background:#FFF6E7; border-color:#E08A2E}
.hlnotice{font-size:.85rem; color:#8a5a00; background:#FFE8C2; border-radius:6px; padding:6px 10px; margin-bottom:8px}
.hlredate{margin-top:6px}
.hlquote{margin-top:6px; font-size:.85rem; color:var(--muted); border-top:1px dashed var(--line); padding-top:6px}
.hlquote.mismatch{color:#6b4600}
.hlquote input{padding:6px 8px; font-size:.9rem; width:100%; background:#fff}
.overdueblock{border-color:#E08A2E}
.errorcard h1{color:#a33}

/* admin users: fixed layout so the signature fields and Save always fit the card */
table.grid.users{table-layout:fixed; width:100%}
table.grid.users th:nth-child(1){width:21%} table.grid.users th:nth-child(2){width:9%} table.grid.users th:nth-child(3){width:6%}
table.grid.users th:nth-child(4){width:16%} table.grid.users th:nth-child(5){width:7%} table.grid.users th:nth-child(6){width:13%}
table.grid.users th:nth-child(7){width:21%} table.grid.users th:nth-child(8){width:7%}
table.grid.users td{white-space:normal; padding:5px 6px; vertical-align:middle}
table.grid.users td.uname{font-weight:600}
table.grid.users td.uname .hint{font-weight:400; font-size:.78rem}
table.grid.users input:not([type=checkbox]), table.grid.users select{width:100%; padding:5px 7px; font-size:.85rem; box-sizing:border-box}