<?php
/*
 * ═══════════════════════════════════════════════════════════════
 *  darkmode.php  —  نظام الوضع الليلي المركزي
 *  الاستخدام: ضع هذا السطر في أي صفحة قبل </head> أو في بداية <body>
 *    <?php include 'darkmode.php'; ?>
 *
 *  يُدرج تلقائياً:
 *   - CSS variables للوضع الليلي (تعمل مع :root variables الموجودة)
 *   - زر التبديل العائم (يظهر أسفل زر القائمة)
 *   - JavaScript للحفظ في localStorage ومزامنة كل الصفحات
 * ═══════════════════════════════════════════════════════════════
 */
?>
<!-- ═══ DARK MODE SYSTEM ═══ -->
<style id="darkmode-styles">

/* ════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   تعمل على جميع الصفحات التي تستخدم نفس CSS variables
════════════════════════════════════════════════════ */
[data-theme="dark"] {

    /* ── خلفيات ── */
    --bg:         #0B0F1E !important;
    --surface:    #161D30 !important;
    --surface-2:  #1C2540 !important;
    --surface-3:  #232D4A !important;

    /* ── حدود ── */
    --border:     #2A3554 !important;

    /* ── نصوص ── */
    --text:       #E8EEFF !important;
    --text-2:     #9BAAC8 !important;
    --text-3:     #5A6888 !important;

    /* ── ألوان الحالات (خفيفة → داكنة) ── */
    --success-light:  #052E1E !important;
    --danger-light:   #2D0A0A !important;
    --warning-light:  #2A1A00 !important;
    --info-light:     #061828 !important;
    --sent-light:     #1A0E3A !important;
    --trash-light:    #1A0E3A !important;

    /* ── ظلال ── */
    --shadow-sm:  0 1px 4px rgba(0,0,0,.35) !important;
    --shadow-md:  0 4px 16px rgba(0,0,0,.50) !important;
    --shadow-lg:  0 10px 40px rgba(0,0,0,.65) !important;

    /* ── profits.php variables ── */
    --bg2:        #111827 !important;
    --surf:       #161D30 !important;
    --surf2:      #1C2540 !important;
    --surf3:      #232D4A !important;
    --bdr:        #2A3554 !important;
    --bdr2:       #354070 !important;
    --ink:        #E8EEFF !important;
    --ink2:       #C0CCEE !important;
    --ink3:       #8896C0 !important;
    --mut:        #5A6888 !important;
    --mut2:       #3D4E70 !important;
    --bluel:      #0F1E40 !important;
    --greenl:     #052E1E !important;
    --amberl:     #2A1A00 !important;
    --redl:       #2D0A0A !important;
    --purpl:      #1A0E3A !important;
    --teall:      #061E1A !important;
    --rosel:      #2D0812 !important;
}

