/* LC Scheduler — plain, dense, high-contrast so Emily can read a whole week */
* { box-sizing: border-box; }
body {
  font: 14px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0; background: #f4f5f7; color: #1f2328;
}
main { padding: 1rem 1.25rem; }
h1 { margin: 0 0 0.75rem; }
h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
a { color: #0057b7; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #6a737d; }
.small { font-size: 0.85em; }

/* topbar */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.5rem 1rem; background: #1f3355; color: white;
}
.brand { font-weight: 600; letter-spacing: 0.02em; }
.topbar nav { display: flex; gap: 0.25rem; margin-left: auto; }
.topbar nav a {
  color: #dbe1ea; padding: 0.35rem 0.7rem; border-radius: 4px;
}
.topbar nav a.on, .topbar nav a:hover {
  background: rgba(255,255,255,0.12); color: white; text-decoration: none;
}

/* cards, forms */
.card {
  background: white; border: 1px solid #d0d7de; border-radius: 6px;
  padding: 1rem; margin-bottom: 1rem;
}
.card.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.stacked { display: flex; flex-direction: column; gap: 0.5rem; }
.stacked.wide label { max-width: 40rem; display: block; }
.inline-form { display: inline-flex; align-items: center; gap: 0.5rem; }
.inline-form.right { margin-left: auto; }
label { display: inline-flex; flex-direction: column; gap: 0.15rem; }
label.check { flex-direction: row; align-items: center; gap: 0.35rem; }
input, select, button, textarea {
  font: inherit; padding: 0.35rem 0.5rem; border: 1px solid #c5cbd3;
  border-radius: 4px; background: white;
}
button { cursor: pointer; }
button.primary { background: #1f3355; color: white; border-color: #1f3355; }
button.primary:hover { background: #16253d; }
button.danger { background: #b71c1c; color: white; border-color: #b71c1c; }
button.link { background: transparent; border: none; color: #b71c1c; padding: 0; }
button.tiny, .tiny button, .tiny input, .tiny select {
  font-size: 0.85em; padding: 0.15rem 0.35rem;
}
.tiny { display: inline-block; }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; }
dl.kv dt { font-weight: 600; color: #4b5563; }

/* generic table */
table.grid {
  width: 100%; border-collapse: collapse; background: white;
  border: 1px solid #d0d7de; border-radius: 6px; overflow: hidden;
}
table.grid th, table.grid td {
  border-bottom: 1px solid #eaeef2; padding: 0.35rem 0.5rem; text-align: left;
  vertical-align: top;
}
table.grid thead th { background: #eef1f5; border-bottom: 1px solid #d0d7de; }
tr.inactive td { color: #8b95a1; background: #fafbfc; }
tr.status-approved { background: #f1fbf3; }
tr.status-requested { background: #fffbe6; }
tr.status-denied { background: #fef3f2; color: #6b7280; }

.notice { padding: 0.75rem 1rem; background: #fff8dc; border: 1px solid #e5d78a;
          border-radius: 6px; margin-bottom: 1rem; }
.check-flag { padding: 0.6rem 1rem; background: #ffe6e6; border: 1px solid #f5a3a3;
              border-radius: 6px; margin-bottom: 0.6rem; }

.badge { display: inline-block; padding: 0 0.35rem; border-radius: 3px; font-size: 0.85em; }
.badge.on { background: #c8e6c9; color: #1b5e20; }
.badge.off { background: #eceff1; color: #607d8b; }

/* employees grid */
table.emp-grid { font-size: 13px; }
table.emp-grid td { padding: 0.2rem 0.4rem; }
.avail-code { display: inline-block; padding: 0 0.35rem; border-radius: 3px; font-weight: 600; }
.code-D { background: #e3f2fd; color: #0d47a1; }
.code-M { background: #fff3e0; color: #b26a00; }
.code-N { background: #ede7f6; color: #4527a0; }
.code-X { background: #fbe9e7; color: #b71c1c; }

/* week nav bar */
.week-nav {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; background: white; border: 1px solid #d0d7de;
  border-radius: 6px; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.btn {
  display: inline-block; padding: 0.35rem 0.75rem; border-radius: 4px;
  background: #eef1f5; color: #1f3355; border: 1px solid #d0d7de;
}
.btn.primary { background: #1f3355; color: white; border-color: #1f3355; }
.btn:hover { text-decoration: none; }

/* draft grid */
.scroll-x { overflow-x: auto; }
table.draft-grid {
  font-size: 12px; border: 1px solid #c5cbd3; min-width: 100%;
}
table.draft-grid th, table.draft-grid td {
  padding: 0.2rem 0.35rem; border: 1px solid #dde3ea; text-align: center;
  vertical-align: middle; min-width: 60px;
}
table.draft-grid th.emp-col, table.draft-grid td.emp-col {
  text-align: left; min-width: 12rem; background: #fafbfc;
  position: sticky; left: 0; z-index: 2;
}
table.draft-grid thead th.emp-col { z-index: 3; }
table.draft-grid thead th { background: #eef1f5; }
th.m-shift { border-top: 3px solid #fbc02d; }
th.n-shift { border-top: 3px solid #6a1b9a; }
.shift-lbl { color: #6a737d; font-weight: normal; }
tr.dept-row td {
  background: #1f3355; color: white; text-align: left;
  font-weight: 600; padding: 0.25rem 0.5rem;
}

.cell { position: relative; }

/* combined day column: top half = M shift, bottom half = N shift */
td.day-cell { padding: 0; min-width: 8.5rem; vertical-align: top; }
.half { position: relative; padding: 2px 4px; min-height: 1.9rem;
        display: flex; align-items: center; justify-content: center; }
.half.n { border-top: 1px dashed #cfd6df; }
.half.m:not(.assigned):not(.off):not(.unavail) { background: #fffef8; }
.half.n:not(.assigned):not(.off):not(.unavail) { background: #f7f9fc; }
.half.assigned { background: #e8f5e9; }
.half.assigned.locked { box-shadow: inset 0 0 0 2px rgba(31, 51, 85, 0.35); }
.half.assigned.manual { outline: 2px solid #ff9800; outline-offset: -2px; }

/* pastel color coding by job code (waits share one color; bartenders too) */
.jt-day-wait, .jt-nite-wait { background: #d6e6ff !important; }
.jt-dbartender, .jt-nbartender,
.jt-day-bartender-register, .jt-nite-bartender-register { background: #e6dcf5 !important; }
.jt-broil-cook { background: #ffe0cc !important; }
.jt-fry-cook { background: #fff3c4 !important; }
.jt-salads { background: #d9f2d9 !important; }
.jt-expo-back { background: #ccf2e8 !important; }
.jt-prep-delivery { background: #f0e6d0 !important; }
.jt-dishwasher { background: #dde7ee !important; }
.jt-hostess { background: #ffe0eb !important; }
.jt-sa { background: #ffe3da !important; }
.jt-district-management, .jt-office-manager { background: #e3e3e3 !important; }

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.legend .chip { font-size: 11px; padding: 2px 8px; border-radius: 10px;
                border: 1px solid rgba(0,0,0,0.12); }

/* print: just the grid, no interface chrome */
.print-title { display: none; }
@media print {
  @page { size: landscape; margin: 8mm; }
  * { -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important; }
  header.topbar, .week-nav, .notice, .no-print,
  .add-menu, .lock-btn { display: none !important; }
  .print-title { display: block; font-weight: 700; font-size: 13px;
                 margin-bottom: 4px; }
  body { background: white; }
  main { padding: 0; }
  .scroll-x { overflow: visible; }
  table.draft-grid { font-size: 7.5px; width: 100%; }
  table.draft-grid th.emp-col, table.draft-grid td.emp-col {
    position: static; min-width: 0; }
  td.day-cell { min-width: 0; }
  .half { min-height: 1.1rem; padding: 1px 2px; }
  .half .cell-btn { font-size: 7px; }
  .cell-btn { pointer-events: none; }
  tr, .day-card { page-break-inside: avoid; }
  .legend { margin: 2mm 0; }
  .legend .chip { font-size: 8px; }
}
.half.off { background: #ffcdd2; color: #b71c1c; }
.half.req { background: #ffe8b3; color: #8a6100; }
.req-lbl { font-size: 10px; font-weight: 700; }
.half.unavail { background: #eceff1; color: #90a4ae; }
/* Tuesday: normally closed, manual-add only */
td.tue-cell, th.tue-cell { background: #f3f1ec; }
th.tue-cell { color: #9a938a; }
.half .cell-btn { font-size: 10.5px; line-height: 1.15; }
.half .lock-btn { position: absolute; top: 0; right: 0; }
.cell.assigned { background: #e8f5e9; }
.cell.assigned.locked { background: #c8e6c9; }
.cell.assigned.manual { outline: 2px solid #ff9800; outline-offset: -2px; }
.cell.off { background: #ffcdd2; color: #b71c1c; }
.cell.unavail { background: #eceff1; color: #90a4ae; }
.cell-form { display: inline; margin: 0; }
.cell-btn {
  width: 100%; background: transparent; border: none; padding: 0.2rem;
  font: inherit; line-height: 1.1; cursor: pointer; color: #1b5e20;
}
.cell-btn:hover { background: rgba(0,0,0,0.05); }
.lock-form { display: inline; margin: 0; position: absolute; top: 0; right: 0; }
.lock-btn { background: transparent; border: none; font-size: 10px; padding: 1px 3px; cursor: pointer; }
.off-lbl, .unavail-lbl { font-size: 10px; font-weight: 600; }
.load-col { font-weight: 600; }
.add-menu > summary {
  list-style: none; cursor: pointer; color: #9aa0a6;
  padding: 0.2rem;
}
.add-menu > summary::-webkit-details-marker { display: none; }
.add-menu[open] summary { color: #1f3355; }
.add-menu form { display: flex; gap: 3px; padding: 3px; background: white;
                 border: 1px solid #c5cbd3; border-radius: 4px; position: absolute;
                 z-index: 10; top: 100%; left: 0; width: max-content; }
.add-menu form input { font-size: 11px; width: 8rem; }

tr.coverage-row td, tr.labor-row td {
  background: #fafbfc; font-size: 11px; text-align: left; padding: 0.25rem;
}
.cov-line { display: flex; justify-content: space-between; gap: 4px; }
.cov-line.short { color: #b71c1c; font-weight: 600; }
.cov-title { color: #4b5563; }
.labor-cell { text-align: right; font-variant-numeric: tabular-nums; }

/* ==================== auth (login page) ==================== */
.auth-body { background: #1f3355; }
.auth-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.auth-card {
  width: min(400px, 94vw); background: white; border-radius: 10px;
  padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.9rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.auth-brand { text-align: center; margin-bottom: 0.25rem; }
.auth-brand h1 { font-size: 1.35rem; margin: 0.5rem 0 0.15rem; }
.auth-brand p { margin: 0; }
.auth-logo {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  background: #1f3355; color: white; font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.03em;
}
.auth-card label { gap: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.auth-card input { min-height: 44px; font-size: 1rem; }
.auth-submit { min-height: 46px; font-size: 1rem; border-radius: 6px; }
.auth-error {
  background: #fef3f2; border: 1px solid #f5a3a3; color: #b71c1c;
  padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.9rem;
}
.auth-foot { text-align: center; margin: 0.25rem 0 0; }

/* logout button in topbar */
.logout-form { margin-left: 0.5rem; }
.logout-btn {
  background: rgba(255,255,255,0.12); color: #dbe1ea; border: none;
  padding: 0.35rem 0.7rem; border-radius: 4px; font-size: 0.9em;
}
.logout-btn:hover { background: rgba(255,255,255,0.22); color: white; }

/* ==================== staff portal (mobile-first) ==================== */
.staff-body { background: #f4f5f7; }
.staff-main { max-width: 560px; margin: 0 auto; padding: 1rem; }
.staff-form select, .staff-form input { min-height: 46px; font-size: 1rem; }
.staff-form label { font-weight: 600; font-size: 0.9rem; gap: 0.3rem; }
.staff-ok {
  background: #f1fbf3; border: 1px solid #a5d6a7; color: #1b5e20;
  padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem;
  font-weight: 600;
}
.staff-list { display: flex; flex-direction: column; gap: 0.35rem; }
.staff-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border-radius: 6px; border: 1px solid #eaeef2;
}
.staff-row .staff-date { font-variant-numeric: tabular-nums; font-weight: 600;
                         white-space: nowrap; }
.staff-row .staff-name { flex: 1; min-width: 0; overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap; }
.staff-row .staff-status { white-space: nowrap; font-size: 0.85em; font-weight: 600; }
.staff-row.status-approved .staff-status { color: #1b5e20; }
.staff-row.status-denied .staff-status { color: #b71c1c; }
.staff-row.status-requested .staff-status { color: #8a6100; }

/* ==================== small screens ==================== */
@media (max-width: 720px) {
  main { padding: 0.75rem; }
  .card { padding: 0.75rem; }
  .card.two-col { grid-template-columns: 1fr; gap: 1rem; }
  /* nav becomes a swipeable strip */
  .topbar { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.75rem; }
  .topbar nav {
    order: 3; width: 100%; margin-left: 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: 0.5rem 0.7rem; }
  .logout-form { margin-left: auto; }
  /* comfortable touch targets on forms (dense grid widgets keep their size) */
  .stacked input, .stacked select, .stacked button,
  .week-nav input, .week-nav select, .week-nav .btn, .week-nav button {
    min-height: 44px;
  }
  /* any wide table inside a card scrolls instead of breaking the page */
  .card { overflow-x: auto; }
  table.grid { min-width: 480px; }
  dl.kv { grid-template-columns: 1fr; gap: 0 0; }
}