/* Maple Zen CRM — same palette and type as maplezen.ca so the business reads as one thing */
*{box-sizing:border-box}
:root{--dark:#1a1a1a;--text:#2a2a2a;--muted:#777;--bg:#fff;--warm:#f7f5f2;--accent:#c5a882;--line:#e8e6e2;--red:#b3261e;--green:#2f6b3a}
body{margin:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--warm);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--dark);font-weight:300;letter-spacing:-.01em}
h2{font-size:26px}
h3{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:12px}
a{color:inherit}
::placeholder{color:#aaa;opacity:1}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12.5px}
.err{color:var(--red);font-size:13px;min-height:1em;margin:6px 0 0}
.ok{color:var(--green);font-size:13px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* auth */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--warm)}
.auth-card{background:#fff;border:1px solid var(--line);padding:40px 40px 32px;width:380px;text-align:center}
.auth-logo{height:30px;width:auto;display:block;margin:0 auto 18px}
.auth-card h1{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:400}
.auth-card p{margin:8px 0 0;font-size:14px}
.auth-card form{display:flex;flex-direction:column;gap:14px;margin-top:22px;text-align:left}

label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
label .hint{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.5}
input,select,textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid #ddd;background:#fff;color:var(--text);min-height:42px;border-radius:0;letter-spacing:0;text-transform:none;transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:#bbb}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--dark)}
textarea{resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}

/* buttons — the site's .btn: black, uppercase, tracked */
.btn{font:inherit;font-size:11px;letter-spacing:2px;text-transform:uppercase;line-height:1;border:1px solid var(--dark);background:var(--dark);color:#fff;padding:0 24px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:#333;border-color:#333}
.btn.btn-outline{background:transparent;color:var(--dark)}
.btn.btn-outline:hover{background:var(--dark);color:#fff}
.btn.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--dark)}
.btn.btn-accent:hover{background:#b8996f;border-color:#b8996f}
.btn.btn-light{background:#fff;border-color:#fff;color:var(--dark)}
.btn.btn-red{background:#d7263d;border-color:#d7263d;color:#fff}
.btn.small{min-height:36px;padding:0 16px;font-size:10px;letter-spacing:1.5px}
.btn.danger{background:transparent;border-color:transparent;color:var(--red);font-size:10px;min-height:32px;padding:0 8px}
.btn.danger:hover{background:#fbeeee;border-color:transparent}
.btn:disabled{opacity:.45;cursor:default;pointer-events:none}

/* shell */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 40px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand img{height:26px;width:auto;display:block}
.topnav{display:flex;gap:28px;align-items:center}
.nav-item{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s}
.nav-item:hover,.nav-item.active{color:var(--dark)}
.nav-item.active{border-bottom-color:var(--dark)}
.top-right{display:flex;align-items:center;gap:16px}

.main{max-width:1200px;margin:0 auto;padding:30px 40px 60px}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.topbar h2{margin-right:auto}
.topbar input{width:280px}

.card{background:#fff;border:1px solid var(--line);overflow:hidden}
.card.pad{padding:22px 24px}
.card.narrow{max-width:560px}
.card+.card{margin-top:14px}
.empty{padding:40px;text-align:center;color:var(--muted)}

.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10.5px;font-weight:400;text-transform:uppercase;letter-spacing:2px;color:var(--muted);text-align:left;padding:12px 18px;border-bottom:1px solid var(--line);background:#fff}
.tbl td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--warm)}
.tname{color:var(--dark)}.tsub{color:var(--muted);font-size:12.5px}

.chip{display:inline-block;padding:4px 10px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;background:var(--warm);color:var(--dark);border:1px solid var(--line)}
.chip.lead{background:#fff;color:var(--dark);border-color:var(--dark)}
.chip.quoted{background:#f5eee2;color:#7a5a2f;border-color:#e6d5b8}
.chip.won{background:#e9f1ea;color:var(--green);border-color:#cfe0d2}
.chip.lost{background:#f0f0f0;color:var(--muted);border-color:#e0e0e0}

/* detail */
.detail{display:grid;grid-template-columns:400px 1fr;gap:16px;align-items:start}
.col-left{display:flex;flex-direction:column;gap:14px}
.col-left .card+.card{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid2>label,.grid3>label{min-width:0}
.grid2 input,.grid2 select,.grid2 textarea,.grid3 input,.c-info input,.c-info select,.c-info textarea{width:100%;min-width:0}
.inq{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.inq dt{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding-top:3px;white-space:nowrap}
.inq dd{margin:0;white-space:pre-wrap;word-break:break-word}
.c-meta{margin:14px 0 0;padding:12px 14px;background:var(--warm);font-size:13px;color:var(--muted);line-height:1.6}
.row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.actions .btn{padding:0 10px}
#email-box{border-top:1px solid var(--line);padding-top:16px;margin-top:16px;display:flex;flex-direction:column;gap:12px}
#email-box .row{margin-top:0}
.actions-danger{display:flex;justify-content:flex-end;margin-top:8px}

.composer{padding:16px 18px;border-bottom:1px solid var(--line);background:var(--warm)}
.composer textarea{width:100%;min-height:72px}
.composer .row{margin-top:10px}
#timeline{max-height:70vh;overflow-y:auto}
.ev{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px}
.ev .ic{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--warm);font-size:15px}
.ev.sms_out .ic{background:#eae4da} .ev.sms_in .ic{background:#f5eee2}
.ev.voicemail .ic,.ev.call_in .ic,.ev.call_out .ic{background:#e9e9e9}
.ev.lead .ic{background:var(--accent)}
.ev .ev-type{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.ev .body{white-space:pre-wrap;word-break:break-word}
.ev .when{margin-left:auto;flex:none;color:#aaa;font-size:12px}
.ev audio{margin-top:6px;width:260px;height:34px;display:block}
.ev .vm-dl{display:inline-block;margin-top:4px;font-size:12px;color:var(--dark)}
.ev img.mms{max-width:180px;display:block;margin-top:8px;border:1px solid var(--line)}

/* incoming-call banner + call bar */
.livecall{position:sticky;top:78px;z-index:30;background:var(--dark);color:#fff;padding:12px 16px;margin-bottom:14px;display:flex;gap:12px;align-items:center;cursor:pointer;animation:ringpulse 1.2s ease-in-out infinite;font-size:14px}
.livecall b{color:var(--accent)}
.callbar{position:sticky;top:78px;z-index:31;background:var(--dark);color:#fff;padding:12px 16px;margin-bottom:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.callbar .cb-who{flex:1;min-width:150px;line-height:1.25}
.callbar .cb-who b{display:block;color:var(--accent);font-size:15px;font-weight:400}
.callbar .cb-who span{font-size:13px;opacity:.85}
.callbar .cb-status{font-variant-numeric:tabular-nums;min-width:120px;font-size:13px;letter-spacing:1px}
.callbar .cb-actions{display:flex;gap:8px}
@keyframes ringpulse{0%,100%{box-shadow:0 0 0 0 rgba(197,168,130,.6)}50%{box-shadow:0 0 0 8px rgba(197,168,130,0)}}

@media(max-width:900px){
  .top{padding:12px 16px;gap:12px;flex-wrap:wrap}
  .brand img{height:22px}
  .topnav{gap:18px}
  .top-right #biz-number{display:none}
  .main{padding:16px}
  .topbar input{flex:1 1 100%;width:auto}
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:560px}
  .detail{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .actions{grid-template-columns:1fr 1fr}
  #save-contact{grid-column:1/-1}
  input,textarea,select{font-size:16px} /* stops iOS focus-zoom */
  .livecall,.callbar{top:0}
}