:root{--build:"20260925g";}   /* build stamp: the app checks this matches the other files */
  :root{
    --blue:#7B5CF0; --red:#E5606B; --green:#3FAE7C; --orange:#F0913E;
    --purple:#9A6FD1; --pink:#E06C8E; --teal:#2FA69A; --yellow:#EDB23A;
    --bg:#F6F4FC; --card:#FFFEFF; --label:#25213A; --label2:#77728E;
    --sep:#E7E3F4; --fill:#F0EDFA; --fillstrong:#E1DCF3;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  :root[data-theme="dark"]{
    --blue:#5B9DFF; --red:#F2727C; --green:#4FD1A0; --orange:#F5A25D;
    --purple:#A99BFF; --pink:#F08BB5; --teal:#4DD0E1; --yellow:#F2C45C;
    --bg:#090B11; --card:#11151E; --label:#EEF2FA; --label2:#93A0B8;
    --sep:#1F2736; --fill:#1A2130; --fillstrong:#262F42;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --blue:#5B9DFF; --red:#F2727C; --green:#4FD1A0; --orange:#F5A25D;
      --purple:#A99BFF; --pink:#F08BB5; --teal:#4DD0E1; --yellow:#F2C45C;
      --bg:#090B11; --card:#11151E; --label:#EEF2FA; --label2:#93A0B8;
      --sep:#1F2736; --fill:#1A2130; --fillstrong:#262F42;
    }
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{height:100%;touch-action:manipulation;}
  body{margin:0;background:var(--bg);color:var(--label);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100%;overscroll-behavior-y:none;touch-action:manipulation;}
  button,input{font-family:var(--sans);}

  .stage{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;background:var(--bg);overflow:hidden;transition:max-width .2s ease;}

  /* ---- web view (desktop) ---- */
  .appshell{display:flex;min-height:100vh;min-height:100dvh;}
  .webrail{width:240px;flex-shrink:0;background:var(--card);border-right:0.5px solid var(--sep);padding:20px 14px;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow-y:auto;}
  .railbrand{display:flex;align-items:center;gap:10px;padding:4px 6px 18px;}
  .railitem{display:flex;align-items:center;gap:11px;color:var(--label2);width:100%;justify-content:flex-start;border-radius:11px;padding:10px 12px;font-size:14px;margin-bottom:3px;font-weight:500;background:none;border:none;text-align:left;}
  .railitem .bicon{color:inherit;flex-shrink:0;}
  .railitem.on{background:color-mix(in srgb, var(--purple) 18%, transparent);color:var(--purple);font-weight:600;}
  .railsectionlabel{font-size:11px;text-transform:uppercase;color:var(--label2);letter-spacing:.05em;margin:18px 8px 6px;font-weight:600;}
  .mgrportalbtn{display:flex;align-items:center;gap:10px;width:100%;border:none;border-radius:11px;padding:11px 12px;font-size:13.5px;font-weight:700;margin:10px 0 4px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;box-shadow:0 4px 12px color-mix(in srgb, var(--purple) 30%, transparent);text-align:left;}
  .mgrportalbtn .bicon svg{stroke:#fff;}
  .stagewrap{flex:1;overflow-y:auto;height:100vh;height:100dvh;}

  .navbar{position:sticky;top:0;z-index:20;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:0.5px solid var(--sep);}
  .navbtn{background:none;border:none;color:var(--blue);font-size:17px;display:flex;align-items:center;padding:6px 10px;}
  .navbtn.bold{font-weight:600;}
  .navtitle{font-size:17px;font-weight:600;position:absolute;left:50%;transform:translateX(-50%);}
  .navside{min-width:60px;display:flex;align-items:center;}
  .navside.right{justify-content:flex-end;gap:8px;}
  .navfavicon{width:22px;height:22px;border-radius:5px;object-fit:contain;flex-shrink:0;}

  .content{padding:8px 16px 40px;}
  .content.padtop{padding-top:22px;}
  .largetitle{font-size:30px;font-weight:700;letter-spacing:-.02em;padding:6px 2px 14px;}

  .sechead{font-size:12.5px;color:var(--label2);text-transform:uppercase;letter-spacing:.02em;margin:22px 4px 7px;font-weight:400;}
  .sechead:first-child{margin-top:2px;}
  .group{background:var(--card);border-radius:12px;overflow:hidden;margin-bottom:10px;}
  .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;min-height:24px;position:relative;}
  .group .row:not(:last-child)::after{content:"";position:absolute;left:14px;right:0;bottom:0;height:0.5px;background:var(--sep);}
  .row .rt1{font-size:16px;}
  .row .rsub{font-size:13px;color:var(--label2);margin-top:2px;}
  .row .rval{font-size:16px;color:var(--label2);}
  .chev{color:#C7C7CC;font-size:16px;margin-left:2px;}
  .badge{background:var(--red);color:#fff;font-size:12px;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;}

  .group, .shiftcard, .noshift, .tile, .sheet, .modal, .mgrcard, .mgrtile, .sfcell, .statcard, .togglecard{box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);}
  :root[data-theme="dark"] .group, :root[data-theme="dark"] .shiftcard, :root[data-theme="dark"] .noshift, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .mgrcard, :root[data-theme="dark"] .mgrtile, :root[data-theme="dark"] .sfcell, :root[data-theme="dark"] .statcard{box-shadow:none;}

  .avatarrow{display:flex;align-items:center;gap:12px;padding:4px 2px 2px;}
  .avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(150deg,var(--purple),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:17px;flex-shrink:0;}
  .profilephoto{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 2px 10px rgba(0,0,0,.15);}

  .datechip{display:flex;align-items:center;gap:5px;font-size:12px;color:#B8860B;background:color-mix(in srgb, var(--yellow) 30%, transparent);padding:6px 10px;border-radius:20px;white-space:nowrap;}
  :root[data-theme="dark"] .datechip{color:var(--yellow);}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .datechip{color:var(--yellow);} }
  .datechip .bicon{width:14px;height:14px;}

  .tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .tile{background:var(--card);border-radius:16px;padding:16px;border:none;text-align:left;display:flex;flex-direction:column;gap:14px;position:relative;color:var(--label);}
  .tile .badgebubble{position:absolute;top:12px;right:12px;}
  .ticon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;}
  .ticon svg{width:20px;height:20px;}
  .tile .tlabel{font-size:14.5px;font-weight:600;letter-spacing:-.01em;}
  .tint-indigo{background:color-mix(in srgb, var(--purple) 26%, transparent);color:#7C5CF0;}
  .tint-teal{background:color-mix(in srgb, var(--teal) 26%, transparent);color:#0FA3A3;}
  .tint-orange{background:color-mix(in srgb, var(--orange) 26%, transparent);color:#D9791B;}
  .tint-pink{background:color-mix(in srgb, var(--pink) 26%, transparent);color:#E0508B;}
  .tint-slate{background:color-mix(in srgb, var(--blue) 22%, transparent);color:#5470E0;}
  .tint-yellow{background:color-mix(in srgb, var(--yellow) 30%, transparent);color:#B8860B;}
  :root[data-theme="dark"] .tint-indigo{color:var(--purple);}
  :root[data-theme="dark"] .tint-teal{color:var(--teal);}
  :root[data-theme="dark"] .tint-orange{color:var(--orange);}
  :root[data-theme="dark"] .tint-pink{color:var(--pink);}
  :root[data-theme="dark"] .tint-slate{color:var(--blue);}
  :root[data-theme="dark"] .tint-yellow{color:var(--yellow);}
  .bicon{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
  .bicon svg{width:100%;height:100%;}

  .shiftcard{border-radius:16px;padding:16px;position:relative;overflow:hidden;}
  .shiftcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;}
  .shiftcard.pending{background:color-mix(in srgb, var(--blue) 12%, var(--card));}
  .shiftcard.pending::before{background:var(--blue);}
  .shiftcard.active{background:color-mix(in srgb, var(--green) 14%, var(--card));}
  .shiftcard.active::before{background:var(--green);}
  .shiftcard .sctop{display:flex;justify-content:space-between;align-items:flex-start;}
  .shiftcard .scrole{font-size:13px;color:var(--label2);font-weight:500;}
  .shiftcard .sctime{font-size:22px;font-weight:700;margin-top:2px;letter-spacing:-.01em;}
  .pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;}
  .pill.blue{background:color-mix(in srgb, var(--blue) 15%, transparent);color:var(--blue);}
  .pill.green{background:color-mix(in srgb, var(--green) 18%, transparent);color:var(--green);}
  .scaction{margin-top:12px;font-size:14px;color:var(--blue);font-weight:600;}
  .noshift{padding:16px;background:var(--card);border-radius:16px;color:var(--label2);font-size:14px;}

  .mgrentry{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border-radius:16px;padding:16px;border:none;width:100%;text-align:left;margin-top:6px;box-shadow:0 4px 14px color-mix(in srgb, var(--purple) 30%, transparent);}
  :root[data-theme="dark"] .mgrentry{background:linear-gradient(135deg,var(--purple),var(--pink));color:#181425;}
  .mgrentry .ticon{background:rgba(255,255,255,.28);color:inherit;}
  :root[data-theme="dark"] .mgrentry .ticon{background:rgba(24,20,37,.18);color:inherit;}
  .mgrentry .metext{flex:1;}
  .mgrentry .metitle{font-size:15px;font-weight:700;}
  .mgrentry .mesub{font-size:12.5px;opacity:.7;margin-top:1px;}

  .mgrcard{background:var(--card);border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;border:none;text-align:left;width:100%;margin-bottom:10px;color:var(--label);}
  .mgrcard .ticon{flex-shrink:0;}
  .mgrcard .mctitle{font-size:15.5px;font-weight:600;}
  .mgrcard .mcdesc{font-size:12.5px;color:var(--label2);margin-top:2px;line-height:1.35;}

  .mgrgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  @media (min-width:900px){ .mgrgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));} }
  .mgrgrid.two{grid-template-columns:1fr 1fr;}
  .mgrgrid.fit{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .mgrtile{background:var(--card);border-radius:16px;padding:16px;border:none;text-align:left;display:flex;flex-direction:column;gap:12px;color:var(--label);min-height:150px;width:100%;}
  .mgrtile .mctitle{font-size:15px;font-weight:600;letter-spacing:-.01em;}
  .mgrtile .mcdesc{font-size:12.5px;color:var(--label2);margin-top:3px;line-height:1.35;}

  .statuspill{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:20px;white-space:nowrap;}
  .statuspill.blue{background:color-mix(in srgb, var(--blue) 15%, transparent);color:var(--blue);}
  .statuspill.green{background:color-mix(in srgb, var(--green) 18%, transparent);color:var(--green);}

  .fullbtn{display:block;width:auto;min-width:120px;margin-left:auto;padding:10px 22px;border-radius:11px;border:none;font-size:15px;font-weight:600;background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;margin-top:4px;box-shadow:0 4px 14px color-mix(in srgb, var(--purple) 35%, transparent);}
  .fullbtn.center{margin-left:auto;margin-right:auto;min-width:200px;}
  .savebar .fullbtn{margin-left:0;}
  .fullbtn.red{background:linear-gradient(135deg,var(--red),var(--orange));box-shadow:0 4px 14px color-mix(in srgb, var(--red) 35%, transparent);}
  .fullbtn:disabled{background:var(--fillstrong);color:var(--label2);}

  .banner{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:11px;font-size:13.5px;line-height:1.4;margin-bottom:14px;}
  .banner.ok{background:color-mix(in srgb, var(--green) 15%, transparent);color:var(--green);}
  .banner.warn{background:color-mix(in srgb, var(--orange) 16%, transparent);color:#9A6300;}
  @media (prefers-color-scheme: dark){ .banner.warn{color:var(--orange);} }
  :root[data-theme="dark"] .banner.warn{color:var(--orange);}
  .banner.wait{background:var(--fill);color:var(--label2);}
  .banner.err{background:color-mix(in srgb, var(--red) 15%, transparent);color:var(--red);}
  .banner .bicon{margin-top:1px;}

  .chiprow{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;}
  .chip{padding:8px 14px;border-radius:18px;font-size:14px;background:var(--fill);color:var(--label);border:none;}
  .chip.sel{background:var(--blue);color:#fff;}

  .segctrl{display:flex;background:var(--fill);border-radius:9px;padding:2px;margin-bottom:14px;}
  .segctrl button{flex:1;min-width:0;border:none;background:transparent;padding:7px 6px;font-size:12.5px;border-radius:7px;color:var(--label2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .segctrl button.on{background:var(--card);color:var(--purple);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12);}

  .rangenav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .rangenav button{background:var(--fill);border:none;border-radius:7px;padding:6px 11px;font-size:13px;color:var(--blue);font-weight:600;}
  .rangenav .rlabel{font-size:13.5px;color:var(--label2);font-weight:500;}

  .datehead{font-size:12.5px;color:var(--label2);margin:16px 4px 6px;font-weight:600;}
  .datehead:first-of-type{margin-top:2px;}

  .empty{text-align:center;padding:50px 20px;color:var(--label2);font-size:14px;}

  .appfooter{margin-top:34px;padding-top:18px;border-top:0.5px solid var(--sep);text-align:center;}
  .footerlogout{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--red);font-size:15px;font-weight:600;padding:8px 16px;}
  .footerlogout .bicon svg{stroke:var(--red);}
  .footerbrand{font-size:11.5px;color:var(--label2);margin-top:8px;letter-spacing:.02em;}

  .loginwrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 26px;gap:26px;}
  .logo{width:74px;height:74px;border-radius:18px;background:linear-gradient(150deg,var(--purple),var(--pink));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:26px;letter-spacing:-.02em;}
  .loginhead{text-align:center;}
  .loginhead h1{font-size:22px;font-weight:700;margin:0 0 4px;}
  .loginhead p{font-size:14px;color:var(--label2);margin:0;}
  .loginform{width:100%;max-width:320px;display:flex;flex-direction:column;gap:10px;}
  .loginfield{background:var(--fill);border-radius:11px;padding:13px 15px;}
  .loginfield input, .loginfield textarea{width:100%;border:none;background:transparent;font-size:16px;outline:none;color:var(--label);font-family:var(--sans);resize:none;}
  .loginerr{color:var(--red);font-size:13px;text-align:center;min-height:16px;}
  .loginhelp{font-size:12px;color:var(--label2);text-align:center;line-height:1.6;max-width:300px;}
  .forgot{text-align:center;font-size:14px;color:var(--blue);background:none;border:none;padding:4px;}
  .spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--fill);border-top-color:var(--blue);animation:spin .8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:80;}
  .sheet{background:var(--card);width:100%;max-width:430px;border-radius:20px 20px 0 0;padding:22px 24px calc(env(safe-area-inset-bottom) + 22px);text-align:center;}
  .sheet h3{font-size:17px;margin:0 0 4px;}
  .sheet .sub{font-size:13px;color:var(--label2);margin-bottom:18px;line-height:1.5;}
  .dots{display:flex;gap:12px;justify-content:center;margin-bottom:20px;}
  .dot{width:12px;height:12px;border-radius:50%;border:1.4px solid var(--label2);}
  .dot.on{background:var(--blue);border-color:var(--blue);}
  .keypad{display:grid;grid-template-columns:repeat(3,68px);gap:16px;justify-content:center;margin:0 auto;}
  .keypad button{width:68px;height:68px;border-radius:50%;border:none;background:var(--fill);font-size:22px;color:var(--label);}
  .keypad button:active{background:var(--fillstrong);}
  .sheetcancel{margin-top:18px;background:none;border:none;color:var(--blue);font-size:16px;}

  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:rgba(40,40,42,.92);color:#fff;padding:11px 20px;border-radius:20px;font-size:13.5px;z-index:90;backdrop-filter:blur(10px);max-width:86%;text-align:center;}

  @keyframes pushIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
  @keyframes popIn{from{transform:translateX(-28%);opacity:.6;}to{transform:translateX(0);opacity:1;}}
  .anim-push{animation:pushIn .32s cubic-bezier(.32,.72,0,1);}
  .anim-pop{animation:popIn .28s cubic-bezier(.32,.72,0,1);}

  .weekblocklabel{font-size:12.5px;color:var(--label2);margin:14px 2px 6px;font-weight:600;}
  .rotagrid{display:grid;grid-template-columns:150px repeat(7,1fr);border-radius:12px;overflow:hidden;min-width:900px;border:0.5px solid var(--sep);margin-bottom:6px;}
  .rotagrid .hcell{background:var(--fill);padding:10px 8px;font-size:12px;font-weight:600;text-align:center;color:var(--label2);}
  .rotagrid .hcell.staffcol{text-align:left;}
  .rotagrid .namecell{padding:11px 12px;font-size:13.5px;font-weight:600;border-top:0.5px solid var(--sep);background:var(--card);display:flex;align-items:center;}
  .daysummary{border-top:0.5px solid var(--sep);border-left:0.5px solid var(--sep);padding:6px 8px;background:color-mix(in srgb, var(--purple) 6%, var(--card));font-size:10.5px;color:var(--label2);line-height:1.5;text-align:center;}
  .daysummary div:first-child{font-weight:700;color:var(--label);font-size:12px;}
  .rotagrid .daycell{border-top:0.5px solid var(--sep);border-left:0.5px solid var(--sep);padding:6px;min-height:60px;display:flex;flex-direction:column;gap:4px;background:var(--card);}
  .shiftpill{background:color-mix(in srgb, var(--blue) 14%, transparent);color:var(--blue);border-radius:6px;padding:5px 7px;font-size:11px;line-height:1.35;cursor:pointer;font-weight:500;}
  .shiftpill.night{background:#3A3A3C;color:#fff;}
  .addshift{border:1px dashed var(--sep);border-radius:6px;text-align:center;color:var(--label2);font-size:11px;padding:5px;background:none;width:100%;}
  .gridscroll{overflow-x:auto;}

  table.datatable{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border-radius:12px;overflow:hidden;}
  table.datatable th{text-align:left;font-size:11.5px;text-transform:uppercase;color:var(--label2);border-bottom:0.5px solid var(--sep);padding:10px 12px;font-weight:600;}
  table.datatable td{padding:11px 12px;border-bottom:0.5px solid var(--sep);}
  table.datatable tr.totalrow td{font-weight:700;border-bottom:none;}
  .iconbtn{background:var(--fill);border:none;border-radius:7px;padding:5px 11px;font-size:12.5px;color:var(--blue);font-weight:500;}
  .primarybtn{background:var(--blue);color:#fff;border:none;padding:11px 18px;border-radius:10px;font-size:14.5px;font-weight:600;}
  .modal{background:var(--card);border-radius:16px;padding:22px;max-width:400px;width:100%;}
  .center-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:80;padding:16px;}
  .field label{display:block;font-size:12px;color:var(--label2);margin-bottom:5px;font-weight:500;}
  .field input, .field select, .field textarea{width:100%;padding:9px 11px;border:0.5px solid var(--sep);border-radius:8px;background:var(--fill);color:var(--label);font-size:14px;font-family:var(--sans);}
  .field-row{display:flex;flex-direction:column;padding:10px 14px;gap:3px;position:relative;}
  .group .field-row:not(:last-child)::after{content:"";position:absolute;left:14px;right:0;bottom:0;height:0.5px;background:var(--sep);}
  .field-row label{font-size:12.5px;color:var(--label2);}
  .field-row input{border:none;background:transparent;font-size:16px;color:var(--label);padding:2px 0;outline:none;font-family:var(--sans);}
  .ghostinline{background:none;border:none;color:var(--blue);font-size:15px;font-weight:500;padding:10px 0;}
  .formgrid{display:flex;flex-direction:column;gap:12px;}
  .savebar{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
  .tablewrap{overflow-x:auto;}

  /* ---- supervision/appraisal dashboard ---- */
  .supdash-card{background:var(--card);border-radius:16px;padding:14px 16px 16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);}
  :root[data-theme="dark"] .supdash-card{box-shadow:none;border:0.5px solid var(--sep);}
  .supdash-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .supdash-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex-shrink:0;}
  .supdash-name{font-size:14.5px;font-weight:600;}
  .supdash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .supdash-stat{border-radius:12px;padding:9px 6px;text-align:center;background:var(--fill);border-top:3px solid transparent;}
  .supdash-stat .n{font-size:17px;font-weight:700;line-height:1.2;}
  .supdash-stat .lbl{font-size:9.5px;color:var(--label2);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;line-height:1.3;word-break:break-word;}
  .supdash-stat .last{font-size:10px;color:var(--label2);margin-top:5px;}
  .supdash-stat.overdue{background:color-mix(in srgb, var(--red) 14%, transparent);}
  .supdash-stat.overdue .n, .supdash-stat.overdue .last{color:var(--red);font-weight:600;}
  .supdash-stat.never .last{font-style:italic;}

  /* ---- month view / print ---- */
  .fullmodal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:90;padding:20px;}
  .attachmodal{background:var(--card);border-radius:16px;max-width:900px;width:100%;height:85vh;display:flex;flex-direction:column;overflow:hidden;}
  .attachmodal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:0.5px solid var(--sep);flex-shrink:0;}
  .attachmodal-title{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
  .attachmodal-actions{display:flex;gap:8px;flex-shrink:0;}
  .attachmodal-body{flex:1;overflow:auto;background:var(--fill);display:flex;align-items:center;justify-content:center;}
  .attachmodal-body img{max-width:100%;max-height:100%;object-fit:contain;}
  .attachmodal-body iframe{width:100%;height:100%;border:none;background:#fff;}
  .avatarimg{border-radius:50%;object-fit:cover;flex-shrink:0;}
  .annmodal{background:var(--card);border-radius:20px;max-width:400px;width:100%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:annPop .3s cubic-bezier(.34,1.56,.64,1);}
  @keyframes annPop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
  .annbanner{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;padding:16px 22px;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
  .annbanner .bicon svg{stroke:#fff;}
  .monthmodal{background:var(--card);border-radius:16px;max-width:1150px;width:100%;max-height:92vh;overflow:auto;padding:24px;}
  .printonly{display:none;}
  .monthgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--sep);border:1px solid var(--sep);border-radius:10px;overflow:hidden;}
  .monthgrid .mdow{background:var(--fill);padding:8px;font-size:11px;font-weight:600;text-align:center;color:var(--label2);}
  .monthcell{background:var(--card);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:3px;}
  .monthcell.othermonth{opacity:.35;}
  .monthcell .daynum{font-size:12px;font-weight:700;margin-bottom:2px;}
  .monthcell .shiftchip{font-size:9.5px;color:#fff;border-radius:5px;padding:2px 5px;line-height:1.3;font-weight:600;}
  .monthcell .daytotal{margin-top:auto;font-size:9px;color:var(--label2);border-top:0.5px solid var(--sep);padding-top:3px;}
  .shiftlegend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
  .shiftlegend .legitem{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--label2);}
  .shiftlegend .legswatch{width:12px;height:12px;border-radius:4px;flex-shrink:0;}
  @media print{
    body *{visibility:hidden;}
    .printable-month, .printable-month *{visibility:visible;}
    .printable-month{position:absolute;top:0;left:0;width:100%;max-height:none;overflow:visible;padding:0;background:#fff;}
    .noprint{display:none !important;}
    .printonly{display:block !important;}
    .monthcell{background:#fff;min-height:90px;}
    .monthgrid, .monthcell, .monthgrid .mdow{border-color:#999;}
  }

  /* ---- Staff Files: dashboard, toggle cards, grouped list, tabs ---- */
  .statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
  .statcard{background:var(--card);border-radius:16px;padding:14px 16px;}
  .statcard.full{grid-column:1/-1;}
  .statcard .n{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.15;}
  .statcard .lbl{font-size:12px;color:var(--label2);margin-top:3px;font-weight:500;}
  .togglecards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
  .togglecard{background:var(--card);border-radius:16px;padding:16px;text-align:left;border:none;color:var(--label);}
  .togglecard.sel{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;box-shadow:0 4px 14px color-mix(in srgb, var(--purple) 30%, transparent);}
  .togglecard .n{font-size:24px;font-weight:700;}
  .togglecard.sel .n{color:#fff;}
  .togglecard .lbl{font-size:13px;color:var(--label2);margin-top:3px;font-weight:500;}
  .togglecard.sel .lbl{color:rgba(255,255,255,.85);}
  .jobgrouphead{font-size:12.5px;color:var(--label2);text-transform:uppercase;letter-spacing:.02em;font-weight:600;margin:22px 4px 7px;display:flex;align-items:center;justify-content:space-between;}
  .jobgrouphead:first-of-type{margin-top:2px;}
  .jobgrouphead .cnt{color:var(--label2);font-weight:500;text-transform:none;letter-spacing:0;}
  .tabstrip{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px;margin-bottom:10px;border-bottom:0.5px solid var(--sep);}
  .kanban{display:flex;gap:12px;overflow-x:auto;align-items:flex-start;padding-bottom:14px;-webkit-overflow-scrolling:touch;}
  .kcol{flex:0 0 270px;background:var(--fill);border-radius:16px;padding:10px;min-height:140px;transition:box-shadow .12s;}
  .kcol.over{box-shadow:0 0 0 2px var(--blue) inset;}
  .khead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 2px 10px;}
  .kpill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;}
  .kbody{display:flex;flex-direction:column;gap:8px;min-height:60px;}
  .kempty{font-size:12.5px;color:var(--label2);text-align:center;padding:16px 4px;}
  .kcard{background:var(--card);border:none;border-radius:12px;padding:12px 14px;text-align:left;color:var(--label);width:100%;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06);}
  .kcard[draggable="true"]{cursor:grab;}
  .kcard.dragging{opacity:.45;}
  .kcard .kdate{font-size:12px;color:var(--label2);margin-bottom:4px;}
  .kcard .kname{font-size:15px;font-weight:600;line-height:1.3;}
  .kcard .kpos{font-size:13px;color:var(--label2);margin-top:3px;line-height:1.3;}
  .sfgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
  .sfgrid.c1{grid-template-columns:1fr;}
  .sfgrid.c3{grid-template-columns:1fr 1fr 1fr;}
  @media (max-width:560px){ .sfgrid.c3{grid-template-columns:1fr; } }
  .sfcell{background:var(--card);border-radius:14px;padding:12px 14px;min-width:0;}
  .sfcell .sflabel{font-size:12px;color:var(--label2);font-weight:500;margin-bottom:3px;}
  .sfcell .sfval{font-size:15px;color:var(--label);line-height:1.35;overflow-wrap:anywhere;}
  .checklistbox{background:var(--fill);border-radius:14px;padding:14px 16px;font-size:13.5px;line-height:1.9;white-space:pre-wrap;font-family:var(--sans);color:var(--label);}
  .alertrow-ok{color:var(--green);}
  .alertrow-warn{color:#B8860B;}
  :root[data-theme="dark"] .alertrow-warn{color:var(--orange);}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .alertrow-warn{color:var(--orange);} }


/* =========================================================================
   v2 DESIGN - flat, bordered, Instagram-clean SaaS look.
   Full width on desktop, phone-first on mobile (bottom tab bar + "More" sheet).
   ========================================================================= */
body{font-size:14px;line-height:1.4;}
.stage{max-width:none !important;width:100%;margin:0;overflow-x:hidden;overflow-x:clip;overflow-y:visible;background:var(--bg);}
.stagewrap{background:var(--bg);}

/* top bar */
.navbar{height:54px;padding:0 8px;background:var(--card);border-bottom:1px solid var(--sep);-webkit-backdrop-filter:none;backdrop-filter:none;}
.navtitle{font-size:16px;font-weight:700;letter-spacing:-.005em;}
.navbtn{color:var(--label);font-size:15px;font-weight:500;}

/* content spacing: roomy on desktop, tight on phones (leaves room for the bottom bar) */
.content{padding:16px 16px 92px;}
@media (min-width:860px){ .content{padding:28px 40px 56px;} .content.padtop{padding-top:28px;} }

/* every surface: flat, thin border, no drop shadow */
.group,.shiftcard,.noshift,.tile,.mgrcard,.mgrtile,.sfcell,.statcard,.togglecard,.supdash-card{box-shadow:none !important;border:1px solid var(--sep);border-radius:12px;}
.group{border-radius:12px;}
.sheet,.modal,.attachmodal,.annmodal,.monthmodal{box-shadow:0 12px 40px rgba(0,0,0,.22);border:1px solid var(--sep);}
.modal-backdrop,.center-backdrop{background:rgba(0,0,0,.55);}
.toast{background:var(--label);color:var(--card);border-radius:10px;bottom:76px;}
@media (min-width:860px){ .toast{bottom:28px;} }

/* buttons: flat Instagram blue, small radius */
.fullbtn,.primarybtn{background:var(--blue) !important;color:#fff !important;box-shadow:none !important;border-radius:8px;font-size:14px;font-weight:600;padding:8px 18px;border:none;}
.fullbtn.red{background:var(--red) !important;}
.fullbtn:disabled,.primarybtn:disabled{opacity:.45;}
.fullbtn:disabled{background:var(--blue) !important;color:#fff !important;}
.iconbtn{background:var(--fill);color:var(--label);border:none;border-radius:8px;padding:7px 13px;font-size:13px;font-weight:600;}
.iconbtn:hover{background:var(--fillstrong);}
.chip{background:var(--fill);}
.chip.sel{background:var(--label);color:var(--card);}
.segctrl{background:var(--fill);border-radius:10px;}
.segctrl button.on{color:var(--label);box-shadow:0 1px 2px rgba(0,0,0,.12);}
.field input,.field select,.field textarea{background:var(--card);border:1px solid var(--sep);border-radius:8px;padding:10px 12px;font-size:14px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--label2);}
.badge{background:var(--red);}

/* desktop sidebar */
.webrail{width:248px;padding:18px 12px;background:var(--card);border-right:1px solid var(--sep);}
.railbrand{padding:2px 6px 20px;}
.railitem{color:var(--label);border-radius:10px;padding:11px 12px;font-size:14.5px;font-weight:500;}
.railitem:hover{background:var(--fill);}
.railitem.on{background:var(--fill);color:var(--label);font-weight:700;}
.railsectionlabel{margin:20px 10px 6px;letter-spacing:.06em;}
.mgrportalbtn{background:var(--fill) !important;color:var(--label) !important;box-shadow:none !important;border:1px solid var(--sep);font-weight:600;border-radius:10px;}
.mgrportalbtn .bicon svg{stroke:var(--label);}
.mgrentry{background:var(--card) !important;color:var(--label) !important;box-shadow:none !important;border:1px solid var(--sep);}
.mgrentry .ticon{background:var(--fill) !important;}
/* Instagram-style gradient ring on the signed-in person's avatar */
.railbrand .avatar,.railbrand .avatarimg,.profilephoto{border:2px solid transparent;padding:2px;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5) border-box;box-shadow:none;color:var(--label);}
.avatar{background:var(--fill);color:var(--label);font-weight:700;}
.supdash-avatar{background:var(--fill);color:var(--label);}

/* phone bottom tab bar + More sheet */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:stretch;justify-content:space-around;background:var(--card);border-top:1px solid var(--sep);padding-bottom:env(safe-area-inset-bottom);}
.bottombar button{flex:1;min-width:0;background:none;border:none;color:var(--label2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;font-size:10.5px;font-weight:500;padding:0;}
.bottombar button .bicon{width:24px;height:24px;}
.bottombar button.on{color:var(--label);font-weight:700;}
.bottombar button.on .bicon svg{stroke-width:2.2;}
@media (min-width:860px){ .bottombar{display:none;} }
.moresheet{max-width:640px;text-align:left;padding:18px 18px calc(env(safe-area-inset-bottom) + 18px);max-height:82vh;overflow-y:auto;}
.moresheet h3{margin:2px 4px 12px;font-size:16px;}
.moregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.morebtn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border:1px solid var(--sep);border-radius:12px;background:var(--card);color:var(--label);font-size:12px;font-weight:600;text-align:center;line-height:1.25;}
.morebtn .bicon{width:24px;height:24px;}
.moreother{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.moreother button{width:100%;text-align:left;padding:13px 14px;border:1px solid var(--sep);border-radius:12px;background:var(--card);color:var(--label);font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;}

/* login */
.loginwrap{background:var(--bg);}
.logo{background:var(--label);color:var(--card);border-radius:16px;}
.loginform{background:var(--card);border:1px solid var(--sep);border-radius:12px;padding:24px;max-width:350px;}
.loginfield{background:var(--bg);border:1px solid var(--sep);border-radius:8px;padding:10px 12px;}
.loginfield input{font-size:15px;}

/* tables */
table.datatable{border:1px solid var(--sep);border-radius:12px;}
table.datatable th{background:var(--fill);}

/* ---- dashboard components ---- */
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px;}
.kpi{background:var(--card);border:1px solid var(--sep);border-radius:12px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.kpi .kl{font-size:11.5px;color:var(--label2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.kpi .kn{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px;}
.kpi .ks{font-size:12px;color:var(--label2);margin-top:3px;}
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px;}
.dash-card{background:var(--card);border:1px solid var(--sep);border-radius:12px;padding:18px;min-width:0;}
.dash-card > h3{font-size:14px;font-weight:700;margin:0 0 2px;letter-spacing:-.005em;}
.dash-card > .sub{font-size:12px;color:var(--label2);margin-bottom:14px;}
.dash-card.click{cursor:pointer;text-align:left;font:inherit;color:var(--label);width:100%;}
.dash-card.click:hover{border-color:var(--label2);}
.span-4{grid-column:span 4;} .span-6{grid-column:span 6;} .span-8{grid-column:span 8;} .span-12{grid-column:span 12;}
@media (max-width:1180px){ .span-4{grid-column:span 6;} .span-8{grid-column:span 12;} }
@media (max-width:760px){ .dash-grid{grid-template-columns:1fr;gap:12px;} .span-4,.span-6,.span-8,.span-12{grid-column:auto;} .dash-kpis{grid-template-columns:repeat(2,1fr);gap:10px;} .kpi{padding:14px;} .kpi .kn{font-size:26px;} }
.chartwrap{position:relative;flex:none;}
.chartcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;}
.chartcenter .cn{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.05;}
.chartcenter .cl{font-size:10.5px;color:var(--label2);margin-top:2px;}
.legend{display:flex;flex-direction:column;gap:7px;font-size:12.5px;min-width:0;flex:1;}
.legend .li{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.legend .li span:first-child{display:flex;align-items:center;gap:8px;color:var(--label2);}
.legend .sw{width:9px;height:9px;border-radius:50%;flex:none;}
.legend b{color:var(--label);font-weight:700;}
.hbar{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:12.5px;}
.hbar .nm{width:132px;flex:none;color:var(--label);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hbar .tr{flex:1;height:10px;background:var(--fill);border-radius:99px;overflow:hidden;display:flex;gap:2px;}
.hbar .tr i{display:block;height:100%;}
.hbar .vl{width:44px;text-align:right;flex:none;font-weight:700;color:var(--label);}
@media (max-width:520px){ .hbar .nm{width:96px;} }
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 18px;flex-wrap:wrap;}
.dash-head h1{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:0;}
.dash-head .dsub{font-size:13px;color:var(--label2);margin-top:3px;}
.rag{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;}
.alertlist .arow{display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;border-top:1px solid var(--sep);}
.alertlist .arow:first-child{border-top:none;}
.alertlist .arow:hover{background:var(--fill);}
.tilegrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
@media (min-width:860px){ .tilegrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));} .mgrgrid.two{grid-template-columns:repeat(2,minmax(0,1fr));} }


/* =========================================================================
   v3 - rounder, softer, colourful. (Overrides v2 where they overlap.)
   ========================================================================= */
:root{ --shadow:0 1px 2px rgba(66,48,120,.05), 0 10px 28px rgba(66,48,120,.07); --shadow-lg:0 18px 48px rgba(66,48,120,.18); }
:root[data-theme="dark"]{ --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35); --shadow-lg:0 18px 48px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35); --shadow-lg:0 18px 48px rgba(0,0,0,.6); } }

