/* Page styles for the attendance area — owned by that area's redesign. Build on theme.css tokens (--ui-*) and ui-* classes.
   Scopes:
     .pg-att     attendance/* pages (my attendance, payroll, team records, leave, payouts, assignments, forms)
     .pg-staff   core/staff_dashboard.html (the non-admin dashboard)
     .staff-shell  mobile staff chrome (app bar, tab bar, account sheet) — overrides staff-mobile.css */

/* ════════════════ Attendance pages ════════════════ */

/* Section tabs: one scrollable row on phones instead of wrapping */
.pg-att-tabs-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pg-att-tabs-wrap::-webkit-scrollbar { display: none; }
.pg-att-tabs { flex-wrap: nowrap; }
.pg-att-tabs .lucide { width: 15px; height: 15px; }
.pg-att-tabs .active .lucide, .pg-att-tabs [aria-current="page"] .lucide { color: var(--ui-primary); }

.pg-att .ui-card-head > a .lucide { width: 14px; height: 14px; }
.pg-att .ui-card.flush > .ui-card-head { align-items: center; }
.pg-att .ui-card.flush > .ui-card-head > form { flex: none; }

/* Narrow form cards */
.pg-att-narrow { width: 100%; max-width: 640px; }
.pg-att-danger-zone { border-color: #f3d4d4; }
.pg-att-danger-zone form { display: flex; }

/* Table helpers */
.pg-att .ui-table .pg-att-actions-col { text-align: right; }
.pg-att .ui-table .row-actions { flex-wrap: wrap; align-items: center; }
.pg-att .ui-table td.table-actions { text-align: right; }
.pg-att-nowrap { white-space: nowrap; }
.pg-att .ui-table td.pg-att-truncate { max-width: 260px; overflow: hidden; color: var(--ui-text-2); text-overflow: ellipsis; white-space: nowrap; }
.pg-att .ui-table td .ui-cell-title + .ui-tag { margin-top: 4px; }
.pg-att .ui-table td .ui-empty { padding: 28px 12px; }
.pg-att-person { display: inline-flex; align-items: center; gap: 10px; }
.pg-att-person .ui-avatar { width: 30px; height: 30px; font-size: 12px; }
.pg-att-push-status { margin: 6px 0 0; text-align: right; }
.pg-att-push-status:empty { display: none; }
.pg-att-filter-label { font-size: 12px; font-weight: 700; }
.pg-att .ui-card-head .ui-toolbar select { min-width: 150px; }
.pg-att-pager:has(nav) { padding: 12px 20px; border-top: 1px solid var(--ui-hairline); }
.pg-att-daily { max-height: 320px; overflow-y: auto; }
.pg-att-daily thead th { position: sticky; top: 0; }

/* Date range toolbar (records) */
.pg-att-range .pg-att-date { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-text-2); font-size: 12.5px; font-weight: 700; }
.pg-att-range .ui-help { margin-left: 4px; }

/* Push-status line under the header (my attendance) */
.pg-att-push-note { margin-top: -12px; }
.pg-att-push-note:empty { display: none; }

/* Payroll */
.pg-att-kpi-accent { background: var(--ui-primary-soft); }
.pg-att-kpi-accent .ui-kpi-value { color: var(--ui-primary); }
.pg-att .ui-list-row .ui-avatar .lucide { width: 16px; height: 16px; }
.pg-att-avatar-good { background: var(--ui-good-bg); color: var(--ui-good); }
.pg-att-time { font-size: 12px; font-weight: 600; white-space: nowrap; }
.pg-att .ui-list-row > b { justify-self: end; }

/* Payouts: side form */
.pg-att-side-form .ui-form { gap: 14px; }

