/**
 * ============================================================================
 * GLOBAL UNIFIED DESIGN SYSTEM — REFERENCE VIDEO SPECIFICATION
 * ============================================================================
 * Visual Formula:
 * - PALE COOL HEADER (#F2FAFD / #EEF9FC)
 * - DEEP TEAL PAGE SHELL (#12676D / #146B70 / #176C70)
 * - LARGE WHITE ROUNDED SURFACES (#FFFFFF, 20px–26px radius, soft shadow)
 * - SOFT SHADOWS (0 5px 20px rgba(0,0,0,0.07))
 * - LIGHT COLORED INNER AREAS (#E5F7FC / #F0E8FF / #FFF1D0 / #F8FAFC)
 * - CYAN PRIMARY ACCENT (#00AEEF / #08AFE8)
 * - PURPLE SECONDARY/PREMIUM ACCENT (#7B35E8 / #813BEF)
 * - ORANGE/GOLD HIGHLIGHT ACCENT (#FFA800 / #FFB000)
 * - COMPACT DARK TYPOGRAPHY (Inter / Poppins / Public Sans)
 * - ROUNDED BUTTONS (11px–15px radius, 44px–52px height)
 * - ROUNDED ICON CONTAINERS (36px–44px, 12px–14px radius or circular)
 * - SOFT COLORED BADGES (pill-shaped 999px)
 * - FLOATING WHATSAPP & SCROLL-TO-TOP BUTTONS
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    /* ── Core Color Palette ── */
    --teal-shell: #12676D;
    --teal-shell-dark: #0F565B;
    --teal-shell-light: #176C70;
    --teal-bg: #146B70;
    
    --header-bg: #F2FAFD;
    --header-bg-alt: #EEF9FC;
    
    --surface-white: #FFFFFF;
    --surface-light: #F8FAFC;
    --surface-subtle: #F1F5F9;
    
    /* ── Action Accents ── */
    --cyan-primary: #00AEEF;
    --cyan-primary-hover: #0096D1;
    --cyan-light: #E5F7FC;
    --cyan-border: rgba(0, 174, 239, 0.25);
    
    --purple-accent: #7B35E8;
    --purple-accent-hover: #6925D4;
    --purple-light: #F0E8FF;
    --purple-border: rgba(123, 53, 232, 0.25);
    
    --orange-gold: #FFA800;
    --orange-gold-hover: #E69700;
    --orange-light: #FFF1D0;
    --orange-border: rgba(255, 168, 0, 0.3);
    
    --green-success: #10B981;
    --green-light: #E8F8F0;
    --red-danger: #EF4444;
    --red-light: #FEE2E2;

    /* ── Typography & Neutrals ── */
    --text-main: #1E293B;
    --text-dark: #0F172A;
    --text-muted: #64748B;
    --text-light: #94A3B8;
    --text-white: #FFFFFF;
    
    --border-soft: #E2E8F0;
    --border-light: #F1F5F9;
    
    /* ── Geometry & Spacing ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-btn: 14px;
    --radius-card: 22px;
    --radius-surface: 26px;
    --radius-pill: 999px;
    
    --shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.07);
    --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.1);
    
    --font-main: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   1. GLOBAL PAGE SHELL & BODY
   ========================================================================== */
html {
    font-size: 15px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--teal-shell) !important;
    background: var(--teal-shell) !important;
    color: var(--text-main) !important;
    font-family: var(--font-main) !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Deep Teal Page Shell Container */
.page-shell, .main-wrapper, .portal-container, .dashboard-wrapper {
    background-color: var(--teal-shell);
    min-height: 100vh;
    width: 100%;
    padding-bottom: 40px;
}

