/* Residential Builder CRM – shared styles. Brand colors come from assets/brand.css (generated per customer). */
*,*::before,*::after{box-sizing:border-box}
:root{--primary:#1f3a5f;--accent:#d9822b;--dark:#14202e;--ink:#1d2430;--muted:#5b6574;--line:#e3e7ec;--bg:#f5f6f8;--radius:10px;--ok:#1a7f37;--bad:#b42318;--warn:#9a6700}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;font-size:16px}
h1,h2,h3{color:var(--dark);line-height:1.2;margin:0 0 .5em}
h1{font-size:1.6rem}h2{font-size:1.15rem}h3{font-size:1rem;margin-top:1em}
a{color:var(--primary)}
.wrap{width:min(1200px,94vw);margin:0 auto;padding:16px 0 48px}
.crew.wrap{width:min(720px,94vw)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wrap-row{align-items:flex-end}
.spacer{flex:1}
.grow{flex:1 1 280px}
.stack>*+*{margin-top:10px}
.muted{color:var(--muted)}.small{font-size:.875rem}
.pre{white-space:pre-wrap;margin:.25em 0}
.plain{text-decoration:none;color:inherit}
.hidden,[hidden]{display:none!important}

.sample-banner{background:#fff3cd;color:#5c4400;border-bottom:1px solid #f0d98a;padding:8px 4vw;font-size:.9rem;text-align:center}
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar .wrap{padding:8px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:36px;height:36px;border-radius:6px}
.brand strong{display:block;color:var(--dark)}.brand small{display:block;color:var(--muted)}
.monogram{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--primary);color:#fff;font-weight:800}
.nav{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:500}
.nav.active{background:var(--bg);color:var(--primary)}
.who{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 14px}
.cards{display:grid;gap:12px}
.job-card{display:block}.job-card:hover{border-color:var(--primary)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid4{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px}
@media (max-width:600px){.grid2,.grid4{grid-template-columns:1fr}}

label{display:block;font-weight:600;font-size:.9rem}
label.inline{display:inline-flex;align-items:center;gap:6px;font-weight:400}
.hint{display:block;font-weight:400;color:var(--muted);font-size:.8rem;margin:2px 0 0}
input,select,textarea{display:block;width:100%;font:inherit;padding:9px 10px;border:1px solid #c9d0d8;border-radius:8px;background:#fff;margin-top:4px}
input[type=checkbox]{display:inline-block;width:auto;margin:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
legend{font-weight:700;padding:0 4px}

.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:11px 18px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;min-height:44px}
.btn:hover{filter:brightness(.94)}.btn:disabled{opacity:.6;cursor:wait}
.btn-sm{padding:7px 14px;min-height:36px;background:var(--primary)}
.btn-ghost{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}
.link{background:none;border:0;padding:0;color:var(--primary);text-decoration:underline;cursor:pointer;font:inherit}
.danger{color:var(--bad)}
.back{display:inline-block;margin:4px 0 10px}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:600;background:var(--bg);color:var(--dark);white-space:nowrap}
.stage-won,.status-done{background:#dcf5e3;color:var(--ok)}
.stage-lost,.status-blocked{background:#fde4e1;color:var(--bad)}
.status-in_progress{background:#e0ecff;color:#174ea6}
.status-scheduled{background:#fff3cd;color:var(--warn)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;border-radius:4px;padding:1px 6px;text-transform:uppercase;letter-spacing:.02em}
.tag.office{background:#fde4e1;color:var(--bad)}
.tag.crew{background:#dcf5e3;color:var(--ok)}
.tag.warn{background:#fff3cd;color:var(--warn)}

.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
table.list{width:100%;border-collapse:collapse;font-size:.92rem}
.list th,.list td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.list th{background:var(--bg);font-size:.8rem;text-transform:uppercase;color:var(--muted)}
.list tbody tr{cursor:pointer}.list tbody tr:hover{background:#fafbfc}
.list select{min-width:160px}
input[type=search]{margin:0 0 10px;max-width:420px}

.plain-list{list-style:none;padding:0;margin:0}
.assignment{border-top:1px solid var(--line);padding:10px 0}
.assignment select{width:auto;margin:0}
.timeline{list-style:none;padding:0;margin:12px 0 0}
.timeline li{border-top:1px solid var(--line);padding:8px 0}
.status-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:10px 0}
.btn-status{background:#fff;color:var(--dark);box-shadow:inset 0 0 0 2px var(--line)}
.btn-status.current{background:var(--primary);color:#fff;box-shadow:none}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.file{margin:0}.file img,.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--bg)}
.thumb{display:grid;place-items:center;font-weight:700;color:var(--muted)}
.sub-card summary{cursor:pointer;list-style:none}.sub-card.inactive{opacity:.7}
.sub-form{border-top:1px solid var(--line);margin-top:12px;padding-top:4px}

.login-wrap{min-height:80vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(420px,94vw)}
.login-card>*+*{margin-top:12px}
.form-error{color:var(--bad);min-height:0;margin:0}
.demo-accounts{border-top:1px dashed var(--line);padding-top:10px}
.demo-accounts .chip{margin:3px 4px 0 0;text-align:left}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--dark);color:#fff;padding:10px 16px;border-radius:8px;z-index:50;max-width:90vw}
.toast.err{background:var(--bad)}
.choose{display:grid;gap:12px}
.pill.unread{background:var(--accent);color:#fff;margin-left:6px}
.messages{list-style:none;padding:0;margin:8px 0;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.message{background:var(--bg);border-radius:10px;padding:8px 10px;max-width:85%}
.message.mine{align-self:flex-end;background:#e7eef6}
.thread form{border-top:1px solid var(--line);padding-top:10px}
.staff-banner{padding:8px 4vw;font-size:.9rem;text-align:center;border-bottom:1px solid var(--line)}
.staff-banner.admin{background:#1f2a44;color:#fff}.staff-banner.admin a{color:#fff}
.staff-banner.support{background:#e0ecff;color:#174ea6}
.btn.choice{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.btn.choice small{font-weight:400}
.mainnav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.navitem{padding:6px 10px;border-radius:8px;font-weight:500;text-decoration:none;color:var(--ink);white-space:nowrap}
a.navitem:hover{background:var(--bg)}
.navitem.active{background:var(--bg);color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
.navitem.soon{display:flex;flex-direction:column;justify-content:center;padding:2px 10px;line-height:1.15;color:#a3aab3;cursor:default;user-select:none}
.navitem.soon .soon-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
.soon{color:#a3aab3}
.tag.money{background:#efe6ff;color:#5b2d9e}
tr.inactive td{opacity:.6}
.role-pick{text-align:left;cursor:pointer;font:inherit}
.role-pick.active{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.cards:has(.role-pick){grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.matrix td.c,.matrix th.c{text-align:center;width:70px}
.matrix tr.cat td{background:var(--bg)}
.matrix tr.soon td{color:#a3aab3}
.matrix tr.gated td{opacity:.35}
.matrix td.na{color:#c9d0d8}
.matrix tbody tr{cursor:default}

/* Home-screen tiles and dashboards (office-dir.js): Client/Project, Subcontractors, Suppliers, Estimating, Company */
.title-row{gap:6px 12px;margin-bottom:2px}
.title-row h1{margin:0}
.tabs{display:flex;gap:2px;flex-wrap:wrap;background:#e9ecf0;border-radius:10px;padding:3px}
.tab{padding:5px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500}
.tab.active{background:#fff;color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dash-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:8px 0 4px}
.dash-search{display:flex;align-items:center;gap:8px;flex:1 1 360px;max-width:600px}
.dash-search input[type=search]{flex:1;min-width:0;max-width:none;margin:0}
.add-btn{white-space:nowrap}
.add-btn.disabled{background:#d5dae0;color:#8a929c;cursor:not-allowed}
.dash-view{display:flex;flex-wrap:wrap;gap:8px 14px}
.dash-sort{font-size:.85rem;color:var(--muted)}
.dash-sort select{width:auto;margin:0;padding:6px 8px;font-size:.9rem;color:var(--ink)}
.dash-bar input:disabled,.dash-bar select:disabled{background:#eef0f3;color:#a3aab3;border-color:#e3e7ec;cursor:not-allowed}
.dash-foot{margin-top:12px}
.tile-group-head{display:flex;align-items:center;gap:8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 0 6px}
.tile-group-head .count{background:#e3e7ec;color:var(--dark);border-radius:999px;padding:0 7px;font-size:.72rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.tile{display:flex;align-items:center;gap:10px;min-width:0;min-height:60px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)}
a.tile:hover,a.tile:focus-visible{border-color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tile.dim{opacity:.55}
.tile.soon{background:#f7f8fa;border-style:dashed;cursor:default}
.tile.soon .tile-top,.tile.soon .tile-bottom{color:#a3aab3}
/* every icon – initials or line art – gets exactly the same box */
.tile-icon{position:relative;flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--primary);color:#fff;font-weight:800;font-size:.95rem;box-sizing:border-box}
.tile-icon svg{width:24px;height:24px;display:block}
.tile-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tile-top,.tile-bottom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-top{font-weight:600;color:var(--dark)}
.tile-bottom{font-size:.82rem;color:var(--muted)}
.tile-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:.7rem;line-height:18px;text-align:center;border:2px solid #fff;box-sizing:content-box}
.tile-badge.warn{background:#d4a017;color:#231a00}
.company-tiles{margin-top:10px}
.folder-head .tile{border:0;background:transparent;padding-left:0;box-shadow:none}
.folder-head .tile .tile-top{font-size:1.4rem}
.project-head h1{margin:0}
.project-head .stage-label{font-weight:600}
.project-head .wrap-row label{flex:1 1 180px}
.notice{background:#eef4fb;border:1px solid #cfdff0;color:#1f3a5f;border-radius:8px;padding:8px 10px;margin:0}
.example-note{margin:10px 0 0}
.soon-tag{background:#eef0f3;color:#8a929c}
.soon-card{color:#8a929c;border-style:dashed}
.soon-card h2{color:#8a929c}
/* icon colours: projects by lifecycle stage (slots – final art comes later), companies/clients by name or industry */
.tile-icon.lc-lead{background:#6b7280}.tile-icon.lc-estimate{background:#2563a8}.tile-icon.lc-contract{background:#7048a8}
.tile-icon.lc-construction{background:#d97706}.tile-icon.lc-completion{background:#22a04b}.tile-icon.lc-warranty{background:#166534}
.tile-icon.lc-lost{background:#a8adb5}.tile-icon.lc-archived{background:#7c8a80}
.tile-icon.lc-feature{background:var(--primary)}.tile-icon.lc-soon{background:#c9ced5}
.tile-icon.c0{background:#2f6fb0}.tile-icon.c1{background:#1a7f37}.tile-icon.c2{background:#b7791f}.tile-icon.c3{background:#7057a8}
.tile-icon.c4{background:#c2621c}.tile-icon.c5{background:#2a8f8a}.tile-icon.c6{background:#a23b5b}.tile-icon.c7{background:#4a5a6e}
@media (max-width:600px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .company-tiles{grid-template-columns:1fr}
  .tile{gap:6px;min-height:48px;padding:5px 6px;border-radius:10px}
  .tile-icon{width:32px;height:32px;border-radius:8px;font-size:.78rem}
  .tile-icon svg{width:20px;height:20px}
  .tile-top{font-size:.88rem}
  .tile-bottom{font-size:.74rem}
  .tile-group-head{margin:8px 0 4px}
  .title-row{gap:4px 8px}
  .tabs{order:3;width:100%}
  .tab{flex:1;text-align:center;padding:4px 6px;font-size:.85rem}
  /* phone: view controls first, then the search bar + "+ New …", directly above the tiles */
  .dash-bar{flex-direction:column-reverse;align-items:stretch;gap:6px;margin:6px 0 2px}
  .dash-search{max-width:none;flex:none}
  .dash-search input[type=search]{padding:7px 10px}
  .add-btn{padding:5px 9px;font-size:.92rem}
  .dash-view{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .dash-view>:only-child{grid-column:1/-1}
  .dash-sort .lbl{display:none}
  .dash-sort select{width:100%;padding:6px 6px;font-size:.85rem}
  main.wrap h1{font-size:1.3rem;margin-bottom:.3em}
  main.wrap .btn-sm{min-height:34px;padding:5px 12px}
  .topbar .wrap{padding:4px 0}
  .topbar .row{gap:4px 8px}
  .navitem{padding:4px 7px}
  .folder-head .tile{min-width:0}
}