/*=====================================================
    BPTA GLOBAL THEME SYSTEM
    Bootstrap 5.3 + BPTA variables
======================================================*/

/*
|--------------------------------------------------------------------------
| Base Design Tokens
|--------------------------------------------------------------------------
*/

:root {
    --primary: var(--primary-color, #0d6efd);
    --secondary: var(--secondary-color, #6610f2);
    --accent: var(--accent-color, #ffc107);

    --bpta-body-bg: #ffffff;
    --bpta-body-text: #212529;

    --bpta-surface: #ffffff;
    --bpta-surface-2: #f8fafc;
    --bpta-surface-3: #f1f5f9;

    --bpta-text: #212529;
    --bpta-muted: #64748b;

    --bpta-border: #e2e8f0;

    --bpta-navbar-bg: #ffffff;
    --bpta-footer-bg: #020617;

    --bpta-shadow:
        0 10px 30px rgba(15, 23, 42, .08);
}


/*
|--------------------------------------------------------------------------
| Bootstrap Light Theme Bridge
|--------------------------------------------------------------------------
*/

html[data-bs-theme="light"] {
    color-scheme: light;

    --bs-body-bg: var(--bpta-body-bg);
    --bs-body-color: var(--bpta-body-text);

    --bs-secondary-color: var(--bpta-muted);

    --bs-tertiary-bg: var(--bpta-surface-2);

    --bs-border-color: var(--bpta-border);
}


/*
|--------------------------------------------------------------------------
| Bootstrap Dark Theme Bridge
|--------------------------------------------------------------------------
*/

html[data-bs-theme="dark"] {
    color-scheme: dark;

    --bpta-body-bg: #0b1120;
    --bpta-body-text: #e5e7eb;

    --bpta-surface: #111827;
    --bpta-surface-2: #0f172a;
    --bpta-surface-3: #172033;

    --bpta-text: #e5e7eb;
    --bpta-muted: #aab4c3;

    --bpta-border: #334155;

    --bpta-navbar-bg: #020617;
    --bpta-footer-bg: #020617;

    --bpta-shadow:
        0 10px 30px rgba(0, 0, 0, .24);

    --bs-body-bg: var(--bpta-body-bg);
    --bs-body-color: var(--bpta-body-text);

    --bs-secondary-color: var(--bpta-muted);

    --bs-tertiary-bg: var(--bpta-surface-2);

    --bs-border-color: var(--bpta-border);

    --bs-emphasis-color: #ffffff;
}


/*=====================================================
    GENERAL
======================================================*/

html,
body {
    min-height: 100%;
}

body {
    background: var(--bpta-body-bg) !important;
    color: var(--bpta-body-text) !important;
    transition:
        background-color .22s ease,
        color .22s ease;
}

main {
    color: inherit;
}

a {
    color: var(--primary);
}

a:hover {
    filter: brightness(.92);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    filter: brightness(.95);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

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

.bg-primary {
    background: var(--primary) !important;
}


/*=====================================================
    TEXT
======================================================*/

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body label,
body li,
body td,
body th,
body strong,
body .card-title {
    color: inherit;
}

.text-muted,
.text-secondary,
.form-text,
.mini-text,
.section-copy,
.business-meta,
.business-description,
.category-copy,
.notification-message,
.notification-meta {
    color: var(--bpta-muted) !important;
}


/*=====================================================
    HERO
======================================================*/

.hero {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color: #ffffff;

    padding: 40px 0;
    position: relative;
}


/*=====================================================
    CARDS / SURFACES
======================================================*/

.search-card {
    margin-top: -90px;
    position: relative;
    z-index: 100;
    border-radius: 20px;
}

.card,
.stat,
.ad-box,
.help-card,
.help-quick-link,
.metric-card,
.clean-card,
.module-card,
.stat-strip,
.category-card,
.business-card-modern,
.homepage-ad-card,
.hero-search-card,
.notification-card,
.legal-status-card,
.list-group-item,
.offcanvas,
.toast {
    background: var(--bpta-surface) !important;
    color: var(--bpta-text) !important;

    border-color: var(--bpta-border) !important;

    box-shadow: var(--bpta-shadow);

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.card {
    border-radius: 18px;
}

.card:hover {
    transform: translateY(-2px);
}


/*=====================================================
    BOOTSTRAP BACKGROUND UTILITIES
======================================================*/

.bg-white {
    background-color: var(--bpta-surface) !important;
    color: var(--bpta-text) !important;
}

.bg-light {
    background-color: var(--bpta-surface-2) !important;
    color: var(--bpta-text) !important;
}


/*=====================================================
    BUSINESS
======================================================*/

.business-card img.logo {
    height: 90px;
    object-fit: contain;

    background: var(--bpta-surface-2);

    border-radius: 14px;
}

.profile-hero {
    background: var(--bpta-surface-2) !important;

    color: var(--bpta-text);

    border-radius: 22px;

    padding: 30px;
}

.ad-box {
    border: 1px dashed var(--bpta-border) !important;
    border-radius: 16px;
    padding: 15px;
}

.badge-soft {
    background: color-mix(
        in srgb,
        var(--primary) 12%,
        var(--bpta-surface)
    );

    color: var(--primary);
}

html[data-bs-theme="dark"] .badge-soft {
    background: #1d4ed8;
    color: #ffffff;
}

.stat {
    border-radius: 18px;
    padding: 20px;
}


/*=====================================================
    TABLES
======================================================*/

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bpta-text);

    --bs-table-border-color:
        var(--bpta-border);

    --bs-table-striped-bg:
        color-mix(
            in srgb,
            var(--bpta-text) 3%,
            transparent
        );

    --bs-table-striped-color:
        var(--bpta-text);

    --bs-table-hover-bg:
        color-mix(
            in srgb,
            var(--bpta-text) 5%,
            transparent
        );

    --bs-table-hover-color:
        var(--bpta-text);

    color: var(--bpta-text) !important;
}

.table td,
.table th {
    vertical-align: middle;
    color: var(--bpta-text) !important;
    border-color: var(--bpta-border) !important;
}


/*=====================================================
    FORMS
======================================================*/

.required::after {
    content: " *";
    color: #dc3545;
}

.form-control,
.form-select,
.input-group-text,
textarea {
    background-color:
        var(--bpta-surface) !important;

    color:
        var(--bpta-text) !important;

    border-color:
        var(--bpta-border) !important;

    transition: .2s;
}

.form-control::placeholder,
textarea::placeholder {
    color:
        color-mix(
            in srgb,
            var(--bpta-muted) 85%,
            transparent
        ) !important;

    opacity: 1;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    background-color:
        var(--bpta-surface) !important;

    color:
        var(--bpta-text) !important;

    border-color:
        var(--primary) !important;

    box-shadow:
        0 0 0 .2rem
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        ) !important;
}


/*=====================================================
    ACCORDIONS
======================================================*/

.accordion-item {
    background:
        var(--bpta-surface) !important;

    border-color:
        var(--bpta-border) !important;
}

.accordion-button {
    background:
        var(--bpta-surface) !important;

    color:
        var(--bpta-text) !important;
}

.accordion-button:not(.collapsed) {
    background:
        var(--bpta-surface-3) !important;

    color:
        var(--bpta-text) !important;
}

html[data-bs-theme="dark"]
.accordion-button::after {
    filter:
        invert(1)
        grayscale(1);
}


/*=====================================================
    DROPDOWNS
======================================================*/

.dropdown-menu {
    background:
        var(--bpta-surface) !important;

    color:
        var(--bpta-text) !important;

    border-color:
        var(--bpta-border) !important;
}

.dropdown-item {
    color:
        var(--bpta-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background:
        var(--bpta-surface-3) !important;

    color:
        var(--bpta-text) !important;
}


/*=====================================================
    MODALS
======================================================*/

.modal-content {
    background:
        var(--bpta-surface) !important;

    color:
        var(--bpta-text) !important;

    border-color:
        var(--bpta-border) !important;
}

html[data-bs-theme="dark"] .btn-close {
    filter:
        invert(1)
        grayscale(1)
        brightness(2);
}


/*=====================================================
    ALERTS
======================================================*/

/*
 * Do NOT force all alerts to the same dark colour.
 * Bootstrap semantic alert variables remain intact.
 * Only improve readability in dark mode.
 */

html[data-bs-theme="dark"] .alert {
    --bs-alert-color:
        var(--bpta-text);

    --bs-alert-border-color:
        var(--bpta-border);
}


/*=====================================================
    PAGINATION
======================================================*/

.page-link {
    background:
        var(--bpta-surface);

    color:
        var(--bpta-text);

    border-color:
        var(--bpta-border);
}

.page-link:hover {
    background:
        var(--bpta-surface-3);

    color:
        var(--bpta-text);
}

.page-item.active .page-link {
    background:
        var(--primary);

    border-color:
        var(--primary);

    color:
        #ffffff;
}


/*=====================================================
    NAVBAR
======================================================*/

.navbar {
    background:
        var(--bpta-navbar-bg) !important;
}

.navbar-brand img {
    height: 48px;
}


/*=====================================================
    FOOTER
======================================================*/

footer {
    background:
        var(--bpta-footer-bg) !important;

    color:
        #ffffff;

    transition:
        background-color .22s ease;
}

footer a {
    color:
        #cbd5e1 !important;
}

footer a:hover {
    color:
        #ffffff !important;
}


/*=====================================================
    BUTTONS
======================================================*/

html[data-bs-theme="dark"]
.btn-light {
    background:
        #f8fafc;

    color:
        #111827 !important;

    border-color:
        #f8fafc;
}

html[data-bs-theme="dark"]
.btn-outline-secondary {
    color:
        #e5e7eb;

    border-color:
        #64748b;
}

html[data-bs-theme="dark"]
.btn-outline-secondary:hover {
    background:
        #64748b;

    color:
        #ffffff;
}


/*=====================================================
    BORDERS
======================================================*/

.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
hr {
    border-color:
        var(--bpta-border) !important;
}


/*=====================================================
    MEDIA
======================================================*/

.media-thumb {
    height: 160px;
    width: 100%;
    object-fit: cover;
    border-radius: 14px;
}


/*=====================================================
    HELP / CUSTOM COMPONENTS
======================================================*/

.help-note {
    background:
        var(--bpta-surface-2) !important;

    color:
        var(--bpta-text) !important;

    border-color:
        var(--bpta-border) !important;
}


/*=====================================================
    THEME TOGGLE
======================================================*/

#themeToggleBtn {
    border-radius: 25px;
    transition: .2s;
}

#themeToggleBtn:hover {
    transform: scale(1.04);
}


/*=====================================================
    INTENTIONALLY FIXED COLOURS
======================================================*/

/*
|--------------------------------------------------------------------------
| These elements are deliberately NOT theme-recoloured.
|--------------------------------------------------------------------------
| Hero/banner white text, semantic buttons, badges and footer content keep
| their own explicit foreground colours.
|--------------------------------------------------------------------------
*/

.hero,
.hero *,
.admin-hero,
.admin-hero *,
.owner-cta,
.owner-cta *,
.trust-strip,
.trust-strip *,
footer,
footer * {
    --bpta-text:
        currentColor;
}