/* Login pages and placeholder admin pages (ticket #024). The site's pages.css supplies fields,
   buttons, cards and colours; this file only adds the few things the admin needs. */
body{min-height:100vh}
.auth-top{display:flex;justify-content:center;padding:28px 20px 0}
.auth-top img{height:48px;width:auto}
.auth{padding-bottom:64px}
.fhead h1{max-width:none}
.setup-steps{margin:0 0 18px;padding-left:22px;font-size:18px;color:var(--mut)}
.setup-steps li{margin-bottom:8px}
.qr{display:flex;justify-content:center;margin:8px 0 18px}
.qr svg{width:224px;height:224px;border-radius:10px;background:#fff}
.keyline{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.keyline .lab{font-size:16px;color:var(--mut)}
.secret{font-variant-numeric:tabular-nums;font-size:20px;font-weight:600;letter-spacing:.08em;word-break:normal;padding:12px 14px;border-radius:10px;background:#f5efe4}
.note{font-size:16px;color:var(--mut);margin:0 0 22px}
.okmsg{font-size:18px;color:#3a342d;margin-bottom:6px}
.aux{margin-top:18px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--ink);color:#efe9e1;padding:14px 24px}
.bar img{height:44px;width:auto}
.bar .who{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-weight:500}
.bar .who small{color:#cfc5b8;font-size:14px}
.shell{padding-top:40px;padding-bottom:80px}
.pt{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.035em;margin-bottom:12px;overflow-wrap:anywhere}
.lead{font-size:20px;color:var(--mut);margin-bottom:28px;max-width:56ch}
.tiles{margin-top:8px}
.tile{display:block}
.tile:hover{box-shadow:var(--lift-hi)}
@media(max-width:900px){.grid3.tiles{grid-template-columns:1fr}.bar{padding:12px 16px}.qr svg{width:200px;height:200px}}
/* ticket #026: staff and job screens */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 24px}
.actions form{margin:0}
.okbox{background:#eef6ea;border-radius:10px;padding:12px 14px;color:#2b4a24;font-size:17px}
.tablewrap{overflow-x:auto}
.atable{width:100%;border-collapse:collapse;background:#fff;border-radius:14px}
.atable th,.atable td{text-align:left;padding:14px 16px;border-bottom:1px solid #ece5d9;font-size:17px;vertical-align:middle}
.atable td{overflow-wrap:anywhere}
.atable th{font-size:16px;color:var(--mut);font-weight:500}
.rowbtns{display:flex;flex-wrap:wrap;gap:8px}
.rowbtns form{margin:0}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0 0 28px;font-size:18px}
.facts dt{color:var(--mut)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.facts .pre{white-space:pre-wrap}
select{font:inherit;min-height:44px}
@media(max-width:700px){
  .atable thead{display:none}
  .atable,.atable tbody,.atable tr,.atable td{display:block;width:100%}
  .atable tr{padding:10px 0;border-bottom:1px solid #ece5d9}
  .atable td{border:0;padding:6px 16px}
  .atable td::before{content:attr(data-label) ": ";color:var(--mut)}
  .atable td.rowbtns::before{content:"";display:none}
  .atable td.rowbtns{display:flex;flex-direction:column;gap:12px}
  .facts{grid-template-columns:1fr;gap:2px}
  .facts dd{margin-bottom:12px}
}
/* ticket #027: read-through page, Lists screen */
.rv-title{font-size:28px;line-height:1.15;margin:0 0 18px;overflow-wrap:anywhere}
.listbox{margin:0 0 40px}
.listbox h2{font-size:28px;margin:0 0 14px}
.inl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inl input{min-height:44px;min-width:0;max-width:100%;width:200px}
.addrow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:16px}
.addrow .fld{margin:0;min-width:0;flex:1 1 220px}
.addrow .btn{flex:0 0 auto}
@media(max-width:700px){
  .inl{flex-direction:column;align-items:stretch}
  .inl input{width:100%}
  .addrow{flex-direction:column;align-items:stretch}
  .addrow .btn,.actions .btn,.rowbtns .btn{min-height:44px}
}
.lead,.note,.err{overflow-wrap:anywhere}
.inl input,.addrow input{font:inherit}
/* ticket #027 send-back 1: a very long list name must never widen the page */
.form{grid-template-columns:minmax(0,1fr)}
.fld{min-width:0}
select,input,textarea{max-width:100%}

/* ===== ticket #042 (top bar and footer) and #050 (left sidebar on every staff screen; everything here starts with bar, smenu, dsh or sfoot) =====
   Wide screens (over 1200px): the bar is a charcoal sidebar down the left edge with the logo, the menu with icons, the signed-in name
   and Sign out. Narrow screens: the same markup is a slim top bar with a Menu button that opens the list. No script is needed for either. */
body.staffpage{display:flex;flex-direction:column}
body.staffpage>.dsh-main{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
.dsh-main>main{flex:1 0 auto;width:100%}
header.bar{position:relative;z-index:30;padding:0;display:block}
header.bar .bar-in{display:flex;align-items:center;column-gap:24px;min-height:72px;padding-top:10px;padding-bottom:10px}
header.bar .bar-logo,header.bar .bar-logo img{display:block;flex:0 0 auto;height:44px;width:auto;line-height:0}
header.bar a.bar-logo{height:auto}
nav.smenu{position:static;z-index:auto;background:none;border:0;backdrop-filter:none;flex:1 1 auto;min-width:0}
.smenu-d>summary{display:none}
.smenu-d ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.smenu-d li{margin:0}
.smenu-d li a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:10px;color:#cfc5b8;font-size:16px;font-weight:500}
.smenu-d li a svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smenu-d li a:hover{color:#fff;background:rgba(255,255,255,.08)}
.smenu-d li a[aria-current]{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 3px 0 0 var(--orange)}
.smenu-d li a:focus-visible,.smenu-d summary:focus-visible,.smenu-out .btn:focus-visible,header.bar a.bar-logo:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px}
.smenu-who{margin-left:auto !important}
.smenu-who .who{font-size:16px}
.smenu-out form{margin:0}
.smenu-out .btn{min-height:44px;padding:8px 20px}
footer.sfoot{background:none;color:var(--mut);border-radius:0;margin-top:0;padding:24px 0 32px;border-top:1px solid var(--line);font-size:14px}
/* the slim bar above the page: where you are, and today's Nairobi date */
.dsh-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line);font-size:16px;color:var(--mut)}
.dsh-top .dsh-crumb,.dsh-top .dsh-date{margin:0;font-weight:400}
.dsh-top .dsh-crumb strong{font-weight:500;color:var(--ink)}
.dsh-top .dsh-date{display:flex;align-items:center;gap:8px;white-space:nowrap}
.dsh-top .dsh-date svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1201px){
  header.bar:not(.bar-plain){position:fixed;left:0;top:0;bottom:0;width:216px;overflow-y:auto;background:var(--ink)}
  header.bar:not(.bar-plain) .bar-in{flex-direction:column;align-items:stretch;justify-content:flex-start;row-gap:20px;min-height:100%;max-width:none;margin:0;padding:24px 16px}
  header.bar:not(.bar-plain) .bar-logo{padding:0 8px}
  nav.smenu{flex:0 0 auto}
  .smenu-d ul{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px}
  .smenu-who{margin:16px 0 0 !important;padding:16px 14px 4px;border-top:1px solid #3a352f;color:#cfc5b8}
  .smenu-who .who span{display:block;overflow-wrap:anywhere}
  .smenu-out{padding-top:8px}
  .smenu-out .btn{width:100%}
  body.staffpage>.dsh-main{margin-left:216px}
}
@media(max-width:1200px){
  header.bar .bar-in{flex-wrap:nowrap;justify-content:space-between}
  nav.smenu{flex:0 0 auto}
  .smenu-d>summary{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 18px;border-radius:40px;
    cursor:pointer;list-style:none;font-weight:500;font-size:16px;color:var(--ink);background:#fff}
  .smenu-d>summary::-webkit-details-marker{display:none}
  .smenu-d[open]>summary{background:var(--orange)}
  .smenu-d ul{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px;
    background:var(--ink);padding:8px 16px 16px;border-top:1px solid #3a352f;box-shadow:0 18px 40px rgba(25,25,25,.28)}
  .smenu-d li a{min-height:48px;padding:0 12px}
  .smenu-who{margin-left:0 !important;padding:10px 12px;color:#cfc5b8;border-top:1px solid #3a352f;margin-top:6px !important}
  .smenu-out .btn{width:100%;min-height:48px}
}
@media(max-width:700px){header.bar .bar-in{min-height:64px}.dsh-top{padding:0 16px}.dsh-top .dsh-date svg{display:none}}