* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; background: #f4f5f7; color: #1a1d24; }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; padding: 5px 8px; border: 1px solid #cbd2dc; border-radius: 6px; background: #fff; }

#nav { display: flex; align-items: center; gap: 4px; background: #171c28; color: #fff; padding: 0 14px; height: 48px; position: sticky; top: 0; z-index: 40; }
#nav .brand { font-size: 15px; margin-right: 18px; letter-spacing: .2px; }
#nav .brand b { color: #ffb84d; }
#nav a { color: #c6cbd6; text-decoration: none; padding: 6px 12px; border-radius: 8px; }
#nav a.on, #nav a:hover { background: #2a3145; color: #fff; }
main { padding: 16px 18px 60px; max-width: 1500px; margin: 0 auto; }
.loading { padding: 60px; text-align: center; color: #778; }

.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bar h1 { font-size: 19px; margin: 0 8px 0 0; }
.spacer { flex: 1; }
.btn { border: 1px solid #cbd2dc; background: #fff; border-radius: 8px; padding: 7px 14px; font-weight: 600; color: #333; }
.btn:hover { border-color: #9aa5b5; }
.btn.primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.btn.primary:hover { background: #4338ca; }
.btn.danger { color: #b91c1c; border-color: #f3c1c1; }
.btn.small { padding: 3px 9px; font-weight: 500; font-size: 13px; }
.badge { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.badge.draft { background: #fef3c7; color: #92400e; }
.badge.published { background: #d1fae5; color: #065f46; }
.badge.gaps { background: #fee2e2; color: #991b1b; }
.badge.ok { background: #d1fae5; color: #065f46; }

/* schedule grid */
/* the grid scrolls inside its own box so the sticky header/position column
   never hide rows (tall Manager rows used to slide under the page header) */
.gridwrap { overflow: auto; max-height: calc(100vh - 170px); background: #fff; border: 1px solid #e2e6ee; border-radius: 12px; }
table.sched { border-collapse: collapse; width: 100%; min-width: 1080px; }
table.sched th, table.sched td { border: 1px solid #edf0f5; vertical-align: top; }
table.sched thead th { position: sticky; top: 0; background: #fafbfd; padding: 8px 6px; font-size: 13px; z-index: 6; box-shadow: 0 1px 0 #e2e6ee; }
table.sched thead th:first-child { left: 0; z-index: 7; }
table.sched thead th .d { color: #667; font-weight: 500; font-size: 12px; }
table.sched td.pos { background: #fafbfd; font-weight: 700; font-size: 12.5px; padding: 8px; white-space: nowrap; width: 130px; position: sticky; left: 0; z-index: 4; box-shadow: 1px 0 0 #e2e6ee; }
table.sched td.cell { vertical-align: top; }
table.sched td.cell { padding: 4px; min-width: 132px; }
table.sched td.closed { background: repeating-linear-gradient(45deg,#f7f8fa,#f7f8fa 8px,#f1f3f6 8px,#f1f3f6 16px); }
.closed-label { color: #99a; font-size: 12px; text-align: center; padding: 10px 0; }

.chip { display: block; margin: 3px 0; padding: 4px 7px; border-radius: 7px; font-size: 12.2px; line-height: 1.3;
        border: 1px solid transparent; border-left-width: 4px; background: #f1f5f9; cursor: pointer; }
.chip:hover { filter: brightness(.96); }
.chip .t { color: #556; font-size: 11.3px; }
.chip .nm { font-weight: 650; }
.chip.open { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626 !important; color: #991b1b; }
.chip.open .nm { font-weight: 800; letter-spacing: .3px; }
.chip .warn { color: #b45309; }
.chip .tag { font-size: 10.5px; color: #667; font-style: italic; }
.addshift { display: inline-block; margin: 2px 0 3px; color: #99a3b5; font-size: 12px; text-decoration: none; padding: 1px 6px; border-radius: 6px; }
.addshift:hover { background: #eef1f6; color: #4f46e5; }

.hoursrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hourchip { background: #fff; border: 1px solid #e2e6ee; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; }
.hourchip b { font-weight: 700; }
.hourchip.over { background: #fee2e2; border-color: #fca5a5; }
.hourchip.ot { background: #fef3c7; border-color: #fcd34d; }

/* modal */
#modal-root .backdrop { position: fixed; inset: 0; background: rgba(15,20,30,.45); z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 40px 12px; overflow: auto; }
.modal { background: #fff; border-radius: 14px; width: 560px; max-width: 100%; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal h2 { margin: 0 0 12px; font-size: 17px; }
.modal .row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.modal label { font-size: 12.5px; font-weight: 600; color: #445; display: block; margin-bottom: 3px; }
.modal .actions { display: flex; gap: 8px; margin-top: 14px; }
.emp-pick { max-height: 300px; overflow: auto; border: 1px solid #e2e6ee; border-radius: 9px; }
.emp-pick .opt { display: flex; gap: 8px; align-items: center; padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #f1f3f7; }
.emp-pick .opt:hover { background: #f5f7fb; }
.emp-pick .opt.sel { background: #eef2ff; }
.emp-pick .stars { color: #f59e0b; font-size: 12px; width: 64px; }
.emp-pick .hrs { color: #667; font-size: 12px; margin-left: auto; }
.emp-pick .flag { font-size: 11px; color: #b45309; }
.emp-pick .unq { color: #99a; }

/* roster & ratings */
.card { background: #fff; border: 1px solid #e2e6ee; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
table.list { border-collapse: collapse; width: 100%; }
table.list th { text-align: left; font-size: 12px; color: #667; padding: 6px 8px; border-bottom: 2px solid #edf0f5; }
table.list td { padding: 7px 8px; border-bottom: 1px solid #f1f3f7; }
table.list tr:hover td { background: #f8fafc; }
.status-pill { border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; }
.status-pill.active { background: #d1fae5; color: #065f46; }
.status-pill.away { background: #dbeafe; color: #1e40af; }
.status-pill.inactive { background: #e5e7eb; color: #4b5563; }
.minor-flag { background: #fef3c7; color: #92400e; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.perm-flag { background: #ede9fe; color: #5b21b6; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }

table.ratings { border-collapse: collapse; }
table.ratings th { font-size: 11.5px; padding: 6px 4px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; height: 110px; }
table.ratings td { border: 1px solid #edf0f5; text-align: center; }
table.ratings td.nm { text-align: left; padding: 4px 10px; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: #fff; }
.rcell { width: 44px; height: 30px; border: 0; background: transparent; font-weight: 700; }
.rcell.r0 { color: #ccd; } .rcell.r1, .rcell.r2 { color: #b45309; background: #fef8ec; }
.rcell.r3 { color: #57606e; } .rcell.r4, .rcell.r5 { color: #065f46; background: #ecfdf5; }

/* templates */
.seasontabs { display: flex; gap: 6px; margin-bottom: 12px; }
.seasontabs .btn.on { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.tplday { margin-bottom: 4px; }
.tplday h3 { font-size: 14px; margin: 12px 0 6px; }
.tplslot { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; padding: 3px 8px; border-radius: 7px; background: #f1f5f9; border-left: 4px solid #888; font-size: 12.5px; }
.tplslot button { border: 0; background: none; color: #99a; padding: 0 2px; }
.tplslot button:hover { color: #b91c1c; }

/* print sheet */
.printsheet { background: #fff; max-width: 780px; margin: 0 auto; padding: 26px 34px; border: 1px solid #e2e6ee; border-radius: 12px; }
.modbox { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 6px 12px; margin: 10px 0; font-size: 13px; }
.timeline { margin: 14px 0 18px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tl-axis { position: relative; height: 16px; margin-left: 110px; border-bottom: 1px solid #cbd2dc; }
.tl-hour { position: absolute; top: 0; font-size: 9.5px; color: #667; transform: translateX(-50%); }
.tl-row { display: flex; align-items: center; height: 19px; }
.tl-name { width: 110px; min-width: 110px; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.tl-track { position: relative; flex: 1; height: 15px; border-left: 1px solid #eef; }
.tl-bar { position: absolute; top: 0; height: 100%; border: 1px solid; border-radius: 4px; font-size: 9px; line-height: 13px; padding-left: 5px; white-space: nowrap; overflow: hidden; }
.tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.tl-open { background: #fee2e2 !important; border-color: #dc2626 !important; font-weight: 800; color: #991b1b; }
.printfoot { margin-top: 12px; font-size: 10.5px; color: #778; border-top: 1px solid #edf0f5; padding-top: 6px; }
.noteshead { background: #f1f3f6; font-weight: 800; font-size: 12.5px; letter-spacing: .4px; padding: 5px 8px; margin-top: 16px; }
.noteline { border-bottom: 1px solid #cbd2dc; height: 27px; }
.printsheet h1 { font-size: 21px; margin: 0; }
.printsheet .sub { color: #556; margin: 2px 0 14px; }
.printsheet table { border-collapse: collapse; width: 100%; }
.printsheet th { text-align: left; border-bottom: 2px solid #333; padding: 5px 8px; font-size: 12.5px; }
.printsheet td { border-bottom: 1px solid #dde; padding: 6px 8px; }
.printsheet .posrow td { background: #f1f3f6; font-weight: 800; font-size: 12.5px; letter-spacing: .4px; }
.printsheet .sig { width: 130px; }
@media print {
  #nav, .bar, .no-print { display: none !important; }
  body, main { background: #fff; padding: 0; margin: 0; }
  .printsheet { border: 0; padding: 0; max-width: none; }
}

/* employee portal (phone-first) */
body.portal { background: #f0f2f6; }
body.portal main { max-width: 560px; padding: 0 14px 40px; }
.phead { display: flex; gap: 12px; align-items: center; padding: 18px 2px 6px; }
.phead span { font-size: 34px; }
.phead h1 { margin: 0; font-size: 21px; }
.psub { color: #667; font-size: 12.5px; }
body.portal section { background: #fff; border: 1px solid #e2e6ee; border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
body.portal h2 { font-size: 15px; margin: 0 0 10px; }
.pwk { font-size: 12.5px; color: #556; margin: 8px 0 4px; }
.pshift { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; border: 1px solid #edf0f5; border-left: 4px solid #4f46e5; border-radius: 9px; padding: 8px 10px; margin: 6px 0; font-size: 13.5px; }
.pshift.open { border-left-color: #059669; background: #f6fefb; }
.ppos { background: #eef2ff; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; margin-left: 6px; }
.ptime { color: #445; font-weight: 600; }
.pnone { color: #99a; font-size: 13px; padding: 6px 2px; }
.pnote { color: #667; font-size: 12px; margin-bottom: 8px; }
.avrow { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #f1f3f7; flex-wrap: wrap; }
.avday { width: 42px; font-weight: 700; font-size: 13px; }
.avwin input { width: 76px; }
#avsave { margin-top: 10px; }
.prow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.preq { font-size: 12.5px; padding: 4px 2px; color: #556; }
.preq.approved b { color: #065f46; } .preq.denied b { color: #991b1b; } .preq.pending b { color: #92400e; }
.pfoot { text-align: center; color: #99a; font-size: 11.5px; margin-top: 16px; }

/* manager: requests / timeoff / parties / settings */
.navbadge { background: #dc2626; color: #fff; border-radius: 999px; font-size: 10.5px; padding: 1px 6px; margin-left: 4px; font-weight: 800; }
.reqcard { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid #edf0f5; border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.reqcard .kind { font-size: 11px; font-weight: 800; letter-spacing: .5px; border-radius: 999px; padding: 2px 9px; }
.kind.dayoff { background: #dbeafe; color: #1e40af; } .kind.drop { background: #fee2e2; color: #991b1b; } .kind.pickup { background: #d1fae5; color: #065f46; }
.pinbox { max-width: 340px; margin: 80px auto; background: #fff; border: 1px solid #e2e6ee; border-radius: 14px; padding: 24px; text-align: center; }
.linkline { font-family: consolas, monospace; font-size: 11.5px; background: #f6f7fa; border-radius: 6px; padding: 3px 8px; word-break: break-all; }
.setgrid label { display: block; font-size: 12px; font-weight: 700; color: #445; margin: 10px 0 3px; }

/* auth pages (login / password setup) */
.authbox { max-width: 380px; margin: 9vh auto 0; background: #fff; border: 1px solid #e2e6ee; border-radius: 16px; padding: 28px 26px; }
.authlogo { font-size: 40px; text-align: center; }
.authbox h1 { font-size: 20px; text-align: center; margin: 4px 0 2px; }
.authsub { text-align: center; color: #667; font-size: 13px; margin: 0 0 16px; }
.authbox label { display: block; font-size: 12.5px; font-weight: 700; color: #445; margin: 10px 0 4px; }
.authbox input { width: 100%; padding: 9px 10px; font-size: 15px; }
.authmsg { min-height: 20px; font-size: 13px; margin-top: 10px; text-align: center; }
.authmsg.bad { color: #b91c1c; } .authmsg.ok { color: #065f46; }
.authlink { display: block; text-align: center; font-size: 12.5px; color: #4f46e5; margin-top: 8px; }
.authfoot { color: #99a; font-size: 11.5px; text-align: center; margin-top: 14px; }

/* toasts */
#toasts { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #171c28; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 380px; }
.toast.warn { background: #92400e; }

/* publish preview */
.pubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pubcard { background: #fff; border: 1px solid #e2e6ee; border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.pubcard h4 { margin: 0 0 6px; font-size: 14px; }
.pubcard .ln { display: flex; justify-content: space-between; gap: 8px; padding: 1.5px 0; }
.pubcard .tot { border-top: 1px solid #edf0f5; margin-top: 6px; padding-top: 5px; font-weight: 700; }

/* week navigator (arrows + clickable label) */
.weeknav { display: inline-flex; align-items: center; gap: 2px; }
.btn.wkarrow { padding: 4px 12px; font-size: 19px; line-height: 1; font-weight: 700; }
.btn.wkarrow:disabled { opacity: .35; cursor: default; }
.wklabel { font-weight: 700; font-size: 14.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.wklabel:hover { background: #eef1f6; }
.wkmeta { font-weight: 500; color: #667; font-size: 12.5px; margin-left: 4px; }

/* templates grouped by day > position */
.tplrow { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; border-bottom: 1px solid #f4f6fa; }
.tplpos { min-width: 150px; font-weight: 700; font-size: 12.5px; padding: 3px 8px; border-left: 4px solid #888; background: #fafbfd; border-radius: 4px; display: flex; justify-content: space-between; gap: 8px; }
.tplpos b { color: #667; font-weight: 700; }
.tpltimes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; }
.btn.small.tpladd { padding: 1px 8px; color: #99a3b5; }
.btn.small.tpladd:hover { color: #4f46e5; }

body.portal section.wknote { background: #fef3c7; border-color: #fcd34d; }

.admin-flag { background: #dbeafe; color: #1e40af; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.dayrow { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 10px; }
.daybtn { border: 1px solid #cbd2dc; background: #fff; border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.daybtn b { font-size: 11px; color: #667; font-weight: 700; }
.daybtn.on { background: #4f46e5; border-color: #4f46e5; color: #fff; } .daybtn.on b { color: #dbeafe; }
.daybtn:disabled { opacity: .4; }
.alert-flag { font-size: 12px; }

/* phone layout for the manager app (managers approve requests from their phones) */
@media (max-width: 700px) {
  #nav { height: auto; flex-wrap: wrap; padding: 6px 10px; gap: 2px; }
  #nav .brand { width: 100%; margin: 0 0 4px; font-size: 14px; }
  #nav a { padding: 5px 9px; font-size: 13px; }
  main { padding: 12px 10px 60px; }
  .bar h1 { font-size: 17px; }
  .card { padding: 12px; }
  .reqcard { flex-direction: column; align-items: stretch; gap: 8px; }
  .reqcard .kind { align-self: flex-start; }
  .reqcard .btn { width: 100%; padding: 10px; font-size: 15px; }
  .gridwrap { max-height: calc(100vh - 210px); }
  table.list { font-size: 13px; }
}