/* Owner backend — deliberately the SAME room the clients get.
   Class names, pill tabs, card grid and footer bar mirror the demo backends so that
   using this is practice for demoing theirs. Only the tokens differ (this site's
   palette instead of the client's), and the sign-in screen, which is anonymous here. */

.bk-back{position:fixed;inset:0;background:rgba(10,10,13,.74);z-index:900;display:flex;
  align-items:center;justify-content:center;padding:16px;overflow:auto}
.bk-back[hidden]{display:none}
.bk-app{position:fixed;inset:0;background:rgba(10,10,13,.74);z-index:950;display:none;
  align-items:center;justify-content:center;padding:16px;overflow:auto}
.bk-app.on{display:flex}

.modal{background:var(--card);border:1px solid var(--line);border-radius:6px;max-width:640px;width:100%;
  padding:26px 28px;position:relative;box-shadow:0 24px 60px rgba(10,12,20,.3);max-height:92vh;overflow:auto}
.modal.wide{max-width:960px}
.mx{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--mut);
  font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.mx:hover{color:var(--ink)}

/* ---------- fields (shared) ---------- */
.bk-field label{font-family:"Space Grotesk";font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-size:12px;color:var(--mut);display:block;margin:12px 0 5px}
.bk-field input,.bk-field textarea{width:100%;background:var(--paper);border:1px solid var(--line);
  color:var(--ink);font:400 15px Inter,system-ui,sans-serif;padding:11px 13px;border-radius:3px}
.bk-field textarea{min-height:84px;resize:vertical;line-height:1.55}
.bk-field input:focus,.bk-field textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.bk-hint{font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.5}

.bk-btn{background:var(--acc);color:#fff;border:none;border-radius:3px;padding:11px 18px;
  font-family:"Space Grotesk";font-weight:600;font-size:14px;cursor:pointer}
.bk-btn:disabled{opacity:.5;cursor:default}
.bk-btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.bk-btn.ghost:hover{border-color:var(--acc)}
.bk-btn.block{width:100%}

/* ---------- sign-in (anonymous on purpose) ---------- */
.bk-login{background:var(--card);border:1px solid var(--line);border-radius:6px;width:100%;max-width:390px;
  padding:26px 28px;box-shadow:0 24px 60px rgba(10,12,20,.3)}
.bk-login h3{font-family:"Space Grotesk";font-size:20px;letter-spacing:-.01em;margin-bottom:2px}
.bk-note{font-size:12.5px;color:var(--mut);margin-top:10px;line-height:1.5}
.bk-sent{font-size:14.5px;color:var(--ink);margin-top:8px;line-height:1.6}
.bk-note.ok{color:var(--ok)}
.bk-note.err{color:var(--warn)}

/* ---------- the room ---------- */
.adm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.adm-top .kick{font-family:"Space Grotesk";font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin:0 0 6px}
.adm-top h3{font-family:"Space Grotesk";font-size:28px;letter-spacing:-.02em;line-height:1.15}
.adm-lock{font-size:12.5px;color:var(--mut);max-width:620px;line-height:1.6;margin-top:8px}
.adm-user{font-size:12px;color:var(--mut);background:var(--band);border:1px solid var(--line);
  border-radius:99px;padding:6px 13px;white-space:nowrap}
.adm-user b{color:var(--ink)}

.atabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.atab{font-family:"Space Grotesk";font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);background:none;border:1px solid var(--line);border-radius:99px;padding:7px 13px;cursor:pointer}
.atab:hover{border-color:var(--acc);color:var(--ink)}
.atab.on{border-color:var(--acc);color:#fff;background:var(--acc)}

.adm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.adm-grid.one{grid-template-columns:1fr}
.adm-card{background:var(--band);border:1px solid var(--line);border-radius:4px;padding:18px 20px}
.adm-card h4{font-family:"Space Grotesk";font-size:18px;margin-bottom:13px}
.adm-card .bk-field:first-of-type label{margin-top:0}
.adm-note{font-size:11.5px;color:var(--mut);margin-top:10px;line-height:1.55}
.adm-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.adm-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;
  border-top:1px solid var(--line);padding-top:18px}
.adm-pane{display:none}
.adm-pane.on{display:block;max-height:56vh;overflow-y:auto;padding-right:4px}
.adm-pane.on::-webkit-scrollbar{width:8px}
.adm-pane.on::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.bk-dirty{font-size:12.5px;color:var(--mut)}
.bk-empty{color:var(--mut);font-size:13.5px;padding:14px 0}

/* ---------- reports ---------- */
.bk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.bk-tile{background:var(--band);border:1px solid var(--line);border-radius:4px;padding:16px 18px;
  text-align:left;width:100%;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,background .15s}