/* ── عناصر تحتاج override مباشر (لا تستخدم variables) ── */
[data-theme="dark"] body {
    background: #0B0F1E !important;
    color: #E8EEFF !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .header,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .prod-card,
[data-theme="dark"] .dc-card,
[data-theme="dark"] .rate-card,
[data-theme="dark"] .kpi {
    background: #161D30 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] table,
[data-theme="dark"] .dt {
    background: #161D30 !important;
}

[data-theme="dark"] th {
    background: linear-gradient(135deg, #0C1229, #1E2D52) !important;
}

[data-theme="dark"] td {
    border-color: #2A3554 !important;
    color: #9BAAC8 !important;
}

[data-theme="dark"] tr:hover td {
    background: #1C2540 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #E8EEFF !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

[data-theme="dark"] .search-bar {
    border-color: #2A3554 !important;
    background: #161D30 !important;
}

[data-theme="dark"] .search-bar input {
    background: #161D30 !important;
    color: #E8EEFF !important;
}

[data-theme="dark"] .search-bar:focus-within {
    border-color: #3B82F6 !important;
}

/* ── Modal ── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .sr-box,
[data-theme="dark"] .eco-box,
[data-theme="dark"] .repl-box {
    background: #161D30 !important;
    color: #E8EEFF !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .sr-divider {
    border-color: #2A3554 !important;
}

[data-theme="dark"] .modal-footer {
    border-color: #2A3554 !important;
}

[data-theme="dark"] .close {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #9BAAC8 !important;
}

[data-theme="dark"] .close:hover {
    background: #2D0A0A !important;
    color: #EF4444 !important;
}

/* ── Forms ── */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #E8EEFF !important;
}

[data-theme="dark"] .customer-info-section,
[data-theme="dark"] .summary-section,
[data-theme="dark"] .item-row,
[data-theme="dark"] .pc-stat {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .item-attributes {
    background: #232D4A !important;
    border-color: #3B82F6 !important;
}

/* ── Export Menu ── */
[data-theme="dark"] .export-menu {
    background: #161D30 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .export-option {
    color: #E8EEFF !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .export-option:hover {
    background: #1C2540 !important;
    color: #3B82F6 !important;
}

[data-theme="dark"] .export-menu-header,
[data-theme="dark"] .export-date-section {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #5A6888 !important;
}

[data-theme="dark"] .export-date-row input {
    background: #232D4A !important;
    border-color: #2A3554 !important;
    color: #E8EEFF !important;
}

/* ── Bulk Toolbar ── */
[data-theme="dark"] .bulk-toolbar {
    background: linear-gradient(135deg, #1A0E3A, #1C2540) !important;
    border-color: #354070 !important;
}

[data-theme="dark"] .bulk-status-wrap select {
    background: #1C2540 !important;
    color: #E8EEFF !important;
    border-color: #354070 !important;
}

/* ── Product change section ── */
[data-theme="dark"] .product-change-section {
    background: #061828 !important;
    border-color: #0369A1 !important;
}

[data-theme="dark"] .variant-info-box {
    background: #0F1E40 !important;
    border-color: #1D4ED8 !important;
    color: #93C5FD !important;
}

/* ── Replacement Modal ── */
[data-theme="dark"] .repl-item-card {
    border-color: #2A3554 !important;
    background: #161D30 !important;
}

[data-theme="dark"] .repl-item-card:hover {
    border-color: #7C3AED !important;
    background: #1A0E3A !important;
}

[data-theme="dark"] .repl-same-product-box {
    background: #052E1E !important;
    border-color: #059669 !important;
}

[data-theme="dark"] .repl-product-card {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .repl-product-card:hover {
    border-color: #7C3AED !important;
    background: #1A0E3A !important;
}

[data-theme="dark"] .repl-product-card.selected-prod {
    border-color: #7C3AED !important;
    background: linear-gradient(135deg, #1A0E3A, #1C2540) !important;
}

[data-theme="dark"] .repl-variant-section {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .repl-attr-chip-btn {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #9BAAC8 !important;
}

[data-theme="dark"] .repl-attr-input,
[data-theme="dark"] .repl-variant-select,
[data-theme="dark"] .repl-search-box input,
[data-theme="dark"] .repl-notes textarea,
[data-theme="dark"] .repl-field input {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #E8EEFF !important;
}

[data-theme="dark"] .repl-selected-item {
    background: linear-gradient(135deg, #1A0E3A, #1C2540) !important;
    border-color: #5B21B6 !important;
}

[data-theme="dark"] .repl-log-card {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
}

/* ── SR Modal ── */
[data-theme="dark"] .sr-option {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .sr-option:hover,
[data-theme="dark"] .sr-option.selected-opt {
    background: #0F1E40 !important;
    border-color: #3B82F6 !important;
}

[data-theme="dark"] .sr-option-text strong {
    color: #E8EEFF !important;
}

/* ── Toast ── */
[data-theme="dark"] .toast-inner {
    background: #161D30 !important;
    border-color: #052E1E !important;
}

[data-theme="dark"] .toast-title {
    color: #E8EEFF !important;
}

[data-theme="dark"] .toast-message {
    color: #9BAAC8 !important;
}

/* ── Stat Cards ── */
[data-theme="dark"] .s-total .stat-icon { background: #0F1E40 !important; }
[data-theme="dark"] .s-today .stat-icon { background: #2A1A00 !important; }
[data-theme="dark"] .s-pending .stat-icon { background: #2A1A00 !important; }
[data-theme="dark"] .s-sent .stat-icon { background: #1A0E3A !important; }
[data-theme="dark"] .s-done .stat-icon { background: #052E1E !important; }
[data-theme="dark"] .s-revenue .stat-icon { background: #061828 !important; }

/* ── Phone Badge ── */
[data-theme="dark"] .phone-badge {
    background: #0F1E40 !important;
    border-color: #1D4ED8 !important;
    color: #93C5FD !important;
}

/* ── Tracking Badge ── */
[data-theme="dark"] .tracking-badge {
    background: #1A0E3A !important;
    border-color: #5B21B6 !important;
}

[data-theme="dark"] .tracking-badge a {
    color: #C4B5FD !important;
}

/* ── Company Badge ── */
[data-theme="dark"] .btn-copy {
    background: #0F1E40 !important;
    color: #93C5FD !important;
}

/* ── Status Select ── */
[data-theme="dark"] .status-select {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
}

/* ── Filter Bar (profits) ── */
[data-theme="dark"] .filter-bar {
    background: #161D30 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .period-btn {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #9BAAC8 !important;
}

[data-theme="dark"] .period-btn.active {
    background: #1D4ED8 !important;
    color: white !important;
    border-color: #1D4ED8 !important;
}

[data-theme="dark"] .custom-dates input[type="date"] {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    color: #E8EEFF !important;
}

/* ── Scrollbar in dark ── */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0B0F1E !important;
}

/* ── Page header في orders ── */
[data-theme="dark"] .header {
    background: #161D30 !important;
    border-color: #2A3554 !important;
}

[data-theme="dark"] .header h1 {
    color: #93C5FD !important;
}

/* ── Dark Mode Toggle Button ── */
#dm-toggle-btn {
    position: fixed;
    top: 72px;
    right: 15px;
    z-index: 850;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface, #fff);
    border: 2px solid var(--border, #e2e8f0);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    outline: none;
    user-select: none;
}

#dm-toggle-btn:hover {
    transform: scale(1.12) rotate(22deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-color: #3B82F6;
}

[data-theme="dark"] #dm-toggle-btn {
    background: #1C2540 !important;
    border-color: #2A3554 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

[data-theme="dark"] #dm-toggle-btn:hover {
    border-color: #3B82F6 !important;
}

/* Transition smooth على كل العناصر */
body,
.card, .header, .stat-card, .table-wrap, .chart-card,
.prod-card, .dc-card, .rate-card, .kpi, .filter-bar,
table, th, td, input, select, textarea,
.modal-content, .sr-box, .repl-box, .eco-box {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

</style>

<!-- Dark Mode Toggle Button -->
<button id="dm-toggle-btn" title="تبديل الوضع الليلي / Night Mode" onclick="dmToggle()">🌙</button>

<script>
// ════════════════════════════════════════════════════════════════
//  DARK MODE SYSTEM — darkmode.php
//  يعمل على جميع صفحات لوحة الإدارة
// ════════════════════════════════════════════════════════════════

(function() {
    'use strict';

    var STORAGE_KEY = 'adminDarkMode';
    var html        = document.documentElement;
    var btn         = null; // يُضبط بعد DOM

    /* ── تطبيق الثيم فوراً (قبل الرسم) لمنع الوميض ── */
    var saved = localStorage.getItem(STORAGE_KEY) || 'light';
    html.setAttribute('data-theme', saved);

    /* ── تحديث الزر ── */
    function updateBtn(theme) {
        var b = document.getElementById('dm-toggle-btn');
        if (b) b.textContent = (theme === 'dark') ? '☀️' : '🌙';
    }

    /* ── التبديل ── */
    window.dmToggle = function() {
        var current = html.getAttribute('data-theme') || 'light';
        var next    = (current === 'dark') ? 'light' : 'dark';
        html.setAttribute('data-theme', next);
        localStorage.setItem(STORAGE_KEY, next);
        updateBtn(next);

        /* مزامنة نفس المتصفح في تبويبات أخرى */
        try {
            window.dispatchEvent(new StorageEvent('storage', {
                key: STORAGE_KEY, newValue: next
            }));
        } catch(e) {}
    };

    /* ── مزامنة تبويبات المتصفح ── */
    window.addEventListener('storage', function(e) {
        if (e.key === STORAGE_KEY && e.newValue) {
            html.setAttribute('data-theme', e.newValue);
            updateBtn(e.newValue);
        }
    });

    /* ── بعد تحميل DOM: تحديث الزر ── */
    function onReady() {
        updateBtn(html.getAttribute('data-theme') || 'light');
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', onReady);
    } else {
        onReady();
    }

})();
</script>
<!-- ═══ END DARK MODE SYSTEM ═══ -->