:root {
    --bg-dark: #060818;
    --bg-card: #0e1726;
    --bg-input: #1b2e4b;
    --text-primary: #e0e6ed;
    --text-muted: #abb1be;
    --text-secondary: #9ea4b0;
    --accent: #5c7cfa;
    --accent-glow: rgba(92, 124, 250, 0.3);
    --border-color: #1b2e4b;
    --success: #00ab66;
    --danger: #e7515a;
    --warning: #ffbb33;
}

body, h1, h2, h3, h4, h5, h6, p, span, a, div, li, input, textarea, button, input::placeholder {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.2px;
}

/* Exempt icons explicitly */
.fas, .far, .fab, .fa, .ti, .themify-icons, .line-icons, .flaticon-, [class^="fa-"], [class*=" fa-"] {
    font-family: inherit !important; 
}

/* Restore Font Awesome strictly if needed */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 5 Free" !important;
}

/* If fonts are still broken, specifically restore Font Awesome */
.fas, .far, .fab, .fa {
    font-family: "Font Awesome 5 Free" !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

label, .form-label {
    font-weight: 600 !important;
    font-size: 13px !important;
}

body {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

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

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

#content {
    background-color: var(--bg-dark) !important;
}

.main-container {
    background-color: var(--bg-dark) !important;
}

/* Sidebar & Header */
.sidebar-wrapper, .header-container, .sub-header-container, .navbar, .sub-header-container .navbar {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.sub-header-container .sidebarCollapse svg {
    color: var(--text-primary) !important;
}

.navbar-logo {
    width: auto !important;
    height: auto !important;
    max-height: 40px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1);
}

#sidebar {
    background-color: var(--bg-card) !important;
}

#sidebar .shadow-bottom {
    background: linear-gradient(180deg, var(--bg-card) 0%, transparent 100%) !important;
    display: none !important; /* Remove the white gradient at the top of sidebar */
}

#sidebar ul.menu-categories li.menu > a div span {
    color: var(--text-primary) !important;
}

#sidebar ul.menu-categories li.menu > a svg {
    color: var(--text-muted) !important;
}

#sidebar ul.menu-categories li.menu > a:hover svg, #sidebar ul.menu-categories li.menu > a[aria-expanded="true"] svg {
    color: var(--accent) !important;
}

#sidebar ul.menu-categories li.menu > a {
    color: var(--text-primary) !important;
}

/* Widgets & Cards */
.widget, .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease-in-out !important;
    overflow: hidden !important;
}

.widget:hover, .card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 15px 35px -12px rgba(92, 124, 250, 0.2) !important;
}

.widget-card-four, .widget-one {
    background: rgba(14, 23, 38, 0.8) !important;
    backdrop-filter: blur(10px) !important;
}

.widget-card-four .w-header .w-info h6, .widget.widget-one .widget-heading h6 {
    color: var(--text-primary) !important;
}

.widget-card-four .w-content .w-info p.value {
    color: var(--text-primary) !important;
}

