/* ==========================================================================
   OWNER DASHBOARD — the door-knocking operation on one screen.
   ==========================================================================

   Built to the shape Grayson asked for: an icon rail, a title bar, stat cards
   with a delta under each number, one big chart with a column beside it, and
   a dense table with status pills and allocation bars.

   The palette is ours, not the reference's. That picture is violet on indigo;
   this is the Varner black with the one red accent, because the red has to
   keep meaning something. What is borrowed is the STRUCTURE — layered dark
   surfaces, generous rounding, a lot of information held calmly — not the hue.

   Depth comes from three stacked greys rather than from colour: the ground,
   the card, and a lifted inner surface. That is what makes a dark dashboard
   read as designed instead of as a black page with boxes on it.
   ========================================================================== */

:root{
  --red:#D80C11;
  --ground:#08080B;          /* a hair off pure black, so cards can sit above it */
  --card-1:#131318;
  --card-2:#0E0E12;
  --inset:#0A0A0D;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --ink:#fff;
  --ink-2:rgba(255,255,255,.62);
  --ink-3:rgba(255,255,255,.40);
  --good:#27AE60;
  --warn:#E0A800;
  --cool:#2F80ED;
  --r:16px;
}

*{ box-sizing:border-box }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  /* A very slow radial lift behind everything. Invisible as a "gradient",
     but it stops the ground reading as flat black under the cards. */
  background-image:radial-gradient(1200px 600px at 18% -10%, rgba(216,12,17,.07), transparent 60%);
  background-attachment:fixed;
}

