/*
 * BigBears local UI compatibility layer
 *
 * This file is intentionally loaded after legacy framework and plugin styles.
 * It gives old Bootstrap Table, Layer and Layui markup the same visual language
 * as the local admin shell and BlueWind theme without changing JS hooks.
 */

/*
 * BigBears shared design tokens — phase 1.
 *
 * The existing --bw-*, --admin-* and --local-ui-* contracts stay intact.
 * New and migrated components consume this semantic layer so the storefront,
 * account area and admin shell can converge without a destructive CSS rewrite.
 */
:root {
    --bb-font-sans: Inter, "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

    --bb-bg: #f5f8fd;
    --bb-surface: #ffffff;
    --bb-surface-elevated: #ffffff;
    --bb-primary: #1769ff;
    --bb-primary-hover: #0753dc;
    --bb-primary-soft: #edf4ff;
    --bb-text: #0b1735;
    --bb-text-secondary: #475467;
    --bb-text-muted: #667085;
    --bb-border: #e3eaf5;
    --bb-border-strong: #cbd7e8;
    --bb-success: #0eaa68;
    --bb-warning: #d97706;
    --bb-danger: #ef4444;
    --bb-focus: rgba(23, 105, 255, .18);

    --bb-space-1: 4px;
    --bb-space-2: 8px;
    --bb-space-3: 12px;
    --bb-space-4: 16px;
    --bb-space-6: 24px;
    --bb-space-8: 32px;
    --bb-space-12: 48px;
    --bb-space-16: 64px;
    --bb-space-24: 96px;

    --bb-radius-sm: 6px;
    --bb-radius-md: 10px;
    --bb-radius-lg: 16px;

    --bb-type-display-size: 48px;
    --bb-type-display-line: 56px;
    --bb-type-h1-size: 36px;
    --bb-type-h1-line: 44px;
    --bb-type-h2-size: 28px;
    --bb-type-h2-line: 36px;
    --bb-type-h3-size: 20px;
    --bb-type-h3-line: 28px;
    --bb-type-body-size: 15px;
    --bb-type-body-line: 24px;
    --bb-type-small-size: 13px;
    --bb-type-small-line: 20px;
    --bb-type-caption-size: 12px;
    --bb-type-caption-line: 16px;

    --bb-shadow-elevated: 0 12px 32px rgba(16, 24, 40, .10);
    --bb-shadow-sticky: 0 -8px 24px rgba(16, 24, 40, .10);
    --bb-motion-fast: 120ms;
    --bb-motion-base: 180ms;
    --bb-motion-slow: 240ms;
}

