/* Shared screen-only action colors. Keep print output and navigation states separate. */
@media screen {
    html:has(.page:not(.login-only-layout)) {
        --action-blue-ink: #1d4ed8;
        --action-blue-bg: #e0ecff;
        --action-blue-edge: #9abef8;
        --action-blue-hover: #cfdefc;
        --action-amber-ink: #9a470b;
        --action-amber-bg: #fff0d5;
        --action-amber-edge: #eabd77;
        --action-amber-hover: #ffe3b5;
        --action-teal-ink: #087668;
        --action-teal-bg: #d5f4ee;
        --action-teal-edge: #78cabb;
        --action-teal-hover: #bce9df;
        --action-rose-ink: #be123c;
        --action-rose-bg: #ffe1e8;
        --action-rose-edge: #f69bb0;
        --action-rose-hover: #ffd0dc;
        --action-purple-ink: #6d28d9;
        --action-purple-bg: #ede4ff;
        --action-purple-edge: #c5a8f4;
        --action-purple-hover: #e1d2fc;
        --action-green-ink: #166534;
        --action-green-bg: #dcf5e3;
        --action-green-edge: #91cfa4;
        --action-green-hover: #c8ebd3;
        --action-neutral-ink: #475569;
        --action-neutral-bg: #edf2f7;
        --action-neutral-edge: #b8c6d6;
        --action-neutral-hover: #dde6ef;
    }

    html:has(.page:not(.login-only-layout)) :where(
        .action-button, .employee-action, .btn:not(.btn-link):not([role="tab"]),
        .reference-heading-action-button, .reference-add-button, .reference-section-add-button,
        .account-add-button, .eligibility-add-button, .announcement-primary-action,
        .report-print-button, .retirement-icon-print-button, .coe-inline-print-button,
        .batch-icon-button, .device-refresh-button, .employee-profile-edit-button,
        .employee-request-action-button, .filter-toggle-button, .pwa-install-confirm-button
    ) {
        --action-ink: var(--action-teal-ink);
        --action-tint: var(--action-teal-bg);
        --action-edge: var(--action-teal-edge);
        --action-hover: var(--action-teal-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.action-button, .employee-action, .batch-icon-button, .filter-toggle-button, .btn-info, .btn-outline-info, .btn-outline-primary),
    html:has(.page:not(.login-only-layout)) .employee-request-action-button.view {
        --action-ink: var(--action-blue-ink);
        --action-tint: var(--action-blue-bg);
        --action-edge: var(--action-blue-edge);
        --action-hover: var(--action-blue-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-dark, .btn-outline-dark, .universal-cancel-button) {
        --action-ink: var(--action-neutral-ink);
        --action-tint: var(--action-neutral-bg);
        --action-edge: var(--action-neutral-edge);
        --action-hover: var(--action-neutral-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.action-button, .employee-action):is(.view, .leave-employee-ledger-action) {
        --action-ink: var(--action-blue-ink);
        --action-tint: var(--action-blue-bg);
        --action-edge: var(--action-blue-edge);
        --action-hover: var(--action-blue-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.btn-warning, .btn-outline-warning, .employee-profile-edit-button),
    html:has(.page:not(.login-only-layout)) :is(.action-button, .employee-action).edit {
        --action-ink: var(--action-amber-ink);
        --action-tint: var(--action-amber-bg);
        --action-edge: var(--action-amber-edge);
        --action-hover: var(--action-amber-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.reference-section-add-button, .device-refresh-button),
    html:has(.page:not(.login-only-layout)) :is(.action-button, .employee-action):is(.service-record, .device-refresh-action, .add) {
        --action-ink: var(--action-teal-ink);
        --action-tint: var(--action-teal-bg);
        --action-edge: var(--action-teal-edge);
        --action-hover: var(--action-teal-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.btn-success, .btn-outline-success),
    html:has(.page:not(.login-only-layout)) :is(.action-button, .employee-action, .employee-request-action-button):is(.save, .set-active, .present, .finish) {
        --action-ink: var(--action-green-ink);
        --action-tint: var(--action-green-bg);
        --action-edge: var(--action-green-edge);
        --action-hover: var(--action-green-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.btn-danger, .btn-outline-danger),
    html:has(.page:not(.login-only-layout)) :is(.action-button, .employee-action):is(.delete, .disable, .separated) {
        --action-ink: var(--action-rose-ink);
        --action-tint: var(--action-rose-bg);
        --action-edge: var(--action-rose-edge);
        --action-hover: var(--action-rose-hover);
    }

    html:has(.page:not(.login-only-layout)) :is(.report-print-button, .retirement-icon-print-button, .coe-inline-print-button, .step-list-print-button, .employee-payroll-download-button, .exporter-download, .leave-employees-export-action, .leave-ledger-export-action, .leave-ledger-print-action),
    html:has(.page:not(.login-only-layout)) .btn:has(.icon-print, .icon-download, .icon-upload, .solar-icon > use[href$="#solar-print"], .solar-icon > use[href$="#solar-download"]),
    html:has(.page:not(.login-only-layout)) :is(.action-button, .employee-action):is(.print, .history) {
        --action-ink: var(--action-purple-ink);
        --action-tint: var(--action-purple-bg);
        --action-edge: var(--action-purple-edge);
        --action-hover: var(--action-purple-hover);
    }

    html:not(.login-only-layout):has(.page:not(.login-only-layout)) :is(
        .action-button, .employee-action, .btn:not(.btn-link):not([role="tab"]),
        .reference-heading-action-button, .reference-add-button, .reference-section-add-button,
        .account-add-button, .eligibility-add-button, .announcement-primary-action,
        .report-print-button, .retirement-icon-print-button, .coe-inline-print-button,
        .batch-icon-button, .device-refresh-button, .employee-profile-edit-button,
        .employee-request-action-button, .filter-toggle-button, .pwa-install-confirm-button
    ) {
        color: var(--action-ink) !important;
        background: var(--action-tint) !important;
        border-color: var(--action-edge) !important;
        box-shadow: none !important;
    }

    html:not(.login-only-layout):has(.page:not(.login-only-layout)) :is(
        .action-button, .employee-action, .btn:not(.btn-link):not([role="tab"]),
        .reference-heading-action-button, .reference-add-button, .reference-section-add-button,
        .account-add-button, .eligibility-add-button, .announcement-primary-action,
        .report-print-button, .retirement-icon-print-button, .coe-inline-print-button,
        .batch-icon-button, .device-refresh-button, .employee-profile-edit-button,
        .employee-request-action-button, .filter-toggle-button, .pwa-install-confirm-button
    ):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]):not(.disabled) {
        color: var(--action-ink) !important;
        background: var(--action-hover) !important;
        border-color: var(--action-ink) !important;
    }

    html:not(.login-only-layout):has(.page:not(.login-only-layout)) :is(
        .action-button, .employee-action, .btn:not(.btn-link):not([role="tab"]),
        .reference-heading-action-button, .reference-add-button, .reference-section-add-button,
        .account-add-button, .eligibility-add-button, .announcement-primary-action,
        .report-print-button, .retirement-icon-print-button, .coe-inline-print-button,
        .batch-icon-button, .device-refresh-button, .employee-profile-edit-button,
        .employee-request-action-button, .filter-toggle-button, .pwa-install-confirm-button
    ):focus-visible {
        outline: 2px solid var(--action-ink) !important;
        outline-offset: 2px !important;
    }

    html:not(.login-only-layout):has(.page:not(.login-only-layout)) :is(
        .action-button, .employee-action, .btn:not(.btn-link):not([role="tab"]),
        .reference-heading-action-button, .reference-add-button, .reference-section-add-button,
        .account-add-button, .eligibility-add-button, .announcement-primary-action,
        .report-print-button, .retirement-icon-print-button, .coe-inline-print-button,
        .batch-icon-button, .device-refresh-button, .employee-profile-edit-button,
        .employee-request-action-button, .filter-toggle-button, .pwa-install-confirm-button
    ):is(:disabled, [aria-disabled="true"], .disabled) {
        color: #64748b !important;
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        opacity: .65 !important;
    }

    html:not(.login-only-layout):has(.page:not(.login-only-layout)) .reference-heading-action-button .salary-annex-settings-icon {
        color: var(--action-ink) !important;
    }

    html:not(.login-only-layout):has(.page:not(.login-only-layout)) .list-add-button.is-personnel-add-loading .salary-annex-settings-icon::before {
        border-color: color-mix(in srgb, var(--action-ink) 25%, transparent) !important;
        border-top-color: var(--action-ink) !important;
    }
}