/* Today's shift cards (attendance/partials/status_rows.html) */
.pg-att-shifts { display: grid; gap: 12px; }
.pg-att-shift {
  display: grid; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
}
.pg-att-shift.is-in { border-color: #c8ecd6; box-shadow: inset 3px 0 0 var(--ui-good); }
.pg-att-shift-head { display: flex; align-items: center; gap: 12px; }
.pg-att-shift-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ui-primary-soft); color: var(--ui-primary); }
.pg-att-shift-mark .lucide { width: 17px; height: 17px; }
.pg-att-shift.is-in .pg-att-shift-mark { background: var(--ui-good-bg); color: var(--ui-good); }
.pg-att-shift.is-done .pg-att-shift-mark { background: var(--ui-sunken); color: var(--ui-muted); }
.pg-att-shift-title { display: grid; flex: 1; min-width: 0; }
.pg-att-shift-title strong { overflow: hidden; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.pg-att-shift-title small { color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.pg-att-shift-note { font-size: 13px; }
.pg-att-sessions { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-hairline); }
.pg-att-sessions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--ui-hairline); font-size: 13px; }
.pg-att-session-time { font-weight: 700; }
.pg-att-today-hours { display: flex; align-items: center; gap: 6px; color: var(--ui-text-2); font-size: 13px; }
.pg-att-today-hours .lucide { width: 15px; height: 15px; color: var(--ui-muted); }
.pg-att-shift .ui-alert { margin: 0; }
.pg-att-status:empty { display: none; }

@media (max-width: 720px) {
  .pg-att .ui-page-head .ui-actions { width: 100%; }
  .pg-att .ui-page-head .ui-actions .ui-btn { flex: 1 1 auto; }
  .pg-att .ui-card.flush > .ui-card-head { flex-wrap: wrap; padding: 14px 16px; }
  .pg-att .ui-table th:first-child, .pg-att .ui-table td:first-child { padding-left: 16px; }
  .pg-att .ui-table th:last-child, .pg-att .ui-table td:last-child { padding-right: 16px; }
  .pg-att-range { align-items: stretch; }
  .pg-att-range .pg-att-date { flex: 1 1 140px; }
  .pg-att-range .pg-att-date input { flex: 1; min-width: 0; }
  .pg-att-range .ui-help { flex-basis: 100%; margin-left: 0; }
  .pg-att-pager:has(nav) { padding: 12px 16px; }
}

/* ════════════════ Staff dashboard (core/staff_dashboard.html) ════════════════ */

.pg-staff { max-width: 1240px; }
.pg-staff .ui-page-head h1 { overflow-wrap: anywhere; }

/* Layout: KPI strip on top, tasks/alerts left, attendance/payroll/actions right.
   On narrower screens the columns dissolve and `order` puts the attendance
   card first — it's the primary action for staff. */
.pg-staff-grid {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "kpis kpis" "main side";
}
.pg-staff-kpis { grid-area: kpis; }
.pg-staff-main { grid-area: main; display: grid; gap: 16px; min-width: 0; }
.pg-staff-side { grid-area: side; display: grid; gap: 16px; min-width: 0; }

/* KPI strip bits */
.pg-staff .ui-kpi-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pg-staff .ui-kpi-value strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pg-staff .ui-kpi-value small { margin-left: 0; }
.pg-staff-meter { display: block; height: 6px; margin-top: 2px; border-radius: 999px; background: var(--ui-sunken); overflow: hidden; }
.pg-staff-meter i { display: block; height: 100%; border-radius: 999px; background: var(--ui-series-1); transition: width .4s ease; }