body#kt_body,
body.ay-bg {
    --bb-bg: var(--admin-bg, #f4f7fb);
    --bb-surface: var(--admin-surface, #ffffff);
    --bb-surface-elevated: #ffffff;
    --bb-primary: var(--admin-primary, #2563eb);
    --bb-primary-hover: var(--admin-primary-hover, #1d4ed8);
    --bb-primary-soft: var(--admin-primary-soft, #eff6ff);
    --bb-text: var(--admin-text, #172033);
    --bb-text-secondary: #475569;
    --bb-text-muted: var(--admin-muted, #64748b);
    --bb-border: var(--admin-border, #dfe5ef);
    --bb-border-strong: var(--admin-border-strong, #cbd5e1);
    --bb-success: var(--admin-success, #15803d);
    --bb-warning: var(--admin-warning, #b45309);
    --bb-danger: var(--admin-danger, #dc2626);
    --bb-focus: rgba(37, 99, 235, .18);

    --local-ui-primary: var(--admin-primary, #2563eb);
    --local-ui-primary-hover: var(--admin-primary-hover, #1d4ed8);
    --local-ui-primary-soft: var(--admin-primary-soft, #eff6ff);
    --local-ui-text: var(--admin-text, #172033);
    --local-ui-muted: var(--admin-muted, #64748b);
    --local-ui-border: var(--admin-border, #dfe5ef);
    --local-ui-border-strong: var(--admin-border-strong, #cbd5e1);
    --local-ui-canvas: var(--admin-bg, #f4f7fb);
    --local-ui-surface: var(--admin-surface, #ffffff);
    --local-ui-success: var(--admin-success, #15803d);
    --local-ui-warning: var(--admin-warning, #b45309);
    --local-ui-danger: var(--admin-danger, #dc2626);
    --local-ui-radius: var(--admin-radius, 8px);
}

body.bluewind-theme {
    --bb-bg: var(--bw-bg, #f5f8fd);
    --bb-surface: var(--bw-card, #ffffff);
    --bb-surface-elevated: #ffffff;
    --bb-primary: var(--bw-primary, #1769ff);
    --bb-primary-hover: var(--bw-primary-dark, #0753dc);
    --bb-primary-soft: var(--bw-primary-soft, #edf4ff);
    --bb-text: var(--bw-text, #0b1735);
    --bb-text-secondary: #475467;
    --bb-text-muted: var(--bw-muted, #667085);
    --bb-border: var(--bw-line, #e3eaf5);
    --bb-border-strong: #cbd7e8;
    --bb-success: var(--bw-success, #0eaa68);
    --bb-warning: var(--bw-warning, #d97706);
    --bb-danger: var(--bw-danger, #ef4444);
    --bb-focus: rgba(var(--bw-primary-rgb, 23, 105, 255), .18);

    --local-ui-primary: var(--bw-primary, #1769ff);
    --local-ui-primary-hover: var(--bw-primary-dark, #0753dc);
    --local-ui-primary-soft: var(--bw-primary-soft, #edf4ff);
    --local-ui-text: var(--bw-text, #0b1735);
    --local-ui-muted: var(--bw-muted, #61708f);
    --local-ui-border: var(--bw-line, #e3eaf5);
    --local-ui-border-strong: #cbd7e8;
    --local-ui-canvas: var(--bw-bg, #f5f8fd);
    --local-ui-surface: var(--bw-card, #ffffff);
    --local-ui-success: var(--bw-success, #0eaa68);
    --local-ui-warning: var(--bw-warning, #f59e0b);
    --local-ui-danger: var(--bw-danger, #ef4444);
    --local-ui-radius: 8px;
}

body.bluewind-account-body,
body.bluewind-auth-body {
    --bb-bg: var(--bluewind-account-canvas, #f4f7fc);
    --bb-surface: var(--bluewind-account-surface, #ffffff);
    --bb-primary: var(--bluewind-account-primary, #176bff);
    --bb-primary-hover: var(--bluewind-account-primary-dark, #0b4fc7);
    --bb-primary-soft: var(--bluewind-account-primary-soft, #eaf2ff);
    --bb-text: var(--bluewind-account-ink, #17233c);
    --bb-text-muted: var(--bluewind-account-muted, #71809d);
    --bb-border: var(--bluewind-account-line, #e5ecf7);

    --local-ui-primary: var(--bluewind-account-primary, #176bff);
    --local-ui-primary-hover: var(--bluewind-account-primary-dark, #0b4fc7);
    --local-ui-primary-soft: var(--bluewind-account-primary-soft, #eaf2ff);
    --local-ui-text: var(--bluewind-account-ink, #17233c);
    --local-ui-muted: var(--bluewind-account-muted, #71809d);
    --local-ui-border: var(--bluewind-account-line, #e5ecf7);
    --local-ui-border-strong: #c9d6e9;
    --local-ui-canvas: var(--bluewind-account-canvas, #f4f7fc);
    --local-ui-surface: var(--bluewind-account-surface, #ffffff);
    --local-ui-success: var(--bluewind-account-success, #0c9b73);
    --local-ui-warning: #b45309;
    --local-ui-danger: #dc2626;
    --local-ui-radius: 8px;
}

/* Bootstrap Table: replace the upstream pink three-dot loader everywhere. */
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
    inset: 0 !important;
    width: auto !important;
    min-height: 72px;
    border: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--local-ui-muted, #64748b) !important;
    backdrop-filter: blur(1.5px);
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--local-ui-border, #dfe5ef);
    border-radius: var(--local-ui-radius, 8px);
    background: var(--local-ui-surface, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap::before {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid color-mix(in srgb, var(--local-ui-primary, #2563eb) 18%, transparent);
    border-top-color: var(--local-ui-primary, #2563eb);
    border-radius: 50%;
    animation: local-ui-spin .72s linear infinite;
    content: "";
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .loading-text,
body#kt_body .bootstrap-table .fixed-table-loading .loading-text,
body.user-center-body.bluewind-account-body .bootstrap-table .fixed-table-loading .loading-text {
    color: var(--local-ui-muted, #64748b) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap {
    display: none !important;
}

.bootstrap-table .fixed-table-container .table tbody tr.no-records-found td {
    padding: 38px 20px !important;
    color: var(--local-ui-muted, #64748b) !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.5;
}

.bootstrap-table .fixed-table-container .table tbody tr.no-records-found td::before {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    border: 1px dashed color-mix(in srgb, var(--local-ui-primary, #2563eb) 38%, var(--local-ui-border, #dfe5ef));
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, var(--local-ui-primary, #2563eb) 0 2px, transparent 3px),
        var(--local-ui-primary-soft, #eff6ff);
    box-shadow: inset 0 0 0 7px var(--local-ui-surface, #fff);
    content: "";
}

.bootstrap-table .fixed-table-container .table thead th {
    border-bottom-color: var(--local-ui-border, #dfe5ef) !important;
}

.bootstrap-table .fixed-table-container .table tbody td {
    border-bottom-color: color-mix(in srgb, var(--local-ui-border, #dfe5ef) 78%, transparent) !important;
}

.bootstrap-table.bootstrap5 .fixed-table-body input[type="checkbox"],
.bootstrap-table input[type="checkbox"] {
    position: relative;
    top: 0;
    width: 16px;
    height: 16px;
    border: 1px solid var(--local-ui-border-strong, #cbd5e1) !important;
    border-radius: 4px !important;
    background: var(--local-ui-surface, #fff) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.bootstrap-table.bootstrap5 .fixed-table-body input[type="checkbox"]:checked,
.bootstrap-table input[type="checkbox"]:checked {
    border-color: var(--local-ui-primary, #2563eb) !important;
    background: var(--local-ui-primary, #2563eb) !important;
    box-shadow: none !important;
}

.bootstrap-table.bootstrap5 .fixed-table-body input[type="checkbox"]:checked::after,
.bootstrap-table input[type="checkbox"]:checked::after {
    top: 0 !important;
    left: 3px;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800;
    line-height: 14px !important;
}

.bootstrap-table .fixed-table-pagination .pagination .page-link,
.bootstrap-table .fixed-table-pagination .pagination-detail .btn {
    border-color: var(--local-ui-border, #dfe5ef) !important;
    border-radius: 6px !important;
    background: var(--local-ui-surface, #fff) !important;
    color: var(--local-ui-muted, #64748b) !important;
    box-shadow: none !important;
}

.bootstrap-table .fixed-table-pagination .pagination .active .page-link {
    border-color: var(--local-ui-primary, #2563eb) !important;
    background: var(--local-ui-primary, #2563eb) !important;
    color: #fff !important;
}

/* Layer loading: remove the legacy image sprites while preserving layer.load API. */
.layui-layer.layui-layer-loading {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.layui-layer.layui-layer-loading .layui-layer-content,
.layui-layer.layui-layer-loading .layui-layer-loading0,
.layui-layer.layui-layer-loading .layui-layer-loading1,
.layui-layer.layui-layer-loading .layui-layer-loading2 {
    position: relative;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--local-ui-border, #dfe5ef) !important;
    border-radius: 12px !important;
    background: var(--local-ui-surface, #fff) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14) !important;
}

.layui-layer.layui-layer-loading .layui-layer-content::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid color-mix(in srgb, var(--local-ui-primary, #2563eb) 18%, transparent);
    border-top-color: var(--local-ui-primary, #2563eb);
    border-radius: 50%;
    animation: local-ui-spin .72s linear infinite;
    content: "";
}

/* Shared AJAX mask used by the account center. */
.net-loading {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    background: rgba(244, 247, 252, .72) !important;
    backdrop-filter: blur(2px);
}

.net-loading .loading-view {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--local-ui-border, #dfe5ef) !important;
    border-radius: 12px !important;
    background: var(--local-ui-surface, #fff) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14) !important;
    transform: translate(-50%, -50%) !important;
}

.net-loading .loading-image {
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    border: 2px solid color-mix(in srgb, var(--local-ui-primary, #176bff) 18%, transparent) !important;
    border-top-color: var(--local-ui-primary, #176bff) !important;
    border-radius: 50% !important;
    background: none !important;
    animation: local-ui-spin .72s linear infinite !important;
}

/* Keep the public Loading component API but make its visuals local and neutral. */
body#kt_body,
body.ay-bg,
body.bluewind-theme,
body.bluewind-account-body,
body.bluewind-auth-body {
    --chahuo-ring-color: var(--local-ui-primary, #2563eb);
    --chahuo-ring-overlay: rgba(244, 247, 252, .72);
    --chahuo-ring-size: 36px;
    --chahuo-ring-border: 3px;
}

.chahuo-ring-overlay {
    backdrop-filter: blur(2px) !important;
}

.chahuo-ring {
    border-color: color-mix(in srgb, var(--local-ui-primary, #2563eb) 18%, transparent) !important;
    border-top-color: var(--local-ui-primary, #2563eb) !important;
    animation: local-ui-spin .72s linear infinite !important;
}

.chahuo-ring::before,
.chahuo-ring::after {
    display: none !important;
}

/* Layui compatibility aliases. Names stay for JS compatibility; pink does not. */
.layui-btn.layui-btn-pink,
.layui-btn.bluewind-account-action-primary,
.layui-btn.layui-btn-normal {
    border-color: var(--local-ui-primary, #2563eb) !important;
    border-radius: 6px !important;
    background: var(--local-ui-primary, #2563eb) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.layui-btn.layui-btn-pink:hover,
.layui-btn.bluewind-account-action-primary:hover,
.layui-btn.layui-btn-normal:hover {
    border-color: var(--local-ui-primary-hover, #1d4ed8) !important;
    background: var(--local-ui-primary-hover, #1d4ed8) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.layui-btn.layui-btn-primary {
    border-color: var(--local-ui-border-strong, #cbd5e1) !important;
    border-radius: 6px !important;
    background: var(--local-ui-surface, #fff) !important;
    color: var(--local-ui-text, #172033) !important;
}

.layui-badge,
.layui-badge-rim {
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: none !important;
}

.layui-badge.layui-bg-pro,
.layui-badge.layui-bg-cash,
.layui-badge.bluewind-account-badge-success,
.layui-bg-pro,
.layui-bg-cash {
    background: var(--local-ui-success, #15803d) !important;
    color: #fff !important;
}

.layui-badge.layui-bg-gray,
.layui-bg-gray {
    border: 1px solid var(--local-ui-border, #dfe5ef) !important;
    background: var(--local-ui-canvas, #f4f7fb) !important;
    color: var(--local-ui-muted, #64748b) !important;
}

.layui-tab-title {
    border-bottom-color: var(--local-ui-border, #dfe5ef) !important;
}

.layui-tab-title li {
    color: var(--local-ui-muted, #64748b);
    font-weight: 650;
}

.layui-tab-title .layui-this {
    color: var(--local-ui-primary, #2563eb) !important;
}

.layui-tab-brief > .layui-tab-title .layui-this::after,
.layui-tab-title .layui-this::after {
    border-bottom-color: var(--local-ui-primary, #2563eb) !important;
}

.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus {
    border-color: var(--local-ui-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--local-ui-primary, #2563eb) 12%, transparent) !important;
}

.layui-form-switch {
    border-color: var(--local-ui-border-strong, #cbd5e1) !important;
    background: var(--local-ui-surface, #fff) !important;
}

.layui-form-onswitch {
    border-color: var(--local-ui-primary, #2563eb) !important;
    background: var(--local-ui-primary, #2563eb) !important;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    border-radius: 6px !important;
    background: var(--local-ui-primary, #2563eb) !important;
}

/* Standard legacy panel structure only; prefixed systems such as sc-panel are excluded. */
.panel > .panel-header,
.panel > .panel-head,
.panel > .panel-body {
    border-color: var(--local-ui-border, #dfe5ef) !important;
    background: var(--local-ui-surface, #fff);
}

.panel > .panel-header,
.panel > .panel-head {
    padding: 14px 18px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: var(--local-ui-text, #172033);
}

.panel > .panel-body {
    padding: 18px;
}

.panel:has(> .panel-body) {
    overflow: hidden;
    border: 1px solid var(--local-ui-border, #dfe5ef) !important;
    border-radius: var(--local-ui-radius, 8px) !important;
    background: var(--local-ui-surface, #fff) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
}

@keyframes local-ui-spin {
    to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
    .bootstrap-table .fixed-table-loading .loading-wrap::before,
    .layui-layer.layui-layer-loading .layui-layer-content::before,
    .net-loading .loading-image,
    .chahuo-ring {
        animation: none !important;
    }
}