/* ===== UNIVERSAL DARK THEME ENFORCEMENT ===== */
/* This CSS forces dark theme across ALL browsers and components */

/* Cross-browser normalization - prevent browser differences */
* {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Prevent browser-specific default styles */
*:before, *:after {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* Root-level dark theme enforcement */
:root {
    color-scheme: dark !important;
    background-color: #000000 !important;
    color: #FFFFFF !important;
    /* Prevent browser zoom issues */
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Universal selector - force dark on EVERYTHING */
* {
    background-color: #111111 !important;
    color-scheme: dark !important;
    color: #FFFFFF !important;
}

/* HTML and Body - absolute dark enforcement */
html {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    color-scheme: dark !important;
    -webkit-color-scheme: dark !important;
    -moz-color-scheme: dark !important;
}

body {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #FFFFFF !important;
    color-scheme: dark !important;
    -webkit-color-scheme: dark !important;
    -moz-color-scheme: dark !important;
}

/* Force dark on all container elements */
div, section, main, article, aside, header, footer, nav,
.container, .container-fluid, .row, .col, [class*="col-"],
.card, .card-body, .card-header, .card-footer,
.modal, .modal-content, .modal-header, .modal-body, .modal-footer {
    background-color: #111111 !important;
    background: #111111 !important;
    color: #FFFFFF !important;
}

/* Force dark on all text elements */
h1, h2, h3, h4, h5, h6, p, span, label, strong, em, small,
.text, .content, [class*="text-"] {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

/* Force dark on all table elements */
table, thead, tbody, tfoot, tr, td, th,
.table, .table *, .table-responsive, .table-responsive * {
    background-color: #1C1C1E !important;
    background: #1C1C1E !important;
    color: #FFFFFF !important;
    border-color: #3A3A3C !important;
}

/* Force dark on all form elements */
input, textarea, select, button, form, fieldset, legend,
.form-control, .form-select, .form-check, .form-floating,
.input-group, .input-group-text {
    background-color: #1C1C1E !important;
    background: #1C1C1E !important;
    color: #FFFFFF !important;
    border-color: #3A3A3C !important;
    /* Cross-browser form consistency */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Force dark on all Bootstrap components */
.navbar, .nav, .dropdown, .dropdown-menu, .dropdown-item,
.alert, .badge, .breadcrumb, .pagination, .page-item, .page-link,
.list-group, .list-group-item, .toast, .tooltip, .popover {
    background-color: #1C1C1E !important;
    background: #1C1C1E !important;
    color: #FFFFFF !important;
    border-color: #3A3A3C !important;
}

/* Specific overrides for white elements that browsers force */
[style*="background: white"], [style*="background-color: white"],
[style*="background: #fff"], [style*="background-color: #fff"],
[style*="background: #ffffff"], [style*="background-color: #ffffff"] {
    background-color: #111111 !important;
    background: #111111 !important;
}

/* Override any inline styles that set white backgrounds */
[style*="background"] {
    background-color: #111111 !important;
}

/* Cross-browser layout consistency */
.d-flex, .flex-row, .flex-column, .justify-content-center, 
.justify-content-between, .align-items-center, .row, [class*="col-"] {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.row {
    -webkit-flex-wrap: wrap !important;
    -moz-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

/* Cross-browser button consistency */
.btn, button {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: pointer !important;
    border-style: solid !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Cross-browser text rendering */
h1, h2, h3, h4, h5, h6, p, span, div, a {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Browser-specific overrides */
/* Chrome/Webkit */
*::-webkit-scrollbar {
    background-color: #1C1C1E !important;
}

/* Cross-browser margin and padding normalization */
.mb-1, .mb-2, .mb-3, .mb-4, .mb-5,
.mt-1, .mt-2, .mt-3, .mt-4, .mt-5,
.mx-1, .mx-2, .mx-3, .mx-4, .mx-5,
.my-1, .my-2, .my-3, .my-4, .my-5,
.m-1, .m-2, .m-3, .m-4, .m-5,
.p-1, .p-2, .p-3, .p-4, .p-5,
.px-1, .px-2, .px-3, .px-4, .px-5,
.py-1, .py-2, .py-3, .py-4, .py-5 {
    margin: calc(var(--bs-gutter-x, 1rem) * 0.5) !important;
    padding: calc(var(--bs-gutter-x, 1rem) * 0.5) !important;
}

/* Force consistent Bootstrap spacing calculations */
.container, .container-fluid {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
}

.row {
    margin-left: calc(var(--bs-gutter-x, -1.5rem) * 0.5) !important;
    margin-right: calc(var(--bs-gutter-x, -1.5rem) * 0.5) !important;
}

[class*="col-"] {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
}

/* Cross-browser consistent font sizes */
h1 { font-size: 2.5rem !important; }
h2 { font-size: 2rem !important; }
h3 { font-size: 1.75rem !important; }
h4 { font-size: 1.5rem !important; }
h5 { font-size: 1.25rem !important; }
h6 { font-size: 1rem !important; }

/* Ensure consistent line heights across browsers */
body, p, div, span {
    line-height: 1.5 !important;
}

*::-webkit-scrollbar-track {
    background-color: #1C1C1E !important;
}

*::-webkit-scrollbar-thumb {
    background-color: #3A3A3C !important;
}

/* Firefox */
* {
    scrollbar-color: #3A3A3C #1C1C1E !important;
}

/* Edge specific */
@supports (-ms-ime-align: auto) {
    * {
        background-color: #111111 !important;
        color: #FFFFFF !important;
    }
}

/* Safari specific */
@supports (-webkit-appearance: none) {
    * {
        background-color: #111111 !important;
        color: #FFFFFF !important;
    }
}

/* Force dark on any remaining white elements */
*[class*="white"], *[class*="light"], *[class*="bg-white"],
*[class*="bg-light"], .bg-white, .bg-light {
    background-color: #111111 !important;
    background: #111111 !important;
}

/* Ensure text remains visible */
* {
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Prevent browser auto-dark mode interference */
meta[name="color-scheme"] {
    content: "dark" !important;
}

/* Force all backgrounds to be dark - nuclear option */
body *, html * {
    background-color: inherit !important;
    color: #FFFFFF !important;
}

/* Apple-style specific dark colors for branded elements */
.btn-primary, .bg-primary {
    background-color: #007AFF !important;
    background: #007AFF !important;
    color: #FFFFFF !important;
}

.btn-success, .bg-success {
    background-color: #34C759 !important;
    background: #34C759 !important;
    color: #FFFFFF !important;
}

.btn-warning, .bg-warning {
    background-color: #FF9500 !important;
    background: #FF9500 !important;
    color: #FFFFFF !important;
}

.btn-danger, .bg-danger {
    background-color: #FF3B30 !important;
    background: #FF3B30 !important;
    color: #FFFFFF !important;
}

/* Links should remain blue but visible */
a {
    color: #007AFF !important;
    background-color: transparent !important;
}

a:hover {
    color: #5856D6 !important;
}

/* Final override for any stubborn elements */
*:not(.btn):not(.badge):not(a) {
    background-color: inherit !important;
}

/* Verification Modal - Complete Opacity Fix */
.verification-modal .modal-content,
.verification-modal .modal-header, 
.verification-modal .modal-body,
.verification-modal .modal-footer,
.verification-modal .verification-content,
.verification-modal .verification-code-display,
.verification-modal .code-text {
    background-color: #1C1C1E !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.verification-modal .modal-backdrop {
    opacity: 0.8 !important;
    background-color: #000000 !important;
}

/* Universal Modal Backdrop Blur */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

/* Modal Content Dark Theme */
.modal-content {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
}

.modal-header {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid #333 !important;
    color: #ffffff !important;
}

.modal-body {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.modal-footer {
    background-color: #2a2a2a !important;
    border-top: 1px solid #333 !important;
}