.content-surface, .container-surface {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ==========================================================================
   2. GLOBAL HEADER & NAVBAR (PALE COOL BLUE / WHITE)
   ========================================================================== */
header, .main-header, .top-header, .navbar-custom, .app-header, .luxury-nav, .navbar {
    background-color: var(--header-bg) !important;
    background: var(--header-bg) !important;
    border-bottom: 1px solid rgba(0, 174, 239, 0.12) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    min-height: 64px;
    position: sticky;
    top: 0;
    z-index: 1040;
}

.nav-logo, .navbar-brand {
    color: var(--text-dark) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.nav-logo span {
    color: var(--cyan-primary) !important;
}

.nav-link {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: color 0.15s ease !important;
}

.nav-link:hover, .nav-link.active {
    color: var(--cyan-primary) !important;
}

.nav-hamburger, .navbar-toggler {
    background: var(--cyan-light) !important;
    border: 1px solid var(--cyan-border) !important;
    border-radius: var(--radius-md) !important;
}

.nav-hamburger span {
    background: var(--cyan-primary) !important;
}

.mobile-drawer {
    background: var(--surface-white) !important;
    border-top: 1px solid var(--border-soft) !important;
    color: var(--text-dark) !important;
}

.drawer-link {
    color: var(--text-main) !important;
}

.drawer-link:hover, .drawer-link.active {
    background: var(--cyan-light) !important;
    color: var(--cyan-primary) !important;
}

/* ==========================================================================
   3. LARGE WHITE ROUNDED CONTENT SURFACES & CARDS (GLASS-CARD OVERRIDE)
   ========================================================================== */
.card, .glass-card, .reference-card, .modern-card, .modern-card-luxury, .dash-card, .white-box, .stat-box, .panel, .admin-card, .admin-card-metric {
    background-color: var(--surface-white) !important;
    background: var(--surface-white) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-dark) !important;
    padding: 24px;
    margin-bottom: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover, .glass-card:hover, .reference-card:hover {
    box-shadow: var(--shadow-hover) !important;
}

/* ── GUARANTEED HIGH-CONTRAST TEXT WITHIN ALL CARDS & SURFACES ── */
.glass-card h1, .glass-card h2, .glass-card h3, .glass-card h4, .glass-card h5, .glass-card h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.reference-card h1, .reference-card h2, .reference-card h3, .reference-card h4,
.admin-card h1, .admin-card h2, .admin-card h3, .admin-card h4,
.dash-card h1, .dash-card h2, .dash-card h3, .dash-card h4, .dash-card h5, .dash-card h6,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4,
.dashboard-wrapper h1, .dashboard-wrapper h2, .dashboard-wrapper h3, .dashboard-wrapper h4, .dashboard-wrapper h5, .dashboard-wrapper h6 {
    color: var(--text-dark) !important;
    font-weight: 700 !important;
}

.glass-card p, .card p, .reference-card p, .admin-card p, .dash-card p, .modal-content p, .dashboard-wrapper p:not(.text-white-force) {
    color: var(--text-main) !important;
}

.glass-card .text-muted, .card .text-muted, .reference-card .text-muted, .dash-card .text-muted,
.modal-content .text-muted, .table .text-muted, .dashboard-wrapper .text-muted,
.glass-card [style*="color:var(--text-muted)"], .card [style*="color:var(--text-muted)"] {
    color: var(--text-muted) !important;
}

/* ── UNIVERSAL TEXT-WHITE CONVERSION INSIDE LIGHT SURFACES ── */
.card .text-white:not(.btn):not(.badge):not(.value-pill):not(.price-badge):not(.keep-white),
.glass-card .text-white:not(.btn):not(.badge):not(.value-pill):not(.price-badge):not(.keep-white),
.reference-card .text-white:not(.btn):not(.badge):not(.value-pill):not(.price-badge):not(.keep-white),
.dash-card .text-white:not(.btn):not(.badge):not(.value-pill):not(.price-badge):not(.keep-white),
.admin-card .text-white:not(.btn):not(.badge):not(.value-pill):not(.price-badge):not(.keep-white),
.modal-content .text-white:not(.btn):not(.badge):not(.value-pill):not(.price-badge):not(.keep-white),
.table .text-white:not(.btn):not(.badge):not(.value-pill):not(.price-badge):not(.keep-white),
.overview-row .text-white:not(.btn):not(.badge),
.team-section-row .text-white:not(.btn):not(.badge),
.note-box .text-white:not(.btn):not(.badge) {
    color: var(--text-dark) !important;
}

.card .text-white-50, .glass-card .text-white-50, .reference-card .text-white-50,
.dash-card .text-white-50, .admin-card .text-white-50, .modal-content .text-white-50,
.table .text-white-50, .overview-row .text-white-50, .team-section-row .text-white-50 {
    color: var(--text-muted) !important;
}

/* ── ELIMINATE BLACK & DARK BOXES INSIDE CARDS ── */
.card .bg-dark, .card .bg-black,
.glass-card .bg-dark, .glass-card .bg-black,
.dash-card .bg-dark, .dash-card .bg-black,
.modal-content .bg-dark, .modal-content .bg-black,
.admin-card .bg-dark, .admin-card .bg-black,
.dashboard-wrapper .bg-dark:not(.keep-dark), .dashboard-wrapper .bg-black:not(.keep-dark) {
    background-color: var(--surface-light) !important;
    background: var(--surface-light) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-dark) !important;
}

/* ── OVERRIDE ANY INLINE WHITE TEXT ON WHITE CARDS ── */
.glass-card [style*="color:#FFF"], .glass-card [style*="color: #FFF"],
.glass-card [style*="color:#fff"], .glass-card [style*="color: #fff"],
.glass-card [style*="color:white"], .glass-card [style*="color: white"],
.glass-card [style*="color:#FFFFFF"], .glass-card [style*="color: #FFFFFF"],
.card [style*="color:#FFF"], .card [style*="color: #FFF"],
.card [style*="color:#fff"], .card [style*="color: #fff"],
.card [style*="color:white"], .card [style*="color: white"],
.card [style*="color:#FFFFFF"], .card [style*="color: #FFFFFF"],
.dash-card [style*="color:#FFF"], .dash-card [style*="color: #FFF"],
.dash-card [style*="color:#fff"], .dash-card [style*="color: #fff"],
.modal-content [style*="color:#FFF"], .modal-content [style*="color: #FFF"],
.modal-content [style*="color:#fff"], .modal-content [style*="color: #fff"] {
    color: var(--text-dark) !important;
}

/* ── OVERRIDE LEGACY GOLD & BLACK COLORS TO UNIFIED PALETTE ── */
.text-gold, .gold,
.card [style*="color:#D4AF37"], .card [style*="color: #D4AF37"],
.card [style*="color:#d4af37"], .card [style*="color: #d4af37"],
.card [style*="color:#FFD700"], .card [style*="color: #FFD700"],
.card [style*="color:var(--gold)"], .card [style*="color: var(--gold)"] {
    color: var(--cyan-primary) !important;
}

/* ── HERO INCOME CARD OVERHAUL TO MODERN CLEAN STYLE ── */
.income-hero-card {
    background: var(--surface-white) !important;
    border: 1.5px solid var(--border-soft) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-dark) !important;
}
.income-hero-card::before { display: none !important; }
.income-hero-dots { display: none !important; }
.income-hero-label { color: var(--cyan-primary) !important; font-weight: 800 !important; font-size: 0.95rem; }
.income-hero-badge { border: 1.5px solid var(--cyan-border) !important; background: var(--cyan-light) !important; color: var(--cyan-primary) !important; }
.income-hero-value { color: var(--text-dark) !important; }
.income-hero-divider { background: var(--border-soft) !important; box-shadow: none !important; }
.income-hero-box { background: var(--surface-light) !important; border: 1px solid var(--border-soft) !important; }
.income-hero-icon { border: 1.5px solid var(--cyan-primary) !important; background: var(--cyan-light) !important; color: var(--cyan-primary) !important; box-shadow: none !important; }
.income-hero-box-title { color: var(--text-muted) !important; }
.income-hero-box-title::after { background: var(--border-soft) !important; }
.income-hero-box-value { color: var(--text-dark) !important; }

