/* Additions for the staff app, on top of the prototype's styles.css */
.signin{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--bg)}
.signin-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px}
.signin-card h1{margin:0;font-size:20px}
.signin-brand{display:flex;justify-content:space-between;align-items:baseline}
.stack{display:flex;flex-direction:column;gap:12px}
.stack input{width:100%}
.steps-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.secret{font-family:var(--font-data);background:var(--sunk);padding:2px 6px;border-radius:4px;letter-spacing:.05em;user-select:all}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-weight:500;color:var(--muted);text-decoration:none}
.nav a:hover{background:var(--sunk);color:var(--fg)}
.nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav a svg{width:18px;height:18px;flex:none}
.slot.closed{background:repeating-linear-gradient(45deg,transparent 0 8px,var(--sunk) 8px 16px)}
.slot.open{cursor:pointer}.slot.open:hover{background:var(--accent-soft)}
a.btnlike{display:inline-flex;align-items:center;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 12px;font-weight:500;color:var(--fg)}
a.btnlike.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.patrow{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.patrow[aria-current=true]{background:var(--accent-soft)}
.patrow small{color:var(--muted);font-size:11.5px}
.wrap{min-width:0}
/* Inbox */
a.thread{color:var(--fg);text-decoration:none}
.thread .count{grid-row:1;grid-column:2}
.back-link{display:none;margin-bottom:6px}
.logbox{border:1px dashed var(--line);border-radius:8px;padding:8px 12px;margin-bottom:10px}
.logbox summary{cursor:pointer;font-weight:600}
.logbox[open]{display:flex;flex-direction:column;gap:10px}
@media (max-width:760px){
  .inbox.has-sel .threads{display:none}
  .inbox:not(.has-sel) .thread-pane{display:none}
  .inbox .threads{max-height:none}
  .back-link{display:inline-block}
}
/* Schedule week view and My hours */
.colhead .is-today{color:var(--accent)}
.onsite{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.onsite-day{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);text-decoration:none}
.onsite-day small{color:var(--muted)}
table.terr.hours td.on{background:var(--accent-soft)}
.daycell{display:flex;flex-direction:column;gap:4px;min-width:84px}
.daycell select{font-size:12px;padding:3px 4px}
/* The visit and My day */
.visit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.visit-grid .note-sec{grid-column:1/-1}
@media (max-width:900px){.visit-grid{grid-template-columns:minmax(0,1fr)}}
.visit-grid .section{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:0}
.checklist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.checks{display:flex;flex-direction:column;gap:6px;font-size:13px}
.pre{white-space:pre-wrap}
a.li.myday{color:var(--fg);text-decoration:none;align-items:flex-start}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Call backs */
.cblist{display:flex;flex-direction:column}
.cb{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(180px,1.8fr) 120px minmax(220px,auto);gap:10px 14px;align-items:start;padding:12px 14px;border-bottom:1px solid var(--line)}
.cb>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cb small{color:var(--muted)}
.cb.high{box-shadow:inset 3px 0 0 var(--warn)}
.cb-who a{color:var(--fg);text-decoration:none}
.cb .cb-act{flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center}
.cb-log{grid-column:1/-1;flex-direction:row!important;flex-wrap:wrap;gap:8px!important;align-items:center;background:var(--sunk);border-radius:8px;padding:10px}
.cb-log[hidden]{display:none}
.cb-log .cb-note{flex:1;min-width:180px}
@media (max-width:900px){.cb{grid-template-columns:minmax(0,1fr) auto}.cb-why{grid-column:1/-1;grid-row:2}.cb .cb-act{grid-column:1/-1}}
.seg .count{margin-left:4px}
/* Call guide */
input[type=time]{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 9px;min-width:0}
@media (max-width:480px){.cg .row2{grid-template-columns:minmax(0,1fr)}}
/* Pipeline and partners */
.checks-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px}
.board .card a{color:var(--fg);text-decoration:none}
.phone-only{display:none}
@media (max-width:760px){.phone-only{display:block}.board{grid-auto-flow:row;grid-auto-columns:auto;padding:0}}
.checks-row label{text-transform:none;letter-spacing:0;font-weight:400;font-size:13.5px;color:var(--fg);display:flex;gap:6px;align-items:center}
/* Payments */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:20px}
.stat small{color:var(--muted)}
/* Today (Command Center) */
.cc-cat{margin:14px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px}
.cc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.cc.high{box-shadow:inset 3px 0 0 var(--warn)}
.cc-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cc-ev{margin:0;padding-left:18px;font-size:13px;color:var(--fg)}
/* Inventory */
.inv-item{flex-wrap:wrap;align-items:flex-start}
.inv-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.inv-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.inv-act select{max-width:100%}
.inv-pick:not([hidden]),.inv-receive:not([hidden]){flex:1 1 100%}
.inv-soon{margin:6px 0 0;padding-left:18px}
.inv-amt{width:90px}
.inv-send{border-top:1px solid var(--line);padding-top:10px}
.inv-line+.inv-line{margin-top:8px}
/* Reports */
.rep-range input[type=date]{flex:1 1 140px}
.repgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* Import data */
table.terr.imp td{text-align:left;white-space:normal;vertical-align:top}
table.terr.imp tr.error td{background:color-mix(in srgb,var(--bad) 6%,transparent)}
.imp-notes{min-width:180px;font-size:12px}
.bad-text{color:var(--bad)}
/* Branding */
.side-logo{height:28px;width:auto;max-width:72px;object-fit:contain;border-radius:4px}
.side-brand{gap:8px}
.brand-preview{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;grid-template-columns:minmax(120px,200px) 1fr;margin-bottom:12px}
.bp-side{background:var(--sunk);padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bp-side img{max-height:48px;max-width:100%;object-fit:contain}
.bp-body{padding:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bp-btn{background:var(--p);color:#fff;border-radius:6px;padding:7px 14px;font-weight:600}
.bp-chip{border:1px solid var(--p);color:var(--p);border-radius:999px;padding:4px 10px;background:color-mix(in srgb,var(--p) 12%,transparent)}
.bp-link{color:var(--p);text-decoration:underline}
@media (max-width:500px){.brand-preview{grid-template-columns:1fr}}
/* "More" is the phone's bottom bar only; on a computer every screen is already in the sidebar */
.nav .nav-more,.nav .nav-break{display:none}
/* The call guides, one item: on a computer it opens to the three guides */
.screen{display:contents}
.nav-group{display:flex;flex-direction:column}
.nav .nav-grp{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 10px;border-radius:6px;text-align:left;font:inherit;font-weight:500;color:var(--muted);cursor:pointer}
.nav .nav-grp:hover{background:var(--sunk);color:var(--fg)}
.nav .nav-grp[aria-current=page]{background:transparent;color:var(--fg);font-weight:600}
.nav-grp .chev{width:14px;height:14px;margin-left:auto;transition:transform .15s}
.nav-group.open .chev{transform:rotate(90deg)}
.nav-subs{display:none;flex-direction:column;gap:2px;margin:2px 0 4px}
.nav-group.open .nav-subs{display:flex}
.nav .nav-sub{padding:6px 10px 6px 38px;font-size:13px}
.guide-pick{display:flex;align-items:center;gap:8px;max-width:420px}.guide-pick label{font-weight:600}.guide-pick select{flex:1}
.viewas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
@media (max-width:760px){
  /* On a phone the group is one tile in the bar; the guide has a dropdown to switch */
  .nav .nav-group{flex:1 0 68px}
  .nav .nav-grp{flex:1;flex-direction:column;justify-content:center;gap:2px;min-height:54px;padding:4px 6px;font-size:11px;line-height:1.1;text-align:center;white-space:nowrap;border-radius:10px}
  .nav .nav-grp svg{width:22px;height:22px}
  .nav .nav-grp[aria-current=page]{background:var(--accent-soft);color:var(--accent)}
  .nav-grp .chev,.nav .nav-subs{display:none!important}
  .guide-pick{max-width:none}
}
/* Reports: monthly trends */
.trend{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:10px;align-items:end;padding:8px 0;border-bottom:1px solid var(--line)}
.trend:last-child{border-bottom:0}
.trend .bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-items:end}
.trend .bar{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted)}
.trend .bar b{display:block;width:70%;max-width:36px;background:var(--accent);border-radius:4px 4px 0 0}
.trend .bar.now b{opacity:.45}
.trend .bar small{font-family:var(--font-data);color:var(--fg)}
@media (max-width:560px){.trend{grid-template-columns:1fr}}
/* Messages: upcoming and approvals */
.obx .obx-item{border-bottom:1px solid var(--line);background:var(--surface)}
.obx .obx-item:last-child{border-bottom:0}
.obx .obx-item details.row{border-bottom:0}
.obx .obx-act,.obx .obx-why{padding:0 12px 10px 118px}
.obx .obx-why{font-size:12px;color:var(--warn)}
.obx .msgbody>div+div{margin-top:6px}
.obx .msgbody p{overflow-wrap:anywhere}
.obx-day{display:flex;flex-direction:column;gap:6px}
.obx-day+.obx-day{border-top:1px solid var(--line);padding-top:10px}
.obx-day h3{margin:0;font-size:14px}
.obx-counts{justify-content:flex-start}
.obx-skips summary{cursor:pointer;font-size:12.5px;color:var(--muted);margin-bottom:6px}
@media (max-width:720px){.obx .obx-act,.obx .obx-why{padding-left:12px}.obx .obx-act button{flex:1}}
.deal-badges{display:flex;flex-wrap:wrap;gap:4px}

/* The purchase agreement, on screen and printed */
.agreement{padding:24px;max-width:780px}
.ag-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}.ag-head img{max-height:56px;max-width:140px}.ag-head h2{margin:0}
.ag-table{width:100%;border-collapse:collapse;margin:12px 0}.ag-table th,.ag-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}.ag-table .num{text-align:right}
.ag-table tfoot td{border-bottom:none}.ag-terms{white-space:pre-wrap}
.ag-sign{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}.ag-sign div{font-size:12px;color:var(--muted)}.ag-sign span{display:block;border-bottom:1px solid var(--fg);height:36px;margin-bottom:4px}
.sign-ask{margin-top:16px;display:flex;flex-direction:column;gap:8px;max-width:460px}
.ag-signed{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px}.ag-signed img{max-width:min(300px,100%);max-height:120px;height:auto;background:#fff;border-bottom:1px solid var(--line)}
.print-only{display:none}
@media print{
  .print-only{display:grid}
  aside.side,.nav,.no-print,.toast{display:none!important}
  body,.app,.wrap{background:#fff!important;color:#000!important;display:block!important;margin:0!important;padding:0!important}
  .agreement{border:none!important;box-shadow:none!important;padding:0;max-width:none}
  .agreement,.agreement *{color:#000!important;background:transparent!important;border-color:#999!important}
}

/* A label wrapping its input: the input below the label, full width */
.field>label>input,.field>label>select{display:block;width:100%;margin-top:4px}


/* Online booking builder: the form, with the real page as a live preview beside it */
.bkb{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:16px;align-items:start}
.bkb-sticky{position:sticky;top:12px}
.bkb-preview iframe{width:100%;height:calc(100vh - 90px);min-height:520px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:6px}
.bkb-empty{border:1px dashed var(--line);border-radius:12px;padding:40px 16px;text-align:center;color:var(--muted);margin-top:6px}
.bkb-fields{display:grid;gap:6px;margin:8px 0 12px}
.bkb-frow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.seg.seg-sm button{padding:4px 10px;min-height:32px;font-size:.85rem}
.bkb-q{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.ob{align-items:flex-start;flex-wrap:wrap}
.ob-other{min-width:260px}
@media (max-width:900px){.bkb{grid-template-columns:1fr}.bkb-preview{order:-1}.bkb-preview iframe{height:560px}.bkb-sticky{position:static}}
.brand-id{margin-top:10px}
.brand-id-logo{max-height:44px;max-width:140px;object-fit:contain}
.dev-api{margin:6px 0 8px;padding-left:18px}.dev-api li{margin:4px 0}.dev-api code{word-break:break-all}

/* Practice setup */
.setup-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:4px 0 12px}
.setup-bar span{display:block;height:100%;background:var(--accent)}
.setup-step .setup-tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;font-weight:700}
.setup-step.is-done .setup-tick{background:var(--ok-soft,#e7f6ec);border-color:var(--ok,#1a7f37);color:var(--ok,#1a7f37)}
.setup-type{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}
.setup-prov{flex-wrap:wrap;gap:8px}
.setup-prov input[type=color]{width:38px;height:34px;padding:2px}
/* Operator console (/operator) */
.op-shell{max-width:1200px;margin:0 auto;padding:20px 16px;display:flex;flex-direction:column;gap:14px}
table.terr.op-table td,table.terr.op-table th{text-align:left;vertical-align:top;white-space:normal}
.op-sub{display:block;color:var(--muted);font-size:11.5px}
.op-table .linkbtn{font-size:12px;padding:0;margin-top:2px}
.op-new h2{margin:0;font-size:16px}
.op-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.op-form .actions,.op-form #nperr{grid-column:1/-1}
.op-link{display:flex;gap:8px}.op-link input{flex:1;min-width:0;font-family:var(--font-data);font-size:12px}
/* The EchoWren wordmark: navy on light, white on dark */
.ew-logo{display:inline-flex;align-items:center}.ew-logo img{height:26px;width:auto}
.ew-logo .ew-dark{display:none}
:root[data-theme="dark"] .ew-logo .ew-light{display:none}:root[data-theme="dark"] .ew-logo .ew-dark{display:inline}
.signin-brand{align-items:center}.signin-brand .ew-logo img{height:30px}
.side-brand .ew-logo img{height:24px}
.op-logo{margin-bottom:6px}.op-logo img{height:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}