.bk-tile:hover{border-color:var(--acc)}
.bk-tile.on{border-color:var(--acc);background:var(--tintacc)}
.bk-tile .n{font-family:"Space Grotesk";font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.bk-tile .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.bk-bars{display:flex;align-items:flex-end;gap:3px;height:104px;margin-top:6px}
.bk-bars i{flex:1;background:var(--acc);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.bk-bars i:hover{opacity:1}
.bk-rows{display:flex;flex-direction:column;gap:7px}
.bk-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;font-size:13px}
.bk-row .bar{grid-column:1/-1;height:5px;background:var(--card);border-radius:3px;overflow:hidden}
.bk-row .bar i{display:block;height:100%;background:var(--acc)}
.bk-row b{font-family:"Space Grotesk"}

/* ---------- leads + history ---------- */
.bk-lead{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:14px 16px;margin-bottom:10px}
.bk-lead .lh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.bk-lead .lh b{font-family:"Space Grotesk";font-size:14px}
.bk-lead .lh span{font-size:12px;color:var(--mut)}
.bk-lead p{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.55;white-space:pre-wrap}
.bk-tagf{display:inline-block;background:var(--tintacc);color:var(--acc);border-radius:99px;font-size:10.5px;
  font-weight:600;padding:2px 9px;font-family:"Space Grotesk";letter-spacing:.03em}
.bk-log{border-left:2px solid var(--line);padding-left:14px;margin-bottom:14px}
.bk-log .lw{font-size:12px;color:var(--mut)}
.bk-log .lc{font-size:13px;margin-top:4px;line-height:1.6}
.bk-log del{color:var(--warn);text-decoration:line-through;opacity:.75}
.bk-log ins{color:var(--ok);text-decoration:none}

@media(max-width:640px){.modal{padding:20px 16px}.adm-top h3{font-size:22px}}


/* ---------- metric chart: this month against the months before it ---------- */
.bk-delta{font-family:"Space Grotesk";font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px;
  background:var(--band);color:var(--mut);white-space:nowrap}
.bk-delta.up{color:var(--ok)}
.bk-delta.down{color:var(--warn)}
.bk-chart{display:flex;align-items:flex-end;gap:6px;height:170px;margin-top:4px}
.bk-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.bk-col i{display:block;width:100%;background:var(--line);border-radius:3px 3px 0 0;min-height:2px;transition:background .15s}
.bk-col.cur i{background:var(--acc)}
.bk-col:hover i{background:var(--acc);opacity:.75}
.bk-colv{font-family:"Space Grotesk";font-size:11px;font-weight:600;color:var(--mut);white-space:nowrap}
.bk-col.cur .bk-colv{color:var(--ink)}
.bk-colm{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.bk-col.cur .bk-colm{color:var(--ink);font-weight:600}
.bk-row.live{background:none;border:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;
  padding:2px 0;border-radius:3px}
.bk-row.live:hover span:first-child{color:var(--acc)}
.bk-row.live.on span:first-child{color:var(--acc);font-weight:600}

/* ---------- archived monthly reports ---------- */
.bk-rep{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:11px 14px;margin-bottom:8px;
  cursor:pointer;font:inherit;color:inherit}
.bk-rep:hover{border-color:var(--acc)}
.bk-rep .m{font-family:"Space Grotesk";font-weight:600;font-size:14px}
.bk-rep .s{font-size:12px;color:var(--mut)}
.bk-rep .g{font-family:"Space Grotesk";font-size:12px;color:var(--acc)}
.bk-repbody{max-height:64vh;overflow-y:auto}

/* ---------- team ---------- */
.bk-member{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:8px}
.bk-member b{font-family:"Space Grotesk";font-size:14px}
.bk-memail{font-size:12.5px;color:var(--mut);margin-top:2px}
.bk-perms{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.bk-perm{font-size:10.5px;background:var(--tintacc);color:var(--acc);border-radius:99px;padding:2px 9px}
.bk-perm.off{background:var(--band);color:var(--mut)}
.bk-member .bk-btn{padding:6px 12px;font-size:12px;flex:none}
.bk-permrow{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.bk-permopt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);cursor:pointer}
.bk-permopt input{width:16px;height:16px;accent-color:var(--acc)}

/* ---------- integrations ---------- */
.bk-st{font-family:"Space Grotesk";font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border-radius:99px;padding:3px 10px;white-space:nowrap}
.bk-st.on{background:var(--tintacc);color:var(--acc)}
.bk-st.off{background:var(--band);color:var(--mut)}