/* ── NOTE BOXES & WARNING BANNERS ── */
.note-box {
    background: var(--orange-light) !important;
    border: 1px solid var(--orange-border) !important;
    border-radius: var(--radius-md) !important;
    color: #92400E !important;
    padding: 14px 18px !important;
}
.note-box i { color: var(--orange-gold) !important; }

/* ── OVERVIEW ROWS & TEAM SECTION ROWS ── */
.overview-row, .team-section-row {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-dark) !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
}
.overview-row:hover, .team-section-row:hover {
    background: var(--cyan-light) !important;
    border-color: var(--cyan-border) !important;
}

/* ── Inner Layered Surfaces ── */
.inner-layer, .sub-card, .well-soft {
    background-color: var(--surface-light) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 16px;
    margin-bottom: 14px;
    color: var(--text-main) !important;
}

.inner-layer-cyan {
    background-color: var(--cyan-light) !important;
    border: 1px solid var(--cyan-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 16px;
    color: #0369A1 !important;
}

.inner-layer-purple {
    background-color: var(--purple-light) !important;
    border: 1px solid var(--purple-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 16px;
    color: #5B21B6 !important;
}

.inner-layer-orange {
    background-color: var(--orange-light) !important;
    border: 1px solid var(--orange-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 16px;
    color: #9A3412 !important;
}

/* ==========================================================================
   4. ICON CONTAINERS (CYAN, PURPLE, ORANGE, GREEN)
   ========================================================================== */
.icon-box, .icon-container, .stat-icon-box {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.icon-box.icon-lg {
    width: 52px;
    height: 52px;
    font-size: 22px;
    border-radius: 16px;
}

.icon-box.icon-circle {
    border-radius: var(--radius-pill);
}

.icon-cyan, .icon-box.cyan {
    background-color: var(--cyan-light) !important;
    color: var(--cyan-primary) !important;
    border: 1px solid var(--cyan-border) !important;
}

.icon-purple, .icon-box.purple {
    background-color: var(--purple-light) !important;
    color: var(--purple-accent) !important;
    border: 1px solid var(--purple-border) !important;
}

.icon-orange, .icon-box.orange {
    background-color: var(--orange-light) !important;
    color: var(--orange-gold) !important;
    border: 1px solid var(--orange-border) !important;
}

.icon-green, .icon-box.green {
    background-color: var(--green-light) !important;
    color: var(--green-success) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.icon-red, .icon-box.red {
    background-color: var(--red-light) !important;
    color: var(--red-danger) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* ==========================================================================
   5. BUTTON SYSTEM (CYAN, PURPLE, AMBER)
   ========================================================================== */
.btn {
    border-radius: var(--radius-btn) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 10px 20px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease !important;
    border: none;
    box-shadow: var(--shadow-sm);
    text-decoration: none !important;
}

.btn:active {
    transform: scale(0.98);
}

/* Primary Cyan Button */
.btn-primary, .btn-cyan, .btn-dash-primary, .btn-gold {
    background-color: var(--cyan-primary) !important;
    background: var(--cyan-primary) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(0, 174, 239, 0.35) !important;
}

.btn-primary:hover, .btn-cyan:hover, .btn-dash-primary:hover, .btn-gold:hover {
    background-color: var(--cyan-primary-hover) !important;
    background: var(--cyan-primary-hover) !important;
    color: var(--text-white) !important;
    box-shadow: 0 6px 18px rgba(0, 174, 239, 0.45) !important;
}

/* Secondary Purple Button */
.btn-secondary, .btn-purple, .btn-dash-purple {
    background-color: var(--purple-accent) !important;
    background: var(--purple-accent) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(123, 53, 232, 0.35) !important;
}

.btn-secondary:hover, .btn-purple:hover, .btn-dash-purple:hover {
    background-color: var(--purple-accent-hover) !important;
    background: var(--purple-accent-hover) !important;
    color: var(--text-white) !important;
}

/* Highlight Orange Button */
.btn-warning, .btn-orange {
    background-color: var(--orange-gold) !important;
    background: var(--orange-gold) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(255, 168, 0, 0.35) !important;
}

.btn-warning:hover, .btn-orange:hover {
    background-color: var(--orange-gold-hover) !important;
    background: var(--orange-gold-hover) !important;
    color: var(--text-white) !important;
}

/* Success Button */
.btn-success {
    background-color: var(--green-success) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

/* Danger Button */
.btn-danger {
    background-color: var(--red-danger) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}

/* Outline Buttons */
.btn-outline, .btn-outline-primary, .btn-outline-cyan, .btn-outline-gold {
    background: transparent !important;
    color: var(--cyan-primary) !important;
    border: 1.5px solid var(--cyan-primary) !important;
    box-shadow: none !important;
}

.btn-outline:hover, .btn-outline-primary:hover, .btn-outline-cyan:hover, .btn-outline-gold:hover {
    background: var(--cyan-primary) !important;
    color: var(--text-white) !important;
}

/* ==========================================================================
   6. PRICE & MONETARY VALUE PILL
   ========================================================================== */
.value-pill, .price-badge, .pill-gold {
    background-color: var(--orange-gold) !important;
    color: var(--text-white) !important;
    font-weight: 800 !important;
    font-size: 0.95rem;
    padding: 6px 16px;
    border-radius: var(--radius-pill) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 10px rgba(255, 168, 0, 0.35);
    letter-spacing: 0.5px;
}

.value-pill-cyan {
    background-color: var(--cyan-primary) !important;
    box-shadow: 0 3px 10px rgba(0, 174, 239, 0.35);
}

.value-pill-purple {
    background-color: var(--purple-accent) !important;
    box-shadow: 0 3px 10px rgba(123, 53, 232, 0.35);
}

/* ==========================================================================
   7. BADGES & STATUS INDICATORS
   ========================================================================== */
.badge {
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge.bg-primary, .badge-cyan, .drawer-badge {
    background-color: var(--cyan-light) !important;
    color: var(--cyan-primary) !important;
    border: 1px solid var(--cyan-border) !important;
}

.badge.bg-secondary, .badge-purple {
    background-color: var(--purple-light) !important;
    color: var(--purple-accent) !important;
    border: 1px solid var(--purple-border) !important;
}

.badge.bg-warning, .badge-orange, .badge-gold {
    background-color: var(--orange-light) !important;
    color: #B45309 !important;
    border: 1px solid var(--orange-border) !important;
}

.badge.bg-success, .badge-green {
    background-color: var(--green-light) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.badge.bg-danger, .badge-red {
    background-color: var(--red-light) !important;
    color: #B91C1C !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* ==========================================================================
   8. FORMS, INPUTS & LABELS
   ========================================================================== */
.form-label, label {
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text-dark) !important;
    margin-bottom: 6px;
    display: block;
}

.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea {
    background-color: var(--surface-white) !important;
    border: 1.5px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-dark) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    min-height: 44px;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--cyan-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.18) !important;
    outline: none !important;
}

.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--text-light) !important;
    opacity: 1 !important;
}

.input-group-text {
    background-color: var(--surface-light) !important;
    border: 1.5px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-muted) !important;
    font-size: 0.9rem;
}

/* ==========================================================================
   9. TABLES & DATA LISTS
   ========================================================================== */
.table-responsive {
    background: var(--surface-white) !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
    padding: 6px;
    overflow-x: auto;
}

.table {
    margin-bottom: 0 !important;
    color: var(--text-main) !important;
    vertical-align: middle;
}

.table thead th {
    background-color: var(--surface-light) !important;
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px !important;
    border-bottom: 1.5px solid var(--border-soft) !important;
    white-space: nowrap;
}

.table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 0.9rem !important;
    color: var(--text-main) !important;
    background: transparent !important;
}

.table tbody tr:last-child td {
    border-bottom: none !important;
}

.table tbody tr:hover td {
    background-color: var(--surface-light) !important;
}

/* ==========================================================================
   10. MODALS, DROPDOWNS & ALERTS
   ========================================================================== */
.modal-content {
    background-color: var(--surface-white) !important;
    border-radius: var(--radius-surface) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
    color: var(--text-main) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-light) !important;
    padding: 18px 24px !important;
}

.modal-title {
    font-weight: 700;
    color: var(--text-dark) !important;
}

.modal-body {
    padding: 24px !important;
    color: var(--text-main) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-light) !important;
    padding: 16px 24px !important;
}

.dropdown-menu {
    background-color: var(--surface-white) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-hover) !important;
    padding: 8px !important;
}

