/*
 * RemoteCRW current public theme.
 * Loaded last on public forms, agreements, invoices and secure token pages.
 */

:root {
    color-scheme: dark;
    --public-bg: #080d14;
    --public-surface: #101720;
    --public-surface-soft: #0d141d;
    --public-surface-raised: #18222f;
    --public-border: #253343;
    --public-border-strong: #34475a;
    --public-text: #edf4fb;
    --public-body: #d8e2ec;
    --public-muted: #9eacbc;
    --public-primary: #2f7df4;
    --public-primary-hover: #4c90f7;
    --public-success: #2dcf8f;
    --public-warning: #f2b84b;
    --public-danger: #ff6b78;
    --public-shadow: 0 24px 70px rgba(0, 0, 0, .36);
    --public-radius: 14px;
    --bg: var(--public-bg);
    --surface: var(--public-surface);
    --surface-soft: var(--public-surface-soft);
    --line: var(--public-border);
    --border: var(--public-border);
    --text: var(--public-body);
    --muted: var(--public-muted);
    --navy: var(--public-text);
    --blue: var(--public-primary);
    --green: var(--public-success);
}

html {
    min-height: 100%;
    background: var(--public-bg);
}

body {
    min-height: 100vh;
    color: var(--public-body) !important;
    background:
        radial-gradient(circle at 15% -10%, rgba(47, 125, 244, .13), transparent 32rem),
        var(--public-bg) !important;
    font-family: Inter, "Segoe UI Variable", Aptos, "Segoe UI", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, strong, b) {
    color: var(--public-text);
}

:where(p, li, dd, small, .muted, .lead, .source-note) {
    color: var(--public-muted);
}

:where(a:not(.btn):not(.button)) {
    color: #8dbaff;
}

:where(
    .card,
    .panel,
    .box,
    .form-card,
    .auth-card,
    .auth-brand,
    .invoice-card,
    .public-document-card,
    .listing-public-card,
    .listing-public-header,
    .checklist,
    .feature,
    .filters,
    .stats,
    .top,
    .topbar
) {
    color: var(--public-body) !important;
    background: var(--public-surface) !important;
    border-color: var(--public-border) !important;
    box-shadow: var(--public-shadow);
}

:where(
    input,
    select,
    textarea
) {
    color: var(--public-text) !important;
    background: var(--public-surface-soft) !important;
    border-color: var(--public-border-strong) !important;
    caret-color: var(--public-text);
}

:where(input, textarea)::placeholder {
    color: #77879a !important;
    opacity: 1;
}

:where(input, select, textarea):focus {
    border-color: var(--public-primary) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 244, .18) !important;
}

:where(select option) {
    color: var(--public-text);
    background: var(--public-surface);
}

:where(input, textarea)[readonly],
:where(input, select, textarea):disabled {
    color: #9aa8b8 !important;
    background: #0a1119 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #9aa8b8 !important;
}

:where(.btn, .button, button, input[type="submit"]) {
    border-color: var(--public-border-strong);
    border-radius: 9px;
}

:where(
    .btn-primary,
    .button-primary,
    button.primary,
    .btn.primary,
    input[type="submit"]
) {
    color: #fff !important;
    background: var(--public-primary) !important;
    border-color: var(--public-primary) !important;
}

:where(
    .btn-primary,
    .button-primary,
    button.primary,
    .btn.primary,
    input[type="submit"]
):hover {
    background: var(--public-primary-hover) !important;
    border-color: var(--public-primary-hover) !important;
}

:where(.btn-secondary, .btn:not(.primary), .button-secondary) {
    color: var(--public-body) !important;
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border-strong) !important;
}

:where(table) {
    color: var(--public-body) !important;
    background: var(--public-surface) !important;
}

:where(th) {
    color: var(--public-muted) !important;
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border) !important;
}

:where(td) {
    color: var(--public-body) !important;
    background: var(--public-surface) !important;
    border-color: var(--public-border) !important;
}

