/**
 * Dark Mode Global Styles
 * Applica stili dark mode a tutti i componenti
 *
 * MIGRATION NOTE: New components should use CSS custom properties from :root
 * (--color-bg, --color-surface, --color-text, etc.) which auto-switch via
 * the .dark {} block in style.css. This file is for legacy overrides of
 * components that still use hard-coded Tailwind classes (bg-white, text-gray-*).
 */

/* ============================================ */
/* LIGHT MODE - Explicit styles (no .dark class) */
/* ============================================ */

/* Ensure light mode has correct background colors */
html:not(.dark) body {
    background-color: var(--color-bg, #f8fafc) !important;
    color: var(--color-text, #0f172a) !important;
}

html:not(.dark) .bg-white,
html:not(.dark) .stat-card,
html:not(.dark) .chart-wrapper,
html:not(.dark) .section-card,
html:not(.dark) .content-card {
    background-color: #ffffff !important;
    color: #111827;
    border: 1px solid var(--color-border, #e2e8f0) !important;
}

html:not(.dark) .bg-gray-50 {
    background-color: var(--color-bg, #f8fafc) !important;
}

html:not(.dark) .bg-gray-100 {
    background-color: #f3f4f6 !important;
}

html:not(.dark) .bg-gray-800 {
    background-color: #1f2937 !important;
}

html:not(.dark) .text-gray-900 {
    color: #111827 !important;
}

html:not(.dark) .text-gray-100 {
    color: #f3f4f6 !important;
}

html:not(.dark) .border-gray-200 {
    border-color: #e5e7eb !important;
}

html:not(.dark) .border-gray-700 {
    border-color: #374151 !important;
}

/* ============================================ */
/* DARK MODE - Styles with .dark class */
/* ============================================ */

/* Body & Base - uses tokens from style.css .dark {} block */
.dark body {
    background-color: var(--color-bg) !important;
    color: var(--color-text);
}

.dark .bg-white {
    background-color: #1E293B !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark .bg-gray-50 {
    background-color: #0F172A !important;
}

.dark .bg-gray-100 {
    background-color: #1E293B !important;
}

/* Text Colors */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .text-gray-900 {
    color: #F8FAFC !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 .text-black {
    color: #F8FAFC !important;
}

/* Borders */
.dark .border-gray-200 {
    border-color: #334155 !important;
}

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

/* Cards */
.dark .section-card,
.dark .stat-card,
.dark .content-card,
.dark .card {
    background-color: #1E293B !important;
    /* Slate-800: clearly elevated from near-black body */
    border: 1px solid #334155 !important;
    /* Slate-700: clear edge definition */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.6) !important;
    /* Heavy drop shadow visible on dark bg */
}

/* Tables */
.dark table {
    color: #f3f4f6;
}

.dark thead {
    background-color: #374151 !important;
    color: #f3f4f6;
}

.dark tbody tr {
    border-color: #374151;
}

.dark tbody tr:hover {
    background-color: #374151 !important;
}

.dark tbody tr:nth-child(even) {
    background-color: #1f2937;
}

/* Input Fields */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark textarea,
.dark select {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Badges & Tags */
.dark .bg-blue-50 {
    background-color: #1e3a8a !important;
    color: #bfdbfe !important;
}

.dark .bg-purple-50 {
    background-color: #581c87 !important;
    color: #e9d5ff !important;
}

.dark .bg-green-50 {
    background-color: #166534 !important;
    color: #bbf7d0 !important;
}

.dark .bg-red-50 {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
}

.dark .bg-yellow-50 {
    background-color: #78350f !important;
    color: #fde68a !important;
}

.dark .bg-orange-50 {
    background-color: #7c2d12 !important;
    color: #fed7aa !important;
}

/* Buttons */
.dark .btn-secondary {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark .btn-secondary:hover {
    background-color: #4b5563 !important;
}

/* Modals */
.dark .modal-content {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .modal-header {
    border-bottom-color: #374151 !important;
}

.dark .modal-footer {
    border-top-color: #374151 !important;
}

/* Alerts */
.dark .bg-red-50 {
    background-color: #7f1d1d !important;
}

.dark .bg-green-50 {
    background-color: #166534 !important;
}

.dark .bg-blue-50 {
    background-color: #1e3a8a !important;
}

.dark .bg-yellow-50 {
    background-color: #78350f !important;
}

/* Dropdown Menus */
.dark .dropdown-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .dropdown-item {
    color: #f3f4f6 !important;
}

.dark .dropdown-item:hover {
    background-color: #374151 !important;
}

/* Code Blocks */
.dark pre,
.dark code {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* Scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Responsive Dark Mode Adjustments */
@media (max-width: 767px) {
    .dark .mobile-menu-toggle {
        background: #1f2937 !important;
        border-color: #374151 !important;
    }

    .dark .mobile-menu-toggle:hover {
        background: #374151 !important;
    }

    .dark .sidebar-overlay {
        background: rgba(0, 0, 0, 0.7) !important;
    }
}

/* Tablet Dark Mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .dark .content-card {
        padding: 1.25rem;
    }
}

/* Desktop Small Dark Mode */
@media (min-width: 1024px) and (max-width: 1280px) {
    .dark .content-card {
        padding: 1.5rem;
    }
}


/* Quill Editor Dark Mode Support */
.dark .ql-toolbar {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
    border-bottom: 2px solid #0d9488 !important;
    color: #e5e7eb !important;
    padding: 8px 10px !important;
}

.dark .ql-container {
    background-color: #1e293b !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
    font-size: 1rem !important;
}

.dark .ql-stroke {
    stroke: #d1d5db !important;
}

.dark .ql-fill {
    fill: #d1d5db !important;
}

.dark .ql-toolbar button:hover .ql-stroke,
.dark .ql-toolbar button.ql-active .ql-stroke {
    stroke: #99f6e4 !important;
}

.dark .ql-toolbar button:hover .ql-fill,
.dark .ql-toolbar button.ql-active .ql-fill {
    fill: #99f6e4 !important;
}

.dark .ql-picker {
    color: #e5e7eb !important;
}

.dark .ql-picker-label:hover,
.dark .ql-picker-label.ql-active {
    color: #99f6e4 !important;
}

.dark .ql-picker-options {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
}

.dark .ql-editor {
    min-height: 200px;
    font-size: 1rem;
    line-height: 1.6;
    color: #e5e7eb !important;
}

.dark .ql-editor p,
.dark .ql-editor li,
.dark .ql-editor span {
    color: #e5e7eb !important;
}

.dark .ql-editor.ql-blank::before {
    color: #9ca3af !important;
    font-style: italic;
}

/* Transfer time section - better dark mode contrast */
.dark .transfer-time-display {
    color: #e5e7eb !important;
}


/* TomSelect Dark Mode Support */
.dark .ts-wrapper .ts-control {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
    background-image: none !important;
}

.dark .ts-wrapper .ts-control>input {
    color: #f3f4f6 !important;
}

.dark .ts-wrapper.focus .ts-control {
    box-shadow: none !important;
    border-color: #2dd4bf !important;
    /* purple-500 */
    ring: 2px solid #2dd4bf !important;
}

.dark .ts-dropdown {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

.dark .ts-dropdown .option {
    color: #d1d5db !important;
}

.dark .ts-dropdown .active,
.dark .ts-dropdown .option:hover {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

.dark .ts-dropdown .optgroup-header {
    background-color: #374151 !important;
    color: #9ca3af !important;
}

.dark .ts-wrapper.single .ts-control::after {
    border-color: #9ca3af transparent transparent transparent !important;
}

.dark .ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent #9ca3af transparent !important;
}