/**
 * First Dial Portal - Professional Theme
 * Clean, Readable, Enterprise-Grade
 */

/* ============================================
   LIGHT MODE
   ============================================ */
:root {
    --bg-body: #f1f5f9;
    --bg-card: #ffffff;
    --bg-muted: #f8fafc;
    --bg-elevated: #ffffff;

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;

    --border-color: #e2e8f0;
    --border-strong: #cbd5e1;

    --accent: #0170B9;
    --accent-hover: #015a94;
}

/* ============================================
   DARK MODE
   ============================================ */
.dark, html.dark {
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-muted: #334155;
    --bg-elevated: #475569;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --border-color: #334155;
    --border-strong: #475569;

    --accent: #38bdf8;
    --accent-hover: #0ea5e9;
}

/* ============================================
   BASE
   ============================================ */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   CARDS
   ============================================ */
.bg-white {
    background-color: var(--bg-card) !important;
}

.dark .bg-white {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.bg-white\/90, .bg-white\/80, .bg-white\/50 {
    background-color: var(--bg-card) !important;
}

.dark .bg-white\/90, .dark .bg-white\/80, .dark .bg-white\/50 {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.bg-gray-50 {
    background-color: var(--bg-muted) !important;
}

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

.bg-gray-100 {
    background-color: var(--bg-muted) !important;
}

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

.dark .bg-gray-800, .dark .bg-gray-900 {
    background-color: var(--bg-card) !important;
}

/* ============================================
   TEXT - CRITICAL FOR READABILITY
   ============================================ */
.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

.dark .text-gray-800 {
    color: #f1f5f9 !important;
}

.dark .text-gray-700 {
    color: #e2e8f0 !important;
}

.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

.dark .text-gray-500 {
    color: #94a3b8 !important;
}

.dark .text-gray-400 {
    color: #64748b !important;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #f1f5f9 !important;
}

.dark p {
    color: #cbd5e1 !important;
}

.dark label {
    color: #e2e8f0 !important;
}

.dark span:not([class*="bg-"]):not([class*="text-"]) {
    color: #cbd5e1;
}

/* ============================================
   BORDERS
   ============================================ */
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--border-color) !important;
}

.dark .divide-gray-200 > * + * {
    border-color: var(--border-color) !important;
}

/* ============================================
   NAVIGATION - CLEAN & PROFESSIONAL
   ============================================ */
