/* Unite Solar — app interface (CRM shell) shared by the quotations app and the PPA app.
   Loaded after each page's own styles. Every rule here is scoped to the interface
   (sidebar, top bar, forms, dashboard, settings, sign-in); the quotation / proposal / agreement
   pages (#doc, .paper, .pg, .agr-doc, .apg) are never styled here, so the PDFs stay exactly as designed. */

:root{
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sun:#FD6E03; --sun-600:#E55F00; --sun-soft:#FFF3EA; --sun-ring:rgba(253,110,3,.18);
  --ink:#111827; --ink-2:#374151; --muted:#6B7280; --faint:#9CA3AF;
  --bg:#F5F6F8; --panel:#FFFFFF; --line:#E5E7EB; --line-2:#D1D5DB; --field:#FFFFFF; --hover:#F3F4F6;
  --ok:#15803D; --bad:#B91C1C;
  --side-w:232px; --top-h:60px; --r:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --sun-soft:#3A2412; --ink:#F3F4F6; --ink-2:#D1D5DB; --muted:#9CA3AF; --faint:#6B7280;
  --bg:#0F1115; --panel:#171A20; --line:#262A33; --line-2:#343A46; --field:#1D2129; --hover:#1F232B; --ok:#4ADE80; --bad:#F87171; } }
:root[data-theme="dark"]{
  --sun-soft:#3A2412; --ink:#F3F4F6; --ink-2:#D1D5DB; --muted:#9CA3AF; --faint:#6B7280;
  --bg:#0F1115; --panel:#171A20; --line:#262A33; --line-2:#343A46; --field:#1D2129; --hover:#1F232B; --ok:#4ADE80; --bad:#F87171; }

/* The body keeps the page's own base size (the documents inherit it); the interface sets 14px on its own areas. */
body{font-family:var(--ui);background:var(--bg);color:var(--ink)}
.side,header.top,#build,#saved,#settings,.toolbar,#login,.toast,.agr-bar,.tplp{font-size:14px;line-height:1.5}
.side,header.top,#build,#saved,#settings,#login,.toolbar,.agr-bar,.tplp{-webkit-font-smoothing:antialiased}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto}
.side .brand{display:flex;align-items:center;padding:4px 8px 16px}
.side .brand img{height:30px;display:block}
:root[data-theme="dark"] .side .brand,.dark-logo .side .brand{background:#fff;border-radius:8px;padding:6px 8px;margin-bottom:12px}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .side .brand{background:#fff;border-radius:8px;padding:6px 8px;margin-bottom:12px} }
.side .nav-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.side .tabs{display:flex;flex-direction:column;gap:2px;background:none;border-radius:0;padding:0}
.side .tabs button,.side .nav-link{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 10px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--ink-2);text-align:left;text-decoration:none;cursor:pointer;box-shadow:none}
.side .tabs button:hover,.side .nav-link:hover{background:var(--hover);color:var(--ink)}
.side .tabs button[aria-selected="true"],.side .nav-link.on{background:var(--sun-soft);color:var(--sun-600);font-weight:600}
:root[data-theme="dark"] .side .tabs button[aria-selected="true"],:root[data-theme="dark"] .side .nav-link.on{color:#FDBA8C}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .side .tabs button[aria-selected="true"],:root:not([data-theme="light"]) .side .nav-link.on{color:#FDBA8C} }
.side svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side .tabs .only-m{display:none}
.side .grow{flex:1;min-height:16px}
.side .me{display:flex;align-items:center;gap:10px;padding:10px 8px 2px;border-top:1px solid var(--line);margin-top:8px}
.side .me .av{width:32px;height:32px;border-radius:50%;background:var(--sun-soft);color:var(--sun-600);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.side .me .who{min-width:0;flex:1}
.side .me .who b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me .who small{display:block;font-size:12px;color:var(--muted)}
.side .me button{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);border-radius:8px;padding:5px 9px;font-size:12.5px;cursor:pointer}
.side .me button:hover{background:var(--hover)}

.content{min-width:0;display:flex;flex-direction:column}
header.top{position:sticky;top:0;z-index:20;height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 28px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
header.top .ttl{min-width:0}
header.top h1{margin:0;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
header.top p{margin:1px 0 0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top .m-brand{display:none}
header.top .sp{flex:1}
main{flex:1}

/* ---------- buttons & fields (interface only) ---------- */
.content .btn,#login .btn,.agr-bar .btn,.tplp .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:8px;
  font-size:13.5px;font-weight:500;border:1px solid transparent;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow);transition:background .12s,border-color .12s}
.content .btn.sun,#login .btn.sun,.agr-bar .btn.sun,.tplp .btn.sun{background:var(--sun);color:#fff}
.content .btn.sun:hover,#login .btn.sun:hover,.agr-bar .btn.sun:hover,.tplp .btn.sun:hover{background:var(--sun-600)}
.content .btn.ghost,.agr-bar .btn.ghost,.tplp .btn.ghost{background:var(--panel);border-color:var(--line-2);color:var(--ink)}
.content .btn.ghost:hover,.agr-bar .btn.ghost:hover,.tplp .btn.ghost:hover{background:var(--hover)}
.content .btn:disabled{opacity:.55;cursor:default}
.content .mini-btn{border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);border-radius:7px;padding:4px 10px;font-size:12.5px;font-weight:500;cursor:pointer}
.content .mini-btn:hover{background:var(--hover);color:var(--ink)}

.content label.f,#login label.f{gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.content label.f input,.content label.f select,.content label.f textarea,#login label.f input,
.content .dfil select,.content .dbar select,#teamTbl input,#teamTbl select,.lib .fields input,.lib .fields select{
  background:var(--field);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font-size:14px;color:var(--ink);min-height:38px;box-shadow:var(--shadow)}
.content label.f textarea{line-height:1.5}
.content input:focus,.content select:focus,.content textarea:focus,#login input:focus{outline:none;border-color:var(--sun);box-shadow:0 0 0 3px var(--sun-ring)}
.content button:focus-visible,.side button:focus-visible,.side a:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.content .check{font-size:13.5px;color:var(--ink-2)}
.content .check input{accent-color:var(--sun)}
.content .hint{font-size:12.5px;color:var(--muted)}

/* ---------- builder: form column ---------- */
#build{background:var(--bg);border-right:1px solid var(--line);padding:20px 20px 0}
#build .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--hover);margin-bottom:14px}
#build .seg button{border:0;border-radius:7px;padding:9px 12px;background:transparent;color:var(--ink-2);text-align:left}
#build .seg button b{font-size:14px;font-weight:600}
#build .seg button span{font-size:12px;color:var(--muted);opacity:1}
#build .seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.1)}
#build .seg button[aria-pressed="true"] span{color:var(--muted)}
#build details.sec,#settings .set-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 16px;margin-bottom:12px;box-shadow:var(--shadow)}
#build details.sec>summary,#settings details.sec>summary{padding:13px 0;font-size:14.5px;font-weight:600;color:var(--ink);gap:10px}
#build details.sec>summary::before,#settings details.sec>summary::before{order:2;margin-left:8px;width:7px;height:7px;border-color:var(--faint);transform:rotate(45deg)}
#build details.sec[open]>summary::before,#settings details.sec[open]>summary::before{transform:rotate(-135deg)}
#build details.sec>summary small,#settings details.sec>summary small{order:1;font-size:12.5px;font-weight:500;color:var(--muted);max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#build details.sec[open]>summary,#settings details.sec[open]>summary{border-bottom:1px solid var(--line);margin-bottom:14px}
#build .grid,#settings .grid{gap:12px 14px;padding-bottom:16px}
#build .totalbar{position:sticky;bottom:0;margin:auto -20px 0;padding:12px 20px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--panel);color:var(--ink);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(16,24,40,.06);z-index:5}
#build .totalbar .lbl{font-size:12px;color:var(--muted);opacity:1}
#build .totalbar .amt{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
#build .totalbar .btn.ghost{border-color:var(--line-2);color:var(--ink)}
#build .internal{background:var(--sun-soft);border:1px solid color-mix(in srgb,var(--sun) 25%,transparent)}
#build .ghi input,#build .lib .fields input{border:1px solid var(--line-2);background:var(--field)}
#build .chips button,#settings .chips button{border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);font-size:12px;padding:3px 10px}
#build .chips button:hover,#settings .chips button:hover{border-color:var(--sun);color:var(--sun-600)}

/* ---------- builder: preview column ---------- */
#previewWrap{background:var(--bg);padding:20px 24px 40px}
#previewWrap .toolbar{position:sticky;top:calc(var(--top-h) + 8px);z-index:10;max-width:none;margin:0 auto 18px;padding:8px;justify-content:flex-end;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(16,24,40,.06);width:fit-content;margin-left:auto}

/* ---------- pages: dashboard & settings ---------- */
#saved,#settings{padding:24px 28px 48px;max-width:1240px}
#saved h2.pg,#settings h2.pg,#saved h2.pgh,#settings h2.pgh{display:none}
.content .card,.content .imp{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.content .card{padding:16px 18px}
.content .card h3{font-size:14px;font-weight:600;margin:0 0 12px;color:var(--ink)}
.content .imp{border-style:dashed;border-color:var(--line-2)}
.content .dfil,.content .dbar{gap:8px}
.content .dfil select,.content .dbar select{min-height:36px;padding:6px 10px;font-size:13.5px}
.content .kpis{gap:12px}
.content .kpis>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.content .kpis small{font-size:12.5px;font-weight:500;color:var(--muted)}
.content .kpis b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.content .tbl{font-size:13.5px}
.content .tbl th{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--hover);padding:9px 10px;border-bottom:1px solid var(--line)}
.content .tbl th:first-child{border-top-left-radius:8px}.content .tbl th:last-child{border-top-right-radius:8px}
.content .tbl td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.content .tbl tbody tr:hover td{background:color-mix(in srgb,var(--hover) 60%,transparent)}
.content .st{border-radius:999px;font-size:12px;font-weight:500;padding:3px 10px;min-height:0;box-shadow:none}
.content .empty{background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted)}
.content .pipe{height:10px;border-radius:999px}
.content .mail{font-size:12px}
#settings .set-card{padding:0 18px}
#settings .set-card>details.sec{border:0;padding:0;margin:0;background:none;box-shadow:none}
#settings #storeNote,#saved #dashNote{margin-top:8px}

/* ---------- toast ---------- */
.toast{background:#111827;color:#fff;border-radius:10px;padding:10px 16px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.2)}

/* ---------- sign in ---------- */
#login{background:radial-gradient(1200px 600px at 20% -10%,var(--sun-soft),transparent 60%),var(--bg)}
#login .box{border:1px solid var(--line);border-radius:14px;padding:32px 28px;max-width:400px;box-shadow:0 10px 30px rgba(16,24,40,.08);background:var(--panel)}
#login .logo-chip{padding:0;background:transparent;margin-bottom:22px}
#login h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
#login p{font-size:13.5px;color:var(--muted);margin:0 0 22px}
#login label.f{margin-bottom:14px}
#login .btn{width:100%;height:40px;font-size:14px;font-weight:600;margin-top:4px}

/* ---------- PPA agreement viewer bar ---------- */
.agr-bar{height:auto;min-height:var(--top-h);padding:10px 20px}
.agr-bar .tabs{background:var(--hover);border-radius:9px;padding:3px}
.agr-bar .tabs button{border-radius:7px}

/* ---------- tablet & phone ---------- */
@media (max-width:900px){
  .shell{display:block}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:40;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    border-right:0;border-top:1px solid var(--line);overflow:visible;box-shadow:0 -4px 16px rgba(16,24,40,.06)}
  .side .brand,.side .nav-label,.side .grow,.side .apps,.side .me{display:none}
  .side .tabs{flex-direction:row;width:100%;gap:2px}
  .side .tabs button{flex:1;flex-direction:column;gap:3px;padding:6px 2px;font-size:11.5px;justify-content:center;text-align:center}
  .side .tabs .only-m{display:flex}
  .side .tabs button[aria-selected="true"]{background:transparent;color:var(--sun-600)}
  header.top{padding:0 14px;gap:10px}
  header.top .m-brand{display:flex;align-items:center}
  header.top .m-brand img{height:26px}
  header.top .ttl{display:none}
  header.top .m-acts{display:flex;align-items:center;gap:6px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  #build{border-right:0;padding:14px 14px 0}
  #build .totalbar{margin:auto -14px 0;padding:10px 14px;bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  #previewWrap{padding:14px}
  #previewWrap .toolbar{position:static;width:auto;justify-content:center;flex-wrap:wrap}
  #saved,#settings{padding:16px 14px 32px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:901px){ header.top .m-acts{display:none} }
@media print{ .side,header.top{display:none!important} .shell{display:block} body{padding:0!important;background:#fff} }