:root {
  --ops-chrome: #11130f;
  --ops-chrome-raised: #1b1d18;
  --ops-surface: #20211d;
  --ops-surface-soft: #292a25;
  --ops-ivory: #fffaf0;
  --ops-ivory-raised: #fffdf8;
  --ops-gold: #d6a21d;
  --ops-gold-deep: #a97408;
  --ops-gold-soft: #f8e4aa;
  --ops-ink: #181713;
  --ops-muted: #786f60;
  --ops-line: #ded7c8;
  --ops-line-dark: #383a34;
  --ops-success: #3f944f;
  --ops-success-soft: #deeddc;
  --ops-warning: #db7d18;
  --ops-warning-soft: #fff0ce;
  --ops-danger: #b74435;
  --ops-danger-soft: #f8ded8;
  --ops-radius-control: 10px;
  --ops-radius-card: 14px;
  --ops-radius-sheet: 20px;
  --ops-shadow-card: 0 8px 24px rgba(0, 0, 0, .16);
  --ops-shadow-float: 0 18px 48px rgba(0, 0, 0, .34);
}

html,
body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 22% 0%, rgba(214, 162, 29, .08), transparent 31%),
    linear-gradient(160deg, #171914 0%, var(--ops-chrome) 60%, #0b0c09 100%) !important;
  color: #f7f4ed;
}

body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#loginRoot,
#acceptInviteRoot {
  background:
    radial-gradient(circle at 50% 5%, rgba(214,162,29,.1), transparent 34%),
    linear-gradient(160deg, #171914, #0b0c09) !important;
}
#loginRoot > div,
#acceptInviteRoot > div {
  width: min(100%, 400px) !important;
  max-width: calc(100vw - 28px) !important;
  margin: auto !important;
  background: rgba(20,22,17,.97) !important;
  border: 1px solid rgba(214,162,29,.24) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.42) !important;
}
#loginRoot h1,
#loginRoot h2,
#acceptInviteRoot h1,
#acceptInviteRoot h2 { color: #fffaf0 !important; }
#loginRoot [style*="#94A3B8"],
#loginRoot [style*="#64748B"],
#acceptInviteRoot [style*="#94A3B8"],
#acceptInviteRoot [style*="#64748B"] { color: #aaa398 !important; }
#loginRoot a,
#loginRoot button[style*="#60A5FA"],
#acceptInviteRoot a { color: #e0b33a !important; }

.app {
  max-width: 760px !important;
  background: transparent;
}

.scroll-area {
  overflow-x: hidden;
  scrollbar-color: rgba(214, 162, 29, .45) transparent;
}

main {
  width: 100%;
  max-width: 100%;
  padding: 20px clamp(14px, 4vw, 26px) calc(104px + env(safe-area-inset-bottom)) !important;
}

