/*
 * UI/UX Compliance Layer
 * Centralized accessible colors, focus states, semantic states, and contrast support.
 */

:root {
    color-scheme: light dark;

    --ap-color-primary: #0f7a4f;
    --ap-color-primary-hover: #0c6842;
    --ap-color-primary-active: #095536;
    --ap-color-primary-soft: rgba(15, 122, 79, 0.1);
    --ap-color-primary-soft-strong: rgba(15, 122, 79, 0.16);

    --ap-color-secondary: #9a3412;
    --ap-color-secondary-soft: rgba(154, 52, 18, 0.1);

    --ap-color-success: #0f7a4f;
    --ap-color-success-text: #0f6b44;
    --ap-color-success-bg: #dcfce7;

    --ap-color-warning: #9a3412;
    --ap-color-warning-text: #8a4b00;
    --ap-color-warning-bg: #ffedd5;

    --ap-color-danger: #b42318;
    --ap-color-danger-text: #b42318;
    --ap-color-danger-bg: #fee4e2;

    --ap-color-info: #0057b8;
    --ap-color-info-text: #0057b8;
    --ap-color-info-bg: #dbeafe;

    --ap-surface-0: #ffffff;
    --ap-surface-50: #f8fafc;
    --ap-surface-100: #f1f5f9;
    --ap-surface-200: #e2e8f0;
    --ap-surface-300: #cbd5e1;

    --ap-text-strong: #0f172a;
    --ap-text-body: #334155;
    --ap-text-muted: #526071;
    --ap-text-subtle: #64748b;

    --ap-border: #cbd5e1;
    --ap-border-strong: #94a3b8;

    --ap-focus: #0057b8;
    --ap-focus-shadow: rgba(0, 87, 184, 0.24);

    --ap-sidebar-bg: #f1f5f9;
    --ap-sidebar-text: #334155;
    --ap-sidebar-icon: #475569;

    --ap-chart-series-1: #0f7a4f;
    --ap-chart-series-2: #b42318;
    --ap-chart-series-3: #0057b8;

    --ap-toast-success: #0f7a4f;
    --ap-toast-error: #b42318;
    --ap-toast-warning: #9a3412;
    --ap-toast-info: #0057b8;
    --ap-toast-title: #334155;
    --ap-toast-message: #526071;

    --color-primary: var(--ap-color-primary);
    --color-primary-light: #17905f;
    --color-primary-dark: #0c6842;
    --color-primary-hover: var(--ap-color-primary-hover);

    --color-secondary: var(--ap-color-secondary);
    --color-secondary-light: #c05621;
    --color-secondary-dark: #7c2d12;

    --color-success: var(--ap-color-success);
    --color-success-light: #17905f;
    --color-success-dark: var(--ap-color-success-text);
    --color-success-bg: var(--ap-color-success-bg);

    --color-warning: var(--ap-color-warning);
    --color-warning-light: #c05621;
    --color-warning-dark: var(--ap-color-warning-text);
    --color-warning-bg: var(--ap-color-warning-bg);

    --color-danger: var(--ap-color-danger);
    --color-danger-light: #d92d20;
    --color-danger-dark: #912018;
    --color-danger-bg: var(--ap-color-danger-bg);

    --color-info: var(--ap-color-info);
    --color-info-light: #1d70d0;
    --color-info-dark: var(--ap-color-info-text);
    --color-info-bg: var(--ap-color-info-bg);

    --bg-primary: var(--ap-surface-0);
    --bg-secondary: var(--ap-surface-50);
    --bg-tertiary: var(--ap-surface-100);
    --bg-dark: var(--ap-text-strong);

    --text-primary: var(--ap-text-strong);
    --text-secondary: var(--ap-text-body);
    --text-tertiary: var(--ap-text-muted);
    --text-inverse: #ffffff;
    --text-link: var(--ap-color-info);
    --text-link-hover: #004a99;

    --border-light: var(--ap-surface-200);
    --border-medium: var(--ap-border);
    --border-dark: var(--ap-border-strong);
    --border-focus: var(--ap-focus);
}

