/* =====================================================================
   ACES Schedule — styling

   The Pay Period grid, moved into this portal. Three things changed from
   the Apps Script version it came from:

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

  /* -14px cancels main's 14px top padding so the bar rests where it sticks */
  .sb-bar{position:sticky;top:var(--dbtop,104px);z-index:30;background:var(--bg);
    display:flex;align-items:center;gap:14px;margin:-14px 0 0;padding:14px 0 0;min-height:0;}
  .sb-bar > span:first-child{display:none;}
  .sb-msg.err{margin-bottom:10px;}
  .sb-msg{font-size:13px;font-weight:600;padding:7px 12px;
    border-radius:7px;display:none;}
  .sb-msg.err{display:block;background:#FDEDEB;color:var(--danger);border:1px solid #F5C6C0;}
  /* the print button lives in the tab strip, at its right-hand end */
  .tabs .tabs-print{margin-left:auto;margin-right:14px;align-self:center;width:44px;height:28px;
    padding:0;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:7px;background:var(--white);
    color:var(--navy);cursor:pointer;font-family:inherit;
    box-shadow:0 2px 6px rgba(16,43,79,.06);}
  .tabs .tabs-print:hover{background:var(--amber-100);border-color:var(--amber);}
  .tabs .tabs-print svg{width:18px;height:18px;display:block;}
  /* ---------- the week picker beside the grid ---------- */
  .sb-grid{display:grid;grid-template-columns:206px minmax(0,1fr);gap:14px;align-items:start;}
  .sb-weeks{position:sticky;top:var(--dbtop2,187px);display:flex;flex-direction:column;
    background:var(--white);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 2px 6px rgba(16,43,79,.06);overflow:hidden;}
  .sb-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);}
  /* fills whatever is left under the heading, so the panel can be sized as a whole */
  .sb-weeklist{flex:1 1 auto;min-height:0;overflow-y:auto;padding:9px;
    display:flex;flex-direction:column;gap:2px;
    scrollbar-width:thin;scrollbar-color:#C6D2E0 transparent;}
  .sb-weeklist::-webkit-scrollbar{width:9px;}
  .sb-weeklist::-webkit-scrollbar-track{background:transparent;}
  .sb-weeklist::-webkit-scrollbar-thumb{background-color:#C6D2E0;border-radius:10px;
    border:4px solid transparent;background-clip:content-box;min-height:28px;}
  .sb-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:5px 9px 5px 7px;
    transition:border-color .13s,background .13s;}
  .sb-week.pp1{margin-bottom:10px;}   /* first week of a pay period: space before the earlier period */
  /* the note pinned to a week's tab, and the little button that edits it */
  .sb-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;}
  .sb-wkbtn:hover{color:#B0730A;background:rgba(245,166,35,.18);}
  .sb-wkbtn svg{width:12px;height:12px;display:block;}
  .sb-week.on .sb-wkbtn{color:#B9C9DD;}
  .sb-week.on .sb-wkbtn:hover{color:#fff;background:rgba(255,255,255,.16);}
  /* the note sits on its own softly lifted panel inside the tab */
  .sb-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;}
  .sb-wknote[contenteditable="true"]{outline:none;background:var(--white);
    box-shadow:inset 0 0 0 1.5px var(--amber);cursor:text;min-height:15px;}
  .sb-week.on .sb-wknote{color:#DCE6F2;background:rgba(255,255,255,.09);}
  .sb-week.on .sb-wknote[contenteditable="true"]{color:var(--ink);background:var(--white);}
  .sb-week:hover{border-color:var(--amber);border-left-color:var(--amber);background:var(--amber-100);}
  .sb-week b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sb-week small{display:block;font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.4;}
  .sb-week.has{background:#EDF6DF;border-left-color:#7CB342;border-color:#CFE6A8;}
  .sb-week.has:not(.on):hover{background:var(--amber-100);border-color:var(--amber);border-left-color:var(--amber);}
  .sb-week.now{border-left-color:var(--amber);}
  .sb-week.now small{color:#B0730A;}
  .sb-week.on{background:var(--navy);border-color:var(--navy);border-left-color:var(--amber);}
  .sb-week.on b,.sb-week.on small{color:#fff;}
  .sb-week.on small{color:var(--amber);}
  /* ---------- the legend under the grid ---------- */
  .sb-main{min-width:0;}
  .sb-legend{display:flex;align-items:center;gap:18px;margin:9px 0 0;
    font-size:11px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;
    color:var(--muted);}
  .sb-legend span{display:inline-flex;align-items:center;gap:7px;}
  .sb-legend i{width:24px;height:12px;border-radius:3px;
    border:1px solid var(--line);flex:none;}
  .sb-legend i.ab{background:#FF9900;border-color:#E08800;}
  .sb-legend i.gl{background:var(--white);}
  .sb-legend i.unv{background:#FDECEC;border-color:#F3B4B4;}
  .sb-legend i.ts{background:var(--white);box-shadow:inset 0 -2px 0 #2b7de9;}
  /* ---------- the grid ---------- */
  .sb-wrap{background:var(--white);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 2px 6px rgba(16,43,79,.06);overflow:auto;position:relative;min-width:0;
    height:calc(100vh - 236px);
    scrollbar-width:thin;scrollbar-color:#C6D2E0 transparent;}
  .sb-wrap::-webkit-scrollbar{width:9px;height:9px;}
  .sb-wrap::-webkit-scrollbar-track{background:transparent;}
  .sb-wrap::-webkit-scrollbar-thumb{background-color:#C6D2E0;border-radius:10px;
    border:4px solid transparent;background-clip:content-box;min-height:28px;}
  .sb-tbl{border-collapse:separate;border-spacing:0;width:auto;min-width:100%;
    table-layout:fixed;font-size:12.5px;}
  /* whole-pixel column widths: a 1px line on a half-pixel edge blurs to two */
  .sb-tbl thead th{width:118px;}
  .sb-tbl thead th.hrs{width:52px;}
  .sb-tbl th,.sb-tbl td{border:none !important;
    border-right:1px solid var(--line) !important;border-bottom:1px solid var(--line) !important;
    padding:0;vertical-align:middle;}
  .sb-tbl th:last-child,.sb-tbl td:last-child{border-right:1px solid var(--line) !important;}
  .sb-tbl thead th{position:sticky;top:0;z-index:3;background:var(--navy);color:#fff;
    padding:9px 6px;font-size:11.5px;font-weight:700;letter-spacing:.2px;
    text-align:center;white-space:normal;text-transform:none;line-height:1.3;}
  .sb-tbl thead th.hrs{text-align:center;width:52px;color:#B9C9DD;font-size:10.5px;
    letter-spacing:.5px;text-transform:uppercase;}
  .sb-tbl thead th.tot{text-align:center;width:64px;background:var(--navy-600);}
  .sb-tbl thead th.stat{text-align:center;width:150px;background:var(--navy-600);
    font-size:10.5px;letter-spacing:.5px;}
  .sb-tbl td.stat{width:150px;text-align:center;}
  .sb-st{width:15px;height:15px;accent-color:var(--navy);cursor:pointer;vertical-align:middle;}
  .sb-stx{width:100%;box-sizing:border-box;border:none;background:transparent;
    font-family:inherit;font-size:11px;color:var(--ink);padding:3px 6px;outline:none;}
  /* the portal styles every text box and header corner as rounded; not here */
  .sb-tbl input.sb-stx{border:none !important;border-radius:0 !important;
    box-shadow:none !important;outline:none !important;
    background:transparent;height:auto;min-height:0;line-height:1.4;}
  .sb-tbl td.stat{padding:0 !important;}
  .sb-tbl td.stat input.sb-stx{display:block;width:100%;height:100%;min-height:25px;
    margin:0;padding:4px 6px;}
  .sb-tbl input.sb-stx:focus{background:transparent;box-shadow:none !important;}
  .sb-tbl td.stat:focus-within{background:#FFF9EC;position:relative;z-index:2;
    border-right-color:var(--amber) !important;border-bottom-color:var(--amber) !important;
    box-shadow:-1px 0 0 0 var(--amber), 0 -1px 0 0 var(--amber);}
  .sb-tbl th,.sb-tbl td,.sb-tbl th:first-child,.sb-tbl th:last-child,
  .sb-tbl td:first-child,.sb-tbl td:last-child,
  .sb-tbl tr:first-child td,.sb-tbl tr:last-child td{border-radius:0 !important;}
  .sb-tbl input.sb-stx:focus{background:#FFF9EC;box-shadow:inset 0 0 0 1.5px var(--amber);}
  .sb-stx[readonly]{pointer-events:none;}
  .sb-tbl textarea.sb-stx{display:block;width:100%;min-height:26px;box-sizing:border-box;resize:none;overflow:hidden;
    border:none !important;border-radius:0 !important;box-shadow:none !important;outline:none !important;
    background:transparent;font-family:inherit;font-size:11px;line-height:1.35;color:var(--ink);
    padding:5px 8px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;}
  .sb-tbl textarea.sb-stx:focus{background:transparent;}
  .sb-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;}
  .sb-tip.show{opacity:1;transform:translate(-50%,0);}
  .sb-tbl tr.done td:not(.abmark):not(.dayoff){background:#EAF6EE;}
  .sb-cli td{background:#7AD694;border-top:1px solid #BFE3CC;}
  .sb-cli .sb-name{padding:6px 10px;font-weight:800;color:#14532D;font-size:11.5px;
    letter-spacing:.3px;line-height:1.3;
    white-space:normal;overflow:hidden;max-width:1px;}
  .sb-cli td.blank{background:var(--white);border-top-color:var(--line);}
  .sb-cli td.stat{background:var(--white);border-top-color:var(--line);}
  .sb-cli td.tot{background:var(--white);border-top-color:var(--line);}
  .sb-tbl td.unv{background:#FDECEC !important;}
  .sb-tbl td.sb-name.unv{color:#B3261E;font-weight:700;}
  .sb-tbl td.sb-name{padding:5px 10px;color:var(--ink);font-size:11px;
    overflow:hidden;text-overflow:clip;white-space:normal;line-height:1.3;max-width:1px;}
  /* the client band wraps its name in full; only worker names are cut short */
  .sb-tbl tr.sb-cli td.sb-name{white-space:normal;text-overflow:clip;line-height:1.3;
    padding:6px 10px;}
  .sb-tbl td.hrs{padding:0;width:52px;}
  .sb-h{width:100%;height:100%;min-height:25px;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:4px 4px;}
  .sb-h::placeholder{color:#C3CCD8;font-weight:600;}
  .sb-h{cursor:default;pointer-events:none;}
  .sb-h.text{color:var(--muted);font-weight:600;}
  /* a figure that came straight off a submitted timesheet carries a thin
     blue underline; one the office typed over it does not */
  .sb-h.ts{box-shadow:none;}
  .sb-tbl td.dayoff{background:#FDECEA;}
  .sb-tbl td.dayoff .sb-h{color:#B03A2E;}
  .sb-tbl td.abmark{background:#FF9900;}
  .sb-tbl td.abmark,.sb-tbl td.abmark .sb-h{color:#000;}
  .sb-note td{padding:0;background:var(--white);}
  .sb-cmt{min-height:26px;box-sizing:border-box;max-width:100%;overflow:hidden;
    font-family:inherit;font-size:12px;font-weight:400;color:var(--ink);
    padding:5px 10px;cursor:text;
    white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
  .sb-cmt.blank::before{content:'+ note';color:#C3CCD8;font-weight:600;}
  .sb-cmt .ink-red{color:#D32F2F;}
  .sb-cmt .ink-blue{color:#1565C0;}
  .sb-cmt:hover{background:rgba(255,255,255,.4);}
  .sb-cmt:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--amber);}
  .sb-fmt{position:fixed;z-index:60;display:none;align-items:center;gap:2px;
    background:var(--navy);border-radius:8px;padding:4px;
    box-shadow:0 6px 18px rgba(11,27,51,.28);}
  .sb-fmt button{width:26px;height:26px;padding:0;border:none;border-radius:6px;
    background:transparent;color:#fff;font-family:inherit;font-size:12.5px;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
  .sb-fmt button:hover{background:rgba(255,255,255,.16);}
  .sb-fmt button.on{background:rgba(255,255,255,.26);
    box-shadow:inset 0 0 0 1.5px var(--amber);}
  .sb-fmt i{width:15px;height:15px;border-radius:50%;display:block;
    border:1.5px solid rgba(255,255,255,.55);}
  .sb-fmt i.black{background:#0E1B2E;}
  .sb-fmt i.red{background:#D32F2F;}
  .sb-fmt i.blue{background:#1565C0;}
  .sb-fmt .sep{width:1px;height:18px;background:rgba(255,255,255,.22);margin:0 3px;}
  .sb-tbl td.tot{width:64px;text-align:center;font-weight:800;color:var(--navy);
    padding:5px 6px;}
  .sb-tbl .sb-foot td{border-top:1px solid var(--line) !important;}
  .sb-foot td{position:sticky;bottom:0;z-index:2;background:var(--white);border-top:2px solid var(--line);
    padding:8px 10px;font-weight:800;color:var(--navy);}
  .sb-foot td.hrs,.sb-foot td.tot{text-align:center;}
  .sb-foot td.lbl{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
  .sb-tbl.empty{height:100%;}
  .sb-tbl.empty td{border:none;}
  .sb-empty{text-align:center;vertical-align:middle;padding:18px;
    color:var(--muted);font-size:13.5px;line-height:1.7;}
  @keyframes sbspin{to{transform:rotate(360deg)}}
  .sb-spin{display:none;margin:70px auto;width:30px;height:30px;border:3px solid var(--line);
    border-top-color:var(--amber);border-radius:50%;animation:sbspin .7s linear infinite;}
  .sb-wrap.loading .sb-spin{display:block;}
  .sb-wrap.loading .sb-tbl{display:none;}
  .sb-wrap.busy{opacity:.5;transition:opacity .12s;}
  .sb-wrap.busy .sb-h{pointer-events:none;}
  @media (max-width:1080px){
    .sb-grid{grid-template-columns:1fr;}
    .sb-weeks{position:static;}
    .sb-weeklist{max-height:220px;}
  }