/* =============================================
   ARC Staff Portal — Stylesheet
   Brand: ARC Home Cleaning
   ============================================= */

:root {
    --arc-primary:    #D7261E;
    --arc-primary-dk: #A81910;
    --arc-accent:     #1A1A1A;
    --arc-danger:     #B00020;
    --arc-success:    #2E7D32;
    --arc-bg:         #F7F7F7;
    --arc-card:       #FFFFFF;
    --arc-border:     #E4E4E4;
    --arc-text:       #1A1A1A;
    --arc-muted:      #777777;
    --arc-radius:     10px;
    --arc-shadow:     0 2px 12px rgba(0,0,0,0.08);
    --arc-header:     #1A1A1A;
    --arc-soft:       #FCEAEA;
}

/* ── Base ── */
.arc-wrap { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--arc-text); max-width: 960px; margin: 0 auto; padding: 16px; }
.arc-hidden { display: none !important; }
.arc-muted { color: var(--arc-muted); font-size: 0.85em; }

/* ── Header ── */
.arc-header { display: flex; align-items: center; justify-content: space-between; background: var(--arc-header); color: #fff; padding: 16px 20px; border-radius: var(--arc-radius); margin-bottom: 20px; }
.arc-header-left { display: flex; align-items: center; gap: 12px; }
.arc-avatar { font-size: 2rem; }
.arc-header h2 { margin: 0 0 2px; font-size: 1.25rem; font-weight: 700; }
.arc-date-badge { font-size: 0.8rem; opacity: 0.8; }

/* ── Stats Row ── */
.arc-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.arc-stat-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: var(--arc-shadow); }
.arc-stat-card.arc-stat-highlight { border-color: var(--arc-accent); background: var(--arc-soft); }
.arc-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--arc-primary); line-height: 1.1; }
.arc-stat-label { font-size: 0.72rem; color: var(--arc-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }

/* ── Tabs ── */
.arc-tabs { display: flex; gap: 4px; background: var(--arc-border); padding: 4px; border-radius: var(--arc-radius); margin-bottom: 20px; overflow-x: auto; }
.arc-tab { background: transparent; border: none; padding: 8px 18px; border-radius: 7px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--arc-muted); white-space: nowrap; transition: all .2s; }
.arc-tab:hover { color: var(--arc-primary); }
.arc-tab.arc-tab-active { background: #fff; color: var(--arc-primary); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ── Job Cards ── */
.arc-job-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--arc-shadow); }
.arc-job-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.arc-job-status-badge { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
.arc-job-time { font-size: 0.85rem; color: var(--arc-muted); }
.arc-job-client { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.arc-job-address { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.5; }
.arc-job-notes { margin: 0; font-size: 0.85rem; color: var(--arc-muted); }
.arc-icon { margin-right: 4px; }

/* ── Clock section ── */
.arc-job-clock { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--arc-border); }
.arc-clock-info { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.arc-clock-label { color: var(--arc-muted); }
.arc-clock-val { font-weight: 700; }
.arc-clock-actions { margin-left: auto; }
.arc-done-badge { font-size: 0.88rem; color: var(--arc-success); font-weight: 600; }

/* ── Buttons ── */
.arc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 7px; font-size: 0.88rem; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: all .18s; white-space: nowrap; }
.arc-btn-primary { background: var(--arc-primary); color: #fff; }
.arc-btn-primary:hover { background: var(--arc-primary-dk); color: #fff; }
.arc-btn-danger { background: var(--arc-danger); color: #fff; }
.arc-btn-danger:hover { opacity: .88; }
.arc-btn-secondary { background: var(--arc-soft); color: var(--arc-primary); border: 1px solid var(--arc-border); }
.arc-btn-secondary:hover { background: #d5e9dd; }
.arc-btn-ghost { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.35); }
.arc-btn-ghost:hover { background: rgba(255,255,255,.1); }
.arc-btn-full { width: 100%; justify-content: center; }
.arc-btn-xs { padding: 4px 10px; font-size: 0.78rem; }
.arc-btn-danger-ghost { background: transparent; color: var(--arc-danger); border: 1px solid #f5c5c3; }
.arc-btn-danger-ghost:hover { background: #fdf3f3; }

/* ── Status colours ── */
.arc-status-pending, .arc-status-badge.arc-status-pending { background: #FFF8E1; color: #F57F17; }
.arc-status-in_progress, .arc-status-badge.arc-status-in_progress { background: #E3F2FD; color: #1565C0; }
.arc-status-completed, .arc-status-badge.arc-status-completed { background: #E8F5E9; color: #2E7D32; }
.arc-status-cancelled, .arc-status-badge.arc-status-cancelled { background: #FEECEC; color: #C62828; }
.arc-status-badge { padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.arc-job-status-badge.arc-status-pending { background: #FFF8E1; color: #F57F17; }
.arc-job-status-badge.arc-status-in_progress { background: #E3F2FD; color: #1565C0; }
.arc-job-status-badge.arc-status-completed { background: #E8F5E9; color: #2E7D32; }

/* ── Tables ── */
.arc-table-wrap { overflow-x: auto; border-radius: var(--arc-radius); border: 1px solid var(--arc-border); }
.arc-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.arc-table thead tr { background: var(--arc-soft); }
.arc-table th { padding: 10px 12px; text-align: left; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--arc-primary); white-space: nowrap; }
.arc-table td { padding: 10px 12px; border-top: 1px solid var(--arc-border); vertical-align: top; }
.arc-table tbody tr:hover { background: #F7F9F8; }
.arc-table tfoot tr { background: var(--arc-soft); }
.arc-address-cell { max-width: 160px; font-size: 0.8rem; color: var(--arc-muted); }
.arc-total-row td { font-weight: 700; }

/* ── Forms ── */
.arc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.arc-field { display: flex; flex-direction: column; gap: 5px; }
.arc-field-full { grid-column: 1 / -1; }
.arc-field label { font-size: 0.8rem; font-weight: 600; color: var(--arc-muted); text-transform: uppercase; letter-spacing: .04em; }
.arc-field input, .arc-field select, .arc-field textarea { padding: 9px 12px; border: 1px solid var(--arc-border); border-radius: 7px; font-size: 0.9rem; font-family: inherit; color: var(--arc-text); background: var(--arc-bg); transition: border .15s; }
.arc-field input:focus, .arc-field select:focus, .arc-field textarea:focus { outline: none; border-color: var(--arc-primary); background: #fff; }
.arc-field-inline { display: flex; align-items: center; gap: 6px; }
.arc-field-inline label { font-size: 0.8rem; font-weight: 600; color: var(--arc-muted); white-space: nowrap; }
.arc-field-inline input, .arc-field-inline select { padding: 7px 10px; border: 1px solid var(--arc-border); border-radius: 7px; font-size: 0.85rem; }
.arc-filter-bar { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 12px 16px; margin-bottom: 16px; }
.arc-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

/* ── Salary Cards ── */
.arc-salary-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--arc-shadow); }
.arc-salary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 600; }
.arc-salary-status { font-size: 0.75rem; padding: 2px 10px; border-radius: 12px; font-weight: 700; }
.arc-status-draft { background: #F3F4F6; color: #6B7280; }
.arc-status-approved { background: #E8F5E9; color: #2E7D32; }
.arc-status-paid { background: #E3F2FD; color: #1565C0; }
.arc-salary-body { display: grid; gap: 6px; }
.arc-salary-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 6px 0; border-bottom: 1px solid var(--arc-border); }
.arc-salary-row:last-child { border-bottom: none; }
.arc-salary-row.arc-total { font-size: 1rem; font-weight: 800; color: var(--arc-primary); }
.arc-salary-row.arc-green strong { color: var(--arc-success); }
.arc-salary-row.arc-red strong { color: var(--arc-danger); }
.arc-salary-notes { font-size: 0.82rem; color: var(--arc-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--arc-border); }

/* ── Login Box ── */
.arc-login-wrap { max-width: 400px; margin: 40px auto; }
.arc-login-box { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: 14px; padding: 32px 28px; box-shadow: var(--arc-shadow); }
.arc-login-logo { text-align: center; margin-bottom: 24px; }
.arc-logo-icon { font-size: 2.5rem; display: block; margin-bottom: 6px; }
.arc-login-logo h2 { margin: 0 0 4px; font-size: 1.3rem; color: var(--arc-primary); }
.arc-login-logo p { margin: 0; color: var(--arc-muted); font-size: 0.9rem; }
.arc-form { display: flex; flex-direction: column; gap: 14px; }

/* ── Alerts & Notices ── */
.arc-alert, .arc-notice { padding: 10px 14px; border-radius: 7px; font-size: 0.88rem; margin-bottom: 14px; }
.arc-alert-error { background: #FEECEC; color: #C62828; border: 1px solid #f5c5c3; }
.arc-alert-success { background: #E8F5E9; color: #2E7D32; border: 1px solid #b8ddb9; }
.arc-notice.arc-error { background: #FEECEC; color: #C62828; }

/* ── Modal ── */
.arc-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 99999; }
.arc-modal-box { background: #fff; border-radius: var(--arc-radius); padding: 24px; width: 380px; max-width: 95vw; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.18); }
.arc-modal-box h3 { margin: 0 0 4px; color: var(--arc-primary); }
.arc-modal-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ── Empty state ── */
.arc-empty { text-align: center; padding: 40px 20px; color: var(--arc-muted); }
.arc-empty-icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }
.arc-section-divider { height: 1px; background: var(--arc-border); margin: 24px 0; }
.arc-add-cleaner-form { background: var(--arc-bg); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 20px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .arc-stats-row { grid-template-columns: 1fr 1fr; }
    .arc-form-grid { grid-template-columns: 1fr; }
    .arc-field-full { grid-column: unset; }
    .arc-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .arc-tabs { gap: 2px; }
    .arc-tab { padding: 7px 12px; font-size: 0.82rem; }
    .arc-table th, .arc-table td { padding: 8px; font-size: 0.8rem; }
    .arc-address-cell { max-width: 100px; }
    .arc-filter-form { flex-direction: column; }
}

/* ── Multi-cleaner picker & structured address ── */
.arc-group-label { font-size: 0.8rem; font-weight: 700; color: var(--arc-primary); text-transform: uppercase; letter-spacing: .04em; padding-top: 6px; border-top: 1px dashed var(--arc-border); display: block; }
.arc-checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.arc-checkbox-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--arc-border); border-radius: 999px; background: var(--arc-bg); cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--arc-text); transition: all .15s; text-transform: none; letter-spacing: 0; }
.arc-checkbox-pill:hover { border-color: var(--arc-primary); }
.arc-checkbox-pill input { width: 16px; height: 16px; accent-color: var(--arc-primary); margin: 0; }
.arc-checkbox-pill:has(input:checked) { background: var(--arc-soft); border-color: var(--arc-primary); color: var(--arc-primary); }
.arc-address-lines { line-height: 1.45; }

/* ── Labelled address for cleaners (easy to read) ── */
.arc-job-address { background: var(--arc-bg); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 12px 14px; margin: 8px 0 10px; }
.arc-addr-head { font-size: 0.8rem; font-weight: 700; color: var(--arc-primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.arc-addr-list { display: flex; flex-direction: column; gap: 8px; }
.arc-addr-row { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; border-bottom: 1px dashed var(--arc-border); }
.arc-addr-row:last-child { padding-bottom: 0; border-bottom: none; }
.arc-addr-label { font-size: 0.72rem; font-weight: 600; color: var(--arc-muted); text-transform: uppercase; letter-spacing: .03em; }
.arc-addr-value { font-size: 1.05rem; font-weight: 700; color: var(--arc-text); line-height: 1.3; }

/* ── Progress stepper (cleaner) ── */
.arc-progress { width: 100%; }
.arc-progress-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.arc-pstep { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0.4; min-width: 58px; }
.arc-pstep-icon { font-size: 1.2rem; }
.arc-pstep-label { font-size: 0.68rem; font-weight: 600; color: var(--arc-muted); text-align: center; }
.arc-pstep-arrow { color: var(--arc-border); font-size: 1.1rem; font-weight: 700; }
.arc-pstep-done { opacity: 1; }
.arc-pstep-done .arc-pstep-label { color: var(--arc-primary); }
.arc-progress-btn { width: 100%; }
.arc-progress-times { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.85rem; }
.arc-progress-times .arc-clock-label { color: var(--arc-muted); margin-right: 3px; }

/* ── Manager stage badges ── */
.arc-stage-none        { background: #ECEFF1; color: #607D8B; }
.arc-stage-on_the_way  { background: #FFF3E0; color: #EF6C00; }
.arc-stage-reached     { background: #FFF8E1; color: #F57F17; }
.arc-stage-started     { background: #E3F2FD; color: #1565C0; }
.arc-stage-done        { background: #E8F5E9; color: #2E7D32; }

/* ── Analytics charts ── */
.arc-chart-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
@media (min-width: 720px) { .arc-chart-grid { grid-template-columns: 1fr 1fr; } .arc-chart-card:first-child { grid-column: 1 / -1; } }
.arc-chart-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 16px; box-shadow: var(--arc-shadow); }
.arc-chart-card h4 { margin: 0 0 10px; font-size: 0.9rem; color: var(--arc-primary); }

/* ── Conflicts & approval ── */
.arc-row-conflict { background: #FFF6F6; }
.arc-conflict-flag { display: inline-block; margin-left: 6px; font-size: 0.7rem; font-weight: 700; color: #C62828; background: #FEECEC; padding: 1px 6px; border-radius: 10px; white-space: nowrap; }
.arc-pending-pay { font-size: 0.7rem; font-weight: 700; color: #EF6C00; white-space: nowrap; }
.arc-approved-tag { font-size: 0.7rem; font-weight: 700; color: #2E7D32; white-space: nowrap; }
.arc-approval-note { margin-top: 8px; font-size: 0.8rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.arc-approval-pending { background: #FFF3E0; color: #EF6C00; }
.arc-approval-ok { background: #E8F5E9; color: #2E7D32; }

/* ── Calendar (week view) ── */
.arc-cal-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.arc-cal-range { font-weight: 700; color: var(--arc-primary); margin-left: auto; }
.arc-cal-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 760px) { .arc-cal-grid { grid-template-columns: repeat(7, 1fr); } }
.arc-cal-day { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); min-height: 90px; display: flex; flex-direction: column; }
.arc-cal-today { border-color: var(--arc-primary); box-shadow: 0 0 0 1px var(--arc-primary) inset; }
.arc-cal-day-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 8px; border-bottom: 1px solid var(--arc-border); }
.arc-cal-dow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--arc-muted); }
.arc-cal-date { font-size: 0.78rem; font-weight: 700; color: var(--arc-text); }
.arc-cal-day-body { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.arc-cal-empty { color: var(--arc-border); text-align: center; font-size: 0.8rem; padding: 6px 0; }
.arc-cal-job { display: flex; flex-direction: column; gap: 1px; padding: 5px 7px; border-radius: 7px; background: var(--arc-bg); border-left: 3px solid var(--arc-border); font-size: 0.76rem; }
.arc-cal-time { font-weight: 700; color: var(--arc-text); }
.arc-cal-client { color: var(--arc-text); }
.arc-cal-cleaner { color: var(--arc-muted); font-size: 0.72rem; }
.arc-cal-clash { background: #FEECEC; border-left-color: #C62828 !important; }
.arc-stage-border-on_the_way { border-left-color: #EF6C00; }
.arc-stage-border-reached    { border-left-color: #F57F17; }
.arc-stage-border-started    { border-left-color: #1565C0; }
.arc-stage-border-done       { border-left-color: #2E7D32; }

/* ── Theme refinements (red / white / black) ── */
/* Neutral table headers read better than a colour tint */
.arc-table thead tr, .arc-table tfoot tr { background: #F4F4F4 !important; }

/* Harden <select> so the chosen value and options are always legible,
   regardless of the active WordPress theme's global form styles. */
.arc-field select {
    background-color: #fff !important;
    color: var(--arc-text) !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    opacity: 1 !important;
}
.arc-field select option { color: #1A1A1A !important; background-color: #fff !important; }

/* Brand accents */
.arc-stat-card.arc-stat-highlight { border-color: var(--arc-primary); background: var(--arc-soft); }
.arc-header { color: #fff; }
.arc-btn-danger-ghost { color: var(--arc-danger); border: 1px solid var(--arc-border); background: #fff; }
.arc-btn-danger-ghost:hover { background: var(--arc-soft); border-color: var(--arc-danger); }

/* ── Office-in capture (cleaner) ── */
.arc-officein-row { margin-bottom: 10px; }
.arc-officein-set { font-size: 0.9rem; color: var(--arc-primary); font-weight: 600; }

/* ── Header text must stay white on the dark banner (override theme heading colours) ── */
.arc-header h2, .arc-header .arc-date-badge, .arc-header .arc-avatar { color: #fff !important; }

/* ── Select: force the chosen value to render (some themes set a transparent text-fill) ── */
.arc-field select { -webkit-text-fill-color: var(--arc-text) !important; text-shadow: none !important; }

/* ── Salary date filter ── */
.arc-salary-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 14px; }
.arc-salary-filter label { font-size: 0.82rem; color: var(--arc-muted); display: flex; flex-direction: column; gap: 4px; }
.arc-salary-filter input { padding: 8px 10px; border: 1px solid var(--arc-border); border-radius: 7px; font-size: 0.9rem; background: #fff; color: var(--arc-text); }
.arc-btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ── Bound chart height so the full-width trend chart isn't huge ── */
.arc-chart-card { position: relative; }
.arc-chart-card canvas { max-height: 260px !important; height: 260px !important; }

/* ── Maximum-strength select legibility (ID-level, beats theme form styles) ── */
#led-cleaner, #led-type, #sm-status, #new-job-client-picker,
.arc-field select, .arc-tab-content select {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}
#led-cleaner option, #led-type option, #sm-status option, .arc-field select option {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    background-color: #FFFFFF !important;
}

/* ── Half-day ── */
.arc-half-tag { display: inline-block; background: #FFF3E0; color: #EF6C00; font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.arc-halfday-box { background: #FFF8E1; border: 1px solid #FFE0B2; border-radius: var(--arc-radius); padding: 12px 14px; }
.arc-halfday-box p { margin: 0 0 10px; }

/* ── Selection echo + half-day card ── */
.arc-select-echo { display: block; margin-top: 4px; font-size: 0.85rem; font-weight: 700; color: var(--arc-primary); min-height: 1em; }
.arc-halfday-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 16px; margin-top: 18px; box-shadow: var(--arc-shadow); }
.arc-halfday-card h3 { margin: 0 0 6px; }

/* ── Journey stepper + timeline ── */
.arc-journey-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.arc-journey-times { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 10px; }
.arc-jtime { font-size: 0.82rem; color: var(--arc-text); }
.arc-timeline { background: var(--arc-bg); border: 1px solid var(--arc-border); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.arc-tl-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 0.84rem; }
.arc-tl-row + .arc-tl-row { border-top: 1px dashed var(--arc-border); }
.arc-tl-total { margin-top: 4px; border-top: 2px solid var(--arc-primary) !important; color: var(--arc-primary); font-weight: 700; }

/* ── Reporting time banner ── */
.arc-report-banner { background: #1A1A1A; color: #fff; border-radius: var(--arc-radius); padding: 11px 16px; margin-bottom: 16px; font-size: 0.92rem; }
.arc-report-banner strong { color: #fff; }

/* ── Cleaner daily "My Day" card ── */
.arc-day-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--arc-shadow); }
.arc-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.arc-day-head h3 { margin: 0; }
.arc-day-times { display: flex; flex-wrap: wrap; gap: 14px; }
.arc-day-slot { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; background: var(--arc-bg); border: 1px solid var(--arc-border); border-radius: 10px; padding: 12px; }
.arc-day-label { font-size: 0.8rem; color: var(--arc-muted); font-weight: 600; }
.arc-day-slot strong { font-size: 1.15rem; color: var(--arc-primary); }

/* ── Client search box ── */
.arc-client-search { width: 100%; padding: 9px 12px; border: 1px solid var(--arc-border); border-radius: 8px; margin-bottom: 8px; font-size: 0.9rem; background: #fff; color: var(--arc-text); }

/* ── Reporting banner (top of cleaner portal) ── */
.arc-report-top { display: flex; align-items: center; gap: 14px; background: var(--arc-primary); color: #fff; border-radius: var(--arc-radius); padding: 14px 18px; margin-bottom: 14px; }
.arc-report-top .arc-report-big { font-size: 1.9rem; font-weight: 800; line-height: 1; background: rgba(255,255,255,.18); padding: 10px 14px; border-radius: 10px; }
.arc-report-top small { opacity: .9; }

/* ── Manager reporting grid ── */
.arc-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.arc-rep-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--arc-bg); border: 1px solid var(--arc-border); border-radius: 8px; padding: 8px 12px; }
.arc-rep-name { font-weight: 600; font-size: 0.9rem; }
.arc-rep-time { padding: 6px 8px; border: 1px solid var(--arc-border); border-radius: 6px; background: #fff; color: var(--arc-text); }

/* ── Attendance tab ── */
.arc-att-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.arc-att-controls input[type="date"] { padding: 8px 10px; border: 1px solid var(--arc-border); border-radius: 7px; background: #fff; color: var(--arc-text); }
.arc-att-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.arc-att-pill { font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.arc-att-pill.arc-att-present { background: #E8F5E9; color: #2E7D32; }
.arc-att-pill.arc-att-half { background: #FFF3E0; color: #EF6C00; }
.arc-att-pill.arc-att-absent { background: #FBE9E7; color: #C62828; }
.arc-att-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.arc-att-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-left: 4px solid var(--arc-border); border-radius: 10px; padding: 14px; box-shadow: var(--arc-shadow); }
.arc-att-card.arc-att-present { border-left-color: #2E7D32; }
.arc-att-card.arc-att-half, .arc-att-card.arc-att-half_pending { border-left-color: #EF6C00; }
.arc-att-card.arc-att-absent { border-left-color: #C62828; opacity: .85; }
.arc-att-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.arc-att-status { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; color: var(--arc-muted); }
.arc-att-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 0.86rem; }
.arc-att-rows > div + div { border-top: 1px dashed var(--arc-border); }
.arc-att-rows span { color: var(--arc-muted); }
.arc-att-hours strong { color: var(--arc-primary); }
.arc-att-note { margin-top: 8px; font-size: 0.78rem; color: #EF6C00; }

/* ── Call client link (cleaner) ── */
.arc-call-client { display: inline-block; margin: 2px 0 8px; padding: 8px 14px; background: #E8F5E9; color: #1B5E20 !important; border-radius: 8px; font-size: 0.9rem; text-decoration: none; font-weight: 600; }

/* ── Access list ── */
.arc-access-list { margin-top: 22px; }
.arc-access-list h4 { margin: 0 0 8px; }

/* ── Live Office Board (display-optimised) ── */
.arc-board-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.arc-board-title { margin: 0; }
.arc-live-board { min-height: 200px; }
.arc-board-loading, .arc-board-empty { text-align: center; color: var(--arc-muted); padding: 40px; font-size: 1.3rem; }
.arc-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.arc-board-grid.arc-board-solo { grid-template-columns: 1fr; }

/* whole tile is the status colour, white text — readable by colour from across the room */
.arc-board-card { color: #fff; border-radius: 18px; padding: 22px 24px; box-shadow: 0 6px 18px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.arc-board-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 2px solid rgba(255,255,255,.35); padding-bottom: 12px; margin-bottom: 14px; }
.arc-board-label { font-size: 1.5rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: .5px; }
.arc-board-label small { display: block; font-size: 1rem; font-weight: 600; opacity: .9; text-transform: none; letter-spacing: 0; }
.arc-board-count { font-size: 3.4rem; font-weight: 900; line-height: 1; min-width: 1.4em; text-align: center; background: rgba(255,255,255,.22); border-radius: 14px; padding: 6px 14px; }

/* names are the main thing — big, bold, easy from a distance */
.arc-board-names { display: flex; flex-wrap: wrap; gap: 10px; }
.arc-board-name { font-size: 1.7rem; font-weight: 800; line-height: 1.15; background: rgba(255,255,255,.18); border-radius: 10px; padding: 8px 16px; }
.arc-board-noname { opacity: .7; font-weight: 600; }

.arc-board-solo .arc-board-card { padding: 40px 44px; }
.arc-board-solo .arc-board-label { font-size: 2.4rem; }
.arc-board-solo .arc-board-count { font-size: 5rem; }
.arc-board-solo .arc-board-name { font-size: 2.6rem; padding: 12px 24px; }

/* status colours — applied to the whole tile */
.arc-board-in_office { background: #2E7D32; }
.arc-board-travelling { background: #1565C0; }
.arc-board-working { background: #6A1B9A; }
.arc-board-lunch { background: #E65100; }
.arc-board-completed { background: #00838F; }
.arc-board-returning { background: #4E342E; }
.arc-board-left { background: #546E7A; }
.arc-board-yet_to_arrive { background: #C62828; }

#arc-tab-board:fullscreen { background: #0f0f0f; padding: 28px; overflow: hidden; }
#arc-tab-board:fullscreen .arc-board-title, #arc-tab-board:fullscreen .arc-board-bar .arc-muted { color: #fff; }
#arc-tab-board:fullscreen .arc-board-name { font-size: 2rem; }
#arc-tab-board:fullscreen .arc-board-solo .arc-board-name { font-size: 3rem; }

/* ── Attendance analytics ── */
.arc-att-rangebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.arc-att-range-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.arc-att-range-controls input { padding: 7px 9px; border: 1px solid var(--arc-border); border-radius: 7px; background: #fff; color: var(--arc-text); }
.arc-att-quicklink { cursor: pointer; font-size: 0.82rem; color: var(--arc-primary); font-weight: 600; margin-left: 10px; }
.arc-att-subh { margin: 22px 0 10px; }
.arc-att-absnum { color: #C62828; font-weight: 700; }
.arc-att-trend { display: flex; align-items: flex-end; gap: 4px; height: 130px; overflow-x: auto; padding: 6px 0; border-bottom: 1px solid var(--arc-border); }
.arc-trend-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 26px; height: 100%; }
.arc-trend-bar { width: 20px; background: var(--arc-primary); border-radius: 4px 4px 0 0; display: flex; align-items: flex-start; justify-content: center; min-height: 4px; position: relative; }
.arc-trend-bar span { position: absolute; top: -16px; font-size: 0.7rem; color: var(--arc-muted); }
.arc-trend-date { font-size: 0.68rem; color: var(--arc-muted); margin-top: 4px; }

/* ── Partner / crew labels ── */
.arc-partner-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--arc-primary); background: rgba(215,38,30,.08); padding: 1px 7px; border-radius: 999px; margin-top: 3px; }
.arc-partner-line { font-size: 0.9rem; color: var(--arc-text); background: var(--arc-bg); border: 1px solid var(--arc-border); border-radius: 8px; padding: 6px 12px; margin: 2px 0 8px; }
.arc-partner-line strong { color: var(--arc-primary); }

/* ── Jobs: package tag ── */
.arc-pkg-tag { font-size: 0.72rem; font-weight: 700; color: #00838F; background: rgba(0,131,143,.1); padding: 1px 7px; border-radius: 999px; }

/* ── Cleaner salary mask ── */
.arc-salary-locked { text-align: center; padding: 30px 18px; background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: var(--arc-radius); }
.arc-salary-locked h3 { margin: 8px 0 6px; }
.arc-salary-locked .arc-empty-icon { font-size: 2.2rem; }
.arc-notice-info { background: #E3F2FD; color: #1565C0; border-radius: 8px; padding: 10px 14px; margin-top: 12px; }

/* ── Manager salary requests ── */
.arc-salreq-box { background: #FFF8E1; border: 1px solid #FFE082; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.arc-salreq-box h4 { margin: 0 0 4px; }
.arc-salreq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #FFE082; }
.arc-salreq-row:first-of-type { border-top: none; }

/* ── Salary net pay emphasis ── */
.arc-net-pay { color: #2E7D32; }

/* ── Wide edit modal ── */
.arc-modal-wide { max-width: 640px; width: 94%; }
.arc-modal-wide .arc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.arc-modal-wide .arc-field-full { grid-column: 1 / -1; }
.arc-modal-wide textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--arc-border); border-radius: 8px; background: #fff; color: var(--arc-text); font-family: inherit; }

/* ── Bookings integration ── */
.arc-tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center; color: #fff; background: var(--arc-primary); border-radius: 999px; vertical-align: middle; }
.arc-booking-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.arc-booking-card { background: var(--arc-card); border: 1px solid var(--arc-border); border-radius: 12px; padding: 14px; box-shadow: var(--arc-shadow); }
.arc-booking-card.arc-booking-done { opacity: .7; }
.arc-booking-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.arc-booking-id { font-size: 0.72rem; color: var(--arc-muted); margin-left: 6px; }
.arc-booking-status { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.arc-bk-pending { background: #FFF3E0; color: #EF6C00; }
.arc-bk-confirmed { background: #E3F2FD; color: #1565C0; }
.arc-bk-completed { background: #E8F5E9; color: #2E7D32; }
.arc-booking-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 0.84rem; }
.arc-booking-rows > div + div { border-top: 1px dashed var(--arc-border); }
.arc-booking-rows span { color: var(--arc-muted); }
.arc-booking-addr strong { text-align: right; max-width: 65%; }
.arc-booking-imported { margin-top: 10px; color: #2E7D32; font-weight: 700; font-size: 0.85rem; }
.arc-import-booking-btn { margin-top: 12px; width: 100%; }
.arc-import-hint { font-size: 0.85rem; color: var(--arc-primary); font-weight: 600; }