/**
 * أزرار موحّدة — نفس «هيكل» زر إنشاء الحساب (تدرّج + ظل + زوايا)
 * الألوان حسب الدلالة: أزرق أساسي، زمردي تصدير Excel، إلخ.
 */

:root {
  --mo7-radius: 0.75rem;
}

/* ========== دوال مساعدة للظل حسب لون القاعدة ========== */
/* أزرار ملونة (تدرّج + ظل ملوّن) */
.mo7-btn-primary,
.login-btn,
button.bg-blue-600.text-white,
a.inline-block.bg-blue-600.text-white,
a.bg-blue-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important;
  box-shadow:
    0 2px 4px rgba(37, 99, 235, 0.22),
    0 8px 20px -6px rgba(37, 99, 235, 0.42);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.mo7-btn-primary:hover,
.login-btn:hover,
button.bg-blue-600.text-white:hover,
a.inline-block.bg-blue-600.text-white:hover,
a.bg-blue-600.text-white:hover {
  filter: brightness(1.03);
  box-shadow:
    0 4px 8px rgba(37, 99, 235, 0.28),
    0 12px 28px -8px rgba(37, 99, 235, 0.48) !important;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%) !important;
}

/* تصدير Excel / روابط التصدير — زمردي */
button.bg-emerald-600.text-white,
a.bg-emerald-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #34d399 0%, #059669 52%, #047857 100%) !important;
  box-shadow:
    0 2px 4px rgba(5, 150, 105, 0.25),
    0 8px 20px -6px rgba(5, 150, 105, 0.4);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-emerald-600.text-white:hover,
a.bg-emerald-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(5, 150, 105, 0.3),
    0 12px 28px -8px rgba(5, 150, 105, 0.45) !important;
  background: linear-gradient(180deg, #6ee7b7 0%, #059669 48%, #065f46 100%) !important;
}

/* كهرماني — جداول زمنية / استشارات / عروض */
button.bg-amber-600.text-white,
a.bg-amber-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 52%, #b45309 100%) !important;
  box-shadow:
    0 2px 4px rgba(217, 119, 6, 0.28),
    0 8px 20px -6px rgba(217, 119, 6, 0.38);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-amber-600.text-white:hover,
a.bg-amber-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(217, 119, 6, 0.32),
    0 12px 28px -8px rgba(217, 119, 6, 0.45) !important;
  background: linear-gradient(180deg, #fcd34d 0%, #d97706 48%, #92400e 100%) !important;
}

/* نيلي */
button.bg-indigo-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #818cf8 0%, #4f46e5 52%, #4338ca 100%) !important;
  box-shadow:
    0 2px 4px rgba(79, 70, 229, 0.25),
    0 8px 20px -6px rgba(79, 70, 229, 0.4);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-indigo-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(79, 70, 229, 0.3),
    0 12px 28px -8px rgba(79, 70, 229, 0.48) !important;
  background: linear-gradient(180deg, #a5b4fc 0%, #4f46e5 48%, #3730a3 100%) !important;
}

/* بنفسجي */
button.bg-violet-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 52%, #6d28d9 100%) !important;
  box-shadow:
    0 2px 4px rgba(124, 58, 237, 0.25),
    0 8px 20px -6px rgba(124, 58, 237, 0.38);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-violet-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(124, 58, 237, 0.3),
    0 12px 28px -8px rgba(124, 58, 237, 0.45) !important;
  background: linear-gradient(180deg, #c4b5fd 0%, #7c3aed 48%, #5b21b6 100%) !important;
}

/* أخضر */
button.bg-green-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 52%, #15803d 100%) !important;
  box-shadow:
    0 2px 4px rgba(22, 163, 74, 0.25),
    0 8px 20px -6px rgba(22, 163, 74, 0.38);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-green-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(22, 163, 74, 0.3),
    0 12px 28px -8px rgba(22, 163, 74, 0.45) !important;
  background: linear-gradient(180deg, #86efac 0%, #16a34a 48%, #166534 100%) !important;
}