html {
    color-scheme: light dark;
}

body {
    color: var(--ap-text-body);
    background-color: var(--ap-surface-0);
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"]),
    .btn,
    .page-link,
    .dropdown-item,
    .form-control,
    .form-select,
    .form--control,
    .accordion-button,
    .btn-close,
    .navbar-toggler,
    .sleep__button,
    .sleep-bottom-menu__button
):focus,
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"]),
    .btn,
    .page-link,
    .dropdown-item,
    .form-control,
    .form-select,
    .form--control,
    .accordion-button,
    .btn-close,
    .navbar-toggler,
    .sleep__button,
    .sleep-bottom-menu__button
):focus-visible {
    outline: 3px solid var(--ap-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--ap-focus-shadow) !important;
}

.btn--base,
.btn-primary,
.btn.btn-primary,
.bg--base,
.bg--primary,
.bg-primary,
.ap-btn-primary {
    background-color: var(--ap-color-primary) !important;
    border-color: var(--ap-color-primary) !important;
    color: #ffffff !important;
}

.btn--base:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
.btn--base:active,
.btn-primary:active,
.btn.btn-primary:active {
    background-color: var(--ap-color-primary-hover) !important;
    border-color: var(--ap-color-primary-hover) !important;
}

.btn-outline--base,
.btn-outline-primary,
.btn-outline--primary {
    color: var(--ap-color-primary) !important;
    border-color: var(--ap-color-primary) !important;
    background-color: transparent !important;
}

.btn-outline--base:hover,
.btn-outline-primary:hover,
.btn-outline--primary:hover,
.btn-outline--base:active,
.btn-outline-primary:active,
.btn-outline--primary:active,
.btn-outline--base:focus,
.btn-outline-primary:focus,
.btn-outline--primary:focus {
    color: #ffffff !important;
    background-color: var(--ap-color-primary) !important;
    border-color: var(--ap-color-primary) !important;
}

.text--primary,
.text-primary,
.text--base {
    color: var(--ap-color-primary) !important;
}

.text--secondary,
.text-secondary {
    color: var(--ap-text-body) !important;
}

.text--success,
.text-success {
    color: var(--ap-color-success-text) !important;
}

.text--danger,
.text-danger {
    color: var(--ap-color-danger-text) !important;
}

.text--warning,
.text-warning {
    color: var(--ap-color-warning-text) !important;
}

.text--info,
.text-info {
    color: var(--ap-color-info-text) !important;
}

.text--muted,
.text-muted {
    color: var(--ap-text-muted) !important;
}

.bg--success,
.bg-success,
.btn-success,
.badge.bg-success {
    background-color: var(--ap-color-success) !important;
    border-color: var(--ap-color-success) !important;
    color: #ffffff !important;
}

.bg--danger,
.bg-danger,
.btn-danger,
.badge.bg-danger {
    background-color: var(--ap-color-danger) !important;
    border-color: var(--ap-color-danger) !important;
    color: #ffffff !important;
}

.bg--warning,
.bg-warning,
.btn-warning,
.badge.bg-warning {
    background-color: var(--ap-color-warning) !important;
    border-color: var(--ap-color-warning) !important;
    color: #ffffff !important;
}

.bg--info,
.bg-info,
.btn-info,
.badge.bg-info {
    background-color: var(--ap-color-info) !important;
    border-color: var(--ap-color-info) !important;
    color: #ffffff !important;
}

.bg--light,
.bg-light,
.badge.bg-light {
    background-color: var(--ap-surface-50) !important;
    border-color: var(--ap-border) !important;
    color: var(--ap-text-strong) !important;
}

.alert-success {
    background-color: var(--ap-color-success-bg) !important;
    border-color: var(--ap-color-success) !important;
    color: var(--ap-color-success-text) !important;
}

