/* Ferguson Home Designs — staff portal UI (matches the brand system) */
:root{
  --walnut:#3d2f24; --walnut-70:rgba(61,47,36,0.7); --walnut-50:rgba(61,47,36,0.5);
  --walnut-35:rgba(61,47,36,0.35); --walnut-12:rgba(61,47,36,0.12); --walnut-04:rgba(61,47,36,0.04);
  --terra:#b3704d; --sage:#7d8a6f; --sage-30:rgba(125,138,111,0.3);
  --antique:#f0ebe0; --stone:#c9bfa8; --paper:#fbf9f4; --ink:#2a211a;
  --ff-display:'Playfair Display',serif; --ff-body:'Lora',serif; --ff-ui:'DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-ui);color:var(--ink);background:var(--walnut-04);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--terra)}

/* ---- buttons ---- */
.btn{font-family:var(--ff-ui);font-size:0.85rem;font-weight:600;cursor:pointer;border:none;border-radius:6px;padding:0.55rem 1.1rem;background:var(--terra);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:opacity .15s}
.btn:hover{opacity:0.92}
.btn.ghost{background:transparent;color:var(--walnut);border:1px solid var(--walnut-35)}
.btn.sage{background:var(--sage)}
.btn.subtle{background:var(--walnut-04);color:var(--walnut-70);border:1px solid var(--walnut-12)}
.btn.danger{background:transparent;color:#a8472f;border:1px solid rgba(168,71,47,0.4)}
.btn.sm{padding:0.35rem 0.7rem;font-size:0.78rem;border-radius:5px}
.btn:disabled{opacity:0.5;cursor:default}

/* ---- inputs ---- */
label.fld{display:flex;flex-direction:column;gap:0.25rem}
.lbl{font-family:var(--ff-ui);font-size:0.62rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--walnut-50)}
input[type=text],input[type=email],input[type=password],textarea,select{
  font-family:var(--ff-body);font-size:0.92rem;color:var(--ink);border:1px solid var(--walnut-12);
  background:#fff;border-radius:6px;padding:0.5rem 0.6rem;width:100%;font:inherit;font-size:0.92rem}
textarea{font-family:var(--ff-body);resize:vertical;min-height:3rem}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(179,112,77,0.12)}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:1rem;background:var(--walnut);color:var(--antique);padding:0.7rem 1.3rem;position:sticky;top:0;z-index:40}
.topbar img{height:34px;width:auto;display:block}
.topbar .sp{flex:1}
.topbar a{color:var(--stone);text-decoration:none;font-size:0.85rem;font-weight:500}
.topbar a:hover{color:var(--antique)}
.topbar .who{font-size:0.8rem;color:rgba(240,235,224,0.7)}

