/**
 * Delinea Pre-Requisites Generator - Dark Mode Styles
 * Version 4.1.3
 */

/* Dark Mode Variables */
body.dark-mode {
    --primary-color: #4A47A3;
    --secondary-color: #00FF88;
    --accent-color: #00FF88;
    --background-color: #0D1117;
    --surface-color: #161B22;
    --text-primary: #E6EDF3;
    --text-secondary: #8B949E;
    --border-color: #30363D;
    --error-color: #F85149;
    --success-color: #3FB950;
    --warning-color: #D29922;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
    
    /* Categories page specific variables */
    --bg-card: #161B22;
    --bg-header: #21262D;
    --bg-hover: #21262D;
    --bg-selected: rgba(0, 255, 136, 0.1);
    --bg-input: #0D1117;
    --badge-bg: #30363D;
    --badge-text: #E6EDF3;
    --link-color: #58A6FF;
    --btn-edit-bg: rgba(56, 139, 253, 0.15);
    --btn-edit-color: #58A6FF;
    --btn-edit-hover: rgba(56, 139, 253, 0.25);
    --btn-delete-bg: rgba(248, 81, 73, 0.15);
    --btn-delete-color: #F85149;
    --btn-delete-hover: rgba(248, 81, 73, 0.25);
    --bg-button-secondary: #21262D;
    --bg-button-secondary-hover: #30363D;
    
    /* General body styles */
    background-color: var(--background-color);
    color: var(--text-primary);
}

/* Dark Mode Header */
body.dark-mode .header {
    background: linear-gradient(135deg, #1E1B4B 0%, #0D0B1E 100%);
}

/* Dark Mode Inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
    background: var(--surface-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-secondary);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

/* Dark Mode Buttons */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2D2A5B 100%);
}

body.dark-mode .btn-outline {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

body.dark-mode .btn-outline:hover {
    background: var(--secondary-color);
    color: var(--background-color);
}

/* Dark Mode Categories */
body.dark-mode .category {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .category-header {
    background: linear-gradient(135deg, #1E1B4B 0%, #0D0B1E 100%);
}

body.dark-mode .option-item:hover {
    background: var(--background-color);
}

/* Dark Mode Tables */
body.dark-mode .data-table th {
    background: var(--background-color);
}

body.dark-mode .data-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Cards */
body.dark-mode .card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .card-header {
    border-bottom-color: var(--border-color);
}

/* Dark Mode Modals */
body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .modal {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

/* Dark Mode Alerts */
body.dark-mode .alert-success {
    background: rgba(63, 185, 80, 0.15);
    color: #3FB950;
    border-color: rgba(63, 185, 80, 0.3);
}

body.dark-mode .alert-error {
    background: rgba(248, 81, 73, 0.15);
    color: #F85149;
    border-color: rgba(248, 81, 73, 0.3);
}

body.dark-mode .alert-warning {
    background: rgba(210, 153, 34, 0.15);
    color: #D29922;
    border-color: rgba(210, 153, 34, 0.3);
}

body.dark-mode .alert-info {
    background: rgba(56, 139, 253, 0.15);
    color: #58A6FF;
    border-color: rgba(56, 139, 253, 0.3);
}

/* Dark Mode Badges */
body.dark-mode .badge-viewer {
    background: var(--border-color);
    color: var(--text-primary);
}

/* Dark Mode Stat Cards */
body.dark-mode .stat-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .stat-value {
    color: var(--secondary-color);
}

/* Dark Mode Customer/Templates Sections */
body.dark-mode .customer-section,
body.dark-mode .templates-section {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

/* Dark Mode Footer */
body.dark-mode .footer a {
    color: var(--secondary-color);
}

/* Dark Mode Page Header */
body.dark-mode .page-header h2 {
    color: var(--text-primary);
}

/* Dark Mode Checkbox Accent */
body.dark-mode .option-item input[type="checkbox"] {
    accent-color: var(--secondary-color);
}

/* Dark Mode Scrollbar */
body.dark-mode::-webkit-scrollbar {
    width: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--background-color);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Categories Page Dark Mode Specific Styles */
body.dark-mode .categories-page {
    background: var(--background-color);
}

body.dark-mode .categories-page .page-title {
    border-bottom-color: var(--border-color);
}

body.dark-mode .categories-page .page-title h2 {
    color: var(--text-primary);
}

body.dark-mode .categories-list {
    background: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .categories-list h3 {
    background: var(--bg-header);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

body.dark-mode .category-item {
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .category-item:hover {
    background: var(--bg-hover);
}

body.dark-mode .category-item.active {
    background: var(--bg-selected);
}

body.dark-mode .category-name span {
    color: var(--text-primary);
}

body.dark-mode .option-count {
    background: var(--badge-bg);
    color: var(--badge-text);
}

body.dark-mode .options-panel {
    background: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-mode .options-header {
    background: var(--bg-header);
    border-bottom-color: var(--border-color);
}

body.dark-mode .options-header h3 {
    color: var(--text-primary);
}

body.dark-mode .option-item {
    border-bottom-color: var(--border-color);
}

body.dark-mode .option-item:hover {
    background: var(--bg-hover);
}

body.dark-mode .option-name {
    color: var(--text-primary);
}

body.dark-mode .option-desc {
    color: var(--text-secondary);
}

body.dark-mode .option-url a {
    color: var(--link-color);
}

body.dark-mode .empty-state {
    color: var(--text-secondary);
}

body.dark-mode .btn-icon.edit {
    background: var(--btn-edit-bg);
    color: var(--btn-edit-color);
}

body.dark-mode .btn-icon.edit:hover {
    background: var(--btn-edit-hover);
}

body.dark-mode .btn-icon.delete {
    background: var(--btn-delete-bg);
    color: var(--btn-delete-color);
}

body.dark-mode .btn-icon.delete:hover {
    background: var(--btn-delete-hover);
}

body.dark-mode .move-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.dark-mode .move-btn:hover {
    background: var(--bg-hover);
}

body.dark-mode .move-btn:disabled {
    opacity: 0.3;
}

/* Modal Dark Mode for Categories */
body.dark-mode .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

body.dark-mode .modal-header {
    border-bottom-color: var(--border-color);
}

body.dark-mode .modal-header h3 {
    color: var(--text-primary);
}

body.dark-mode .modal-close {
    color: var(--text-secondary);
}

body.dark-mode .modal-close:hover {
    color: var(--text-primary);
}

body.dark-mode .modal-footer {
    border-top-color: var(--border-color);
}

body.dark-mode .form-group label {
    color: var(--text-primary);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    border-color: var(--accent-color);
}

body.dark-mode .btn-secondary {
    background: var(--bg-button-secondary);
    color: var(--text-primary);
}

body.dark-mode .btn-secondary:hover {
    background: var(--bg-button-secondary-hover);
}

body.dark-mode .toast.success {
    background: #238636;
}

body.dark-mode .toast.error {
    background: #da3633;
}

/* Login Page Dark Mode */
body.dark-mode.login-page {
    background: linear-gradient(135deg, #0D0B1E 0%, #1E1B4B 50%, #0D0B1E 100%);
}

body.dark-mode .login-container {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .login-header {
    background: linear-gradient(135deg, #1E1B4B 0%, #0D0B1E 100%);
}

/* Theme Toggle Icon Colors */
body.dark-mode .theme-toggle-btn {
    color: var(--secondary-color);
}

/* Transitions for smooth theme switching */
body,
.header,
.card,
.category,
.modal,
input,
textarea,
select,
.btn,
.alert,
.stat-card,
.customer-section,
.templates-section,
.footer,
.data-table th,
.data-table td,
.option-item {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}