/* Sales Manager (agency). Light theme; brand orange sampled from the Essence Automations
   logo pixels (#FE5105 deep to #FD8709 light), settled on #fb6e10 with #c2500a for anything
   carrying text, so it clears contrast on white. The yellow this replaced was sampled from
   Best in Auto's logo and had no business on Essence Automations' own screen. */
:root{
  --brand:#fb6e10; --brand-deep:#c2500a; --brand-soft:#fff3ea; --brand-line:#f6d3b4;
  --ink:#141414; --body:#3d3d3a; --muted:#8a8880;
  --bg:#f7f6f2; --card:#ffffff; --line:#e6e3d8;
  --green:#2e7d52; --green-soft:#eef7f1; --red:#b0492c; --red-soft:#fbf1ee;
  --blue:#2f5d8a; --amber:#a8760a;
  --radius:10px; --shadow:0 1px 3px rgba(20,20,20,.07), 0 1px 2px rgba(20,20,20,.04);
}
*{box-sizing:border-box;}
/* `hidden` must beat the display rules below, or an invisible full-screen overlay
   keeps swallowing clicks. */
[hidden]{display:none !important;}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
body.loading #app,body.loading #gate{display:none;}
h1,h2,h3{color:var(--ink);margin:0 0 10px;}
h2{font-size:19px;} h3{font-size:14px;}
.muted{color:var(--muted);} .sm{font-size:12px;}
.grow{flex:1;}
a{color:var(--blue);}