/* ---- layout ---- */
.wrap{max-width:1080px;margin:0 auto;padding:1.6rem 1.3rem 4rem}
.page-title{font-family:var(--ff-display);font-size:1.9rem;font-weight:700;color:var(--walnut)}
.page-title em{font-style:italic;color:var(--terra)}
.muted{color:var(--walnut-50);font-size:0.85rem}
.card{background:#fff;border:1px solid var(--walnut-12);border-radius:10px;padding:1.1rem 1.2rem}
.row{display:flex;align-items:center;gap:0.7rem}
.between{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem 1rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.8rem 1rem}
.mt{margin-top:1rem}.mt2{margin-top:1.6rem}.mb{margin-bottom:0.8rem}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---- chips / tags ---- */
.chips{display:flex;flex-wrap:wrap;gap:0.4rem}
.chip{font-size:0.78rem;border:1px solid var(--walnut-35);border-radius:999px;padding:0.28rem 0.7rem;cursor:pointer;user-select:none;background:#fff}
.chip.on{background:var(--terra);border-color:var(--terra);color:#fff}
.chip.sage.on{background:var(--sage);border-color:var(--sage)}
.pill{font-size:0.6rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0.14rem 0.45rem;border-radius:3px}
.pill.must{background:var(--terra);color:#fff}.pill.rec{background:var(--sage);color:#fff}.pill.nice{background:var(--stone);color:var(--walnut)}
.pill.draft{background:var(--walnut-12);color:var(--walnut-70)}.pill.ready{background:var(--sage);color:#fff}

/* ---- centered auth ---- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(160deg,var(--walnut),#2a2019)}
.auth .box{background:var(--paper);border-radius:14px;padding:2.2rem;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,0.35)}
.auth h1{font-family:var(--ff-display);font-size:1.6rem;color:var(--walnut);margin-bottom:0.2rem}
.auth .sub{color:var(--walnut-50);font-size:0.85rem;margin-bottom:1.3rem}
.auth label.fld{margin-bottom:0.8rem}
.err{background:rgba(168,71,47,0.1);border:1px solid rgba(168,71,47,0.3);color:#a8472f;border-radius:6px;padding:0.5rem 0.7rem;font-size:0.82rem;margin-bottom:0.9rem;display:none}
.err.show{display:block}

/* ---- dashboard list ---- */
.proj{display:flex;align-items:center;gap:1rem;padding:0.9rem 1.1rem;border:1px solid var(--walnut-12);border-radius:10px;background:#fff;margin-bottom:0.6rem}
.proj .info{flex:1;min-width:0}
.proj .name{font-family:var(--ff-display);font-size:1.1rem;font-weight:700;color:var(--walnut)}
.proj .meta{font-size:0.78rem;color:var(--walnut-50)}
.empty{text-align:center;padding:3rem 1rem;color:var(--walnut-50)}

/* ---- workspace ---- */
.tabs{display:flex;flex-wrap:wrap;gap:0.4rem;margin:1rem 0 1.3rem;position:sticky;top:48px;background:var(--walnut-04);padding:0.5rem 0;z-index:30}
.tab{font-size:0.84rem;font-weight:600;padding:0.45rem 0.9rem;border-radius:7px;cursor:pointer;color:var(--walnut-70);border:1px solid transparent}
.tab.on{background:var(--walnut);color:var(--antique)}
.section{display:none}
.section.on{display:block}
.sec-head{font-family:var(--ff-display);font-size:1.3rem;font-weight:700;color:var(--walnut);margin-bottom:0.2rem}
.sec-sub{color:var(--walnut-50);font-size:0.84rem;margin-bottom:1rem}
.subhead{font-family:var(--ff-ui);font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--walnut);margin:1.4rem 0 0.6rem;display:flex;align-items:center;gap:0.5rem}
.subhead::after{content:'';flex:1;height:1px;background:var(--walnut-12)}

.roomcard{border:1px solid var(--walnut-12);border-radius:10px;background:#fff;margin-bottom:0.8rem;overflow:hidden}
.roomcard.off{opacity:0.55}
.roomcard .rc-head{display:flex;align-items:center;gap:0.8rem;padding:0.7rem 0.9rem;background:var(--walnut-04);border-bottom:1px solid var(--walnut-12);flex-wrap:wrap}
.roomcard .rc-name{font-family:var(--ff-display);font-size:1.05rem;font-weight:700;color:var(--walnut);border:none;background:transparent;flex:1;min-width:140px}
.roomcard .rc-body{padding:0.9rem;display:none}
.roomcard.open .rc-body{display:block}
.dots{display:inline-flex;gap:0.25rem}
.dot{width:0.85rem;height:0.85rem;border-radius:50%;border:1.5px solid var(--walnut-35);cursor:pointer}
.dot.on{background:var(--terra);border-color:var(--terra)}
.rec{display:flex;gap:0.5rem;align-items:flex-start;margin-bottom:0.4rem}
.rec select{width:auto;flex-shrink:0}
.rec textarea{min-height:2.2rem}
.photo-box{width:130px;height:98px;border:1.5px dashed var(--walnut-35);border-radius:6px;background:var(--walnut-04) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--walnut-50);font-size:0.7rem;text-align:center;cursor:pointer;flex-shrink:0}
.photo-box.filled{border-style:solid;color:transparent}

.savebar{position:fixed;bottom:0;left:0;right:0;background:var(--walnut);color:var(--antique);display:flex;align-items:center;gap:1rem;padding:0.7rem 1.3rem;z-index:45}
.savebar .status{font-size:0.8rem;color:rgba(240,235,224,0.7);flex:1}
.toast{position:fixed;top:64px;right:18px;background:var(--walnut);color:var(--antique);padding:0.6rem 0.9rem;border-radius:8px;font-size:0.83rem;opacity:0;transform:translateY(-6px);transition:.2s;z-index:60}
.toast.show{opacity:1;transform:none}

/* ---- address autocomplete ---- */
.addr-menu{position:absolute;top:100%;left:0;right:0;z-index:80;background:#fff;border:1px solid var(--walnut-12);border-radius:8px;box-shadow:0 12px 30px rgba(40,32,26,0.18);margin-top:2px;max-height:240px;overflow:auto}
.addr-item{padding:0.5rem 0.7rem;font-size:0.82rem;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--walnut-04);line-height:1.35}
.addr-item:last-child{border-bottom:none}
.addr-item:hover{background:rgba(125,138,111,0.12)}

/* ---- step nav (Back / Next) ---- */
.stepnav{display:flex;align-items:center;gap:1rem;margin:1.4rem 0 0.5rem}

/* ---- generate menu ---- */
.gen-menu{position:fixed;right:18px;bottom:62px;z-index:55;background:#fff;border:1px solid var(--walnut-12);border-radius:10px;box-shadow:0 16px 40px rgba(40,32,26,0.28);padding:0.4rem;display:none;min-width:260px}
.gen-menu .gen-title{font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--walnut-50);padding:0.45rem 0.6rem 0.3rem}
.gen-menu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--ff-ui);font-size:0.9rem;font-weight:600;color:var(--ink);padding:0.55rem 0.6rem;border-radius:7px}
.gen-menu button span{display:block;font-weight:400;font-size:0.74rem;color:var(--walnut-50);margin-top:1px}
.gen-menu button:hover{background:var(--walnut-04)}

/* ---- nav links in topbar ---- */
.topbar .navlink{color:var(--stone);font-weight:600;padding:0.3rem 0.1rem;border-bottom:2px solid transparent}
.topbar .navlink.active{color:var(--antique);border-bottom-color:var(--terra)}

/* ---- KPI cards ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0.8rem;margin-bottom:1.4rem}
.kpi{background:#fff;border:1px solid var(--walnut-12);border-radius:10px;padding:1rem 1.1rem}
.kpi .v{font-family:var(--ff-display);font-size:1.7rem;font-weight:700;color:var(--walnut);line-height:1.1}
.kpi .l{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--walnut-50);margin-top:0.2rem}

/* ---- pipeline board ---- */
.board{display:flex;gap:0.7rem;overflow-x:auto;padding-bottom:0.5rem}
.col{flex:1 0 180px;min-width:180px;background:var(--walnut-04);border-radius:10px;padding:0.6rem}
.col h3{font-family:var(--ff-ui);font-size:0.66rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--walnut-70);margin-bottom:0.5rem;display:flex;justify-content:space-between}
.col h3 .n{color:var(--walnut-35)}
.dealcard{background:#fff;border:1px solid var(--walnut-12);border-radius:8px;padding:0.55rem 0.65rem;margin-bottom:0.5rem;cursor:pointer}
.dealcard:hover{border-color:var(--terra)}
.dealcard .dc-name{font-weight:600;font-size:0.85rem;color:var(--walnut)}
.dealcard .dc-meta{font-size:0.72rem;color:var(--walnut-50);margin-top:0.15rem}
.dealcard .dc-val{font-family:var(--ff-ui);font-weight:700;color:var(--sage);font-size:0.8rem}

/* ---- generic modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(42,33,26,0.5);z-index:70;display:none;align-items:flex-start;justify-content:center;padding:3rem 1rem;overflow:auto}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:12px;max-width:660px;width:100%;padding:1.4rem;box-shadow:0 24px 60px rgba(0,0,0,0.3)}
.modal h2{font-family:var(--ff-display);font-size:1.3rem;color:var(--walnut);margin-bottom:1rem}
.modal h2 em{font-style:italic;color:var(--terra)}

/* ---- client header ---- */
.client-head{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:0.4rem}
.client-head .ch-name{font-family:var(--ff-display);font-size:1.9rem;font-weight:700;color:var(--walnut)}
.client-head .ch-contact{font-size:0.85rem;color:var(--walnut-70)}

/* ---- timeline ---- */
.tl-item{display:flex;gap:0.7rem;padding:0.6rem 0;border-bottom:1px solid var(--walnut-12)}
.tl-type{flex-shrink:0;font-size:0.6rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#fff;background:var(--sage);padding:0.2rem 0.45rem;border-radius:3px;height:fit-content;margin-top:0.1rem}
.tl-body{flex:1;min-width:0}
.tl-body .tl-subj{font-weight:600;font-size:0.9rem;color:var(--walnut)}
.tl-body .tl-text{font-size:0.85rem;color:var(--walnut-70);white-space:pre-wrap}
.tl-date{font-size:0.72rem;color:var(--walnut-50);flex-shrink:0}

/* ---- simple table ---- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--walnut-50);text-align:left;padding:0.45rem 0.5rem;border-bottom:1.5px solid var(--walnut-12)}
.tbl td{padding:0.5rem 0.5rem;border-bottom:1px solid var(--walnut-12);font-size:0.88rem}
.tbl td.num,.tbl th.num{text-align:right}
.li-row{display:grid;grid-template-columns:1fr 4rem 6rem 6rem 1.6rem;gap:0.4rem;margin-bottom:0.4rem;align-items:center}
.li-row .num{text-align:right}