/* ========================================
   UNIVERSAL DARK MODE FOR ALL TOOLS
   Add this to your main CSS file
   ======================================== */

/* Base Dark Mode - Tools Container */
html.dark-theme .img-convert-pro-tool,
html.dark-theme .pdf-tool-container,
html.dark-theme .tool-wrapper,
html.dark-theme .tool-main {
    background-color: transparent !important;
}

/* Tool Controls Section */
html.dark-theme .tool-controls,
html.dark-theme .controls-section,
html.dark-theme .tool-control-panel {
    background-color: #2a2a2a !important;
    border-color: #d32f2f !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Buttons - Primary (Red) */
html.dark-theme .pdf-btn,
html.dark-theme .primary-btn,
html.dark-theme .merge-btn,
html.dark-theme .convert-btn,
html.dark-theme .compress-btn,
html.dark-theme .submit-btn {
    background: #d32f2f !important;
    color: white !important;
}

html.dark-theme .pdf-btn:disabled,
html.dark-theme .primary-btn:disabled {
    background: #3a3a3a !important;
    color: #888 !important;
}

/* Secondary Buttons (Outline) */
html.dark-theme .add-more-btn,
html.dark-theme .secondary-btn,
html.dark-theme .reset-btn,
html.dark-theme .clear-btn {
    background: #3a3a3a !important;
    color: #d32f2f !important;
    border-color: #d32f2f !important;
}

html.dark-theme .add-more-btn:hover,
html.dark-theme .secondary-btn:hover {
    background: #4a4a4a !important;
}

/* Status / Info Text */
html.dark-theme .file-status-text,
html.dark-theme .status-text,
html.dark-theme .info-text {
    background: #2a2a2a !important;
    color: #ccc !important;
    border-color: #d32f2f !important;
}

/* Preview / Result Containers */
html.dark-theme .live-preview-container,
html.dark-theme .preview-area,
html.dark-theme .result-container,
html.dark-theme .output-area {
    background: #1e1e1e !important;
    border-color: #3a3a3a !important;
}

/* File List / Items */
html.dark-theme .file-list,
html.dark-theme .file-item,
html.dark-theme .list-item,
html.dark-theme .tool-list-item {
    background: #2a2a2a !important;
    border-color: #3a3a3a !important;
}

html.dark-theme .file-name,
html.dark-theme .item-title,
html.dark-theme .tool-name {
    color: #e0e0e0 !important;
}

html.dark-theme .file-size,
html.dark-theme .item-meta,
html.dark-theme .tool-meta {
    color: #999 !important;
}

/* Remove / Delete Buttons */
html.dark-theme .remove-btn,
html.dark-theme .delete-btn,
html.dark-theme .close-btn {
    color: #888 !important;
}

html.dark-theme .remove-btn:hover,
html.dark-theme .delete-btn:hover {
    background: #3a2a2a !important;
    color: #d32f2f !important;
}

/* Success / Error Messages */
html.dark-theme .success-message,
html.dark-theme .alert-success {
    background: #1a3a1a !important;
    color: #4caf50 !important;
    border-color: #2e7d32 !important;
}

html.dark-theme .error-message,
html.dark-theme .alert-danger {
    background: #3a1a1a !important;
    color: #f44336 !important;
    border-color: #c62828 !important;
}

/* Download / Action Links */
html.dark-theme .download-link,
html.dark-theme .action-link {
    background: #27ae60 !important;
    color: white !important;
}

html.dark-theme .download-link:hover {
    background: #1a7a3a !important;
}

/* Initial Placeholder / Empty State */
html.dark-theme #initialMessage,
html.dark-theme .empty-state,
html.dark-theme .placeholder {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a !important;
    color: #666 !important;
}

html.dark-theme #initialMessage i,
html.dark-theme .empty-state i {
    color: #444 !important;
}

/* Progress Bar */
html.dark-theme .progress-wrapper,
html.dark-theme .progress-container {
    background-color: #3a3a3a !important;
}

html.dark-theme .progress-bar {
    background-color: #d32f2f !important;
}

html.dark-theme #progressText {
    color: #d32f2f !important;
}

/* How To / Accordion Section */
html.dark-theme .how-to-wrapper {
    border-color: #3a3a3a !important;
}

html.dark-theme .how-to-btn {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html.dark-theme .how-to-btn:hover {
    background: #2a2a2a !important;
}

html.dark-theme .how-to-content {
    background: #2a2a2a !important;
    border-top-color: #3a3a3a !important;
    color: #ccc !important;
}

/* Dropzone / Drag Area */
html.dark-theme .dropzone,
html.dark-theme .drag-area {
    background: #1e1e1e !important;
    border-color: #d32f2f !important;
}

html.dark-theme .dropzone p,
html.dark-theme .drag-area p {
    color: #888 !important;
}

/* Input Fields (Text, Number, etc.) */
html.dark-theme input[type="text"],
html.dark-theme input[type="number"],
html.dark-theme input[type="email"],
html.dark-theme textarea,
html.dark-theme select {
    background: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}

html.dark-theme input:focus,
html.dark-theme textarea:focus,
html.dark-theme select:focus {
    border-color: #d32f2f !important;
    outline: none !important;
}

/* Range Slider */
html.dark-theme input[type="range"] {
    background: #3a3a3a !important;
}

html.dark-theme input[type="range"]::-webkit-slider-thumb {
    background: #d32f2f !important;
}

/* Checkbox & Radio */
html.dark-theme input[type="checkbox"],
html.dark-theme input[type="radio"] {
    accent-color: #d32f2f !important;
}

/* Cards / Grid Items */
html.dark-theme .tool-card,
html.dark-theme .result-card,
html.dark-theme .option-card {
    background: #1e1e1e !important;
    border-color: #3a3a3a !important;
}

html.dark-theme .tool-card h3,
html.dark-theme .result-card h4 {
    color: #e0e0e0 !important;
}

/* Tabs */
html.dark-theme .tab-button {
    background: #1e1e1e !important;
    color: #888 !important;
    border-color: #3a3a3a !important;
}

html.dark-theme .tab-button.active {
    background: #d32f2f !important;
    color: white !important;
}

/* Modal / Popup */
html.dark-theme .modal-content,
html.dark-theme .popup-content {
    background: #1e1e1e !important;
    border-color: #3a3a3a !important;
}

html.dark-theme .modal-header,
html.dark-theme .popup-header {
    border-bottom-color: #3a3a3a !important;
}

/* Scrollbar for all containers */
html.dark-theme ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html.dark-theme ::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}

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

html.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #b71c1c;
}