/* Why Not Bless — donor admin. Same type and colour system as the public site. */
:root{
  --brand:#4666CC; --brand-600:#3A55AC; --brand-deep:#2E458F; --brand-soft:#E8EDFA;
  --bg:#F1F4FC; --surface:#FFFFFF; --text:#1E2740; --soft:#5A6484;
  --hair:#E1E6F3; --ok:#1E7A56; --ok-bg:#E4F4EC; --warn:#9A4B12; --warn-bg:#FCEDE1;
  --err:#A32C2C; --err-bg:#FBE9E9; --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(30,39,64,.05),0 14px 34px -18px rgba(30,39,64,.28);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.55}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0}
a{color:var(--brand-deep)}
.hide{display:none !important}

/* ---- shell ---- */
.topbar{background:var(--surface);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:20}
.topbar-in{max-width:1180px;margin:0 auto;padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:1.05rem;font-weight:600}
.mark svg{width:26px;height:26px;flex:none}
.tabs{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
.tab{border:0;background:none;font:inherit;font-weight:500;color:var(--soft);padding:.45rem .8rem;border-radius:var(--radius-pill,999px);cursor:pointer}
.tab:hover{color:var(--text);background:var(--brand-soft)}
.tab.on{background:var(--brand);color:#fff}
.who{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--soft)}
main{max-width:1180px;margin:0 auto;padding:1.4rem 1.2rem 4rem}

/* ---- bits ---- */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem}
.card + .card{margin-top:1.1rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.grow{flex:1 1 220px}
.btn{border:1px solid var(--brand);background:var(--brand);color:#fff;font:inherit;font-weight:600;
     padding:.55rem 1rem;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.ghost{background:none;color:var(--brand-deep);border-color:var(--hair)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.danger{background:none;color:var(--err);border-color:#EBC6C6}
.btn.danger:hover{background:var(--err-bg)}
.btn.sm{padding:.34rem .7rem;font-size:.85rem}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--hair);
     border-radius:var(--radius-sm);padding:.55rem .7rem;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
textarea{min-height:80px;resize:vertical}
label{display:block;font-size:.8rem;font-weight:600;color:var(--soft);margin-bottom:.25rem}
.field{margin-bottom:.8rem}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 .8rem}
.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:.6rem}
.check input{width:auto}
.msg{padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:.9rem;margin-top:.8rem}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.msg.err{background:var(--err-bg);color:var(--err)}
.msg.warn{background:var(--warn-bg);color:var(--warn)}
.muted{color:var(--soft)}
.small{font-size:.85rem}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.1rem}
.stat{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:.9rem 1rem}
.stat b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1.2}
.stat span{font-size:.78rem;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}

/* ---- table ---- */
.tablewrap{overflow-x:auto;margin-top:.9rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);
   padding:.5rem .6rem;border-bottom:1px solid var(--hair);white-space:nowrap}
td{padding:.6rem;border-bottom:1px solid var(--hair);vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--brand-soft)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;font-size:.72rem;font-weight:600;padding:.14rem .5rem;border-radius:999px;
      background:var(--brand-soft);color:var(--brand-deep)}
.pill.new{background:var(--warn-bg);color:var(--warn)}
.pill.closed{background:var(--ok-bg);color:var(--ok)}
.empty{text-align:center;padding:2.4rem 1rem;color:var(--soft)}

/* ---- login ---- */
.login{max-width:390px;margin:9vh auto;padding:0 1.2rem}
.login .card{padding:1.8rem}
.login h1{font-size:1.4rem;margin-bottom:.3rem}

/* ---- drawer ---- */
.scrim{position:fixed;inset:0;background:rgba(20,28,48,.42);z-index:30}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);background:var(--bg);z-index:31;
        overflow-y:auto;box-shadow:-20px 0 50px -25px rgba(20,28,48,.5)}
.drawer-head{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--hair);
             padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;z-index:1}
.drawer-head h2{font-size:1.2rem;flex:1;min-width:0}
.drawer-body{padding:1.2rem}
.x{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--soft);cursor:pointer;padding:.2rem .4rem}
.x:hover{color:var(--text)}
@media (max-width:640px){ .topbar-in{gap:.6rem} .tabs{width:100%;margin-left:0} main{padding-top:1rem} }