/* =====================================================================
   ACES Payroll — styling

   The Payroll page, moved into this portal from Google Apps Script.
   Three things changed from the version it came from:

     · the palette it expects (--amber, --white, --danger, --navy-600) is
       already declared by dispatch.css, which loads before this
     · the bar's sticky offset reads --dbtop, which dispatch.js measures
       from the real header, instead of the hard 104px
     · main's top padding is 14px here, not 32px, so the bar's negative
       margin matches that
   ===================================================================== */

  /* The bar carries the Schedule tab's own class as well and adds nothing of
     its own, so its height, its sticky offset and the space under it are
     literally the Schedule bar's — change that rule and both tabs follow. */
  .pr-msg{font-size:13px;font-weight:600;padding:7px 12px;border-radius:7px;display:none;}
  .pr-msg.err{display:block;background:#FDEDEB;color:var(--danger);border:1px solid #F5C6C0;}

  .pr-print,.pr-stub{width:52px;height:31px;padding:0;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:8px;background:var(--white);
    color:var(--navy);cursor:pointer;font-family:inherit;
    box-shadow:0 2px 6px rgba(16,43,79,.06);
    transition:background .13s,border-color .13s,color .13s;}
  .pr-print:hover,.pr-stub:hover{background:var(--amber-100);border-color:var(--amber);}
  .pr-print svg,.pr-stub svg{width:20px;height:20px;display:block;}

  /* the paystub and print buttons are the Schedule printer's twins — same
     class, nothing of their own, so size and placement can never drift apart */
  #prStubBtn:disabled,#prPrintBtn:disabled{opacity:.55;cursor:not-allowed;}
  /* the printer sits right beside the paystub button rather than taking its
     own share of the space left over — the strip's 2px gap is all there is */
  #prPrintBtn{margin-left:0;}
  /* Edit / Save / Cancel ride in the tab strip too, so the bar under the
     tabs holds nothing but the message — which is what makes the WEEKS
     panel and the table start exactly where the Schedule ones do */
  .tabs .pr-edit,.tabs .pr-save,.tabs .pr-cancel{align-self:center;margin-left:6px;}

  /* ---------- the week picker beside the table ---------- */
  .pr-grid{display:grid;grid-template-columns:206px minmax(0,1fr);gap:14px;align-items:start;}
  /* WEEKS and the legend travel as one column, so the legend can sit at the
     foot of the table rather than under it */
  .pr-left{display:flex;flex-direction:column;gap:9px;min-width:0;}

  .pr-weeks{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
    background:var(--white);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 2px 6px rgba(16,43,79,.06);overflow:hidden;}
  .pr-weekhead{background:#F7F9FC;border-bottom:1px solid var(--line);padding:10px 13px;
    font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--navy);}
  .pr-weeklist{flex:1 1 auto;min-height:0;overflow-y:auto;padding:9px;
    display:flex;flex-direction:column;gap:5px;
    scrollbar-width:thin;scrollbar-color:#C6D2E0 transparent;}
  .pr-weeklist::-webkit-scrollbar{width:9px;}
  .pr-weeklist::-webkit-scrollbar-track{background:transparent;}
  .pr-weeklist::-webkit-scrollbar-thumb{background-color:#C6D2E0;border-radius:10px;
    border:4px solid transparent;background-clip:content-box;min-height:28px;}

  .pr-week{display:block;width:100%;text-align:center;font-family:inherit;cursor:pointer;
    position:relative;
    border:1px solid var(--line);border-left:3px solid var(--line);border-radius:7px;
    background:#FBFCFD;padding:7px 9px 7px 7px;
    transition:border-color .13s,background .13s;}

  /* the little button in the tab's corner that edits the note */
  .pr-wkbtn{position:absolute;right:4px;bottom:3px;width:17px;height:17px;
    display:flex;align-items:center;justify-content:center;border-radius:5px;
    color:#A9B6C6;cursor:pointer;}
  .pr-wkbtn:hover{color:#B0730A;background:rgba(245,166,35,.18);}
  .pr-wkbtn svg{width:12px;height:12px;display:block;}
  .pr-week.on .pr-wkbtn{color:#B9C9DD;}
  .pr-week.on .pr-wkbtn:hover{color:#fff;background:rgba(255,255,255,.16);}
  .pr-week:hover{border-color:var(--amber);border-left-color:var(--amber);background:var(--amber-100);}
  .pr-week b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.45;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pr-week small{display:block;font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.4;}
  .pr-week.has{background:#EDF6DF;border-left-color:#7CB342;border-color:#CFE6A8;}
  .pr-week.has:not(.on):hover{background:var(--amber-100);border-color:var(--amber);border-left-color:var(--amber);}
  .pr-week.now{border-left-color:var(--amber);}
  .pr-week.now small{color:#B0730A;}
  .pr-week.on{background:var(--navy);border-color:var(--navy);border-left-color:var(--amber);}
  .pr-week.on b{color:#fff;}
  .pr-week.on small{color:var(--amber);}

  /* the week's note, shared with Schedule — editable here too */
  .pr-wknote{margin:5px 1px 1px;font-size:10.5px;font-weight:600;color:var(--muted);
    line-height:1.45;text-align:center;padding:6px 12px;border-radius:8px;
    background:rgba(16,43,79,.07);
    white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
  .pr-wknote[contenteditable="true"]{outline:none;background:var(--white);
    box-shadow:inset 0 0 0 1.5px var(--amber);cursor:text;min-height:15px;}
  .pr-week.on .pr-wknote{color:#DCE6F2;background:rgba(255,255,255,.09);}
  .pr-week.on .pr-wknote[contenteditable="true"]{color:var(--ink);background:var(--white);}

  /* ---------- the payroll table ---------- */
  .pr-main{min-width:0;}

  /* the legend under the table, same as Schedule */
  /* the legend is the Schedule tab's own, class and all — the one thing it
     is told here is not to stretch inside the left column */
  .pr-legend{flex:none;margin-top:auto;align-items:flex-end;}

  /* the height, the border, the shadow and the scrollbar all come from
     .sb-wrap, which this card also wears — so the table stands exactly as
     tall as the Schedule one and follows it if that rule ever changes */
  .pr-wrap{min-width:0;}
  .pr-tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:1150px;
    table-layout:fixed;font-size:12.5px;}
  .pr-tbl th,.pr-tbl td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:0;vertical-align:middle;}
  .pr-tbl th:last-child,.pr-tbl td:last-child{border-right:none;}

  /* two stacked sticky header rows */
  .pr-tbl thead th{position:sticky;z-index:3;background:var(--navy);color:#fff;
    text-align:center;white-space:nowrap;font-weight:700;}
  .pr-tbl thead tr:first-child th{top:0;padding:8px 10px;font-size:13.5px;
    letter-spacing:.6px;text-transform:uppercase;height:33px;box-sizing:border-box;}
  .pr-tbl thead tr:last-child th{top:33px;padding:6px 6px;font-size:12.5px;
    letter-spacing:.4px;background:var(--navy-600);height:31px;box-sizing:border-box;}
  .pr-tbl thead th.name{width:170px;}
  .pr-tbl thead th.hcol{width:60px;}
  .pr-tbl thead th.pay{width:120px;background:var(--navy);}
  .pr-tbl thead th em{font-style:normal;font-weight:600;color:#B9C9DD;}
  /* the AB columns wear the AB orange, in both the HOURS and RATE groups */
  .pr-tbl thead tr:last-child th.abh{background:#FF9900;color:#000;}
  .pr-tbl thead th.abh em{color:#000;}

  .pr-tbl td{text-align:center;padding:1px 6px;color:var(--navy);font-weight:700;line-height:1.15;}
  .pr-tbl td.name{text-align:left;padding:1px 10px;color:var(--ink);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pr-tbl td.off{color:#B03A2E;font-weight:700;font-size:11px;}
  /* an AB day carries its orange straight from the timesheet; GL stays plain */
  .pr-tbl td.ab{background:#FF9900;color:#000;}

  /* the client the hours belong to, tucked under the number — a long name
     wraps onto more lines rather than being cut off */
  .pr-tbl td .cl{font-size:7px;font-weight:700;line-height:1.15;margin-top:0;
    letter-spacing:.3px;color:var(--muted);
    white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
  .pr-tbl td.ab .cl{color:#000;}

  /* the edit-rates buttons in the bar */
  .pr-edit,.pr-cancel{height:31px;width:79px;padding:0;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:8px;background:var(--white);
    color:var(--navy);cursor:pointer;font-family:inherit;
    font-size:13px;font-weight:800;letter-spacing:.4px;
    box-shadow:0 2px 6px rgba(16,43,79,.06);
    transition:background .13s,border-color .13s,color .13s;}
  .pr-edit:hover,.pr-cancel:hover{background:var(--amber-100);border-color:var(--amber);}
  .pr-save{height:31px;padding:0 16px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    border:none;border-radius:8px;
    background:linear-gradient(145deg,#34A85A,#1E7A45);
    color:#fff;cursor:pointer;font-family:inherit;
    font-size:13px;font-weight:800;letter-spacing:.4px;
    box-shadow:0 4px 12px rgba(30,122,69,.28);}
  .pr-save:hover{filter:brightness(1.07);}

  /* the strip that sits on top of the card while rates are being edited */
  .pr-editbar{display:none;align-items:center;gap:7px;
    background:linear-gradient(145deg,#34A85A,#1E7A45);color:#fff;
    border:1px solid #1E7A45;border-bottom:none;
    border-radius:12px 12px 0 0;padding:6px 13px;
    font-size:11.5px;font-weight:800;letter-spacing:.2px;}
  .pr-editbar.on{display:flex;}

  /* while editing, the whole row of the active cell lights up */
  .pr-wrap.editmode tr.hot td:not(.ab){background:#EFE7FB;}
  .pr-wrap.editmode tr.hot .pr-rate{background:#EFE7FB;}
  .pr-wrap.editmode tr.hot .pr-rate:focus{background:var(--white);}

  /* the card itself is visibly armed */
  .pr-wrap.editmode{border-color:#1E7A45;border-radius:0 0 12px 12px;
    box-shadow:0 0 0 2px rgba(30,122,69,.35),0 2px 6px rgba(16,43,79,.06);}
  /* outside edit mode the rate boxes are just numbers — not clickable */
  .pr-wrap:not(.editmode) .pr-rate{pointer-events:none;}
  .pr-wrap.editmode .pr-rate{background:#FFFBF2;}
  .pr-wrap.editmode .pr-rate:focus{background:var(--white);}

  /* the NOTES box on each worker's row — free text, saved with the rates */
  .pr-tbl thead th.pnote{width:140px;background:var(--navy);}
  .pr-tbl td.notecell{padding:0;}
  .pr-note{width:100%;box-sizing:border-box;border:none;background:transparent;
    font-family:inherit;font-size:11px;color:var(--ink);padding:3px 6px;outline:none;
    text-align:center;}
  .pr-wrap:not(.editmode) .pr-note{pointer-events:none;}
  .pr-wrap.editmode .pr-note{background:#FFFBF2;}
  .pr-wrap.editmode .pr-note:focus{background:var(--white);
    box-shadow:inset 0 0 0 1.5px var(--amber);}

  /* while rates are being edited the tabs are parked, and look it */
  #tabs.ratelock .tab{opacity:.55;cursor:not-allowed;}
  .lnk.ratelock{opacity:.55;cursor:not-allowed;}
  .pr-print:disabled,.pr-stub:disabled{opacity:.55;cursor:not-allowed;}
  .pr-print:disabled:hover,.pr-stub:disabled:hover{background:var(--white);border-color:var(--line);}
  .sb-weeks.ratelock .sb-wkbtn{pointer-events:none;}

  /* the full-screen veil while the rates are written */
  .pr-veil{position:fixed;inset:0;z-index:90;display:none;
    align-items:center;justify-content:center;background:rgba(16,43,79,.28);}
  .pr-veilbox{display:flex;align-items:center;gap:12px;
    background:var(--white);border-radius:12px;padding:18px 26px;
    font-size:14px;font-weight:800;color:var(--navy);
    box-shadow:0 12px 40px rgba(16,43,79,.35);}
  .pr-veilspin{width:22px;height:22px;border:3px solid var(--line);
    border-top-color:var(--amber);border-radius:50%;animation:prspin .7s linear infinite;}

  /* a typed-in pay rate — plain in the cell, amber-ringed while editing */
  .pr-rate{width:100%;height:100%;min-height:24px;box-sizing:border-box;
    border:none;background:transparent;text-align:center;font-family:inherit;
    font-size:12.5px;font-weight:700;color:var(--navy);padding:1px 4px;cursor:text;}
  .pr-rate::placeholder{color:#C3CCD8;font-weight:600;}
  .pr-rate:hover{background:#F7F9FC;}
  .pr-rate:focus{outline:none;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--amber);}
  .pr-tbl td.ratecell{padding:0;}

  /* the floating tag naming the client — appears over whichever cell is hovered */
  .pr-tip{position:fixed;z-index:60;pointer-events:none;
    background:var(--navy);color:#fff;font-size:11px;font-weight:700;
    letter-spacing:.3px;padding:6px 11px;border-radius:7px;
    box-shadow:0 4px 14px rgba(16,43,79,.28);white-space:nowrap;
    opacity:0;transform:translate(-50%,-4px);
    transition:opacity .12s ease,transform .12s ease;}
  .pr-tip.show{opacity:1;transform:translate(-50%,0);}

  /* the pay-period picker behind the Print paystub button */
  .pr-stubmodal{position:fixed;inset:0;z-index:92;display:none;
    align-items:center;justify-content:center;background:rgba(16,43,79,.28);}
  .pr-stubmodal.show{display:flex;}
  .pr-stubsheet{background:var(--white);border-radius:12px;width:380px;max-width:92vw;
    box-shadow:0 12px 40px rgba(16,43,79,.35);overflow:hidden;}
  .pr-stubhead{display:flex;align-items:center;justify-content:space-between;
    background:var(--navy);color:#fff;padding:12px 16px;font-size:14px;font-weight:800;}
  .pr-stubx{border:none;background:none;color:#fff;font-size:18px;cursor:pointer;
    line-height:1;padding:2px 4px;font-family:inherit;}
  .pr-stublist{padding:14px;display:flex;flex-direction:column;gap:7px;
    max-height:52vh;overflow-y:auto;scrollbar-width:thin;
    scrollbar-color:#C6D2E0 transparent;}
  .pr-stubbtn{display:block;width:100%;text-align:center;font-family:inherit;
    font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;
    border:1px solid var(--line);border-left:3px solid var(--line);border-radius:7px;
    background:#FBFCFD;padding:9px;transition:border-color .13s,background .13s;}
  .pr-stubbtn:hover:enabled{background:var(--amber-100);border-color:var(--amber);
    border-left-color:var(--amber);}
  .pr-stubbtn:disabled{opacity:.5;cursor:default;}

  .pr-tbl td.pr-empty{text-align:center;vertical-align:middle;padding:18px;
    color:var(--muted);font-weight:400;font-size:13.5px;line-height:1.7;}
  .pr-tbl.empty{height:100%;}

  @keyframes prspin{to{transform:rotate(360deg)}}
  .pr-spin{display:none;margin:70px auto;width:30px;height:30px;border:3px solid var(--line);
    border-top-color:var(--amber);border-radius:50%;animation:prspin .7s linear infinite;}
  .pr-wrap.loading .pr-spin{display:block;}
  .pr-wrap.loading .pr-tbl{display:none;}
  .pr-wrap.busy{opacity:.5;transition:opacity .12s;}

  @media (max-width:1080px){
    .pr-grid{grid-template-columns:1fr;}
    .pr-weeklist{max-height:220px;}
  }