/* Hayleys Fentons card administration.

   The palette is not invented: the three brand values were sampled from the
   company logo - orange #F05223, green #177342, navy #182337. Orange carries
   actions, green carries confirmation, navy carries the header. Everything
   else is neutral, because this is a data-entry tool rather than a marketing
   page. The public card is the showpiece; this is the workshop. */

:root{
  /* brand */
  --orange:#F05223;
  --orange-dark:#D33F13;
  --orange-soft:#FDE7DE;
  --green:#177342;
  --green-soft:#E1F0E7;
  --navy:#182337;
  --navy-2:#22304A;

  /* surfaces */
  --paper:#F6F5F3;
  --paper-2:#FFFFFF;
  --ink:#182337;
  --ink-2:#4A5468;
  --muted:#828B9B;
  --line:#DDE1E7;
  --line-2:#EDEFF2;

  /* roles */
  --brass:var(--orange);          /* action colour, named for continuity */
  --brass-soft:var(--orange-soft);
  --danger:#B3261E;
  --danger-soft:#FBE6E4;
  --ok:var(--green);
  --ok-soft:var(--green-soft);
  --radius:3px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* fine vertical rule down the left edge of the whole app */
.shell{max-width:76rem;margin:0 auto;padding:0 1.5rem 4rem}

/* ---------------- header ---------------- */
.topbar{
  border-bottom:3px solid var(--orange);
  background:var(--navy);
  position:sticky;top:0;z-index:20;
}
.topbar-in{
  max-width:76rem;margin:0 auto;padding:.9rem 1.5rem;
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
}
.brand{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;color:#fff;
  display:flex;align-items:baseline;gap:.55rem;
}
.brand span{
  font-family:'Archivo',sans-serif;font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:#fff;
  background:var(--orange);padding:.18rem .45rem;border-radius:2px;
}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.topbar nav a{
  color:#C3CBD8;text-decoration:none;font-size:.86rem;font-weight:500;
  padding:.2rem 0;border-bottom:2px solid transparent;
}
.topbar nav a:hover,.topbar nav a:focus-visible{color:#fff;border-bottom-color:var(--orange)}
.topbar nav a.on{color:#fff;border-bottom-color:var(--orange)}
.whoami{font-size:.78rem;color:#8E99AC;white-space:nowrap}

/* ---------------- page heading ---------------- */
.head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;padding:2.4rem 0 1.2rem;
}
h1{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.015em;
}
.sub{color:var(--muted);font-size:.86rem;margin-top:.3rem}

/* ---------------- notices ---------------- */
.notice{
  padding:.8rem 1rem;border-radius:var(--radius);margin-bottom:1.2rem;
  font-size:.88rem;border-left:3px solid;
}
.notice.err{background:var(--danger-soft);border-color:var(--danger);color:#6E1F1A}
.notice.ok{background:var(--ok-soft);border-color:var(--ok);color:#1F4A36}
.notice ul{margin:.4rem 0 0 1.1rem}

/* ---------------- filters ---------------- */
.filters{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;
  padding:1rem 0 1.4rem;border-top:1px solid var(--line-2);
}

/* ---------------- forms ---------------- */
label{
  display:block;font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);margin-bottom:.35rem;
}
label .req{color:var(--brass)}
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=file],select,textarea{
  width:100%;font:inherit;font-size:.92rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:.55rem .7rem;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px var(--brass-soft);
}
input:disabled,select:disabled{background:#F0ECE3;color:var(--muted);cursor:not-allowed}
input[type=file]{padding:.4rem .5rem;font-size:.84rem}
.field{margin-bottom:1.1rem}
.field .help{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 1.2rem}

fieldset{border:none;margin-bottom:1.8rem}
legend{
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--brass);padding-bottom:.6rem;margin-bottom:1.1rem;width:100%;
  border-bottom:1px solid var(--line);
}
fieldset[disabled] .grid2{opacity:.45;pointer-events:none}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:.58rem 1.1rem;border-radius:var(--radius);
  border:1px solid var(--navy);background:var(--navy);color:#fff;
  text-decoration:none;transition:transform .12s,background .15s,color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.brass{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.brass:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn.danger{background:transparent;color:var(--danger);border-color:#E4C8C4}
.btn.danger:hover{background:var(--danger-soft)}
.btn.sm{font-size:.76rem;padding:.34rem .6rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1.5rem}

/* ---------------- table ---------------- */
.tablewrap{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);overflow-x:auto;
}
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead th{
  text-align:left;font-size:.64rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);padding:.7rem .8rem;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper-2);
}
tbody td{padding:.7rem .8rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FBF8F2}
.num{font-variant-numeric:tabular-nums}
.who-cell{display:flex;align-items:center;gap:.7rem;min-width:13rem}
.thumb{
  width:36px;height:36px;flex:0 0 36px;border-radius:2px;object-fit:cover;
  background:var(--line-2);border:1px solid var(--line);
}
.thumb.ph{display:grid;place-items:center;font-size:.72rem;font-weight:600;color:var(--muted)}
.who-cell strong{display:block;font-weight:600}
.who-cell em{display:block;font-style:normal;font-size:.76rem;color:var(--muted)}
.qr-thumb{
  width:46px;height:46px;border:1px solid var(--line);border-radius:2px;
  display:block;background:#fff;
}
.chip{
  display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .45rem;border-radius:2px;white-space:nowrap;
}
.chip.on{background:var(--ok-soft);color:var(--ok)}
.chip.off{background:var(--danger-soft);color:var(--danger)}
.chip.co{background:var(--brass-soft);color:#7A5A15}
.rowacts{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.empty{padding:3.5rem 1.5rem;text-align:center;color:var(--muted)}
.empty p{margin-bottom:1rem}

/* ---------------- pagination ---------------- */
.pager{display:flex;align-items:center;gap:.4rem;padding:1.2rem 0;flex-wrap:wrap}
.pager a,.pager strong{
  min-width:2rem;text-align:center;padding:.32rem .5rem;font-size:.82rem;
  border:1px solid var(--line);border-radius:2px;text-decoration:none;color:var(--ink-2);
}
.pager strong{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.pager .count{margin-left:auto;font-size:.8rem;color:var(--muted)}

/* ---------------- card / panel ---------------- */
.panel{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem;
}
.split{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:2rem;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.aside h3{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:.8rem;font-weight:600;
}
.qr-big{width:100%;max-width:13rem;border:1px solid var(--line);border-radius:2px;background:#fff}
.aside dl{font-size:.82rem;margin-top:1rem}
.aside dt{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;margin-top:.7rem}
.aside dd{word-break:break-all}
.urlbox{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:.5rem .6rem;word-break:break-all;margin-top:.3rem;
}

/* ---------------- login ---------------- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.authcard{
  width:100%;max-width:23rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:2rem;
  box-shadow:0 24px 50px -30px rgba(22,23,26,.35);
}
.authcard .brand{margin-bottom:.3rem;font-size:1.5rem}
.authcard .sub{margin-bottom:1.6rem}
.authcard .btn{width:100%;margin-top:.4rem}
.authnote{font-size:.74rem;color:var(--muted);margin-top:1.4rem;text-align:center}

@media (max-width:600px){
  .head{padding-top:1.6rem}
  thead{display:none}
  tbody td{display:block;border:none;padding:.25rem .8rem}
  tbody tr{display:block;padding:.8rem 0;border-bottom:1px solid var(--line-2)}
  .rowacts{justify-content:flex-start;padding-top:.5rem}
}

/* ---------------- role chips ---------------- */
.rolechip{
  display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.16rem .4rem;border-radius:2px;margin-left:.35rem;
  vertical-align:middle;
}
.rolechip.hr{background:#E4EEF8;color:#20567F}
.rolechip.marketing{background:#F7E6D6;color:#8A4715}
.rolechip.admin{background:#E7E2F5;color:#4A3B85}
.topbar nav a.on{color:var(--ink);border-bottom-color:var(--brass)}

/* ---------------- HR marketing toggle ---------------- */
.toggle{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);background:none;border:none;padding:.2rem 0;
}
.toggle span{
  width:30px;height:17px;border-radius:9px;background:#D6D0C4;
  position:relative;transition:background .18s;flex:0 0 auto;
}
.toggle span::after{
  content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:#fff;transition:transform .18s;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.toggle.on{color:var(--ok)}
.toggle.on span{background:var(--ok)}
.toggle.on span::after{transform:translateX(13px)}
.toggle:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------------- extra chips ---------------- */
.chip.all{background:#E7E2F5;color:#4A3B85}
.chip.pend{background:#FBF0D8;color:#7A5A15}

/* ---------------- textarea + checkbox ---------------- */
textarea{resize:vertical;min-height:5rem;font-family:inherit;line-height:1.5}
label.check{
  display:flex;align-items:flex-start;gap:.6rem;text-transform:none;
  letter-spacing:normal;font-size:.95rem;font-weight:500;color:var(--ink);
}
label.check input{width:auto;margin-top:.2rem;accent-color:var(--brass)}
input[type=number]{max-width:8rem}
input[type=date]{max-width:12rem}

/* ---------------- brand asset previews ---------------- */
.assetbox{
  margin-bottom:.5rem;padding:.6rem;border:1px solid var(--line);border-radius:3px;
  background:repeating-conic-gradient(#EFEAE0 0% 25%,#F7F4EE 0% 50%) 50%/16px 16px;
}
.assetbox.light{background:#fff}
.assetbox img{display:block;max-width:100%;max-height:90px;margin:0 auto}

/* ---------------- linked company picker ---------------- */
.linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.5rem}
.linkopt{
  display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .75rem;
  border:1px solid var(--line);border-radius:3px;background:var(--paper-2);
  cursor:pointer;text-transform:none;letter-spacing:normal;font-weight:400;
  color:var(--ink);transition:border-color .15s,background .15s;margin-bottom:0;
}
.linkopt:hover{border-color:var(--brass)}
.linkopt input{width:auto;margin-top:.2rem;accent-color:var(--brass);flex:0 0 auto}
.linkopt strong{display:block;font-size:.9rem;font-weight:600}
.linkopt em{display:block;font-style:normal;font-size:.76rem;color:var(--muted);
  word-break:break-all}
.linkopt.disabled{opacity:.5;cursor:not-allowed}
.linkopt.disabled:hover{border-color:var(--line)}

/* ---------------------------------------------------------------------------
   Layout utilities.

   These exist because the Content-Security-Policy this application sends
   forbids inline styles, and a CSP nonce does NOT cover style="..." attributes
   — only <style> blocks. Anything written as an inline attribute is silently
   dropped by the browser, so spacing and widths must live here instead.
   --------------------------------------------------------------------------- */
.mt-0{margin-top:.2rem}   .mt-1{margin-top:.6rem}   .mt-2{margin-top:.7rem}
.mt-3{margin-top:.8rem}   .mt-4{margin-top:.9rem}   .mt-5{margin-top:1rem}
.mt-6{margin-top:1.2rem}  .mt-7{margin-top:1.6rem}  .mt-8{margin-top:1.8rem}
.mt-9{margin-top:2rem}
.mb-0{margin-bottom:0}    .mb-1{margin-bottom:.7rem} .mb-2{margin-bottom:.9rem}
.mb-3{margin-bottom:1rem} .mb-4{margin-bottom:1.2rem} .mb-5{margin-bottom:1.4rem}
.mb-6{margin-bottom:1.6rem}

.inline-form{display:inline}
.muted{color:var(--muted)}
.t-sm{font-size:.8rem}
.col-narrow{max-width:30rem}
.col-mid{max-width:52rem}

.panel-title{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.5rem;margin-bottom:.4rem;
}
.panel-title.wide{margin-bottom:.6rem}

.eyebrow{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--brass);margin-bottom:.6rem;font-weight:600;
}
.eyebrow.dim{color:var(--muted);margin:1.6rem 0 0}

.bignum{font-size:1.9rem;font-family:'Instrument Serif',Georgia,serif;line-height:1}
.steplist{margin-left:1.2rem;font-size:.92rem;line-height:1.9}
.hr-soft{margin:1.8rem 0;border:none;border-top:1px solid var(--line)}
.preview-img{margin-top:.6rem;max-width:220px;border:1px solid var(--line);border-radius:3px}
.sel-inline{font-size:.8rem;padding:.25rem .4rem;width:auto}
.onetime{
  font-family:ui-monospace,Menlo,monospace;font-size:1.05em;background:#fff;
  padding:.15rem .4rem;border-radius:2px;border:1px solid var(--line);
}

/* Filter-bar field widths. */
.fb-grow{flex:1 1 16rem}
.fb-11{flex:0 1 11rem}
.fb-13{flex:0 1 13rem}
.fb-14{flex:0 1 14rem}


/* ---------------- collapsible company panels ---------------- */
.accordion{padding:0;overflow:hidden}
.accordion > summary{
  list-style:none;cursor:pointer;padding:1rem 1.3rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  transition:background .15s;
}
.accordion > summary::-webkit-details-marker{display:none}
.accordion > summary:hover{background:var(--line-2)}
.accordion > summary::after{
  content:'';width:.5rem;height:.5rem;flex:0 0 auto;margin-left:auto;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s;
}
.accordion[open] > summary::after{transform:rotate(-135deg)}
.accordion[open] > summary{border-bottom:1px solid var(--line)}
.acc-title{
  display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1rem;
  flex-wrap:wrap;
}
.acc-hint{font-size:.78rem;color:var(--muted);margin-left:auto;padding-right:1.2rem}
.acc-body{padding:1.4rem 1.3rem 1.3rem}
.rowsplit{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  padding-top:1rem;border-top:1px solid var(--line-2)}

/* ---------------- colour swatch ---------------- */
.colourpick{display:flex;align-items:center;gap:.5rem}
.colourpick input{flex:1}
.swatch{
  width:2rem;height:2rem;flex:0 0 auto;border-radius:3px;
  border:1px solid var(--line);background:var(--line-2);
}
.swatch.inline{width:.85rem;height:.85rem;border-radius:2px}
input.upper{text-transform:uppercase}