.dropdown-item {
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--text-main) !important;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background-color: var(--cyan-light) !important;
    color: var(--cyan-primary) !important;
}

.dropdown-item.active {
    background-color: var(--cyan-primary) !important;
    color: var(--text-white) !important;
}

/* Unified Alerts */
.alert {
    border-radius: var(--radius-md) !important;
    padding: 14px 18px !important;
    font-size: 0.88rem;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background-color: var(--green-light) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #065F46 !important;
}

.alert-danger {
    background-color: var(--red-light) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #991B1B !important;
}

.alert-warning {
    background-color: var(--orange-light) !important;
    border-color: var(--orange-border) !important;
    color: #92400E !important;
}

.alert-info {
    background-color: var(--cyan-light) !important;
    border-color: var(--cyan-border) !important;
    color: #0369A1 !important;
}

/* ==========================================================================
   11. SIDEBAR & NAVIGATION (USER & ADMIN)
   ========================================================================== */
.sidebar, .sidebar-wrapper, .sidebar-main {
    background-color: var(--surface-white) !important;
    background: var(--surface-white) !important;
    border-right: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

.sidebar .nav-link, .sidebar-wrapper .sidebar-list a {
    color: var(--text-muted) !important;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 16px !important;
    border-radius: var(--radius-md) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

.sidebar .nav-link:hover, .sidebar-wrapper .sidebar-list a:hover {
    background-color: var(--surface-light) !important;
    color: var(--text-dark) !important;
}

.sidebar .nav-link.active, .sidebar-wrapper .sidebar-list a.active {
    background-color: var(--cyan-light) !important;
    color: var(--cyan-primary) !important;
    font-weight: 700;
}

/* ==========================================================================
   12. FLOATING ACTION BUTTONS (WHATSAPP & BACK-TO-TOP)
   ========================================================================== */
.floating-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 50px;
    height: 50px;
    background-color: #25D366;
    color: #FFFFFF !important;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
    z-index: 1060;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.floating-whatsapp:hover {
    transform: scale(1.08);
    color: #FFFFFF !important;
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.6);
}

.floating-back-to-top {
    position: fixed;
    bottom: 84px;
    right: 24px;
    width: 42px;
    height: 42px;
    background-color: var(--surface-white);
    color: var(--teal-shell) !important;
    border: 1.5px solid var(--cyan-border);
    border-radius: var(--radius-pill);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: var(--shadow-soft);
    z-index: 1050;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.floating-back-to-top:hover {
    background-color: var(--cyan-primary);
    color: var(--text-white) !important;
    border-color: var(--cyan-primary);
    transform: translateY(-3px);
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
footer, .luxury-footer, .footer {
    background: #0F565B !important;
    color: #E2E8F0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 40px 0 20px !important;
    margin-top: auto;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.luxury-footer h1, .luxury-footer h2, .luxury-footer h3, .luxury-footer h4 {
    color: #FFFFFF !important;
}

footer a, .luxury-footer a {
    color: #CBD5E1 !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

footer a:hover, .luxury-footer a:hover {
    color: #38BDF8 !important;
}

/* ==========================================================================
   14. RESPONSIVE MOBILE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .container-surface {
        padding: 0 10px;
    }

    .card, .glass-card, .reference-card {
        padding: 16px;
        border-radius: 18px !important;
        margin-bottom: 14px;
    }

    .btn {
        min-height: 42px;
        padding: 8px 16px !important;
    }

    .value-pill {
        font-size: 0.85rem;
        padding: 4px 12px;
    }
}