/* ========================================
   MIKROTIK GENERATOR - DARK MODE STYLES
   MikroTik RouterOS Script Generator Tools
   ======================================== */

/* Note: Mikrotik pages have inline styles in the layout
   These styles provide additional dark mode support */

/* ===== GENERATOR CONTAINER ===== */
body:not(.light-mode) .generator-container {
    background: var(--dark-bg);
    color: var(--dark-text);
}

body.light-mode .generator-container {
    background: var(--light-bg);
    color: var(--light-text);
}

/* ===== TOOL CARDS ===== */
body:not(.light-mode) .tool-card {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

body.light-mode .tool-card {
    background: var(--light-surface);
    border: 1px solid var(--light-border);
}

body:not(.light-mode) .tool-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

body.light-mode .tool-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* ===== SCRIPT OUTPUT ===== */
body:not(.light-mode) .script-output {
    background: #1a1f2e;
    border: 1px solid var(--dark-border);
    color: #e2e8f0;
}

body.light-mode .script-output {
    background: #f8f9fa;
    border: 1px solid var(--light-border);
    color: #1e293b;
}

body:not(.light-mode) .script-output pre,
body:not(.light-mode) .script-output code {
    background: #1a1f2e;
    color: #e2e8f0;
}

body.light-mode .script-output pre,
body.light-mode .script-output code {
    background: #f8f9fa;
    color: #1e293b;
}

/* ===== FORM SECTIONS ===== */
body:not(.light-mode) .form-section {
    background: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

body.light-mode .form-section {
    background: var(--light-surface);
    border: 1px solid var(--light-border);
}

body:not(.light-mode) .form-section .form-label {
    color: var(--dark-text);
}

body.light-mode .form-section .form-label {
    color: var(--light-text);
}

body:not(.light-mode) .form-section .form-control {
    background: var(--dark-surface-light);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.light-mode .form-section .form-control {
    background: var(--light-surface);
    border-color: var(--light-border);
    color: var(--light-text);
}

body:not(.light-mode) .form-section .form-control:focus {
    background: var(--dark-surface);
    border-color: var(--primary);
    color: var(--dark-text);
}

body.light-mode .form-section .form-control:focus {
    background: var(--light-surface);
    border-color: var(--primary);
    color: var(--light-text);
}

/* ===== ACCORDION ===== */
body:not(.light-mode) .accordion-item {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

body.light-mode .accordion-item {
    background: var(--light-surface);
    border-color: var(--light-border);
}

body:not(.light-mode) .accordion-button {
    background: var(--dark-surface-light);
    color: var(--dark-text);
}

body.light-mode .accordion-button {
    background: var(--light-surface-dark);
    color: var(--light-text);
}

body:not(.light-mode) .accordion-button:not(.collapsed) {
    background: var(--dark-surface-light);
    color: var(--primary);
}

body.light-mode .accordion-button:not(.collapsed) {
    background: var(--light-surface-dark);
    color: var(--primary);
}

body:not(.light-mode) .accordion-body {
    background: var(--dark-surface);
    color: var(--dark-text);
}

body.light-mode .accordion-body {
    background: var(--light-surface);
    color: var(--light-text);
}

/* ===== TABS ===== */
body:not(.light-mode) .nav-tabs {
    border-bottom-color: var(--dark-border);
}

body.light-mode .nav-tabs {
    border-bottom-color: var(--light-border);
}

body:not(.light-mode) .nav-tabs .nav-link {
    color: var(--dark-text-secondary);
}

body.light-mode .nav-tabs .nav-link {
    color: var(--light-text-secondary);
}

body:not(.light-mode) .nav-tabs .nav-link.active {
    background: var(--dark-surface);
    border-color: var(--dark-border) var(--dark-border) var(--dark-surface);
    color: var(--primary);
}

body.light-mode .nav-tabs .nav-link.active {
    background: var(--light-surface);
    border-color: var(--light-border) var(--light-border) var(--light-surface);
    color: var(--primary);
}

/* ===== TEMPLATE SELECTOR ===== */
body:not(.light-mode) .template-item {
    background: var(--dark-surface);
    border: 2px solid var(--dark-border);
}

body.light-mode .template-item {
    background: var(--light-surface);
    border: 2px solid var(--light-border);
}

body:not(.light-mode) .template-item:hover {
    border-color: var(--primary);
    background: var(--dark-surface-light);
}

body.light-mode .template-item:hover {
    border-color: var(--primary);
    background: var(--light-surface-dark);
}

body:not(.light-mode) .template-item.selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

body.light-mode .template-item.selected {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

/* ===== CODE PREVIEW ===== */
body:not(.light-mode) .code-preview {
    background: #1a1f2e;
    border: 1px solid var(--dark-border);
}

body.light-mode .code-preview {
    background: #f8f9fa;
    border: 1px solid var(--light-border);
}

/* ===== COPY BUTTON ===== */
body:not(.light-mode) .copy-btn {
    background: var(--dark-surface-light);
    color: var(--dark-text);
}

body.light-mode .copy-btn {
    background: var(--light-surface-dark);
    color: var(--light-text);
}

body:not(.light-mode) .copy-btn:hover {
    background: var(--primary);
    color: white;
}

body.light-mode .copy-btn:hover {
    background: var(--primary);
    color: white;
}

/* ===== HELP TEXT ===== */
body:not(.light-mode) .help-text {
    color: var(--dark-text-secondary);
}

body.light-mode .help-text {
    color: var(--light-text-secondary);
}

/* ===== FEATURE BADGES ===== */
body:not(.light-mode) .feature-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

body.light-mode .feature-badge {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}