/* سماوي */
button.bg-cyan-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #22d3ee 0%, #0891b2 52%, #0e7490 100%) !important;
  box-shadow:
    0 2px 4px rgba(8, 145, 178, 0.28),
    0 8px 20px -6px rgba(8, 145, 178, 0.4);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-cyan-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(8, 145, 178, 0.32),
    0 12px 28px -8px rgba(8, 145, 178, 0.48) !important;
  background: linear-gradient(180deg, #67e8f9 0%, #0891b2 48%, #155e75 100%) !important;
}

/* وردي / تعارض */
button.bg-rose-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 52%, #be123c 100%) !important;
  box-shadow:
    0 2px 4px rgba(225, 29, 72, 0.25),
    0 8px 20px -6px rgba(225, 29, 72, 0.38);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-rose-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(225, 29, 72, 0.3),
    0 12px 28px -8px rgba(225, 29, 72, 0.45) !important;
  background: linear-gradient(180deg, #fda4af 0%, #e11d48 48%, #9f1239 100%) !important;
}

/* بنفسجي تقارير */
button.bg-purple-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #c084fc 0%, #9333ea 52%, #7e22ce 100%) !important;
  box-shadow:
    0 2px 4px rgba(147, 51, 234, 0.25),
    0 8px 20px -6px rgba(147, 51, 234, 0.4);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-purple-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(147, 51, 234, 0.3),
    0 12px 28px -8px rgba(147, 51, 234, 0.48) !important;
  background: linear-gradient(180deg, #d8b4fe 0%, #9333ea 48%, #6b21a8 100%) !important;
}