/* Tinted icon chips (task rows, quick actions) */
.pg-staff-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ui-primary-soft); color: var(--ui-primary); }
.pg-staff-ico .lucide { width: 17px; height: 17px; }
.pg-staff-ico.tone-primary { background: var(--ui-primary-soft); color: var(--ui-primary); }
.pg-staff-ico.tone-success { background: var(--ui-good-bg); color: var(--ui-good); }
.pg-staff-ico.tone-warning { background: var(--ui-warn-bg); color: var(--ui-warn); }
.pg-staff-ico.tone-danger { background: var(--ui-bad-bg); color: var(--ui-bad); }
.pg-staff-ico.tone-info { background: var(--ui-info-bg); color: var(--ui-info); }
.pg-staff-ico.tone-accent { background: #fff4de; color: #9a5b00; }

/* Task list */
.pg-staff-list .ui-list-row { padding: 12px 20px; }
.pg-staff-row-end { display: inline-flex; align-items: center; gap: 8px; }
.pg-staff-chev { width: 16px; height: 16px; color: #b9bece; }
.pg-staff-tasks .ui-empty { padding: 36px 16px; }

/* Alerts */
.pg-staff-alert { align-items: center; color: inherit; text-decoration: none; transition: filter .15s; }
.pg-staff-alert:hover { filter: brightness(.98); }
.pg-staff-alert > .lucide:first-child { align-self: flex-start; margin-top: 2px; }
.pg-staff-alert-body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.pg-staff-alert-body strong { font-size: 13.5px; font-weight: 700; }
.pg-staff-alert-body small { font-size: 12px; opacity: .85; }
.pg-staff-alert-cta { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pg-staff-alert-cta .lucide { width: 14px !important; height: 14px !important; margin: 0 !important; }

/* Attendance card */
.pg-staff-attend { gap: 12px; }
.pg-staff-attend.is-in { border-color: #c8ecd6; box-shadow: inset 0 3px 0 var(--ui-good), var(--ui-shadow); }
.pg-staff-attend.is-out { box-shadow: inset 0 3px 0 var(--ui-primary), var(--ui-shadow); }
.pg-staff-attend.is-unassigned { box-shadow: inset 0 3px 0 var(--ui-warn), var(--ui-shadow); }
.pg-staff-attend-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pg-staff-attend-title .ui-eyebrow { margin-bottom: 2px; }
.pg-staff-attend-title h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.pg-staff-attend.is-in .pg-staff-attend-title h2 { color: var(--ui-good); }
.pg-staff-attend.is-out .pg-staff-attend-title h2 { color: var(--ui-primary); }
.pg-staff-attend.is-done .pg-staff-attend-title h2 { color: var(--ui-text-2); }
.pg-staff-attend-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-primary-soft); color: var(--ui-primary); }
.pg-staff-attend-mark .lucide { width: 18px; height: 18px; }
.pg-staff-attend.is-in .pg-staff-attend-mark { background: var(--ui-good); color: #fff; }
.pg-staff-attend.is-done .pg-staff-attend-mark,
.pg-staff-attend.is-disabled .pg-staff-attend-mark { background: var(--ui-sunken); color: var(--ui-muted); }
.pg-staff-attend.is-unassigned .pg-staff-attend-mark { background: var(--ui-warn-bg); color: var(--ui-warn); }
.pg-staff-attend-time { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.pg-staff-attend-time span { color: var(--ui-muted); font-weight: 600; }
.pg-staff-attend-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ui-text-2); font-size: 13px; font-weight: 600; }
.pg-staff-attend-place .lucide { width: 15px; height: 15px; color: var(--ui-good); }
.pg-staff-attend-place em { color: var(--ui-muted); font-style: normal; font-weight: 500; }
.pg-staff-attend .ui-alert { margin: 0; }
.pg-staff-status:empty, .pg-staff-push:empty { display: none; }
.pg-staff-attend .ui-btn.subtle { color: var(--ui-primary); }

/* Payroll card */
.pg-staff-payroll-body { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-sunken); }
.pg-staff-payroll-body .ui-eyebrow { margin: 0; font-size: 11px; }
.pg-staff-payroll-body strong { color: var(--ui-primary); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pg-staff-payroll-meta { color: var(--ui-text-2); font-size: 12.5px; font-weight: 600; }
.pg-staff-payroll .ui-btn .lucide { width: 15px; height: 15px; }

/* Quick actions */
.pg-staff-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pg-staff-action {
  display: grid; justify-items: center; align-content: start; gap: 7px; padding: 12px 6px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface);
  color: var(--ui-text); text-align: center; text-decoration: none; transition: border-color .15s, background .15s;
}
.pg-staff-action:hover { border-color: var(--ui-border-strong); background: #fafbfe; }
.pg-staff-action:focus-visible { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-focus-ring); }
.pg-staff-action small { font-size: 11.5px; font-weight: 700; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }

@media (max-width: 1100px) {
  .pg-staff-grid { display: flex; flex-direction: column; align-items: stretch; }
  .pg-staff-main, .pg-staff-side { display: contents; }
  .pg-staff-attend { order: 1; }
  .pg-staff-kpis { order: 2; }
  .pg-staff-tasks { order: 3; }
  .pg-staff-alerts { order: 4; }
  .pg-staff-payroll { order: 5; }
  .pg-staff-actions { order: 6; }
  .pg-staff-action-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (max-width: 720px) {
  .pg-staff-head-actions { display: none; } /* same links live in the account sheet / payroll card */
  .pg-staff-list .ui-list-row { padding: 12px 16px; }
  .pg-staff .ui-kpi { padding: 14px; }
  .pg-staff .ui-kpi-value strong { font-size: 22px; }
}
@media (max-width: 419px) {
  .pg-staff-list .ui-list-row { grid-template-columns: auto minmax(0, 1fr); }
  .pg-staff-row-end { grid-column: 2; justify-content: space-between; }
  .pg-staff-alert { flex-wrap: wrap; }
  .pg-staff-alert-cta { margin-left: 26px; }
}

/* ════════════════ Mobile staff shell chrome (overrides staff-mobile.css) ════════════════ */

.staff-shell .staff-appbar-btn {
  width: 40px; height: 40px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-text-2); box-shadow: none;
}
.staff-shell .staff-appbar-btn:hover { background: var(--ui-sunken); color: var(--ui-text); }
.staff-shell .staff-appbar-btn .lucide { width: 18px; height: 18px; }
.staff-shell .staff-appbar-count { border-color: var(--ui-surface); background: var(--ui-bad); }
.staff-shell .staff-appbar-brand img { height: 30px; }

@media (max-width: 980px) {
  .staff-shell .staff-appbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    min-height: 60px;
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid var(--ui-border);
    backdrop-filter: saturate(180%) blur(12px);
  }
  .staff-shell .staff-tabbar {
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .05);
  }
}