/* ---- gate ---- */
.gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;}
.gate-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px;max-width:380px;width:100%;box-shadow:var(--shadow);text-align:center;}
.gate-logo{height:64px;margin-bottom:14px;border-radius:10px;}
.gate-card form{text-align:left;margin-top:18px;}
label{display:block;margin-bottom:12px;font-size:12.5px;color:var(--ink);font-weight:600;}
input,select,textarea{
  width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font:inherit;color:var(--ink);background:#fff;font-weight:400;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand-deep);}
textarea{resize:vertical;}
.err{background:var(--red-soft);color:var(--red);padding:8px 11px;border-radius:8px;margin-bottom:10px;font-size:12.5px;}

/* ---- buttons ---- */
.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;
  font:inherit;font-weight:600;cursor:pointer;
}
.btn:hover{background:#faf9f4;}
.btn.primary{background:var(--brand);border-color:var(--brand-deep);color:#141414;}
.btn.primary:hover{background:#ff8332;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn.ghost:hover{background:#efece2;color:var(--ink);}
.btn.sm{padding:6px 11px;font-size:12.5px;}
.btn.wide{width:100%;padding:10px;}
.btn.danger{color:var(--red);border-color:#e8cfc6;}

/* ---- sample-data banner ---- */
.demobar{
  background:var(--brand);border-bottom:1px solid var(--brand-deep);color:#141414;
  padding:8px 20px;font-size:12.5px;text-align:center;
}
.demobar b{font-weight:700;}
.demobar.paused{background:var(--red-soft);border-bottom-color:#eacfc6;color:var(--red);}

/* ---- topbar ---- */
.topbar{
  display:flex;align-items:center;gap:18px;padding:10px 20px;background:#fff;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);}
/* The EA mark is orange neon drawn ON a dark circuit background, and that background is
   baked into the file. Sitting raw on a white header it reads as a stray black rectangle,
   so it gets its own tile in the art's own edge colour (#070c11, sampled from the file).
   Rounded, it looks deliberate. The tile is not decoration: the left edge of the PNG is
   only ~69% opaque, so without it the white page fringes through the artwork. The other
   option was recolouring the mark, which the logo rule forbids — at that point it stops
   being the logo Essence Automations actually has. */
.logo{height:34px;border-radius:7px;display:block;}
.gate-logo,.logo{background:#070c11;}
.tabs{display:flex;gap:2px;}
.tab{
  background:none;border:none;padding:7px 13px;border-radius:8px;font:inherit;font-weight:600;
  color:var(--muted);cursor:pointer;
}
.tab:hover{background:#f4f2ea;color:var(--ink);}
.tab.active{background:var(--brand-soft);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand);}
.topright{margin-left:auto;display:flex;align-items:center;gap:10px;}
.me{font-size:12.5px;color:var(--muted);}
/* Reps see the board only. The client sees the money but not the settings, the team,
   or anything that would let them edit the terms of the fee. */
body.role-rep .admin-only,
body.role-client .admin-only{display:none;}
body.role-rep .fees-only{display:none;}
/* Agency-only chrome is hidden by default and revealed for the agency owner, so a client
   who somehow lands on the markup never even sees that other subaccounts exist. The API
   returns 403 regardless; this just keeps the screen honest. */
.agency-only{display:none;}
body.is-agency .agency-only{display:block;}
body.is-agency .tab.agency-only{display:inline-block;}

/* ---- subaccount switcher ---- */
.wsbrand{position:relative;}
.wsbtn{
  display:flex;align-items:center;gap:7px;background:none;border:none;padding:5px 9px;
  border-radius:8px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;max-width:230px;
}
.wsbtn:hover{background:#f4f2ea;}
.wsbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wsbtn svg{flex:0 0 auto;color:var(--muted);}
.wsmenu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:260px;max-height:70vh;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.13);z-index:40;padding:6px;
}
.wsmenu-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:7px 9px 5px;}
.wsmenu-list{display:flex;flex-direction:column;}
.wsitem{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;
  padding:9px 10px;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer;
}
.wsitem:hover{background:#f4f2ea;}
.wsitem.on{background:var(--brand-soft);font-weight:700;}
.wsitem-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wsmenu-foot{
  width:100%;margin-top:4px;border-top:1px solid var(--line);background:none;border-left:none;
  border-right:none;border-bottom:none;padding:10px;font:inherit;font-weight:600;
  color:var(--muted);cursor:pointer;text-align:left;border-radius:0 0 8px 8px;
}
.wsmenu-foot:hover{background:#f4f2ea;color:var(--ink);}

/* ---- subaccounts screen ---- */
.panel.wide{grid-column:1 / -1;}
.wstable{display:flex;flex-direction:column;gap:8px;}
.wsrow{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;background:#fff;flex-wrap:wrap;
}
.wsrow.on{border-color:var(--brand-line);background:var(--brand-soft);}
.wsrow-main{flex:1;min-width:180px;}
.wsrow-actions{display:flex;gap:6px;flex-wrap:wrap;}

main{padding:18px 20px 60px;max-width:1500px;margin:0 auto;}

/* ---- toolbar ---- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.toolbar input[type=search]{width:260px;margin:0;}
.toolbar select{width:auto;margin:0;}
.check{display:flex;align-items:center;gap:6px;margin:0;font-weight:600;color:var(--body);}
.check input{width:auto;margin:0;}

/* ---- board ---- */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;align-items:flex-start;}
.col{background:#efece2;border-radius:var(--radius);min-width:270px;width:270px;flex:0 0 auto;padding:10px;}
.col.dragover{outline:2px dashed var(--brand-deep);background:var(--brand-soft);}
.col-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px;padding:0 2px;}
.col-head b{color:var(--ink);font-size:13px;}
.col-head .v{font-size:11.5px;color:var(--muted);}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:8px;
  cursor:pointer;box-shadow:var(--shadow);
}
.card:hover{border-color:var(--brand-deep);}
.card.dragging{opacity:.45;}
.card .co{font-weight:700;color:var(--ink);margin-bottom:2px;}
.card .who{font-size:12px;color:var(--muted);margin-bottom:6px;}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.pill{font-size:10.5px;padding:2px 7px;border-radius:20px;background:#f2efe4;color:var(--body);border:1px solid var(--line);white-space:nowrap;}
.pill.src{background:var(--brand-soft);border-color:var(--brand-line);color:#8a3a05;}
.pill.val{background:var(--green-soft);border-color:#cfe6d8;color:var(--green);font-weight:700;}
.pill.warn{background:var(--red-soft);border-color:#eacfc6;color:var(--red);}
.pill.appt{background:#eef3f9;border-color:#cfdcea;color:var(--blue);}
.pill.open{background:#fdf5e5;border-color:#eddcb8;color:var(--amber);}
.empty{color:var(--muted);font-size:11.5px;text-align:center;padding:16px 8px;line-height:1.4;}
/* First-run / nothing-here states: say what to do next, never just "no data". */
.firstrun{
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:26px 28px;max-width:60ch;box-shadow:var(--shadow);
}
.firstrun h3{margin-bottom:7px;font-size:16px;}
.firstrun p{margin:0 0 10px;color:var(--body);}
.firstrun p:last-child{margin-bottom:0;}
/* ---- Help accordion ----
   HOUSE RULE (CATALOG-STANDARDS, learned on Iman): a <summary> must stay display:block.
   Putting flex on it silently breaks native <details> toggling in mobile WebKit, so the
   flex row lives on an inner wrapper and the toggle is driven from JS as well. */
.faq-list{max-width:78ch;}
.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
     margin-bottom:9px;box-shadow:var(--shadow);}
.faq summary{display:block;cursor:pointer;list-style:none;padding:13px 16px;border-radius:var(--radius);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{background:var(--brand-soft);}
.faq summary:focus-visible{outline:2px solid var(--brand-deep);outline-offset:-2px;}
.faq-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.faq-q{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:var(--ink);font-size:15px;}
.faq-chev{width:9px;height:9px;flex:0 0 auto;margin-top:-4px;
          border-right:2px solid var(--brand-deep);border-bottom:2px solid var(--brand-deep);
          transform:rotate(45deg);transition:transform .18s ease;}
.faq[open] .faq-chev{transform:rotate(-135deg);margin-top:3px;}
.faq[open] summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;}
.faq-body{padding:12px 16px 14px;}
.faq-body p{margin:0 0 9px;max-width:64ch;}
.faq-body p:last-child{margin-bottom:0;}

/* ---- dashboard ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:16px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);}
.kpi[data-drill]{cursor:pointer;}
.kpi[data-drill]:hover{border-color:var(--brand-deep);background:var(--brand-soft);}
.kpi[data-drill]:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px;}
.kpi .n{font-size:26px;font-weight:700;color:var(--ink);line-height:1.1;}
.kpi .l{font-size:11.5px;color:var(--muted);margin-top:4px;}
.kpi.alert .n{color:var(--red);}
.kpi.good .n{color:var(--green);}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow);}
.panel h3{display:flex;gap:7px;align-items:baseline;}
.panel-wide{grid-column:1/-1;}
.panel-wide #userForm{max-width:420px;}
.bar-row{display:grid;grid-template-columns:120px 1fr 44px;gap:9px;align-items:center;margin-bottom:7px;font-size:12.5px;}
.bar-row .lbl{color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{display:block;background:#f0ede3;border-radius:5px;height:9px;overflow:hidden;}
.bar-fill{display:block;background:var(--brand);height:100%;border-radius:5px;min-width:4px;}
.bar-row .n{text-align:right;font-weight:700;color:var(--ink);}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.stat-grid div{background:#faf9f4;border-radius:8px;padding:10px 12px;}
.stat-grid .n{font-size:19px;font-weight:700;color:var(--ink);}
.stat-grid .l{font-size:11.5px;color:var(--muted);}
.list-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer;}
.list-row:last-child{border-bottom:none;}
.list-row:hover{color:var(--ink);}
.list-row b{color:var(--ink);}

/* ---- commission ---- */
.acct{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:9px;background:#fdfcf7;}
.acct-head{display:flex;gap:9px;align-items:baseline;margin-bottom:5px;flex-wrap:wrap;}
.acct-head b{color:var(--ink);}

/* ---- appointments ---- */
.appt-list{display:grid;gap:9px;}
.appt{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);padding:12px 15px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);}
.appt .when{min-width:150px;font-weight:700;color:var(--ink);font-size:13px;}
.appt .who b{color:var(--ink);}
.appt .acts{margin-left:auto;display:flex;gap:6px;}

/* ---- drawer / modal ---- */
.drawer{position:fixed;inset:0;z-index:40;}
.drawer-bg{position:absolute;inset:0;background:rgba(20,20,20,.35);}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg);
  overflow-y:auto;padding:22px 24px 60px;box-shadow:-4px 0 24px rgba(0,0,0,.12);
}
.modal-panel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(680px,94%);
  max-height:92vh;overflow-y:auto;background:var(--bg);border-radius:14px;padding:24px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.row-full{grid-column:1/-1;}
.actions{display:flex;gap:9px;justify-content:flex-end;margin-top:8px;}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px;}
.drawer-head h2{margin-bottom:2px;}
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:12px;}
.sec h3{margin-bottom:9px;}
.kv{display:grid;grid-template-columns:100px 1fr;gap:5px 10px;font-size:13px;}
.kv dt{color:var(--muted);} .kv dd{margin:0;color:var(--ink);}
.stack{display:grid;gap:8px;}
.stack input,.stack select,.stack textarea{margin:0;}
.stack label{margin:0;}
.formhead{margin:2px 0 2px;font-size:13px;color:var(--ink);font-family:Georgia,serif;}
/* Browser autofill paints its own background; keep the field readable and on-brand. */
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 30px #fff8f3 inset;}
.note{border-bottom:1px solid var(--line);padding:9px 0;font-size:13px;}
.note:last-child{border-bottom:none;}
.note .h{display:flex;gap:7px;align-items:center;margin-bottom:3px;font-size:11.5px;color:var(--muted);}
.tl{font-size:12.5px;color:var(--body);padding:5px 0 5px 14px;border-left:2px solid var(--line);margin-left:3px;}
.tl b{color:var(--ink);}
.seg{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:9px;}
.seg button{padding:5px 10px;border:1px solid var(--line);background:#fff;border-radius:20px;font:inherit;font-size:12px;cursor:pointer;color:var(--muted);}
.seg button.on{background:var(--brand-soft);border-color:var(--brand-deep);color:var(--ink);font-weight:600;}
.email-row{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.email-row:last-child{border-bottom:none;}
.email-row .subj{flex:1;color:var(--ink);}
.tracked{background:#faf9f4;border:1px dashed var(--line);border-radius:8px;padding:9px 11px;font-family:ui-monospace,Consolas,monospace;font-size:11px;word-break:break-all;color:var(--body);margin-top:7px;}

/* ---- toast ---- */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:22px;font-size:13px;z-index:60;box-shadow:0 4px 14px rgba(0,0,0,.2);
}

@media (max-width:760px){
  .topbar{gap:8px;padding:8px 12px;}
  .brand{font-size:15px;}
  .logo{height:28px;}
  .topright{gap:7px;}
  .me{display:none;}                     /* you know who you are signed in as */
  /* The switcher keeps its full width on a phone: which client you are in is the one thing
     that must never be truncated to an ellipsis you cannot read. */
  .wsbtn{max-width:44vw;padding:4px 6px;}
  .wsmenu{min-width:min(300px,88vw);max-width:88vw;}
  /* Every nav item must be visible without sideways scrolling: wrap onto as many rows
     as it takes. A hidden tab is a feature the user never finds. */
  .tabs{order:3;width:100%;flex-wrap:wrap;gap:4px;overflow:visible;}
  .tab{white-space:nowrap;flex:0 0 auto;padding:6px 11px;font-size:13px;}
  .demobar{padding:7px 12px;font-size:11.5px;text-align:left;}
  main{padding:14px 12px 60px;}
  .grid2{grid-template-columns:1fr;}
  .toolbar input[type=search]{width:100%;}
  .toolbar select{flex:1 1 40%;}
  /* One column at a time, with a peek of the next so the sideways scroll is obvious. */
  .col{min-width:86vw;width:86vw;}
  .kpis{grid-template-columns:repeat(2,1fr);gap:9px;}
  .kpi{padding:12px 13px;}
  .kpi .n{font-size:22px;}
  .panels{grid-template-columns:1fr;}
  .bar-row{grid-template-columns:96px 1fr 34px;}
  .drawer-panel{width:100%;padding:18px 16px 60px;}
  .modal-panel{width:94%;padding:18px 16px;}
  .kv{grid-template-columns:88px 1fr;}
  .kv dd{overflow-wrap:anywhere;}        /* long emails must not run off the edge */
  .appt{flex-wrap:wrap;}
  .appt .when{min-width:100%;}
  .appt .acts{margin-left:0;}
  .email-row{flex-wrap:wrap;}
  .acct-head{font-size:13px;}
}