/* TradeDesk — dark "command center" theme.
   Deep slate surfaces, layered depth, gradient controls. */

:root{
  color-scheme:dark;
  --bg:#0b0f17;            /* page */
  --panel:#121826;         /* cards */
  --panel-2:#0e1420;       /* card headers, table heads */
  --panel-3:#1a2234;       /* raised elements */
  --line:#222c40;          /* borders */
  --line-soft:#1a2334;     /* row separators */
  --ink:#e7ecf5;           /* primary text */
  --mut:#8d99ad;           /* secondary text */
  --blue:#4f8cff;          /* accent */
  --blue-deep:#2563eb;
  --teal:#2dd4bf;
  --amber:#f0b35c;
  --red:#f47c6d;
  --green:#4ade80;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(79,140,255,.22);
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 500px at 70% -10%, #131c30 0%, var(--bg) 55%) fixed, var(--bg);
  color:var(--ink); font-size:14px; }
a{ color:var(--blue); text-decoration:none; } a:hover{ text-decoration:underline; }
.boot{ padding:60px; text-align:center; color:var(--mut); }
button{ font-family:inherit; }
::selection{ background:rgba(79,140,255,.35); }

/* ---------- buttons: layered, machined ---------- */
.btn{
  border:1px solid #2b3854; border-radius:9px; padding:7px 12px; font-size:12.5px; font-weight:650;
  color:#d9e2f2; cursor:pointer; position:relative;
  background:linear-gradient(180deg,#202a40 0%, #161e30 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.45);
  transition:border-color .15s, box-shadow .15s, transform .1s, color .15s;
}
.btn:hover{ border-color:var(--blue); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 8px rgba(0,0,0,.5), 0 0 0 1px rgba(79,140,255,.25);
  transform:translateY(-1px); }
.btn:active{ transform:translateY(0); box-shadow:inset 0 2px 4px rgba(0,0,0,.45); }
.btn.pickup{ border-color:rgba(45,212,191,.45); color:#7ee8db; }
.btn.pickup:hover{ border-color:var(--teal); color:#aef4ea; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.5), 0 0 0 1px rgba(45,212,191,.3); }

/* primary action buttons */
.auth .primary, .save button, .cin button{
  background:linear-gradient(180deg,#5b95ff 0%, #2f6ae8 55%, #2257d6 100%);
  color:#fff; border:1px solid #6ea1ff; border-radius:10px; font-weight:700; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px -2px rgba(47,106,232,.65);
  text-shadow:0 1px 1px rgba(0,30,90,.35);
  transition:filter .15s, transform .1s, box-shadow .15s;
}
.auth .primary:hover, .save button:hover, .cin button:hover{
  filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 16px -2px rgba(47,106,232,.8); }
.auth .primary:active, .save button:active, .cin button:active{ transform:translateY(0); filter:brightness(.96); }
.ghost{ border:1px solid var(--line); background:linear-gradient(180deg,#171f31,#121827); border-radius:9px;
  padding:7px 13px; cursor:pointer; font-weight:600; color:#aeb9cc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .15s, color .15s; }
.ghost:hover{ border-color:#3a4a6b; color:#e7ecf5; }

/* ---------- auth ---------- */
.auth{ max-width:380px; margin:8vh auto; background:linear-gradient(180deg,#141b2b,#101624);
  border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--shadow); }
.auth h1{ font-size:20px; margin:0 0 2px; letter-spacing:-.01em; }
.auth .tag{ color:var(--mut); font-size:13px; margin-bottom:18px; }
.auth label{ display:block; font-size:11px; color:var(--mut); margin:12px 0 5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.auth input,.auth select{ width:100%; padding:10px 12px; background:#0d1320; border:1px solid var(--line);
  border-radius:9px; font-size:14px; color:var(--ink); }
.auth input:focus,.auth select:focus{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }
.auth .primary{ width:100%; margin-top:18px; padding:11px; font-size:14px; }
.auth .switch{ text-align:center; margin-top:14px; font-size:13px; color:var(--mut); }
.auth .err{ background:rgba(244,124,109,.12); border:1px solid rgba(244,124,109,.35); color:var(--red);
  padding:8px 10px; border-radius:8px; font-size:12.5px; margin-top:12px; }
.logo{ width:42px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,#5b95ff,#2dd4bf);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;margin-bottom:14px;
  box-shadow:0 4px 14px -4px rgba(79,140,255,.6), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- app shell ---------- */
.top{ background:rgba(13,18,30,.85); border-bottom:1px solid var(--line); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20; }
.topin{ max-width:1080px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:12px; }
.brand{ font-weight:800; letter-spacing:-.01em; } .brand small{ font-weight:500; color:var(--mut); }
.spacer{ flex:1; }
.wrap{ max-width:1080px; margin:0 auto; padding:16px 18px 70px; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 16px; }
.tab{ padding:8px 14px; border-radius:999px; background:linear-gradient(180deg,#171f31,#121827);
  border:1px solid var(--line); cursor:pointer; font-weight:600; color:#aab5c8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, color .15s, background .15s; }
.tab:hover{ border-color:#3a4a6b; color:#e7ecf5; }
.tab.active{ background:linear-gradient(180deg,#5b95ff,#2960e0); color:#fff; border-color:#6ea1ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 12px -2px rgba(47,106,232,.7); }

.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:14px; }
.stat{ background:linear-gradient(180deg,#141b2b,#111726); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.stat .n{ font-size:22px; font-weight:750; letter-spacing:-.02em; } .stat.warn .n{ color:var(--amber); }
.stat .l{ font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.07em; margin-top:1px; }

.card{ background:linear-gradient(180deg,#131a2a 0%, #111726 100%); border:1px solid var(--line);
  border-radius:14px; margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow); }
.card h2{ font-size:13px; margin:0; padding:13px 16px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#161e30,#131a2a); text-transform:uppercase; letter-spacing:.05em; color:#c6d1e4; }
.card h2 .muted, .card h2 small{ text-transform:none; letter-spacing:0; }
.row{ display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-soft); } .row:last-child{ border-bottom:none; }
.av{ width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#1c2740,#16203a);
  border:1px solid #2b3854; color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto; }
.grow{ flex:1; min-width:0; } .nm{ font-weight:650; } .meta{ color:var(--mut); font-size:12.5px; margin-top:2px; }

.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:700;
  border:1px solid transparent; letter-spacing:.02em; }
.pill.booked{ background:rgba(79,140,255,.13); color:#8db4ff; border-color:rgba(79,140,255,.35); }
.pill.completed{ background:rgba(74,222,128,.12); color:#7ce69b; border-color:rgba(74,222,128,.3); }
.pill.no_show_followup{ background:rgba(240,179,92,.13); color:#f3c277; border-color:rgba(240,179,92,.32); }
.pill.lead{ background:rgba(167,139,250,.13); color:#bda6fb; border-color:rgba(167,139,250,.32); }
.pill.customer{ background:rgba(74,222,128,.12); color:#7ce69b; border-color:rgba(74,222,128,.3); }
.pill.cancelled{ background:rgba(141,153,173,.12); color:#9aa6ba; border-color:rgba(141,153,173,.3); }

table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:10px 16px; border-bottom:1px solid var(--line-soft); font-size:13px; }
th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); background:var(--panel-2); }
.tag-ok{ color:var(--green);font-weight:700;} .tag-low{ color:var(--amber);font-weight:700;} .tag-out{ color:var(--red);font-weight:700;}

.opt{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .px{ color:var(--mut); font-weight:500; }
.jobcard{ padding:14px 16px; border-bottom:1px solid var(--line-soft); } .jobcard:last-child{ border-bottom:none; }
.partline{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line-soft); font-size:13px; } .partline:last-child{ border-bottom:none; }
.short{ background:rgba(240,179,92,.1);border:1px solid rgba(240,179,92,.3);border-radius:9px;padding:8px 10px;margin-top:8px;font-size:12.5px;color:#f3c277;}
.ready{ background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.28);border-radius:9px;padding:8px 10px;margin-top:8px;font-size:12.5px;color:#7ce69b;}
.empty{ padding:24px 16px; text-align:center; color:var(--mut); }
.muted{ color:var(--mut); }

/* ---------- forms / settings ---------- */
.field{ padding:12px 16px; border-bottom:1px solid var(--line-soft); } .field:last-child{ border-bottom:none; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 8px; }
.grid3 .field{ border-bottom:1px solid var(--line-soft); }
@media (max-width:700px){ .grid3{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:11px; font-weight:700; color:var(--mut); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.field label .muted{ text-transform:none; letter-spacing:0; font-weight:500; }
.field input,.field textarea,.field select{ width:100%; padding:9px 11px; background:#0d1320;
  border:1px solid var(--line); border-radius:9px; font-size:13px; font-family:inherit; color:var(--ink);
  transition:border-color .15s, box-shadow .15s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }
.field textarea{ min-height:54px; resize:vertical; }
input[type=checkbox],input[type=radio]{ accent-color:var(--blue); }
.save{ position:sticky; bottom:0; background:rgba(13,18,30,.92); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:12px 16px; text-align:right; z-index:5; }
.save button{ border-radius:10px; padding:10px 20px; font-size:13.5px; }
.list-row{ display:flex; gap:8px; margin-bottom:6px; align-items:center; } .list-row input{ flex:1; } .list-row button{ flex:0 0 auto; }

/* selects rendered inline (e.g. schedule assign dropdowns) */
select{ background:#0d1320; color:var(--ink); border:1px solid var(--line); border-radius:8px; }

/* ---------- tester ---------- */
.phone{ max-width:380px; margin:0 auto; }
.chat{ background:linear-gradient(180deg,#101626,#0e1320); border:1px solid var(--line); border-radius:14px;
  height:380px; overflow-y:auto; padding:14px; box-shadow:inset 0 2px 12px rgba(0,0,0,.35); }
.bub{ max-width:78%; padding:8px 12px; border-radius:14px; margin:6px 0; font-size:13px; line-height:1.35; }
.bub.in{ background:#1c2538; border:1px solid #28344e; }
.bub.out{ background:linear-gradient(180deg,#5b95ff,#2960e0); color:#fff; margin-left:auto;
  box-shadow:0 2px 8px -2px rgba(47,106,232,.55); }
.cin{ display:flex; gap:8px; margin-top:10px; }
.cin input{ flex:1; padding:10px 12px; background:#0d1320; border:1px solid var(--line); border-radius:10px; color:var(--ink); }
.cin input:focus{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }
.cin button{ border-radius:10px; padding:0 16px; }

.toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,#1d2740,#161e32); color:#e7ecf5; border:1px solid #2f3c5c;
  padding:10px 16px; border-radius:10px; font-size:13px; opacity:0; transition:opacity .2s;
  pointer-events:none; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.55); }
.toast.show{ opacity:1; }

/* ---------- hours editor ---------- */
.hours-ed{ display:flex; flex-direction:column; gap:6px; }
.hrow{ display:flex; align-items:center; gap:8px; }
.hlbl{ width:34px; font-weight:600; color:#aab5c8; font-size:12.5px; }
.hchk{ font-size:12px; color:var(--mut); display:flex; align-items:center; gap:5px; }
.hrow input[type=time]{ width:auto; padding:5px 7px; background:#0d1320; border:1px solid var(--line);
  border-radius:7px; font-size:12.5px; color:var(--ink); }
.hrow input[disabled]{ opacity:.35; }

/* ---------- banners ---------- */
.holiday-banner{ background:linear-gradient(180deg,rgba(240,179,92,.12),rgba(240,179,92,.06));
  border:1px solid rgba(240,179,92,.3); border-radius:12px; padding:11px 14px; margin-bottom:12px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:#eadfca; }
.holiday-banner .hbtns{ margin-left:auto; display:flex; gap:8px; }

/* ---------- calendar ---------- */
.calhead{ display:grid; grid-template-columns:repeat(7,1fr); padding:8px 10px 0; }
.calhead div{ font-size:10.5px; text-transform:uppercase; color:var(--mut); text-align:center; font-weight:700; letter-spacing:.06em; }
.calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:8px 10px 12px; }
.cell{ min-height:78px; border:1px solid var(--line); border-radius:9px; padding:5px 6px;
  background:linear-gradient(180deg,#131a2a,#101626); position:relative; }
.cell.blank{ border:none; background:transparent; }
.cell.closed{ background:#0c1019; border-color:#1a2233; }
.cell.closed .cnum{ color:#5a657a; }
.cell.forceopen{ background:rgba(74,222,128,.07); border-color:rgba(74,222,128,.3); }
.cnum{ font-weight:700; font-size:12.5px; display:flex; justify-content:space-between; align-items:baseline; }
.chrs{ font-weight:500; font-size:9.5px; color:var(--mut); }
.cbadge{ font-size:9px; font-weight:700; border-radius:5px; padding:1px 4px; margin-top:2px; display:inline-block; }
.cbadge.hol{ background:rgba(240,179,92,.16); color:#f3c277; }
.cbadge.blk{ background:rgba(244,124,109,.16); color:var(--red); }
.cbadge.opn{ background:rgba(74,222,128,.14); color:#7ce69b; }
.cappt{ font-size:10px; background:rgba(79,140,255,.14); color:#8db4ff; border-radius:5px; padding:1px 4px;
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cactions{ position:absolute; bottom:4px; right:5px; display:flex; gap:3px; opacity:0; transition:opacity .15s; }
.cell:hover .cactions{ opacity:1; }
.cbtn{ font-size:10px; border:1px solid #2b3854; background:linear-gradient(180deg,#202a40,#161e30);
  color:#d9e2f2; border-radius:6px; padding:2px 6px; cursor:pointer; }
.cbtn:hover{ border-color:var(--blue); color:#fff; }

/* scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#222c40; border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#2f3c5c; }
::-webkit-scrollbar-track{ background:transparent; }

@media(max-width:680px){ .stats{ grid-template-columns:repeat(2,1fr); } .cell{ min-height:58px; } .cappt,.cbadge{ display:none; } }