:where(.nav, .public-document-topbar, .listing-public-header, .so-public-header) {
    color: var(--public-text) !important;
    background: rgba(16, 23, 32, .96) !important;
    border-color: var(--public-border) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

:where(.hero, .so-public-hero, .listing-public-hero) {
    color: var(--public-text);
    background:
        radial-gradient(circle at 15% 0%, rgba(47, 125, 244, .22), transparent 34rem),
        linear-gradient(135deg, #111b28, #0c121b) !important;
    border-color: var(--public-border) !important;
}

:where(.hero p, .so-public-hero p, .listing-public-hero p) {
    color: #b4c0ce !important;
}

:where(.alert, .notice, .message) {
    color: var(--public-body);
    background: var(--public-surface-raised);
    border-color: var(--public-border-strong);
}

:where(.alert-success, .success) {
    color: #a7f3d0 !important;
    background: rgba(45, 207, 143, .1) !important;
    border-color: rgba(45, 207, 143, .32) !important;
}

:where(.alert-error, .error) {
    color: #fecdd3 !important;
    background: rgba(255, 107, 120, .1) !important;
    border-color: rgba(255, 107, 120, .34) !important;
}

/*
 * Final public paint pass. The public pages pre-date the shared theme and use
 * page-specific selectors, so these rules deliberately carry normal selector
 * weight and !important declarations. Layout, spacing and document structure
 * remain owned by each page stylesheet.
 */
body :is(
    .invoice-sheet,
    .invoice-balance-card,
    .invoice-items-section,
    .invoice-summary-section,
    .invoice-notes,
    .invoice-notes-muted,
    .invoice-payment-panel,
    .invoice-footer,
    .invoice-error-card,
    .hrc-card,
    .hrc-summary-item,
    .hrc-detail-block,
    .hrc-choice-button,
    .hrc-choice-changes,
    .hrc-choice-panel,
    .hrc-form-note,
    .hrc-client-source,
    .hrc-complete-box,
    .listing-public-card,
    .listing-success-card,
    .listing-closed-card,
    .custom-role-card,
    .custom-experience-card,
    .custom-audio-card,
    .custom-check-item,
    .custom-role-grid > article,
    .custom-confirmation-list > div,
    .listing-submit-bar,
    .so-public-card,
    .so-public-summary > div,
    .so-public-amount,
    .so-public-note,
    .so-public-term,
    .page-shell > .section,
    .candidate-card,
    .candidate-details,
    .profile-item,
    .experience-card,
    .copy-panel,
    .guidance-card,
    .schedule-note,
    .submitted-card,
    .request-card,
    .request-form-panel,
    .enterprise-assurance,
    .enterprise-assurance > div,
    .request-option,
    .request-option > span,
    .requester-choice label > span,
    .success-panel,
    .public-document-frame-card,
    .public-document-card,
    .public-file-list > a,
    .agreement-confirm
) {
    color: var(--public-body) !important;
    background: var(--public-surface) !important;
    border-color: var(--public-border) !important;
}

body :is(
    .invoice-toolbar,
    .invoice-header,
    .invoice-sheet-header,
    .invoice-items-head,
    .hrc-card-head,
    .so-public-card-head,
    .candidate-head,
    .request-topbar,
    .request-intro
) {
    color: var(--public-text) !important;
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border) !important;
}

body :is(
    .invoice-balance-card,
    .invoice-notes-muted,
    .invoice-footer,
    .hrc-summary-item,
    .hrc-detail-block,
    .hrc-choice-button,
    .hrc-choice-changes,
    .hrc-choice-panel,
    .hrc-form-note,
    .hrc-client-source,
    .so-public-summary > div,
    .so-public-amount,
    .so-public-note,
    .so-public-term,
    .candidate-details,
    .profile-item,
    .experience-card,
    .copy-panel,
    .guidance-card,
    .schedule-note,
    .request-option,
    .request-option > span,
    .requester-choice label > span,
    .enterprise-assurance > div,
    .public-file-list > a,
    .agreement-confirm
) {
    background: var(--public-surface-soft) !important;
}

body :is(
    .invoice-sheet,
    .invoice-header,
    .invoice-sheet-header,
    .invoice-balance-card,
    .invoice-items-section,
    .invoice-summary-section,
    .invoice-notes,
    .invoice-payment-panel,
    .invoice-footer,
    .hrc-card,
    .hrc-card-head,
    .hrc-card-body,
    .hrc-summary-item,
    .hrc-detail-block,
    .hrc-terms details,
    .hrc-choice-button,
    .hrc-choice-changes,
    .hrc-choice-panel,
    .hrc-client-source,
    .so-public-card,
    .so-public-card-head,
    .so-public-content,
    .so-public-summary > div,
    .so-public-amount,
    .so-public-note,
    .so-public-term,
    .candidate-card,
    .candidate-head,
    .candidate-details,
    .profile-item,
    .experience-card,
    .copy-panel,
    .guidance-card,
    .schedule-note,
    .submitted-card,
    .request-card,
    .request-form-panel,
    .request-option,
    .request-option > span,
    .requester-choice label > span,
    .enterprise-assurance > div,
    .public-document-frame-card,
    .public-document-card,
    .public-file-list > a,
    .agreement-confirm
) {
    border-color: var(--public-border) !important;
}

body :is(
    .invoice-sheet,
    .hrc-card,
    .listing-public-card,
    .so-public-card,
    .page-shell > .section,
    .candidate-card,
    .request-card,
    .public-document-card
) :is(h1, h2, h3, h4, strong, b),
body :is(
    .invoice-sheet,
    .hrc-card,
    .listing-public-card,
    .so-public-card,
    .page-shell > .section,
    .candidate-card,
    .request-card,
    .public-document-card
) :is(.label, .amount, .value) {
    color: var(--public-text) !important;
}

body :is(
    .invoice-sheet,
    .hrc-card,
    .listing-public-card,
    .so-public-card,
    .page-shell > .section,
    .candidate-card,
    .request-card,
    .public-document-card
) :is(p, small, .muted, .meta, .label) {
    color: var(--public-muted) !important;
}

body :is(.hrc-terms details, .confirmation, .requester-choice, .steps) {
    color: var(--public-body) !important;
    background: var(--public-surface-soft) !important;
    border-color: var(--public-border) !important;
}

body :is(input, select, textarea) {
    color: var(--public-text) !important;
    background: var(--public-surface-soft) !important;
    border-color: var(--public-border-strong) !important;
}

body :is(input, select, textarea):focus {
    border-color: var(--public-primary) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(47, 125, 244, .18) !important;
}

body table {
    color: var(--public-body) !important;
    background: var(--public-surface) !important;
}

body table th {
    color: var(--public-muted) !important;
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border) !important;
}

