/* /includes/theme.css
   ═══════════════════════════════════════════════════════════════
   الوضع الفاتح للنظام - مطابق لهوية تطبيق المرافقات حرفياً.
   الوضع الداكن (الافتراضي) ما إله ولا سطر هون: كل ألوان الصفحات
   مكتوبة كـ var(--lt-xxx, اللون الأصلي)، فبالداكن بتضل ألوانها الأصلية،
   وبالفاتح بتاخد القيم اللي تحت.

   ألوان التطبيق:  الخلفية #F6F8F7 · الكروت #FFFFFF بحد #ECF0EF
   النص #1C272B · الثانوي #76838A · تيل #00A8A2 / #00817C / #E4F5F4
   ذهبي #C5B156 / #7D6A1C / #F6F1DC · أحمر #B42318 / #FEF1EF
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
    color-scheme: light;

    /* الأسطح والخلفيات */
    --lt-bg1: #F6F8F7;
    --lt-bg2: #F6F8F7;
    --lt-surf: 255,255,255;          /* الكروت والنوافذ: أبيض */
    --lt-w: 20,66,60;                /* الشفافيات: بتعطي #ECF0EF و #E1E7E6 متل التطبيق */
    --lt-back: 4,12,18;              /* التعتيم خلف النوافذ (نفس التطبيق) */
    --lt-back-k: .65;
    --lt-sh: 11,43,42;               /* ظلال التطبيق */
    --lt-sh-k: .16;
    --lt-cs: light;

    /* النصوص */
    --lt-ink: #1C272B;
    --lt-ink2: #3A494F;
    --lt-muted: #76838A;

    /* الألوان المساعدة */
    --lt-t-teal: #00817C;
    --lt-t-sky: #0369A1;
    --lt-t-amber: #7D6A1C;
    --lt-t-goldt: #7D6A1C;
    --lt-t-red: #B42318;
    --lt-t-green: #157A43;
    --lt-t-violet: #6D28D9;
    --lt-t-pink: #BE185D;

    /* متغيرات الصفحات نفسها */
    --gold: #9A8530;
    --primary: #00A8A2;
    --primary-2: #13BDB6;
}

