/* Forwardfy Sign — dashboard design system.
   Minimalist by intent: white canvas, hairline borders, one accent, quiet type.
   Shared by admin.html (Applicants + Applications) and documents.html. */

:root{
  --bg:#ffffff;
  --canvas:#f7f8fa;      /* page background */
  --ink:#151a22;         /* primary text */
  --ink-2:#5a6472;       /* secondary text */
  --ink-3:#8a929e;       /* tertiary / labels */
  --line:#e8eaee;        /* hairline */
  --line-2:#dcdfe5;      /* stronger hairline */
  --accent:#2f6bff;      /* the single accent */
  --accent-ink:#1f52d8;
  --accent-wash:#eef3ff;
  --ok:#12805c; --ok-wash:#e7f4ee;
  --warn:#9a6a12; --warn-wash:#f6efe1;
  --info:#2f6bff; --info-wash:#eef3ff;
  --err:#b4402e; --err-wash:#fbecea;
  --mute:#6b7280; --mute-wash:#eef0f3;
  --radius:12px; --radius-sm:9px;
  --focus:0 0 0 3px rgba(47,107,255,.28);
  --shadow:0 1px 2px rgba(21,26,34,.05), 0 6px 20px rgba(21,26,34,.05);
  --mono:"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--canvas);color:var(--ink);min-height:100vh;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}

/* ---------------------------------- header --------------------------------- */
.topbar{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-in{max-width:1120px;margin:0 auto;padding:0 22px;height:58px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand .mark{width:26px;height:26px;border-radius:7px;flex:0 0 auto}
.brand b{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.brand small{display:block;font-size:11px;color:var(--ink-3);font-weight:500;margin-top:-1px}
.tabs{display:flex;gap:2px;align-items:center;height:100%}
.tab{position:relative;display:inline-flex;align-items:center;height:100%;padding:0 4px;margin:0 10px;
  font-size:13.5px;font-weight:550;color:var(--ink-2);text-decoration:none;border:0;background:none;cursor:pointer}
.tab:hover{color:var(--ink);text-decoration:none}
.tab.active{color:var(--ink)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.tab .badge{margin-left:7px;font-size:11px;font-weight:600;color:var(--ink-3);background:var(--canvas);
  border:1px solid var(--line);border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.tab.active .badge{color:var(--accent-ink);background:var(--accent-wash);border-color:transparent}
.who{margin-left:auto;font-size:12.5px;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.who .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}

.wrap{max-width:1120px;margin:26px auto 64px;padding:0 22px}

/* ---------------------------------- login ---------------------------------- */
.login{max-width:352px;margin:14vh auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.login h2{font-size:16px;font-weight:650;margin-bottom:5px}
.login p{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.login input{width:100%;font-size:14px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);outline:none;margin-bottom:11px;color:var(--ink)}
.login input:focus{border-color:var(--accent);box-shadow:var(--focus)}
.login .err{color:var(--err);font-size:12.5px;margin-top:9px;display:none}

/* --------------------------------- page head ------------------------------- */
.head{display:flex;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.head h1{font-size:20px;font-weight:680;letter-spacing:-.02em}
.head .sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.head .actions{margin-left:auto;display:flex;gap:8px;align-items:center}

/* --------------------------------- buttons --------------------------------- */
.btn{font-size:13px;font-weight:600;background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:var(--radius-sm);padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background .13s,border-color .13s,color .13s;white-space:nowrap;line-height:1}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn:active{transform:translateY(.5px)}
.btn .ic{width:15px;height:15px;flex:0 0 auto}
.btn.ghost{background:var(--bg);color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--canvas);color:var(--ink);border-color:var(--line-2)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.sel{font-size:13px;font-weight:550;padding:8px 30px 8px 11px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a929e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  color:var(--ink-2);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none}
.sel:focus{border-color:var(--accent);box-shadow:var(--focus)}

/* --------------------------------- panels ---------------------------------- */
.panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:18px;display:none}
.panel.open{display:block}
.panel .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.panel input[type=text],.panel input[type=email]{flex:1;min-width:220px;font-size:14px;padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);outline:none;color:var(--ink)}
.panel input:focus{border-color:var(--accent);box-shadow:var(--focus)}
.panel label.inline{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.panel .out{margin-top:12px;display:none;background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px;word-break:break-all}
.panel .out.show{display:block}

/* ---------------------------------- stats ---------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.stat{padding:15px 17px;border-left:1px solid var(--line);cursor:pointer;background:none;border-top:0;border-right:0;border-bottom:0;text-align:left;font-family:inherit;
  transition:background .12s}
.stat:first-child{border-left:0}
.stat:hover{background:var(--canvas)}
.stat[aria-pressed="true"]{background:var(--accent-wash)}
.stat .n{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-top:5px;display:flex;align-items:center;gap:6px}
.stat .l .k{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.stat.static{cursor:default}
.stat.static:hover{background:none}
.stat[aria-pressed="true"] .l{color:var(--accent-ink)}

/* -------------------------------- command bar ------------------------------ */
.cmd{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.srch{position:relative;flex:1;min-width:200px}
.srch .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.srch input{width:100%;font-size:13.5px;padding:9px 14px 9px 35px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--bg);outline:none;color:var(--ink)}
.srch input:focus{border-color:var(--accent);box-shadow:var(--focus)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip-f{font-size:12.5px;font-weight:550;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:border-color .12s,color .12s,background .12s}
.chip-f:hover{border-color:var(--line-2);color:var(--ink)}
.chip-f[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-f .c{font-variant-numeric:tabular-nums;opacity:.6}
.chip-f[aria-pressed="true"] .c{opacity:.75}

/* ---------------------------------- table ---------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
table{width:100%;border-collapse:collapse;min-width:720px}
th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);text-align:left;
  padding:11px 16px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:58px;z-index:1;white-space:nowrap}
td{font-size:13.5px;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
.drow{transition:background .1s}
.drow:hover>td{background:#fcfcfd}
.c-name b{font-weight:600;color:var(--ink);display:block}
.c-name .meta{color:var(--ink-3);font-size:12px;margin-top:2px}
.c-name .meta span+span::before{content:"·";margin:0 6px;color:var(--line-2)}
/* clickable contact chips (mailto / tel) + one-click copy */
.c-name .meta.contact{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.c-name .meta.contact span{display:inline-flex;align-items:center;gap:4px}
.c-name .meta.contact span+span::before{content:none}
.c-name .meta.contact a{color:var(--ink-2);text-decoration:none}
.c-name .meta.contact a:hover{color:var(--accent-ink);text-decoration:underline}
.cp{border:0;background:none;color:var(--ink-3);cursor:pointer;padding:1px;border-radius:5px;display:inline-flex;line-height:0}
.cp:hover{color:var(--accent-ink);background:var(--accent-wash)}
.cp .ic{width:13px;height:13px}
/* "new since last visit" row marker + head pill */
.newdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle}
.newpill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-wash);border-radius:999px;padding:5px 11px}
/* stale-application nudge banner */
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-wash);border:1px solid #ecd9b0;border-radius:var(--radius);padding:11px 15px;margin-bottom:16px}
.banner .btxt{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--warn);font-weight:550;flex:1;min-width:220px}
.banner .btxt .ic{width:16px;height:16px;flex:0 0 auto}
.banner .btxt b{font-weight:800}
/* pipeline status chip + manual/notes/contacted tags under a name */
.badges{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;margin-top:5px}
.stx{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700}
.stx .k{width:7px;height:7px;border-radius:50%;background:currentColor}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ink-3);background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.tag .ic{width:12px;height:12px}
.tag.note{color:var(--accent-ink);background:var(--accent-wash);border-color:transparent;cursor:help}
/* work-log editor in the applicant detail */
.worklog{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:18px;background:#fff}
.worklog .wl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.worklog .wl-field{font-size:12px;color:var(--ink-3);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.worklog .wl-status{padding-top:7px;padding-bottom:7px}
.worklog .grow{flex:1}
.worklog .wl-notes{width:100%;margin-top:10px;min-height:64px;font:13px/1.5 inherit;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--radius-sm);outline:none;resize:vertical;color:var(--ink)}
.worklog .wl-notes:focus{border-color:var(--accent);box-shadow:var(--focus)}
.when{color:var(--ink-2);font-size:12.5px}
.when small{display:block;color:var(--ink-3);font-size:11.5px}
.pill{display:inline-block;font-size:11px;font-weight:600;color:var(--ink-2);background:var(--canvas);border:1px solid var(--line);border-radius:6px;padding:2px 8px;letter-spacing:.02em}

/* status chip: quiet dot + tinted label, not a loud filled pill */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.st .k{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.st.signed,.st.completed{color:var(--ok)}
.st.in_progress,.st.pending,.st.sent{color:var(--warn)}
.st.opened,.st.viewed{color:var(--info)}
.st.new{color:var(--info)}
.st.draft{color:var(--mute)}
.st.declined,.st.expired{color:var(--err)}
.st.voided{color:var(--mute)}
.st.cc{color:var(--accent-ink)}
.st.none{color:var(--ink-3)}
.yes{color:var(--ok);font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.no{color:var(--ink-3);font-size:12.5px}
.yes .k{width:7px;height:7px;border-radius:50%;background:currentColor}
.flag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--warn);background:var(--warn-wash);border-radius:6px;padding:2px 8px;margin-top:4px}

/* row actions */
.acts{white-space:nowrap;text-align:right}
.lnk{font-size:12.5px;font-weight:550;color:var(--ink-2);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:5px 10px;margin-left:6px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:border-color .12s,color .12s,background .12s}
.lnk:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash);text-decoration:none}
.lnk:active{transform:translateY(.5px)}
.lnk:disabled{opacity:.5;cursor:default}
.lnk.primary{color:#fff;background:var(--accent);border-color:var(--accent)}
.lnk.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.lnk .ic{width:13px;height:13px}
.mini{position:relative;display:inline-block}
.mini-menu{position:absolute;right:0;top:calc(100% + 5px);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:5px;min-width:186px;z-index:15;display:none;text-align:left}
.mini-menu.open{display:block}
.mini-menu button{display:block;width:100%;text-align:left;font-size:12.5px;color:var(--ink-2);background:none;border:0;border-radius:6px;padding:7px 9px;cursor:pointer}
.mini-menu button:hover{background:var(--canvas);color:var(--ink)}
.mini-menu .sep{border-top:1px solid var(--line);margin:5px 2px}
.mini-menu .lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding:6px 9px 3px}

/* -------------------------------- detail row ------------------------------- */
.detail{display:none;background:#fcfcfd}
.detail.open{display:table-row}
.detail>td{padding:0}
.detail-in{padding:18px 20px;border-top:1px solid var(--line)}
.dcols{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:860px){.dcols.two{grid-template-columns:1.1fr .9fr}}
.dsec h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.dsec h4 .ct{font-weight:600;color:var(--ink-3);background:var(--canvas);border:1px solid var(--line);border-radius:999px;padding:0 7px;font-size:10.5px}

/* timeline of submissions / re-applies */
.tl{position:relative;padding-left:18px}
.tl::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1.5px;background:var(--line)}
.tl-item{position:relative;padding:0 0 15px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-17px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.tl-item.up::before{border-color:var(--ok)}
.tl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tl-head b{font-size:13px;font-weight:600}
.tl-head .t{font-size:11.5px;color:var(--ink-3)}
.tl-fields{margin-top:5px;font-size:12px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:x}
.tl-fields{display:flex;flex-wrap:wrap;gap:5px 14px}
.tl-fields .kv{font-size:12px;color:var(--ink-2)}
.tl-fields .kv b{color:var(--ink);font-weight:600}
.appcard{border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:9px}
.appcard:last-child{margin-bottom:0}
.appcard .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.appcard .top b{font-size:13px}
.appcard .top .grow{flex:1}
.appcard .sub{font-size:11.5px;color:var(--ink-3);margin-top:4px}

/* audit event table (reused) */
.evwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:6px}
.evtbl{min-width:600px}
.evtr{display:grid;grid-template-columns:150px 160px 108px 120px 1fr;gap:12px;padding:7px 12px;font-size:11.5px;color:var(--ink-2);align-items:start}
.evtr.head{font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;font-size:10px;background:var(--canvas);border-bottom:1px solid var(--line)}
.evtr:not(.head)+.evtr:not(.head){border-top:1px solid var(--line)}
.evtr .ip,.evtr .evt{font-family:var(--mono);font-size:11px}
.shield{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:12px;padding:6px 11px;border-radius:999px;margin-bottom:11px}
.shield.ok{background:var(--ok-wash);color:var(--ok)}
.shield.bad{background:var(--err-wash);color:var(--err)}
.shield .ic{width:14px;height:14px}
.hashrow{margin-top:10px}
.hlabel{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:4px}
code.hash{display:block;font-family:var(--mono);font-size:11px;word-break:break-all;color:var(--ink-2);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px}
.owners{margin-bottom:12px}
.ownerrow{font-size:12px;color:var(--ink-2);margin-top:5px;line-height:1.5}
.ownerrow b{color:var(--ink)}

/* avatars + progress (documents) */
.avs{display:flex;align-items:center;margin:2px 0 5px}
.av{width:22px;height:22px;border-radius:50%;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);margin-left:-6px;flex:0 0 auto}
.av:first-child{margin-left:0}
.av.more{background:#c3cad6;color:var(--ink)}
.prog{height:4px;background:var(--line);border-radius:999px;overflow:hidden;max-width:170px;margin-top:4px}
.prog span{display:block;height:100%;border-radius:999px;background:var(--ok);transition:width .4s ease}
.progtxt{font-size:11px;color:var(--ink-3);font-weight:550;margin-top:3px}
.reciplist{margin-top:6px}
.recip{margin-bottom:4px;white-space:nowrap;font-size:12.5px}
.recip:last-child{margin-bottom:0}
.recip .st{margin-left:6px}
.reason{max-width:240px;margin-top:4px;font-style:italic;color:var(--ink-3);font-size:12px}

/* skeleton + empty */
.sk{display:inline-block;height:10px;border-radius:5px;vertical-align:middle;background:linear-gradient(90deg,#eef1f5 25%,#e3e7ee 37%,#eef1f5 63%);background-size:400% 100%;animation:sh 1.4s ease infinite}
.skline{display:flex;gap:12px;align-items:center}
.empty{text-align:center;color:var(--ink-3);padding:52px 20px}
.empty .ic{width:38px;height:38px;color:#c7cdd8;margin-bottom:12px}
.empty h3{font-size:15px;color:var(--ink-2);font-weight:600;margin-bottom:5px}
.empty p{font-size:13px;margin-bottom:16px}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;font-size:13px;font-weight:550;padding:10px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;box-shadow:var(--shadow);max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.ok{background:var(--ok)}
#toast.err{background:var(--err)}

@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}.sk{animation:none;background:#e9edf2}}
@media (max-width:720px){
  .topbar-in{gap:12px;padding:0 16px}
  .brand small{display:none}
  .wrap{margin:18px auto 48px;padding:0 16px}
  .cmd .chips{order:3;width:100%}
  th{top:57px}
}