.widget-account-invoice-two {
    background: linear-gradient(135deg, #1b2e4b 0%, #0e1726 100%) !important;
}

/* Forms */
.form-control {
    background-color: var(--bg-dark) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

.layout-px-spacing {
    background-color: var(--bg-dark) !important;
}

.main-content {
    background-color: var(--bg-dark) !important;
}

/* Breadcrumbs & Header Text */
.breadcrumb-item a, .breadcrumb-item.active, .page-header h3, .page-title h3 {
    color: var(--text-primary) !important;
}

.sub-header-container .breadcrumb-one .breadcrumb-item a {
    color: var(--text-primary) !important;
}

/* Fix for the white background in the content area seen in screenshot */
.layout-top-spacing, .row.layout-top-spacing {
    background-color: var(--bg-dark) !important;
}

.widget-content-area {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.widget-header {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 15px 25px !important;
}

.widget-header h6 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Tabs Styling */
.nav-tabs.border-tab {
    border-bottom: 1px solid var(--border-color) !important;
}

.nav-tabs.border-tab .nav-item .nav-link {
    color: var(--text-muted) !important;
    border: none !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
}

.nav-tabs.border-tab .nav-item .nav-link.active {
    color: var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
    background: transparent !important;
}

.nav-tabs.border-tab .nav-item .nav-link svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Professional File Upload */
.file-upload-wrapper {
    width: 100%;
    margin-top: 10px;
}

.custom-file-upload {
    width: 100% !important;
    border: 2px dashed var(--border-color) !important;
    border-radius: 12px !important;
    padding: 40px 20px !important;
    text-align: center !important;
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

.custom-file-upload:hover {
    border-color: var(--accent) !important;
    background-color: rgba(92, 124, 250, 0.05) !important;
}

.custom-file-upload i, .custom-file-upload svg {
    font-size: 40px !important;
    color: var(--accent) !important;
}

.custom-file-upload span {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Table Styling Override */
.table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    color: var(--text-primary) !important;
}

.table thead th {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

.table tbody tr {
    background-color: var(--bg-dark) !important;
    transition: transform 0.2s !important;
}

.table tbody tr:hover {
    transform: scale(1.01) !important;
}

.table td {
    padding: 15px !important;
    border: none !important;
    vertical-align: middle !important;
}

.table td:first-child { border-radius: 10px 0 0 10px !important; }
.table td:last-child { border-radius: 0 10px 10px 0 !important; }

.img-thumbnail {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    padding: 2px !important;
}

.btn-primary-custom {
    background-color: var(--accent) !important;
    color: white !important;
    border: none !important;
    padding: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all 0.3s !important;
}

.btn-primary-custom:hover {
    box-shadow: 0 5px 15px var(--accent-glow) !important;
    transform: translateY(-2px) !important;
}

/* Alerts */
.alert.custom-alert-1 {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Loader */
div#load_screen {
    background: var(--bg-dark) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Profile & Account Settings Overhaul */
.user-profile, .user-profile .widget-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.contacts-block__item {
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 10px 0 !important;
    display: flex;
    align-items: center;
}

.contacts-block__item svg {
    color: var(--accent) !important;
    margin-right: 12px;
}

/* Nav Pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--accent) !important;
    color: #fff !important;
}

.nav-link {
    color: var(--text-muted) !important;
}

/* Vertical Pills Customization */
.rounded-vertical-pills-icon .nav-pills .nav-link {
    background: var(--bg-dark) !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
}

.rounded-vertical-pills-icon .nav-pills .nav-link.active {
    background: var(--accent) !important;
}

/* Mailbox Dark Design */
.mail-box-container {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.tab-title {
    background: var(--bg-dark) !important;
    border-right: 1px solid var(--border-color) !important;
}

.mailbox-inbox .mail-item {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.mailbox-inbox .mail-item:hover {
    background: var(--bg-input) !important;
}

/* Form Settings & Switches */
.slider.round {
    background-color: #3b3f5c !important;
}

input:checked + .slider {
    background-color: var(--accent) !important;
}

/* Fix for specific white background sections in Profile */
.bg-white, .statbox.widget.box.box-shadow {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.shadow-sm {
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

hr {
    border-top: 1px solid var(--border-color) !important;
}

/* Referrals Page Mobile & UI */
.transactions-list.t-info {
    background: var(--bg-input) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    padding: 20px !important;
    transition: transform 0.2s;
}

.transactions-list.t-info:hover {
    transform: scale(1.02);
}

.t-name h4 {
    color: var(--text-primary) !important;
    margin-bottom: 2px !important;
}

/* Modals */
.modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
}

/* Mailbox Search & Actions */
.mailbox-inbox .search .input-search {
    background-color: var(--bg-dark) !important;
    border: none !important;
    padding-left: 50px !important;
    color: var(--text-primary) !important;
}

.mailbox-inbox .search svg {
    color: var(--text-muted) !important;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.mailbox-inbox .action-center {
    background: var(--bg-dark) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Mail Item refinements */
.mail-item-inner {
    padding: 20px !important;
}

.mail-item .user-email {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 5px !important;
}

.mail-item .mail-content-excerpt {
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

.mail-item .meta-time {
    color: var(--text-muted) !important;
    font-size: 11px !important;
}

/* Modal Internal Cards */
.component-card_4 {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

.component-card_4 .card-user_name {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

/* Compose Mail Styles */
#composeMailModal .modal-content {
    background-color: var(--bg-dark) !important;
}

#composeMailModal .compose-box {
    background: transparent !important;
}

#composeMailModal label {
    color: var(--text-muted) !important;
    font-weight: 600;
}

#composeMailModal .form-control {
    border-radius: 8px !important;
    padding: 12px 15px !important;
}

/* Withdrawal Page Custom Styles */
.balance-display h2 {
    letter-spacing: -1px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.shadow-accent {
    box-shadow: 0 10px 30px rgba(92, 124, 250, 0.3) !important;
}

.bg-danger-light {
    background: rgba(231, 81, 90, 0.1) !important;
}

.border-left-danger {
    border-left: 5px solid #e7515a !important;
}

.xs-small {
    font-size: 11px !important;
}

.letter-spacing-1 {
    letter-spacing: 1px !important;
}
/* Dashboard Premium Components */
.hero-card {
    background: linear-gradient(135deg, var(--accent) 0%, #4c63d2 100%) !important;
    border: none !important;
    color: white !important;
    padding: 30px !important;
    position: relative;
    z-index: 1;
}

.hero-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    z-index: -1;
}

.hero-card .value {
    font-size: 32px;
    font-weight: 800;
    margin-top: 10px;
}

.hero-card .btn-white-outline {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: white !important;
    border-radius: 30px;
    padding: 8px 20px;
    font-weight: 600;
}

.hero-card .btn-white-outline:hover {
    background: white;
    color: var(--accent) !important;
}

.stat-card {
    background: var(--bg-card) !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.icon-box-primary { background: rgba(92, 124, 250, 0.1); color: var(--accent); }
.icon-box-success { background: rgba(0, 171, 102, 0.1); color: var(--success); }
.icon-box-warning { background: rgba(255, 187, 51, 0.1); color: var(--warning); }
.icon-box-danger { background: rgba(231, 81, 90, 0.1); color: var(--danger); }

.stat-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 5px 0;
}

.action-pill {
    padding: 10px 15px;
    border-radius: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.action-pill:hover {
    border-color: var(--accent);
    background: var(--bg-input);
}

.action-pill svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.text-secondary-light {
    color: #9ea4b0 !important;
}

/* Authentication Pages Dark Overrides */
.form-container.outer, .form-form, .form-form-wrap, .form-container, .form-content {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

.form-form .form-form-wrap .form-container .form-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    border-radius: 20px !important;
    padding: 40px !important;
}

.form-content h4, .form-content h1, .form-content p {
    color: var(--text-primary) !important;
}

.field-wrapper label {
    color: var(--text-muted) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

.field-wrapper input {
    background-color: var(--bg-dark) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 12px 15px 12px 45px !important;
    border-radius: 10px !important;
}

.field-wrapper input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

.field-wrapper svg:not(.feather-eye) {
    color: var(--accent) !important;
    top: 42px !important;
}

#toggle-password {
    color: var(--text-muted) !important;
}

.signup-link.register, .signup-link.register a {
    color: var(--text-muted) !important;
    font-weight: 600;
}

.signup-link.register a {
    color: var(--accent) !important;
}

.form-form .form-form-wrap .form-container .form-content #register-btn,
.form-form .form-form-wrap .form-container .form-content button[type="submit"] {
    background-color: var(--accent) !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 12px 30px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px var(--accent-glow) !important;
}

/* Fix for the white page bg on mobile/wide screens */
html, body.form {
    background-color: var(--bg-dark) !important;
}

.form-form .form-form-wrap {
    background-color: var(--bg-dark) !important;
}

/* Generic Card & Container Darkening for layouts.app */
.card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Frontend Global Section Overrides */
section, section.min, .gray, .gray-bg, .gray-simple {
    background-color: var(--bg-dark) !important;
}

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

.bg-light {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

/* Card refinements in app.blade.php contexts */
.card-header {
    background-color: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.card-body {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.container, .row {
    background-color: transparent !important;
}

/* Frontend Property Pages Dark Overrides */
section.gray-simple {
    background-color: var(--bg-dark) !important;
}

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

.bg-light {
    background-color: var(--bg-dark) !important;
}

.property-listing.property-2, .listing-detail-wrapper {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.listing-card-info-price, .listing-name a {
    color: var(--text-primary) !important;
}

.property-card-stats span {
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

.listing-footer {
    border-top: 1px solid var(--border-color) !important;
}

.property-description, .property-description p, .property-description span {
    color: var(--text-primary) !important;
}

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

/* Slick Slider Darkening */
.featured_slick_gallery-slide .slick-prev, 
.featured_slick_gallery-slide .slick-next {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.featured_slick_gallery-slide .slick-dots li button:before {
    color: var(--text-muted) !important;
}

.featured_slick_gallery-slide .slick-dots li.slick-active button:before {
    color: var(--accent) !important;
}

/* Pagination Dark Overrides */
.pagination-container .page-link {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.pagination-container .page-item.active .page-link {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.pagination-container .page-item.disabled .page-link {
    background-color: var(--bg-dark) !important;
    border-color: var(--border-color) !important;
    opacity: 0.5;
}

/* Misc Frontend Fixes */
.btn-primary-light {
    background: rgba(92, 124, 250, 0.1) !important;
    color: var(--accent) !important;
}

/* Form inputs on frontend */
input.form-control.simple, textarea.form-control.simple {
    background-color: var(--bg-dark) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Specific fix for contact form white bg */
.property_block_wrap .bg-white, 
.property_block_wrap .bg-card,
.property_block_wrap .block-body {
    background-color: var(--bg-card) !important;
}

.property_block_wrap {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}