.alert-danger {
    background-color: var(--ap-color-danger-bg) !important;
    border-color: var(--ap-color-danger) !important;
    color: var(--ap-color-danger-text) !important;
}

.alert-warning {
    background-color: var(--ap-color-warning-bg) !important;
    border-color: var(--ap-color-warning) !important;
    color: var(--ap-color-warning-text) !important;
}

.alert-info {
    background-color: var(--ap-color-info-bg) !important;
    border-color: var(--ap-color-info) !important;
    color: var(--ap-color-info-text) !important;
}

.form-control:focus,
.form-select:focus,
.form--control:focus,
select:focus,
textarea:focus,
input:focus,
.pincode-input-container input:focus,
.pincode-input-container input:active,
div.dataTables_wrapper div.dataTables_filter input:focus,
.verification-code input:focus {
    border-color: var(--ap-focus) !important;
    box-shadow: 0 0 0 4px var(--ap-focus-shadow) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
    background-color: var(--ap-color-primary) !important;
    border-color: var(--ap-color-primary) !important;
    color: #ffffff !important;
}

.page-link:focus {
    border-color: var(--ap-focus) !important;
}

.custom--accordion .accordion-button:not(.collapsed) {
    background-color: var(--ap-color-primary) !important;
    color: #ffffff !important;
}

.custom--accordion .accordion-button:focus,
.accordion-button:focus {
    border-color: var(--ap-focus) !important;
}

.sidebar,
.merchant-dashboard-ultra .merchant-sidenav,
.agent-dashboard-ultra .agent-sidenav,
.sidebar-wrapper {
    background-color: var(--ap-sidebar-bg) !important;
    border-right: 1px solid var(--ap-surface-200) !important;
}

.sidebar-menu .nav-link {
    color: var(--ap-sidebar-text) !important;
}

.sidebar-menu .nav-link i {
    color: var(--ap-sidebar-icon) !important;
}

.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:hover {
    background-color: var(--ap-color-primary) !important;
    color: #ffffff !important;
}

.sidebar-menu .nav-link.active i,
.sidebar-menu .nav-link:hover i {
    color: #ffffff !important;
}

.admin-console__hero .btn-light,
.admin-console__hero .btn-outline-light {
    color: var(--ap-text-strong) !important;
    background-color: #ffffff !important;
    border-color: var(--ap-border) !important;
}

.admin-console__hero .btn-outline-light:hover,
.admin-console__hero .btn-light:hover {
    color: #ffffff !important;
    background-color: var(--ap-color-primary) !important;
    border-color: var(--ap-color-primary) !important;
}

.dashboard-w1,
.card-blue {
    background-color: var(--ap-color-primary) !important;
}

.help-inline-link,
.content-panel a:not(.btn):not(.help-action-card) {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

@media (prefers-contrast: more) {
    :where(
        a,
        button,
        input,
        select,
        textarea,
        .btn,
        .page-link,
        .form-control,
        .form-select,
        .form--control,
        .accordion-button
    ):focus,
    :where(
        a,
        button,
        input,
        select,
        textarea,
        .btn,
        .page-link,
        .form-control,
        .form-select,
        .form--control,
        .accordion-button
    ):focus-visible {
        outline-width: 4px !important;
        box-shadow: 0 0 0 5px rgba(0, 87, 184, 0.32) !important;
    }
}

@media (forced-colors: active) {
    :where(
        a,
        button,
        input,
        select,
        textarea,
        .btn,
        .page-link,
        .dropdown-item,
        .form-control,
        .form-select,
        .form--control,
        .accordion-button,
        .btn-close,
        .navbar-toggler
    ):focus,
    :where(
        a,
        button,
        input,
        select,
        textarea,
        .btn,
        .page-link,
        .dropdown-item,
        .form-control,
        .form-select,
        .form--control,
        .accordion-button,
        .btn-close,
        .navbar-toggler
    ):focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }
}