/* =====================================================================
   نظام التصميم الموحّد — العالمية | Orders System
   مصدر واحد للألوان والمكوّنات (فاتح + ليلي). يُحمّل بعد style.css.
   اللون الأساسي: #00aaff — أنيميشن سريع وأنيق (150–250ms).
   ===================================================================== */

:root {
    /* الألوان الأساسية */
    --primary:        #00aaff;
    --primary-strong: #0090e0;
    --primary-soft:   rgba(0, 170, 255, 0.12);
    --primary-grad:   linear-gradient(135deg, #00aaff, #0077dd);

    /* الأسطح والخلفيات (الوضع الفاتح) */
    --bg:        #eef2f6;
    --surface:   #ffffff;   /* البطاقات */
    --surface-2: #f6f8fb;   /* خلفية ثانوية */
    --surface-3: #eaeef3;   /* أزرار/حقول ثانوية */

    /* النصوص */
    --text:        #1f2733;
    --text-muted:  #6b7785;
    --text-invert: #ffffff;

    /* الحدود والظلال */
    --border:    #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --shadow:    0 6px 20px rgba(16,24,40,.08);
    --shadow-lg: 0 18px 40px rgba(16,24,40,.16);

    /* الحالات */
    --success: #16a34a;
    --warning: #f59e0b;
    --danger:  #e11d48;
    --info:    #00aaff;

    /* الأبعاد والحركة */
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;
    --t-fast: .16s cubic-bezier(.4,0,.2,1);
    --t:      .24s cubic-bezier(.4,0,.2,1);

    /* السايدبار (داكن دائماً) */
    --side-bg:     #0f1623;
    --side-bg-2:   #15203150;
    --side-text:   #c7d2e0;
    --side-active: var(--primary);
}

[data-theme="dark"] {
    --bg:        #0b1018;
    --surface:   #131b27;
    --surface-2: #18222f;
    --surface-3: #1f2b3a;
    --text:        #e6edf5;
    --text-muted:  #93a1b3;
    --border:    #243140;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow:    0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
    --primary-soft: rgba(0, 170, 255, 0.16);
    --side-bg:   #0a0f17;
}

/* ===================== الأساس ===================== */
html { scroll-behavior: smooth; }
body {
    background: var(--bg) !important;
    color: var(--text);
    transition: background var(--t), color var(--t);
}
* { -webkit-tap-highlight-color: transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: padding-box; }

a { color: var(--primary); }

/* ===================== البطاقات ===================== */
.card {
    background: var(--surface) !important;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), transform var(--t), border-color var(--t), background var(--t);
    animation: th-fade-up .4s both;
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
    color: var(--text);
    font-weight: 800;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

/* ===================== الأزرار ===================== */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 700;
    border: 1px solid transparent;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
    will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary, .btn.btn-primary { background: var(--primary-grad) !important; color: #fff !important; }
.btn-success { background: var(--success) !important; color:#fff !important; }
.btn-warning { background: var(--warning) !important; color:#1f2733 !important; }
.btn-danger  { background: var(--danger) !important;  color:#fff !important; }
.btn-secondary { background: var(--surface-3) !important; color: var(--text) !important; border-color: var(--border); }

/* ===================== الحقول ===================== */
.form-control, input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
label { color: var(--text); }
::placeholder { color: var(--text-muted); opacity: 1; }

/* ===================== الجداول ===================== */
.table, .responsive-table { color: var(--text); }
.table th, .responsive-table th {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-bottom: 2px solid var(--border) !important;
}
.table td, .responsive-table td { border-bottom: 1px solid var(--border) !important; }
.table tr:hover td, .responsive-table tr:hover { background: var(--primary-soft) !important; }

/* ===================== شارات الحالة ===================== */
.status { border-radius: 20px; font-weight: 700; letter-spacing: .2px; }

/* ===================== بطاقات الإحصاء / الوصول السريع ===================== */
.stat-card, .assembly-card, .order-card, .action-card {
    background: var(--surface) !important;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stat-card:hover, .action-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary); }

/* ===================== المودال ===================== */
.modal-content {
    background: var(--surface) !important;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: th-pop .26s cubic-bezier(.34,1.56,.64,1);
}

/* ===================== الشريط العلوي للوحات البسيطة ===================== */
.top-bar { background: var(--side-bg) !important; }

/* ===================== صفحة الدخول ===================== */
.login-container { background: var(--bg) !important; transition: background var(--t); }
.login-box {
    background: var(--surface) !important;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius-lg) !important;
    animation: th-pop .4s cubic-bezier(.34,1.4,.64,1);
}
.login-box h2 { color: var(--text) !important; }

/* ===================== زر تبديل الوضع ===================== */
.theme-toggle {
    position: fixed; bottom: 22px; left: 22px; z-index: 9999;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--primary); cursor: pointer; font-size: 19px;
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--t), background var(--t), color var(--t);
}
.theme-toggle:hover { transform: translateY(-3px) rotate(-12deg); }
.theme-toggle .fa-sun { display: none; }
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
[data-theme="dark"] .theme-toggle .fa-sun  { display: inline; }

/* ===================== مفتاح التبديل (toggle switch) ===================== */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: 26px; transition: background var(--t-fast);
}
.toggle-slider::before {
    content: ""; position: absolute; height: 20px; width: 20px; right: 3px; top: 2px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform var(--t-fast);
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(-20px); }
.toggle-switch input:disabled + .toggle-slider { opacity: .55; cursor: wait; }

/* ===================== أنيميشن ===================== */
@keyframes th-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes th-pop     { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* دخول متدرّج خفيف لعناصر الشبكات */
.stat-card { animation: th-fade-up .45s both; }
.stat-card:nth-child(2){ animation-delay:.05s } .stat-card:nth-child(3){ animation-delay:.10s }
.stat-card:nth-child(4){ animation-delay:.15s } .stat-card:nth-child(5){ animation-delay:.20s }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================== التخطيط العام للوحة الإدارة ===================== */
.content { background: var(--bg) !important; color: var(--text); transition: background var(--t); }
.mobile-header { background: var(--surface) !important; border-bottom: 1px solid var(--border); }

/* ===================== لمسات الوضع الليلي على عناصر مكتوبة inline ===================== */
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] hr { border-color: var(--border); }
[data-theme="dark"] .modal { background: rgba(0,0,0,.6); }
[data-theme="dark"] .table, [data-theme="dark"] .responsive-table { color: var(--text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] .card-header { color: var(--text); }