/* Presentation only: operations, attendance, payroll and administration. */
:root {
    --ops-ink: #283044;
    --ops-blue: #78a1bb;
    --ops-mint: #ebf5ee;
    --ops-beige: #bfa89e;
    --ops-taupe: #8b786d;
    --ops-taupe-text: #77675e;
    --ops-muted: #657080;
    --ops-line: #dfe7e8;
    --ops-shadow: 0 8px 26px rgb(40 48 68 / 4%);
    --pr-ink: #283044;
    --pr-muted: #657080;
    --pr-border: #dfe7e8;
    --pr-soft: #f4f7f6;
    --pr-purple: #283044;
    --pr-purple-dark: #43516b;
    --pr-green: #537664;
    --pr-blue: #78a1bb;
    --pr-orange: #8b786d;
}
.wh-page {
    --wh-purple: #283044; --wh-purple-2: #78a1bb; --wh-blue: #78a1bb;
    --wh-green: #537664; --wh-cyan: #78a1bb; --wh-orange: #8b786d;
    --wh-ink: #283044; --wh-muted: #657080; --wh-line: #dfe7e8; --wh-soft: #f4f7f6;
}
.ss-page { --ss-purple: #283044; --ss-ink: #283044; --ss-muted: #657080; --ss-line: #dfe7e8; }
.modern-operations-page { width: 100%; max-width: 1520px; margin: 0 auto; padding: 10px 0 36px; color: var(--ops-ink); }
:is(.sites-page, .entry-types-page, .ad-page, .audit-page, .wh-page, .ss-page, .pr-page) {
    margin-top: 0; padding-top: 10px; font-family: inherit; color: var(--ops-ink);
}
.sites-page { width: 100%; max-width: 1520px; }
.entry-types-page { width: 100%; max-width: 1120px; }
.ad-page { padding-inline: 0; max-width: 1520px; }
.audit-page { width: 100%; max-width: 1520px; }
.modern-sync-page { max-width: 1180px; }
:is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) {
    position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px;
    min-height: 148px; padding: 28px 30px; margin-bottom: 22px; border: 1px solid var(--ops-line);
    border-radius: 22px; color: var(--ops-ink);
    background: linear-gradient(110deg, #ebf5ee 0%, #f6faf7 22%, #fff 68%);
    box-shadow: var(--ops-shadow);
}
:is(.wh-hero, .ss-hero, .pr-hero)::before,
:is(.wh-hero, .ss-hero, .pr-hero)::after,
.pr-hero-pattern { display: none; }
:is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) h1 {
    margin: 7px 0 8px; color: var(--ops-ink); font-size: clamp(28px, 2.4vw, 37px); font-weight: 750; letter-spacing: -.65px; line-height: 1.25;
}
:is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) p {
    margin: 0; max-width: 740px; color: var(--ops-muted); font-size: 14px; line-height: 1.85;
}
:is(.modern-ops-eyebrow, .sites-eyebrow, .entry-types-header > div > span, .wh-eyebrow, .ss-eyebrow, .pr-eyebrow) {
    color: var(--ops-taupe-text); font-size: 12px; letter-spacing: .01em; font-weight: 650;
}
.modern-ops-eyebrow { display: inline-block; }
.wh-live-dot, .ss-eyebrow > span { background: var(--ops-blue); box-shadow: 0 0 0 4px rgb(120 161 187 / 12%); }
.pr-eyebrow-icon { color: var(--ops-ink); background: #e6eef2; }
.ss-hero-month { color: var(--ops-taupe-text); font-size: 14px; }
.wh-sync-state { color: var(--ops-ink); background: #ffffffad; border-color: var(--ops-line); border-radius: 13px; }
.wh-sync-state small { color: var(--ops-muted); }
.wh-sync-state strong { color: var(--ops-ink); }
.wh-sync-icon { color: #506d82; }
.modern-ops-hero-copy { flex: 1; min-width: 220px; }
.modern-ops-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin: 0 0 22px; }
.modern-ops-stats article { padding: 23px 25px; border: 1px solid var(--ops-line); border-radius: 18px; background: #fff; box-shadow: var(--ops-shadow); }
.modern-ops-stats article:first-child { background: #f0f5f8; border-color: #d5e2e9; }
.modern-ops-stats article > span, .modern-ops-stats article > small { display: block; }
.modern-ops-stats article > span { color: var(--ops-muted); font-size: 13px; }
.modern-ops-stats article > strong { display: block; margin: 8px 0 5px; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.25; }
.modern-ops-stats article > small { color: var(--ops-muted); font-size: 12px; line-height: 1.7; }
.modern-ops-stats article.is-attention { background: #f6f0ed; border-color: #e6d8d0; }
.modern-ops-stats .modern-ops-date-value { font-size: 24px; }
.modern-ops-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border: 1px solid #dce5e9; border-radius: 999px; background: #f0f5f8; color: #495e72; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.modern-ops-badge.is-positive { color: #3e6651; border-color: #d6e7db; background: var(--ops-mint); }
.modern-ops-badge.is-muted { color: var(--ops-muted); background: #f0f3f4; }
.modern-ops-badge.is-attention { color: #70574b; border-color: #e3d4cc; background: #f4ece7; }
.modern-ops-guide { margin: 0 0 22px; border: 1px solid var(--ops-line); border-radius: 16px; background: #ffffffb5; }
.modern-ops-guide > summary { display: flex; align-items: center; gap: 12px; padding: 15px 19px; list-style: none; cursor: pointer; color: var(--ops-ink); font-size: 13px; font-weight: 600; }
.modern-ops-guide > summary::-webkit-details-marker { display: none; }
.modern-ops-guide-icon { display: inline-grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border: 1px solid #cbdce5; border-radius: 50%; color: #45657b; background: #edf4f8; font-size: 13px; font-weight: 700; font-family: system-ui, sans-serif; }
.modern-ops-guide-toggle { margin-inline-start: auto; color: var(--ops-taupe-text); font-weight: 400; font-size: 12px; }
.modern-ops-guide-toggle::after { content: "⌄"; display: inline-block; margin-inline-start: 10px; font-size: 15px; }
.modern-ops-guide[open] .modern-ops-guide-toggle::after { transform: rotate(180deg); }
.modern-ops-guide[open] > summary { border-bottom: 1px solid var(--ops-line); }
.modern-ops-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 24px; }
.modern-ops-guide-grid strong { color: var(--ops-ink); font-size: 14px; font-weight: 650; }
.modern-ops-guide-grid p { color: var(--ops-muted); font-size: 13px; line-height: 1.9; margin: 7px 0 0; }
.modern-ops-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; margin: 0 0 22px; border: 1px solid #d9e6e0; border-radius: 14px; background: #f0f7f2; color: var(--ops-ink); font-size: 13px; line-height: 1.9; }
.modern-ops-note strong { display: block; font-weight: 650; }
.modern-ops-note span:not(.modern-ops-guide-icon) { color: var(--ops-muted); }
.modern-ops-note > strong { flex-shrink: 0; }
.modern-ops-panel { margin-bottom: 25px; border: 1px solid var(--ops-line); border-radius: 20px; background: #fff; box-shadow: var(--ops-shadow); overflow: hidden; scroll-margin-top: 30px; }
.modern-ops-panel-head, .modern-ops-section-label { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px 25px; }
.modern-ops-section-label { padding: 0 2px; margin: 26px 0 17px; }
:is(.modern-ops-panel-head, .modern-ops-section-label, .modern-ops-inline-heading) h2 { margin: 0 0 6px; color: var(--ops-ink); font-size: 19px; font-weight: 700; line-height: 1.4; }
.modern-ops-section-label .modern-ops-eyebrow { margin-bottom: 6px; }
:is(.modern-ops-panel-head, .modern-ops-section-label, .modern-ops-inline-heading) p { margin: 0; color: var(--ops-muted); font-size: 13px; line-height: 1.8; }
.modern-ops-inline-heading { margin: 0 0 18px; }
.modern-ops-inline-heading h2 { font-size: 17px; }
.modern-ops-panel > .modern-ops-note { margin-inline: 24px; }
.modern-ops-table-scroll { overflow: auto; overscroll-behavior-x: contain; }
.modern-ops-table { width: 100%; min-width: 660px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.modern-ops-table th { padding: 15px 20px; background: #f3f7f6; color: var(--ops-muted); font-size: 12px; font-weight: 650; border-block: 1px solid var(--ops-line); white-space: nowrap; }
.modern-ops-table td { padding: 17px 20px; color: var(--ops-ink); border-bottom: 1px solid #edf1f1; vertical-align: middle; background: #fff; }
.modern-ops-table tbody tr:last-child td { border-bottom: 0; }
.modern-ops-table tbody tr:hover td { background: #f7faf8; }
.modern-ops-date { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; color: var(--ops-muted) !important; }
.modern-ops-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.modern-ops-hero .modern-ops-jump { margin: 0; }
.modern-ops-jump a { text-decoration: none; padding: 9px 15px; border: 1px solid #d9e4e7; border-radius: 10px; background: #ffffffb0; color: var(--ops-ink); font-size: 13px; font-weight: 600; }
.modern-ops-jump a:hover { background: #e9f1f5; }
.modern-ops-footer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.modern-permissions-table { min-width: 1200px; }
.modern-permissions-table th:first-child, .modern-permissions-table td:first-child { position: sticky; right: 0; z-index: 2; min-width: 155px; box-shadow: -5px 0 12px rgb(40 48 68 / 4%); }
.modern-permissions-table th:first-child { background: #f3f7f6; }
.modern-permissions-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ops-ink); cursor: pointer; }
.modern-users-page .form-control { border-radius: 9px; border-color: #d7e1e6; font-size: 13px; padding: 8px 10px; }
.modern-users-page td:nth-child(2) { direction: ltr; text-align: right; }
.modern-users-page .btn-sm { min-height: 33px; border-radius: 9px; padding: 6px 12px; font-size: 12px; }
.modern-users-page .modern-ops-table td:nth-child(3) form { gap: 8px !important; }
.modern-sync-page .modern-ops-table { min-width: 570px; }

/* Keep existing control contracts and states; replace their visual treatment. */
:is(.sites-add-btn, .entry-types-add-btn, .wh-btn-primary, .ss-btn-primary, .pr-btn-primary, .ad-btn-primary, .ad-btn-save),
.sites-page :is(.save-btn, .filter-btn), .entry-types-page .save-btn {
    color: #fff; border-color: var(--ops-ink); background: var(--ops-ink); box-shadow: 0 4px 10px rgb(40 48 68 / 8%); border-radius: 11px;
}
:is(.sites-add-btn, .entry-types-add-btn, .wh-btn-primary, .ss-btn-primary, .pr-btn-primary, .ad-btn-primary, .ad-btn-save):hover,
.sites-page :is(.save-btn, .filter-btn):hover, .entry-types-page .save-btn:hover {
    color: #fff; border-color: #43516b; background: #43516b; box-shadow: 0 5px 14px rgb(40 48 68 / 12%);
}
:is(.wh-btn-light, .wh-btn-accent, .ss-btn-glass, .ss-btn-white, .ss-btn-outline, .pr-btn-ghost, .pr-btn-outline, .ad-btn-secondary) {
    color: var(--ops-ink); border: 1px solid #cfdee5; background: #fff; box-shadow: none; backdrop-filter: none;
}
:is(.wh-btn-light, .wh-btn-accent, .ss-btn-glass, .ss-btn-white, .ss-btn-outline, .pr-btn-ghost, .pr-btn-outline, .ad-btn-secondary):hover { color: var(--ops-ink); background: #e9f1f5; border-color: #b7cfdd; }
:is(.wh-btn, .ss-btn, .pr-btn, .ad-btn) { font-size: 13px; font-weight: 600; min-height: 39px; }
:is(.sites-page, .entry-types-page) :is(.save-small, .merge-btn) { color: #49677b; background: #edf4f8; border-color: #d2e2eb; }
:is(.sites-page, .entry-types-page) :is(.clear-btn, .clear-btn:hover) { color: var(--ops-muted); background: #f3f6f6; border-color: var(--ops-line); }
:is(.sites-page, .entry-types-page) .toggle input:checked + span { background: var(--ops-blue); }
:is(.sites-page, .entry-types-page, .ad-page, .audit-page, .wh-page, .ss-page, .pr-page, .modern-operations-page) :focus-visible { outline: 3px solid #78a1bb80; outline-offset: 3px; }
:is(.wh-field, .ss-field) > span, .pr-filters label > span { color: #627182; font-size: 12px; }
:is(.wh-field, .ss-field) :is(input, select, textarea), .pr-filters :is(input, select), .ad-search, .ad-input {
    border-color: #d5e0e5; color: var(--ops-ink); background: #fbfdfc; font-size: 13px; border-radius: 9px;
}
.ad-topbar { align-items: center; }
.ad-topbar-actions { gap: 9px; }
.ad-add-panel { border-color: #d4e3dc; background: #f4f9f5; border-radius: 18px; }
.ad-table-wrap { border: 1px solid var(--ops-line); border-radius: 18px; box-shadow: var(--ops-shadow); }
.ad-table { font-size: 13px; }
.ad-table th { padding-block: 15px; color: var(--ops-muted); background: #f3f7f6; border-color: var(--ops-line); font-size: 12px; }
.ad-table td { padding-block: 15px; border-color: #edf1f1; }
.ad-table tbody tr:hover { background: #f6faf7; }
.ad-count { color: var(--ops-muted); padding: 13px 4px; font-size: 12px; }
:is(.sites-filter-section, .sites-list-section, .sub-sites-section, .entry-types-list, .audit-page .section-card, .wh-card, .ss-card, .pr-card, .pr-filters, .pr-employee-card) {
    border-color: var(--ops-line); border-radius: 18px; background: #fff; box-shadow: var(--ops-shadow);
}
.sites-page .add-card, .entry-types-page .add-card { border-color: var(--ops-line); box-shadow: var(--ops-shadow); border-radius: 18px; }
:is(.sites-section-heading, .sub-sites-heading, .entry-types-list > header) h2 { color: var(--ops-ink); font-size: 19px; }
:is(.sites-section-heading, .sub-sites-heading, .entry-types-list > header) p { color: var(--ops-muted); font-size: 13px; line-height: 1.8; }
.sites-count, .entry-types-list > header > span { color: #49677b; background: #edf4f8; border-color: #d2e2eb; }
.sites-table th, .types-table th, .site-row-head { color: var(--ops-muted); background: #f3f7f6; }
.sites-table td, .types-table td { border-color: #edf1f1; }
.sites-page .name-input, .entry-types-page .name-input { font-size: 13px; color: var(--ops-ink); border-color: #d5e0e5; background: #fbfdfc; }
.sites-page .report-section-select { min-height: 40px; }
.sites-page :is(.sub-site-create-card, .sub-site-card) { border-color: var(--ops-line); background: #f9fcfa; }
.sites-page .sub-site-create-card strong { color: var(--ops-ink); }
.sub-site-grid { gap: 18px; }
.merge-dialog { border-color: var(--ops-line); border-radius: 20px; box-shadow: 0 24px 80px rgb(40 48 68 / 20%); }
.merge-dialog::backdrop { background: rgb(40 48 68 / 35%); backdrop-filter: blur(3px); }
.audit-page .section-card { padding: 24px; margin-bottom: 23px; scroll-margin-top: 30px; }
.audit-page .section-header { margin-bottom: 22px; gap: 20px; }
.audit-page .section-header h2 { margin: 0 0 6px; color: var(--ops-ink); font-size: 19px; font-weight: 700; }
.audit-page .section-header p { color: var(--ops-muted); font-size: 13px; margin: 0; line-height: 1.8; }
.audit-page :is(.backup-table, .audit-table) { font-size: 13px; }
.audit-page .backup-table { min-width: 660px; }
.audit-page :is(.backup-table, .audit-table) th { background: #f3f7f6; color: var(--ops-muted); font-size: 12px; padding: 13px 14px; }
.audit-page :is(.backup-table, .audit-table) td { padding: 14px; border-color: #edf1f1; }
.audit-page .val-line { color: #5e6c79; font-size: 12px; line-height: 1.85; }
.audit-page .action-insert { background: #e8f3eb; color: #3e6651; }
.audit-page .action-update { background: #eaf2f6; color: #4b6b81; }
.audit-page .action-merge { background: #edece9; color: #74675a; }
.audit-page .action-delete { background: #f8eaea; color: #9c5358; }
.audit-page .audit-page-btn:hover { color: var(--ops-ink); background: #edf4f8; border-color: #cbdde7; }
.audit-page .badge.bg-secondary { background: #edf3f6 !important; color: #4d6b7f; }
.audit-page .badge.bg-info { background: #f1e9e5 !important; color: #755f54; }
.audit-page .audit-page-btn.active { color: #fff; background: var(--ops-ink); border-color: var(--ops-ink); }

/* Attendance: restrained metrics, legible chart captions and roomy tables. */
:is(.wh-kpi, .ss-kpi, .pr-metric) { box-shadow: var(--ops-shadow); border-radius: 18px; border-color: var(--ops-line); min-height: 125px; padding: 22px; }
.wh-kpi { border-top-color: var(--ops-blue); }
.wh-kpi-primary, .ss-kpi-purple { border-top-color: var(--ops-ink); }
.wh-kpi-green, .ss-kpi-green { border-top-color: #8faf9a; }
.wh-kpi-warning, .ss-kpi-orange { border-top-color: var(--ops-beige); }
:is(.wh-kpi, .pr-metric) :is(.wh-kpi-icon, .pr-metric-icon) { color: #4c6d84; background: #eaf2f6; }
:is(.wh-kpi-green, .pr-metric-green) :is(.wh-kpi-icon, .pr-metric-icon) { color: #537664; background: var(--ops-mint); }
:is(.wh-kpi-warning, .pr-metric-orange) :is(.wh-kpi-icon, .pr-metric-icon) { color: #806657; background: #f1e8e2; }
:is(.wh-kpi, .pr-metric) span, .ss-kpi > span { color: var(--ops-muted); font-size: 13px; }
:is(.wh-kpi, .ss-kpi, .pr-metric) strong { color: var(--ops-ink); font-size: 27px; letter-spacing: -.6px; }
:is(.wh-kpi, .ss-kpi, .pr-metric) small { color: var(--ops-muted); font-size: 12px; line-height: 1.65; white-space: normal; }
.ss-kpi { border-top-color: var(--ops-blue); }
.ss-kpi-purple { background: #f0f5f8; border-top-color: var(--ops-ink); }
.ss-kpi-green { background: #f4f9f5; }
.wh-filter-card { border-color: var(--ops-line); box-shadow: var(--ops-shadow); }
.wh-quick-ranges button { color: #567085; background: #edf4f8; border-color: #d8e5ec; }
.wh-quick-ranges button:hover { color: var(--ops-ink); background: #dfeaf0; }
.wh-dashboard-grid { gap: 18px; }
.wh-dashboard-grid > .wh-card { padding: 24px; }
.wh-card-head h2, .ss-card-heading h2 { color: var(--ops-ink); font-size: 18px; }
.wh-card-head p, .ss-card-heading p { color: var(--ops-muted); font-size: 12px; line-height: 1.8; }
.wh-soft-badge { color: #4c6d84; background: #edf4f8; font-size: 11px; }
.wh-text-btn { color: #4c6d84; font-size: 12px; }
.wh-day-bar-track { background: linear-gradient(to top, #edf3f6, #f7fafb); }
.wh-day-bar { background: linear-gradient(to top, #5c7e94, #95b6cb); box-shadow: none; }
.wh-day-value, .wh-day-label { color: var(--ops-muted); font-size: 10px; }
.wh-progress span { background: linear-gradient(90deg, #abc5d5, #78a1bb); }
.wh-avatar, .pr-avatar { color: #48677d; background: #e9f1f6; }
.wh-employee-bar-label strong { color: var(--ops-ink); font-size: 12px; }
.wh-employee-bar-label small { color: var(--ops-muted); font-size: 10px; }
.wh-employee-bar-row { grid-template-columns: minmax(128px, 1.3fr) minmax(55px, 1fr) 50px; }
.wh-bar-hours { font-size: 12px; }
.wh-task-legend-row { min-height: 32px; font-size: 12px; }
.wh-task-legend-row small { color: var(--ops-muted); font-size: 11px; }
.wh-donut { width: 158px; height: 158px; }
.wh-donut-center { width: 108px; height: 108px; box-shadow: none; }
.wh-donut-center strong { font-size: 23px; }
.wh-donut-center span { color: var(--ops-muted); font-size: 11px; }
.wh-tabs button { font-size: 13px; }
.wh-tabs button.active, .wh-tabs button.active span { color: var(--ops-ink); }
.wh-tabs button.active span { background: #eaf2f6; }
.wh-data-toolbar { padding: 15px 24px; }
.modern-ops-data-heading { padding: 24px 24px 18px; margin: 0; }
.wh-table { font-size: 13px; }
.wh-table th { background: #f3f7f6; color: var(--ops-muted); font-size: 12px; padding-block: 14px; }
.wh-table td { padding-block: 14px; border-color: #edf1f1; }
.wh-table tbody tr:hover td { background: #f6faf7; }
.wh-date-cell strong, .wh-person-cell strong { font-size: 13px; color: var(--ops-ink); }
.wh-date-cell small, .wh-person-cell small { font-size: 11px; color: var(--ops-muted); }
.wh-task-pill { color: #48677d; background: #edf4f8; font-size: 12px; }
.wh-time { font-size: 13px; }
.wh-duration { color: var(--ops-ink); }
.wh-status { font-size: 11px; }
.wh-issue-row td { background: #fbf7f2; }
.wh-active-row td { background: #f0f7f2 !important; }
.modern-ops-attention, .modern-ops-completion { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; margin: 0 0 22px; border: 1px solid #e4d7ce; border-radius: 16px; background: #f8f3ee; }
.modern-ops-attention strong, .modern-ops-completion strong { font-size: 14px; font-weight: 650; color: var(--ops-ink); }
.modern-ops-attention p, .modern-ops-completion p { font-size: 13px; line-height: 1.8; color: #776356; margin: 3px 0 0; }
.modern-ops-completion { border-color: #dbe7e1; background: #f4f9f5; }
.modern-ops-completion p { color: var(--ops-muted); }

/* Monthly payroll: each financial stage has a visible, navigable group. */
.ss-parent-nav a.active { color: var(--ops-ink); background: #e8f1f5; }
.ss-tabs a.active { color: var(--ops-ink); }
.ss-tabs a.active::after { background: var(--ops-blue); }
.ss-tabs a { font-size: 14px; }
.ss-card-heading { padding: 25px 26px 20px; }
.ss-scroll-hint { color: var(--ops-taupe-text); font-size: 12px; }
.ss-table-scroll { scrollbar-color: #b7ccd8 #f2f6f7; }
.ss-table-scroll::-webkit-scrollbar-thumb { background: #b7ccd8; }
.ss-table-scroll::-webkit-scrollbar-track { background: #f2f6f7; }
.ss-table { font-size: 13px; }
.ss-table th { color: var(--ops-muted); background: #f3f7f6; font-size: 12px; padding-block: 14px; }
.ss-table td { border-color: #edf1f1; padding-block: 19px; }
.ss-table tbody tr:hover td { background: #f6faf7; }
.ss-table td strong { font-size: 13px; }
.ss-table td small { font-size: 11px; color: var(--ops-muted); line-height: 1.65; }
.ss-employee-link { color: var(--ops-ink); font-weight: 700; }
.ss-employee-link:hover { color: #496e88; text-decoration: underline; }
.ss-column-groups th { font-size: 13px; color: var(--ops-ink); font-weight: 650; border-block: 1px solid var(--ops-line); scroll-margin-block-start: 25px; }
.ss-column-groups th:nth-child(1) { background: #ecf3f7; }
.ss-column-groups th:nth-child(2) { background: #ebf5ee; }
.ss-column-groups th:nth-child(3) { background: #f4eeea; }
.ss-column-groups th:nth-child(4) { background: #e9f0f4; }
.ss-column-groups th:nth-child(5) { background: #edece9; }
.ss-employee-table td:is(:nth-child(4), :nth-child(8), :nth-child(12), :nth-child(17)) { border-inline-start: 2px solid #dfe7e8; }
.ss-employee-table .ss-sticky { box-shadow: -5px 0 14px rgb(40 48 68 / 4%); }
.ss-inline-input, .ss-inline-select { font-size: 13px; border-color: #d4dfe5; }
.ss-inline-details .ss-field > span { font-size: 12px; color: var(--ops-muted); }
.ss-inline-details .ss-inline-input, .ss-inline-details .ss-field input { font-size: 13px; min-height: 38px; }
.ss-inline-details summary { color: #526d80; background: #f3f7f8; border-color: #dae6ec; font-size: 12px; }
.ss-inline-details > summary::after { color: var(--ops-taupe-text); }
.ss-selected-row td { background: #f1f6f8; }
.ss-dirty-row > td { background: #faf5ef; }
.ss-dirty-row > .ss-sticky { box-shadow: inset -3px 0 #bfa89e, -4px 0 6px rgb(40 48 68 / 4%); }
.ss-dirty-row [data-row-status] { color: #7c6453; }
.ss-total-cell { background: #edf5f0 !important; color: #385448; }
.ss-soft-cell { background: #edf4f8 !important; color: #49677b; }
.modern-ops-salary-remaining { background: #f6f0eb !important; }
.ss-form-section { border-color: var(--ops-line); background: #fbfdfc; }
.ss-form-section legend, .ss-formula-strip strong { color: var(--ops-ink); }
.ss-formula-strip { background: #edf4f8; color: #5f7180; font-size: 12px; line-height: 1.9; border-color: #dbe7ed; }
.ss-badge { font-size: 11px; border-radius: 8px; }
.ss-badge-success { color: #3e6651; background: #e6f2e9; }
.ss-badge-pending, .ss-badge-warning { color: #755d4e; background: #f2e9e2; }
.ss-share-track { background: #eaf0f2; }
.ss-share-track > span { background: var(--ops-blue); }
.ss-site-icon, .ss-intro-icon { color: #52718a; background: #edf4f8; }
.ss-site-details { border-color: var(--ops-line); background: #fff; border-radius: 15px; }
.ss-site-details > summary { background: #f9fcfa; }
.ss-site-title h3 { color: var(--ops-ink); font-size: 16px; }
.ss-site-title small, .ss-site-totals small { color: var(--ops-muted); font-size: 11px; }
.ss-site-totals span { color: var(--ops-muted); font-size: 12px; }
.ss-site-totals strong { color: var(--ops-ink); font-size: 17px; }
.modern-ops-salary-sections { display: flex; gap: 8px; padding: 0 25px 21px; flex-wrap: wrap; }
.modern-ops-salary-sections a { display: flex; align-items: center; gap: 8px; color: #596a78; border: 1px solid var(--ops-line); border-radius: 9px; padding: 8px 12px; font-size: 12px; }
.modern-ops-salary-sections a:hover { background: #edf4f8; }
.modern-ops-salary-sections a span { color: var(--ops-taupe-text); font-size: 11px; font-variant-numeric: tabular-nums; }

/* External workers: a simple system choice and coherent weekly dashboards. */
.pr-external-hero { min-height: 148px; }
.pr-system-nav { border-color: var(--ops-line); background: #fff; padding: 7px; border-radius: 13px; box-shadow: none; }
.pr-system-nav a { color: var(--ops-muted); font-size: 13px; }
.pr-system-nav a.is-active { color: var(--ops-ink); background: #eaf2f6; box-shadow: none; }
.pr-system-dot.is-beitar { background: var(--ops-blue); }
.pr-system-dot.is-bs { background: var(--ops-taupe); }
.pr-tabs { border-color: var(--ops-line); }
.pr-tab.is-active, .pr-tab.active { color: var(--ops-ink); border-color: var(--ops-blue); background: #f0f5f8; box-shadow: none; }
.pr-tab span { color: #4d6d83; background: #e7eff4; }
.pr-weekly-dashboard { border-color: var(--ops-line); background: #f1f6f3; border-radius: 20px; padding: 23px; box-shadow: none; }
.pr-week-kicker { color: var(--ops-taupe-text); font-size: 12px; }
.pr-week-head h2 { color: var(--ops-ink); font-size: 20px; }
.pr-week-head p { color: var(--ops-muted); font-size: 12px; line-height: 1.8; }
.pr-week-nav a { color: var(--ops-ink); background: #fff; border-color: var(--ops-line); }
.pr-week-nav input { border-color: var(--ops-line); font-size: 13px; }
.pr-week-metrics > div { border-color: var(--ops-line); padding: 20px; border-radius: 14px; }
.pr-week-metrics .is-cost { color: #fff; background: var(--ops-ink); border-color: var(--ops-ink); }
.pr-week-metrics span { color: var(--ops-muted); font-size: 12px; }
.pr-week-metrics strong { font-size: 25px; }
.pr-week-metrics small { color: var(--ops-muted); font-size: 11px; line-height: 1.7; }
.pr-week-panel { border-color: var(--ops-line); border-radius: 15px; }
.pr-week-panel-head { padding: 17px; }
.pr-week-panel-head h3 { font-size: 15px; color: var(--ops-ink); }
.pr-week-panel-head p { font-size: 11px; color: var(--ops-muted); line-height: 1.8; }
.pr-week-panel-head > span { color: #4d6d83; background: #e9f1f5; font-size: 11px; }
.pr-day-bars { height: 280px; gap: 6px; }
.pr-day-column > strong { color: #5c6e7c; font-size: 10px; }
.pr-day-column > div span { background: linear-gradient(180deg, #92b3c7, #5f8196); width: min(33px, 70%); }
.pr-day-column > small { font-size: 11px; }
.pr-day-column > small em { color: var(--ops-muted); font-size: 10px; }
.pr-ranking-row { padding: 12px 1px 16px; }
.pr-ranking-row strong { color: var(--ops-ink); font-size: 13px; }
.pr-ranking-row span { font-size: 11px; color: var(--ops-muted); line-height: 1.8; }
.pr-ranking-row em { color: #4b6658; font-size: 13px; }
.pr-ranking-row i { height: 4px; background: #eef3f4; }
.pr-ranking-row i b { background: var(--ops-blue); }
.pr-ranking-list.is-sites .pr-ranking-row i b { background: var(--ops-beige); }
.modern-ops-weekly-note { background: #f7f1ed; border-color: #e2d5ce; margin-top: 20px; }
.pr-system-card { min-height: 285px; padding: 29px; border-color: var(--ops-line); border-radius: 22px; box-shadow: var(--ops-shadow); }
.pr-system-card::after { display: none; }
.pr-system-card:hover { box-shadow: 0 12px 28px rgb(40 48 68 / 8%); border-color: #bad0dc; }
.pr-system-card-icon { color: #4b6c82; background: #e7f0f5; }
.pr-system-card.is-bs .pr-system-card-icon { color: #7c6457; background: #f0e7e1; }
.pr-system-card-copy h2 { color: var(--ops-ink); margin-block: 10px; font-size: 31px; }
.pr-system-card-copy > .modern-ops-badge { color: #536b7b; font-size: 11px; }
.pr-system-card-copy p { font-size: 14px; line-height: 1.9; }
.pr-system-card-stats span { font-size: 12px; padding: 15px; background: #f4f8f6; }
.pr-system-card-stats strong { font-size: 26px; }
.pr-system-card-open, .pr-system-card.is-bs .pr-system-card-open { color: var(--ops-ink); font-size: 14px; }
.pr-home-insights { gap: 16px; margin-top: 22px; }
.pr-home-insights div { background: #ffffffb5; border-color: var(--ops-line); padding: 22px; border-radius: 16px; }
.pr-home-insights strong { font-size: 14px; }
.pr-home-insights span { font-size: 13px; color: var(--ops-muted); line-height: 1.9; margin-top: 8px; }
.pr-table th { color: var(--ops-muted); background: #f3f7f6; font-size: 12px; padding-block: 14px; }
.pr-table td { font-size: 13px; border-color: #edf1f1; }
.pr-grid-input, .pr-dialog :is(input, select, textarea) { border-color: #d5e0e5; font-size: 13px; color: var(--ops-ink); }
.pr-table tbody tr:hover { background: #f6faf7; }
.pr-new-row, .pr-new-row:hover { background: #f1f7f3 !important; }
.pr-row-actions .pr-save-row, .pr-row-actions .pr-add-row { color: #4c6d82; border-color: #d2e2ea; background: #edf4f8; font-family: inherit; font-size: 12px; }
.pr-row-actions .pr-save-row:hover, .pr-row-actions .pr-add-row:hover { color: #fff; background: var(--ops-ink); border-color: var(--ops-ink); }
.pr-hourly-row.is-dirty .pr-save-row, .pr-payroll-row.is-dirty .pr-save-row { color: #fff; border-color: var(--ops-ink); background: var(--ops-ink); }
.pr-week-number { color: #496b82; }
.pr-employee-name h3 { font-size: 17px; }
.pr-employee-name p, .pr-effective, .pr-rate-grid span { color: var(--ops-muted); font-size: 12px; }
.pr-rate-grid strong { color: var(--ops-ink); }
.pr-rate-grid { background: #f4f8f6; }
.pr-status { color: #3e6651; background: var(--ops-mint); font-size: 11px; }
.pr-employee-footer > button:not(.pr-icon-btn) { font-family: inherit; font-size: 12px; }
.pr-employee-footer > button:hover { color: var(--ops-ink); background: #edf4f8; }
.pr-dialog { border-radius: 22px; box-shadow: 0 24px 80px rgb(40 48 68 / 20%); }
.pr-dialog::backdrop { background: rgb(40 48 68 / 35%); backdrop-filter: blur(3px); }
.pr-dialog-head { border-color: var(--ops-line); background: #f5f9f6; }
.pr-dialog-symbol { color: #496e85; background: #e7f0f5; }
.pr-symbol-green { color: #527462; background: var(--ops-mint); }
.pr-dialog-head p, .pr-dialog-body label > span { color: var(--ops-muted); font-size: 13px; }
.pr-rate-preview, .pr-live-calc { background: #f0f6f2; border-color: #dbe7e0; }
.pr-rate-preview strong, .pr-live-calc strong { color: var(--ops-ink); }
.pr-initial-rate { border-color: var(--ops-line); background: #f9fcfa; }
.pr-employee-summary .is-warning { color: #78604f; background: #f4ece6; border-color: #e3d6cd; }

/* Sidebar-aware integration: grids adapt to the actual available page width. */
.pr-hourly-hero .pr-eyebrow { color: var(--ops-taupe-text); }
.pr-hourly-hero .pr-btn-primary { color: #fff; background: var(--ops-ink); border-color: var(--ops-ink); box-shadow: 0 4px 10px rgb(40 48 68 / 8%); }
.pr-hourly-hero .pr-btn-primary:hover { color: #fff; background: #43516b; border-color: #43516b; }
.pr-filter-title > span { color: #506d82; background: #eaf2f6; }
.pr-system-nav a:hover { color: var(--ops-ink); background: #f0f5f3; }
.pr-upcoming { color: #506d82; background: #edf4f8; font-size: 12px; }
.pr-no-rate { color: #776052; border-color: #e5d8d0; background: #f7f0eb; }
.pr-info-box { color: var(--ops-muted); background: #f0f5f8; font-size: 12px; line-height: 1.8; }
.pr-dialog :is(.pr-full-field > span small, .pr-rate-preview small, .pr-history-row > small) { color: var(--ops-muted); font-size: 11px; }
.pr-filters input:focus, .pr-dialog :is(input, select, textarea):focus { border-color: var(--ops-blue) !important; box-shadow: 0 0 0 3px rgb(120 161 187 / 15%) !important; }
.pr-dialog .ts-wrapper.focus .ts-control, .pr-filters .ts-wrapper.focus .ts-control { border-color: var(--ops-blue); box-shadow: 0 0 0 3px rgb(120 161 187 / 15%); }
.ss-overline { color: var(--ops-taupe-text); font-size: 12px; }
.ss-row-confirm { color: var(--ops-muted); font-size: 11px; }
.ss-confirm-box { border-color: #d7e4db; background: #f0f7f2; }
.ss-confirm-box strong { color: var(--ops-ink); font-size: 13px; }
.ss-confirm-box small, .ss-field-help, .ss-payments-empty { color: var(--ops-muted); font-size: 12px; }
.ss-confirm-box input { accent-color: var(--ops-ink); }
.wh-modal { z-index: 1600; }
.wh-modal-backdrop { background: rgb(40 48 68 / 36%); }
.wh-modal-head { background: #f4f9f5; }
.wh-details-popover dt, .wh-details-popover > small, .wh-muted, .wh-limit-note, .wh-empty-state p { color: var(--ops-muted); font-size: 11px; }
.wh-details-popover dd { color: var(--ops-ink); font-size: 12px; }
.wh-issue-count { color: #776052; background: #f4ece7; }
.wh-empty-state > span { color: #506d82; background: #edf4f8; }
.wh-status-active, .wh-status-complete { color: #3e6651; background: #eaf4ed; }
.wh-status-missing_entry, .wh-status-missing_exit, .wh-status-unknown { color: #776052; background: #f4ece7; }
.wh-time-missing { color: #776052; }
.sub-sites-section { background: #f7faf8; }
.sub-site-card { overflow-x: auto; }
.sub-site-card > header :is(strong, small) { color: var(--ops-ink); }

@media screen {
    :is(.sites-page, .entry-types-page, .ad-page, .audit-page, .wh-page, .ss-page, .pr-page, .modern-operations-page) { min-width: 0; max-width: 100%; }
    .wh-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wh-search-field { grid-column: span 2; }
    .wh-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
    .wh-kpi strong { overflow-wrap: anywhere; }
    .wh-hero-actions, .pr-employee-actions, .pr-employee-toolbar { flex-wrap: wrap; }
    .pr-employees-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
    .pr-metrics { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
    .pr-metric { gap: 12px; padding: 20px; }
    .pr-metric-icon { width: 42px; height: 42px; flex-basis: 42px; }
    .pr-metric strong { font-size: 24px; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
    .pr-week-metrics { grid-template-columns: repeat(auto-fit, minmax(min(195px, 100%), 1fr)); }
    .pr-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pr-filter-title { grid-column: 1 / -1; }
    .pr-filter-search { grid-column: span 2; min-width: 0; }
    .pr-filter-actions { grid-column: span 2; justify-content: flex-end; flex-wrap: wrap; }
    .sites-page .add-card form { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
    .sub-sites-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sub-site-create-card { min-width: 0; }
}
@media screen and (max-width: 1280px) {
    .sites-page .sites-filter-form { grid-template-columns: 1fr 1fr; }
    .sites-filter-field { grid-column: 1 / -1; }
    .sites-filter-actions { justify-content: flex-end; }
}

@media (max-width: 1180px) {
    .wh-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wh-dashboard-grid { grid-template-columns: 1fr 1fr; }
    .wh-dashboard-grid > .wh-employee-card { grid-column: 1 / -1; }
    .wh-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pr-week-grid { grid-template-columns: 1fr 1fr; }
    .pr-week-chart { grid-column: 1 / -1; }
    .wh-hero-actions { flex-wrap: wrap; }
    .pr-system-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    :is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) { flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 18px; gap: 20px; }
    .modern-ops-guide-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .modern-ops-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .modern-ops-stats article { padding: 20px; }
    .modern-ops-stats article:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .modern-ops-panel-head, .modern-ops-section-label { align-items: flex-start; gap: 13px; }
    .modern-ops-panel-head { padding: 21px; }
    .modern-ops-section-label { flex-wrap: wrap; }
    .modern-ops-attention, .modern-ops-completion { align-items: flex-start; flex-direction: column; gap: 13px; }
    .modern-ops-note { flex-wrap: wrap; }
    .wh-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wh-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wh-field-task, .wh-search-field, .wh-filter-actions { grid-column: 1 / -1; }
    .pr-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-filter-search, .pr-filter-actions { grid-column: 1 / -1; }
    .wh-kpi-grid .wh-kpi:last-child { grid-column: 1 / -1; }
    .wh-dashboard-grid { grid-template-columns: 1fr; }
    .wh-dashboard-grid > .wh-employee-card { grid-column: auto; }
    .pr-weekly-dashboard { padding: 18px; }
    .pr-week-grid, .pr-system-cards { grid-template-columns: 1fr; }
    .pr-week-chart { grid-column: auto; }
    .pr-hero-actions, .wh-hero-actions, .ss-hero-actions { flex-wrap: wrap; }
    .pr-home-insights { grid-template-columns: 1fr; }
    .modern-ops-guide-toggle { font-size: 0; }
    .modern-ops-guide-toggle::after { font-size: 15px; }
    .ad-topbar-actions { width: 100%; }
    .ad-search { width: 100%; }
}
@media screen and (max-width: 700px) {
    .pr-employees-grid, .pr-metrics { grid-template-columns: 1fr; }
    .sites-page .add-card form, .sub-sites-create-grid { grid-template-columns: 1fr; }
    .pr-week-chart { overflow-x: auto; }
    .pr-day-bars { min-width: 430px; }
    .pr-day-column { grid-template-rows: 28px 1fr 36px; }
    .pr-day-column > strong { display: block; }
}
@media (max-width: 520px) {
    :is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) { padding: 21px; }
    .wh-kpi-grid, .ss-kpis, .pr-metrics { gap: 10px; }
    :is(.wh-kpi, .ss-kpi, .pr-metric) { padding: 16px; }
    .wh-kpi { gap: 10px; }
    .wh-kpi-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; }
    .wh-kpi strong, .ss-kpi strong { font-size: 23px; }
    :is(.wh-kpi, .ss-kpi, .pr-metric) small { font-size: 11px; }
    .modern-ops-stats article > strong { font-size: 26px; }
    .modern-ops-stats .modern-ops-date-value { font-size: 22px; }
    .modern-ops-stats article > span { font-size: 12px; }
    .modern-ops-stats article { padding: 18px; }
    .modern-ops-guide > summary { gap: 9px; padding-inline: 15px; }
    .modern-ops-table th, .modern-ops-table td { padding-inline: 14px; }
    .wh-data-toolbar { padding: 14px; }
    .wh-tabs button { font-size: 12px; padding-inline: 9px; }
    .wh-day-value { font-size: 9px; }
    .ss-card-heading { padding-inline: 21px; }
    .modern-ops-salary-sections { padding-inline: 21px; gap: 7px; }
    .modern-ops-salary-sections a { flex: 1 1 auto; justify-content: center; }
    .pr-system-card { padding: 22px; gap: 15px; }
    .pr-system-card-copy h2 { font-size: 29px; }
    .pr-system-card-icon { width: 48px; height: 48px; border-radius: 14px; }
    .pr-system-card-icon svg { width: 25px; }
    .pr-week-head { flex-wrap: wrap; gap: 15px; }
    .pr-week-nav { width: 100%; }
    .pr-week-nav form { flex: 1; }
    .pr-week-nav input { width: 100%; }
    .pr-day-column > strong { font-size: 9px; }
    .pr-week-metrics strong { font-size: 22px; }
}
@media print {
    .modern-ops-guide, .modern-ops-jump, .modern-ops-salary-sections, .modern-ops-attention, .modern-ops-footer-actions { display: none !important; }
    :is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) { background: #fff !important; box-shadow: none !important; min-height: 0; border: 0; border-bottom: 1px solid #bbb; padding: 0 0 15px; border-radius: 0; }
    :is(.modern-ops-hero, .sites-page-header, .entry-types-header, .wh-hero, .ss-hero, .pr-hero) :is(h1, p) { color: #222 !important; }
    .modern-ops-panel, .modern-ops-stats article, .wh-card, .ss-card, .pr-card { box-shadow: none !important; }
    .modern-ops-table-scroll { overflow: visible; }
    .modern-ops-table { min-width: 0; }
    .modern-ops-stats article { padding: 12px; }
    .modern-permissions-table th:first-child, .modern-permissions-table td:first-child { position: static; }
    .modern-ops-section-label { margin: 15px 0 10px; }
    .ss-table th, .ss-table td, .ss-table td strong, .ss-table td small { font-size: 7px; padding: 7px 4px; }
    .ss-column-groups th { font-size: 8px; }
    .ss-table td:is(:nth-child(4), :nth-child(8), :nth-child(12), :nth-child(17)) { border-inline-start-width: 1px; }
    .modern-ops-data-heading { padding: 14px; }
    .pr-ranking-list { max-height: none; overflow: visible; }
    .pr-weekly-dashboard { background: #fff; box-shadow: none; padding: 14px; }
    .pr-table-wrap { overflow: visible; }
    .pr-table { min-width: 0 !important; table-layout: auto; }
    .pr-table :is(th, td) { width: auto !important; font-size: 8px; padding: 6px 4px; }
    .pr-table :is(input, select, textarea) { width: 100%; min-width: 0; max-width: 100%; height: auto; min-height: 0; font-size: 8px !important; padding: 3px !important; }
    .pr-grid-input { border: 0 !important; background: transparent !important; }
    .pr-inline-shift > div { grid-template-columns: auto minmax(0, 1fr); }
    .pr-rate-grid strong { font-size: 10px; }
    .pr-week-grid { grid-template-columns: 1fr 1fr; }
    .pr-week-chart { grid-column: 1 / -1; overflow: visible; }
    .pr-day-bars { min-width: 0; }
    .pr-day-column > strong { display: block; }
    .pr-day-column { grid-template-rows: 28px 1fr 36px; }
    .wh-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .wh-kpi-grid .wh-kpi:last-child { grid-column: auto; }
    .audit-page .backup-table { min-width: 0; }
}