/* =====================================================================
   ACES Paystub — styling

   The pay-period sheet, moved into this portal from Google Apps Script.
   The shell is deliberately not its own: the bar, the card and the
   left-hand column all wear the Schedule tab's classes, so the three tabs
   sit at identical heights and cannot drift apart. What is here is only
   what belongs to this table.
   ===================================================================== */

  /* ---------- the pay-period picker beside the table ---------- */
  .ps-grid{display:grid;grid-template-columns:206px minmax(0,1fr);gap:14px;align-items:start;}
  /* the heading's height is set by psFit, to the table's own header */
  .ps-perhead{padding:0 13px;height:49px;}
  .ps-main{min-width:0;}
  .ps-wrap{min-width:0;}

  /* one button per fortnight: the two week spans with "and" between them */
  .ps-per{display:block;width:100%;text-align:center;font-family:inherit;cursor:pointer;
    border:1px solid var(--line);border-left:3px solid var(--line);border-radius:7px;
    background:#FBFCFD;padding:10px 7px;
    transition:border-color .13s,background .13s;}
  .ps-per + .ps-per{margin-top:6px;}
  .ps-per b{display:block;font-size:12px;font-weight:700;color:var(--ink);line-height:1.45;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ps-per small{display:block;font-size:10px;font-weight:400;color:var(--muted);
    line-height:1.5;}
  /* the headcount sits a little apart from the two week spans above it */
  .ps-per small.crew{margin-top:5px;}
  /* the period you are on keeps its navy under the pointer, the way the
     selected week does in the Schedule list */
  .ps-per:not(.on):hover:enabled{background:var(--amber-100);border-color:var(--amber);
    border-left-color:var(--amber);}
  .ps-per:disabled{opacity:.5;cursor:default;}
  .ps-per.has{background:#EDF6DF;border-left-color:#7CB342;border-color:#CFE6A8;}
  .ps-per.has:not(.on):hover{background:var(--amber-100);border-color:var(--amber);
    border-left-color:var(--amber);}
  .ps-per.on{background:var(--navy);border-color:var(--navy);border-left-color:var(--amber);}
  .ps-per.on b{color:#fff;}
  .ps-per.on small{color:var(--amber);font-weight:700;}

  /* ---------- the paystub table ---------- */
  .ps-tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:1150px;
    table-layout:fixed;font-size:12.5px;}
  .ps-tbl th,.ps-tbl td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:0;vertical-align:middle;}
  /* the last column keeps its right-hand border, so the table is closed off
     against the scrollbar instead of bleeding into it */
  .ps-tbl th:last-child,.ps-tbl td:last-child{border-right:1px solid var(--line);}

  /* two stacked sticky header rows, the same 49px as Schedule's one row */
  .ps-tbl thead th{position:sticky;z-index:3;background:var(--navy);color:#fff;
    text-align:center;white-space:nowrap;font-weight:700;}
  .ps-tbl thead tr:first-child th{top:0;padding:0 10px;font-size:12px;
    letter-spacing:.5px;text-transform:uppercase;height:25px;box-sizing:border-box;}
  .ps-tbl thead tr:last-child th{top:25px;padding:0 6px;font-size:11px;
    letter-spacing:.3px;background:var(--navy-600);height:24px;box-sizing:border-box;}
  .ps-tbl thead th.num{width:46px;}
  .ps-tbl thead th.name{width:150px;}
  .ps-tbl thead th.wk{width:64px;}
  .ps-tbl thead th.hcol{width:58px;}
  .ps-tbl thead th.rcol{width:66px;}
  .ps-tbl thead th em{font-style:normal;font-weight:600;color:#B9C9DD;}
  .ps-tbl thead tr:last-child th.abh{background:#FF9900;color:#000;}
  .ps-tbl thead th.abh em{color:#000;}

  .ps-tbl td{text-align:center;padding:1px 6px;color:var(--navy);font-weight:700;line-height:1.15;}
  .ps-tbl td.num{color:var(--muted);font-weight:700;}
  .ps-tbl td.name{text-align:left;padding:4px 10px;color:var(--ink);font-weight:600;
    white-space:normal;line-height:1.3;overflow-wrap:anywhere;word-break:break-word;}
  .ps-tbl td.wk{font-size:10.5px;font-weight:800;letter-spacing:.4px;color:var(--muted);
    text-transform:uppercase;}
  .ps-tbl td.off{color:#B03A2E;font-weight:700;font-size:11px;}
  /* an AB day carries its orange straight from the timesheet; GL stays plain */
  .ps-tbl td.ab{background:#FF9900;color:#000;}
  /* the cells that span both of a worker's weeks - his number, his name and
     his two rates - sit against a slightly lifted ground so the pair of rows
     reads as one person */
  .ps-tbl td.pv{background:#FBFCFD;}
  /* The portal's own tbody tr:hover is unscoped and catches a single row —
     but a worker is two rows here, and half of him lighting up reads as a
     fault. That rule is switched off and the pair is lit together instead.
     Nothing on this table is clickable, so the pointer stays an arrow. */
  .ps-tbl tbody tr{cursor:default;}
  .ps-tbl tbody tr:hover{background:transparent;}
  .ps-tbl tbody tr.hot td{background:#EEF1F6;}
  .ps-tbl tbody tr.hot td.pv{background:#E3E9F1;}
  .ps-tbl tbody tr.hot td.ab{background:#E68A00;}

  /* the client the hours belong to, tucked under the number */
  .ps-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;}
  .ps-tbl td.ab .cl{color:#000;}

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

  /* the full-screen veil while the invoices are numbered and built */
  .ps-veil{position:fixed;inset:0;z-index:90;display:none;
    align-items:center;justify-content:center;background:rgba(16,43,79,.28);}
  .ps-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);}
  .ps-veilspin{width:22px;height:22px;border:3px solid var(--line);
    border-top-color:var(--amber);border-radius:50%;animation:psspin .7s linear infinite;}

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

  /* At the right-hand end of the strip, like the other print buttons. Said
     with an id and !important because this button follows the Payroll search
     box in the markup, and the rule that tightens a printer up against a
     search box would otherwise take its auto margin away. */
  #psFind{margin-left:auto !important;}
  #psPrintBtn{margin-left:6px !important;}
  #psPrintBtn:disabled{opacity:.55;cursor:not-allowed;}

  @media (max-width:1080px){
    .ps-grid{grid-template-columns:1fr;}
  }