/* --- roundness --- */
.group,.shiftcard,.noshift,.tile,.mgrcard,.mgrtile,.sfcell,.statcard,.togglecard,.supdash-card{border-radius:22px;box-shadow:var(--shadow) !important;border:1px solid color-mix(in srgb, var(--sep) 55%, transparent);}
.group .row:first-child{border-top-left-radius:22px;border-top-right-radius:22px;} .group .row:last-child{border-bottom-left-radius:22px;border-bottom-right-radius:22px;}
.dash-card,.kpi{border-radius:24px;box-shadow:var(--shadow);border:1px solid color-mix(in srgb, var(--sep) 55%, transparent);}
.sheet{border-radius:30px 30px 0 0;box-shadow:var(--shadow-lg);}
.modal,.attachmodal,.annmodal,.monthmodal{border-radius:26px;box-shadow:var(--shadow-lg);}
.kcol{border-radius:24px;} .kcard{border-radius:18px;box-shadow:var(--shadow);}
table.datatable{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:none;}
.rotagrid,.monthgrid{border-radius:20px;}
.field input,.field select,.field textarea{border-radius:14px;background:var(--fill);border:1.5px solid transparent;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:var(--card);}
.loginfield{border-radius:16px;}
.segctrl{border-radius:999px;padding:3px;} .segctrl button{border-radius:999px;} .segctrl button.on{color:var(--blue);}
.chip{border-radius:999px;} .chip.sel{background:var(--blue);color:#fff;}
.pill,.statuspill,.badge,.kpill{border-radius:999px;}
.toast{border-radius:999px;padding:12px 22px;box-shadow:var(--shadow-lg);}
.navbar{border-radius:0 0 24px 24px;border-bottom:none;box-shadow:0 6px 22px rgba(66,48,120,.06);}

/* --- colour --- */
body{background:var(--bg);}
.fullbtn,.primarybtn{border-radius:999px;padding:9px 22px;background:linear-gradient(135deg,#1A90FF,#4F5BD5) !important;box-shadow:0 8px 18px rgba(46,110,240,.32) !important;}
.fullbtn.red{background:linear-gradient(135deg,#FF5A6A,#F58529) !important;box-shadow:0 8px 18px rgba(237,73,86,.3) !important;}
.iconbtn{border-radius:999px;background:color-mix(in srgb, var(--blue) 12%, var(--card));color:var(--blue);}
.iconbtn:hover{background:color-mix(in srgb, var(--blue) 20%, var(--card));}
.ticon{border-radius:15px;}
.tint-indigo{background:#E8EAFF !important;color:#4F5BD5 !important;}
.tint-teal{background:#D9F5F5 !important;color:#0A8F9C !important;}
.tint-orange{background:#FFE9D2 !important;color:#E26A00 !important;}
.tint-pink{background:#FFDFEC !important;color:#D6246E !important;}
.tint-slate{background:#DCEDFF !important;color:#0A7CE0 !important;}
.tint-yellow{background:#FFF1BF !important;color:#A87700 !important;}
:root[data-theme="dark"] .tint-indigo{background:rgba(120,130,255,.2) !important;color:#A3ABFF !important;}
:root[data-theme="dark"] .tint-teal{background:rgba(60,199,211,.2) !important;color:#5FE0EA !important;}
:root[data-theme="dark"] .tint-orange{background:rgba(255,154,77,.2) !important;color:#FFB070 !important;}
:root[data-theme="dark"] .tint-pink{background:rgba(255,95,162,.2) !important;color:#FF8FBE !important;}
:root[data-theme="dark"] .tint-slate{background:rgba(0,149,246,.22) !important;color:#5CB8FF !important;}
:root[data-theme="dark"] .tint-yellow{background:rgba(255,204,77,.2) !important;color:#FFD979 !important;}

/* coloured sidebar: floating, rounded, brand gradient */
.appshell{background:var(--bg);}
.webrail{width:260px;margin:14px 0 14px 14px;top:14px;height:calc(100vh - 28px);height:calc(100dvh - 28px);border-radius:30px;border:none;padding:22px 14px;color:#fff;
  background:linear-gradient(195deg,#3F45D8 0%,#7B2FBE 50%,#D62F7F 100%);box-shadow:0 22px 48px rgba(210,120,70,.32);}
.webrail .railbrand *{color:#fff !important;}
.webrail .railbrand div div+div{opacity:.75;}
.webrail .railbrand .avatar,.webrail .railbrand .avatarimg{background:rgba(255,255,255,.22) !important;border:2px solid rgba(255,255,255,.9);padding:0;}
.railitem{color:rgba(255,255,255,.88);border-radius:16px;padding:11px 14px;}
.railitem:hover{background:rgba(255,255,255,.15);}
.railitem.on{background:#fff;color:#5B2FBE;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.16);}
.railsectionlabel{color:rgba(255,255,255,.62);}
.mgrportalbtn{background:rgba(255,255,255,.2) !important;color:#fff !important;border:none;border-radius:16px;box-shadow:none !important;}
.mgrportalbtn .bicon svg{stroke:#fff;}
.raillogo{background:#fff;border-radius:20px;padding:8px 6px;margin:8px 4px 0;display:flex;justify-content:center;}

/* phone bottom bar: rounded, colourful active tab */
.bottombar{border-radius:26px 26px 0 0;border-top:none;box-shadow:0 -10px 30px rgba(66,48,120,.10);}
.bottombar button.on{color:var(--blue);}
.morebtn{border-radius:20px;border:none;background:var(--fill);}
.moreother button{border-radius:18px;border:none;background:var(--fill);}
.morebtn:nth-child(6n+1) .bicon{color:#4F5BD5;} .morebtn:nth-child(6n+2) .bicon{color:#0A8F9C;} .morebtn:nth-child(6n+3) .bicon{color:#E26A00;}
.morebtn:nth-child(6n+4) .bicon{color:#D6246E;} .morebtn:nth-child(6n+5) .bicon{color:#0A7CE0;} .morebtn:nth-child(6n) .bicon{color:#A87700;}

/* login */
.loginwrap{background:linear-gradient(160deg,#E4EEFF 0%,#EFE6FF 55%,#FFE6F0 100%);}
:root[data-theme="dark"] .loginwrap{background:linear-gradient(160deg,#10122A 0%,#1A1030 55%,#2A0F22 100%);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .loginwrap{background:linear-gradient(160deg,#10122A 0%,#1A1030 55%,#2A0F22 100%);} }
.loginform{border-radius:26px;box-shadow:var(--shadow-lg);border:none;}
.logo{background:linear-gradient(135deg,#3F45D8,#D62F7F);color:#fff;border-radius:22px;}

/* dashboard colour */
.kpi{position:relative;overflow:hidden;}
.kpi.tone-red{background:linear-gradient(135deg,color-mix(in srgb,#ED4956 7%,var(--card)),var(--card) 78%);} .kpi.tone-red .kn{color:#D9535E;}
.kpi.tone-orange{background:linear-gradient(135deg,color-mix(in srgb,#F58529 7%,var(--card)),var(--card) 78%);} .kpi.tone-orange .kn{color:#D9822B;}
.kpi.tone-blue{background:linear-gradient(135deg,color-mix(in srgb,#0A84FF 7%,var(--card)),var(--card) 78%);} .kpi.tone-blue .kn{color:#4B86E8;}
.kpi.tone-green{background:linear-gradient(135deg,color-mix(in srgb,#12B76A 7%,var(--card)),var(--card) 78%);} .kpi.tone-green .kn{color:#34A872;}
.kpi.tone-purple{background:linear-gradient(135deg,color-mix(in srgb,#8134AF 7%,var(--card)),var(--card) 78%);} .kpi.tone-purple .kn{color:#8B63C9;}
:root[data-theme="dark"] .kpi.tone-red .kn{color:#F08A93;} :root[data-theme="dark"] .kpi.tone-orange .kn{color:#F2B26B;} :root[data-theme="dark"] .kpi.tone-blue .kn{color:#8CB6F5;} :root[data-theme="dark"] .kpi.tone-green .kn{color:#7DD4AE;} :root[data-theme="dark"] .kpi.tone-purple .kn{color:#BDA0E6;}
.dash-head h1{font-size:26px;}
.alertlist .arow{border-radius:16px;padding:12px 10px;} .alertlist .arow:hover{background:var(--fill);}
.hbar .tr{height:12px;}
.dash-card.click:hover{border-color:color-mix(in srgb, var(--blue) 40%, transparent);transform:translateY(-1px);transition:transform .15s;}


/* =========================================================================
   v4 - calmer dashboard colours, cool blue-teal sidebar, floating glass tab bar
   ========================================================================= */
.webrail{background:linear-gradient(195deg,#4A6CF7 0%,#3D8FE8 48%,#33B5C7 100%);box-shadow:0 22px 48px rgba(210,130,80,.28);}
.railitem.on{color:#2F5FD6;}
.raillogo{background:rgba(255,255,255,.96);}

/* phones: floating, rounded, frosted-glass bar (Instagram style) */
.content{padding-bottom:118px;}
@media (min-width:860px){ .content{padding-bottom:56px;} }
.bottombar{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));padding-bottom:0;border-radius:30px;border:1px solid rgba(255,255,255,.55);
  background:color-mix(in srgb, var(--card) 62%, transparent);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 12px 34px rgba(66,48,120,.16), inset 0 1px 0 rgba(255,255,255,.6);padding:6px;gap:2px;}
:root[data-theme="dark"] .bottombar{border-color:rgba(255,255,255,.12);box-shadow:0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bottombar{border-color:rgba(255,255,255,.12);box-shadow:0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);} }
.bottombar button{height:52px;border-radius:24px;}
.bottombar button.on{background:color-mix(in srgb, var(--blue) 14%, transparent);color:var(--blue);}
.toast{bottom:104px;}
@media (min-width:860px){ .toast{bottom:28px;} .bottombar{display:none;} }


/* =========================================================================
   v5 - warm palette, very light sidebar, quiet scrollbars, overflow fixes
   ========================================================================= */
/* scrollbars: thin, invisible until you hover the scrolling area */
*{scrollbar-width:thin;scrollbar-color:transparent transparent;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:transparent;border-radius:99px;border:2px solid transparent;background-clip:padding-box;}
.stagewrap:hover,.webrail:hover,.moresheet:hover,.modal:hover,.gridscroll:hover,.tablewrap:hover,.kanban:hover,.attachmodal-body:hover,.monthmodal:hover,.sheet:hover{scrollbar-color:rgba(120,110,160,.38) transparent;}
.stagewrap:hover::-webkit-scrollbar-thumb,.webrail:hover::-webkit-scrollbar-thumb,.moresheet:hover::-webkit-scrollbar-thumb,.modal:hover::-webkit-scrollbar-thumb,.gridscroll:hover::-webkit-scrollbar-thumb,.tablewrap:hover::-webkit-scrollbar-thumb,.kanban:hover::-webkit-scrollbar-thumb,.attachmodal-body:hover::-webkit-scrollbar-thumb,.monthmodal:hover::-webkit-scrollbar-thumb,.sheet:hover::-webkit-scrollbar-thumb{background:rgba(120,110,160,.38);background-clip:padding-box;}

/* very light, warm sidebar */
.webrail{background:linear-gradient(195deg,#F8F5FF 0%,#F1EBFF 55%,#EAE2FD 100%);box-shadow:0 14px 34px rgba(120,90,200,.16);border:1px solid rgba(190,170,240,.45);color:var(--label);}
.webrail .railbrand *{color:var(--label) !important;}
.webrail .railbrand div div+div{opacity:.7;}
.webrail .railbrand .avatar,.webrail .railbrand .avatarimg{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(45deg,#B79CFF,#7B5CF0,#E06C8E) border-box !important;border:2px solid transparent;padding:2px;color:var(--label);}
.railitem{color:#5F5680;}
.railitem:hover{background:rgba(123,92,240,.09);color:var(--label);}
.railitem.on{background:#fff;color:#6A45D8;box-shadow:0 6px 16px rgba(120,90,200,.22);}
.railsectionlabel{color:#A69FC0;}
.mgrportalbtn{background:rgba(255,255,255,.75) !important;color:#5F5680 !important;border:1px solid rgba(190,170,240,.6);}
.mgrportalbtn .bicon svg{stroke:#5F5680;}
.raillogo{background:#fff;border:1px solid rgba(190,170,240,.5);}
:root[data-theme="dark"] .webrail{background:linear-gradient(195deg,#2A2320 0%,#241E1B 100%);border-color:#33291f;box-shadow:none;}
:root[data-theme="dark"] .railitem{color:#C9BDB1;} :root[data-theme="dark"] .railitem:hover{background:rgba(240,138,75,.12);color:#fff;}
:root[data-theme="dark"] .railitem.on{background:#3A2E27;color:#F5A560;box-shadow:none;}
:root[data-theme="dark"] .railsectionlabel{color:#8F8377;}
:root[data-theme="dark"] .mgrportalbtn{background:#2F2722 !important;color:#D9CDC1 !important;border-color:#3A2F28;} :root[data-theme="dark"] .mgrportalbtn .bicon svg{stroke:#D9CDC1;}
:root[data-theme="dark"] .raillogo{background:#F5EFE8;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .webrail{background:linear-gradient(195deg,#2A2320 0%,#241E1B 100%);border-color:#33291f;box-shadow:none;}
  :root:not([data-theme="light"]) .railitem{color:#C9BDB1;} :root:not([data-theme="light"]) .railitem:hover{background:rgba(240,138,75,.12);color:#fff;}
  :root:not([data-theme="light"]) .railitem.on{background:#3A2E27;color:#F5A560;box-shadow:none;}
  :root:not([data-theme="light"]) .railsectionlabel{color:#8F8377;}
  :root:not([data-theme="light"]) .mgrportalbtn{background:#2F2722 !important;color:#D9CDC1 !important;border-color:#3A2F28;} :root:not([data-theme="light"]) .mgrportalbtn .bicon svg{stroke:#D9CDC1;}
  :root:not([data-theme="light"]) .raillogo{background:#F5EFE8;}
}

/* warm buttons */
.fullbtn,.primarybtn{background:linear-gradient(135deg,#9B7BFA,#6C4CE0) !important;box-shadow:0 8px 18px rgba(108,76,224,.30) !important;}
.fullbtn.red{background:linear-gradient(135deg,#EF6A76,#DC4A5A) !important;box-shadow:0 8px 18px rgba(220,74,90,.26) !important;}
.loginwrap{background:linear-gradient(160deg,#F3EEFF 0%,#EAE3FF 55%,#FBE3F1 100%);}
.logo{background:linear-gradient(135deg,#9B7BFA,#6C4CE0);}
:root[data-theme="dark"] .loginwrap{background:linear-gradient(160deg,#1B1512 0%,#241A15 55%,#2A1A1C 100%);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .loginwrap{background:linear-gradient(160deg,#1B1512 0%,#241A15 55%,#2A1A1C 100%);} }
.tint-slate{background:#DCEDFF !important;color:#0A7CE0 !important;}
.tint-indigo{background:#ECE6FF !important;color:#6A45D8 !important;}

/* text overflow: nothing should spill out of its card */
.content,.dash-card,.kpi,.sfcell,.group,.row,.mgrtile,.tile,.dash-card *,.kpi *{min-width:0;}
.content{overflow-wrap:break-word;}
.dash-card h3,.sfval,.rt1,.rsub,.mctitle,.mcdesc,.tlabel,.kn,.kl,.ks{overflow-wrap:anywhere;}
.kpi .kn{font-size:clamp(22px,2.3vw,32px);line-height:1.15;}
.kpi{flex-wrap:nowrap;}
.chartcenter{padding:0 15%;}
.chartcenter .cn{max-width:100%;}
.chartcenter .cl{max-width:100%;line-height:1.15;font-size:10px;overflow-wrap:break-word;}
.railitem{white-space:normal;line-height:1.25;text-align:left;}
.navtitle{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bottombar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* grouped navigation */
.railsectionlabel{margin:18px 12px 6px;font-size:10.5px;letter-spacing:.09em;}
.railitem{padding:9px 14px;margin-bottom:2px;}
.moregroup{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label2);margin:16px 4px 8px;}
.moregroup:first-of-type{margin-top:4px;}

/* dark mode uses the white-text logo, so it must sit on the dark sidebar, not on a light chip */
:root[data-theme="dark"] .raillogo{background:transparent !important;border-color:transparent !important;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .raillogo{background:transparent !important;border-color:transparent !important;} }


/* =========================================================================
   v6 - dark mode = black + blue (replaces the brown/warm dark look)
   ========================================================================= */
:root[data-theme="dark"] .webrail{background:linear-gradient(195deg,#0F1626 0%,#0A0F1B 100%);border-color:#18233A;box-shadow:none;}
:root[data-theme="dark"] .railitem{color:#A9B5CC;}
:root[data-theme="dark"] .railitem:hover{background:rgba(91,157,255,.10);color:#fff;}
:root[data-theme="dark"] .railitem.on{background:rgba(91,157,255,.16);color:#9CC4FF;box-shadow:none;}
:root[data-theme="dark"] .railsectionlabel{color:#66748F;}
:root[data-theme="dark"] .mgrportalbtn{background:#151D2E !important;color:#C9D5EA !important;border-color:#1F2A40;}
:root[data-theme="dark"] .mgrportalbtn .bicon svg{stroke:#C9D5EA;}
:root[data-theme="dark"] .fullbtn,:root[data-theme="dark"] .primarybtn{background:linear-gradient(135deg,#5B9DFF,#3F6FE8) !important;box-shadow:0 8px 18px rgba(60,110,235,.35) !important;}
:root[data-theme="dark"] .fullbtn.red{background:linear-gradient(135deg,#F2727C,#DC4A5A) !important;box-shadow:0 8px 18px rgba(220,74,90,.3) !important;}
:root[data-theme="dark"] .loginwrap{background:linear-gradient(160deg,#080A10 0%,#0D1424 55%,#101C36 100%);}
:root[data-theme="dark"] .logo{background:linear-gradient(135deg,#5B9DFF,#3F6FE8);}
:root[data-theme="dark"] .navbar{box-shadow:0 6px 22px rgba(0,0,0,.55);}
:root[data-theme="dark"] .webrail .railbrand .avatar,:root[data-theme="dark"] .webrail .railbrand .avatarimg{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(45deg,#5B9DFF,#A99BFF,#4DD0E1) border-box !important;}
:root[data-theme="dark"] .scrollhint{scrollbar-color:#3A465E transparent;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .webrail{background:linear-gradient(195deg,#0F1626 0%,#0A0F1B 100%);border-color:#18233A;box-shadow:none;}
  :root:not([data-theme="light"]) .railitem{color:#A9B5CC;}
  :root:not([data-theme="light"]) .railitem:hover{background:rgba(91,157,255,.10);color:#fff;}
  :root:not([data-theme="light"]) .railitem.on{background:rgba(91,157,255,.16);color:#9CC4FF;box-shadow:none;}
  :root:not([data-theme="light"]) .railsectionlabel{color:#66748F;}
  :root:not([data-theme="light"]) .mgrportalbtn{background:#151D2E !important;color:#C9D5EA !important;border-color:#1F2A40;}
  :root:not([data-theme="light"]) .mgrportalbtn .bicon svg{stroke:#C9D5EA;}
  :root:not([data-theme="light"]) .fullbtn,:root:not([data-theme="light"]) .primarybtn{background:linear-gradient(135deg,#5B9DFF,#3F6FE8) !important;box-shadow:0 8px 18px rgba(60,110,235,.35) !important;}
  :root:not([data-theme="light"]) .fullbtn.red{background:linear-gradient(135deg,#F2727C,#DC4A5A) !important;box-shadow:0 8px 18px rgba(220,74,90,.3) !important;}
  :root:not([data-theme="light"]) .loginwrap{background:linear-gradient(160deg,#080A10 0%,#0D1424 55%,#101C36 100%);}
  :root:not([data-theme="light"]) .logo{background:linear-gradient(135deg,#5B9DFF,#3F6FE8);}
  :root:not([data-theme="light"]) .navbar{box-shadow:0 6px 22px rgba(0,0,0,.55);}
  :root:not([data-theme="light"]) .webrail .railbrand .avatar,:root:not([data-theme="light"]) .webrail .railbrand .avatarimg{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(45deg,#5B9DFF,#A99BFF,#4DD0E1) border-box !important;}
}


/* collapsible sidebar groups: the heading is a dashboard link, the chevron folds the sub-items */
.railgroup{margin:6px 0;}
.railghead{display:flex;align-items:center;border-radius:16px;}
.railghead:hover{background:rgba(123,92,240,.09);}
.railgtitle{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:10px 6px 10px 14px;background:none;border:none;font:inherit;font-size:14px;font-weight:700;color:var(--label);text-align:left;border-radius:16px;}
.railgtitle .bicon{color:#6A45D8;}
.railchev{background:none;border:none;color:#A69FC0;font-size:13px;width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:transform .18s;transform:rotate(-90deg);}
.railchev:hover{background:rgba(0,0,0,.05);}
.railgroup.open .railchev{transform:rotate(0deg);}
.railghead.on{background:#fff;box-shadow:0 6px 16px rgba(120,90,200,.22);}
.railghead.on .railgtitle{color:#6A45D8;}
.railsub{display:none;margin:2px 0 4px 22px;padding-left:8px;border-left:2px solid rgba(123,92,240,.2);}
.railgroup.open .railsub{display:block;}
.railsub .railitem{font-size:13.5px;padding:8px 12px;border-radius:14px;}
:root[data-theme="dark"] .railgtitle{color:#E4EAF6;} :root[data-theme="dark"] .railgtitle .bicon{color:#7DB2FF;}
:root[data-theme="dark"] .railghead:hover{background:rgba(91,157,255,.10);} :root[data-theme="dark"] .railghead.on{background:rgba(91,157,255,.16);box-shadow:none;} :root[data-theme="dark"] .railghead.on .railgtitle{color:#9CC4FF;}
:root[data-theme="dark"] .railchev{color:#66748F;} :root[data-theme="dark"] .railchev:hover{background:rgba(255,255,255,.06);} :root[data-theme="dark"] .railsub{border-left-color:rgba(91,157,255,.25);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .railgtitle{color:#E4EAF6;} :root:not([data-theme="light"]) .railgtitle .bicon{color:#7DB2FF;}
  :root:not([data-theme="light"]) .railghead:hover{background:rgba(91,157,255,.10);} :root:not([data-theme="light"]) .railghead.on{background:rgba(91,157,255,.16);box-shadow:none;} :root:not([data-theme="light"]) .railghead.on .railgtitle{color:#9CC4FF;}
  :root:not([data-theme="light"]) .railchev{color:#66748F;} :root:not([data-theme="light"]) .railchev:hover{background:rgba(255,255,255,.06);} :root:not([data-theme="light"]) .railsub{border-left-color:rgba(91,157,255,.25);}
}
.moregroup{display:flex;align-items:center;justify-content:space-between;}
.moredash{background:none;border:none;color:var(--blue);font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;padding:2px 6px;}

/* Settings + Switch sit side by side at the bottom of the sidebar and in the phone More sheet */
.railbottom{display:flex;gap:6px;margin-top:6px;}
.railbottom .railitem{flex:1;justify-content:center;padding:10px 8px;font-size:13.5px;gap:8px;margin-bottom:0;}
.morepair{display:flex;gap:8px;}
.morepair button{flex:1;justify-content:center;}

/* annual leave on the rota */
.leavepill{background:repeating-linear-gradient(45deg,#DDF3F0,#DDF3F0 6px,#CBEBE6 6px,#CBEBE6 12px);color:#0A7F73;border-radius:6px;padding:5px 7px;font-size:11px;font-weight:700;text-align:center;}
:root[data-theme="dark"] .leavepill{background:repeating-linear-gradient(45deg,#16302D,#16302D 6px,#1B3B37 6px,#1B3B37 12px);color:#6FD8CB;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .leavepill{background:repeating-linear-gradient(45deg,#16302D,#16302D 6px,#1B3B37 6px,#1B3B37 12px);color:#6FD8CB;} }
.monthcell .leavechip{background:repeating-linear-gradient(45deg,#2FA69A,#2FA69A 5px,#3DB8AC 5px,#3DB8AC 10px) !important;}

/* not covered shifts */
.shiftpill.notcovered{background:#FDE7E9;color:#C43D4B;border:1px dashed #E5606B;}
.monthcell .nccchip{background:repeating-linear-gradient(45deg,#E5606B,#E5606B 5px,#EE7C86 5px,#EE7C86 10px) !important;color:#fff !important;}
:root[data-theme="dark"] .shiftpill.notcovered{background:rgba(229,96,107,.16);color:#F29AA2;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .shiftpill.notcovered{background:rgba(229,96,107,.16);color:#F29AA2;} }

/* =========================================================================
   v7 - form fields: the same size and alignment everywhere (fixes date / time boxes overflowing or looking empty on iPhone)
   ========================================================================= */
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box;display:block;font-family:var(--sans);}
.field input,.field select{min-height:46px;}
.field textarea{min-height:80px;}
.field input[type=date],.field input[type=time],.field input[type=month],.field input[type=datetime-local]{-webkit-appearance:none;appearance:none;text-align:left;line-height:normal;padding:10px 14px;}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;min-height:1.4em;margin:0;}
input[type=date]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit{padding:0;}
.field select{-webkit-appearance:none;appearance:none;padding:10px 38px 10px 14px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%2377728E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;}
.modal .field,.sheet .field{width:100%;}
@media (max-width:860px){ .field input,.field select,.field textarea{font-size:16px;} }          /* stops iPhone zooming in when a field is tapped */
/* iPhone shows an empty date / time box as blank: a placeholder is drawn on top (added by core.js) */
.dtwrap{position:relative;display:block;width:100%;}
.dtwrap.dt-empty::after{content:attr(data-ph);position:absolute;left:var(--phx,14px);top:var(--phy,50%);transform:translateY(-50%);max-width:var(--phw,none);overflow:hidden;white-space:nowrap;color:var(--label2);pointer-events:none;font-size:15px;}
.dtwrap > input{margin-left:0;margin-right:0;}
.dtwrap.dt-empty input{color:transparent;}
.dtwrap.dt-empty input:focus{color:var(--label);}

/* notifications timeline (staff) */
.timeline{position:relative;padding-left:30px;}
.timeline::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--sep);border-radius:2px;}
.tlitem{position:relative;margin-bottom:14px;}
.tldot{position:absolute;left:-27px;top:17px;width:14px;height:14px;border-radius:50%;background:var(--fillstrong);border:3px solid var(--bg);box-sizing:border-box;}
.tldot.unread{background:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent);}
.tlcard{background:var(--card);border:1px solid color-mix(in srgb,var(--sep) 55%,transparent);border-radius:20px;padding:13px 15px;box-shadow:var(--shadow);}
.tlcard.unread{border-color:color-mix(in srgb,var(--blue) 45%,transparent);}
.tlhead{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tltitle{font-size:13.5px;font-weight:800;}
.tlmsg{font-size:14px;line-height:1.5;margin-top:7px;white-space:pre-wrap;overflow-wrap:anywhere;}
.tlfrom{font-size:12px;color:var(--label2);margin-top:8px;}

/* staff timesheet: monthly calendar */
.tscal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.tshead{font-size:11px;font-weight:700;color:var(--label2);text-align:center;text-transform:uppercase;letter-spacing:.04em;padding:2px 0;}
.tscell{min-height:74px;border-radius:14px;background:var(--card);border:1px solid var(--sep);padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;overflow:hidden;}
.tscell.blank{background:transparent;border-color:transparent;cursor:default;}
.tscell.today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset;}
.tsnum{font-size:11.5px;font-weight:700;color:var(--label2);}
.tschip{font-size:9.5px;font-weight:800;color:#fff;border-radius:6px;padding:1px 4px;text-align:center;line-height:1.35;}
.tshrs{font-size:10.5px;font-weight:700;margin-top:auto;}
@media (min-width:700px){ .tscell{min-height:100px;padding:9px;gap:4px;} .tschip{font-size:11px;padding:2px 6px;} .tsnum{font-size:13px;} .tshrs{font-size:12.5px;} }

/* draft rota */
.draftbanner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;margin:0 0 14px;border-radius:20px;background:color-mix(in srgb,#F0913E 13%,var(--card));border:1.5px dashed #F0913E;color:var(--label);}
.shiftpill.draft{border:1.5px dashed #F0913E !important;}
.shiftchip.draftchip{outline:1.5px dashed #F0913E;outline-offset:-1px;}

/* three buttons at the bottom of the sidebar: Settings, Switch, Support */
.railbottom{flex-wrap:wrap;}
.railbottom .railitem{flex:1 1 84px;padding:9px 6px;font-size:12.5px;gap:6px;}

/* tiny "last synced" line under the logo */
.syncnote{font-size:10px;line-height:1.2;color:var(--label2);opacity:.7;letter-spacing:.02em;text-align:center;margin-top:4px;}
.webrail .syncnote{margin:6px 0 2px;}

/* sign in: logo, username and password sit in the exact centre of the screen (horizontally and vertically), on every device */
.loginwrap{position:fixed;top:0;right:0;bottom:0;left:0;width:auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:28px;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;text-align:center;}
.loginwrap > :first-child{margin-top:auto;}      /* auto margins centre the group, and let it scroll safely if the keyboard makes the screen short */
.loginwrap > :last-child{margin-bottom:auto;}
.loginwrap > img{display:block;margin-left:auto;margin-right:auto;flex:none;}
.loginwrap .loginform{width:100%;max-width:350px;margin-left:auto;margin-right:auto;flex:none;}

/* sign in v2: the LOGO + USERNAME + PASSWORD block is in the exact centre of the screen; Log In and Forgot password hang below it */
.loginwrap{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:24px;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:0;}
.logincore{position:relative;width:100%;max-width:350px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:22px;flex:none;}
.logincore .loginform{width:100%;max-width:none;margin:0;}
.loginactions{position:absolute;top:100%;left:0;right:0;margin-top:14px;display:flex;flex-direction:column;align-items:stretch;gap:10px;}
.loginactions .loginerr{min-height:0;}
.loginactions .loginerr:empty{display:none;}
.loginactions .fullbtn{width:100%;}

/* the auto margins are what centre the block in the screen - nothing may override them */
.loginwrap > .logincore{margin:auto !important;}

/* sign in v3: the WHOLE sign-in block (logo, username, password, Log In, Forgot password) is centred as one, and Log In is a small button */
.loginactions{position:static !important;margin-top:0 !important;align-items:center !important;gap:12px !important;width:100%;}
.loginactions .fullbtn{width:auto !important;min-width:128px;padding:10px 30px !important;font-size:14px !important;align-self:center;flex:none;}
.loginactions .forgot{font-size:13px;padding:2px 6px;}
.logincore{gap:20px !important;}

/* phones: tapping a text box must never zoom the page. iPhone zooms in on any field whose text is smaller than 16px, so every field is 16px on touch screens. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;}
@media (hover:none) and (pointer:coarse), (max-width:860px){
  input, select, textarea{font-size:16px !important;}
  input[type="checkbox"], input[type="radio"]{font-size:inherit !important;}
}

/* =========================================================================
   LIQUID GLASS tab bar (phones): frosted, translucent, with a bright edge and a specular highlight.
   The selected tab has a glass "lens" that slides to the tab you tap, slowly enough to see (about half a second).
   ========================================================================= */
.bottombar{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.34) 100%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.04);backdrop-filter:blur(26px) saturate(190%) brightness(1.04);
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 14px 36px rgba(66,48,120,.20), 0 2px 6px rgba(66,48,120,.08), inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1.5px 0 rgba(255,255,255,.35), inset 0 0 22px rgba(255,255,255,.28) !important;
  overflow:hidden;isolation:isolate;
}
.bottombar::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.65;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 48%), radial-gradient(120% 90% at 50% -25%,rgba(255,255,255,.6),rgba(255,255,255,0) 60%);}
.bottombar > button{position:relative;z-index:2;background:none !important;transition:color .35s ease;-webkit-tap-highlight-color:transparent;}
.bottombar > button.on{background:none !important;color:var(--blue);}
.bottombar > button .bicon{transition:transform .35s ease;}
.bottombar > button.on .bicon{transform:translateY(-1px) scale(1.06);}
.tabglass{position:absolute;z-index:1;left:6px;top:6px;height:52px;pointer-events:none;will-change:transform;
  width:calc((100% - 12px - (var(--n,5) - 1) * 2px) / var(--n,5));
  transform:translateX(calc(var(--i,0) * (100% + 2px)));
  transition:transform .55s cubic-bezier(.32,.9,.3,1.04), opacity .3s ease;
  border-radius:24px;border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.46) 100%);
  box-shadow:0 6px 16px rgba(90,60,200,.22), inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -2px 6px rgba(123,92,240,.16);
  -webkit-backdrop-filter:blur(8px) saturate(170%);backdrop-filter:blur(8px) saturate(170%);}
.tabglass::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 20%,transparent),rgba(255,255,255,0) 65%);}
:root[data-theme="dark"] .bottombar{background:linear-gradient(180deg,rgba(64,72,98,.55),rgba(22,26,40,.42)) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:0 16px 40px rgba(0,0,0,.6), inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 22px rgba(255,255,255,.05) !important;}
:root[data-theme="dark"] .bottombar::before{opacity:.22;}
:root[data-theme="dark"] .tabglass{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08));border-color:rgba(255,255,255,.28);box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1.5px 1px rgba(255,255,255,.35), inset 0 -2px 6px rgba(91,157,255,.22);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bottombar{background:linear-gradient(180deg,rgba(64,72,98,.55),rgba(22,26,40,.42)) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:0 16px 40px rgba(0,0,0,.6), inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 22px rgba(255,255,255,.05) !important;}
  :root:not([data-theme="light"]) .bottombar::before{opacity:.22;}
  :root:not([data-theme="light"]) .tabglass{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08));border-color:rgba(255,255,255,.28);box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1.5px 1px rgba(255,255,255,.35), inset 0 -2px 6px rgba(91,157,255,.22);}
}
@media (prefers-reduced-motion: reduce){ .tabglass{transition:opacity .2s ease;} }


/* =========================================================================
   STAFF USER GUIDE
   ========================================================================= */
.guide{max-width:980px;margin:0 auto;}
.ghero{display:flex;align-items:center;gap:16px;padding:18px 18px;margin:6px 0 14px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 16%,var(--card)),var(--card));border:1px solid var(--sep);box-shadow:var(--shadow);}
.gheroicon{width:52px;height:52px;flex:none;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#9B7BFA,#6C4CE0);color:#fff;}
.gheroicon .bicon{width:26px;height:26px;color:#fff;}
.ghero h1{font-size:21px;margin:0 0 3px;letter-spacing:-.01em;}
.gsub{font-size:13.5px;color:var(--label2);line-height:1.4;}
.gupd{font-size:11.5px;color:var(--label2);margin-top:6px;opacity:.85;}
.gtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.gtoch{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--label2);margin:4px 4px 8px;}
.gtoc{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:18px;}
.gtocbtn{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:14px;border:1px solid var(--sep);background:var(--card);color:var(--label);font-size:13.5px;font-weight:600;cursor:pointer;}
.gtocn{width:24px;height:24px;flex:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);}
.gcount{font-size:12.5px;color:var(--label2);margin:0 4px 10px;}
.gsec{margin-bottom:12px;border-radius:22px;background:var(--card);border:1px solid var(--sep);box-shadow:var(--shadow);overflow:hidden;}
.gsechead{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:none;text-align:left;cursor:pointer;color:var(--label);}
.gsecicon{width:36px;height:36px;flex:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue);}
.gsecicon .bicon{width:20px;height:20px;}
.gsectitle{flex:1;font-size:16px;font-weight:700;letter-spacing:-.01em;}
.gsecnum{color:var(--label2);font-weight:600;}
.gchev{font-size:22px;color:var(--label2);transition:transform .25s ease;}
.gsechead.on .gchev{transform:rotate(90deg);}
.gsecbody{padding:2px 18px 20px;}
.gintro{font-size:14.5px;line-height:1.6;color:var(--label);margin:6px 0 14px;font-weight:500;}
.gp{font-size:14.5px;line-height:1.6;margin:0 0 12px;}
.gh{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin:20px 0 8px;}
.gul{margin:0 0 12px;padding-left:20px;font-size:14.5px;line-height:1.6;}
.gul li{margin-bottom:5px;}
.gsteps{list-style:none;margin:0 0 14px;padding:0;counter-reset:gs;}
.gsteps li{position:relative;padding:2px 0 2px 38px;margin-bottom:10px;font-size:14.5px;line-height:1.55;counter-increment:gs;}
.gsteps li::before{content:counter(gs);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#9B7BFA,#6C4CE0);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.gcall{margin:4px 0 14px;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.55;border-left:4px solid var(--blue);background:color-mix(in srgb,var(--blue) 9%,var(--card));}
.gcall.tip{border-left-color:#3FAE7C;background:color-mix(in srgb,#3FAE7C 10%,var(--card));}
.gcall.warn{border-left-color:#E5606B;background:color-mix(in srgb,#E5606B 10%,var(--card));}
.gcalllab{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px;color:var(--label2);}
.gframe{width:250px;max-width:100%;flex:none;padding:6px;border-radius:32px;background:#1E1E28;box-shadow:0 10px 26px rgba(40,30,90,.22);}
.gimg{display:block;width:100%;height:auto;border-radius:26px;background:var(--fill);}
.gshot{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin:6px 0 18px;}
.gside{flex:1 1 230px;min-width:0;}
.gcap{font-size:13.5px;line-height:1.55;color:var(--label);margin-bottom:10px;}
.glegend{list-style:none;margin:0;padding:0;}
.glegend li{position:relative;padding:3px 0 3px 36px;margin-bottom:6px;font-size:14px;line-height:1.5;min-height:26px;}
.glegend li::before{content:attr(data-n);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#E5484D;color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--card);box-shadow:0 2px 6px rgba(0,0,0,.25);}
.gshots{display:flex;gap:18px;flex-wrap:wrap;margin:6px 0 18px;}
.gshotitem{width:230px;max-width:100%;}
.gshotitem .gframe{width:100%;}
.gshotitem .gcap{margin:8px 2px 0;font-size:12.5px;color:var(--label2);}
.gtablewrap{overflow-x:auto;margin:4px 0 16px;border-radius:14px;border:1px solid var(--sep);}
.gtable{width:100%;border-collapse:collapse;font-size:13.5px;}
.gtable th{background:var(--fill);text-align:left;padding:9px 12px;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--label2);}
.gtable td{padding:9px 12px;border-top:1px solid var(--sep);vertical-align:top;line-height:1.45;}
.gfaq details{border:1px solid var(--sep);border-radius:14px;margin-bottom:8px;background:var(--card);overflow:hidden;}
.gfaq summary{cursor:pointer;padding:12px 14px;font-size:14.5px;font-weight:700;list-style:none;position:relative;padding-right:34px;}
.gfaq summary::-webkit-details-marker{display:none;}
.gfaq summary::after{content:'+';position:absolute;right:14px;top:9px;font-size:20px;color:var(--label2);}
.gfaq details[open] summary::after{content:'\2212';}
.gans{padding:0 14px 13px;font-size:14px;line-height:1.6;}
.gpdf .gsec{box-shadow:none;break-inside:auto;}
.gpdf .gsechead{cursor:default;}
.gpdf .gchev{display:none;}
.gpdf .gshot, .gpdf .gshots, .gpdf .gcall, .gpdf .gsteps li{break-inside:avoid;}
@media print{
  body.gprinting .navbar, body.gprinting .bottombar, body.gprinting .webrail, body.gprinting .syncnote, body.gprinting .gtools, body.gprinting .toast{display:none !important;}
  body.gprinting .gsec{box-shadow:none;break-inside:auto;}
  body.gprinting .gshot, body.gprinting .gshots, body.gprinting .gcall{break-inside:avoid;}
  body.gprinting .gchev{display:none;}
  body.gprinting .stage{min-height:0;}
}

.gpdf .gsechead{break-after:avoid;}
.gpdf .gsec{margin-bottom:16px;}
.gpdf .ghero{margin-top:0;}

/* ===== Record-view modals (see rmLayout in core.js) ===== */
.modal.rm{padding:0 !important;display:flex;flex-direction:column;overflow:hidden !important;max-height:min(88vh,860px) !important;text-align:left;}
.modal.rm.rm-narrow{width:min(94vw,460px) !important;max-width:none !important;}
.modal.rm.rm-mid{width:min(94vw,620px) !important;max-width:none !important;}
.modal.rm.rm-wide{width:min(94vw,820px) !important;max-width:none !important;}
.modal.rm .rm-head{flex:0 0 auto;display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px 24px;border-bottom:1px solid var(--sep);}
.modal.rm .rm-head h3{margin:0 !important;flex:1 1 auto;min-width:0;font-size:17px !important;font-weight:700;line-height:1.3;overflow-wrap:anywhere;padding-top:3px;}
.modal.rm .rm-x{flex:0 0 auto;width:32px;height:32px;border-radius:999px;border:none;background:var(--fill);color:var(--label2);font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.modal.rm .rm-x:hover{color:var(--label);}
.modal.rm .rm-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;padding:18px 24px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 16px;align-content:start;}
.modal.rm.rm-narrow .rm-body{grid-template-columns:1fr;}
.modal.rm .rm-body > *{margin-top:0 !important;margin-bottom:0 !important;min-width:0;}
.modal.rm .rm-body > .rm-full{grid-column:1 / -1;}
.modal.rm .rm-body > .rm-half{grid-column:auto;}
.modal.rm .rm-body > .field,.modal.rm .rm-body .rm-half .field{margin:0;}
/* bespoke forms that wrap their own fields in .formgrid get the same side-by-side layout */
.modal.rm .formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 16px;}
.modal.rm .formgrid > :not(.field){grid-column:1 / -1;}
.modal.rm .rm-body textarea{min-height:96px;}
.modal.rm .rm-foot{flex:0 0 auto;padding:12px 20px 14px 24px;border-top:1px solid var(--sep);background:var(--card);}
.modal.rm .rm-foot .savebar{margin-top:0 !important;flex-wrap:wrap;}
@media (max-width:600px){
  .center-backdrop{padding:10px;}
  .modal.rm{max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;}
  .modal.rm.rm-narrow,.modal.rm.rm-mid,.modal.rm.rm-wide{width:100% !important;}
  .modal.rm .rm-head{padding:16px 16px 12px 18px;}
  .modal.rm .rm-body{padding:14px 16px 16px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px 10px;}
  .modal.rm .rm-body input,.modal.rm .rm-body select{min-width:0;max-width:100%;}
  .modal.rm .rm-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom)) 18px;}
}

/* ===== Dashboards: clickable KPIs, severity tabs, area tiles, aligned rows ===== */
.span-5{grid-column:span 5;} .span-7{grid-column:span 7;}
@media (max-width:1180px){ .span-5,.span-7{grid-column:span 12;} }
@media (max-width:760px){ .span-5,.span-7{grid-column:auto;} }
button.kpi{font:inherit;color:var(--label);text-align:left;width:100%;cursor:pointer;}
.kpi-click{transition:transform .15s,border-color .15s;}
.kpi-click:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--blue) 40%,transparent) !important;}
.kpi .kchev{flex:none;align-self:center;font-size:24px;line-height:1;color:var(--label2);opacity:.55;}
.kpi-click:hover .kchev{opacity:1;color:var(--blue);}
.sevtabs{display:flex;gap:8px;flex-wrap:wrap;}
.sevtab{--sc:var(--blue);border:1.5px solid transparent;background:var(--fill);color:var(--label2);font:inherit;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;}
.sevtab.on{background:color-mix(in srgb,var(--sc) 14%,transparent);color:var(--sc);border-color:color-mix(in srgb,var(--sc) 35%,transparent);}
.sevtag{flex:none;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.areatiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.areatile{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;color:var(--label);background:var(--fill);border:1px solid transparent;border-radius:16px;padding:11px 12px;cursor:pointer;min-width:0;}
.areatile:hover{border-color:color-mix(in srgb,var(--blue) 40%,transparent);}
.areatile .at-t{display:flex;align-items:center;font-size:12.5px;font-weight:700;overflow-wrap:anywhere;}
.areatile .at-m{font-size:15px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere;}
.areatile .at-s{font-size:11.5px;font-weight:600;}
.dash-areas{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;}
.dash-areas > .dash-card{flex:1 1 300px;}
.dash-areas[data-cols="1"] > .dash-card{flex-basis:100%;}
.dash-areas[data-cols="2"] > .dash-card{flex-basis:calc((100% - 16px) / 2);}
.dash-areas[data-cols="3"] > .dash-card{flex-basis:calc((100% - 32px) / 3);}
@media (max-width:1180px){ .dash-areas[data-cols="3"] > .dash-card{flex-basis:calc((100% - 16px) / 2);} }
.pagetiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.pagetile{display:flex;align-items:center;gap:10px;text-align:left;font:inherit;font-size:13.5px;font-weight:600;color:var(--label);background:var(--fill);border:1px solid transparent;border-radius:16px;padding:9px 12px;cursor:pointer;min-width:0;}
.pagetile:hover{border-color:color-mix(in srgb,var(--blue) 40%,transparent);}
@media (max-width:760px){ .dash-areas{gap:12px;} .dash-areas > .dash-card{flex-basis:100%;} }
.hbar-click{cursor:pointer;border-radius:12px;}
.hbar-click:hover{background:var(--fill);}
@media (max-width:760px){ .dash-areas[data-cols] > .dash-card{flex-basis:100%;} .pagetiles{grid-template-columns:1fr 1fr;} }
button.dash-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;}
.flagstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.flagstat{--fc:var(--blue);display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:var(--label);background:color-mix(in srgb,var(--fc) 10%,var(--card));border:1px solid color-mix(in srgb,var(--fc) 28%,transparent);border-radius:16px;padding:10px 12px;cursor:pointer;min-width:0;}
.flagstat b{font-size:22px;font-weight:800;color:var(--fc);line-height:1.1;}
.flagstat span{font-size:12px;font-weight:600;color:var(--label2);overflow-wrap:anywhere;}
.flagstat.zero{background:var(--fill);border-color:transparent;}
.flagstat.zero b{color:var(--label2);}
.flagstat:hover{transform:translateY(-1px);transition:transform .15s;}

/* ===== Live selfie camera ===== */
.selfiecam{position:fixed;inset:0;z-index:200;background:rgba(10,8,20,.72);display:flex;align-items:center;justify-content:center;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));}
.selfiecam-box{width:min(420px,100%);max-height:100%;overflow:auto;background:var(--card);border-radius:24px;padding:18px 18px 12px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;}
.selfiecam-title{font-size:17px;font-weight:700;margin-bottom:12px;text-align:center;}
.selfiecam-frame{position:relative;width:100%;aspect-ratio:3/4;max-height:58vh;border-radius:18px;overflow:hidden;background:#000;}
.selfiecam-frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
.selfiecam-msg{font-size:13px;color:var(--label2);text-align:center;line-height:1.45;margin-top:10px;}
.selfiecam-msg.err{color:#D0342C;}
.selfiecam-loc{font-size:12px;color:var(--label2);text-align:center;margin-top:8px;overflow-wrap:anywhere;}
.selfiecam-privacy{font-size:11.5px;color:var(--label2);text-align:center;line-height:1.4;margin-top:8px;opacity:.85;}

/* ===== Policies & Handbook ===== */
.polcard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--label);background:var(--card);border:1px solid transparent;border-radius:20px;padding:16px;margin-bottom:12px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.polcard:hover{border-color:color-mix(in srgb,var(--blue) 35%,transparent);}
.pol-frame{position:relative;border-radius:18px;overflow:hidden;background:#fff;height:calc(100dvh - 230px);min-height:420px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pol-frame iframe{width:100%;height:100%;border:0;display:block;}
.pol-wm{position:absolute;inset:-50%;pointer-events:none;display:flex;flex-wrap:wrap;align-content:flex-start;gap:70px 90px;transform:rotate(-28deg);opacity:.11;z-index:2;}
.pol-wm span{font-size:15px;font-weight:700;color:#000;white-space:nowrap;}
[data-theme="dark"] .pol-wm span{color:#000;}
body.pol-protect, body.pol-protect *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
body.pol-protect input, body.pol-protect textarea{-webkit-user-select:text;user-select:text;}
body.pol-hide .pol-protected{filter:blur(18px);}
@media print{ body.pol-protect *{visibility:hidden !important;} body.pol-protect::after{content:'Printing is not allowed for this document.';visibility:visible;position:fixed;top:40%;left:0;right:0;text-align:center;font:600 18px sans-serif;} }
.server-stale{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));z-index:150;max-width:min(560px,calc(100vw - 24px));background:#B86E12;color:#fff;font-size:13px;font-weight:600;line-height:1.4;padding:10px 40px 10px 14px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.server-stale button{position:absolute;top:6px;right:8px;background:none;border:none;color:#fff;font-size:18px;cursor:pointer;}

/* ===== Digital ID card ===== */
/* Inter (SIL Open Font License, see fonts/Inter-LICENSE.txt), self-hosted: only downloaded when the ID is opened */
@font-face{font-family:'InterID';src:url('fonts/InterVariable.woff2') format('woff2-variations'),url('fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
.idcard{--idf:'InterID',-apple-system,BlinkMacSystemFont,'Segoe UI Variable','Segoe UI',Roboto,sans-serif;--idc-ok:#1FA463;--idc-ink:#141226;--idc-mute:#6E6886;--idc-acc:#6A4FE0;
  position:relative;overflow:hidden;max-width:380px;margin:0 auto;border-radius:28px;background:#fff;color:var(--idc-ink);font-family:var(--idf);font-feature-settings:'cv11','ss01','ss03';
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 44px rgba(40,30,90,.20);border:3px solid var(--idc-ok);-webkit-font-smoothing:antialiased;}
.idcard.idc-bad{border-color:#D0342C;} .idcard.idc-stale{border-color:#D9822B;}
.idc-wm{position:absolute;inset:-60%;display:flex;flex-wrap:wrap;align-content:flex-start;gap:26px 44px;transform:rotate(-24deg);pointer-events:none;opacity:.09;animation:idcDrift 9s linear infinite;z-index:1;}
.idc-wm span{font:800 14px/1 var(--idf);letter-spacing:.08em;color:var(--idc-ok);white-space:nowrap;}
.idc-bad .idc-wm span{color:#D0342C;} .idc-stale .idc-wm span{color:#D9822B;}
@keyframes idcDrift{ from{ transform:rotate(-24deg) translateX(0); } to{ transform:rotate(-24deg) translateX(-220px); } }
.idc-head{position:relative;z-index:2;display:flex;justify-content:center;padding:20px 16px 10px;background:linear-gradient(180deg,#F3F0FF 0%,rgba(255,255,255,0) 100%);}
.idc-head img{display:block;height:auto;}
.idc-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:6px 20px 16px;text-align:center;}
.idc-photo{width:136px;height:136px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#EEE9FF,#E3F6EE);display:flex;align-items:center;justify-content:center;font:700 44px/1 var(--idf);letter-spacing:-.02em;color:var(--idc-acc);border:4px solid #fff;box-shadow:0 0 0 2px rgba(106,79,224,.18),0 8px 22px rgba(20,18,38,.14);}
.idc-photo img{width:100%;height:100%;object-fit:cover;}
.idc-name{font-size:27px;font-weight:750;letter-spacing:-.025em;line-height:1.1;margin-top:14px;overflow-wrap:anywhere;}
.idc-title{font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--idc-acc);margin-top:7px;}
.idc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:16px;}
.idc-grid > div{background:#F6F4FC;border:1px solid #ECE8F8;border-radius:16px;padding:10px 12px;text-align:left;}
.idc-l{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--idc-mute);}
.idc-v{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-top:4px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.idc-status{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 16px 0;padding:13px 12px;border-radius:18px;
  background:linear-gradient(135deg,#23B26D,#179457);color:#fff;font:800 19px/1.1 var(--idf);letter-spacing:.24em;text-align:center;box-shadow:0 8px 20px rgba(23,148,87,.28);}
.idc-bad .idc-status{background:linear-gradient(135deg,#E0493F,#C22A22);box-shadow:0 8px 20px rgba(194,42,34,.28);font-size:14.5px;letter-spacing:.04em;}
.idc-stale .idc-status{background:linear-gradient(135deg,#E8963A,#C97716);box-shadow:0 8px 20px rgba(201,119,22,.28);font-size:14.5px;letter-spacing:.04em;}
.idc-dot{width:11px;height:11px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.25);animation:idcPulse 1s ease-in-out infinite;}
@keyframes idcPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }
.idc-clock{position:relative;z-index:2;text-align:center;margin:14px 12px 2px;}
.idc-time{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.idc-date{font-size:13px;font-weight:550;color:var(--idc-mute);margin-top:5px;letter-spacing:.01em;}
.idc-ver{position:relative;z-index:2;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--idc-mute);margin:8px 12px 18px;}

/* ===== HR dashboard ===== */
.hr-hero{display:grid;grid-template-columns:1.1fr 1.2fr 1.3fr;gap:14px;margin-bottom:14px;}
@media (max-width:900px){ .hr-hero{grid-template-columns:1fr;} }
.hr-hero > *{background:var(--card);border-radius:22px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.05);border:1px solid transparent;min-width:0;}
.hr-hero-main{background:linear-gradient(135deg,#6A4FE0,#8E6BF2) !important;color:#fff;}
.hr-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label2);}
.hr-hero-main .hr-eyebrow{color:rgba(255,255,255,.8);}
.hr-bigrow{display:flex;align-items:baseline;gap:10px;margin-top:6px;}
.hr-big{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.hr-big-lbl{font-size:15px;font-weight:600;opacity:.9;}
.hr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.hr-chip{font-size:12.5px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);}
.hr-ringbox{display:flex;align-items:center;gap:16px;text-align:left;font:inherit;color:var(--label);cursor:pointer;}
.hr-ringbox:hover{border-color:color-mix(in srgb,var(--blue) 35%,transparent);}
.hr-ringwrap{position:relative;width:84px;height:84px;flex:none;}
.hr-ring{width:84px;height:84px;transform:rotate(-90deg);}
.hr-ring-bg{fill:none;stroke:var(--fill);stroke-width:9;}
.hr-ring-fg{fill:none;stroke-width:9;stroke-linecap:round;}
.hr-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;letter-spacing:-.02em;}
.hr-ring-main{font-size:18px;font-weight:750;letter-spacing:-.01em;margin-top:4px;}
.hr-ring-sub{font-size:12.5px;color:var(--label2);margin-top:3px;}
.hr-search{position:relative;display:flex;flex-direction:column;gap:8px;}
.hr-search input{width:100%;box-sizing:border-box;border:1px solid var(--sep);border-radius:14px;padding:11px 14px;font:inherit;font-size:15px;background:var(--bg);color:var(--label);}
.hr-results{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:auto;}
.hr-res{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;border-radius:12px;padding:6px 8px;text-align:left;font:inherit;color:var(--label);cursor:pointer;}
.hr-res:hover{background:var(--fill);}
.hr-res-t{min-width:0;font-size:14px;font-weight:600;} .hr-res-s{font-size:12px;font-weight:500;color:var(--label2);}
.hr-res-empty{font-size:13px;color:var(--label2);padding:6px 4px;}
.hr-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px;}
@media (max-width:1100px){ .hr-actions{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:640px){ .hr-actions{grid-template-columns:1fr 1fr;} }
.hr-act{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid transparent;border-radius:18px;padding:14px;text-align:left;font:inherit;color:var(--label);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05);min-width:0;}
.hr-act:hover{border-color:color-mix(in srgb,var(--blue) 35%,transparent);transform:translateY(-1px);}
.hr-act .ticon{flex:none;}
.hr-act-t{flex:1;min-width:0;} .hr-act-n{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal;} .hr-act-s{font-size:12px;color:var(--label2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hr-row{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;border-top:0.5px solid var(--sep);padding:10px 2px;text-align:left;font:inherit;color:var(--label);cursor:pointer;}
.hr-row:first-of-type{border-top:none;}
.hr-row:hover .hr-row-n{color:var(--blue);}
.hr-row-t{flex:1;min-width:0;} .hr-row-n{font-size:14.5px;font-weight:650;} .hr-row-s{font-size:12.5px;color:var(--label2);margin-top:2px;overflow-wrap:anywhere;}
.hr-tag{flex:none;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.hr-tag-red{color:#C22A22;background:color-mix(in srgb,#E5484D 15%,transparent);} .hr-tag-amber{color:#B0620E;background:color-mix(in srgb,#EBA043 18%,transparent);}
.hr-prog{height:6px;border-radius:999px;background:var(--fill);overflow:hidden;margin-top:6px;max-width:260px;} .hr-prog i{display:block;height:100%;border-radius:999px;}
.hr-allok{display:flex;align-items:center;gap:10px;padding:18px 4px;font-size:14.5px;font-weight:600;color:#1FA463;} .hr-allok svg{width:22px;height:22px;}
.hr-more{margin-top:8px;background:none;border:none;color:var(--blue);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:6px 2px;}
.hr-seg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:6px;}
@media (max-width:760px){ .hr-seg-grid{grid-template-columns:1fr;} }
.hr-seg-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label2);margin-bottom:8px;}
.hr-seg-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:3px;background:transparent;} .hr-seg-bar i{display:block;height:100%;border-radius:999px;min-width:6px;}
.hr-seg-lg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:13px;color:var(--label2);}
.hr-seg-lg span{display:inline-flex;align-items:center;gap:6px;} .hr-seg-lg i{width:10px;height:10px;border-radius:3px;display:inline-block;} .hr-seg-lg b{color:var(--label);font-weight:750;}
.hr-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.hr-link{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:var(--fill);color:var(--label);text-decoration:none;font-size:14px;font-weight:600;}
.hr-link:hover{color:var(--blue);} .hr-link-ar{color:var(--blue);}