/* Shared page surfaces: override legacy hard-coded dark palettes in light mode. */
.profile-editor.sd-shell { max-width: 1040px; }
.profile-editor__form { padding: clamp(20px, 3vw, 32px); }
.profile-editor__photo { display: flex; align-items: center; gap: 28px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--sd-border-soft); }
.profile-editor__photo > img { width: 120px; height: 120px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 3px solid var(--sd-border); }
.profile-editor__upload { flex: 1; min-width: 0; }
.profile-editor h2 { font-size: 18px; margin-bottom: 16px; }
.profile-editor__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--sd-border-soft); }
body.light-mode .profile-editor .sd-field > span { color: #334d6e; }
@media (max-width: 600px) {
    .profile-editor__photo { flex-direction: column; align-items: stretch; gap: 18px; }
    .profile-editor__photo > img { align-self: center; }
    .profile-editor__actions > .sd-button { width: 100%; }
}
body.light-mode :is(.permissions-audit-table, .permissions-matrix-table) {
    --bs-table-bg: #fff;
    --bs-table-color: #172b45;
    --bs-table-border-color: #dce4ef;
    --bs-table-striped-bg: #f5f8fc;
    --bs-table-striped-color: #172b45;
    --bs-table-hover-bg: #edf4fd;
    --bs-table-hover-color: #172b45;
    color: #172b45;
}
body.light-mode .permissions-audit-table > tbody > tr > td { background-color: #fff; color: #172b45; }
body.light-mode .permissions-audit-table :is(summary, pre) { color: #172b45; }
body.light-mode .permissions-matrix-table > tbody > tr > td { background-color: #fff; color: #172b45; }
body.light-mode .permissions-matrix-table label { color: #172b45; }
body.light-mode .permissions-matrix-table .badge.bg-secondary { background-color: #e3edf9 !important; color: #234f80; border: 1px solid #b8cce5; }
body.light-mode .permissions-matrix-table input[type="checkbox"] { accent-color: #1269bc; color-scheme: light; }
body.light-mode .jobs-table-number { color: #172b45 !important; }
body.light-mode .timesheet-table .sort-selected { color: #155a9e !important; }
body.light-mode :is(.timesheet-field span, .supervisor-staff-eyebrow, .supervisor-staff-search i) { color: #334d6e; }
body.light-mode :is(.jobs-table-card, .jobs-page-count, .staff-page-count, .supervisor-staff-count, .supervisor-staff-card, .supervisor-jobs-card, .timesheet-card, .job-form-card, .staff-form-card) {
    background: #fff; color: #172b45; border-color: #ccd8e8;
}
body.light-mode :is(.jobs-toolbar, .supervisor-staff-toolbar, .timesheet-export-bar, .timesheet-filter-bar, .staff-tabs--segmented) { background: #f5f8fc; border-color: #ccd8e8; }
body.light-mode :is(.jobs-data-table, .staff-data-table, .timesheet-table) { background: #fff; color: #172b45; }
body.light-mode :is(.jobs-data-table, .staff-data-table, .timesheet-table) :is(tbody, tr, td) { background: #fff; color: #172b45; border-color: #dce4ef; }
body.light-mode :is(.jobs-data-table, .staff-data-table, .timesheet-table) th { background: #eaf1fa; color: #334d6e; border-color: #dce4ef; }
body.light-mode :is(.jobs-data-table, .staff-data-table, .timesheet-table) tr:hover td { background: #f0f6fe; }
body.light-mode :is(.jobs-table-number, .jobs-page-count span, .staff-page-count span, .supervisor-staff-count strong, .home-metric strong, .home-attention-item strong, .home-action-link span, .home-snapshot-table td:first-child strong) { color: #172b45; }
body.light-mode :is(.home-snapshot-table td:first-child span, .jobs-page-count small, .supervisor-staff-count span) { color: #52647b; }
body.light-mode :is(.jobs-search, .supervisor-staff-search) { background: #fff; color: #1765ad; border-color: #aabdd5; }
body.light-mode :is(.jobs-search, .supervisor-staff-search) input { color: #172b45 !important; background: transparent !important; }
body.light-mode :is(.jobs-search, .supervisor-staff-search) input::placeholder { color: #52647b; }
body.light-mode .timesheet-field input { background: #fff; color: #172b45; border-color: #aabdd5; color-scheme: light; }
body.light-mode .timesheet-field input::-webkit-calendar-picker-indicator { filter: none; }
body.light-mode :is(.jobs-icon-button, .supervisor-table-action, .jobs-action-button:not(.jobs-action-button--primary), .staff-tab, .page-link) { background: #eaf2fc; color: #155a9e; border-color: #bed0e8; }
body.light-mode :is(.jobs-icon-button, .supervisor-table-action) i { color: inherit; }
body.light-mode :is(.jobs-icon-button, .supervisor-table-action):hover { background: #d5e7fc; color: #10497f; }
body.light-mode :is(.jobs-action-button--primary, .staff-tab.active) { background: #1269bc; color: #fff; }
body.light-mode :is(.home-dashboard__date-link, .home-panel__heading a) { background: #e6f0fd; color: #155a9e; border-color: #bed0e8; }
body.light-mode :is(.home-attention-item, .home-action-link) { background: #f1f5fb; color: #172b45; }
body.light-mode :is(.home-attention-item, .home-attention-item:hover) { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
body.light-mode :is(.home-action-link, .home-action-link:hover) { display: flex; align-items: center; gap: 12px; }
body.light-mode :is(.home-action-link, .home-attention-item):hover { background: #e3eefc; }
body.light-mode :is(.home-panel__heading > i, .home-action-link i, .home-attention-item__icon, .home-metric--blue .home-metric__icon) { color: #1765ad; }
body.light-mode .home-metric--green .home-metric__icon { color: #08754f; }
body.light-mode .home-metric--amber .home-metric__icon { color: #8a5200; }
body.light-mode .home-metric--red .home-metric__icon { color: #b02740; }
body.light-mode .home-status-pill { background: #dff2e9; color: #086641; }
body.light-mode :is(.home-status-pill--warn, .home-attention-item b) { background: #fff0d2; color: #805000; }

/* Inset the account controls on wide screens, retain space on phones. */
.top-bar .top-bar-account { margin-right: clamp(8px, 8vw, 144px); gap: 12px; }
.top-bar-account :is(.theme-toggle, .activity-bell) { margin-right: 0; }
.top-bar-account .dropdown-trigger { display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid #465675; border-radius: 9px; cursor: pointer; }
.top-bar-account .dropdown-content { top: calc(100% + 8px); right: 0; left: auto; min-width: 220px; padding: 8px; border-radius: 12px; border: 1px solid #465675; background: #202438; box-shadow: 0 12px 32px #0004; }
.top-bar-account .dropdown-content a, .top-bar-account .dropdown-content a:hover { display: flex; align-items: center; padding: 12px 14px; border-radius: 7px; margin: 0; color: #eef4ff; font-size: 14px; text-decoration: none; transform: none; }
.top-bar-account .dropdown-content a:hover { background: #30466b; }
.top-bar-account .profile-toggle, .top-bar-account .profile-toggle:hover { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: inherit; transform: none; }
.profile-toggle:focus-visible { outline: 2px solid #2491f5; outline-offset: 4px; }
body.light-mode .top-bar-account .dropdown-trigger { border-color: #bed0e8; background: #f5f8fc; }
body.light-mode .top-bar-logo { background: #202438; border-radius: 6px; padding: 5px; }

/* Authentication retains all existing form behaviour with responsive theme styling. */
.auth-page { --auth-surface: #202438; --auth-input: #171c2d; --auth-text: #eef4ff; --auth-border: #465675; }
.auth-page.light-mode { --auth-surface: #fff; --auth-input: #f8fafd; --auth-text: #172b45; --auth-border: #aabdd5; }
.auth-page .main-content { margin: 0 auto; width: 100%; padding: 24px 16px; }
.auth-page .auth-shell { max-width: 580px; margin: 32px auto; padding: 0; }
.auth-shell .col-md-8 { width: 100%; }
.auth-page .auth-card { background: var(--auth-surface); color: var(--auth-text); border: 1px solid var(--auth-border); border-radius: 16px; box-shadow: 0 18px 45px #0002; overflow: hidden; }
.auth-card .card-header { background: transparent; padding: 28px 28px 16px; border-bottom: 1px solid var(--auth-border); }
.auth-card .card-header h1 { font-size: 28px; font-weight: 700; margin: 0 0 8px; color: var(--auth-text); }
.auth-card .card-header p { font-size: 14px; margin: 0; }
.auth-card .card-body { padding: 28px; }
.auth-card .form-label, .auth-card .form-check-label { color: var(--auth-text); }
.auth-card .form-control { min-height: 46px; background: var(--auth-input); color: var(--auth-text); border: 1px solid var(--auth-border); border-radius: 8px; }
.auth-card .form-control:focus { border-color: #2491f5; box-shadow: 0 0 0 3px #2491f530; }
.auth-card .btn-primary { background: #1269bc; border-color: #1269bc; color: #fff; min-height: 46px; border-radius: 8px; }
.auth-card .invalid-feedback { color: #ff9fae; }
.light-mode .auth-card .invalid-feedback { color: #a2233b; }
@media (max-width: 700px) {
    .top-bar .top-bar-account { margin-right: 8px; gap: 8px; }
    .auth-page .auth-shell { margin-top: 16px; }
    .auth-card .card-body, .auth-card .card-header { padding: 20px; }
}