:root{
    --bg:#f4f6fb; --card:#ffffff; --ink:#1a2233; --muted:#7683a0;
    --line:#e7ebf3; --brand:#2f6bff; --brand-soft:#eaf1ff;
    --green:#16a97d; --green-soft:#e5f6ef; --amber:#e08a00; --amber-soft:#fdf1dc;
    --red:#e0455e; --red-soft:#fce8ec; --slate:#5b6b8c; --slate-soft:#eef1f7;
    --purple:#6b57d6; --purple-soft:#eeeafb;
    --shadow:0 1px 2px rgba(24,39,75,.05),0 8px 24px rgba(24,39,75,.06);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px}
  .app{display:flex;flex-direction:column;min-height:100vh}
  button{font-family:inherit}

  .topbar{height:60px;background:var(--card);border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:22px;padding:0 22px;position:sticky;top:0;z-index:20}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.2px;cursor:pointer}
  .logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#2f6bff,#5b8bff);
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
  .nav{display:flex;align-items:center;gap:4px;margin-left:8px}
  .nav a{height:38px;border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 12px;
    color:var(--muted);text-decoration:none;font-weight:600;font-size:13px;cursor:pointer}
  .nav a svg{width:18px;height:18px}
  .nav a.active{background:var(--brand-soft);color:var(--brand)}
  .demoTag{margin-left:auto;font-size:11px;font-weight:700;color:var(--amber);background:var(--amber-soft);
    padding:5px 11px;border-radius:20px}
  .avatar{width:38px;height:38px;border-radius:50%;background:#dfe6f5;
    display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--slate);font-size:13px}

  .main{flex:1;padding:24px 28px;max-width:1500px;width:100%;margin:0 auto}
  .main-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap}
  .main-head h1{margin:0;font-size:22px;letter-spacing:-.4px}
  .main-head .sub{color:var(--muted);margin-top:5px;font-size:13.5px}
  .btn{height:40px;border:none;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;
    font-size:13.5px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    box-shadow:0 4px 12px rgba(47,107,255,.28)}
  .btn svg{width:16px;height:16px}
  .btn.ghost{background:var(--card);color:var(--slate);border:1px solid var(--line);box-shadow:none}

  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
  .chip{height:36px;border:1px solid var(--line);background:var(--card);border-radius:9px;
    padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--slate);cursor:pointer}
  .chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
  .chip .c{background:var(--slate-soft);color:var(--slate);border-radius:20px;padding:0 7px;font-size:11.5px}
  .chip.active .c{background:rgba(255,255,255,.25);color:#fff}
  .search{position:relative;margin-left:auto}
  .search input{height:36px;width:240px;border:1px solid var(--line);border-radius:9px;padding:0 12px 0 34px;
    font-size:13px;background:var(--card);color:var(--ink)}
  .search svg{position:absolute;left:11px;top:9px;width:17px;height:17px;color:var(--muted)}

  .tablewrap{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:auto}
  table{width:100%;border-collapse:collapse;min-width:900px}
  thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
    font-weight:700;padding:13px 16px;background:#fbfcfe;border-bottom:1px solid var(--line)}
  tbody td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:#fafbff}
  .pname{display:flex;align-items:center;gap:11px}
  .pname .pi{width:32px;height:32px;border-radius:50%;background:#e6ecf9;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--slate)}
  .pname b{font-weight:700;letter-spacing:-.1px}
  .muted{color:var(--muted)}
  .payer{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11.5px;font-weight:700}
  .p-lop{background:var(--purple-soft);color:var(--purple)}
  .p-ins{background:var(--brand-soft);color:var(--brand)}
  .p-self{background:var(--slate-soft);color:var(--slate)}
  .status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:8px;
    font-size:11.5px;font-weight:700;white-space:nowrap}
  .status .d{width:7px;height:7px;border-radius:50%}
  .s-pending{background:var(--amber-soft);color:var(--amber)} .s-pending .d{background:var(--amber)}
  .s-ready{background:var(--green-soft);color:var(--green)} .s-ready .d{background:var(--green)}
  .s-sched{background:var(--brand-soft);color:var(--brand)} .s-sched .d{background:var(--brand)}
  .s-office{background:#eae6fb;color:var(--purple)} .s-office .d{background:var(--purple)}
  .s-done{background:var(--slate-soft);color:var(--slate)} .s-done .d{background:var(--slate)}
  .s-no{background:var(--red-soft);color:var(--red)} .s-no .d{background:var(--red)}
  .empty{padding:50px;text-align:center;color:var(--muted)}

  /* form view */
  .phead{background:linear-gradient(120deg,#2f6bff,#5b8bff);color:#fff;padding:16px 22px;border-radius:14px;
    display:flex;align-items:center;gap:16px;margin-bottom:18px}
  .phead .pav{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
  .phead h2{margin:0;font-size:19px;letter-spacing:-.3px}
  .phead .pm{opacity:.92;font-size:12.5px;margin-top:3px;display:flex;gap:14px;flex-wrap:wrap}
  .phead .hbtns{margin-left:auto;display:flex;gap:9px}
  .hbtn{height:38px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;
    border-radius:9px;padding:0 15px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
  .hbtn.solid{background:#fff;color:var(--brand);border-color:#fff}

  .cardbox{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
    padding:20px 22px;margin-bottom:18px}
  .sec-h{display:flex;align-items:center;gap:9px;margin:0 0 18px;font-size:14px;font-weight:700}
  .sec-h .i{width:26px;height:26px;border-radius:8px;background:var(--brand-soft);color:var(--brand);
    display:flex;align-items:center;justify-content:center}
  .sec-h .i svg{width:15px;height:15px}
  .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
  .grid.g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1100px){.grid,.grid.g4{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:680px){.grid,.grid.g4{grid-template-columns:repeat(2,1fr)}}
  .fld{min-width:0}
  .fld label{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:7px}
  .fld label .req{color:var(--red)}
  .fld input,.fld select{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;padding:0 12px;
    font-size:13.5px;background:#fbfcfe;color:var(--ink);-webkit-appearance:none;appearance:none}
  .fld input:focus,.fld select:focus{outline:none;border-color:var(--brand);background:#fff}
  select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237683a0' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
  .lbl-row{display:flex;align-items:center;justify-content:space-between}
  .lbl-row a{font-size:11px;font-weight:700;color:var(--brand);text-decoration:none;cursor:pointer}

  .proc-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .proc-h h3{margin:0;font-size:15px;font-weight:700}
  .mini{height:34px;border-radius:8px;padding:0 12px;font-size:12.5px;font-weight:600;display:inline-flex;
    align-items:center;gap:6px;cursor:pointer;border:none}
  .mini svg{width:14px;height:14px}
  .mini.blue{background:var(--brand);color:#fff}
  .mini.ghost{background:var(--slate-soft);color:var(--slate)}
  .proc-row{display:grid;grid-template-columns:1.6fr 1.3fr 1fr 1.2fr 1fr .9fr auto;gap:12px;align-items:end;
    padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;margin-bottom:12px}
  @media(max-width:1100px){.proc-row{grid-template-columns:repeat(2,1fr)}}
  .rm{width:38px;height:40px;border-radius:9px;background:var(--red-soft);color:var(--red);border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px}
  .footbar{display:flex;gap:10px;justify-content:flex-end;padding:4px 0 20px}
  .fbtn{height:42px;border-radius:10px;padding:0 22px;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--slate)}
  .fbtn.pri{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 12px rgba(47,107,255,.28)}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);
    color:#fff;padding:13px 22px;border-radius:11px;font-size:13.5px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.25);
    opacity:0;transition:.35s;z-index:50;display:flex;align-items:center;gap:9px}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  .toast svg{width:17px;height:17px;color:#5be0a0}
  .hide{display:none!important}

  /* notes */
  .noteAdd{display:flex;gap:10px;margin-bottom:16px;align-items:flex-start}
  .noteAdd textarea{flex:1;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:11px 12px;
    font-size:13.5px;font-family:inherit;background:#fbfcfe;color:var(--ink);resize:vertical}
  .noteAdd textarea:focus{outline:none;border-color:var(--brand);background:#fff}
  .note{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .note:last-child{border:none}
  .note .na{width:30px;height:30px;border-radius:50%;background:var(--slate-soft);color:var(--slate);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
  .note.sms .na{background:var(--brand-soft);color:var(--brand)}
  .note .nt{font-size:13px;line-height:1.45}
  .note.sms .nt{color:var(--slate);font-style:italic}
  .note .nm{font-size:11.5px;color:var(--muted);margin-top:4px}
  .smsTag{background:var(--brand-soft);color:var(--brand);border-radius:20px;padding:1px 7px;font-weight:700}

  /* dashboard */
  .dashwrap{display:flex;gap:18px;align-items:flex-start}
  .dashside{width:280px;flex-shrink:0}
  .dashmain{flex:1;min-width:0}
  @media(max-width:820px){.dashwrap{flex-direction:column}.dashside{width:100%}}
  .provItem{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;
    font-size:13.5px;font-weight:600;color:var(--slate);margin-bottom:3px}
  .provItem:hover{background:#fafbff}
  .provItem.on{background:var(--brand-soft);color:var(--brand)}
  .dotmark{width:18px;height:18px;border-radius:6px;background:var(--brand);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:#fff}
  .dotmark svg{width:12px;height:12px}
  .dotmark.off{background:#fff;border:1.5px solid #cfd7e6}
  .pcount{background:var(--slate-soft);color:var(--slate);border-radius:20px;padding:0 8px;font-size:11.5px;font-weight:700}
  .provItem.on .pcount{background:#fff;color:var(--brand)}
  .apptrow{display:flex;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer}
  .apptrow:last-child{border-bottom:none}
  .apptrow:hover{background:#fafbff}
  .atime{width:90px;flex-shrink:0}
  .aprov{width:200px;flex-shrink:0;font-size:13px;color:var(--slate);display:flex;align-items:center;gap:8px}
  .aprov .pi{width:26px;height:26px;border-radius:50%;background:#e6ecf9;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--slate)}
  @media(max-width:680px){.aprov{display:none}}

/* ===== added for the live portal (login, admin, permissions) ===== */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:34px 32px;width:100%;max-width:400px}
.loginbox .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;margin-bottom:6px}
.loginbox .brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2f6bff,#5b8bff);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.loginbox p.sub{color:var(--muted);font-size:13px;margin:0 0 22px}
.loginbox .fld{margin-bottom:14px}
.loginbox button{width:100%;height:44px;margin-top:8px}
.err{background:var(--red-soft);color:var(--red);border-radius:9px;padding:11px 13px;font-size:13px;
  font-weight:600;margin-bottom:16px}
.ok{background:var(--green-soft);color:var(--green);border-radius:9px;padding:11px 13px;font-size:13px;
  font-weight:600;margin-bottom:16px}
.privacy{margin-top:20px;font-size:11.5px;color:var(--muted);line-height:1.5;text-align:center}

.modalbg{position:fixed;inset:0;background:rgba(20,28,45,.5);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px}
.modal{background:var(--card);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);padding:26px;
  width:100%;max-width:460px;max-height:90vh;overflow:auto}
.modal h3{margin:0 0 16px;font-size:17px}
.modal .fld{margin-bottom:13px}
.modalfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px}
.tab{height:38px;border-radius:9px;padding:0 15px;display:inline-flex;align-items:center;font-size:13px;
  font-weight:600;color:var(--muted);cursor:pointer;background:var(--card);border:1px solid var(--line)}
.tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.rolechip{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11.5px;font-weight:700;
  background:var(--slate-soft);color:var(--slate)}
.rolechip.admin{background:var(--purple-soft);color:var(--purple)}
.rolechip.staff{background:var(--brand-soft);color:var(--brand)}
.rolechip.auth{background:var(--amber-soft);color:var(--amber)}
.inactive{opacity:.5}
.userbox{margin-left:auto;display:flex;align-items:center;gap:12px}
.userbox .nm{font-size:13px;font-weight:600;text-align:right;line-height:1.3}
.userbox .nm small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.linkbtn{background:none;border:none;color:var(--brand);font-weight:600;font-size:12.5px;cursor:pointer;padding:0}
.tbl-actions{display:flex;gap:7px}

/* --------------------------------------------- attorney / doctor lookup */
/* Type-to-search boxes replacing dropdowns that would otherwise be 800 long. */
.fld.lookup { position: relative; }
.fld.lookup input[data-lookup] { width: 100%; }
.fld.lookup.unmatched input[data-lookup] { border-color: #d97706; background: #fffbeb; }
.lookup-hint { margin-top: 6px; font-size: 12px; line-height: 1.5; display: grid; gap: 3px; }
.lookup-hint:empty { display: none; }
.lk-contact { color: #64748b; }
.lk-note {
  color: #92400e; background: #fffbeb; border-left: 3px solid #f59e0b;
  padding: 5px 8px; border-radius: 0 5px 5px 0;
  /* Standing instructions can run long; keep the form from stretching. */
  max-height: 84px; overflow-y: auto; white-space: pre-wrap;
}
.lk-warn { color: #b45309; }

/* --------------------------------------------------- admin directory search */
.dirsearch {
  width: 100%; max-width: 380px; padding: 9px 12px; font-size: 14px;
  border: 1px solid #dbe2ea; border-radius: 8px; background: #fff;
}
.dirsearch:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.dirnote { font-size: 12.5px; color: #64748b; margin-top: 10px; }

/* Directory tables carry long values — several comma-separated emails in one
   cell, addresses, standing instructions. Left to size themselves they push
   the Actions buttons off the right-hand edge, so each column is pinned and
   anything over-long is truncated with the full text on hover. */
.dirtable { table-layout: fixed; width: 100%; }
.dirtable td, .dirtable th { vertical-align: top; }
.dirtable .c-name  { width: 22%; }
.dirtable .c-phone { width: 116px; white-space: nowrap; }
.dirtable .c-fax   { width: 116px; white-space: nowrap; }
.dirtable .c-email { width: 22%; }
.dirtable .c-city  { width: 100px; }
.dirtable .c-notes { width: auto; }
.dirtable .c-act   { width: 150px; }
.dirtable td.clip {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}