.staff-shell .staff-tab { color: var(--ui-muted); font-size: 10.5px; font-weight: 700; }
.staff-shell .staff-tab .lucide { width: 20px; height: 20px; }
.staff-shell .staff-tab.is-active { color: var(--ui-primary); }
.staff-shell .staff-tab.is-active .lucide {
  width: 44px; height: 26px; padding: 3px 12px; border-radius: 999px;
  background: var(--ui-primary-soft); box-sizing: border-box;
}
.staff-shell .staff-tab-primary { color: var(--ui-primary); }
.staff-shell .staff-tab-orb {
  width: 50px; height: 50px; margin-top: -22px;
  border: 4px solid var(--ui-surface); background: var(--ui-primary);
  box-shadow: 0 8px 18px rgba(11, 15, 138, .22);
}
.staff-shell .staff-tab-orb .lucide { width: 22px; height: 22px; }
.staff-shell .staff-tab:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -4px; border-radius: 12px; }

/* Account sheet */
.staff-shell .sheet-backdrop { background: rgba(15, 23, 42, .45); }
.staff-shell .account-sheet {
  gap: 16px; padding: 10px 20px calc(20px + var(--sd-safe-b, 0px));
  border: 1px solid var(--ui-border); border-bottom: 0; border-radius: 16px 16px 0 0;
  background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-pop);
}
.staff-shell .sheet-grip { background: var(--ui-border-strong); }
.staff-shell .account-identity > div { flex: 1; min-width: 0; }
.staff-shell .account-avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 18px; }
.staff-shell .account-identity strong { display: block; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.staff-shell .account-identity p { color: var(--ui-muted); font-size: 12.5px; }
.staff-shell .account-close { flex: none; }
.staff-shell .account-facts > div { padding: 10px 12px; border: 1px solid var(--ui-hairline); border-radius: var(--ui-radius-sm); background: var(--ui-sunken); }
.staff-shell .account-facts dt { color: var(--ui-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.staff-shell .account-facts dd { font-size: 13.5px; }
.staff-shell .account-links { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; }
.staff-shell .account-links a,
.staff-shell .account-links button { min-height: 48px; padding: 0 14px; border-top: 1px solid var(--ui-hairline); color: var(--ui-text); font-size: 14px; font-weight: 600; text-decoration: none; }
.staff-shell .account-links > :first-child { border-top: 0; }
.staff-shell .account-links a:hover,
.staff-shell .account-links button:hover { background: var(--ui-sunken); }
.staff-shell .account-links .lucide { width: 18px; height: 18px; }
.staff-shell .account-links .lucide:last-child { width: 16px; height: 16px; color: #b9bece; }
.staff-shell .account-signout {
  min-height: 44px; border: 1px solid #f3c4c4; border-radius: var(--ui-radius-sm);
  background: var(--ui-surface); color: var(--ui-bad); font-size: 14px; font-weight: 700;
}
.staff-shell .account-signout:hover { background: var(--ui-bad-bg); }
.staff-shell .account-signout .lucide { width: 16px; height: 16px; }