.gate{ padding:70px 20px; text-align:center; color:var(--ink-3) }
.gate.no{ color:#ff6b6e }

/* ---------------------------------------------------------------- shell --- */
.shell{ display:flex; min-height:100vh }

/* ----------------------------------------------------------------- rail --- */
/* Icon-only, like the reference. Each one jumps to a section — a rail that
   does nothing is just chrome, and this page is long enough to need it. */
.rail{
  position:sticky; top:0; align-self:flex-start;
  height:100vh; flex:none; width:64px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 0;
  background:linear-gradient(180deg,#121216,#0B0B0E);
  border-right:1px solid var(--line);
}
.rail-mark{
  width:38px; height:38px; flex:none; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--red); color:#fff; text-decoration:none;
  font:900 18px/1 Inter,sans-serif;
}
.rail-items{ display:flex; flex-direction:column; gap:4px; flex:1 }
.rail button{
  position:relative;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:12px;
  color:var(--ink-3); cursor:pointer;
}
.rail button svg{ width:20px; height:20px }
.rail button:hover{ color:var(--ink); background:rgba(255,255,255,.05) }
.rail button.on{ color:#fff; background:rgba(216,12,17,.16) }
/* The little red tab against the edge, the way the reference marks its
   active item. */
.rail button.on::before{
  content:""; position:absolute; left:-14px; top:11px;
  width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--red);
}
.rail-out{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; color:var(--ink-3); text-decoration:none;
}
.rail-out svg{ width:20px; height:20px }
.rail-out:hover{ color:#fff; background:rgba(255,255,255,.05) }

/* ----------------------------------------------------------------- main --- */
.main{ flex:1; min-width:0; padding:20px 22px 70px; max-width:1500px }

.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:18px;
}
.title h1{
  margin:0; font:800 26px/1.1 Inter,sans-serif; letter-spacing:-.02em;
}
.title p{ margin:5px 0 0; font:500 12.5px/1 Inter,sans-serif; color:var(--ink-3) }
.topbar .ranges{ margin-left:auto }
.topact{ display:flex; gap:8px }
.ico{
  width:40px; height:40px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--line);
  background:var(--card-1); color:var(--ink-2); cursor:pointer; text-decoration:none;
}
.ico svg{ width:18px; height:18px }
.ico:hover{ color:#fff; border-color:var(--line-2) }

/* --------------------------------------------------------------- ranges --- */
.ranges{
  display:flex; gap:4px; padding:4px;
  background:var(--card-2); border:1px solid var(--line); border-radius:12px;
}
.ranges button{
  min-height:32px; padding:0 13px;
  background:none; border:none; border-radius:9px;
  color:var(--ink-3); cursor:pointer;
  font:700 12.5px/1 Inter,sans-serif;
}
.ranges button:hover{ color:var(--ink) }
.ranges button.on{ background:var(--red); color:#fff }

/* ----------------------------------------------------------------- KPIs --- */
/* The reference's stat card: label and icon on one line, the number large
   beneath, and a delta under that. The delta is the part most dashboards
   skip and the part that actually tells you anything. */
.kpis{
  display:grid; gap:12px; margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.kpi{
  position:relative; overflow:hidden;
  background:linear-gradient(158deg,var(--card-1),var(--card-2));
  border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px 14px;
}
.kpi-top{ display:flex; align-items:center; gap:8px }
.kpi .k{
  font:700 11px/1 Inter,sans-serif; letter-spacing:.06em;
  color:var(--ink-3); text-transform:none;
}
.kpi .glyph{
  margin-left:auto; width:30px; height:30px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:rgba(255,255,255,.05); color:var(--ink-2);
}
.kpi .glyph svg{ width:15px; height:15px }
.kpi .v{
  display:block; margin-top:11px;
  font:800 28px/1 Inter,sans-serif; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.kpi .s{
  display:block; margin-top:7px;
  font:600 11.5px/1.3 Inter,sans-serif; color:var(--ink-3);
}
.kpi.hero{ border-color:rgba(216,12,17,.35) }
.kpi.hero .v{ color:#ff5a5e }
.kpi.hero .glyph{ background:rgba(216,12,17,.16); color:#ff7c80 }
.kpi.good .v{ color:#4ade80 }
.kpi.good .glyph{ background:rgba(39,174,96,.15); color:#4ade80 }

/* ---------------------------------------------------------------- cards --- */
.card{
  background:linear-gradient(158deg,var(--card-1),var(--card-2));
  border:1px solid var(--line); border-radius:var(--r);
  padding:16px 17px 17px; margin-bottom:14px;
}
.card h2{
  margin:0; font:700 15px/1.2 Inter,sans-serif; letter-spacing:-.01em;
}
.hint{ margin:6px 0 13px; font:500 12px/1.45 Inter,sans-serif; color:var(--ink-3) }
.card-head{
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.card-head .hint{ margin-bottom:0 }
.card-head > nav,
.card-head > .legend{ margin-left:auto }

/* The reference's two-column body: one wide card, one narrow column. */
.split{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr) 340px; align-items:start }
.split.even{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.side{ display:flex; flex-direction:column; gap:14px }
.side .card{ margin:0 }
.split > .card{ margin-bottom:0 }
.split{ margin-bottom:14px }

/* ------------------------------------------------------------- lifetime --- */
/* The career number, given the weight it deserves. */
.lifetime{ text-align:left }
.lifetime .k{
  font:700 11px/1 Inter,sans-serif; color:var(--ink-3);
}
.lifetime .big{
  margin-top:9px; font:800 38px/1 Inter,sans-serif; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(92deg,#fff,#ff7c80);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lifetime .mile{ margin-top:11px }
.milebar{
  height:6px; border-radius:99px; background:var(--inset); overflow:hidden;
}
.milebar i{ display:block; height:100%; border-radius:99px;
            background:linear-gradient(90deg,var(--red),#ff7c80) }
.milelab{ margin-top:7px; font:600 11.5px/1.3 Inter,sans-serif; color:var(--ink-3) }

/* ------------------------------------------------------------ line chart --- */
.linewrap{ width:100%; overflow:hidden }
.linewrap svg{ display:block; width:100%; height:auto }
.legend{ display:flex; gap:13px; flex-wrap:wrap }
.legend span{
  display:flex; align-items:center; gap:6px;
  font:600 11.5px/1 Inter,sans-serif; color:var(--ink-2);
}
.legend i{ width:8px; height:8px; border-radius:50%; flex:none }

/* --------------------------------------------------------------- funnel --- */
.funnel{ display:flex; flex-direction:column; gap:8px }
.fstep{ display:flex; align-items:center; gap:10px }
.fbar{
  flex:1; height:9px; border-radius:99px; background:var(--inset); overflow:hidden;
}
.fbar i{ display:block; height:100%; border-radius:99px }
.fstep .lab{ width:74px; flex:none; font:700 11px/1.2 Inter,sans-serif; color:var(--ink-2) }
.fstep .num{ font:700 12px/1 Inter,sans-serif; font-variant-numeric:tabular-nums }
.fstep .conv{ font:700 11px/1 Inter,sans-serif; color:var(--ink-3); white-space:nowrap }

/* ------------------------------------------------------------ bar charts --- */
.chart{ display:flex; align-items:flex-end; gap:3px; height:150px; overflow-x:auto; scrollbar-width:none }
.chart::-webkit-scrollbar{ display:none }
.col{ flex:1; min-width:17px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100% }
.col .stack{ width:100%; display:flex; flex-direction:column; justify-content:flex-end }
.col .bar{
  width:100%; border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--red),rgba(216,12,17,.35));
}
.col .bar.q{ background:linear-gradient(180deg,var(--warn),rgba(224,168,0,.3)) }
.col .bar.g{ background:linear-gradient(180deg,var(--good),rgba(39,174,96,.3)) }
.col .n{ font:700 9.5px/1 Inter,sans-serif; color:var(--ink-2); margin-bottom:4px }
.col .x{ font:600 9px/1 Inter,sans-serif; color:var(--ink-3); margin-top:6px; white-space:nowrap }

/* ----------------------------------------------------------------- team --- */
/* The reference's channel table, doing the job it was built for: comparing
   people across the same columns, with a pill for standing and a bar for
   share. */
.scroll{ overflow-x:auto; scrollbar-width:thin }
.board{ width:100%; min-width:620px; border-collapse:collapse }
.trow{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:26px minmax(120px,1.4fr) repeat(4,minmax(58px,.8fr)) minmax(120px,1.2fr);
  padding:11px 8px; border-top:1px solid var(--line);
}
.trow.head{
  border-top:none; padding-bottom:9px;
  font:700 10px/1 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.trow.head span{ cursor:pointer }
.trow.head span.on{ color:#fff }
.trow .pos{
  width:22px; height:22px; border-radius:7px; background:var(--inset);
  display:flex; align-items:center; justify-content:center;
  font:800 10.5px/1 Inter,sans-serif; color:var(--ink-2);
}
.trow.top1 .pos{ background:rgba(216,12,17,.2); color:#ff7c80 }
.trow .who{ font:700 13.5px/1.2 Inter,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.trow .num{ font:700 13px/1 Inter,sans-serif; font-variant-numeric:tabular-nums }
.trow .num.money{ color:#4ade80 }
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:99px;
  font:800 10.5px/1 Inter,sans-serif; white-space:nowrap;
}
.pill.hi{ background:rgba(39,174,96,.16); color:#4ade80 }
.pill.mid{ background:rgba(224,168,0,.16); color:#ffd86b }
.pill.low{ background:rgba(255,255,255,.07); color:var(--ink-2) }
/* The allocation bar from the reference — here it is share of the crew's
   booked revenue, which is the honest equivalent. */
.alloc{ display:flex; align-items:center; gap:9px }
.alloc .track{ flex:1; height:6px; border-radius:99px; background:var(--inset); overflow:hidden }
.alloc .track i{ display:block; height:100%; border-radius:99px;
                 background:linear-gradient(90deg,var(--red),#ff7c80) }
.alloc .pc{ font:700 11px/1 Inter,sans-serif; color:var(--ink-3); width:38px; text-align:right }

.sorts{ display:flex; gap:5px; overflow-x:auto; scrollbar-width:none }
.sorts::-webkit-scrollbar{ display:none }
.sorts button{
  flex:none; min-height:30px; padding:0 11px;
  background:var(--inset); border:1px solid var(--line); border-radius:8px;
  color:var(--ink-3); cursor:pointer; font:700 11.5px/1 Inter,sans-serif;
}
.sorts button.on{ background:rgba(216,12,17,.16); border-color:rgba(216,12,17,.5); color:#fff }

.sub{ margin:0 0 9px; font:700 11px/1 Inter,sans-serif; letter-spacing:.1em;
      text-transform:uppercase; color:var(--ink-3) }

/* ---------------------------------------------------------------- lists --- */
.act{ border-color:rgba(216,12,17,.28) }
.grp{ margin-bottom:14px }
.grp:last-child{ margin-bottom:0 }
.grp h3{
  margin:0 0 8px; font:700 11px/1 Inter,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.item{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-top:1px solid var(--line);
}
.item .body{ flex:1; min-width:0 }
.item .l1{ display:block; font:700 13px/1.3 Inter,sans-serif;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.item .l2{ display:block; margin-top:3px; font:600 11.5px/1.3 Inter,sans-serif; color:var(--ink-3) }
.item .amt{ font:800 13px/1 Inter,sans-serif; color:#4ade80; white-space:nowrap }
.item .age{ font:700 11px/1 Inter,sans-serif; color:var(--warn); white-space:nowrap }
.empty{ margin:0; padding:14px 0; color:var(--ink-3); font:500 13px/1.4 Inter,sans-serif }

table.board{ min-width:420px }
table.board td, table.board th{
  padding:9px 8px; border-top:1px solid var(--line);
  font:600 12.5px/1.3 Inter,sans-serif; text-align:left;
}
table.board th{ font:700 10px/1 Inter,sans-serif; letter-spacing:.1em;
                text-transform:uppercase; color:var(--ink-3); border-top:none }
table.board td.n{ font-variant-numeric:tabular-nums; text-align:right }

.stamp{ margin:6px 0 0; text-align:center; font:600 11px/1 Inter,sans-serif; color:var(--ink-3) }

/* --------------------------------------------------------------- phones --- */
/* The rail becomes a top strip and everything stacks. Owners read this in a
   truck as often as at a desk, and the standing rule is that nothing ships
   desktop-only. */
@media (max-width:1080px){
  .split, .split.even{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:760px){
  .shell{ flex-direction:column }
  .rail{
    position:sticky; top:0; z-index:20;
    flex-direction:row; width:100%; height:auto;
    padding:8px max(10px,env(safe-area-inset-left));
    border-right:none; border-bottom:1px solid var(--line);
    overflow-x:auto; scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{ display:none }
  .rail-mark{ margin-bottom:0 }
  .rail-items{ flex-direction:row; flex:1 }
  .rail button.on::before{ left:11px; top:auto; bottom:-8px; width:22px; height:3px; border-radius:3px 3px 0 0 }
  .main{ padding:14px 13px 60px }
  .title h1{ font-size:21px }
  .topbar .ranges{ margin-left:0; width:100%; order:3 }
  .topact{ margin-left:auto }
  .kpis{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px }
  .kpi .v{ font-size:23px }
  .lifetime .big{ font-size:31px }
}

/* ------------------------------------------------------------- access ----
   One row per account: who they are, the role, and what that role actually
   opens. The third column exists because a role NAME does not tell an owner
   whether the door map is visible to that person, and that is the question
   being asked when this screen gets opened. */
.crew{display:grid;gap:8px;min-width:520px}
.crew-row{
  display:grid;grid-template-columns:1fr 190px 1fr;align-items:center;gap:14px;
  padding:12px 14px;background:#0D0D0C;border:1px solid #262624;border-radius:5px;
}
.crew-who b{display:block;font-size:14px;font-weight:800;color:#F4F4F1;letter-spacing:-.01em}
.crew-who span{display:block;margin-top:2px;font-size:12px;color:#7C7C76}
.crew-role{
  width:100%;padding:9px 11px;font:700 13px/1.2 Inter,system-ui,sans-serif;
  background:#111110;color:#F4F4F1;border:1px solid #333331;border-radius:4px;
  cursor:pointer;color-scheme:dark;-webkit-appearance:none;appearance:none;
}
.crew-role:focus{outline:none;border-color:#D80C11}
.crew-role:disabled{opacity:.5}
.crew-can{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#7C7C76;text-align:right;
}
@media(max-width:700px){
  .crew-row{grid-template-columns:1fr 160px;gap:10px}
  .crew-can{grid-column:1 / -1;text-align:left}
}

.addcrew{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.addcrew input,.addcrew select{
  flex:1 1 150px;min-width:0;padding:10px 12px;font:600 14px/1.2 Inter,system-ui,sans-serif;
  background:#111110;color:#F4F4F1;border:1px solid #333331;border-radius:4px;color-scheme:dark;
}
.addcrew input:focus,.addcrew select:focus{outline:none;border-color:#D80C11}
.addcrew button{
  flex:0 0 auto;padding:10px 18px;border:0;border-radius:4px;cursor:pointer;
  background:#D80C11;color:#fff;font:800 12px/1.2 Inter,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;min-height:42px;
}
.addcrew button:disabled{opacity:.5;cursor:default}