/* Theme Toggle Button Styles */
.theme-btn-nav {
    color: #6b7280;
    background: transparent;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.theme-btn-nav.active {
    color: #1f2937;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Dark theme button styles */
body.dark .theme-btn-nav {
    color: #94a3b8;
}

body.dark .theme-btn-nav.active {
    color: white;
    background: #0D9488;
    box-shadow: 0 1px 3px rgba(13, 148, 136, 0.5);
}

/* Green buttons for dark theme */
body.dark #darkThemeBtnNav,
body.dark .btn-primary {
    background: #0D9488 !important;
    color: white !important;
    border-color: #0D9488 !important;
}

body.dark .btn-primary:hover {
    background: #0f766e !important;
}

body.dark .btn-secondary {
    background: #0D9488 !important;
    color: white !important;
    border-color: #0D9488 !important;
}

body.dark .btn-secondary:hover {
    background: #0f766e !important;
}

/* Dark theme button styles */
body.dark .theme-btn-nav {
    color: #94a3b8;
}

body.dark .theme-btn-nav.active {
    color: #1f2937;
    background: white;
}

body.dark .bg-gray-200 {
    background: #334155 !important;
}

/* Dark Theme Overrides for Landing Page */
body.dark {
    background: linear-gradient(to bottom right, #0f172a, #1e293b, #334155) !important;
}

body.dark .bg-gradient-to-br {
    background: linear-gradient(to bottom right, #0f172a, #1e293b, #334155) !important;
}

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

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

body.dark .shadcn-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark .bg-white {
    background: #1e293b !important;
}

body.dark .border-slate-200,
body.dark .border-gray-200,
body.dark .border-border,
body.dark .border,
body.dark .rounded-lg.border,
body.dark .border.rounded-lg {
    border-color: #334155 !important;
}

body.dark .bg-gray-100 {
    background: #334155 !important;
}

body.dark .bg-gray-200 {
    background: #334155 !important;
}

body.dark .bg-gray-400 {
    background: #64748b !important;
}

body.dark .bg-slate-50 {
    background: #1e293b !important;
}

body.dark .divide-gray-100 > * {
    border-color: #334155 !important;
}

body.dark .divide-y > * {
    border-color: #334155 !important;
}

body.dark .border-b {
    border-color: #334155 !important;
}

body.dark .border-t {
    border-color: #334155 !important;
}

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

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

body.dark .font-medium,
body.dark .font-bold {
    color: #f1f5f9 !important;
}

body.dark .bg-accent {
    background: #334155 !important;
}

body.dark .bg-card {
    background: #1e293b !important;
}

body.dark a[href="/"] {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark a[href="/"]:hover {
    background: #334155 !important;
}

body.dark .bg-gray-50 {
    background: #1e293b !important;
}

body.dark .bg-slate-100 {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

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

/* Footer dark theme */
body.dark footer {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark footer a {
    color: #94a3b8 !important;
}

body.dark footer a:hover {
    color: #f1f5f9 !important;
}

/* Pricing card dark theme */
body.dark .pricing-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark .pricing-card .font-semibold,
body.dark .pricing-card h1,
body.dark .pricing-card h2,
body.dark .pricing-card h3,
body.dark .pricing-card h4,
body.dark .pricing-card h5,
body.dark .pricing-card h6 {
    color: #f1f5f9 !important;
}

body.dark .pricing-card p,
body.dark .pricing-card span,
body.dark .pricing-card div {
    color: #e2e8f0 !important;
}

/* Input dark theme */
body.dark input,
body.dark textarea,
body.dark select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

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

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    background: #0f172a !important;
    border-color: #0D9488 !important;
}

/* Hover and transition elements - keep them readable */
body.dark .transition-colors,
body.dark .hover\:shadow-md,
body.dark .cursor-pointer {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

body.dark .transition-colors:hover,
body.dark .hover\:shadow-md:hover {
    background: #334155 !important;
}

/* User dropdown dark theme */
body.dark .user-dropdown.open .user-dropdown-content {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark .user-dropdown-item {
    color: #f1f5f9 !important;
}

body.dark .user-dropdown-item:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark .user-dropdown-separator {
    background: #334155 !important;
}

/* Badge colors dark theme */
body.dark .bg-indigo-100 {
    background: #312e81 !important;
}

body.dark .text-indigo-800 {
    color: #c7d2fe !important;
}

body.dark .bg-purple-100 {
    background: #581c87 !important;
}

body.dark .text-purple-800 {
    color: #e9d5ff !important;
}

/* VPS container dark theme */
body.dark .vps-container {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark .border-container {
    border-color: #334155 !important;
}

/* Tab button dark theme */
body.dark .tab-button {
    color: #94a3b8 !important;
    background: transparent !important;
}

body.dark .tab-button:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark .tab-button.active,
body.dark .tab-button[data-state="active"] {
    background: #0D9488 !important;
    color: white !important;
    border-color: #0D9488 !important;
}

/* Webmail login dark theme */
body.dark .bg-background {
    background: #0f172a !important;
}

body.dark .h-\[calc\(100vh-1\.5rem\)\] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* QR Code container dark theme */
body.dark #qrCodeContainerDesktop .bg-white {
    background: #000000 !important;
}

body.dark .qr-glow {
    box-shadow: 0 0 20px rgba(13, 148, 136, 0.3) !important;
}

body.dark #qrStatusDesktop {
    color: #94a3b8 !important;
}

/* Primary button and text dark theme */
body.dark .bg-primary {
    background: #0D9488 !important;
}

body.dark .text-primary-foreground {
    color: white !important;
}

body.dark .hover\:bg-primary\/90:hover {
    background: #0f766e !important;
}

body.dark .text-primary {
    color: #14b8a6 !important;
}

body.dark .text-2xl,
body.dark h1,
body.dark h2 {
    color: #f1f5f9 !important;
}

/* User dropdown hover fix */
body.dark .user-dropdown-item.hover\:bg-red-50:hover {
    background: #7f1d1d !important;
}

body.dark .hover\:text-red-700:hover {
    color: #fca5a5 !important;
}

body.dark .balance-badge {
    background: #0D9488 !important;
    color: white !important;
}

body.dark .user-avatar {
    background: linear-gradient(135deg, #0D9488, #14b8a6) !important;
}

/* VPS tab content - card border fix */
body.dark .vps-tab-content.card {
    border-color: #334155 !important;
}

body.dark .overflow-hidden {
    border-color: #334155 !important;
}

body.dark header {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #334155 !important;
}

body.dark .bg-primary\/10 {
    background: rgba(39, 222, 191, 0.15) !important;
}

body.dark .text-card-foreground {
    color: #f1f5f9 !important;
}

/* Teal Color for Buttons */
.btn-teal {
    background: #0D9488 !important;
}

.btn-teal:hover {
    background: #0f766e !important;
}

/* Apply teal to download buttons */
body .btn-primary[href*=".apk"],
body.dark .btn-primary[href*=".apk"] {
    background: #0D9488 !important;
}

body .btn-primary[href*=".apk"]:hover,
body.dark .btn-primary[href*=".apk"]:hover {
    background: #0f766e !important;
}

/* Language switcher dark theme */
body.dark button[onclick*="setLanguage"] {
    color: #94a3b8 !important;
}

body.dark button[onclick*="setLanguage"]:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark button[onclick*="setLanguage"].bg-background {
    background: #0D9488 !important;
    color: white !important;
    border-color: #0D9488 !important;
}

body.dark .bg-muted {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark .bg-accent {
    background: #334155 !important;
}

/* Text Classes - Readable in Dark Theme */
body.dark .text-xs.text-muted-foreground {
    color: #94a3b8 !important;
}

body.dark .text-sm.text-primary {
    color: #14b8a6 !important;
}

body.dark .text-sm.text-primary:hover {
    color: #5eead4 !important;
}

/* Group Items Hover - Prevent White Background */
body.dark .group.flex.items-center:hover,
body.dark .hover\:bg-accent:hover {
    background: #334155 !important;
}

body.dark .hover\:text-accent-foreground:hover {
    color: #f1f5f9 !important;
}

/* Background Transparent in Panel */
body.dark .bg-background {
    background: transparent !important;
}

/* Gradient Headers - Darker in Dark Theme */
body.dark .bg-gradient-to-r.from-blue-500.to-purple-600 {
    background: linear-gradient(to right, #1e3a8a, #581c87) !important;
}

/* Badge Colors - All bg-color variants readable */
body.dark .bg-green-100 {
    background: #065f46 !important;
}

body.dark .text-green-800 {
    color: #86efac !important;
}

body.dark .bg-yellow-100 {
    background: #713f12 !important;
}

body.dark .text-yellow-800 {
    color: #fde047 !important;
}

body.dark .bg-red-100 {
    background: #7f1d1d !important;
}

body.dark .text-red-800,
body.dark .text-red-900 {
    color: #fca5a5 !important;
}

body.dark .bg-blue-100 {
    background: #1e3a8a !important;
}

body.dark .text-blue-800 {
    color: #93c5fd !important;
}

body.dark .bg-purple-100 {
    background: #581c87 !important;
}

body.dark .text-purple-800 {
    color: #e9d5ff !important;
}

body.dark .bg-orange-100 {
    background: #7c2d12 !important;
}

body.dark .text-orange-800 {
    color: #fed7aa !important;
}

body.dark .bg-pink-100 {
    background: #831843 !important;
}

body.dark .text-pink-800 {
    color: #fbcfe8 !important;
}

/* Blue backgrounds */
body.dark .bg-blue-50 {
    background: #1e3a8a !important;
    color: #dbeafe !important;
}

/* Red notification blocks */
body.dark .bg-red-50 {
    background: #7f1d1d !important;
    border-color: #991b1b !important;
}

body.dark .border-red-200 {
    border-color: #991b1b !important;
}

body.dark .border-red-300 {
    border-color: #b91c1c !important;
}

body.dark .text-red-600 {
    color: #f87171 !important;
}

body.dark .text-gray-900,
body.dark .text-gray-800,
body.dark .text-gray-600 {
    color: #f1f5f9 !important;
}

/* Ensure all text-* classes are readable */
body.dark [class*="text-gray-"] {
    color: #f1f5f9 !important;
}

body.dark [class*="text-slate-"] {
    color: #f1f5f9 !important;
}

body.dark [class*="text-zinc-"] {
    color: #f1f5f9 !important;
}

/* Folder Navigation - Active State */
body.dark .folder-btn.active {
    background: #0D9488 !important;
    color: white !important;
}

body.dark .folder-btn.active .unread-count {
    background: white !important;
    color: #0D9488 !important;
}

body.dark .bg-black-foreground {
    background: white !important;
}

body.dark .text-primary-foreground {
    color: white !important;
}

/* Red buttons to green in dark theme */
body.dark .bg-red-600 {
    background: #0D9488 !important;
}

body.dark .hover\:bg-red-700:hover {
    background: #0f766e !important;
}

/* Fix bg-black to use primary color in light theme, stay primary in dark */
body.dark .bg-black {
    background: #0D9488 !important;
    color: white !important;
}

body.dark .hover\:bg-black\/90:hover {
    background: #0f766e !important;
}

/* Gradient buttons - darker variants */
body.dark .bg-gradient-to-r.from-yellow-500.to-orange-500 {
    background: linear-gradient(to right, #854d0e, #9a3412) !important;
}

/* Account Dropdown Menu - Complete Dark Theme */
body.dark #account-dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark .bg-popover {
    background: #1e293b !important;
}

body.dark .bg-black\/10 {
    background: rgba(13, 148, 136, 0.1) !important;
    border-color: rgba(13, 148, 136, 0.2) !important;
}

body.dark .border-black\/20 {
    border-color: rgba(13, 148, 136, 0.2) !important;
}

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

body.dark .dark\:bg-gray-900\/20 {
    background: #334155 !important;
}

/* Add border to bg-muted rounded-lg */
body.dark .bg-muted.rounded-lg {
    border: 1px solid #334155 !important;
}

/* Modal backgrounds - Fix green tint issue */
body.dark .fixed.inset-0.bg-black.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

body.dark .bg-white.rounded-lg.shadow-2xl,
body.dark .bg-white.rounded-lg {
    background: #1e293b !important;
}

body.dark .bg-white.border-b {
    background: #1e293b !important;
    border-color: #334155 !important;
}

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

body.dark .hover\:text-gray-600:hover {
    color: #f1f5f9 !important;
}

body.dark .bg-gray-100 {
    background: #334155 !important;
}

body.dark .text-gray-600,
body.dark .text-gray-700 {
    color: #f1f5f9 !important;
}

body.dark .border-gray-200,
body.dark .border-gray-300 {
    border-color: #334155 !important;
}

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

/* Tab buttons - Fix layout */
body.dark .tab-button.active {
    border-bottom-color: #0D9488 !important;
    color: #f1f5f9 !important;
}

body.dark .tab-button {
    border-bottom-color: transparent !important;
    color: #94a3b8 !important;
}

body.dark .tab-button:hover {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

body.dark .border-transparent {
    border-color: transparent !important;
}

body.dark .hover\:border-muted:hover {
    border-color: #334155 !important;
}

/* White text buttons - Make them green */
body.dark .inline-flex.text-white,
body.dark button.text-white,
body.dark a.text-white {
    background: #0D9488 !important;
}

body.dark .inline-flex.text-white:hover,
body.dark button.text-white:hover,
body.dark a.text-white:hover {
    background: #0f766e !important;
}

/* ==================== SWAGGER UI DARK THEME ==================== */

/* Main Swagger Container */
body.dark .swagger-ui {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Topbar */
body.dark .swagger-ui .topbar {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

/* Information Container */
body.dark .swagger-ui .information-container {
    background: #1e293b !important;
}

body.dark .swagger-ui .info .title,
body.dark .swagger-ui .opblock-tag {
    color: #f1f5f9 !important;
}

body.dark .swagger-ui .info .description {
    color: #94a3b8 !important;
}

/* Scheme Container & Servers */
body.dark .swagger-ui .scheme-container {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

body.dark .swagger-ui .servers select,
body.dark .swagger-ui select {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Authorize Button */
body.dark .swagger-ui .btn.authorize {
    background: #0D9488 !important;
    color: white !important;
    border-color: #0D9488 !important;
}

body.dark .swagger-ui .btn.authorize:hover {
    background: #0f766e !important;
}

/* Operation Blocks */
body.dark .swagger-ui .opblock {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark .swagger-ui .opblock.opblock-get {
    border-color: #0D9488 !important;
    background: rgba(13, 148, 136, 0.1) !important;
}

body.dark .swagger-ui .opblock.opblock-post {
    border-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

body.dark .swagger-ui .opblock.opblock-put {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.1) !important;
}

body.dark .swagger-ui .opblock.opblock-delete {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Operation Summary */
body.dark .swagger-ui .opblock-summary {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark .swagger-ui .opblock-summary-method {
    background: #0D9488 !important;
    color: white !important;
}

body.dark .swagger-ui .opblock-summary-get .opblock-summary-method {
    background: #0D9488 !important;
}

body.dark .swagger-ui .opblock-summary-post .opblock-summary-method {
    background: #3b82f6 !important;
}

body.dark .swagger-ui .opblock-summary-put .opblock-summary-method {
    background: #f59e0b !important;
}

body.dark .swagger-ui .opblock-summary-delete .opblock-summary-method {
    background: #ef4444 !important;
}

body.dark .swagger-ui .opblock-summary-path,
body.dark .swagger-ui .opblock-summary-description {
    color: #f1f5f9 !important;
}

/* Buttons and Controls */
body.dark .swagger-ui button,
body.dark .swagger-ui .btn {
    color: #f1f5f9 !important;
}

body.dark .swagger-ui .opblock-control-arrow svg {
    fill: #94a3b8 !important;
}

body.dark .swagger-ui .expand-operation svg {
    fill: #94a3b8 !important;
}

/* Models/Schemas Section */
body.dark .swagger-ui .models {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark .swagger-ui .model-container {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

body.dark .swagger-ui .model-box {
    background: #1e293b !important;
}

body.dark .swagger-ui .model-title {
    color: #f1f5f9 !important;
}

body.dark .swagger-ui .model-toggle {
    background: #334155 !important;
}

/* Tags Section */
body.dark .swagger-ui .opblock-tag-section {
    border-bottom: 1px solid #334155 !important;
}

body.dark .swagger-ui .opblock-tag {
    color: #f1f5f9 !important;
    border-bottom: 1px solid #334155 !important;
}

body.dark .swagger-ui .opblock-tag small {
    color: #94a3b8 !important;
}

/* Inputs and Textareas */
body.dark .swagger-ui input[type=text],
body.dark .swagger-ui input[type=password],
body.dark .swagger-ui input[type=email],
body.dark .swagger-ui textarea {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Tables */
body.dark .swagger-ui table {
    background: #1e293b !important;
}

body.dark .swagger-ui table thead tr {
    background: #334155 !important;
    border-bottom: 1px solid #475569 !important;
}

body.dark .swagger-ui table tbody tr {
    border-bottom: 1px solid #334155 !important;
}

body.dark .swagger-ui table th,
body.dark .swagger-ui table td {
    color: #f1f5f9 !important;
}

/* Code Blocks */
body.dark .swagger-ui pre,
body.dark .swagger-ui code {
    background: #0f172a !important;
    color: #86efac !important;
    border: 1px solid #334155 !important;
}

/* Links */
body.dark .swagger-ui a {
    color: #14b8a6 !important;
}

body.dark .swagger-ui a:hover {
    color: #5eead4 !important;
}

/* Response Section */
body.dark .swagger-ui .responses-wrapper {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark .swagger-ui .response-col_status {
    color: #f1f5f9 !important;
}

body.dark .swagger-ui .response-col_description {
    color: #94a3b8 !important;
}

/* Parameters */
body.dark .swagger-ui .parameters {
    background: #1e293b !important;
}

body.dark .swagger-ui .parameter__name,
body.dark .swagger-ui .parameter__type {
    color: #f1f5f9 !important;
}

body.dark .swagger-ui .parameter__in {
    color: #94a3b8 !important;
}

/* Execute Button */
body.dark .swagger-ui .btn.execute {
    background: #0D9488 !important;
    color: white !important;
    border-color: #0D9488 !important;
}

body.dark .swagger-ui .btn.execute:hover {
    background: #0f766e !important;
}

/* Wrapper */
body.dark .swagger-ui .wrapper {
    background: transparent !important;
}

/* No Margin Sections */
body.dark .swagger-ui .no-margin {
    background: transparent !important;
}

/* Lock Icons */
body.dark .swagger-ui .authorization__btn svg {
    fill: #94a3b8 !important;
}

body.dark .swagger-ui .authorization__btn svg.unlocked {
    fill: #86efac !important;
}

body.dark .swagger-ui .authorization__btn svg.locked {
    fill: #f87171 !important;
}

/* Copy to Clipboard */
body.dark .swagger-ui .copy-to-clipboard {
    background: #334155 !important;
}

body.dark .swagger-ui .copy-to-clipboard:hover {
    background: #475569 !important;
}

/* Version Badge */
body.dark .swagger-ui .version-stamp,
body.dark .swagger-ui .version {
    background: #334155 !important;
    color: #94a3b8 !important;
}

/* ==================== FIXES FOR HOVER AND UI ELEMENTS ==================== */

/* Fix hover text issue - prevent eraser-like effect */
body.dark .hover\:text-foreground\/80:hover {
    color: #f1f5f9 !important;
    opacity: 1 !important;
}

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

/* Fix upgrade modal - dark background and proper modal styling */
body.dark #upgrade-modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

body.dark #upgrade-modal .bg-background {
    background: #1e293b !important;
}

body.dark #upgrade-modal .border {
    border-color: #334155 !important;
}

body.dark #upgrade-modal .bg-blue-50 {
    background: rgba(59, 130, 246, 0.1) !important;
}

body.dark #upgrade-modal .text-blue-600 {
    color: #60a5fa !important;
}

body.dark #upgrade-modal .bg-yellow-50 {
    background: rgba(234, 179, 8, 0.1) !important;
}

body.dark #upgrade-modal .text-yellow-600 {
    color: #fbbf24 !important;
}

body.dark #upgrade-modal .bg-green-50 {
    background: rgba(34, 197, 94, 0.1) !important;
}

body.dark #upgrade-modal .text-green-600 {
    color: #4ade80 !important;
}

body.dark #upgrade-modal .bg-orange-50 {
    background: rgba(249, 115, 22, 0.1) !important;
}

body.dark #upgrade-modal .text-orange-600 {
    color: #fb923c !important;
}

body.dark #upgrade-modal .dark\:bg-blue-900\/20,
body.dark #upgrade-modal .dark\:bg-yellow-900\/20,
body.dark #upgrade-modal .dark\:bg-green-900\/20,
body.dark #upgrade-modal .dark\:bg-orange-900\/20 {
    background: rgba(13, 148, 136, 0.1) !important;
}

body.dark #upgrade-modal .dark\:text-blue-400,
body.dark #upgrade-modal .dark\:text-yellow-400,
body.dark #upgrade-modal .dark\:text-green-400,
body.dark #upgrade-modal .dark\:text-orange-400 {
    color: #14b8a6 !important;
}

/* Fix tab buttons - proper styling with background and better visibility */
body.dark .tab-button {
    background: transparent !important;
    border-bottom: 2px solid transparent !important;
    color: #94a3b8 !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    transition: all 0.2s ease !important;
}

body.dark .tab-button:hover {
    color: #f1f5f9 !important;
    background: rgba(13, 148, 136, 0.05) !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

body.dark .tab-button.active {
    background: rgba(13, 148, 136, 0.1) !important;
    border-bottom-color: #0D9488 !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
    margin-bottom: -2px !important;
}

/* Remove box outline from active tabs */
body.dark .tab-button.active.border-primary {
    border: none !important;
    border-bottom: 2px solid #0D9488 !important;
    box-shadow: none !important;
}

/* Make text-lg font-semibold readable */
body.dark .text-lg.font-semibold {
    color: #f1f5f9 !important;
}

/* Make text-xl font-semibold readable */
body.dark .text-xl.font-semibold {
    color: #f1f5f9 !important;
}

/* Fix user-trigger hover - prevent white background */
body.dark .user-trigger:hover {
    background: #334155 !important;
}

body.dark .user-trigger {
    background: transparent !important;
}

/* Set dark theme as default - prevent white flash on page transitions */
html {
    background: #0f172a;
}

/* Dark theme background */
body.dark {
    background: linear-gradient(to bottom right, #0f172a, #1e293b, #334155) !important;
}

/* Light theme background - restore normal light background */
body:not(.dark) {
    background: white !important;
}

/* Navigation active page - make text bolder and more visible */
body.dark nav a.text-foreground {
    font-weight: 700 !important;
    color: #f1f5f9 !important;
}

body.dark nav a.text-foreground\/60 {
    font-weight: 400 !important;
    color: #94a3b8 !important;
}

body.dark nav a.text-foreground:hover,
body.dark nav a.text-foreground\/60:hover {
    color: #14b8a6 !important;
}

/* Light theme - also make active page bolder */
nav a.text-foreground {
    font-weight: 700 !important;
}

nav a.text-foreground\/60 {
    font-weight: 400 !important;
}

/* Fix modal backdrop/overlay */
body.dark .fixed.inset-0.bg-background\/80.backdrop-blur-sm {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Fix all modals with white backgrounds */
body.dark .fixed.z-50.bg-background,
body.dark div[class*="bg-background"][class*="border"] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Light theme - Profile menu should have solid background */
body:not(.dark) #profileMenu {
    background: white !important;
    border: 1px solid #e5e7eb !important;
}

body:not(.dark) #profileMenu .bg-card {
    background: white !important;
}

body:not(.dark) #profileMenu .border-border {
    border-color: #e5e7eb !important;
}

body:not(.dark) #profileMenu .text-foreground {
    color: #111827 !important;
}

body:not(.dark) #profileMenu .text-muted-foreground {
    color: #6b7280 !important;
}

/* ===== Custom Scrollbar Styles ===== */

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

body.dark * {
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

*::-webkit-scrollbar-thumb:active {
    background: rgba(156, 163, 175, 0.6);
}

/* Dark theme scrollbar */
body.dark *::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4);
}

body.dark *::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.6);
}

body.dark *::-webkit-scrollbar-thumb:active {
    background: rgba(156, 163, 175, 0.7);
}

/* Special scrollbar for modal content */
#accountsList::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.3);
}

#accountsList::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 148, 136, 0.5);
}

body.dark #accountsList::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.4);
}

body.dark #accountsList::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 148, 136, 0.6);
}

/* Scrollbar for code/pre elements */
pre::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.3);
}

pre::-webkit-scrollbar-thumb:hover,
code::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 148, 136, 0.5);
}

body.dark pre::-webkit-scrollbar-thumb,
body.dark code::-webkit-scrollbar-thumb {
    background: rgba(13, 148, 136, 0.4);
}

body.dark pre::-webkit-scrollbar-thumb:hover,
body.dark code::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 148, 136, 0.6);
}