/* ═══ الخلفية: سادة وهادية (#F6F8F7 لون خلفية التطبيق) ═══ */
html[data-theme="light"],
html[data-theme="light"] body {
    background: #F6F8F7 !important;
}
html[data-theme="light"] body { -webkit-font-smoothing: antialiased; color: #1C272B; }
html[data-theme="light"] ::selection { background: rgba(0,168,162,.22); }

/* ═══ السايدبار (مستقل عن sidebar.css، فما بيتأثر بنسخ المتصفح القديمة) ═══ */
html[data-theme="light"] .sidebar {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px) !important;
    border-left: 1px solid #ECF0EF !important;
    box-shadow: -14px 0 44px rgba(11,43,42,.06) !important;
}
/* الشعار الملوّن على كرت أبيض */
html[data-theme="light"] .brand .logo-wrap {
    width: 176px !important; height: auto !important;
    padding: 16px 18px 12px !important;
    border-radius: 26px !important;
    background: #FFFFFF !important;
    border: 1px solid #ECF0EF !important;
    box-shadow: 0 14px 34px rgba(11,43,42,.08) !important;
}
html[data-theme="light"] .brand .logo-wrap img { width: 100%; max-height: none; }
html[data-theme="light"] .brand h2 { color: #1C272B !important; font-size: 15px !important; margin-top: 4px; }
html[data-theme="light"] .brand p  { color: #76838A !important; }

html[data-theme="light"] .sidebar .menu a,
html[data-theme="light"] .sidebar .menu-group-toggle {
    color: #1C272B !important;
    background: transparent;
    border-color: transparent;
    border-radius: 16px !important;
}
html[data-theme="light"] .sidebar .menu-group-toggle { font-weight: 700 !important; }
html[data-theme="light"] .sidebar .menu a:hover,
html[data-theme="light"] .sidebar .menu-group-toggle:hover {
    background: #F1F6F5 !important;
    border-color: #E6EEEC !important;
    color: #00817C !important;
}
html[data-theme="light"] .sidebar .menu-group-arrow { color: #9AA8AE !important; }
html[data-theme="light"] .sidebar .menu-group-items a { color: #3A494F !important; font-weight: 500; }
html[data-theme="light"] .sidebar .menu-group-items a::before { background: #D5E0DE !important; }
/* الصفحة المفتوحة: نفس "الشريحة" التيل بالتطبيق */
html[data-theme="light"] .sidebar .menu a.active,
html[data-theme="light"] .sidebar .menu-group-items a.active {
    background: #E4F5F4 !important;
    border-color: #C7EAE7 !important;
    color: #00817C !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(0,168,162,.12) !important;
}
html[data-theme="light"] .sidebar .menu-group-items a.active::before { background: #00A8A2 !important; box-shadow: 0 0 0 4px rgba(0,168,162,.15); }
html[data-theme="light"] .sidebar .menu-group-toggle.has-active { color: #00817C !important; }
html[data-theme="light"] .sidebar .menu a.menu-logout { color: #B42318 !important; border-top: 1px solid #ECF0EF !important; border-radius: 0 0 16px 16px !important; }
html[data-theme="light"] .sidebar .menu a.menu-logout:hover { background: #FEF1EF !important; border-color: #F4BDB5 !important; color: #B42318 !important; }

/* ═══ الشريط العلوي على الموبايل ═══ */
html[data-theme="light"] .mobile-header {
    background: rgba(255,255,255,.95) !important;
    border-bottom: 1px solid #ECF0EF !important;
    box-shadow: 0 6px 20px rgba(11,43,42,.05);
}
html[data-theme="light"] .mobile-logo { background: #FFFFFF !important; border: 1px solid #ECF0EF !important; width: 46px !important; padding: 4px !important; }
html[data-theme="light"] .mobile-title { color: #1C272B !important; }
html[data-theme="light"] .mobile-user { color: #3A494F !important; background: #F1F6F5 !important; border-color: #ECF0EF !important; }
html[data-theme="light"] .hamburger { background: #F1F6F5 !important; border-color: #ECF0EF !important; }
html[data-theme="light"] .hamburger span { background: #1C272B !important; }

/* ═══ عناصر الصفحات: نفس أشكال التطبيق ═══ */
/* شريحة "المستخدم الحالي" */
html[data-theme="light"] .user-chip { background: #FFFFFF !important; border: 1px solid #ECF0EF !important; color: #3A494F !important; box-shadow: 0 4px 14px rgba(11,43,42,.05); }
/* حقول الإدخال: بيضا بحد #E1E7E6 وتركيز تيل */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #FFFFFF !important;
    border-color: #E1E7E6 !important;
    color: #1C272B !important;
}
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: #00A8A2 !important;
    box-shadow: 0 0 0 4px rgba(0,168,162,.12) !important;
    outline: none;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #A7B0B3 !important; }
html[data-theme="light"] select option { background: #fff; color: #1C272B; }
html[data-theme="light"] table th { color: #5C6B72; }

/* بطاقة عرض السعر: نفس تدرّج واجهة التطبيق الرئيسية */
html[data-theme="light"] .quote-preview-head {
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.16), transparent 32%), linear-gradient(135deg, #00B1AA, #00706C) !important;
    border-bottom: none !important;
}
html[data-theme="light"] .quote-preview-head .brand-title { color: #fff !important; }
html[data-theme="light"] .quote-preview-head .brand-sub { color: rgba(255,255,255,.88) !important; }
html[data-theme="light"] .quote-badge { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.32) !important; color: #fff !important; }

/* شريط التمرير */
html[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #D3DEDC; border-radius: 10px; border: 2px solid #F6F8F7; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }

/* ═══ مفتاح الوضع: بينزلق يمين وشمال ═══ */
.theme-toggle-wrap { display: inline-flex; align-items: center; gap: 12px; }
.theme-toggle {
    border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle .tt-track {
    position: relative; display: block; direction: ltr;
    width: 74px; height: 38px; border-radius: 999px;
    background: linear-gradient(135deg, #0b1d3d, #13305a);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
    transition: background .4s ease, border-color .4s ease;
}
.theme-toggle .tt-ic {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 15px; line-height: 1; transition: opacity .3s ease;
}
.theme-toggle .tt-moon { left: 11px; }
.theme-toggle .tt-sun  { right: 10px; opacity: .55; }
.theme-toggle .tt-knob {
    position: absolute; top: 3px; left: 3px;
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #00a8a2, #23c7c1);
    box-shadow: 0 4px 12px rgba(0,168,162,.45);
    transition: transform .4s cubic-bezier(.68,-.35,.27,1.35), background .4s ease;
}
/* داكن: الكرة على القمر (يسار) ... فاتح: الكرة على الشمس (يمين) */
.theme-toggle[aria-checked="true"] .tt-knob {
    transform: translateX(36px);
    background: linear-gradient(135deg, #f6c34a, #c5b156);
    box-shadow: 0 4px 12px rgba(197,177,86,.5);
}
.theme-toggle[aria-checked="true"] .tt-track {
    background: linear-gradient(135deg, #e6f6f5, #fdf6dc);
    border-color: rgba(0,168,162,.25);
    box-shadow: inset 0 2px 6px rgba(16,60,64,.10);
}
.theme-toggle[aria-checked="true"] .tt-sun  { opacity: 1; }
.theme-toggle[aria-checked="true"] .tt-moon { opacity: .45; }
.theme-toggle .tt-knob { z-index: 1; }
.theme-toggle .tt-ic { z-index: 2; }
.theme-toggle:hover .tt-track { border-color: rgba(0,168,162,.5); }
.theme-toggle:focus-visible { outline: 3px solid rgba(0,168,162,.45); outline-offset: 3px; border-radius: 999px; }
.theme-toggle.tt-mobile .tt-track { width: 64px; height: 34px; }
.theme-toggle.tt-mobile .tt-knob { width: 26px; height: 26px; }
.theme-toggle.tt-mobile[aria-checked="true"] .tt-knob { transform: translateX(30px); }
.theme-toggle.tt-mobile .tt-ic { font-size: 13px; }
.theme-toggle.tt-floating { position: fixed; top: 18px; left: 18px; z-index: 300; }

/* انتقال ناعم لحظة التبديل فقط */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* ═══ تحسينات خاصة بالفاتح ═══ */
/* حقول الإدخال: بيضا ونظيفة */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #fff !important;
    border-color: #dbe5e4 !important;
}
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: #00a8a2 !important;
    box-shadow: 0 0 0 4px rgba(0,168,162,.12) !important;
    outline: none;
}
/* بطاقة عرض السعر: تدرّج تيل كامل بنص أبيض */
html[data-theme="light"] .quote-preview-head {
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 30%), linear-gradient(135deg, #00b1aa, #00706c);
    border-bottom: none;
}
html[data-theme="light"] .quote-preview-head .brand-title { color: #fff; }
html[data-theme="light"] .quote-preview-head .brand-sub { color: rgba(255,255,255,.88); }
html[data-theme="light"] .quote-badge {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.32);
    color: #fff;
}
/* الجداول: رأس الجدول أوضح */
html[data-theme="light"] table th { color: #4d5f66; }

/* الشعار الأبيض ما بيظهر بالفاتح ولا لحظة (لحد ما يتبدّل بالملوّن) */
html[data-theme="light"] img[src$="assets/logo.png"], html[data-theme="light"] img[src$="assets/images/logo.png"] { visibility: hidden; }

/* ═══ رأس كل صفحة: كرت تدرّج بلون الشعار (متل واجهة التطبيق الرئيسية) ═══ */
html[data-theme="light"] .topbar {
    position: relative;
    overflow: hidden;
    padding: 24px 28px !important;
    border-radius: 28px !important;
    border: none !important;
    background:
        radial-gradient(circle at 12% -30%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #00B1AA 0%, #00706C 100%) !important;
    box-shadow: 0 18px 40px rgba(0,112,108,.22) !important;
    color: #fff !important;
}
html[data-theme="light"] .topbar::after {   /* دائرة ذهبية خفيفة بالزاوية */
    content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    left: -60px; bottom: -120px; background: rgba(197,177,86,.22); pointer-events: none;
}
html[data-theme="light"] .topbar > * { position: relative; z-index: 1; }
html[data-theme="light"] .topbar h1,
html[data-theme="light"] .topbar h2,
html[data-theme="light"] .topbar .page-title h1 { color: #fff !important; }
html[data-theme="light"] .topbar p,
html[data-theme="light"] .topbar .page-title p,
html[data-theme="light"] .topbar small { color: rgba(255,255,255,.86) !important; }

/* "المستخدم الحالي": كبسولة بيضا بصورة رمزية تيل */
html[data-theme="light"] .user-chip {
    display: inline-flex !important; align-items: center; gap: 10px;
    background: #FFFFFF !important; border: none !important; color: #00706C !important;
    border-radius: 999px !important; padding: 6px 14px 6px 6px !important; font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,60,58,.18) !important;
}
html[data-theme="light"] .user-chip::before {
    content: ""; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: #00A8A2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a7 7 0 0 1 16 0v1'/%3E%3C/svg%3E") center / 17px no-repeat;
}
html[data-theme="light"] .topbar a:not(.user-chip),
html[data-theme="light"] .topbar button:not(.theme-toggle) {
    background: rgba(255,255,255,.95) !important; color: #00706C !important;
    border-color: transparent !important; box-shadow: 0 8px 20px rgba(0,60,58,.15) !important;
}
/* المفتاح على التدرّج: مسار أبيض شفاف */
html[data-theme="light"] .topbar .theme-toggle .tt-track {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.45) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .topbar .theme-toggle .tt-moon { opacity: .75; }

/* ═══ كروت الإحصائيات: نظيفة بدون البقع الملونة ═══ */
html[data-theme="light"] .stat-card::before { display: none !important; }
html[data-theme="light"] .stat-card {
    background: #FFFFFF !important;
    border: 1px solid #ECF0EF !important;
    box-shadow: 0 1px 3px rgba(11,43,42,.05) !important;
}
html[data-theme="light"] .stat-card:hover { box-shadow: 0 6px 20px rgba(11,43,42,.07) !important; }

/* ═══ الكروت عموماً: ظل خفيف متل نظام المرافق ═══ */
html[data-theme="light"] .card,
html[data-theme="light"] .trip-card,
html[data-theme="light"] .run {
    box-shadow: 0 1px 3px rgba(11,43,42,.05) !important;
}

/* ═══ السايدبار: الشعار فيه اسم المدرسة، فما في داعي نكرره ═══ */
html[data-theme="light"] .brand p { display: none; }
html[data-theme="light"] .brand h2 {
    display: inline-block; margin-top: 12px !important; padding: 5px 14px; border-radius: 999px;
    background: #E4F5F4; color: #00817C !important; font-size: 12.5px !important; line-height: 1.6 !important;
}

/* ═══ صفحة الدخول بالفاتح: الشعار الملوّن كبير وواضح ═══ */
html[data-theme="light"] .logo-frame {
    width: 210px !important; height: auto !important;
    padding: 18px 20px 14px !important; border-radius: 28px !important;
    background: #FFFFFF !important; border: 1px solid #ECF0EF !important;
    box-shadow: 0 16px 36px rgba(11,43,42,.08) !important;
}
html[data-theme="light"] .logo-frame img { width: 100%; max-height: none !important; }

/* ═══ الموبايل: المفتاح بالشريط العلوي بس (بدون تكرار بهيدر الصفحة) ═══ */
@media (max-width: 980px) {
    .theme-toggle-wrap > .theme-toggle { display: none; }
}


/* ═══ أيقونات السايدبار الخطية (الوضعين) ═══ */
.sidebar .mi-row { display: inline-flex; align-items: center; gap: 11px; }
.sidebar .mi { flex-shrink: 0; opacity: .78; }
.sidebar .menu a.active .mi, .sidebar .menu-group-toggle.has-active .mi { opacity: 1; }
.sidebar .menu-group-arrow { display: inline-flex; }
.sidebar .menu-group-arrow .mi { width: 16px; height: 16px; opacity: .6; }
.sidebar .menu-group.open .menu-group-arrow { transform: rotate(180deg); }
html[data-theme="light"] .sidebar .mi { color: #5C6B72; }
html[data-theme="light"] .sidebar .menu a.active .mi,
html[data-theme="light"] .sidebar .menu-group-toggle.has-active .mi,
html[data-theme="light"] .sidebar .menu a:hover .mi,
html[data-theme="light"] .sidebar .menu-group-toggle:hover .mi { color: #00817C; }
html[data-theme="light"] .sidebar .menu a.menu-logout .mi { color: #B42318; }
/* المجموعة المفتوحة: خط عمودي رفيع جنب صفحاتها */
html[data-theme="light"] .sidebar .menu-group-items { border-right: 2px solid #ECF0EF; margin-right: 22px; padding-right: 10px !important; }
html[data-theme="light"] .sidebar .menu-group-items a::before { display: none; }
html[data-theme="light"] .sidebar .menu-group-items a.active { position: relative; }
html[data-theme="light"] .sidebar .menu-group-items a.active::after {
    content: ""; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: #C5B156;
}