/* LexFord Manager — redesigned UI (owner-approved mockup, June 2026).
   Palette: black / white / greys + blue working accent. Green = complete/deliver
   only. Amber = warning text only. Squared corners (cards 6px, controls 4px). */

:root{
  --ink:#121417;            /* sidebar / near-black chrome */
  --blue:#2563eb; --blue2:#1d4ed8; --blue-lt:#60a5fa;
  --green:#10b981;
  --amber:#b45309;
  --red:#dc2626;
  --line:rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#000;background:#fff;min-height:100vh;
  background-image:
    radial-gradient(60rem 40rem at 85% -10%, rgb(0 0 0/.04), transparent 60%),
    radial-gradient(50rem 35rem at -10% 30%, rgb(0 0 0/.03), transparent 55%),
    radial-gradient(40rem 30rem at 70% 110%, rgb(37 99 235/.04), transparent 60%);
  background-attachment:fixed;
}
#app{display:flex;min-height:100vh}
[hidden]{display:none !important}

/* ---------- auth overlay ---------- */
#auth-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:#fff;
  background-image:radial-gradient(50rem 35rem at 50% -10%, rgb(37 99 235/.06), transparent 60%)}
.auth-card{width:360px;max-width:92vw;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:6px;box-shadow:0 14px 44px rgb(0 0 0/.12);padding:30px 28px}
.auth-brand{font-size:24px;font-weight:800;letter-spacing:-.02em}
.auth-brand i{color:var(--blue);font-style:normal}
.auth-sub{margin-top:2px;font-size:12px;color:rgba(0,0,0,.5)}
.auth-card label{display:block;margin-top:16px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  color:rgba(0,0,0,.5);text-transform:uppercase}
.auth-card input{width:100%;margin-top:6px;border:1px solid rgba(0,0,0,.18);border-radius:4px;
  padding:11px 13px;font-size:14px;font-family:inherit;background:#fff}
.auth-card input:focus{outline:2px solid var(--blue);outline-offset:-1px}
#auth-signin-btn{width:100%;margin-top:20px;padding:12px}
.auth-error{margin-top:12px;font-size:12.5px;color:var(--red);min-height:16px}

/* ---------- sidebar ---------- */
.sb{width:232px;min-height:100vh;flex:none;border-right:1px solid rgba(255,255,255,.06);
  background:var(--ink);padding:22px 14px;
  display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;z-index:20}
.sb-brand{font-size:19px;font-weight:800;letter-spacing:-.02em;padding:2px 10px 4px;color:#fff}
.sb-brand i{color:#3b82f6;font-style:normal}
.sb-tag{display:inline-block;margin:0 10px 14px;background:#fff;color:#000;
  border-radius:3px;padding:3px 9px;font-size:9px;font-weight:700;letter-spacing:.18em;align-self:flex-start}
.sb-ops{padding:0 12px 6px;font-size:10px;font-weight:700;letter-spacing:.16em;
  color:rgba(255,255,255,.35);text-transform:none}
.sb a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:4px;
  color:rgba(255,255,255,.55);font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer}
.sb a svg{width:16px;height:16px;flex:none}
.sb a.on{background:#fff;color:#000}
.sb a:not(.on):hover{background:rgba(255,255,255,.08);color:#fff}
.sb a .ct{margin-left:auto;font-size:11px;font-weight:700;background:var(--blue);color:#fff;
  border-radius:3px;padding:1px 7px}
.sb a .ct:empty{display:none}
.sb a.on .ct{background:#000;color:#fff}
.sb-foot{margin-top:auto;padding:10px;font-size:11.5px;color:rgba(255,255,255,.4);
  border-top:1px solid rgba(255,255,255,.08)}
.sb-foot b{color:#fff;display:block;font-size:12.5px}
.sb-foot a{display:inline;padding:0;color:rgba(255,255,255,.5);font-size:11.5px;text-decoration:underline;cursor:pointer}
.sb-foot a:hover{color:#fff;background:none}

/* ---------- main ---------- */
main{flex:1;padding:30px 34px;max-width:1240px;min-width:0}
.page{display:none}.page.on{display:block}
h1{font-size:26px;letter-spacing:-.02em;font-weight:800}
.sub{margin-top:4px;color:rgba(0,0,0,.5);font-size:13.5px}
.row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
a.txt{font-size:12.5px;font-weight:700;color:var(--blue);cursor:pointer;text-decoration:none}
a.txt:hover{text-decoration:underline}

/* ---------- primitives ---------- */
.card{background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:6px;box-shadow:0 1px 2px rgb(0 0 0/.05),0 10px 28px rgb(0 0 0/.07)}
.inset{background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.08);border-radius:4px}
.sel-card{outline:3px solid rgba(0,0,0,.85)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:4px;cursor:pointer;
  font-size:13px;font-weight:700;padding:9px 16px;transition:.15s;font-family:inherit}
.btn:disabled{opacity:.5;cursor:default}
.btn.blu{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgb(37 99 235/.25)}
.btn.blu:hover:not(:disabled){background:var(--blue2)}
.btn.blk{background:#000;color:#fff}.btn.blk:hover:not(:disabled){background:#374151}
.btn.grn{background:var(--green);color:#fff;box-shadow:0 4px 12px rgb(16 185 129/.25)}
.btn.ghost{background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.2);color:#000}
.btn.ghost:hover:not(:disabled){border-color:rgba(0,0,0,.45)}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:3px;padding:4px 10px;
  font-size:11.5px;font-weight:700}
.c-sub{border:1px solid rgba(0,0,0,.25);color:rgba(0,0,0,.7);background:#fff}
.c-conf{background:rgba(37,99,235,.08);color:var(--blue2);border:1px solid rgba(37,99,235,.3)}
.c-insp{background:var(--blue);color:#fff}
.c-done{background:var(--green);color:#fff}
.c-hold{background:#000;color:#fff}
.c-warn{border:1px solid rgba(180,83,9,.4);color:var(--amber);background:#fff}
.lbl{font-size:10.5px;font-weight:700;letter-spacing:.13em;color:rgba(0,0,0,.5);text-transform:uppercase}
.note{font-size:11.5px;color:rgba(0,0,0,.45)}
.note.warn{color:var(--amber)}
.av{width:30px;height:30px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;flex:none;background:#52525b}
.ftabs{display:flex;gap:8px;flex-wrap:wrap}
.ftab{border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.75);border-radius:4px;
  padding:7px 13px;font-size:12.5px;font-weight:700;color:rgba(0,0,0,.6);cursor:pointer;font-family:inherit}
.ftab.on{background:#000;color:#fff;border-color:#000}
.ftab i{font-style:normal;opacity:.55;margin-left:4px}
textarea.glass, input.glass, select.glass{width:100%;border:1px solid rgba(0,0,0,.15);border-radius:4px;
  padding:11px 14px;font-size:13.5px;font-family:inherit;background:rgba(255,255,255,.85)}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1000px){.grid2,.grid3{grid-template-columns:1fr}}

/* attention rows (Today) */
.att{display:flex;align-items:center;gap:14px;padding:15px 18px}
.att+.att{margin-top:10px}
.att .t{font-size:14.5px;font-weight:700}
.att .d{font-size:12.5px;color:rgba(0,0,0,.5);margin-top:2px}
.att .btn{margin-left:auto;flex:none}

/* queue cards (Claims page) */
.qcard{padding:14px 16px;margin-bottom:10px;cursor:pointer}
.qcard:hover{border-color:rgba(0,0,0,.3)}
.qcard b{font-size:14px}

/* ---------- dispatch: full-screen map + dark overlays ---------- */
#page-dispatch.on{position:fixed;top:0;left:232px;right:0;bottom:0;z-index:10}
#dispatch-map{position:absolute;inset:0;background:
    linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px),
    #f2f3f5;
  background-size:90px 90px,90px 90px}
.dov{position:absolute;z-index:5}
.dov-filter{top:16px;right:16px;display:flex;gap:6px}
.dov-queue{top:16px;left:16px;width:354px;max-height:calc(100% - 32px);padding:14px;overflow:auto}
.dov-fit{left:386px;right:190px;bottom:16px;padding:14px 16px}
.dov-queue,.dov-fit{background:rgba(16,18,21,.92);backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.12);color:#fff;box-shadow:0 12px 32px rgb(0 0 0/.4)}
.dov-queue .lbl,.dov-fit .lbl{color:rgba(255,255,255,.55)}
.dov-queue .note,.dov-fit .note{color:rgba(255,255,255,.48)}
.dov-queue .inset,.dov-fit .inset{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.dov-queue .inset.pick{outline:2px solid rgba(255,255,255,.85)}
.dov-fit .inset{cursor:pointer}
.dov-fit .inset.pick{outline:2px solid rgba(255,255,255,.85)}
.dov-queue .note.blue, .dov-fit .note.blue{color:var(--blue-lt)}
.dov-filter .ftab{background:rgba(16,18,21,.9);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75)}
.dov-filter .ftab.on{background:#fff;color:#000;border-color:#fff}
.tech-marker{width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;outline:3px solid #fff;box-shadow:0 4px 10px rgb(0 0 0/.25)}

/* week calendar strip */
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.cal .day{padding:9px 10px;min-height:86px}
.cal .day.today{outline:3px solid rgba(0,0,0,.85)}
.cal .ev{margin-top:6px;background:rgba(37,99,235,.08);border-radius:3px;padding:5px 7px;font-size:10.5px;font-weight:700}
.cal .ev.needs{border:1.5px dashed var(--blue)}
.cal .ev.needs i{font-style:normal;color:var(--amber)}

/* ---------- modal + toasts ---------- */
#modal-backdrop{position:fixed;inset:0;z-index:80;background:rgb(0 0 0/.4);display:flex;
  align-items:center;justify-content:center;padding:20px}
.modal{width:560px;max-width:94vw;max-height:86vh;overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:0 24px 64px rgb(0 0 0/.3);padding:22px 24px}
.modal h2{font-size:17px;font-weight:800;letter-spacing:-.01em}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
#toasts{position:fixed;right:16px;top:16px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:#000;color:#fff;border-radius:4px;padding:10px 16px;font-size:13px;font-weight:600;
  box-shadow:0 10px 28px rgb(0 0 0/.3);max-width:380px}
.toast.err{background:var(--red)}
.toast.ok{background:var(--green)}

/* file list rows */
.frow{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-top:6px}
.frow .name{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mini-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:99px;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}