:root {
  --ink:#141414; --line:#d9d9d9; --line-dk:#333; --muted:#777;
  --hot:#e8f0ff; --flag:#c0392b; --flag-bg:#fdecea; --zebra:#fafafa; --on:#2b6cff;
}
* { box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--ink);
  background: #f4f4f5; margin: 0; padding: 24px 14px 60px; -webkit-text-size-adjust: 100%; }
.wrap { max-width: 560px; margin: 0 auto; }
.wrap.wide { max-width: 1000px; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.3px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.card { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 28px; }

/* ---- upload page ---- */
.drop { text-align: center; }
.drop-inner { border: 2px dashed #cfcfcf; border-radius: 10px; padding: 36px 20px;
  transition: background .12s, border-color .12s; }
.drop-inner.hot { background: var(--hot); border-color: #6a9bff; }
.drop-icon { font-size: 30px; color: #9aa; }
.drop-text { font-size: 14px; color: #444; margin: 8px 0 0; }
.drop-name { font-size: 12px; color: var(--ink); font-weight: 600; margin: 8px 0 0; min-height: 16px; }
.link { background: none; border: none; color: #2b6cff; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.demo { text-align: center; margin-top: 14px; }
.tips-link { display: block; text-align: center; margin-top: 20px; }
.xls-row { display: block; margin-top: 16px; text-align: left; font-size: 13px; }
.xls-lbl { display: block; color: #444; margin-bottom: 6px; }
.xls-lbl em { color: var(--muted); font-style: italic; font-weight: 400; }
.xls-row input[type=file] { font-size: 13px; max-width: 100%; }
.xls-name { display: block; font-size: 12px; color: var(--ink); font-weight: 600; margin-top: 4px; }
.tips-note { font-size: 13px; border-radius: 9px; padding: 10px 14px; margin: 8px 0 4px; }
.tips-note.ok { background: #e6f4ea; color: #1e7a34; border: 1px solid #bfe3c8; }
.tips-note.warn { background: #fff3cd; color: #8a6d00; border: 1px solid #f0e0a0; }

/* ---- buttons ---- */
.btn { display: inline-block; background: var(--ink); color: #fff; border: none; border-radius: 9px;
  padding: 12px 18px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-dk); }

.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.actions { display: flex; gap: 10px; }

/* ---- legend ---- */
.legend-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--muted);
  background: #fff; border: 1px solid #e6e6e6; border-radius: 9px; padding: 10px 14px; margin: 14px 0 12px; }
.legend-bar .dot { color: var(--flag); }
.legend-bar .tap-edit { color: var(--on); }

/* ---- table (desktop) ---- */
.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.grid th, .grid td { padding: 13px 14px; font-size: 15px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid thead th { position: sticky; top: 0; background: var(--ink); color: #fff; font-size: 12px;
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.grid th.c-name, .grid td.c-name { text-align: left; font-weight: 600; }
.grid td.num { font-variant-numeric: tabular-nums; }
.grid tbody tr:nth-child(even) { background: var(--zebra); }
.grid td[contenteditable] { outline: none; cursor: text; }
.grid td[contenteditable]:focus { background: var(--hot); box-shadow: inset 0 0 0 2px #6a9bff; border-radius: 4px; }
.c-sal, .c-flag { text-align: center !important; }
tr.is-salary td:not(.c-flag):not(.c-sal):not(.c-name) { color: #9a9a9a; font-style: italic; }
tr.is-salary td.c-name { color: var(--ink); font-weight: 700; }
tr.flagged { background: var(--flag-bg) !important; }

/* ---- flag badge (links to the employee's daily breakdown) ---- */
.flagbtn { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; background: var(--flag); color: #fff;
  font-size: 14px; text-decoration: none; line-height: 1; transition: transform .1s; }
.flagbtn:hover { transform: scale(1.12); }
.checkbtn { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; background: #1e9e57; color: #fff;
  font-size: 14px; text-decoration: none; line-height: 1; transition: transform .1s; }
.checkbtn:hover { transform: scale(1.12); }

/* ---- salary toggle switch ---- */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #ccc; border-radius: 999px; transition: .15s; }
.slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + .slider { background: var(--on); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ---- totals ---- */
.totals td { background: #1a1a1a; color: #fff; font-weight: 700; font-size: 15px; border-bottom: none; }
.totals td.gross-total { text-align: right; font-size: 16px; color: #6fe09a; }
.gross-note { font-size: 11px; color: var(--muted); margin: 8px 2px 0; }
.sales-bar { display: flex; gap: 12px; margin-top: 12px; }
.sales-bar .sb-cell { flex: 1; background: #fff; border: 1px solid #e3e3e3; border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.sb-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.sb-val { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.totals .muted { color: #b9b9b9; font-weight: 400; font-size: 11px; display: block; }
.muted { color: var(--muted); }

/* ---- weekly schedule grid ---- */
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px; }
.week-nav .week-label { font-weight: 700; font-size: 14px; }
.week-nav .btn { padding: 8px 12px; font-size: 13px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.sched-grid { min-width: 720px; }
.sched-grid th, .sched-grid td { padding: 6px 5px; text-align: center; }
.sched-grid .c-name { text-align: left; min-width: 96px; position: sticky; left: 0; background: #fff; z-index: 1; }
.sched-grid thead .c-name { background: var(--ink); }
.sched-grid .sh-cell { padding: 4px 3px; }
.sched-grid input.sh { width: 64px; padding: 5px 4px; border: 1px solid var(--line-dk); border-radius: 6px;
  font-size: 13px; text-align: center; text-transform: uppercase; }
.sched-grid .sh-cell.off input.sh { background: #eee; color: #999; }
.sched-grid .shh { display: block; font-size: 10px; color: #2d7a3a; font-weight: 600; margin-top: 2px; min-height: 12px; }
.sched-grid .rowtot, .sched-grid .rowtot-h { font-weight: 700; color: #2d7a3a; min-width: 50px; }
.sched-grid tfoot .totals td { background: #1a1a1a; color: #fff; }

/* ---- pay-period browser ---- */
.venue-pick { margin: 4px 0 16px; }
.venue-pick .field { margin-bottom: 0; }
.quick-nav { display: flex; gap: 8px; margin: 2px 0 4px; }
.quick-nav .btn { flex: 1; text-align: center; font-size: 14px; padding: 10px 8px; }
.nav-hint { font-size: 11px; color: var(--muted); margin: 0 0 12px; padding-left: 2px; }
.month-list { display: flex; flex-direction: column; gap: 12px; }
.month-group { display: flex; flex-direction: column; gap: 5px; }
.month-head { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--mc); margin: 4px 0 1px; padding-left: 3px; }
.period-card { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid #e8e8e8; border-left: 4px solid var(--mc); border-radius: 10px;
  padding: 9px 13px; text-decoration: none; color: var(--ink); }
.period-card.empty { border-left-color: #dcdcdc; background: #fafafa; opacity: .6; }
.pc-main { display: flex; align-items: baseline; gap: 8px; }
.pc-label { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.pc-sub { font-size: 11px; color: var(--muted); }
.pc-arrow { font-size: 17px; color: var(--mc); font-weight: 700; }

/* GM cards: label + two compact buttons, tight */
.period-card:has(.gm-actions) { flex-wrap: wrap; padding: 8px 12px; }
.gm-actions { display: flex; gap: 6px; margin-left: auto; }
.gm-actions .btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; margin-top: 0; }
.page-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---- calendar tip day-strip ---- */
.day-strip { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px; margin-bottom: 4px; }
.day-chip { flex: 0 0 auto; width: 50px; display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 8px 4px; border: 1px solid var(--line-dk); border-radius: 10px; background: #fff;
  cursor: pointer; position: relative; }
.day-chip .dc-dow { font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.day-chip .dc-num { font-size: 18px; font-weight: 800; }
.day-chip.active { background: var(--ink); border-color: var(--ink); }
.day-chip.active .dc-dow { color: #bbb; }
.day-chip.active .dc-num { color: #fff; }
.day-chip.has::after { content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px;
  border-radius: 50%; background: #1e9e57; }
.day-chip.active.has::after { background: #6fe09a; }

/* ---- tip share ---- */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 14px; }
.field select, .field input { padding: 10px 12px; border: 1px solid var(--line-dk); border-radius: 8px;
  font-size: 15px; color: var(--ink); font-weight: 500; background: #fff; }
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }
.src { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.src.ok { background: #e6f4ea; color: #1e7a34; }
.src.warn { background: #fff3cd; color: #8a6d00; }
.day-card { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.day-date { font-size: 16px; font-weight: 700; }
.day-hint { font-size: 12px; color: var(--muted); }
.daytbl { border: 1px solid var(--line); }
.daytbl .wname, .daytbl .whours, .daytbl .pool { width: 100%; padding: 7px 9px; border: 1px solid var(--line-dk);
  border-radius: 6px; font-size: 14px; }
.daytbl .whours, .daytbl .pool { text-align: right; font-variant-numeric: tabular-nums; }
.daytbl .pool { font-weight: 700; }
.c-x { width: 30px; text-align: center !important; }
.rm { border: none; background: none; color: #bbb; font-size: 18px; cursor: pointer; line-height: 1; }
.rm:hover { color: var(--flag); }
.addw { margin-top: 10px; font-size: 13px; padding: 8px 12px; }
.roll-h { font-size: 15px; margin: 20px 0 8px; }
.rollup .c-name { font-weight: 600; }

/* ---- rate column + add-employee ---- */
.grid td.c-rate { padding: 4px 6px; }
.grid input.rate { width: 70px; padding: 6px 8px; border: 1px solid var(--line-dk); border-radius: 6px;
  font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.grid input.rate::placeholder { color: #bbb; font-size: 12px; }
.c-name[contenteditable]:empty::before { content: "Name…"; color: #bbb; }
.add-emp { margin-top: 12px; font-size: 13px; padding: 9px 14px; }

/* ---- employee daily breakdown ---- */
.back-link { display: inline-block; color: #2b6cff; text-decoration: none; font-size: 14px; margin-bottom: 10px; }
.compare { display: flex; align-items: stretch; gap: 10px; background: #fff; border: 1px solid #e3e3e3;
  border-radius: 12px; padding: 16px; margin: 6px 0 10px; }
.compare.bad { border-color: var(--flag); background: var(--flag-bg); }
.compare.ok { border-color: #cfe8cf; background: #f3faf3; }
.cmp-col { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.cmp-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.cmp-val { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.cmp-sub { font-size: 12px; color: var(--muted); }
.cmp-arrow { align-self: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.verdict { font-size: 14px; background: var(--flag); color: #fff; padding: 10px 14px; border-radius: 9px; margin: 0 0 16px; }
.verdict.ok { background: #2e7d32; }
.empty { background: #fff; border: 1px dashed #cfcfcf; border-radius: 12px; padding: 28px 20px; text-align: center; }
.empty .btn { margin-top: 14px; }
.note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.day-flag { color: var(--flag); font-size: 14px; }

/* ---- payroll & taxes page ---- */
.theo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: #fff; background: var(--muted); padding: 3px 8px; border-radius: 999px; vertical-align: middle; }
.disclaimer { font-size: 11px; color: #6b5800; background: #fff8e1; border: 1px solid #f0e0a0;
  border-radius: 9px; padding: 8px 11px; margin: 6px 0 10px; line-height: 1.35; }
.params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 12px; }
.params label { display: flex; flex-direction: column; font-size: 9px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .2px; gap: 2px; }
.params input { width: 100%; padding: 6px 7px; border: 1px solid var(--line-dk); border-radius: 7px;
  font-size: 14px; font-weight: 600; color: var(--ink); }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
#taxtbl { min-width: 720px; }
#taxtbl .basis { font-size: 12px; color: var(--muted); text-align: center; }
#taxtbl input.rate { width: 84px; padding: 6px 8px; border: 1px solid var(--line-dk);
  border-radius: 6px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.summary { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.sum-card { flex: 1; min-width: 150px; background: #fff; border: 1px solid #e3e3e3; border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.sum-card.hot { background: var(--ink); border-color: var(--ink); }
.sum-card.hot .sum-lbl { color: #b9b9b9; }
.sum-card.hot .sum-val { color: #fff; }
.sum-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.sum-val { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }

/* ============ MOBILE: same table, just tighter so it all fits one page ============ */
@media (max-width: 680px) {
  body { padding: 16px 7px 40px; }
  h1 { font-size: 17px; }
  .head-row { gap: 10px; }
  .actions { width: 100%; flex-wrap: wrap; gap: 6px; }
  .actions .btn { flex: 0 1 auto; text-align: center; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .legend-bar { font-size: 11px; gap: 6px 12px; padding: 9px 12px; }
  .grid th, .grid td { padding: 7px 3px; font-size: 12.5px; }
  .grid thead th { font-size: 9px; letter-spacing: 0; padding: 8px 3px; }
  .grid th.c-name, .grid td.c-name { font-size: 12.5px; white-space: normal; word-break: normal; overflow-wrap: normal; padding-left: 8px; }
  .switch { width: 34px; height: 20px; }
  .slider::before { height: 14px; width: 14px; }
  .switch input:checked + .slider::before { transform: translateX(14px); }
  .flagbtn, .checkbtn { width: 24px; height: 24px; font-size: 12px; }
  .totals td { font-size: 12.5px; }
  .grid td.c-rate { padding: 4px 2px; }
  .grid input.rate { width: 36px; padding: 4px 3px; font-size: 12px; text-align: right; }
}


/* ---- Universal ice banner + floating Home (shared _banner.html) ---- */
.ice-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:15px 18px;border-radius:16px;margin:0 0 18px;
  background:radial-gradient(130% 130% at 12% 0%,rgba(90,209,255,.20),transparent 55%),
    linear-gradient(165deg,#06182b,#0b2940 60%,#103a55);color:#eaf6ff;
  box-shadow:0 6px 22px rgba(11,41,64,.25)}
.ib-brand{display:flex;align-items:center;gap:11px;min-width:0}
.ib-ice{font-size:30px;line-height:1;filter:drop-shadow(0 0 9px rgba(90,209,255,.6))}
.ib-title{font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1;
  background:linear-gradient(180deg,#fff,#9fdcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ib-sub{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:rgba(214,238,255,.62);font-weight:700;margin-top:4px}
.ib-logout{flex:none;font-size:13px;font-weight:700;text-decoration:none;color:#bfe9ff;
  padding:8px 14px;border-radius:11px;border:1px solid rgba(190,232,255,.3);background:rgba(255,255,255,.08)}
.ib-logout:active{background:rgba(255,255,255,.16)}
.home-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  display:flex;align-items:center;gap:6px;padding:13px 20px;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:15px;color:#06182b;background:linear-gradient(180deg,#cdeeff,#5ad1ff);
  box-shadow:0 8px 26px rgba(11,41,64,.4),inset 0 0 0 1px rgba(255,255,255,.45)}
.home-fab:active{transform:scale(.95)}
@media print{.ice-banner,.home-fab{display:none}}

/* ---- Wingardium Leviosa: numbers float up and settle (Excel auto-fill) ---- */
@keyframes floatIn {
  0%   { opacity: 0; transform: translateY(18px) scale(.80); filter: blur(3px); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1.06); filter: blur(0);
         text-shadow: 0 0 14px rgba(90,209,255,.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); text-shadow: none; }
}
.float-in { animation: floatIn .72s cubic-bezier(.22,1,.36,1) both; }

body { padding-bottom: 96px; }  /* clearance for the floating Home button */