/* خطر */
button.bg-red-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #f87171 0%, #dc2626 52%, #b91c1c 100%) !important;
  box-shadow:
    0 2px 4px rgba(220, 38, 38, 0.28),
    0 8px 20px -6px rgba(220, 38, 38, 0.4);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-red-600.text-white:hover {
  filter: brightness(1.04);
  box-shadow:
    0 4px 8px rgba(220, 38, 38, 0.32),
    0 12px 28px -8px rgba(220, 38, 38, 0.48) !important;
  background: linear-gradient(180deg, #fca5a5 0%, #dc2626 48%, #991b1b 100%) !important;
}

/* فلاتر / تطبيق — رمادي غامق */
button.bg-gray-800.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #6b7280 0%, #1f2937 55%, #111827 100%) !important;
  box-shadow:
    0 2px 4px rgba(17, 24, 39, 0.35),
    0 8px 18px -6px rgba(17, 24, 39, 0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-gray-800.text-white:hover {
  filter: brightness(1.06);
  box-shadow:
    0 4px 8px rgba(17, 24, 39, 0.4),
    0 12px 26px -8px rgba(17, 24, 39, 0.5) !important;
}

/* سوبر أدمن — سليت */
button.bg-slate-800.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #64748b 0%, #1e293b 52%, #0f172a 100%) !important;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.35),
    0 8px 18px -6px rgba(15, 23, 42, 0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-slate-800.text-white:hover {
  filter: brightness(1.06);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.4),
    0 12px 26px -8px rgba(15, 23, 42, 0.52) !important;
}

/* براند الهبوط */
button.bg-brand-600.text-white,
a.bg-brand-600.text-white {
  font-family: inherit;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important;
  box-shadow:
    0 2px 4px rgba(37, 99, 235, 0.22),
    0 8px 20px -6px rgba(37, 99, 235, 0.42);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-brand-600.text-white:hover,
a.bg-brand-600.text-white:hover {
  filter: brightness(1.03);
  box-shadow:
    0 4px 8px rgba(37, 99, 235, 0.28),
    0 12px 28px -8px rgba(37, 99, 235, 0.48) !important;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%) !important;
}

/* إلغاء / ثانوي — سطح رمادي فاتح (بدون تعبئة صلبة لأيقونات الدائرة) */
button[type="button"].bg-gray-100:not(.rounded-full),
button[type="button"].bg-gray-100.rounded,
button.bg-gray-100.px-4.py-2.rounded {
  font-family: inherit;
  border-radius: var(--mo7-radius) !important;
  border: 1px solid #e5e7eb !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 45%, #e5e7eb 100%) !important;
  color: #374151 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px -4px rgba(15, 23, 42, 0.1);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button[type="button"].bg-gray-100:not(.rounded-full):hover,
button[type="button"].bg-gray-100.rounded:hover,
button.bg-gray-100.px-4.py-2.rounded:hover {
  filter: brightness(0.98);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.1),
    0 8px 16px -6px rgba(15, 23, 42, 0.12) !important;
  background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 50%, #d1d5db 100%) !important;
}

/* أزرار بـ bg-gray-100 بدون type (مثل طباعة) */
button.bg-gray-100.text-gray-600:not(.rounded-full) {
  font-family: inherit;
  border-radius: var(--mo7-radius) !important;
  border: 1px solid #e5e7eb !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 45%, #e5e7eb 100%) !important;
  color: #4b5563 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px -4px rgba(15, 23, 42, 0.1);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-gray-100.text-gray-600:not(.rounded-full):hover {
  filter: brightness(0.98);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.1),
    0 8px 16px -6px rgba(15, 23, 42, 0.12) !important;
}

button.bg-gray-100.text-gray-700:not(.rounded-full),
button.rounded-md.bg-gray-100.text-gray-700 {
  font-family: inherit;
  border-radius: var(--mo7-radius) !important;
  border: 1px solid #e5e7eb !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 45%, #e5e7eb 100%) !important;
  color: #374151 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px -4px rgba(15, 23, 42, 0.1);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.bg-gray-100.text-gray-700:not(.rounded-full):hover,
button.rounded-md.bg-gray-100.text-gray-700:hover {
  filter: brightness(0.98);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.1),
    0 8px 16px -6px rgba(15, 23, 42, 0.12) !important;
}

/* إلغاء بحدود فقط (سوبر أدمن) */
a.rounded-lg.border.border-slate-300.text-slate-700 {
  font-family: inherit;
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px -4px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

a.rounded-lg.border.border-slate-300.text-slate-700:hover {
  filter: brightness(0.99);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.1),
    0 8px 16px -6px rgba(15, 23, 42, 0.12) !important;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

/* الوضع الليلي — إلغاء */
.dark button[type="button"].bg-gray-100.dark\:bg-gray-700,
.dark button.bg-gray-100.dark\:bg-gray-700 {
  background: linear-gradient(180deg, #4b5563 0%, #374151 45%, #1f2937 100%) !important;
  border-color: #6b7280 !important;
  color: #e5e7eb !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 8px 18px -6px rgba(0, 0, 0, 0.4);
}

.dark button[type="button"].bg-gray-100.dark\:bg-gray-700:hover,
.dark button.bg-gray-100.dark\:bg-gray-700:hover {
  background: linear-gradient(180deg, #6b7280 0%, #4b5563 50%, #374151 100%) !important;
}

/* ضغط مشترك + تركيز */
.mo7-btn-primary:active,
.login-btn:active,
button.bg-blue-600.text-white:active,
button.bg-emerald-600.text-white:active,
button.bg-indigo-600.text-white:active,
button.bg-violet-600.text-white:active,
button.bg-green-600.text-white:active,
button.bg-cyan-600.text-white:active,
button.bg-amber-600.text-white:active,
button.bg-rose-600.text-white:active,
button.bg-purple-600.text-white:active,
button.bg-red-600.text-white:active,
button.bg-gray-800.text-white:active,
button.bg-slate-800.text-white:active,
button.bg-brand-600.text-white:active,
a.inline-block.bg-blue-600.text-white:active,
a.bg-emerald-600.text-white:active,
a.bg-amber-600.text-white:active,
a.bg-brand-600.text-white:active {
  transform: translateY(1px);
}

.mo7-btn-primary:focus-visible,
.login-btn:focus-visible,
button.bg-blue-600.text-white:focus-visible,
button.bg-emerald-600.text-white:focus-visible,
button.bg-indigo-600.text-white:focus-visible,
button.bg-violet-600.text-white:focus-visible,
button.bg-green-600.text-white:focus-visible,
button.bg-cyan-600.text-white:focus-visible,
button.bg-amber-600.text-white:focus-visible,
button.bg-rose-600.text-white:focus-visible,
button.bg-purple-600.text-white:focus-visible,
button.bg-red-600.text-white:focus-visible,
button.bg-gray-800.text-white:focus-visible,
button.bg-slate-800.text-white:focus-visible,
button.bg-brand-600.text-white:focus-visible,
a.inline-block.bg-blue-600.text-white:focus-visible,
a.bg-emerald-600.text-white:focus-visible,
a.bg-amber-600.text-white:focus-visible,
a.bg-brand-600.text-white:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 2px;
}

button.bg-emerald-600.text-white:focus-visible,
a.bg-emerald-600.text-white:focus-visible {
  outline-color: rgba(5, 150, 105, 0.55);
}

button.bg-red-600.text-white:focus-visible {
  outline-color: rgba(220, 38, 38, 0.55);
}

button[type="button"].bg-gray-100:focus-visible,
button.bg-gray-100.text-gray-600:focus-visible {
  outline: 2px solid rgba(107, 114, 128, 0.45);
  outline-offset: 2px;
}

/* أيقونات داخل الأزرار */
.login-btn i,
button.bg-blue-600.text-white i,
button.bg-emerald-600.text-white i,
button.bg-indigo-600.text-white i,
button.bg-violet-600.text-white i,
button.bg-green-600.text-white i,
button.bg-cyan-600.text-white i,
button.bg-amber-600.text-white i,
button.bg-rose-600.text-white i,
button.bg-purple-600.text-white i,
button.bg-red-600.text-white i,
button.bg-brand-600.text-white i {
  margin-inline-start: 0.35rem;
  opacity: 0.92;
  vertical-align: -0.05em;
}

/* صفحة الدخول */
.login-btn {
  padding: 0.8rem 1rem !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  cursor: pointer;
}

#loginForm .login-btn,
#regForm .login-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* زر اختيار الملف */
input[type="file"][class*="file:bg-blue-600"]::file-selector-button {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mo7-radius) !important;
  padding: 0.5rem 1rem;
  margin-inline-end: 0.75rem;
  cursor: pointer;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important;
  box-shadow:
    0 2px 4px rgba(37, 99, 235, 0.22),
    0 8px 20px -6px rgba(37, 99, 235, 0.42);
}

input[type="file"][class*="file:bg-blue-600"]::file-selector-button:hover {
  filter: brightness(1.03);
  box-shadow:
    0 4px 8px rgba(37, 99, 235, 0.28),
    0 12px 28px -8px rgba(37, 99, 235, 0.48);
}

/* لوحة عرض الجلسات: زر تبديل يستخدم bg-gray-100 مع dark:bg-dark-700 مخصّص */
button#viewToggleBtn.bg-gray-100 {
  border: 1px solid #e5e7eb !important;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 45%, #e5e7eb 100%) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px -4px rgba(15, 23, 42, 0.1);
}

.dark button#viewToggleBtn.bg-gray-100 {
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%) !important;
  border-color: #6b7280 !important;
  color: #e5e7eb !important;
}

/* لوحة عرض — استعادة الافتراضي */
button#displayPrefReset {
  border-radius: var(--mo7-radius) !important;
  background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%) !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 10px -4px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button#displayPrefReset:hover {
  filter: brightness(0.98);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.1),
    0 8px 16px -6px rgba(15, 23, 42, 0.12) !important;
}

.dark button#displayPrefReset {
  background: linear-gradient(180deg, #3f3f46 0%, #27272a 100%) !important;
  border-color: #52525b !important;
  color: #e4e4e7 !important;
}

.dark button#displayPrefReset:hover {
  background: linear-gradient(180deg, #52525b 0%, #3f3f46 100%) !important;
}