nav, .theme-nav {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark nav, .dark .theme-nav {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Nav text - exclude buttons and special elements */
nav > div a:not(.theme-btn-primary):not([class*="bg-gradient"]),
.theme-nav > div a:not(.theme-btn-primary):not([class*="bg-gradient"]) {
    color: var(--text-secondary);
}

nav > div a:not(.theme-btn-primary):not([class*="bg-gradient"]):hover,
.theme-nav > div a:not(.theme-btn-primary):not([class*="bg-gradient"]):hover {
    color: var(--accent);
}

.dark nav > div a:not(.theme-btn-primary):not([class*="bg-gradient"]),
.dark .theme-nav > div a:not(.theme-btn-primary):not([class*="bg-gradient"]) {
    color: #cbd5e1;
}

.dark nav > div a:not(.theme-btn-primary):not([class*="bg-gradient"]):hover,
.dark .theme-nav > div a:not(.theme-nav):not([class*="bg-gradient"]):hover {
    color: #38bdf8;
}

/* Logo - keep gradient */
.bg-clip-text {
    background: linear-gradient(135deg, #0170B9 0%, #0ea5e9 50%, #06b6d4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Navigation buttons - ensure white text on gradient background */
nav button.theme-btn-primary,
nav button.theme-btn-primary span,
nav button.theme-btn-primary svg,
.theme-nav button.theme-btn-primary,
.theme-nav button.theme-btn-primary span,
.theme-nav button.theme-btn-primary svg {
    color: #ffffff !important;
}

/* User menu button in nav - force gradient and white text */
nav .group button[class*="theme-btn-primary"],
.theme-nav .group button[class*="theme-btn-primary"] {
    background: linear-gradient(135deg, #0170B9 0%, #0ea5e9 100%) !important;
}

nav .group button[class*="theme-btn-primary"] span,
.theme-nav .group button[class*="theme-btn-primary"] span {
    color: #ffffff !important;
}

.dark nav .group button[class*="theme-btn-primary"],
.dark .theme-nav .group button[class*="theme-btn-primary"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
}

.dark nav .group button[class*="theme-btn-primary"] span,
.dark .theme-nav .group button[class*="theme-btn-primary"] span {
    color: #ffffff !important;
}

/* ============================================
   DROPDOWNS - MUST BE VISIBLE
   ============================================ */
.theme-dropdown,
[x-show*="open"] > div,
.dropdown-menu,
div[class*="absolute"][class*="right-0"][class*="mt-"],
div[class*="absolute"][class*="z-"] {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

.dark .theme-dropdown,
.dark [x-show*="open"] > div,
.dark .dropdown-menu,
.dark div[class*="absolute"][class*="right-0"][class*="mt-"],
.dark div[class*="absolute"][class*="z-"] {
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

/* Dropdown text */
.theme-dropdown a,
.theme-dropdown span,
.theme-dropdown p,
.theme-dropdown div {
    color: var(--text-secondary) !important;
}

.dark .theme-dropdown a,
.dark .theme-dropdown span,
.dark .theme-dropdown p,
.dark .theme-dropdown div {
    color: #e2e8f0 !important;
}

.dark .theme-dropdown a:hover {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Dropdown labels/muted text */
.theme-dropdown .text-xs,
.theme-dropdown .text-gray-500 {
    color: var(--text-muted) !important;
}

.dark .theme-dropdown .text-xs,
.dark .theme-dropdown .text-gray-500 {
    color: #94a3b8 !important;
}

/* Logout */
.theme-dropdown a[href="/logout"] {
    color: #ef4444 !important;
}

.dark .theme-dropdown a[href="/logout"] {
    color: #f87171 !important;
}

/* ============================================
   FORM INPUTS
   ============================================ */
input, textarea, select {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark input, .dark textarea, .dark select {
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
    color: #f1f5f9 !important;
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
}

.dark input::placeholder, .dark textarea::placeholder {
    color: #64748b !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(1, 112, 185, 0.2) !important;
}

.dark input:focus, .dark textarea:focus, .dark select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

/* ============================================
   TABLES
   ============================================ */
.dark table {
    border-color: var(--border-color) !important;
}

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

.dark th {
    color: #94a3b8 !important;
    border-color: var(--border-color) !important;
}

.dark td {
    color: #e2e8f0 !important;
    border-color: var(--border-color) !important;
}

.dark tbody tr:hover {
    background-color: rgba(56, 189, 248, 0.05) !important;
}

/* ============================================
   STATUS BADGES
   ============================================ */
/* Green/Success */
.dark .bg-green-50, .dark .bg-green-100, .dark .bg-emerald-50, .dark .bg-emerald-100 {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

.dark .text-green-600, .dark .text-green-700, .dark .text-green-800,
.dark .text-emerald-600, .dark .text-emerald-700 {
    color: #4ade80 !important;
}

/* Red/Danger */
.dark .bg-red-50, .dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.dark .text-red-600, .dark .text-red-700, .dark .text-red-800 {
    color: #f87171 !important;
}

/* Yellow/Warning */
.dark .bg-yellow-50, .dark .bg-yellow-100, .dark .bg-amber-50, .dark .bg-amber-100 {
    background-color: rgba(251, 191, 36, 0.15) !important;
}

.dark .text-yellow-600, .dark .text-yellow-700, .dark .text-amber-600, .dark .text-amber-700 {
    color: #fbbf24 !important;
}

/* Blue/Info */
.dark .bg-blue-50, .dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.dark .text-blue-600, .dark .text-blue-700, .dark .text-blue-800 {
    color: #60a5fa !important;
}

/* Purple */
.dark .bg-purple-50, .dark .bg-purple-100 {
    background-color: rgba(139, 92, 246, 0.15) !important;
}

.dark .text-purple-600, .dark .text-purple-700 {
    color: #a78bfa !important;
}

/* Orange */
.dark .bg-orange-50, .dark .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

.dark .text-orange-600, .dark .text-orange-700 {
    color: #fb923c !important;
}

/* Indigo */
.dark .bg-indigo-50, .dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

.dark .text-indigo-600, .dark .text-indigo-700 {
    color: #818cf8 !important;
}

/* ============================================
   MODALS
   ============================================ */
.dark .fixed.inset-0 > div.bg-white,
.dark #createModal > div,
.dark #editModal > div,
.dark #permissionsModal > div,
.dark [role="dialog"] {
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
}

.dark #createModal h2, .dark #editModal h2, .dark #permissionsModal h2 {
    color: #f1f5f9 !important;
}

.dark #createModal label, .dark #editModal label, .dark #permissionsModal label {
    color: #e2e8f0 !important;
}

.dark #createModal input, .dark #editModal input, .dark #permissionsModal input,
.dark #createModal select, .dark #editModal select, .dark #permissionsModal select {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

.dark #permissionsContainer .bg-gray-50 {
    background-color: #334155 !important;
}

.dark #permissionsContainer h3 {
    color: #f1f5f9 !important;
}

.dark #permissionsContainer span {
    color: #e2e8f0 !important;
}

/* ============================================
   BUTTONS - Primary buttons with proper styling
   ============================================ */
/* Primary button - MUST be visible */
.theme-btn-primary {
    background: linear-gradient(135deg, #0170B9 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
}

.theme-btn-primary:hover {
    background: linear-gradient(135deg, #015a94 0%, #0891b2 100%) !important;
}

.dark .theme-btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
}

.dark .theme-btn-primary:hover {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
}

/* Ensure button text inside primary buttons is white */
.theme-btn-primary span,
.theme-btn-primary svg {
    color: #ffffff !important;
}

/* Keep gradient buttons working */
.bg-gradient-to-r {
    /* Keep original */
}

/* Cancel/secondary buttons */
.dark button.border-gray-200,
.dark .border-2.border-gray-200 {
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.dark button.border-gray-200:hover {
    background-color: #334155 !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
.mobile-menu {
    background-color: var(--bg-card) !important;
}

.dark .mobile-menu {
    background-color: #1e293b !important;
    border-right: 1px solid #334155 !important;
}

/* ============================================
   CHAT
   ============================================ */
.dark .bg-gray-100.rounded-2xl {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* ============================================
   CALENDAR
   ============================================ */
.dark .fc-theme-standard td,
.dark .fc-theme-standard th {
    border-color: #334155 !important;
}

.dark .fc-col-header-cell {
    background-color: #334155 !important;
}

.dark .fc-daygrid-day {
    background-color: #1e293b !important;
}

.dark .fc-day-today {
    background-color: rgba(56, 189, 248, 0.1) !important;
}

/* ============================================
   SCROLLBARS
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-muted);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   LEGACY CLASSES
   ============================================ */
.dark .dark\:bg-dark-card {
    background-color: #1e293b !important;
}

.dark .dark\:bg-dark-hover {
    background-color: #334155 !important;
}

.dark .dark\:border-dark-border {
    border-color: #475569 !important;
}

.dark .dark\:text-dark-text {
    color: #f1f5f9 !important;
}

.dark .dark\:text-dark-muted {
    color: #94a3b8 !important;
}

.dark .dark\:bg-dark-bg {
    background-color: #0f172a !important;
}

/* ============================================
   HOVER STATES
   ============================================ */
.dark .hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #334155 !important;
}

.dark .hover\:bg-blue-50:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.dark .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* ============================================
   FOCUS VISIBLE
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================
   FOOTER
   ============================================ */
.dark footer {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark footer h3 {
    color: #f1f5f9 !important;
}

.dark footer p,
.dark footer a:not([class*="text-"]),
.dark footer li {
    color: #94a3b8 !important;
}

.dark footer a:hover {
    color: #38bdf8 !important;
}

/* Hide light footer in dark mode, show dark footer */
.dark footer.bg-white\/50 {
    display: none !important;
}

footer.bg-slate-800 {
    display: none;
}

.dark footer.bg-slate-800 {
    display: block !important;
}

/* ============================================
   HOME PAGE CARDS - Critical for dark mode
   ============================================ */
.dark .backdrop-blur-lg {
    background-color: rgba(30, 41, 59, 0.9) !important;
}

/* Card borders in dark mode */
.dark [class*="border-cyan-"],
.dark [class*="border-emerald-"],
.dark [class*="border-blue-"],
.dark [class*="border-indigo-"],
.dark [class*="border-pink-"],
.dark [class*="border-amber-"],
.dark [class*="border-violet-"],
.dark [class*="border-rose-"],
.dark [class*="border-teal-"],
.dark [class*="border-purple-"],
.dark [class*="border-red-"] {
    border-color: var(--border-color) !important;
}

.dark [class*="border-cyan-"]:hover,
.dark [class*="border-emerald-"]:hover,
.dark [class*="border-blue-"]:hover,
.dark [class*="border-indigo-"]:hover,
.dark [class*="border-pink-"]:hover,
.dark [class*="border-amber-"]:hover,
.dark [class*="border-violet-"]:hover,
.dark [class*="border-rose-"]:hover,
.dark [class*="border-teal-"]:hover,
.dark [class*="border-purple-"]:hover,
.dark [class*="border-red-"]:hover {
    border-color: #475569 !important;
}

/* Stats section white background */
.dark .bg-white.rounded-3xl {
    background-color: var(--bg-card) !important;
}

/* ============================================
   ADMIN PAGES
   ============================================ */
.dark .container h1,
.dark .container h2 {
    color: #f1f5f9 !important;
}

/* Admin cards */
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   TRAINING & DOCUMENTS PAGES
   ============================================ */
.dark .rounded-3xl[class*="bg-white"],
.dark .rounded-2xl[class*="bg-white"] {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* ============================================
   VIBER PAGE SPECIFIC
   ============================================ */
.dark .bg-\[\#7360F2\]\/10 {
    background-color: rgba(115, 96, 242, 0.15) !important;
}

/* ============================================
   CHAT SPECIFIC
   ============================================ */
.dark .chat-message {
    background-color: var(--bg-muted) !important;
}

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

/* ============================================
   TASK/KANBAN BOARD
   ============================================ */
.dark .kanban-column {
    background-color: var(--bg-muted) !important;
}

.dark .kanban-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* ============================================
   CALENDAR SPECIFIC
   ============================================ */
.dark .fc {
    color: #f1f5f9 !important;
}

.dark .fc-toolbar-title {
    color: #f1f5f9 !important;
}

.dark .fc-button {
    background-color: var(--bg-muted) !important;
    border-color: var(--border-color) !important;
    color: #f1f5f9 !important;
}

.dark .fc-button:hover {
    background-color: var(--bg-elevated) !important;
}

.dark .fc-button-active {
    background-color: #0ea5e9 !important;
}

/* ============================================
   PROFILE PAGE
   ============================================ */
.dark .profile-card {
    background-color: var(--bg-card) !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */
.dark .alert-success {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
}

.dark .alert-error {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

.dark .alert-warning {
    background-color: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

.dark .alert-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

/* ============================================
   SPECIFIC COLOR FIXES FOR COMMON PATTERNS
   ============================================ */
/* Cyan text colors */
.dark .text-cyan-600, .dark .text-cyan-700, .dark .text-cyan-800 {
    color: #22d3ee !important;
}

/* Sky text colors */
.dark .text-sky-600, .dark .text-sky-700, .dark .text-sky-800 {
    color: #38bdf8 !important;
}

/* Teal text colors */
.dark .text-teal-600, .dark .text-teal-700 {
    color: #2dd4bf !important;
}

/* Rose text colors */
.dark .text-rose-600, .dark .text-rose-700 {
    color: #fb7185 !important;
}

/* Violet text colors */
.dark .text-violet-600, .dark .text-violet-700 {
    color: #a78bfa !important;
}

/* Pink text colors */
.dark .text-pink-600, .dark .text-pink-700 {
    color: #f472b6 !important;
}

/* Fuchsia text colors */
.dark .text-fuchsia-600, .dark .text-fuchsia-700 {
    color: #e879f9 !important;
}

/* ============================================
   BACKGROUND COLOR FIXES
   ============================================ */
.dark .bg-cyan-50, .dark .bg-cyan-100 {
    background-color: rgba(34, 211, 238, 0.15) !important;
}

.dark .bg-sky-50, .dark .bg-sky-100 {
    background-color: rgba(56, 189, 248, 0.15) !important;
}

.dark .bg-teal-50, .dark .bg-teal-100 {
    background-color: rgba(45, 212, 191, 0.15) !important;
}

.dark .bg-rose-50, .dark .bg-rose-100 {
    background-color: rgba(251, 113, 133, 0.15) !important;
}

.dark .bg-violet-50, .dark .bg-violet-100 {
    background-color: rgba(167, 139, 250, 0.15) !important;
}

.dark .bg-pink-50, .dark .bg-pink-100 {
    background-color: rgba(244, 114, 182, 0.15) !important;
}

.dark .bg-fuchsia-50, .dark .bg-fuchsia-100 {
    background-color: rgba(232, 121, 249, 0.15) !important;
}

.dark .bg-slate-800 {
    background-color: #1e293b !important;
}

/* ============================================
   COMPREHENSIVE TEXT FIX - All remaining grays
   ============================================ */
.dark .text-slate-900, .dark .text-slate-800 {
    color: #f1f5f9 !important;
}

.dark .text-slate-700 {
    color: #e2e8f0 !important;
}

.dark .text-slate-600 {
    color: #cbd5e1 !important;
}

.dark .text-slate-500 {
    color: #94a3b8 !important;
}

/* Fix any element with inline font-black or font-bold in dark mode */
.dark .font-black,
.dark .font-bold,
.dark .font-semibold {
    color: inherit;
}

/* Specific text fixes for cards */
.dark .text-3xl.font-black,
.dark .text-2xl.font-bold,
.dark .text-xl.font-bold {
    color: #f1f5f9 !important;
}

/* ============================================
   MODAL FIX - Comprehensive
   ============================================ */
.dark #createModal,
.dark #editModal,
.dark #permissionsModal,
.dark #taskModal,
.dark #eventModal,
.dark [id$="Modal"] {
    /* Modal backdrop stays the same */
}

.dark #createModal > div,
.dark #editModal > div,
.dark #permissionsModal > div,
.dark #taskModal > div,
.dark #eventModal > div,
.dark [id$="Modal"] > div,
.dark .modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-strong) !important;
}

.dark [id$="Modal"] h2,
.dark [id$="Modal"] h3,
.dark .modal-content h2,
.dark .modal-content h3 {
    color: #f1f5f9 !important;
}

.dark [id$="Modal"] label,
.dark .modal-content label {
    color: #e2e8f0 !important;
}

.dark [id$="Modal"] .text-gray-700,
.dark [id$="Modal"] .text-gray-600,
.dark .modal-content .text-gray-700,
.dark .modal-content .text-gray-600 {
    color: #cbd5e1 !important;
}

/* ============================================
   HERO SECTION FIX
   ============================================ */
.dark .from-primary-500\/10 {
    background-color: rgba(1, 112, 185, 0.15) !important;
}

.dark .via-sky-100 {
    background-color: transparent !important;
}

.dark .to-cyan-100 {
    background-color: transparent !important;
}

/* ============================================
   PROFILE PAGE FIX
   ============================================ */
.dark hr {
    border-color: var(--border-color) !important;
}

/* ============================================
   DISABLED INPUT FIX
   ============================================ */
.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled {
    background-color: var(--bg-muted) !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
}

/* ============================================
   ADDITIONAL BORDER FIXES
   ============================================ */
.dark .border-2.border-gray-200 {
    border-color: var(--border-color) !important;
}

.dark [class*="border-"][class*="/20"],
.dark [class*="border-"][class*="/30"],
.dark [class*="border-"][class*="/50"] {
    border-color: var(--border-color) !important;
}

/* ============================================
   CHAT MESSAGE BUBBLES
   ============================================ */
.dark .bg-gray-100.rounded-2xl,
.dark .bg-gray-100.rounded-xl,
.dark .bg-gray-100.rounded-lg {
    background-color: var(--bg-muted) !important;
    color: #f1f5f9 !important;
}

/* ============================================
   VIBER SPECIFIC FIXES
   ============================================ */
.dark .text-\[\#7360F2\] {
    color: #9d8cf5 !important;
}

.dark .border-\[\#7360F2\] {
    border-color: #7360F2 !important;
}

/* ============================================
   TOOLTIP FIX
   ============================================ */
.dark [data-tooltip]::before {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* ============================================
   CODE BLOCKS
   ============================================ */
.dark pre,
.dark code {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

.dark pre code {
    background-color: transparent !important;
}

/* ============================================
   BACKDROP BLUR CARDS - Critical Fix
   ============================================ */
.dark .backdrop-blur-lg,
.dark .backdrop-blur-xl,
.dark .backdrop-blur-sm {
    background-color: rgba(30, 41, 59, 0.95) !important;
}

/* Reset for specific elements that need transparency */
.dark nav.backdrop-blur-xl,
.dark .theme-nav.backdrop-blur-xl {
    background-color: var(--bg-card) !important;
}

/* ============================================
   MOBILE MENU FIX
   ============================================ */
.dark .mobile-menu a {
    color: #e2e8f0 !important;
}

.dark .mobile-menu a:hover {
    color: #38bdf8 !important;
    background-color: var(--bg-muted) !important;
}

/* ============================================
   PLACEHOLDER TEXT IN ALL INPUTS
   ============================================ */
.dark ::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    nav, .theme-nav, .mobile-menu, .no-print {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}