/* Solar PMS — Consellence formatting guideline fonts and colours; no logo, no Consellence name. */
@font-face { font-family: "PMS Lato"; font-weight: 900; src: url("fonts/Lato-Black.d83ab24f5cf2.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PMS Lato"; font-weight: 700; src: url("fonts/Lato-Bold.24b516c266d7.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PMS Carlito"; font-weight: 400; src: url("fonts/Carlito-Regular.cd9bb272b673.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PMS Carlito"; font-weight: 700; src: url("fonts/Carlito-Bold.898dc5e1774d.ttf") format("truetype"); font-display: swap; }

:root {
  --navy: #002060; --cyan: #00A8E8; --cyan-ink: #0077A8; --white: #FFFFFF;
  --ink: #1F2836; --ink-2: #26405F; --grey-1: #4A5464; --grey-2: #6C7686; --grey-5: #A2ABB9;
  --rule: #DDE2EA; --rule-1: #CFD8E4; --tint: #EFF7FD; --row: #F5F8FC; --paper: #FAFBFD;
  --ok: #1E7A46; --warn: #A5442B; --wait: #8A6100;
  --display: "PMS Lato", "Lato", sans-serif; --text: "PMS Carlito", "Carlito", Calibri, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 16px/1.5 var(--text); font-variant-numeric: lining-nums; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { font-family: var(--display); color: var(--navy); margin: 0 0 12px; }
h1 { font-weight: 900; font-size: 22px; }
h2 { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; }
section { margin-bottom: 22px; }
.quiet { color: var(--grey-2); }
.help { color: var(--grey-2); font-size: 14px; margin: 6px 0 12px; display: block; }
.count { font: 700 13px var(--display); color: var(--white); background: var(--navy); border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.nowrap { white-space: nowrap; }
.sub { display: block; color: var(--grey-2); font-size: 13px; }

/* header */
header.top { background: var(--white); border-bottom: 3px solid var(--cyan); display: flex; align-items: center; gap: 18px; padding: 8px 16px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand .b1 { font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-1); }
.brand .b2 { font: 900 19px var(--display); color: var(--navy); }
.brand.big { align-items: center; margin-bottom: 18px; }
.brand.big .b2 { font-size: 30px; }
header nav { display: flex; gap: 14px; align-items: center; flex: 1; }
header nav a { font: 700 14px var(--display); color: var(--ink); padding: 4px 0; }
header nav a.on { color: var(--navy); border-bottom: 2px solid var(--navy); }
.who { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.who form { margin: 0; }

/* buttons, forms */
.btn { display: inline-block; background: var(--navy); color: var(--white) !important; border: 0; border-radius: 4px; padding: 9px 16px; font: 700 14px var(--display); cursor: pointer; text-decoration: none !important; }
.btn:hover { background: #0B3A8C; }
.btn.small { padding: 5px 10px; font-size: 13px; }
button.link { background: none; border: 0; color: var(--navy); cursor: pointer; font: inherit; padding: 0; }
button.link.danger { color: var(--warn); }
input, select, textarea { font: 16px var(--text); color: var(--ink); border: 1px solid var(--rule-1); border-radius: 4px; padding: 8px 10px; background: var(--white); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--tint); border-color: var(--navy); }
.card { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 16px; }
.form label { display: block; margin-bottom: 12px; font: 700 13px var(--display); color: var(--ink-2); }
.form label input, .form label select, .form label textarea { display: block; width: 100%; margin-top: 4px; font-weight: 400; }
.form h2 { margin-top: 18px; }
.form label.err input, .form label.err select { border-color: var(--warn); }
.errtext { color: var(--warn); font: 400 14px var(--text); }
.actions { margin-top: 8px; display: flex; gap: 14px; align-items: center; }
.search input { width: 100%; margin: 4px 0 16px; }

/* messages */
.msgs { margin-bottom: 14px; }
.msg { padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; background: var(--tint); border-left: 4px solid var(--cyan); color: var(--ink-2); }
.msg.error { background: #F6E4DE; border-left-color: var(--warn); }
.msg.warning { background: #FFF4DC; border-left-color: var(--wait); }
.msg.success { background: #E4F3EA; border-left-color: var(--ok); }

/* login */
.login { max-width: 360px; margin: 60px auto; }
.login .card label { display: block; margin-bottom: 12px; font: 700 13px var(--display); color: var(--ink-2); }
.login .card input { display: block; width: 100%; margin-top: 4px; }
.login .btn { width: 100%; }

/* dashboard */
.attn { list-style: none; margin: 0; padding: 0; }
.attn li a { display: block; background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--warn); border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; color: var(--ink); }
.attn li a:hover { text-decoration: none; border-color: var(--navy); }
.attn .why { display: block; color: var(--grey-1); font-size: 14px; }
.seg { display: flex; border: 1px solid var(--rule-1); border-radius: 4px; overflow: hidden; }
.seg a { padding: 4px 12px; font: 700 13px var(--display); color: var(--ink); }
.seg a.on { background: var(--navy); color: var(--white); }

/* tables */
table.list { width: 100%; border-collapse: collapse; background: var(--white); font-size: 15px; }
table.list th { background: var(--navy); color: var(--white); font: 700 12px var(--display); text-align: left; padding: 8px; letter-spacing: .03em; }
table.list td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.list tbody tr:nth-child(odd) td { background: var(--row); }
table.list tbody tr[onclick] { cursor: pointer; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.docs tr.older td { color: var(--grey-2); }
table.docs td.dl a { margin-right: 10px; white-space: nowrap; }
.ok { color: var(--ok); } .warn { color: var(--warn); }
.pill { font: 700 11px var(--display); text-transform: uppercase; letter-spacing: .05em; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.pill.active { background: var(--tint); color: var(--cyan-ink); }
.pill.waiting { background: #FFF4DC; color: var(--wait); }
.pill.blocked { background: #F6E4DE; color: var(--warn); }
.pill.completed { background: #E4F3EA; color: var(--ok); }

/* customer directory */
.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.person { display: block; background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; color: var(--ink); }
.person:hover { border-color: var(--cyan); text-decoration: none; }
.person .name { display: block; font: 900 16px var(--display); color: var(--navy); }
.person .meta { display: block; font-size: 14px; color: var(--grey-1); margin-top: 3px; }
.person.vendor .name { display: block; }
.person.vendor .contact { color: var(--ink); }
.person.vendor .edit { display: inline-block; margin-top: 8px; font-size: 13px; }
table.contacts input { width: 100%; font-size: 15px; padding: 6px; }
table.contacts input[type=checkbox] { width: auto; }

/* project page */
.head .cust { font-size: 24px; margin-bottom: 4px; }
.head .meta { color: var(--grey-1); margin-bottom: 2px; }
.head .phone { font: 700 16px var(--display); }
.head .links { display: flex; flex-direction: column; gap: 4px; font-size: 14px; text-align: right; }
.state { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.state details summary { cursor: pointer; color: var(--navy); font-size: 14px; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.upload select { min-width: 200px; }
.upload input[type=text] { flex: 1; min-width: 160px; }
.bin { margin-top: 14px; font-size: 14px; }
.inline-form { display: inline; }
ul.log { list-style: none; padding: 0; margin: 0; font-size: 14px; }
ul.log li { padding: 5px 0; border-bottom: 1px solid var(--rule); }
ul.log .when { color: var(--grey-2); margin-right: 6px; }

/* next step box */
.nextbox { margin-top: 12px; background: var(--tint); border-left: 4px solid var(--cyan); padding: 8px 12px; color: var(--ink-2); }
.nextbox .lbl, .reqdocs .lbl { font: 700 11px var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--grey-1); margin-right: 6px; }
.attn .next { display: block; color: var(--navy); font-size: 14px; }

/* steps */
ol.stages { list-style: none; margin: 0; padding: 0; }
.stage { border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 8px; background: var(--white); }
.stage summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.stage summary::-webkit-details-marker { display: none; }
.stage .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rule); color: var(--ink); font: 700 13px var(--display); display: flex; align-items: center; justify-content: center; }
.stage.current { border-color: var(--navy); border-width: 2px; }
.stage.current .num { background: var(--navy); color: var(--white); }
.stage.done .num { background: #E4F3EA; color: var(--ok); }
.stage.done .st-title { color: var(--grey-2); }
.stage .st-title { font: 700 15px var(--display); color: var(--navy); flex: 1; }
.stage .prog { font-size: 13px; color: var(--grey-2); }
.stage details > *:not(summary) { margin-left: 48px; margin-right: 12px; }
.guide { color: var(--ink-2); margin: 0 0 10px; }
.portals { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.otp { font-size: 14px; color: var(--grey-1); }
ul.tasks { list-style: none; padding: 0; margin: 0 0 10px; }
.task { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.task .box { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--grey-5); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ok); }
.task.done .box { border-color: var(--ok); background: #E4F3EA; }
.task.done .t-text, .task.na .t-text { color: var(--grey-2); }
.task .t-text { flex: 1; }
.t-actions { display: flex; gap: 10px; align-items: center; margin: 0; flex: none; }
.reqdocs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; margin-bottom: 12px; }
.skip { margin: 0 0 12px; font-size: 14px; }
.warn.small { font-size: 13px; }
.btn.outline { background: var(--white); color: var(--navy) !important; border: 1px solid var(--navy); }
.btn.outline:hover { background: var(--tint); }
.btns { display: flex; gap: 8px; }

/* forms: quotes, vendors */
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
table.items input, table.items select { width: 100%; padding: 6px; font-size: 15px; }
table.items td { padding: 4px; }
table.items input.desc { min-width: 260px; }
table.items tfoot td { background: var(--white) !important; border: 0; }
.num { text-align: right; white-space: nowrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters input { flex: 1; min-width: 200px; margin: 0; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 14px; }
.person progress { width: 100%; height: 6px; margin-top: 6px; accent-color: var(--cyan); }

/* back link, name row, logins table, pop-ups */
.backlink { display: inline-block; margin: 0 0 12px; font: 700 14px var(--display); }
.namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.namerow .cust { margin: 0 6px 0 0; }
table.logins td { vertical-align: middle; }
table.logins input { width: 100%; font-size: 14px; padding: 5px 8px; }
input.secret:not(:placeholder-shown):not(:focus):not(:hover) { filter: blur(4px); }   /* privacy screen: hover or tap to read */
table.items th:first-child { width: 42%; }
table.items th:nth-child(5) { width: 84px; }
table.items select { min-width: 72px; }
.savebar { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.savebar .help { margin: 0; }
dialog.dlg { width: min(980px, 96vw); max-height: 92vh; border: 0; border-radius: 8px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,32,96,.25); }
dialog.dlg.small { width: min(560px, 96vw); }
dialog.dlg::backdrop { background: rgba(0, 21, 64, .45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dlg-head h2 { margin: 0; }

/* portal buttons under the consumer information */
.portalbar { padding: 12px 16px; }
.portal-row { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.portal { display: flex; flex-direction: column; gap: 3px; }
.plogin { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.plogin .mono { font-size: 13px; }
.portalbar .help { margin-bottom: 0; }
.nextbox .jump { float: right; font-size: 14px; }

/* tabs */
.tabbar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--rule); margin: -4px 0 14px; align-items: flex-end; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 8px 12px; font: 700 14px var(--display); color: var(--grey-1); cursor: pointer; }
.tab.on { color: var(--navy); border-bottom-color: var(--cyan); }
.tab .count { font-size: 11px; }
.tabbar .hider { margin-left: auto; font-size: 13px; padding: 8px 4px; }
.tabs:not(.js) .tab, .tabs:not(.js) .hider { display: none; }      /* no JavaScript: panels stack */
.panel .btns { margin-bottom: 12px; }
.showbar { margin: -8px 0 22px; }
.sechead { margin-bottom: 8px; }
.sechead h2 { margin: 0; }
.sechead .hider { font-size: 13px; }
.inline-upload { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.inline-upload input[type=file] { max-width: 230px; font-size: 14px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 12px; }
.form label.check { display: flex; gap: 6px; align-items: center; font: 400 15px var(--text); }
.form label.check input { width: auto; margin: 0; }

@media (max-width: 700px) {
  .nextbox .jump { float: none; display: block; }
  .stage details > *:not(summary) { margin-left: 12px; }
  .task { flex-wrap: wrap; }
  .t-actions { width: 100%; justify-content: flex-end; }
  .hide-s { display: none; }
  header nav { order: 3; width: 100%; flex: none; }
  .who { margin-left: auto; }
  .head .links { text-align: left; flex-direction: row; gap: 14px; }
  .upload select, .upload input, .upload .btn { width: 100%; }
  table.list { font-size: 14px; }
}

/* ---------------------------------------------------------------- phones: tables become cards */
@media (max-width: 700px) {
  header.top nav { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  header.top nav a { flex: none; }
  main { padding: 12px 12px 60px; }
  .card { padding: 12px; }

  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tbody tr { border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 10px; padding: 8px 10px; background: var(--white); }
  table.stack tbody tr:nth-child(odd) td { background: none; }
  table.stack td { border: 0; padding: 4px 0; }
  table.stack td.hide-s { display: none; }
  table.stack td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  table.stack td[data-label]::before { content: attr(data-label); flex: none; font: 700 11px var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--grey-1); }
  table.stack td.cardhead { font-size: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
  table.stack td:empty { display: none; }
  table.stack td.dl a { margin: 0 0 0 12px; }

  /* inputs inside cards: label on top, full width */
  table.logins td[data-label], table.items td[data-label] { display: block; }
  table.logins td[data-label]::before, table.items td[data-label]::before { display: block; margin-bottom: 3px; }
  table.logins input, table.items input, table.items select { width: 100%; font-size: 16px; padding: 8px; }
  table.items th:first-child, table.items th:nth-child(5) { width: auto; }
  table.items input.desc { min-width: 0; }
  table.items td.amt { display: flex; }
  table.items tfoot, table.items tfoot tr { display: block; }
  table.items tfoot tr { display: flex; justify-content: space-between; padding: 4px 2px; }
  table.items tfoot td { display: block; width: auto; padding: 0; }
  .inline-upload input[type=file] { max-width: 100%; width: 100%; }

  /* pop-ups fill the phone screen */
  dialog.dlg, dialog.dlg.small { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 14px; }
  .namerow .btn { padding: 8px 12px; }
  .savebar .btn, .actions .btn { padding: 10px 18px; }
}

/* phones: compact cards (two fields per line) */
@media (max-width: 700px) {
  table.logins tbody tr, table.items tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  table.logins td.cardhead, table.items td[data-label="Description"], table.items td.amt { grid-column: 1 / -1; }
  table.items td.amt { justify-content: space-between; }
  table.items td.amt::before { display: inline; margin: 0; }
}