body table td {
    color: var(--public-body) !important;
    background: var(--public-surface) !important;
    border-color: var(--public-border) !important;
}

body :is(.hrc-summary-item, .so-public-summary > div, .invoice-meta > div) > span {
    color: var(--public-muted) !important;
}

body :is(.hrc-summary-item, .so-public-summary > div, .invoice-meta > div) > strong {
    color: var(--public-text) !important;
}

body :is(
    .invoice-button-primary,
    .primary-button,
    .schedule-button,
    .hrc-primary-button,
    .so-public-button.primary,
    .public-button.primary
) {
    color: #fff !important;
    background: var(--public-primary) !important;
    border-color: var(--public-primary) !important;
}

body :is(
    .invoice-button-primary,
    .primary-button,
    .schedule-button,
    .hrc-primary-button,
    .so-public-button.primary,
    .public-button.primary
):hover {
    background: var(--public-primary-hover) !important;
    border-color: var(--public-primary-hover) !important;
}

body :is(
    .invoice-button-secondary,
    .hrc-secondary-button,
    .history-button,
    .secondary-button,
    .so-public-button.secondary,
    .public-button.secondary
) {
    color: var(--public-body) !important;
    background: var(--public-surface-raised) !important;
    border-color: var(--public-border-strong) !important;
}

body :is(.public-button.danger, .invoice-button-danger) {
    color: #fecdd3 !important;
    background: rgba(255, 107, 120, .1) !important;
    border-color: rgba(255, 107, 120, .34) !important;
}

body :is(.invoice-line-items tr:hover, .public-file-list > a:hover, .request-option:hover) {
    background: #182431 !important;
}

body :is(.invoice-status, .invoice-payment-panel, .hrc-alert, .listing-public-alert) {
    color: #f8d28b !important;
    background: rgba(242, 184, 75, .1) !important;
    border-color: rgba(242, 184, 75, .3) !important;
}

body :is(
    .invoice-status.status-paid,
    .invoice-payment-panel.status-paid,
    .hrc-alert-success
) {
    color: #a7f3d0 !important;
    background: rgba(45, 207, 143, .1) !important;
    border-color: rgba(45, 207, 143, .32) !important;
}

body :is(
    .invoice-status.status-cancelled,
    .invoice-status.status-void,
    .invoice-status.status-refunded,
    .invoice-payment-panel.status-cancelled,
    .invoice-payment-panel.status-void,
    .invoice-payment-panel.status-refunded,
    .hrc-alert-error,
    .listing-public-alert
) {
    color: #fecdd3 !important;
    background: rgba(255, 107, 120, .1) !important;
    border-color: rgba(255, 107, 120, .34) !important;
}

:focus-visible {
    outline: 2px solid #69a4ff !important;
    outline-offset: 2px;
}

@media (max-width: 680px) {
    body {
        background: var(--public-bg) !important;
    }

    :where(.card, .panel, .form-card, .auth-card, .auth-brand) {
        box-shadow: none;
    }
}

@media print {
    :root {
        color-scheme: light;
    }

    body {
        color: #172033 !important;
        background: #fff !important;
    }

    :where(.card, .panel, .box, .invoice-card, .public-document-card) {
        color: #172033 !important;
        background: #fff !important;
        border-color: #d0d5dd !important;
        box-shadow: none !important;
    }

    :where(h1, h2, h3, h4, strong, b, p, li, dd, small, td, th) {
        color: #172033 !important;
        background: #fff !important;
    }

    body [class],
    body [class] [class],
    body [class] [class] * {
        color: #172033 !important;
        background: #fff !important;
        border-color: #d0d5dd !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body .invoice-accent {
        background: #f45b3d !important;
    }
}