/* Shared component vocabulary for new and migrated pages. */
.ops-page { width: 100%; min-width: 0; color: #f7f4ed; }
.ops-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 10px 0 20px; }
.ops-page-title { margin: 0; color: #fff; font-size: clamp(28px, 6vw, 38px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; }
.ops-page-subtitle { margin: 6px 0 0; color: #b9b4aa; font-size: 13px; line-height: 1.5; }
.ops-surface,
.ops-card { background: var(--ops-ivory); color: var(--ops-ink); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.ops-card { padding: 16px; }
.ops-card-compact { padding: 12px 14px; }
.ops-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.ops-metric { min-width: 0; padding: 14px 10px; text-align: center; border-right: 1px solid var(--ops-line); }
.ops-metric:last-child { border-right: 0; }
.ops-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; background: #20211d; border: 1px solid var(--ops-line-dark); border-radius: 11px; }
.ops-segmented-button { min-height: 44px; color: #d6d2c9; border-radius: 8px; font-weight: 700; }
.ops-segmented-button.active { color: #fff; border-bottom: 3px solid var(--ops-gold); background: rgba(255,255,255,.045); }
.ops-workflow-switcher { background: #20211d !important; border: 1px solid #3b3d36; box-shadow: 0 8px 22px rgba(0,0,0,.15); }
.ops-workflow-switcher > div:first-child { color: #d8c077 !important; }
.ops-workflow-step { min-height: 54px; color: #d4d0c7 !important; background: #151611 !important; border: 1px solid transparent !important; }
.ops-workflow-step.active { color: #1a160c !important; background: linear-gradient(145deg,#e5b52b,#c78d0f) !important; border-color: #efc65c !important; }
.ops-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 13px 14px; border-bottom: 1px solid var(--ops-line); }
.ops-row-main { min-width: 0; }
.ops-row-meta { color: var(--ops-muted); font-size: 12px; }
.ops-row-value { text-align: right; font-weight: 800; }
.ops-status { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; }
.ops-status-success { color: #235c30; background: var(--ops-success-soft); }
.ops-status-warning { color: #74420c; background: var(--ops-warning-soft); }
.ops-status-danger { color: #7d2921; background: var(--ops-danger-soft); }
.ops-btn-primary,
.ops-btn-secondary,
.ops-btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: var(--ops-radius-control); font-weight: 800; }
.ops-btn-primary { color: #fff; background: linear-gradient(135deg, #e1b32e, #b77a08); box-shadow: 0 7px 18px rgba(185,124,10,.25); }
.ops-btn-secondary { color: var(--ops-gold-deep); background: var(--ops-ivory-raised); border: 1px solid var(--ops-gold); }
.ops-btn-ghost { color: #e2ded5; background: rgba(255,255,255,.045); border: 1px solid var(--ops-line-dark); }
.ops-form-group { display: grid; gap: 6px; }
.ops-form-input,
.ops-form-select { width: 100%; min-height: 44px; padding: 10px 13px; color: var(--ops-ink); background: var(--ops-ivory-raised); border: 1px solid #cfc5b2; border-radius: var(--ops-radius-control); }
.ops-empty,
.ops-error,
.ops-loading { padding: 24px 18px; text-align: center; border-radius: var(--ops-radius-card); }
.ops-empty,
.ops-loading { color: var(--ops-muted); background: var(--ops-ivory); }
.ops-error { color: #7d2921; background: var(--ops-danger-soft); border: 1px solid #e3aaa0; }
.ops-sheet { color: var(--ops-ink); background: var(--ops-ivory); border-radius: var(--ops-radius-sheet) var(--ops-radius-sheet) 0 0; }
.ops-sheet-actions { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px; background: rgba(255,250,240,.96); border-top: 1px solid var(--ops-line); }
.ops-sticky-action { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 7; padding: 12px; background: var(--ops-ivory); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 28px rgba(0,0,0,.2); }

/* App chrome */
header.topbar,
.topbar {
  min-height: 66px;
  padding: 12px clamp(14px, 4vw, 22px) !important;
  background: rgba(17, 19, 15, .94) !important;
  border-bottom: 1px solid rgba(214, 162, 29, .17) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
}

.logo {
  background: linear-gradient(145deg, #e4b52d, #b87909) !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 16px rgba(214,162,29,.24) !important;
}

.brand-name { color: #fff7e4; letter-spacing: -.01em; }
.brand-sub { color: #aaa69d !important; }
.online-dot { box-shadow: 0 0 0 4px rgba(63,148,79,.12), 0 0 14px rgba(63,148,79,.55); }
#notifBell,
#refreshBtn { min-width: 44px; min-height: 44px; color: #e8c45f !important; }

nav.bottombar {
  height: calc(72px + env(safe-area-inset-bottom)) !important;
  padding: 7px max(4px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-right)) !important;
  background: rgba(17,19,15,.97) !important;
  border-top: 1px solid rgba(214,162,29,.2) !important;
  box-shadow: 0 -14px 32px rgba(0,0,0,.28) !important;
}

nav.bottombar button {
  min-width: 0;
  min-height: 44px;
  gap: 2px !important;
  padding: 6px 2px !important;
  color: #9d9d97 !important;
  border-radius: 10px !important;
  font-size: 10px !important;
}

nav.bottombar button.active { color: #f2bf31 !important; background: rgba(214,162,29,.07); }
nav.bottombar button:active { background: rgba(214,162,29,.12) !important; }
nav.bottombar .icon { font-size: 21px !important; filter: grayscale(.2); }
nav.bottombar .scan-btn { width: 54px !important; }
nav.bottombar .scan-btn .icon-wrap { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; background: linear-gradient(145deg,#e4b52d,#b87909) !important; }

/* Shared legacy page surfaces */
.section-header {
  align-items: flex-end !important;
  gap: 14px;
  margin: 10px 0 18px !important;
}
.section-title { color: #fff !important; font-size: clamp(27px, 6vw, 36px) !important; line-height: 1.08; letter-spacing: -.035em; }
.section-sub { margin: 18px 2px 9px; color: #d7bd73 !important; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

main > .card,
main .card:not(.payroll-review-card):not(.payroll-gig-card),
.item-card,
.kit-card,
.event-card {
  color: var(--ops-ink) !important;
  background: var(--ops-ivory) !important;
  border: 1px solid var(--ops-line) !important;
  border-radius: var(--ops-radius-card) !important;
  box-shadow: var(--ops-shadow-card);
}

main .card div[style*="color:white"],
main .card span[style*="color:white"],
.item-card .item-name,
.card-value { color: var(--ops-ink) !important; }
main .card div[style*="#94A3B8"],
main .card span[style*="#94A3B8"],
main .card div[style*="#64748B"],
.item-meta,
.card-title { color: var(--ops-muted) !important; }
main .card a { color: var(--ops-gold-deep) !important; }

.stat-grid { gap: 10px !important; }
.stat-grid .card { min-height: 112px; display: flex; flex-direction: column; justify-content: center; }
.card-clickable { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.card-clickable:active,
.item-card:active { transform: translateY(1px) scale(.992) !important; border-color: var(--ops-gold) !important; }

.search-bar,
.form-input,
.form-select,
textarea.form-input {
  min-height: 44px;
  color: var(--ops-ink) !important;
  background: var(--ops-ivory-raised) !important;
  border: 1px solid #cfc5b2 !important;
  border-radius: var(--ops-radius-control) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.search-bar::placeholder,
.form-input::placeholder { color: #9a9286 !important; }
.search-bar:focus,
.form-input:focus,
.form-select:focus { border-color: var(--ops-gold) !important; box-shadow: 0 0 0 3px rgba(214,162,29,.15); }
.form-label { color: #d6c28d !important; font-weight: 700 !important; }
.card .form-label,
.payroll-themed-modal .form-label { color: #6f6047 !important; }
.form-help { color: #918777 !important; line-height: 1.45; }

.btn,
button.btn { min-height: 44px; border-radius: var(--ops-radius-control) !important; font-weight: 800 !important; }
.btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #e1b32e, #b77a08) !important;
  border: 1px solid #d19a12 !important;
  box-shadow: 0 7px 18px rgba(185,124,10,.22);
}
.btn-secondary {
  color: #7b5200 !important;
  background: var(--ops-ivory-raised) !important;
  border: 1px solid var(--ops-gold) !important;
}
.btn-ghost { color: #d7d2c8 !important; border-color: #494a44 !important; }
.card .btn-ghost { color: #74520e !important; border-color: #d2c29d !important; }

.chip { min-height: 38px; color: #d4d0c8 !important; background: #242620 !important; border-color: #44463e !important; }
.chip.active { color: #19160e !important; background: var(--ops-gold) !important; border-color: var(--ops-gold) !important; }
.filter-chips { scrollbar-color: var(--ops-gold) transparent; }

.item-card { padding: 13px 14px !important; gap: 12px !important; overflow: hidden; }
.item-card > * { min-width: 0; }
.item-card .item-body { flex: 1 1 auto; min-width: 0; }
.item-card .item-name { overflow-wrap: anywhere; }
.item-card .item-status {
  flex: 0 1 auto;
  max-width: 92px;
  padding: 5px 8px;
  white-space: normal !important;
  text-align: center;
  overflow-wrap: anywhere;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
.item-card .status-AVAILABLE { color: #235c30 !important; background: var(--ops-success-soft) !important; }
.item-card .status-CHECKED_OUT,
.item-card .status-MAINTENANCE { color: #74420c !important; background: var(--ops-warning-soft) !important; }
.item-card .status-RETIRED,
.item-card .status-ARCHIVED { color: #7d2921 !important; background: var(--ops-danger-soft) !important; }
.item-icon { background: #f2ead9 !important; border: 1px solid #e0d3b8; }
.badge,
.status-chip { border-radius: 7px !important; font-weight: 800 !important; }

/* Scheduler and Event workspaces */
.scheduler-page { max-width: 100% !important; padding: 4px 0 calc(88px + env(safe-area-inset-bottom)) !important; color: #f7f4ed !important; }
.scheduler-view-toggle,
.schedule-view-toggle {
  background: #20211d !important;
  border: 1px solid #3b3d36 !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.scheduler-view-toggle button,
.schedule-view-toggle button { min-height: 44px !important; color: #cfcbc2 !important; border-radius: 8px !important; }
.scheduler-view-toggle button.active,
.schedule-view-toggle button.active { color: #fff !important; background: rgba(255,255,255,.055) !important; border-bottom: 3px solid var(--ops-gold) !important; }
.scheduler-hero { margin: 16px 0 20px !important; }
.scheduler-hero .eyebrow { color: var(--ops-gold) !important; }
.scheduler-hero h1 { color: #fff !important; font-size: clamp(28px,6vw,38px) !important; letter-spacing: -.035em; }
.scheduler-hero p { color: #b7b2a8 !important; }
.phone-notification-card {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  color: var(--ops-ink) !important;
  background: var(--ops-ivory) !important;
  border: 1px solid var(--ops-gold) !important;
  border-radius: var(--ops-radius-card) !important;
  box-shadow: var(--ops-shadow-card);
}
.phone-notification-heading { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start; }
.phone-notification-heading > div { min-width: 0; }
.phone-notification-heading .eyebrow { color: var(--ops-gold-deep) !important; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.phone-notification-heading h2 { margin: 3px 0; color: var(--ops-ink); font-size: 20px; }
.phone-notification-heading p,
.phone-notification-footnote { margin: 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
.phone-notification-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: var(--ops-chrome); border-radius: 50%; font-size: 22px; }
.phone-notification-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.phone-notification-guidance { display: grid; gap: 7px; margin: 0; padding: 12px 12px 12px 32px; color: var(--ops-ink); background: #f5edda; border-radius: 10px; font-size: 12px; }
.phone-notification-card.permission-blocked { border-color: var(--ops-warning) !important; }
.phone-notification-card.unavailable { border-color: var(--ops-line) !important; }
.phone-notification-card-loading { color: var(--ops-muted); font-size: 13px; }
.scheduler-calendar,
.schedule-card,
.workforce-card,
.payroll-shift-card,
.schedule-history,
.open-staffing-panel .schedule-card {
  color: var(--ops-ink) !important;
  background: var(--ops-ivory) !important;
  border-color: var(--ops-line) !important;
  box-shadow: var(--ops-shadow-card);
}
.schedule-card h3,
.schedule-card strong,
.shift-title,
.workforce-card strong,
.schedule-history summary { color: var(--ops-ink) !important; }
.schedule-card small,
.schedule-meta,
.shift-info small,
.workforce-card small { color: var(--ops-muted) !important; }
.scheduler-calendar { overflow: hidden; background: var(--ops-ivory) !important; }
.sched-grid,
.sched-weekdays { min-width: 0; }
.sched-day { min-width: 0; color: var(--ops-ink) !important; }
.calendar-toolbar button { min-width: 44px; min-height: 44px; color: var(--ops-gold-deep) !important; background: #f5ecd8 !important; border-radius: 9px; }
.calendar-toolbar strong { color: var(--ops-ink) !important; }
.sched-day { color: var(--ops-ink) !important; background: var(--ops-ivory-raised) !important; border-color: #e6dcc8 !important; }
.sched-day.has-events { border-color: var(--ops-gold) !important; background: #fff4d7 !important; }
.sched-day.selected { color: #fff !important; background: linear-gradient(145deg,#d6a21d,#a97408) !important; }
.open-staffing-toggle-btn { color: #f5d77f !important; background: #24241e !important; border-color: #a97a10 !important; }
.schedule-loading,
.schedule-empty { color: var(--ops-muted) !important; background: var(--ops-ivory) !important; border-color: var(--ops-line) !important; }
.schedule-error { color: #7d2921 !important; background: var(--ops-danger-soft) !important; border-color: #e3aaa0 !important; }

/* Modals and sheets */
.modal-backdrop { background: rgba(5,6,4,.72) !important; backdrop-filter: blur(8px) !important; }
.modal {
  color: var(--ops-ink) !important;
  background: var(--ops-ivory) !important;
  border: 1px solid #d6bc79;
  box-shadow: var(--ops-shadow-float);
}
.modal-handle { background: #c39a36 !important; }
.modal-title { color: var(--ops-ink) !important; letter-spacing: -.02em; }
.modal .section-sub { color: #8a6717 !important; }
.modal .employee-check,
.modal .candidate-row,
.modal .shift-editor-row,
.modal .punch-evidence,
.modal .location-clock-panel,
.modal .schedule-revision-warning {
  color: var(--ops-ink) !important;
  background: var(--ops-ivory-raised) !important;
  border-color: #d9cba9 !important;
}
.modal .employee-check strong,
.modal .candidate-row strong,
.modal .shift-editor-row strong { color: var(--ops-ink) !important; }
.modal .employee-check small,
.modal .candidate-row small,
.modal .shift-editor-row small { color: var(--ops-muted) !important; }
.modal .compact-pay-panel {
  color: var(--ops-ink) !important;
  background: var(--ops-ivory-raised) !important;
  border-color: #d9cba9 !important;
}
.modal .compact-pay-panel .employee-check {
  background: transparent !important;
  border: 0 !important;
}
.modal .compact-pay-panel .currency-input > span { color: var(--ops-ink) !important; }
.modal .location-clock-panel { padding: 10px !important; gap: 8px !important; }
.location-clock-heading { gap: 8px !important; }
.location-clock-heading span { font-size: 11px !important; line-height: 1.35; }
.location-clock-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.location-clock-actions .btn { min-height: 40px; padding-inline: 9px; font-weight: 800; }

/* Consistent status language and visual treatments. */
.status-chip.accepted,
.coverage-ready { color: #235c30 !important; background: var(--ops-success-soft) !important; border-color: #b8d5b7 !important; }
.status-chip.pending,
.payroll-estimate { color: #74420c !important; background: var(--ops-warning-soft) !important; border-color: #efca84 !important; }
.hours-warning,
.clock-error:not(:empty) { color: #7d2921 !important; background: var(--ops-danger-soft) !important; border-color: #e3aaa0 !important; }

/* Payroll owns the strongest mockup-specific hierarchy. */
.payroll-review-shell { margin: -20px clamp(-26px,-4vw,-14px) 0 !important; min-height: calc(100dvh - 138px); }
.payroll-review-shell .payroll-review-card,
.payroll-review-shell .payroll-gig-card,
.payroll-review-shell .payroll-employee-card,
.payroll-review-shell .payroll-exception-card { box-shadow: var(--ops-shadow-card); }
.payroll-review-shell button { min-height: 44px; }
.payroll-sticky-cta { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }

/* Loading and empty states */
.loading { color: #c5c0b6 !important; }
.spinner { border-color: rgba(214,162,29,.25) !important; border-top-color: var(--ops-gold) !important; }

@media (max-width: 720px) {
  main { padding: 16px 12px calc(98px + env(safe-area-inset-bottom)) !important; }
  .ops-page-header,
  .section-header { align-items: flex-start !important; }
  .section-header > .btn,
  .section-header > button { flex-shrink: 0; }
  .ops-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ops-metric:nth-child(2) { border-right: 0; }
  .ops-metric:nth-child(-n+2) { border-bottom: 1px solid var(--ops-line); }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .card { padding: 14px !important; }
  .modal { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important; }
  .payroll-review-shell { margin: -16px -12px 0 !important; }
  .payroll-review-metrics { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  nav.bottombar button { font-size: 9px !important; }
  nav.bottombar .icon { font-size: 19px !important; }
}

@media (max-width: 650px) {
  .phone-notification-card { padding: 14px; }
  .phone-notification-heading { grid-template-columns: 38px minmax(0,1fr); gap: 9px; }
  .phone-notification-icon { width: 38px; height: 38px; font-size: 19px; }
  .phone-notification-actions { display: grid; grid-template-columns: 1fr; }
  .phone-notification-actions .btn { width: 100%; }
  .scheduler-calendar { padding: 10px !important; border-radius: 12px; }
  .sched-grid,
  .sched-weekdays { gap: 3px; }
  .sched-day { min-width: 0; min-height: 40px; padding: 4px; font-size: 12px; }
  .sched-weekdays span { min-width: 0; overflow: hidden; font-size: 9px; }
}

@media (max-width: 430px) {
  .section-title { font-size: 27px !important; }
  .section-header { gap: 10px; }
  .section-header .btn { padding-inline: 11px !important; font-size: 11px !important; }
  .item-card { padding: 11px 12px !important; }
  .ops-row { grid-template-columns: auto minmax(0,1fr); }
  .ops-row-value { grid-column: 2; text-align: left; }
  .scheduler-view-toggle { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

/* Event Schedule calendar: current Operations ivory/gold shell. */
.ops-events-calendar { background: var(--ops-ivory) !important; border: 1px solid var(--ops-line) !important; color: var(--ops-ink) !important; overflow: hidden; }
.ops-events-calendar .ops-events-calendar-grid { background: #e7ddca !important; border-color: #d9cdb7 !important; min-width: 0; }
.ops-events-calendar .ops-events-calendar-day { min-width: 0; background: var(--ops-ivory-raised) !important; border-color: #e7ddca !important; overflow: hidden; }
.ops-events-calendar .ops-events-calendar-day.is-outside { opacity: .55 !important; background: #f2eadb !important; }
.ops-events-calendar .ops-events-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--ops-gold) !important; }
.ops-events-calendar button { color: var(--ops-gold-deep) !important; }
@media (max-width: 650px) { .ops-events-calendar { padding: 10px !important; } .ops-events-calendar-grid { grid-template-columns: repeat(7, minmax(0,1fr)) !important; } .ops-events-calendar .ops-events-calendar-day { min-height: 76px !important; padding: 4px 2px !important; } .ops-events-calendar .ops-events-calendar-day div { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } }

/* Complete Payroll review workflow */
.payroll-review-shell { background: var(--ops-chrome); padding: 22px; box-shadow: 0 18px 45px rgba(0,0,0,.25); }
.payroll-review-card { max-width: 900px; margin: 0 auto; overflow: hidden; border-radius: var(--ops-radius-sheet); }
.payroll-review-topline,
.payroll-final-header { padding: 20px 22px 14px; text-align: center; }
.payroll-kicker,
.payroll-review-topline > span { display: block; color: var(--ops-gold-deep); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 900; }
.payroll-review-topline h2,
.payroll-final-header h2,
.payroll-success h2 { margin: 5px 0; color: var(--ops-ink); font-size: 26px; letter-spacing: -.035em; }
.payroll-review-period { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 16px 16px; }
.payroll-review-period > div { min-width: 210px; text-align: center; }
.payroll-review-period span,
.payroll-review-metrics span,
.payroll-shift-total small,
.payroll-employee-totals small { display: block; color: var(--ops-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 900; }
.payroll-period-arrow { width: 44px; height: 44px; flex: 0 0 44px; color: var(--ops-gold-deep); background: var(--ops-ivory-raised); border: 1px solid var(--ops-gold); border-radius: 50%; font-size: 26px; }
.payroll-review-metrics { background: #f1eadc; border-block: 1px solid var(--ops-line); }
.payroll-review-metrics strong,
.payroll-final-metrics strong { display: block; margin: 4px 0; color: var(--ops-ink); font-size: 18px; overflow-wrap: anywhere; }
.payroll-review-metrics small { color: var(--ops-muted); font-size: 10px; }
.payroll-review-metrics span,
.payroll-review-metrics small,
.payroll-shift-detail-metrics small { color: #6f6047 !important; opacity: 1; }
.payroll-review-metrics .attention strong { color: var(--ops-danger); }
.payroll-review-tabs { margin: 14px 16px; }
.payroll-review-tabs b { min-width: 20px; margin-left: 5px; padding: 2px 5px; color: #fff; background: var(--ops-danger); border-radius: 999px; font-size: 9px; }
.payroll-review-content { display: grid; gap: 12px; padding: 0 16px 20px !important; }
.payroll-integrated-page { width: 100%; max-width: 1180px; margin: 0 auto !important; padding: 6px 0 calc(100px + env(safe-area-inset-bottom)); background: transparent; box-shadow: none; }
.payroll-page-header { margin: 4px 0 14px; padding-inline: 2px; }
.payroll-integrated-page .payroll-review-card { width: 100%; max-width: none; margin: 0; overflow: visible; background: transparent !important; border: 0; border-radius: 0; box-shadow: none !important; }
.payroll-integrated-page .payroll-review-topline { display: none; }
.payroll-integrated-page .payroll-review-period { justify-content: center; gap: 0; margin-bottom: 10px; padding: 0; overflow: hidden; background: #20211e; border: 1px solid #32342f; border-radius: 10px; box-shadow: var(--ops-shadow-card); }
.payroll-integrated-page .payroll-review-period > div { min-width: 0; flex: 1 1 auto; padding: 7px 14px; color: #fff; text-align: center; background: #181a17; }
.payroll-integrated-page .payroll-review-period span { color: #d5d0c5 !important; }
.payroll-integrated-page .payroll-review-period strong { display: block; margin-top: 2px; color: #fff; font-size: 16px; }
.payroll-integrated-page .payroll-period-arrow { width: 48px; height: 52px; flex-basis: 48px; color: #f1bd37; background: #292a27; border: 0; border-radius: 0; }
.payroll-integrated-page .payroll-review-metrics { margin-bottom: 10px; overflow: hidden; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-integrated-page .payroll-review-tabs { margin: 0 0 10px; }
.payroll-integrated-page .payroll-review-content { padding: 0 0 20px !important; }
.payroll-integrated-page .payroll-gig-card,
.payroll-integrated-page .payroll-employee-card,
.payroll-integrated-page .payroll-exception-queue { box-shadow: var(--ops-shadow-card); }
.payroll-gig-list,
.payroll-employee-roster,
.payroll-exception-list { display: grid; gap: 12px; }
.payroll-gig-card,
.payroll-employee-card,
.payroll-exception-queue { position: relative; padding: 0; overflow: hidden; }
.payroll-gig-card.selected { border-color: var(--ops-gold); box-shadow: 0 0 0 2px rgba(214,162,29,.24), var(--ops-shadow-card); }
.payroll-group-selector,
.payroll-group-approved-check { position: absolute; z-index: 3; left: 12px; top: 15px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.payroll-group-selector { cursor: pointer; }
.payroll-group-selector input { position: absolute; opacity: 0; pointer-events: none; }
.payroll-group-selector > span { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; background: #20211e; border: 1px solid #4e5048; border-radius: 6px; font-weight: 900; }
.payroll-group-selector input:checked + span { color: #171813; background: var(--ops-gold); border-color: var(--ops-gold); }
.payroll-group-approved-check { color: #fff; background: var(--ops-success); }
.payroll-group-approved-check.archived { color: #754413; background: #ffe5b4; }
.payroll-gig-card > .payroll-gig-heading { padding-left: 52px; }
.payroll-selection-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--ops-muted-ivory); }
.payroll-selection-tools > span { font-size: 12px; font-weight: 800; }
.payroll-selection-bar { position: sticky; z-index: 12; bottom: calc(72px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; color: var(--ops-ink); background: rgba(255,253,248,.98); border: 1px solid var(--ops-line); border-radius: 12px 12px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,.24); }
.payroll-selection-bar > div { display: grid; gap: 2px; }
.payroll-selection-bar span { color: var(--ops-muted); font-size: 11px; }
.payroll-selection-bar strong { font-size: 21px; }
.payroll-batch-review-page { width: 100%; max-width: 760px; margin: 0 auto !important; padding: 12px 12px calc(100px + env(safe-area-inset-bottom)); background: var(--ops-chrome); }
.payroll-batch-period { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; margin-bottom: 10px; padding: 14px; color: var(--ops-ink); background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-batch-period > span:first-child { color: var(--ops-muted); font-size: 10px; text-transform: uppercase; }
.payroll-batch-period > strong { grid-column: 1; }
.payroll-batch-period > .ops-status { grid-column: 2; grid-row: 1 / span 2; }
.payroll-batch-metrics { margin-bottom: 10px; overflow: hidden; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-batch-metrics small { color: #6f6047 !important; }
.payroll-batch-metrics strong { display: block; margin-top: 4px; color: var(--ops-ink); }
.payroll-batch-readiness { display: grid; gap: 8px; margin-bottom: 12px; padding: 13px; border-radius: var(--ops-radius-card); }
.payroll-batch-readiness.ready { color: #25613b; background: var(--ops-success-soft); }
.payroll-batch-readiness.warning { color: #754413; background: var(--ops-warning-soft); border: 1px solid #e6b45d; }
.payroll-batch-readiness > div { display: flex; gap: 9px; align-items: center; }
.payroll-batch-selected { margin-bottom: 12px; overflow: hidden; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-batch-selected h3 { margin: 0; padding: 14px; color: var(--ops-ink); border-bottom: 1px solid var(--ops-line); }
.payroll-batch-gig-row { width: 100%; display: grid; grid-template-columns: 28px minmax(0,1fr) auto 18px; gap: 10px; align-items: center; padding: 12px 14px; color: var(--ops-ink); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--ops-line); }
.payroll-batch-gig-row:last-child { border-bottom: 0; }
.payroll-batch-gig-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.payroll-batch-gig-row small { color: var(--ops-muted); overflow-wrap: anywhere; }
.payroll-batch-check { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.payroll-batch-check.ready { background: var(--ops-success); }
.payroll-batch-check.warning { color: #754413; background: #ffe5b4; border-radius: 6px; }
.payroll-batch-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.payroll-batch-summary .total { margin-top: 7px; padding-top: 10px; border-top: 1px solid var(--ops-line); font-size: 18px; }
.payroll-batch-confirm { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 13px; color: var(--ops-ink); background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: 10px; }
.payroll-batch-confirm input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--ops-success); }
.payroll-batch-audit { margin: 0 0 12px; color: var(--ops-muted-ivory); font-size: 11px; }
.payroll-batch-actions { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; background: rgba(255,253,248,.98); box-shadow: 0 -10px 26px rgba(0,0,0,.2); }
.payroll-batch-actions button:disabled { opacity: .45; cursor: not-allowed; }
.payroll-gig-card.requires-review,
.payroll-employee-card.requires-review,
.payroll-shift-entry.requires-review { border-color: #e5aa66; }
.payroll-gig-heading { width: 100%; display: grid; grid-template-columns: 48px 34px minmax(0,1fr) auto auto; gap: 10px; align-items: center; min-width: 0; padding: 12px; color: var(--ops-ink); text-align: left; background: transparent; }
.payroll-gig-date { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--ops-line); border-radius: 9px; background: #f3ead7; }
.payroll-gig-date b { color: var(--ops-gold-deep); font-size: 9px; text-transform: uppercase; }
.payroll-gig-date strong { font-size: 18px; }
.payroll-gig-icon { font-size: 24px; }
.payroll-gig-title { min-width: 0; display: grid; gap: 2px; }
.payroll-gig-title > small { color: var(--ops-gold-deep); font-weight: 800; }
.payroll-gig-title > strong { overflow-wrap: anywhere; }
.payroll-gig-title > span { color: var(--ops-muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.payroll-open-arrow { color: var(--ops-gold-deep); font-size: 24px; }
.payroll-shift-list { border-top: 1px solid var(--ops-line); }
.payroll-shift-row { grid-template-columns: auto minmax(0,1fr) minmax(64px,auto) minmax(64px,auto); }
.payroll-shift-person { display: grid; min-width: 0; }
.payroll-shift-person small { color: var(--ops-muted); overflow-wrap: anywhere; }
.payroll-shift-total strong { color: var(--ops-ink); }
.payroll-gig-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: var(--ops-muted); border-top: 1px solid var(--ops-line); font-size: 11px; }
.payroll-person-avatar { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 38px; overflow: hidden; color: #fff; background: #62645b; border-radius: 50%; font-size: 11px; font-weight: 900; }
.payroll-person-avatar.has-image { background: #e9e1d0; }
.payroll-person-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.payroll-employee-controls { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; }
.payroll-employee-roster-row { padding: 0; overflow: hidden; }
.payroll-employee-roster-row > button { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 11px; align-items: center; padding: 12px 14px; color: var(--ops-ink); text-align: left; background: transparent; border: 0; }
.payroll-employee-roster-row .payroll-person-avatar { width: 48px; height: 48px; flex-basis: 48px; }
.payroll-roster-person { min-width: 0; display: grid; gap: 3px; }
.payroll-roster-person strong { overflow-wrap: anywhere; font-size: 16px; }
.payroll-roster-person small { color: var(--ops-muted); font-size: 12px; }
.payroll-roster-pay { display: grid; justify-items: end; gap: 5px; }
.payroll-roster-pay > strong { color: var(--ops-ink); font-size: 18px; }
.payroll-roster-pay .ops-status { min-width: 86px; justify-content: center; text-align: center; }
.payroll-employee-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
.payroll-employee-heading { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 13px; color: var(--ops-ink); text-align: left; background: transparent; }
.payroll-employee-heading > span:nth-child(2) { min-width: 0; display: grid; }
.payroll-employee-heading small { color: var(--ops-muted); overflow-wrap: anywhere; }
.payroll-employee-totals { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #f1eadc; border-block: 1px solid var(--ops-line); }
.payroll-employee-totals > div { padding: 10px; text-align: center; border-right: 1px solid var(--ops-line); }
.payroll-employee-totals > div:last-child { border-right: 0; }
.payroll-employee-totals strong { display: block; margin-top: 3px; color: var(--ops-ink); }
.payroll-employee-history { display: grid; }
.payroll-employee-history button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 11px 13px; color: var(--ops-ink); text-align: left; background: transparent; border-bottom: 1px solid var(--ops-line); }
.payroll-employee-history button:last-child { border-bottom: 0; }
.payroll-employee-history button > span:first-child { min-width: 0; display: grid; }
.payroll-employee-history small { color: var(--ops-muted); overflow-wrap: anywhere; }
.payroll-employee-detail-sheet { max-width: 760px; padding: 0 !important; overflow: hidden; }
.payroll-employee-identity { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; margin: 14px; padding: 16px; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-employee-identity .payroll-person-avatar { width: 58px; height: 58px; }
.payroll-employee-identity h3 { margin: 0; color: var(--ops-ink); font-size: 22px; }
.payroll-employee-identity p { margin: 3px 0 0; color: var(--ops-muted); font-size: 12px; }
.payroll-employee-period { margin: 0 14px 12px; padding: 12px; color: #f7d674; background: var(--ops-chrome-raised); border: 1px solid var(--ops-line-dark); border-radius: 11px; text-align: center; font-weight: 800; }
.payroll-employee-summary { margin: 0 14px 14px; overflow: hidden; border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-employee-summary .ops-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.payroll-employee-summary .ops-metric strong { display: block; margin-top: 4px; color: var(--ops-ink); font-size: 18px; }
.payroll-employee-rate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; color: var(--ops-muted); border-top: 1px solid var(--ops-line); }
.payroll-employee-rate strong { color: var(--ops-ink); }
.payroll-employee-detail-tabs { margin: 0 14px 12px; }
.payroll-employee-tab-panel { display: grid; gap: 10px; margin: 0 14px 14px; }
.payroll-employee-tab-panel h3 { margin: 4px 0 2px; color: var(--ops-ink); }
.payroll-employee-shift-row { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto auto; gap: 10px; align-items: center; padding: 12px; color: var(--ops-ink); text-align: left; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: 11px; }
.payroll-employee-shift-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--ops-chrome); border-radius: 50%; }
.payroll-employee-shift-row > span:nth-child(2),
.payroll-employee-shift-row > span:nth-child(3) { min-width: 0; display: grid; }
.payroll-employee-shift-row small { color: var(--ops-muted); font-size: 10px; overflow-wrap: anywhere; }
.payroll-employee-review-card { display: grid; gap: 7px; padding: 14px; color: #754413; background: var(--ops-warning-soft); border: 1px solid #e6b45d; border-radius: var(--ops-radius-card); }
.payroll-employee-review-card p { margin: 0; font-size: 12px; }
.payroll-employee-review-card button { justify-self: end; }
.payroll-employee-ledger { display: grid; overflow: hidden; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-employee-ledger > div,
.payroll-earning-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ops-line); }
.payroll-employee-ledger > div:last-child,
.payroll-earning-row:last-child { border-bottom: 0; }
.payroll-employee-ledger .total { color: #fff; background: var(--ops-chrome-raised); }
.payroll-earning-list { overflow: hidden; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-earning-row > span { min-width: 0; display: grid; }
.payroll-earning-row small { color: var(--ops-muted); }
.payroll-employee-note { padding: 14px; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-employee-note small { display: block; color: var(--ops-muted); margin-top: 2px; }
.payroll-employee-note p { margin: 8px 0 0; color: var(--ops-ink); line-height: 1.5; }
.payroll-message-sheet { max-width: 560px; }
.payroll-message-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.payroll-exception-queue { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 13px; }
.payroll-exception-queue > div { min-width: 0; display: grid; gap: 3px; }
.payroll-exception-queue > div > span { color: var(--ops-muted); font-size: 12px; overflow-wrap: anywhere; }
.payroll-exception-reasons { margin: 5px 0 0; padding-left: 18px; color: #7d4322; font-size: 11px; line-height: 1.45; }
.payroll-sticky-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payroll-sticky-cta > div { display: grid; gap: 3px; }
.payroll-sticky-cta span { color: var(--ops-muted); font-size: 11px; }
.payroll-shift-details-modal { max-width: 760px; padding: 0 !important; overflow: hidden; }
.payroll-shift-detail-titlebar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #f5c548; background: var(--ops-chrome); }
.payroll-shift-detail-titlebar h2 { margin: 0; color: #f5c548; font-size: 22px; }
.payroll-shift-detail-titlebar .ops-btn-ghost { min-width: 44px; padding: 6px 10px; color: #f5c548; border-color: rgba(214,162,29,.35); }
.payroll-shift-event-card { display: flex; align-items: center; gap: 14px; margin: 14px; padding: 16px; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-shift-event-card .payroll-gig-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--ops-chrome); border-radius: 50%; }
.payroll-shift-event-card strong { color: var(--ops-ink); font-size: 18px; }
.payroll-shift-event-card p { margin: 3px 0 0; color: var(--ops-muted); font-size: 12px; }
.payroll-shift-summary-card { margin: 0 14px 14px; overflow: hidden; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-shift-summary-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; }
.payroll-shift-summary-card h3 { margin: 3px 0; color: var(--ops-ink); font-size: 22px; }
.payroll-shift-summary-card p { margin: 0; color: var(--ops-muted); }
.payroll-shift-route { padding: 11px 16px; color: var(--ops-ink); border-top: 1px solid var(--ops-line); font-size: 12px; }
.payroll-shift-detail-tabs { margin-bottom: 12px; }
.payroll-shift-note-summary { margin: 0 14px 14px; padding: 15px; color: var(--ops-ink); background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-shift-note-summary > div > strong { display: block; margin-bottom: 7px; color: var(--ops-gold-deep); }
.payroll-shift-note-summary p { margin: 3px 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
.payroll-shift-note-item + .payroll-shift-note-item { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--ops-line); }
.payroll-flag-sheet { max-width: 620px; }
.payroll-shift-page { width: 100%; max-width: 760px; margin: 0 auto !important; padding: 12px 12px calc(96px + env(safe-area-inset-bottom)); overflow-x: hidden; background: var(--ops-chrome); }
.payroll-shift-page .payroll-shift-event-card,
.payroll-shift-page .payroll-shift-summary-card,
.payroll-shift-page > .payroll-shift-detail-tabs,
.payroll-shift-page .payroll-compact-employee-list,
.payroll-shift-page .payroll-shift-note-summary { width: calc(100% - 28px); }
.payroll-shift-page .payroll-shift-summary-card > header > div { min-width: 0; }
.payroll-shift-page .payroll-shift-summary-card > header > .ops-status { flex: 0 0 auto; max-width: 118px; white-space: normal; text-align: center; }
.payroll-shift-page-titlebar { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: #f5c548; }
.payroll-shift-page-titlebar h2 { margin: 0; color: #f5c548; font-size: 24px; }
.payroll-shift-page-titlebar button { min-width: 44px; color: #f5c548; border-color: rgba(214,162,29,.4); }
.payroll-shift-page > .payroll-shift-detail-tabs { margin: 0 14px 12px; }
.payroll-compact-employee-list { display: grid; gap: 6px; margin: 0 14px 12px; padding: 8px; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-compact-employee-row { position: relative; display: grid; grid-template-columns: 38px minmax(80px,1fr) 54px 82px; gap: 6px; align-items: center; width: 100%; min-width: 0; padding: 9px 8px 9px 28px; overflow: hidden; color: var(--ops-ink); border: 1px solid var(--ops-line); border-radius: 9px; background: #fffdf8; }
.payroll-employee-remove { position: absolute; top: 3px; left: 4px; width: 24px; height: 24px; min-width: 24px !important; min-height: 24px !important; display: grid; place-items: center; padding: 0 !important; color: #8b2d24 !important; background: #fff4f1 !important; border: 1px solid #df9d95 !important; border-radius: 50%; font-size: 16px !important; font-weight: 900; line-height: 1; z-index: 2; }
.payroll-employee-remove:disabled { opacity: .45; cursor: wait; }
.payroll-compact-employee-row.requires-review { border-color: #e5aa66; }
.payroll-compact-person { min-width: 0; display: grid; gap: 2px; }
.payroll-compact-person strong { overflow-wrap: anywhere; }
.payroll-compact-person span { color: var(--ops-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payroll-compact-money { min-width: 0; display: grid; gap: 2px; text-align: right; }
.payroll-compact-money strong { font-size: 13px; }
.payroll-compact-money span { color: var(--ops-ink); font-size: 12px; font-weight: 800; }
.payroll-compact-actions { min-width: 0; display: grid; justify-items: end; gap: 3px; }
.payroll-compact-actions button { min-height: 24px; padding: 0; color: var(--ops-gold-deep); font-size: 11px; font-weight: 800; background: transparent; border: 0; }
.payroll-shift-bulk-finalize { display: grid; gap: 12px; width: calc(100% - 28px); margin: 0 14px 14px; padding: 15px; color: var(--ops-ink); background: var(--ops-ivory-raised); border: 1px solid var(--ops-gold); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-shift-bulk-finalize h3 { margin: 0; color: var(--ops-ink); }
.payroll-shift-bulk-finalize p { margin: 4px 0 0; color: var(--ops-muted); font-size: 12px; }
.payroll-shift-bulk-finalize > .ops-btn-primary { width: 100%; }
.payroll-adjust-end-sheet { max-width: 640px; }
#payrollAdjustEndTimeForm { display: grid; gap: 10px; margin-top: 12px; }
.payroll-shift-page-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: calc(100% - 28px); margin: 0 14px 14px; padding: 12px 14px; background: rgba(255,250,240,.97); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-shift-page-actions button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.payroll-approval-help { margin: 0; padding: 8px 14px 14px; color: var(--ops-muted); background: rgba(255,250,240,.97); font-size: 11px; text-align: center; }
.payroll-compact-person { appearance: none; padding: 0; color: inherit; text-align: left; background: transparent; border: 0; }
.payroll-compact-actions > span:last-child { display: inline-flex; align-items: center; gap: 7px; }
.payroll-row-arrow { width: 24px; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; color: var(--ops-ink) !important; font-size: 24px !important; line-height: 1; }
.payroll-edit-time-sheet { width: min(100%,680px); height: 100%; max-height: none; padding: 8px 20px 12px !important; overflow: hidden; color: var(--ops-ink); background: #fffdfa !important; border-radius: 24px 24px 0 0 !important; }
.modal.payroll-themed-modal:has(.payroll-edit-time-sheet) { max-height: calc(100dvh - 112px); padding: 0 !important; overflow: hidden; }
.modal.payroll-themed-modal:has(.payroll-edit-time-sheet) > .modal-handle { display: none; }
.payroll-edit-handle { width: 40px; height: 4px; margin: 0 auto 7px; background: #a9abad; border-radius: 99px; }
.payroll-edit-time-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payroll-edit-time-sheet h2 { margin: 0; color: #111; font-size: 23px; }
.payroll-edit-close { width: 44px; height: 44px; color: #111; background: transparent; border: 0; font-size: 36px; }
.payroll-edit-person { display: flex; align-items: center; gap: 10px; margin: 5px 0 7px; }
.payroll-edit-person .payroll-person-avatar { width: 44px; height: 44px; flex: 0 0 44px; aspect-ratio: 1; border-radius: 50%; }
.payroll-edit-person .payroll-person-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.payroll-edit-person strong { color: #111; font-size: 16px; }
.payroll-edit-person p { margin: 1px 0 2px; color: #333; font-size: 11px; }
.payroll-edit-scheduled { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #d7d5d1; border-radius: 10px; }
.payroll-edit-scheduled > span { color: var(--ops-gold-deep); font-size: 20px; }
.payroll-edit-scheduled div { display: grid; gap: 3px; }
.payroll-edit-scheduled small { color: #444; }
.payroll-edit-scheduled strong { color: #111; font-size: 15px; }
#payrollEditTimeForm { display: grid; gap: 7px; margin-top: 8px; }
#payrollEditTimeForm h3 { margin: 0; color: #111; font-size: 15px; }
#payrollEditTimeForm label { display: grid; gap: 3px; color: #111; font-size: 12px; }
#payrollEditTimeForm label > span { font-weight: 700; }
#payrollEditTimeForm label b { color: #b31d16; }
#payrollEditTimeForm input[type="time"],
#payrollEditTimeForm input[type="number"],
#payrollEditTimeForm select,
#payrollEditTimeForm textarea { width: 100%; min-height: 42px; padding: 8px 10px; color: #111; background: #fff; border: 1px solid #c9c9c9; border-radius: 9px; font: inherit; }
#payrollEditTimeForm input[type="time"],
#payrollEditTimeForm select { min-height: 40px; padding: 7px 10px; }
#payrollEditTimeForm textarea { height: 46px; resize: none; }
.payroll-edit-time-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.payroll-edit-adjustments { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.payroll-edit-travel > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; }
.payroll-edit-travel > div > small { color: #555; font-weight: 700; }
.payroll-edit-travel > small { color: #555; font-size: 9px; }
.payroll-edit-break small { display: none; }
.payroll-edit-break select:disabled { color: #222; opacity: 1; background: #f5f4f1; }
.payroll-edit-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid #d7d5d1; border-radius: 11px; }
.payroll-edit-totals > div { display: grid; gap: 2px; padding: 7px; text-align: center; }
.payroll-edit-totals > div + div { border-left: 1px solid #d7d5d1; }
.payroll-edit-totals strong { color: #111; font-size: 16px; }
.payroll-edit-impact { padding: 6px 9px; color: #744712; background: #fff2db; border: 1px solid #e6ad50; border-radius: 8px; font-size: 10px; }
.payroll-edit-notify { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px !important; }
.payroll-edit-notify input { width: 20px; height: 20px; accent-color: #171813; }
.payroll-edit-audit { margin: 0; color: #444; font-size: 10px; }
.payroll-edit-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding-top: 2px; }
.payroll-edit-actions button { min-height: 40px !important; }
.payroll-time-entry-page { width: 100%; max-width: 760px; margin: 0 auto !important; padding: 12px 12px calc(100px + env(safe-area-inset-bottom)); overflow-x: hidden; background: var(--ops-chrome); }
.payroll-time-entry-titlebar { display: flex; align-items: center; gap: 13px; padding: 12px 4px; }
.payroll-time-entry-titlebar h2 { margin: 0; color: #f5c548; }
.payroll-time-entry-titlebar button { min-width: 44px; color: #f5c548; border-color: rgba(214,162,29,.4); }
.payroll-time-entry-person,
.payroll-time-entry-event,
.payroll-time-comparison,
.payroll-time-card,
.payroll-time-warning { margin: 0 0 10px; padding: 16px; color: var(--ops-ink); background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); box-shadow: var(--ops-shadow-card); }
.payroll-time-entry-person { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; }
.payroll-time-entry-person .payroll-person-avatar { width: 64px; height: 64px; }
.payroll-time-entry-person h3,
.payroll-time-entry-event h3 { margin: 0; color: #111; font-size: 22px; }
.payroll-time-entry-person p,
.payroll-time-entry-event p { margin: 3px 0 0; color: #333; }
.payroll-time-entry-event { display: flex; align-items: center; gap: 14px; }
.payroll-time-entry-event .payroll-gig-icon { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--ops-chrome); border-radius: 50%; }
.payroll-time-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.payroll-time-comparison > div { display: grid; gap: 5px; }
.payroll-time-comparison > div + div { padding-left: 18px; border-left: 1px solid var(--ops-line); }
.payroll-time-comparison small { color: #444; }
.payroll-time-comparison strong { color: #111; font-size: 18px; }
.payroll-time-comparison span { color: #a55f0d; font-size: 12px; }
.payroll-time-card h3 { margin: 0 0 13px; color: #111; }
.payroll-clock-event { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 7px 0; }
.payroll-clock-event > div { display: grid; gap: 3px; }
.payroll-clock-event > div:last-child { justify-items: end; }
.payroll-clock-event p { margin: 0; color: #444; }
.payroll-clock-dot { width: 16px; height: 16px; margin-top: 3px; background: #2b974b; border-radius: 50%; }
.payroll-clock-break { display: flex; align-items: center; gap: 22px; padding: 8px 0 8px 0; color: #555; }
.payroll-clock-break .payroll-clock-dot { background: #a8aaac; }
.payroll-pay-calculation > div,
.payroll-manager-verification > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 5px 0; }
.payroll-pay-calculation .total { margin-top: 7px; padding-top: 10px; border-top: 1px solid var(--ops-line); font-size: 20px; font-weight: 800; }
.payroll-pay-calculation .total strong { font-size: 22px; }
.payroll-time-warning { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; color: #754413; background: #fff1d8; border-color: #e6b45d; }
.payroll-time-warning > span { font-size: 27px; }
.payroll-time-warning p { margin: 3px 0 0; }
.payroll-audit-history { padding: 0; overflow: hidden; }
.payroll-audit-history > button { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; color: #111; text-align: left; background: transparent; border: 0; }
.payroll-audit-history > button > span:nth-child(2) { display: grid; gap: 3px; }
.payroll-audit-history small { color: #555; }
.payroll-audit-list { display: grid; gap: 8px; padding: 0 14px 14px; }
.payroll-audit-item { padding: 12px; background: #f4efe4; border: 1px solid var(--ops-line); border-radius: 9px; }
.payroll-audit-item > div { display: flex; justify-content: space-between; gap: 10px; }
.payroll-audit-item p { margin: 4px 0 8px; color: #444; }
.payroll-audit-item code { max-width: 75%; overflow-wrap: anywhere; white-space: normal; font-size: 9px; }
.payroll-time-entry-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px 14px; background: rgba(255,253,250,.97); border: 1px solid var(--ops-line); border-radius: 12px; }
.payroll-time-entry-actions button:disabled { opacity: .45; cursor: not-allowed; }
.payroll-time-entry-finalize-inline { display: grid; gap: 14px; margin-top: 12px; padding: 16px 14px; background: #fffaf0; border: 1px solid var(--ops-gold); border-radius: 12px; box-shadow: 0 8px 24px rgba(39,31,16,.12); }
.payroll-time-entry-finalize-actions { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ops-line); }
.payroll-time-entry-finalize-actions .ops-btn-primary { min-width: 156px; }
.payroll-timecard-finalized-inline { display: flex; justify-content: flex-end; margin-top: 12px; padding: 14px; background: #fffaf0; border: 1px solid var(--ops-line); border-radius: 12px; }
.payroll-finalize-sheet { max-width: 620px; }
.payroll-add-missing-sheet,
.payroll-cancel-shift-sheet { max-width: 640px; }
#payrollAddMissingEmployeeForm,
#payrollCancelShiftForm,
#scheduleShiftCancellationForm { display: grid; gap: 10px; margin-top: 12px; }
.payroll-add-missing-preview { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; color: var(--ops-ink); background: #f2eadb; border-radius: 9px; }
.payroll-cancel-shift-sheet .danger-bg { background: var(--ops-danger); }
.payroll-finalize-summary { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 13px; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-finalize-summary > div { min-width: 0; display: grid; gap: 3px; }
.payroll-finalize-summary span { color: var(--ops-muted); font-size: 12px; overflow-wrap: anywhere; }
#payrollFinalizeTimecardForm { display: grid; gap: 10px; }
#payrollFinalizeTimecardForm textarea { width: 100%; }
.payroll-finalize-clear { margin: 0; padding: 12px; color: #25613b; background: var(--ops-success-soft); border-radius: 9px; }
.payroll-confirm-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ops-ink); }
.payroll-confirm-check input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--ops-success); }
.payroll-shift-detail-header { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: #f1eadc; border-bottom: 1px solid var(--ops-line); }
.payroll-shift-detail-header h2 { margin: 3px 0; color: var(--ops-ink); }
.payroll-shift-detail-header p { margin: 5px 0 0; color: var(--ops-muted); font-size: 12px; line-height: 1.45; }
.payroll-shift-detail-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--ops-line); }
.payroll-shift-detail-metrics strong { display: block; margin-top: 4px; color: var(--ops-ink); overflow-wrap: anywhere; }
.payroll-shift-entries { display: grid; gap: 10px; padding: 16px; }
.payroll-shift-entries h3 { margin: 0; }
.payroll-shift-entry { display: grid; gap: 10px; padding: 13px; background: var(--ops-ivory-raised); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); }
.payroll-shift-entry > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; }
.payroll-shift-entry > header > div { min-width: 0; display: grid; }
.payroll-shift-entry > header span:not(.payroll-person-avatar):not(.ops-status) { color: var(--ops-muted); font-size: 12px; }
.payroll-shift-entry-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.payroll-shift-entry-metrics > div { min-width: 0; padding: 8px; background: #f2eadb; border-radius: 8px; }
.payroll-shift-entry-metrics small { display: block; color: var(--ops-muted); font-size: 9px; text-transform: uppercase; }
.payroll-shift-entry-metrics strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 11px; }
.payroll-shift-entry-metrics span { display: block; margin-top: 2px; color: var(--ops-muted); font-size: 9px; }
.payroll-shift-notes { padding: 9px; color: var(--ops-ink); background: #f5efe4; border-radius: 8px; }
.payroll-shift-notes p { margin: 3px 0 0; color: var(--ops-muted); font-size: 11px; }
.payroll-sheet-actions { align-items: center; justify-content: flex-end; }
.payroll-shift-details-modal > .payroll-sheet-actions > button { flex: 1 1 0; }
.payroll-final-review { min-height: 520px; }
.payroll-final-header p { margin: 3px 0 0; color: var(--ops-muted); }
.payroll-final-ledger { display: grid; gap: 0; margin: 18px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-card); overflow: hidden; }
.payroll-final-ledger > div { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--ops-line); }
.payroll-final-ledger > div:last-child { border-bottom: 0; }
.payroll-final-ledger .total { color: #fff; background: var(--ops-chrome-raised); }
.payroll-final-note { margin: 18px; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
.payroll-final-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--ops-line); }
.payroll-confirmation { position: fixed; z-index: 20; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); width: min(720px,calc(100vw - 24px)); padding: 18px; transform: translateX(-50%); box-shadow: var(--ops-shadow-float); border: 1px solid #d6bc79; }
.payroll-confirmation h3 { margin: 5px 0; font-size: 22px; }
.payroll-confirmation p { color: var(--ops-muted); line-height: 1.5; }
.payroll-sheet-handle { width: 40px; height: 4px; margin: -7px auto 14px; background: #c39a36; border-radius: 999px; }
.payroll-success { max-width: 620px; display: grid; justify-items: center; gap: 12px; padding: 42px 24px; text-align: center; }
.payroll-success-icon { width: 64px; height: 64px; display: grid; place-items: center; color: #fff; background: var(--ops-success); border-radius: 50%; font-size: 34px; font-weight: 900; }
.payroll-success p { max-width: 480px; margin: 0; color: var(--ops-muted); line-height: 1.55; }
.payroll-success-total { display: grid; gap: 3px; padding: 14px 30px; background: #f1eadc; border-radius: var(--ops-radius-card); }
.payroll-success-total span { color: var(--ops-muted); font-size: 10px; text-transform: uppercase; }
.payroll-success-total strong { font-size: 24px; }

@media (max-width: 650px) {
  .payroll-review-shell { padding: 12px; }
  .payroll-integrated-page { padding: 0 2px calc(96px + env(safe-area-inset-bottom)); }
  .payroll-integrated-page .payroll-page-header { margin: 3px 0 12px; }
  .payroll-integrated-page .ops-page-title { font-size: 27px; }
  .payroll-integrated-page .payroll-review-period { justify-content: center; padding: 0; }
  .payroll-integrated-page .payroll-review-period > div { min-width: 0; flex: 1 1 auto; padding-inline: 8px; text-align: center; }
  .payroll-review-content { padding-inline: 10px !important; }
  .payroll-gig-heading { grid-template-columns: 44px 30px minmax(0,1fr) auto; }
  .payroll-gig-heading .payroll-approval { grid-column: 3; justify-self: start; }
  .payroll-gig-heading .payroll-open-arrow { grid-column: 4; grid-row: 1 / span 2; }
  .payroll-shift-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .payroll-shift-pay { grid-column: 3; }
  .payroll-employee-controls { grid-template-columns: 1fr auto; }
  .payroll-employee-controls > label { grid-column: 1 / -1; }
  .payroll-employee-roster-row > button { grid-template-columns: 42px minmax(0,1fr) 76px 16px; gap: 6px; padding: 10px; }
  .payroll-employee-roster-row .payroll-person-avatar { width: 42px; height: 42px; flex-basis: 42px; }
  .payroll-roster-person strong { font-size: 14px; }
  .payroll-roster-person small { font-size: 10px; }
  .payroll-roster-pay > strong { font-size: 15px; }
  .payroll-roster-pay .ops-status { min-width: 0; padding-inline: 5px; font-size: 9px; }
  .payroll-exception-queue { grid-template-columns: auto minmax(0,1fr); }
  .payroll-exception-queue > button { grid-column: 2; justify-self: start; }
  .payroll-employee-identity { grid-template-columns: auto minmax(0,1fr); }
  .payroll-employee-identity > .ops-status { grid-column: 2; justify-self: start; }
  .payroll-employee-shift-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .payroll-employee-shift-row > span:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
  .payroll-employee-shift-row > .ops-status { grid-column: 2; justify-self: start; }
  .payroll-employee-shift-row > span:last-child { display: none; }
  .payroll-employee-detail-sheet > .payroll-sheet-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payroll-shift-entry-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payroll-sticky-cta { align-items: stretch; flex-direction: column; }
  .payroll-edit-time-sheet { padding-inline: 18px !important; }
  .payroll-edit-time-sheet h2 { font-size: 25px; }
  .payroll-edit-person .payroll-person-avatar { width: 44px; height: 44px; flex-basis: 44px; }
  .payroll-time-comparison strong { font-size: 15px; }
  .payroll-clock-event { grid-template-columns: 20px minmax(0,1fr) auto; }
  .payroll-clock-event p { font-size: 11px; }
  .payroll-time-entry-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payroll-time-entry-finalize-actions { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); }
  .payroll-time-entry-finalize-actions .ops-btn-primary { min-width: 0; }
  .payroll-shift-page-actions { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .app { max-width: 1120px !important; }
  main { padding-inline: 32px !important; }
  .stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .payroll-review-shell { max-width: 760px; margin-inline: auto !important; }
}