/* ============================================================================
   طيف (tayf) — لوحة تحكم البائع "قُمرة القيادة" (Vendor Dashboard)
   ============================================================================
   ملف منفصل عن main.css وauth.css عمدًا: هذه شاشات تطبيق داخلي (Admin/App)
   بهوية بصرية مختلفة — Topbar ثابت + Sidebar داكن جانبي بدل Sidebar الموقع
   الرئيسي، لكن بنفس ألوان الهوية (الأزرق #3164F5 والذهبي #F8CB25) والخط
   Tajawal. تصميم فقط، بدون أي بيانات حقيقية — كل الأرقام هنا تجريبية
   ومعلّمة بتعليقات TODO(dev) لموضع ربطها بالباك-إند لاحقًا.
   ============================================================================ */

* ,
*::before,
*::after {
  box-sizing: border-box;
}

body.db-body {
  margin: 0;
  background: var(--color-bg-alt);
  font-family: var(--font-primary);
  color: var(--color-ink-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* -------------------------------- عناصر مشتركة -------------------------------- */
.db-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* شكل موحّد لأيقونة الدرهم داخل بطاقات الإيرادات (نفس مكوّن الموقع الرئيسي) */
.currency-icon {
  display: inline-flex;
  align-items: center;
  width: 0.72em;
  height: 0.72em;
  margin: 0 2px;
}

.currency-icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================================
   Topbar
   ============================================================================ */
.db-topbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--db-topbar-height, 72px);
  background: var(--color-ink-900);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  z-index: 300;
  box-shadow: var(--shadow-md);
}

.db-topbar-start,
.db-topbar-end {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.db-sidebar-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--color-white);
  display: none; /* يظهر فقط بالجوال والتابلت — راجع media query أدناه */
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.db-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
}

.db-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-brand img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.db-brand-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.3px;
}

/* -------- مبدّل حالة المحل: مفتوح / مشغول / مغلق --------
   يعرض الحالة الحالية فقط بزر واحد، والضغط عليه يفتح قائمة لاختيار حالة
   أخرى (نفس نمط .db-lang/.db-lang-menu) — بدل عرض الخيارات الثلاثة معًا
   بشكل دائم. عند اختيار "مشغول" يظهر تنبيه Toast (راجع js/dashboard.js). */
.db-status-switch {
  position: relative;
}

.db-status-current {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.db-status-current:hover {
  background: rgba(255, 255, 255, 0.16);
}

.db-status-current svg {
  color: rgba(255, 255, 255, 0.6);
  transition: transform var(--transition-fast);
}

.db-status-switch.open .db-status-current svg {
  transform: rotate(180deg);
}

.db-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-gray-500);
}

.db-status-dot[data-status="open"] {
  background: var(--color-success);
}

.db-status-dot[data-status="busy"] {
  background: var(--color-warning);
}

.db-status-dot[data-status="closed"] {
  background: var(--color-danger);
}

.db-status-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--color-white);
  color: var(--color-ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 150px;
  padding: 6px;
  display: none;
  z-index: 50;
}

.db-status-menu.open {
  display: block;
}

.db-status-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: start;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--color-ink-900);
}

.db-status-option:hover {
  background: var(--color-bg-alt);
}

.db-status-option.active {
  color: var(--color-brand-blue);
  font-weight: 800;
}

/* -------- شارة "الدخول بالإنابة" — تظهر فقط عند وصول أدمن عبر رابط
   "الدخول بالنيابة عنه" من لوحة الإدارة (?impersonate=الاسم بالرابط) -------- */
.db-impersonate-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f5b83d;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.db-impersonate-badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.db-impersonate-badge strong {
  color: var(--color-white);
}

.db-impersonate-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.db-impersonate-back:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* -------- مبدّل اللغة -------- */
.db-lang {
  position: relative;
}

.db-lang-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.db-lang-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.db-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--color-white);
  color: var(--color-ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 140px;
  padding: 6px;
  display: none;
  z-index: 50;
}

.db-lang-menu.open {
  display: block;
}

.db-lang-menu button {
  width: 100%;
  text-align: start;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--color-ink-900);
}

.db-lang-menu button:hover {
  background: var(--color-bg-alt);
}

.db-lang-menu button.active {
  color: var(--color-brand-blue);
}

.db-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background: rgba(225, 26, 44, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.db-logout-btn:hover {
  background: rgba(225, 26, 44, 0.32);
}
.db-logout-btn .db-icon {
  width: 16px;
  height: 16px;
}

html[dir="ltr"] .db-sidebar,
html[dir="ltr"] .db-topbar,
html[dir="ltr"] .db-main {
  direction: ltr;
}


/* -------- جرس الإشعارات — نفس نمط .db-lang/.db-lang-menu -------- */
.db-notif {
  position: relative;
}

.db-notif-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.db-notif-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.db-notif-dot {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  border: 2px solid var(--color-ink-900);
}

.db-notif-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--color-ink-900);
}

.db-notif-item.is-unread .db-notif-item-text {
  font-weight: 700;
}

.db-notif-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--color-white);
  color: var(--color-ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  width: 320px;
  max-width: 90vw;
  display: none;
  z-index: 50;
  overflow: hidden;
}

.db-notif-menu.open {
  display: block;
}

.db-notif-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-gray-300);
  font-weight: 800;
  font-size: 0.9rem;
}

.db-notif-menu-head a {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-brand-blue);
}

.db-notif-item {
  display: block;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-gray-100);
  transition: background var(--transition-fast);
}

.db-notif-item:last-child {
  border-bottom: none;
}

.db-notif-item:hover {
  background: var(--color-bg-alt);
}

.db-notif-item-text {
  margin: 0 0 4px;
  font-size: 0.84rem;
  color: var(--color-ink-900);
  font-weight: 600;
  line-height: 1.4;
}

.db-notif-item-time {
  font-size: 0.72rem;
  color: var(--color-gray-500);
}

.db-upgrade-btn {
  background: var(--color-primary);
  color: var(--color-ink-900);
  border: none;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform var(--transition-fast);
}

.db-upgrade-btn:hover {
  transform: translateY(-1px);
}

/* ============================================================================
   Sidebar
   ============================================================================ */
.db-sidebar {
  position: fixed;
  top: var(--db-topbar-height, 72px);
  right: 0;
  bottom: 0;
  width: 278px;
  background: var(--color-ink-900);
  color: rgba(255, 255, 255, 0.85);
  overflow-y: auto;
  z-index: 250;
  padding: var(--space-4) var(--space-3) var(--space-7);
  transition: transform var(--transition-base);
  scrollbar-width: thin;
}

.db-nav-home {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: var(--color-ink-900);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-gold);
}

/* زر إدارة شاشة التلفزيون — أسفل زر قُمرة القيادة مباشرة */
.db-nav-tv-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2b5ce8;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  margin-top: calc(var(--space-5) * -1 + 8px);
  margin-bottom: var(--space-5);
  box-shadow: 0 8px 20px rgba(43, 92, 232, 0.35);
}

.db-nav-tv-btn .db-icon {
  color: #ffffff;
}

.db-nav-tv-btn.is-active,
.db-nav-tv-btn.active {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* بحث سريع داخل أسماء أقسام القائمة الجانبية */
.db-nav-search {
  position: relative;
  margin-bottom: var(--space-4);
}

.db-nav-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 36px 10px 12px;
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.85rem;
}

.db-nav-search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.db-nav-search input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.db-nav-search .db-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.db-nav-group {
  margin-bottom: var(--space-5);
}

.db-nav-caption {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 10px;
  margin-bottom: 8px;
}

.db-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-nav-link,
.db-nav-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  background: none;
  font-family: inherit;
  text-align: start;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.db-nav-link:hover,
.db-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
}

.db-nav-link.active {
  background: rgba(248, 203, 37, 0.14);
  color: var(--color-primary);
}

.db-nav-link .db-icon,
.db-nav-toggle .db-icon {
  color: rgba(255, 255, 255, 0.45);
}

.db-nav-link.active .db-icon {
  color: var(--color-primary);
}

.db-nav-toggle-caret {
  margin-inline-start: auto;
  transition: transform var(--transition-fast);
}

.db-nav-toggle[aria-expanded="true"] .db-nav-toggle-caret {
  transform: rotate(-90deg);
}

.db-nav-submenu {
  list-style: none;
  margin: 2px 0 4px;
  padding-inline-end: 30px;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.db-nav-submenu.open {
  display: flex;
}

.db-nav-submenu .db-nav-link {
  font-size: 0.83rem;
  font-weight: 500;
  padding: 8px 10px;
}

.db-nav-submenu .db-nav-link::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

.db-sidebar-overlay {
  display: none;
}

/* ============================================================================
   المحتوى الرئيسي
   ============================================================================ */
.db-main {
  margin-right: 278px;
  padding-top: calc(var(--db-topbar-height, 72px) + var(--space-6));
  padding-inline: var(--space-6);
  padding-bottom: var(--space-8);
  max-width: 1400px;
}

.db-page-header {
  margin-bottom: var(--space-5);
}

.db-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.db-page-subtitle {
  color: var(--color-gray-700);
  font-size: 0.92rem;
  margin: 0;
}

/* -------------------------------- بنر دعائي --------------------------------
   الصورة تملأ البنر بالكامل بدون قص — الارتفاع يتبع نسبة أبعاد الصورة
   (التصميم الأصلي 2000×500 ≈ 4:1)، وليس ارتفاعًا ثابتًا يقصّها. */
.db-promo-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  line-height: 0;
  height: auto;
}

.db-promo-banner img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* -------------------------------- بنر الاشتراك -------------------------------- */
.db-subscription-banner {
  background: var(--color-ink-900);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.db-subscription-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.db-subscription-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.db-subscription-title .db-icon {
  color: var(--color-primary);
}

.db-subscription-date {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  margin: 0;
}

.db-subscription-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.db-subscription-plan-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.db-renew-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 11px 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition-fast);
}

.db-renew-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.db-countdown {
  display: flex;
  gap: 10px;
}

.db-countdown-cell {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  min-width: 64px;
  padding: 10px 6px;
  text-align: center;
}

.db-countdown-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.db-countdown-label {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* نسخة فاتحة من العدّاد لاستخدامه فوق خلفية بيضاء (مثال: كرت مشترك) */
.db-countdown--light .db-countdown-cell {
  background: var(--color-bg-alt);
}

.db-countdown--light .db-countdown-num {
  color: var(--color-ink-900);
}

.db-countdown--light .db-countdown-label {
  color: var(--color-gray-500);
}

/* -------------------------------- أقسام الإحصائيات -------------------------------- */
.db-section {
  margin-bottom: var(--space-6);
}

.db-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 var(--space-3);
}

.db-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.db-cards-row--5 {
  grid-template-columns: repeat(5, 1fr);
}

.db-cards-row--6 {
  grid-template-columns: repeat(6, 1fr);
}

.db-stat-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-300);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.db-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.db-stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.db-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.db-stat-icon .db-icon {
  width: 19px;
  height: 19px;
}

.db-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.db-stat-label {
  color: var(--color-gray-700);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* ألوان أيقونات البطاقات حسب الفئة */
.db-stat-icon--blue { background: rgba(49, 100, 245, 0.12); color: var(--color-brand-blue); }
.db-stat-icon--gold { background: rgba(248, 203, 37, 0.18); color: var(--color-primary-700); }
.db-stat-icon--success { background: rgba(47, 174, 96, 0.12); color: var(--color-success); }
.db-stat-icon--warning { background: rgba(245, 158, 11, 0.14); color: var(--color-warning); }
.db-stat-icon--info { background: rgba(14, 165, 176, 0.14); color: var(--color-info); }
.db-stat-icon--gray { background: rgba(20, 20, 28, 0.06); color: var(--color-gray-700); }
.db-stat-icon--danger { background: rgba(225, 26, 44, 0.1); color: var(--color-danger); }

/* -------- كروت حالات الطلب بصورة توضيحية (طلبات اليوم بقُمرة القيادة) -------- */
.db-order-status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

.db-order-status-grid--status {
  margin-top: var(--space-4);
}

.db-order-status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-3);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-300);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.db-order-status-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand-blue);
}

.db-order-status-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.db-order-status-value {
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.db-order-status-label {
  color: var(--color-gray-700);
  font-size: 0.84rem;
  font-weight: 600;
  margin-top: 2px;
}

/* كروت قابلة للضغط تُستخدم كفلتر فوق جدول (بدل الانتقال لصفحة أخرى) —
   نفس شكل db-stat-card لكنها <button> بحالة "مفعّلة" تميّز الفلتر الحالي */
.db-stat-card--filter {
  width: 100%;
  text-align: start;
  border: 1px solid var(--color-gray-300);
  cursor: pointer;
}

.db-stat-card--filter.active {
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px rgba(49, 100, 245, 0.12);
}

/* رابط رجوع بسيط أعلى شاشات العرض/التعديل (مثال: "الرجوع إلى المنتجات") */
.db-link-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-gray-700);
  margin-bottom: var(--space-4);
}

.db-link-back:hover {
  color: var(--color-brand-blue);
}

/* ============================================================================
   رأس صفحة مع زر إجراء (مثال: "+ إضافة جديد")
   ============================================================================ */
.db-page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.db-page-header-row .db-page-header {
  margin-bottom: 0;
}

/* -------- رمز المؤسسة في رأس قُمرة القيادة -------- */
.db-institution-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  margin-inline-start: auto;
}

.db-institution-code-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.db-institution-code-value {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-gray-900);
  white-space: nowrap;
}

.db-institution-code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.db-institution-code-copy:hover {
  background: var(--color-white);
  color: var(--color-brand-blue);
}

.db-institution-code-copy svg {
  width: 16px;
  height: 16px;
}

.db-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-brand-blue);
  color: var(--color-white);
  border: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.db-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(49, 100, 245, 0.25);
}

.db-action-btn--ghost {
  background: var(--color-white);
  color: var(--color-ink-900);
  border: 1.5px solid var(--color-gray-300);
}

.db-action-btn--ghost:hover {
  box-shadow: none;
  border-color: var(--color-brand-blue);
}

/* ============================================================================
   شريط الأدوات: بحث + فرز/فلترة
   ============================================================================ */
.db-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.db-search {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.db-search .db-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--color-gray-500);
  pointer-events: none;
}

.db-search input {
  width: 100%;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 11px 42px 11px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-ink-900);
}

.db-search input:focus {
  outline: none;
  border-color: var(--color-brand-blue);
}

.db-select {
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-ink-900);
}

.db-select:focus {
  outline: none;
  border-color: var(--color-brand-blue);
}

.db-toolbar-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  width: 100%;
}

.db-toolbar--compact .db-search {
  flex: 1 1 180px;
  max-width: 240px;
  min-width: 120px;
}

.db-search--compact .db-icon {
  right: 10px;
  width: 16px;
  height: 16px;
}

.db-search--compact input {
  padding: 8px 34px 8px 12px;
  font-size: 0.85rem;
}

.db-toolbar--compact .db-select {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 8px 10px;
  font-size: 0.85rem;
}

@media (max-width: 960px) {
  .db-toolbar-form {
    flex-wrap: wrap;
  }

  .db-toolbar--compact .db-search {
    flex: 1 1 100%;
    max-width: none;
  }

  .db-toolbar--compact .db-select {
    flex: 1 1 calc(50% - var(--space-2));
    min-width: 140px;
  }
}

/* ============================================================================
   جداول البيانات
   ============================================================================ */
.db-table-wrap {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  white-space: nowrap;
}

.db-table th,
.db-table td {
  padding: 14px 16px;
  text-align: start;
}

.db-table thead th {
  color: var(--color-gray-700);
  font-weight: 700;
  font-size: 0.78rem;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-gray-300);
}

.db-table tbody tr {
  border-bottom: 1px solid var(--color-gray-300);
  transition: background var(--transition-fast);
}

.db-table tbody tr:last-child {
  border-bottom: none;
}

.db-table tbody tr:hover {
  background: var(--color-bg-alt);
}

.db-table tbody tr.filtered-out,
.db-table tbody tr.search-hidden {
  display: none;
}

.db-table-action {
  color: var(--color-brand-blue);
  font-weight: 700;
}

.db-table-action:hover {
  text-decoration: underline;
}

.db-table--system-types {
  table-layout: fixed;
}

.db-table--system-types th,
.db-table--system-types td {
  white-space: normal;
  vertical-align: middle;
}

.db-table--system-types thead th {
  text-align: center;
}

.db-table--system-types .db-table-col-name {
  text-align: start;
}

.db-table--system-types .db-table-col-name {
  width: 30%;
}

.db-table--system-types .db-table-col-url {
  width: 24%;
  text-align: center;
}

.db-table-url {
  display: inline-block;
  max-width: 100%;
  direction: ltr;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  unicode-bidi: plaintext;
}

.db-table--system-types .db-table-col-status,
.db-table--system-types .db-table-col-order {
  width: 10%;
  text-align: center;
}

.db-table--system-types .db-table-col-actions {
  width: 132px;
  text-align: center;
}

.db-bilingual-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.db-bilingual-cell__ar {
  font-weight: 700;
  line-height: 1.4;
}

.db-bilingual-cell__en {
  display: block;
  width: 100%;
  font-size: 0.82rem;
  color: var(--color-gray-600);
  line-height: 1.35;
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

.db-table--system-types .db-row-actions {
  justify-content: center;
}

/* -------- صورة مصغّرة داخل خلية جدول (تصنيفات/إضافات) -------- */
.db-table-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
}

/* -------- إعادة ترتيب صفوف جدول بالسحب والإفلات (js/dashboard.js) -------- */
.db-drag-handle {
  width: 34px;
  color: var(--color-gray-500);
  cursor: grab;
}

.db-drag-handle svg {
  width: 16px;
  height: 16px;
}

.db-table tbody tr.is-dragging {
  opacity: 0.4;
}

.db-table tbody tr.is-drag-over {
  border-top: 2px solid var(--color-brand-blue);
}

/* -------- مجموعة أزرار عرض/تعديل/حذف لكل صف أو كرت -------- */
.db-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-row-action-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.db-row-action-btn svg {
  width: 15px;
  height: 15px;
}

.db-row-action-btn:hover {
  background: var(--color-bg-alt);
}

.db-row-action-btn--view:hover {
  color: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

.db-row-action-btn--edit:hover {
  color: var(--color-primary-700);
  border-color: var(--color-primary);
}

.db-row-action-btn--delete:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.db-row-action-btn--restore:hover {
  color: var(--color-success);
  border-color: var(--color-success);
}

.db-row-action-btn--log:hover {
  color: var(--color-info);
  border-color: var(--color-info);
}

.db-row-action-btn--qr:hover {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.db-row-action-btn--status:hover {
  color: var(--color-success);
  border-color: var(--color-success);
}

.db-row-action-btn--history:hover {
  color: var(--color-info);
  border-color: var(--color-info);
}

.db-row-action-btn--timeline:hover {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.db-row-action-btn--gift:hover {
  color: var(--color-primary-700);
  border-color: var(--color-primary);
}

/* -------- شارة عدد الطلبات السابقة بجدول الطلبات -------- */
.db-order-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-gray-500);
  direction: ltr;
}

.db-order-count-badge svg {
  width: 12px;
  height: 12px;
}

/* -------- نافذة تأكيد الحذف (تُنشأ ديناميكيًا عبر js/dashboard.js) -------- */
.db-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 20, 0.55);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.db-modal-overlay.open {
  display: flex;
}

.db-modal {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.db-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(225, 26, 44, 0.1);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.db-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 8px;
}

.db-modal-text {
  color: var(--color-gray-700);
  font-size: 0.9rem;
  margin: 0 0 var(--space-5);
}

.db-modal-actions {
  display: flex;
  gap: 10px;
}

.db-modal-actions button {
  flex: 1;
  padding: 11px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  font-family: inherit;
}

.db-modal-btn-cancel {
  background: var(--color-bg-alt);
  color: var(--color-ink-900);
}

.db-modal-btn-confirm {
  background: var(--color-danger);
  color: var(--color-white);
}

/* -------- نافذة سجل (مثال: سجل تعديلات الكمية اليومية) -------- */
.db-modal--wide {
  max-width: 520px;
  text-align: start;
}

.db-modal--wide .db-modal-title {
  text-align: center;
}

.db-modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-modal-close svg {
  width: 14px;
  height: 14px;
}

.db-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: var(--space-3);
}

.db-log-table th,
.db-log-table td {
  padding: 10px 8px;
  text-align: start;
  border-bottom: 1px solid var(--color-gray-300);
}

.db-log-table th {
  color: var(--color-gray-700);
  font-weight: 700;
  font-size: 0.76rem;
}

.db-log-table tbody tr:last-child td {
  border-bottom: none;
}

.db-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-brand-blue);
  font-weight: 700;
  font-size: 0.82rem;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.db-log-btn:hover {
  text-decoration: underline;
}

/* -------- نافذة عرض الفاتورة (Popup) -------- */
.db-modal--invoice {
  max-width: 460px;
  text-align: start;
  padding: var(--space-6);
}

.db-invoice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-300);
}

.db-invoice-header img {
  width: 34px;
  height: 34px;
}

.db-invoice-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 2px;
}

.db-invoice-number {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  direction: ltr;
  text-align: end;
}

.db-invoice-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--space-4);
}

.db-invoice-meta div span {
  display: block;
  font-size: 0.72rem;
  color: var(--color-gray-500);
}

.db-invoice-meta div strong {
  font-size: 0.86rem;
  font-weight: 700;
}

.db-invoice-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}

.db-invoice-lines th {
  text-align: start;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-gray-500);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-gray-300);
}

.db-invoice-lines td {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-300);
}

.db-invoice-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-5);
}

.db-invoice-totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--color-gray-700);
}

.db-invoice-totals-row--grand {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-ink-900);
  padding-top: 8px;
  border-top: 1px solid var(--color-gray-300);
}

.db-invoice-actions {
  display: flex;
  gap: 10px;
}

.db-invoice-actions .db-action-btn,
.db-invoice-actions .db-action-btn--ghost {
  flex: 1;
  justify-content: center;
}

/* -------- نافذة رمز QR لفتح تطبيق الإدارة (Popup) -------- */
.db-modal--qr {
  max-width: 300px;
  text-align: center;
  padding: var(--space-6);
}

.db-qr-title {
  font-size: 0.86rem;
  color: var(--color-gray-500);
  margin: 0 0 2px;
}

.db-qr-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-ink-900);
  margin: 0 0 var(--space-5);
}

.db-qr-code {
  width: 160px;
  height: 160px;
  color: var(--color-ink-900);
  margin: 0 auto var(--space-4);
  display: block;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
}

.db-qr-caption {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gray-500);
  margin: 0;
}

/* -------- نافذة ترقية/تجديد الاشتراك (Popup) -------- */
.db-modal--upgrade {
  max-width: 760px;
  text-align: center;
  padding: var(--space-6);
}

.db-upgrade-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.db-upgrade-modal-sub {
  font-size: 0.86rem;
  color: var(--color-gray-500);
  margin: 0 0 var(--space-5);
}

.db-upgrade-modal-sub strong {
  color: var(--color-ink-900);
}

.db-upgrade-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: start;
}

.db-upgrade-plan {
  position: relative;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}

.db-upgrade-plan.is-current {
  background: var(--color-bg-alt);
}

.db-upgrade-plan.is-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.db-upgrade-plan-badge {
  align-self: flex-start;
  background: var(--color-gray-300);
  color: var(--color-gray-700);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
}

.db-upgrade-plan-badge--gold {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.db-upgrade-plan-name {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.db-upgrade-plan-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-ink-900);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.db-upgrade-plan-price span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-gray-500);
}

.db-upgrade-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-gray-700);
  flex: 1;
}

.db-upgrade-plan-features li {
  padding-inline-start: 18px;
  position: relative;
}

.db-upgrade-plan-features li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

.db-upgrade-plan .db-action-btn {
  justify-content: center;
  margin-top: auto;
}

/* -------- نافذة تغيير حالة الطلب (Popup) -------- */
.db-modal--status {
  max-width: 420px;
  padding: var(--space-6);
}

.db-status-modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 var(--space-5);
  text-align: center;
}

.db-status-modal-title span {
  color: var(--color-brand-blue);
  direction: ltr;
  display: inline-block;
}

.db-status-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.db-status-option-btn {
  border: 1.5px solid var(--color-gray-300);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--color-ink-900);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.db-status-option-btn:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-brand-blue);
}

/* الحالة الحالية للطلب داخل نافذة تغيير الحالة — لون مختلف + علامة اختيار */
.db-status-option-btn.is-current {
  border-color: var(--color-brand-blue);
  background: rgba(49, 100, 245, 0.08);
  color: var(--color-brand-blue);
  position: relative;
  padding-inline-start: 32px;
}

.db-status-option-btn.is-current::before {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-brand-blue);
}

.db-status-option-btn.is-current::after {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  top: 50%;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: translateY(-70%) rotate(-45deg);
}

/* -------- نافذة سجل طلبات العميل السابقة (Popup) -------- */
.db-modal--history {
  max-width: 480px;
  padding: var(--space-6);
  text-align: center;
}

.db-history-modal-name {
  color: var(--color-gray-500);
  font-size: 0.86rem;
  margin: 0 0 var(--space-5);
}

.db-history-modal-name strong {
  color: var(--color-ink-900);
}

.db-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
  max-height: 340px;
  overflow-y: auto;
}

.db-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.db-history-item:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-brand-blue);
}

.db-history-item-num {
  font-weight: 800;
  color: var(--color-brand-blue);
  direction: ltr;
  min-width: 68px;
}

.db-history-item-date {
  color: var(--color-gray-500);
  font-size: 0.78rem;
  flex: 1;
}

.db-history-item-total {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--color-ink-900);
  white-space: nowrap;
}

/* -------- نافذة سجلات حالات الطلب عبر الوقت (Popup) -------- */
.db-modal--timeline {
  max-width: 460px;
  padding: var(--space-6);
  max-height: 82vh;
  overflow-y: auto;
}

.db-timeline {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-5);
}

.db-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  padding-bottom: var(--space-5);
}

.db-timeline-item::before {
  content: "";
  position: absolute;
  top: 46px;
  right: 22px;
  bottom: 0;
  width: 2px;
  background: var(--color-gray-300);
}

.db-timeline-item:last-child::before {
  display: none;
}

.db-timeline-item:last-child {
  padding-bottom: 0;
}

/* -------- صورة/أيقونة كل حالة بالخط الزمني --------
   يُفضَّل استخدام صورة توضيحية فعلية من assets/icons عند توفّرها لكل حالة؛
   إن لم تتوفر صورة لحالة معيّنة، تُستخدم أيقونة SVG بسيطة بدلها
   (.db-timeline-media--icon) — راجع data-status-value بالحالات ثنائية
   "بانتظار الدفع"/"ملغي" بشاشة تغيير الحالة كمثال على الحالات بلا صورة. */
.db-timeline-media {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--color-gray-300);
}

.db-timeline-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.db-timeline-media--icon {
  color: var(--color-gray-500);
  box-shadow: 0 0 0 2px var(--color-gray-300);
}

.db-timeline-media--icon svg {
  width: 22px;
  height: 22px;
}

.db-timeline-item.is-cancelled .db-timeline-media {
  color: var(--color-danger);
  box-shadow: 0 0 0 2px rgba(225, 26, 44, 0.3);
}

.db-timeline-content {
  padding-top: 10px;
}

.db-timeline-status {
  font-weight: 800;
  font-size: 0.9rem;
  margin: 0 0 2px;
}

.db-timeline-time {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  direction: ltr;
  display: inline-block;
}

/* شارات الحالة داخل الجداول والكروت */
.db-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--radius-full);
}

.db-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.db-badge--info { background: rgba(14, 165, 176, 0.12); color: var(--color-info); }
.db-badge--gold { background: rgba(248, 203, 37, 0.18); color: var(--color-primary-700); }
.db-badge--gray { background: rgba(20, 20, 28, 0.07); color: var(--color-gray-700); }
.db-badge--blue { background: rgba(49, 100, 245, 0.12); color: var(--color-brand-blue); }
.db-badge--green { background: rgba(16, 185, 129, 0.14); color: #059669; }
.db-badge--purple { background: rgba(139, 92, 246, 0.14); color: #7c3aed; }
.db-badge--system {
  background: #e4ebfd;
  color: #1c3f9e;
  font-weight: 800;
  border: 1px solid #c5d4f5;
}

.db-system-name {
  display: inline-block;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: #e4ebfd;
  color: #1c3f9e;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  border: 1px solid #c5d4f5;
}

.db-system-name.is-unknown {
  background: rgba(20, 20, 28, 0.07);
  color: #333333;
  border-color: rgba(20, 20, 28, 0.12);
}

.db-system-filter {
  position: relative;
  min-width: 220px;
}

.db-system-filter-toggle {
  width: 100%;
  text-align: right;
  cursor: pointer;
}

.db-system-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 280px;
  max-width: min(360px, 92vw);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.db-system-filter-caption {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gray-700);
}

.db-system-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-gray-900);
  cursor: pointer;
}

.db-system-filter-option + .db-system-filter-option {
  border-top: 1px solid rgba(20, 20, 28, 0.06);
}

.db-system-filter-option input {
  margin-top: 3px;
  accent-color: #3164f5;
}

.db-system-filter-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(20, 20, 28, 0.08);
  display: flex;
  justify-content: flex-end;
}
.db-badge--success { background: rgba(47, 174, 96, 0.12); color: var(--color-success); }
.db-badge--danger { background: rgba(225, 26, 44, 0.1); color: var(--color-danger); }

.db-table-system-tag {
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  line-height: 1.4;
  vertical-align: middle;
}

.db-table th:first-child,
.db-table td:first-child {
  min-width: 240px;
  width: 22%;
}

/* -------- تقييم العميل بالرقم (Order/Customer Rating) — بتصميم أيقونة
   rate-number.svg (رقم بنفسجي + دائرة نجمة برتقالية + كلمة "تقييمي" برتقالية) -------- */
.db-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.db-rating-badge-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  margin-inline-start: -6px;
}

.db-rating-badge-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #6b2fa0;
  line-height: 1;
}

.db-rating-badge-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ef8a1e;
}

.db-rating-badge--none .db-rating-badge-icon {
  opacity: 0.35;
  filter: grayscale(1);
}

.db-rating-badge--none .db-rating-badge-value {
  color: var(--color-gray-500);
}

/* -------- سطر جدول لحساب محذوف (Soft Delete) -------- */
.db-table tbody tr.is-deleted {
  background: rgba(225, 26, 44, 0.05);
}

.db-table tbody tr.is-deleted td {
  color: var(--color-danger);
}

.db-table tbody tr.is-deleted .db-badge:not(.db-badge--danger) {
  opacity: 0.6;
}

/* ============================================================================
   ترقيم الصفحات
   ============================================================================ */
.db-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.db-pagination button {
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-ink-900);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
}

.db-pagination button.active {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: var(--color-white);
}

.db-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================================
   شبكة كروت بصور (منتجات، فيديوهات)
   ============================================================================ */
.db-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.db-media-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.db-media-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.db-media-card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.db-media-card-thumb img,
.db-media-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* شارة "فيديو" — أعلى زاوية صورة المنتج عندما يكون الوسط المعروض فيديو
   بدل صورة ثابتة بشاشة جميع المنتجات */
.db-media-card-video-badge {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(14, 14, 20, 0.6);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-media-card-video-badge svg {
  width: 13px;
  height: 13px;
}

/* شارة "وسم الفيديو" — أسفل زاوية صورة الفيديو، شاشتَي الفيديوهات
   الحالية/المنتهية (نفس ألوان db-video-tag--N المستخدمة بمنتقي الوسم
   بشاشة إضافة فيديو قصير) */
.db-media-card-tag {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 8px;
  background: var(--tag-bg);
  color: var(--tag-text);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.68rem;
  white-space: nowrap;
}

/* شارة "منتج مميز" — نجمة أعلى زاوية صورة المنتج بشاشة جميع المنتجات */
.db-media-card-featured {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-warning);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.db-media-card-featured svg {
  width: 14px;
  height: 14px;
}

/* زر حذف الفيديو — أعلى الزاوية المقابلة لشارة "فيديو"، شاشة الفيديوهات
   الحالية/المنتهية */
.db-media-card-delete {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 14, 20, 0.6);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.db-media-card-delete svg {
  width: 13px;
  height: 13px;
}

.db-media-card-delete:hover {
  background: var(--color-danger);
}

/* زر تنزيل الفيديو — بالزاوية المقابلة لزر الحذف (يمين الكرت) */
.db-media-card-download {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 14, 20, 0.6);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.db-media-card-download svg {
  width: 13px;
  height: 13px;
}

.db-media-card-download:hover {
  background: var(--color-brand-blue);
}

.db-media-card-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.db-media-card-cat {
  font-size: 0.74rem;
  color: var(--color-gray-500);
  margin: 0 0 2px;
}

.db-media-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.db-media-card-desc {
  font-size: 0.8rem;
  color: var(--color-gray-700);
  margin: 0 0 6px;
  line-height: 1.5;
}

.db-media-card-orders {
  font-size: 0.76rem;
  color: var(--color-gray-500);
  margin: 0 0 var(--space-3);
}

.db-media-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.db-media-card-price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   كرت مشترك (شاشة "المشتركين" بلوحة تحكم الأدمن)
   ============================================================================ */
.db-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.db-sub-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.db-sub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.db-sub-card-system-row {
  display: flex;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
  padding: var(--space-3) var(--space-4) 0;
}

.db-sub-card-system-tag {
  margin-inline-start: auto;
  max-width: calc(100% - var(--space-2));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-sub-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-4);
}

.db-sub-card-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 6px;
  flex-shrink: 0;
}

.db-sub-card-name {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.db-sub-card-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-300);
}

.db-sub-card-info div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-sub-card-info span {
  font-size: 0.72rem;
  color: var(--color-gray-500);
}

.db-sub-card-info strong {
  font-size: 0.85rem;
  font-weight: 700;
}

.db-sub-card-countdown-label {
  font-size: 0.76rem;
  color: var(--color-gray-500);
  margin: 0 0 8px;
}

.db-sub-card .db-countdown {
  gap: 6px;
  margin-bottom: var(--space-4);
}

.db-sub-card .db-countdown-cell {
  min-width: 0;
  flex: 1;
  padding: 8px 2px;
}

.db-sub-card .db-countdown-num {
  font-size: 1.1rem;
}

.db-sub-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-sub-card-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.db-impersonate-btn {
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================================
   نماذج/شاشات إعدادات (Form Cards) — لكل شاشة "إدخال بيانات" بلوحة التحكم
   ============================================================================ */
.db-form-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  padding: var(--space-6);
  max-width: 780px;
  margin-bottom: var(--space-4);
}

.db-form-section-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-300);
}

.db-form-card + .db-form-card .db-form-section-title {
  margin-top: 0;
}

.db-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.db-form-group {
  margin-bottom: var(--space-4);
}

.db-form-group--full {
  grid-column: 1 / -1;
}

.db-form-label {
  display: block;
  font-weight: 700;
  font-size: 0.86rem;
  margin-bottom: 8px;
}

.db-form-input,
.db-form-select,
.db-form-textarea {
  width: 100%;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-ink-900);
}

.db-form-textarea {
  resize: vertical;
  min-height: 90px;
}

.db-form-input:focus,
.db-form-select:focus,
.db-form-textarea:focus {
  outline: none;
  border-color: var(--color-brand-blue);
}

.db-form-input[readonly],
.db-form-input:disabled {
  background: var(--color-bg-alt);
  color: var(--color-gray-700);
  cursor: not-allowed;
}

.db-form-hint {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  margin-top: 6px;
}

/* -------- صف تاريخ بداية/نهاية مخصّص (مثال: فلتر "غير ذلك" الزمني) -------- */
.db-date-range-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.db-date-range-row .db-form-group {
  flex: 1;
  margin-bottom: 0;
}

/* -------- مجموعة إدخال رمز PIN (مثال: رمز فتح تطبيق الإدارة) -------- */
.db-pin-group {
  display: flex;
  gap: 10px;
  direction: ltr;
}

.db-pin-input {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
  color: var(--color-ink-900);
  transition: border-color var(--transition-fast);
}

.db-pin-input:focus {
  outline: none;
  border-color: var(--color-brand-blue);
}

/* مبدّل نوعين (مثال: نسبة % / مبلغ ثابت) */
.db-toggle-group {
  display: flex;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}

.db-toggle-group button {
  border: none;
  background: var(--color-white);
  color: var(--color-gray-700);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  padding: 10px 20px;
}

.db-toggle-group button.active {
  background: var(--color-brand-blue);
  color: var(--color-white);
}

/* نسخة "راديو" من مبدّل التبويبين — صف كامل العرض بحدود فاصلة ونقطة اختيار،
   بدل تعبئة الزر النشط بالكامل (مثال: طريقة إدراج صورة/فيديو المنتج) */
.db-toggle-group--radio {
  width: 100%;
  border-radius: var(--radius-sm);
}

.db-toggle-group--radio button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-ink-900);
  position: relative;
}

.db-toggle-group--radio button:first-child {
  border-inline-end: 1.5px solid var(--color-gray-300);
}

.db-toggle-group--radio button::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gray-300);
  flex-shrink: 0;
}

.db-toggle-group--radio button.active {
  background: var(--color-white);
  color: var(--color-ink-900);
}

.db-toggle-group--radio button.active::before {
  border-color: var(--color-brand-blue);
  background: radial-gradient(circle, var(--color-brand-blue) 0 40%, transparent 44%);
}

/* نسخة "شبكة أيقونات" من مبدّل التبويبين — كل زر أيقونة فوق تسمية (مثال:
   اختيار أيقونة ختم بطاقة الولاء) */
.db-toggle-group--icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  width: 100%;
  border: none;
  overflow: visible;
  gap: var(--space-2);
}

.db-toggle-group--icons button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  color: var(--color-gray-700);
  font-size: 0.74rem;
}

.db-toggle-group--icons button.active {
  border-color: var(--color-brand-blue);
  background: var(--color-bg-alt);
  color: var(--color-brand-blue);
}

.db-icon-toggle-icon {
  display: flex;
}

.db-icon-toggle-icon svg {
  width: 24px;
  height: 24px;
}

/* -------------------------- اختيار "وسم الفيديو" (شاشة إضافة فيديو قصير) --------------------------
   شبكة بطاقات نصية (بلا أيقونة) — كل وسم بخلفية مصمتة بلونه الخاص دائمًا
   (وليس فقط عند التفعيل) عبر متغيّرَي --tag-bg/--tag-text على كل تعديل
   db-video-tag--1 إلى --10 (تتكرر الألوان دوريًا على الاقتراحات الـ28).
   لون النص محسوب مسبقًا ليتباين بوضوح مع خلفية كل لون (أبيض على الألوان
   الداكنة، وداكن على الألوان الفاتحة كالأصفر والذهبي). زر واحد نشط فقط
   بأي وقت (نفس آلية .db-toggle-group العامة) — يُميَّز بإطار خارجي بدل
   تغيير لونه، لأن لونه مصمت من البداية. */
.db-video-tag-picker {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: none;
  overflow: visible;
  gap: 10px;
}

button.db-video-tag {
  border: none;
  background: var(--tag-bg);
  color: var(--tag-text);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.82rem;
}

button.db-video-tag.active {
  background: var(--tag-bg);
  color: var(--tag-text);
  outline: 2px solid var(--color-ink-900);
  outline-offset: 2px;
}

.db-video-tag--1 { --tag-bg: #e11a2c; --tag-text: #ffffff; }
.db-video-tag--2 { --tag-bg: #f59e0b; --tag-text: #1a1400; }
.db-video-tag--3 { --tag-bg: #3164f5; --tag-text: #ffffff; }
.db-video-tag--4 { --tag-bg: #7c3aed; --tag-text: #ffffff; }
.db-video-tag--5 { --tag-bg: #0ea5b0; --tag-text: #ffffff; }
.db-video-tag--6 { --tag-bg: #db2777; --tag-text: #ffffff; }
.db-video-tag--7 { --tag-bg: #2fae60; --tag-text: #ffffff; }
.db-video-tag--8 { --tag-bg: #f8cb25; --tag-text: #1a1400; }
.db-video-tag--9 { --tag-bg: #8b5e34; --tag-text: #ffffff; }
.db-video-tag--10 { --tag-bg: #14141c; --tag-text: #ffffff; }

/* -------------------------- بطاقة معاينة "ستوري" للفيديو القصير -------------------------- */
.db-video-story-preview {
  position: relative;
  width: 220px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-ink-900);
  box-shadow: var(--shadow-md);
}

.db-video-story-progress {
  position: absolute;
  top: 10px;
  inset-inline: 10px;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  z-index: 3;
}

.db-video-story-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-white);
  transition: width 0.2s linear;
}

.db-video-story-close {
  position: absolute;
  top: 18px;
  left: 10px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(14, 14, 20, 0.4);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-video-story-close svg {
  width: 14px;
  height: 14px;
}

.db-video-story-top {
  position: absolute;
  top: 26px;
  inset-inline: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-video-story-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-white);
  object-fit: cover;
}

.db-video-story-merchant-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.db-video-story-merchant {
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.72rem;
}

.db-video-story-tag {
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.68rem;
  border: none;
  background: var(--tag-bg);
  color: var(--tag-text);
  white-space: nowrap;
}

.db-video-story-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.db-video-story-bottom {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  z-index: 2;
  padding: 28px 12px 12px;
  background: linear-gradient(to top, rgba(14, 14, 20, 0.85), transparent);
}

.db-video-story-title {
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.78rem;
  margin-bottom: 2px;
}

.db-video-story-caption {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
}

/* مفتاح تفعيل/إيقاف (Switch) */
.db-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* -------- أوقات العمل: كرت يومي بفترات دوام متعددة -------- */
.db-hours-day {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.db-hours-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.db-hours-day-name {
  font-weight: 800;
  font-size: 0.95rem;
}

.db-hours-periods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-hours-period {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-hours-period .db-form-input {
  max-width: 150px;
}

.db-hours-period-sep {
  color: var(--color-gray-500);
}

.db-hours-add-period {
  margin-top: 10px;
}

/* -------- رسائل تأكيد عائمة (Toast) -------- */
.db-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.db-toast {
  background: var(--color-ink-900);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: db-toast-in 0.25s ease;
}

.db-toast--error {
  background: #7f1d1d;
}

@keyframes db-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.db-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.db-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.db-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.db-switch-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-white);
  top: 3px;
  right: 3px;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.db-switch input:checked + .db-switch-slider {
  background: var(--color-success);
}

.db-switch input:checked + .db-switch-slider::before {
  transform: translateX(-18px);
}

/* عناصر اختيار متعددة (شبكة Checkbox) */
.db-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.db-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}

.db-checkbox-item input {
  accent-color: var(--color-brand-blue);
}

/* -------- منتقي منتجات بحث + اختيار متعدد (مثال: منتجات العرض) -------- */
.db-product-picker {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.db-product-picker-search {
  position: relative;
  margin-bottom: var(--space-3);
}

.db-product-picker-search input {
  width: 100%;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 9px 36px 9px 12px;
  font-family: inherit;
  font-size: 0.86rem;
}

.db-product-picker-search svg {
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
  pointer-events: none;
}

.db-product-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}

.db-product-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.db-product-picker-item:hover {
  background: var(--color-bg-alt);
}

.db-product-picker-item input {
  accent-color: var(--color-brand-blue);
  flex-shrink: 0;
}

.db-product-picker-item img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.db-product-picker-name {
  flex: 1;
  font-size: 0.87rem;
  font-weight: 600;
}

.db-product-picker-price {
  font-size: 0.82rem;
  color: var(--color-gray-500);
  font-weight: 700;
  flex-shrink: 0;
}

.db-product-picker-empty {
  text-align: center;
  color: var(--color-gray-500);
  font-size: 0.84rem;
  padding: var(--space-4) 0;
  display: none;
}

.db-product-picker-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-300);
  font-size: 0.87rem;
}

.db-product-picker-total strong {
  font-size: 1.1rem;
  color: var(--color-brand-blue);
}

.db-form-actions {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* -------- تبويب اللغة لحقول النصوص القابلة للترجمة (تظهر بالموقع الخارجي) --------
   يضم كل زوج تبويب (English/العربية) عدة حقول تتبدّل معًا (مثال: اسم المنتج +
   وصفه) — كل حقل له نسختان [data-lang="ar"] و[data-lang="en"]، والتبويب
   يُظهر واحدة ويُخفي الأخرى. */
.db-lang-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-gray-300);
  margin-bottom: var(--space-5);
}

.db-lang-tab {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-gray-500);
  padding: 0 2px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.db-lang-tab.active {
  color: var(--color-brand-blue);
  border-bottom-color: var(--color-brand-blue);
}

.db-required-mark {
  color: var(--color-danger);
}

/* -------- تبويبات مستوى الصفحة (مثال: أقسام شاشة التصميم) -------- */
.db-page-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-gray-300);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}

.db-page-tab {
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-gray-700);
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.db-page-tab:hover {
  color: var(--color-ink-900);
}

.db-page-tab.active {
  color: var(--color-brand-blue);
  border-bottom-color: var(--color-brand-blue);
}

.db-tab-panel {
  display: none;
}

.db-tab-panel.active {
  display: block;
}

/* -------- روابط الوصول لمنصات طيف (الموقع / تطبيق استلام الطلبات / تطبيق التلفاز) -------- */
.db-links-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.db-link-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.db-link-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(49, 100, 245, 0.12);
  color: var(--color-brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.db-link-card-icon svg {
  width: 22px;
  height: 22px;
}

.db-link-card-title {
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0 0 var(--space-3);
}

.db-link-card-desc {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  margin: 8px 0 0;
}

.db-link-copy {
  display: flex;
  width: 100%;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.db-link-copy input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 10px 12px;
  font-size: 0.8rem;
  font-family: inherit;
  background: var(--color-bg-alt);
  color: var(--color-gray-700);
  direction: ltr;
  text-align: left;
}

.db-link-copy input:focus {
  outline: none;
}

.db-link-copy-btn {
  border: none;
  background: var(--color-brand-blue);
  color: var(--color-white);
  padding: 0 14px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.db-link-copy-btn svg {
  width: 15px;
  height: 15px;
}

.db-link-qr {
  width: 130px;
  height: 130px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-300);
  margin-bottom: var(--space-3);
  object-fit: contain;
  background: #fff;
}

.db-link-caption {
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0;
}

.db-link-downloader-logo {
  height: 42px;
  width: auto;
  margin-bottom: var(--space-3);
}

.db-link-code-label {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  margin: 0;
}

.db-link-code {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-blue);
  margin: 2px 0 var(--space-3);
  direction: ltr;
}

.db-link-card .db-action-btn,
.db-link-card .db-action-btn--ghost {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* كرت بمحتوى يبدأ من جهة البداية (وليس متمركزًا) — مثال: خطوات تنزيل تطبيق التلفاز */
.db-link-card--start {
  align-items: stretch;
  text-align: start;
}

.db-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--color-gray-700);
  line-height: 1.6;
}

.db-steps-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  color: var(--color-white);
  font-size: 0.74rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.db-link-code-inline {
  display: inline-block;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-blue);
  direction: ltr;
  letter-spacing: 0.5px;
}

/* -------- تخطيط شاشة التصميم: محتوى + معاينة جهاز على الجهة اليسار -------- */
.db-design-layout {
  display: grid;
  grid-template-columns: 1fr 640px;
  gap: var(--space-6);
  align-items: start;
}

/* -------- معاينة جهاز حي: هاتف/كمبيوتر بداخله الموقع فعليًا (iframe) --------
   تُغيَّر أبعاد الـ iframe الفعلية حسب الوضع المختار (لا مجرد تصغير بصري)،
   فيتفاعل تصميم الموقع الحقيقي مع نقاط الانكسار (Breakpoints) بنفسه —
   تمامًا كما لو فُتح على جهاز حقيقي بذلك المقاس. */
.db-device-preview {
  position: sticky;
  top: calc(var(--db-topbar-height, 72px) + var(--space-5));
}

.db-device-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-5);
}

.db-device-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.db-device-btn svg {
  width: 16px;
  height: 16px;
}

.db-device-btn.active {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: var(--color-white);
}

.db-device-frame {
  margin: 0 auto;
  background: var(--color-ink-900);
  box-shadow: var(--shadow-lg);
  position: relative;
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, padding 0.3s ease;
}

/* هاتف: إطار طويل بحواف دائرية وسماعة علوية — الـ iframe بمقاسه الطبيعي
   بالضبط (375×812) بلا أي تصغير، فلا حاجة لأي transform هنا. */
.db-device-frame--mobile {
  width: 395px;
  height: 844px;
  border-radius: 34px;
  padding: 16px 10px;
}

.db-device-frame--mobile::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.25);
  z-index: 1;
}

.db-device-frame--mobile .db-device-screen {
  position: relative;
  width: 375px;
  height: 812px;
  border-radius: 20px;
  overflow: hidden;
}

.db-device-frame--mobile .db-device-iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 375px;
  height: 812px;
}

/* كمبيوتر: شاشة عريضة + قاعدة حامل — الـ iframe يُعرض بمقاس كمبيوتر حقيقي
   (1280×800) ليتفاعل التصميم مع نقاط الانكسار الفعلية، ثم يُصغَّر بصريًا
   بالكامل (المقاس + الموضع كليهما position:absolute) لضمان عرضه بشكل
   موثوق داخل الإطار الصغير دون أي قص أو شاشة فارغة. */
.db-device-frame--desktop {
  width: 600px;
  height: 390px;
  border-radius: 12px;
  padding: 12px 12px 34px;
}

.db-device-frame--desktop::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 10px;
  border-radius: 0 0 6px 6px;
  background: var(--color-ink-700);
}

.db-device-frame--desktop .db-device-screen {
  position: relative;
  width: 576px;
  height: 344px;
  border-radius: 5px;
  overflow: hidden;
}

.db-device-frame--desktop .db-device-iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 1280px;
  height: 764px;
  transform: scale(0.45);
  transform-origin: top right;
}

.db-device-iframe {
  border: none;
  background: var(--color-white);
  display: block;
}

.db-device-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-gray-500);
  margin-top: var(--space-4);
}

/* -------- معاينة إعدادات الفاتورة: ورقة A4 / إيصال طباعة صغير --------
   معاينة توضيحية ثابتة (غير تفاعلية مع كل تبديل بالفورم) لكل تبويب من
   تبويبات شاشة الفاتورة — بنفس منطق معاينة "التصميم" (لا تعكس تغييرات
   غير محفوظة، فقط تعرض شكل نمط الفاتورة). */
.db-inv-preview {
  position: sticky;
  top: calc(var(--db-topbar-height, 72px) + var(--space-5));
}

.db-inv-preview-stage {
  justify-content: center;
  min-height: 580px;
}

.db-inv-preview-stage.db-tab-panel.active {
  display: flex;
}

.db-inv-preview-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-gray-500);
  margin-top: var(--space-4);
}

/* ---- ورقة A4: فاتورة العميل / التوصيل / الهدية ---- */
.db-inv-paper {
  width: 400px;
  min-height: 566px;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  border-radius: 3px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-ink-900);
}

.db-inv-paper-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-ink-900);
}

.db-inv-paper-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.db-inv-paper-head--left {
  flex-direction: row-reverse;
}

.db-inv-paper-logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-gray-100);
  flex-shrink: 0;
}

.db-inv-paper-title-block {
  text-align: end;
}

.db-inv-paper-head--center .db-inv-paper-title-block {
  text-align: center;
  margin-top: 8px;
}

.db-inv-paper-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.db-inv-paper-sub {
  font-size: 0.68rem;
  color: var(--color-gray-500);
  direction: ltr;
  display: block;
}

.db-inv-paper-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.db-inv-paper-parties h4 {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 4px;
}

.db-inv-paper-parties p {
  margin: 0;
  color: var(--color-ink-700);
}

.db-inv-paper-shipping {
  background: var(--color-gray-100);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.66rem;
}

.db-inv-paper-shipping h4 {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--color-gray-600);
  margin: 0 0 4px;
}

.db-inv-paper-shipping p {
  margin: 0;
  color: var(--color-gray-700);
}

.db-inv-paper-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 0.68rem;
}

.db-inv-paper-table th {
  text-align: start;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-gray-500);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-gray-300);
}

.db-inv-paper-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.db-inv-paper-table th:last-child,
.db-inv-paper-table td:last-child {
  text-align: end;
}

.db-inv-paper-totals {
  align-self: flex-end;
  width: 58%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}

.db-inv-paper-totals-row {
  display: flex;
  justify-content: space-between;
  color: var(--color-gray-700);
}

.db-inv-paper-totals-row--grand {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--color-ink-900);
  padding-top: 6px;
  border-top: 1.5px solid var(--color-ink-900);
}

.db-inv-paper-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.db-inv-paper-footer-text {
  font-size: 0.64rem;
  color: var(--color-gray-500);
  max-width: 62%;
}

.db-inv-paper-social {
  display: flex;
  gap: 5px;
  margin: 6px 0;
}

.db-inv-paper-social span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  flex-shrink: 0;
}

.db-inv-paper-social svg {
  width: 9px;
  height: 9px;
}

.db-inv-paper-contact {
  font-size: 0.6rem;
  color: var(--color-gray-500);
  direction: ltr;
  text-align: right;
}

.db-inv-paper-qr {
  width: 42px;
  height: 42px;
  color: var(--color-ink-900);
  flex-shrink: 0;
}

/* ---- إيصال طباعة صغير: فاتورة الطباعة ---- */
.db-inv-receipt-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.db-inv-receipt-slot {
  width: 260px;
  height: 34px;
  background: linear-gradient(180deg, var(--color-ink-700), var(--color-ink-900));
  border-radius: 10px 10px 4px 4px;
  position: relative;
  z-index: 1;
}

.db-inv-receipt-slot::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.4);
}

.db-inv-receipt-paper {
  width: 240px;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  padding: 20px 16px 26px;
  margin-top: -6px;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 96%,
    95% 100%, 90% 96%, 85% 100%, 80% 96%, 75% 100%, 70% 96%, 65% 100%,
    60% 96%, 55% 100%, 50% 96%, 45% 100%, 40% 96%, 35% 100%, 30% 96%,
    25% 100%, 20% 96%, 15% 100%, 10% 96%, 5% 100%, 0% 96%
  );
  font-size: 0.68rem;
  text-align: center;
  color: var(--color-ink-900);
}

.db-inv-receipt-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: var(--color-gray-100);
  object-fit: cover;
  display: block;
}

.db-inv-receipt-store {
  font-weight: 800;
  font-size: 0.8rem;
  margin: 0 0 2px;
}

.db-inv-receipt-meta {
  color: var(--color-gray-500);
  font-size: 0.6rem;
  margin: 0 0 10px;
  direction: ltr;
}

.db-inv-receipt-divider {
  border: none;
  border-top: 1px dashed var(--color-gray-400);
  margin: 10px 0;
}

.db-inv-receipt-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-align: start;
  margin-bottom: 5px;
}

.db-inv-receipt-line span:first-child {
  white-space: nowrap;
}

.db-inv-receipt-dots {
  flex: 1;
  border-bottom: 1px dotted var(--color-gray-400);
  height: 0;
  margin-bottom: 3px;
}

.db-inv-receipt-line span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.db-inv-receipt-total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 0.78rem;
  margin-top: 4px;
}

.db-inv-receipt-thanks {
  font-weight: 700;
  margin: 12px 0 10px;
}

.db-inv-receipt-qr {
  width: 62px;
  height: 62px;
  margin: 0 auto 6px;
  color: var(--color-ink-900);
  display: block;
}

.db-inv-receipt-code {
  font-size: 0.58rem;
  color: var(--color-gray-500);
  direction: ltr;
  margin: 0 0 10px;
}

.db-inv-receipt-social {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.db-inv-receipt-social span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
}

.db-inv-receipt-social svg {
  width: 8px;
  height: 8px;
}

/* ---- معاينة فورية: إخفاء أقسام + محاذاة إيصال الطباعة ---- */
.db-inv-is-hidden {
  display: none !important;
}

.db-inv-hide-prices .db-inv-price-col,
.db-inv-hide-prices.db-inv-paper .db-inv-paper-totals:not(.db-inv-paper-totals--gift),
.db-inv-hide-prices .db-inv-receipt-line > span:last-child:not(.db-inv-receipt-dots),
.db-inv-hide-prices .db-inv-receipt-total {
  display: none !important;
}

.db-inv-receipt-paper--right {
  text-align: right;
}
.db-inv-receipt-paper--right .db-inv-receipt-logo {
  margin-left: 0;
  margin-right: auto;
}
.db-inv-receipt-paper--right .db-inv-receipt-line,
.db-inv-receipt-paper--right .db-inv-receipt-total {
  text-align: start;
}
.db-inv-receipt-paper--right .db-inv-receipt-social {
  justify-content: flex-end;
}

.db-inv-receipt-paper--left {
  text-align: left;
}
.db-inv-receipt-paper--left .db-inv-receipt-logo {
  margin-right: 0;
  margin-left: auto;
}
.db-inv-receipt-paper--left .db-inv-receipt-social {
  justify-content: flex-start;
}

.db-inv-receipt-paper--center {
  text-align: center;
}
.db-inv-receipt-paper--center .db-inv-receipt-logo {
  margin-left: auto;
  margin-right: auto;
}
.db-inv-receipt-paper--center .db-inv-receipt-social {
  justify-content: center;
}

.db-inv-paper-head--left .db-inv-paper-title-block {
  text-align: start;
}

/* ============================================================================
   استجابة الشاشات
   ============================================================================ */
@media (max-width: 1100px) {
  .db-cards-row,
  .db-cards-row--5,
  .db-cards-row--6,
  .db-order-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .db-media-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .db-sub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .db-sidebar-toggle {
    display: flex;
  }

  .db-design-layout {
    grid-template-columns: 1fr;
  }

  .db-links-row {
    grid-template-columns: 1fr;
  }

  .db-device-preview {
    position: static;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 auto;
  }

  .db-inv-preview {
    position: static;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 auto;
  }

  .db-sidebar {
    transform: translateX(100%);
    box-shadow: var(--shadow-lg);
  }

  .db-sidebar.open {
    transform: translateX(0);
  }

  .db-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 240;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
  }

  .db-sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .db-main {
    margin-right: 0;
  }

  .db-brand-name {
    display: none;
  }
}

/* ============================================================================
   بطاقات رفع الصور/الفيديو للمنتج (إضافة/تعديل منتج) — بطاقتان جنبًا إلى جنب
   في نهاية النموذج قبل زر الحفظ: صور إضافية + صورة/فيديو رئيسي، مع معاينة
   كبيرة قابلة للضغط تفتح بنافذة منبثقة (#dbMediaPreviewModal بجافاسكربت)
   ============================================================================ */
.db-upload-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.db-upload-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.db-upload-card-subtitle {
  color: var(--color-gray-500);
  font-size: 0.8rem;
  margin: -6px 0 var(--space-4);
}

.db-upload-dropzone {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  min-height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--space-5);
}

.db-upload-add-tile {
  width: 84px;
  height: 84px;
  border: 1.5px dashed var(--color-gray-400, var(--color-gray-300));
  border-radius: var(--radius-md);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--color-brand-blue);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.db-upload-add-tile:hover {
  border-color: var(--color-brand-blue);
  transform: translateY(-2px);
}

.db-upload-add-tile svg {
  width: 22px;
  height: 22px;
  color: var(--color-gray-500);
}

.db-upload-thumb-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.db-upload-thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-md);
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: block;
}

.db-upload-thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.db-upload-thumb-remove {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-danger);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-upload-thumb-remove svg {
  width: 11px;
  height: 11px;
}

.db-upload-hint {
  color: var(--color-gray-500);
  font-size: 0.76rem;
  text-align: center;
  margin: var(--space-3) 0 0;
}

.db-upload-hint b {
  color: var(--color-ink-900);
  font-weight: 700;
}

.db-upload-link-zone {
  padding-top: var(--space-1);
}

/* -------- نافذة معاينة كبيرة للصورة/الفيديو (Popup) -------- */
.db-modal--media-preview {
  max-width: 640px;
  padding: var(--space-5);
  text-align: center;
}

.db-media-preview-frame {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 70vh;
}

.db-media-preview-frame img,
.db-media-preview-frame video {
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

/* ============================================================================
   معرض صور المنتج + ملخص التقييم بالنجوم (شاشة عرض منتج)
   ============================================================================ */
.db-product-view-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.db-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.db-product-gallery-main {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  cursor: pointer;
  border: 1px solid var(--color-gray-300);
  transition: opacity var(--transition-fast);
}

.db-product-gallery-main:hover {
  opacity: 0.9;
}

.db-product-gallery-thumbs {
  display: flex;
  gap: 8px;
}

.db-product-gallery-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  cursor: pointer;
  border: 1px solid var(--color-gray-300);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.db-product-gallery-thumb:hover {
  border-color: var(--color-brand-blue);
  transform: translateY(-2px);
}

.db-rating-summary-count {
  color: var(--color-gray-500);
  font-size: 0.8rem;
  margin: 0;
}

/* -------- مربع تقييم rateme (شعار + رقم + عدد التقييمات + صور مصغّرة) —
   شاشة عرض منتج، بجانب أعمدة أسئلة التقييم -------- */
.db-rating-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-4);
  flex-shrink: 0;
  width: 176px;
}

.db-rating-box-logo {
  width: 96px;
  height: auto;
}

.db-rating-box-score {
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-rating-box-score-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.db-rating-box-score-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #652d90;
  line-height: 1;
}

.db-rating-breakdown {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 6px;
}

.db-rating-breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.db-rating-breakdown-label {
  width: 96px;
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--color-gray-700);
}

.db-rating-breakdown-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-gray-300);
  overflow: hidden;
}

.db-rating-breakdown-fill {
  height: 100%;
  background: #652d90;
  border-radius: var(--radius-full);
}

.db-rating-breakdown-count {
  width: 18px;
  text-align: end;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gray-700);
  flex-shrink: 0;
}

/* نسخة بعناوين طويلة (أسئلة التقييم) — عمود عنوان أعرض ويسمح بالتفاف السطر
   بدل عرض ثابت صغير (ملخص التقييم أعلى شاشة عرض المنتج + نافذة عرض التقييم) */
.db-rating-breakdown--questions .db-rating-breakdown-row {
  align-items: center;
}

.db-rating-breakdown--questions .db-rating-breakdown-label {
  width: 260px;
  white-space: normal;
  line-height: 1.35;
}

/* -------- بطاقة قابلة للطي (معلومات المنتج بشاشة عرض منتج) -------- */
.db-collapsible-card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  font-family: inherit;
  cursor: pointer;
  text-align: start;
}

.db-collapsible-card-header .db-form-section-title {
  margin: 0;
  border: none;
  padding: 0;
}

.db-collapsible-card-toggle {
  flex-shrink: 0;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-brand-blue);
  background: var(--color-white);
}

.db-collapsible-card-toggle-hide {
  display: none;
}

.db-collapsible-card-header[aria-expanded="true"] .db-collapsible-card-toggle-show {
  display: none;
}

.db-collapsible-card-header[aria-expanded="true"] .db-collapsible-card-toggle-hide {
  display: inline;
}

.db-collapsible-card-body {
  display: none;
}

.db-collapsible-card-body.open {
  display: block;
}

/* -------- نافذة عرض تقييم الطلب (Popup) — أيقونة rate-me أعلى الوسط ثم
   الأسئلة الخمسة بشكل عمود تقييم (شريط) بدل نجوم -------- */
.db-modal--rate-me {
  max-width: 480px;
  text-align: center;
}

.db-rate-me-icon {
  width: 72px;
  height: auto;
  margin: 0 auto var(--space-4);
  display: block;
}

.db-rate-me-meta {
  color: var(--color-gray-500);
  font-size: 0.82rem;
  margin: 0 0 var(--space-5);
}

.db-rate-me-meta strong {
  color: var(--color-ink-900);
}

@media (max-width: 720px) {
  .db-upload-section {
    grid-template-columns: 1fr;
  }

  .db-rating-breakdown--questions .db-rating-breakdown-label {
    width: 100%;
  }

  .db-rating-breakdown--questions .db-rating-breakdown-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .db-rating-breakdown--questions .db-rating-breakdown-count {
    align-self: flex-end;
  }
}

@media (max-width: 720px) {
  .db-topbar {
    padding: 0 var(--space-3);
  }

  .db-topbar-start,
  .db-topbar-end {
    gap: var(--space-2);
  }

  .db-status-current span[data-status-label] {
    display: none;
  }

  .db-upgrade-plans {
    grid-template-columns: 1fr;
  }

  .db-impersonate-badge span {
    display: none;
  }

  .db-main {
    padding-inline: var(--space-4);
  }

  .db-cards-row,
  .db-cards-row--5,
  .db-cards-row--6,
  .db-order-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .db-media-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .db-sub-grid {
    grid-template-columns: 1fr;
  }

  .db-form-row,
  .db-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .db-date-range-row {
    flex-direction: column;
    align-items: stretch;
  }

  .db-form-card {
    padding: var(--space-4);
  }

  .db-subscription-banner {
    padding: var(--space-4);
  }

  .db-countdown-cell {
    min-width: 54px;
    padding: 8px 4px;
  }

  .db-countdown-num {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .db-cards-row,
  .db-cards-row--5,
  .db-cards-row--6 {
    grid-template-columns: 1fr 1fr;
  }

  .db-order-status-grid {
    grid-template-columns: 1fr;
  }

  .db-status-current {
    padding: 7px 10px;
    font-size: 0.72rem;
  }
}

/* ============================================================================
   بطاقة الهدية (كارد الهدية) — نافذة [data-gift-card] + معاينة مصغّرة قابلة
   للتكبير بشاشة عرض طلب الهدية. خلفية البطاقة صورة كارد جاهزة (data-gift-image)
   وكل النصوص فوقها بمنتصف البطاقة، وشعار المؤسسة واسمها أعلى يمينها.
   ============================================================================ */
.db-modal--gift-card {
  max-width: 620px;
  padding: var(--space-6);
  text-align: center;
}

.db-gift-card {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
}

.db-gift-card-img {
  display: block;
  width: 100%;
  height: auto;
}

.db-gift-card-brand {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.db-gift-card-brand img {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

.db-gift-card-brand span {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-gray-900);
}

.db-gift-card-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-6) var(--space-4);
}

.db-gift-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  max-width: 88%;
}

.db-gift-card-recipient {
  font-size: 1.3rem;
  font-weight: 800;
  color: #000000;
  margin: 0;
}

.db-gift-card-headline {
  font-size: 0.9rem;
  color: var(--color-gray-700);
  max-width: 340px;
  margin: 0;
}

.db-gift-card-headline strong {
  color: var(--color-gray-900);
}

.db-gift-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-gray-700);
  margin-top: var(--space-1);
}

.db-gift-card-message {
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-gray-900);
  max-width: 300px;
}

.db-gift-card-qr {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.db-gift-card--thumb .db-gift-card-qr {
  bottom: var(--space-2);
}

.db-gift-card-qr img {
  width: 64px;
  height: 64px;
  background: var(--color-white);
  padding: 4px;
  border-radius: var(--radius-sm);
}

.db-gift-card-qr span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-gray-700);
}

.db-gift-card--thumb .db-gift-card-qr img {
  width: 34px;
  height: 34px;
}

.db-gift-card--thumb .db-gift-card-qr span {
  font-size: 0.56rem;
}

.db-gift-card-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* -------- معاينة مصغّرة (شاشة عرض طلب الهدية) — قابلة للضغط للتكبير -------- */
.db-gift-card--thumb {
  max-width: 380px;
  cursor: zoom-in;
  transition: box-shadow var(--transition-fast);
}

.db-gift-card--thumb:hover,
.db-gift-card--thumb:focus-visible {
  box-shadow: 0 0 0 1px var(--color-gray-300), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.db-gift-card--thumb .db-gift-card-content {
  gap: 4px;
}

.db-gift-card--thumb .db-gift-card-recipient {
  font-size: 1rem;
}

.db-gift-card--thumb .db-gift-card-headline {
  font-size: 0.72rem;
  max-width: 260px;
}

.db-gift-card--thumb .db-gift-card-meta {
  font-size: 0.62rem;
}

.db-gift-card--thumb .db-gift-card-message {
  font-size: 0.66rem;
  max-width: 230px;
}

.db-gift-card--thumb .db-gift-card-brand img {
  width: 38px;
  height: 38px;
}

.db-gift-card--thumb .db-gift-card-brand span {
  font-size: 0.66rem;
}

.db-gift-card-zoom-hint {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-ink-800);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}

.db-gift-card-zoom-hint svg {
  width: 12px;
  height: 12px;
}

.db-gift-card--thumb:hover .db-gift-card-zoom-hint,
.db-gift-card--thumb:focus-visible .db-gift-card-zoom-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================================
   قائمة عناوين العميل — نافذة [data-customer-addresses] (شاشة جميع العملاء)
   ============================================================================ */
.db-address-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: start;
  max-height: 340px;
  overflow-y: auto;
}

.db-address-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.db-address-item-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-address-item-icon svg {
  width: 16px;
  height: 16px;
}

.db-address-item-label {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-ink-900);
}

.db-address-item-text {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

/* -------- ملاحظات العميل أسفل بطاقة التقييم (شاشة عرض الطلب) -------- */
.db-rating-comment {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-300);
}

.db-rating-comment-text {
  margin: 0;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--color-gray-700);
}

/* -------- نوع العميل (سعيد/نشط/غير سعيد/أكثر طلبًا/أقل طلبًا) — جدول
   شاشات العملاء -------- */
.db-customer-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.db-customer-type svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.db-customer-type--happy {
  color: var(--color-success);
}

.db-customer-type--active {
  color: var(--color-info);
}

.db-customer-type--unhappy {
  color: var(--color-danger);
}

.db-customer-type--most {
  color: var(--color-primary-700);
}

.db-customer-type--least {
  color: var(--color-gray-500);
}

.db-customer-type-cycle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 1.4em;
}

.db-customer-type-cycle.is-cycle {
  cursor: pointer;
  user-select: none;
}

.db-customer-type-cycle.is-cycle:hover .db-customer-type {
  opacity: 0.85;
}

.db-customer-type-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.db-customer-type-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gray-300);
  display: inline-block;
}

.db-customer-type-dots i.is-on {
  background: currentColor;
  opacity: 0.85;
}

/* -------- قسم حقول يُعطَّل بالكامل حين يكون مفتاح ما مطفأ (مثال: إعدادات
   بطاقة الولاء) — عبر [data-enable-target] -------- */
.is-section-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* نسخة "مربعات أرقام" من مبدّل التبويبين — اختيار عدد واحد فقط (مثال: عدد
   أختام بطاقة الولاء) */
.db-toggle-group--squares {
  border: none;
  overflow: visible;
  gap: var(--space-2);
}

.db-toggle-group--squares button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.db-toggle-group--squares button.active {
  border-color: var(--color-brand-blue);
  background: var(--color-brand-blue);
  color: var(--color-white);
}

/* -------- معاينة بطاقة الولاء (تُبنى ديناميكيًا عبر js/dashboard.js حسب
   عدد الأختام والأيقونة وطريقة استحقاق الفائدة المختارة) — الألوان مقيّدة
   بتصميم بطاقة الولاء المرجعي (خلفية كاكية + شريط سفلي بنّي غامق)، وختم
   الفائدة أيقونة هدية ثابتة الشكل بغضّ النظر عن أيقونة الأختم المختارة -------- */
.db-loyalty-card-preview {
  background: #b5aa86;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.db-loyalty-card-preview-stamps {
  display: flex;
  direction: ltr;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  padding: var(--space-5);
}

.db-loyalty-card-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 var(--space-4);
  background: #463910;
  color: var(--color-white);
  cursor: pointer;
  user-select: none;
}

.db-loyalty-card-preview-label {
  font-size: 0.8rem;
  font-weight: 700;
}

.db-loyalty-card-preview-cta {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--color-primary);
  animation: db-loyalty-cta-pulse 1.6s ease-in-out infinite;
}

@keyframes db-loyalty-cta-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-loyalty-card-preview-cta {
    animation: none;
  }
}

.db-loyalty-card-preview-info {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.db-loyalty-card-preview-info svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.db-loyalty-stamp {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #362b07;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-loyalty-stamp svg {
  width: 70px;
  height: 70px;
}

.db-loyalty-stamp.is-empty {
  opacity: 0.4;
}

.db-loyalty-stamp.is-reward {
  width: 42px;
  height: 42px;
  cursor: pointer;
}

.db-loyalty-stamp.is-reward svg {
  width: 42px;
  height: 42px;
}

/* -------- لوحة "أسئلة شائعة" تظهر أسفل بطاقة الولاء عند الضغط على أيقونة
   الاستعلام — محتواها ديناميكي حسب إعدادات البطاقة أعلاه -------- */
.db-loyalty-card-faq {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.db-loyalty-card-faq[hidden] {
  display: none;
}

.db-loyalty-card-faq-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.db-loyalty-card-faq-item--hint {
  align-items: center;
}

.db-loyalty-card-faq-item--hint .db-loyalty-card-faq-answer {
  font-style: italic;
  color: var(--color-gray-500);
}

.db-loyalty-card-faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-loyalty-card-faq-icon svg {
  width: 16px;
  height: 16px;
}

.db-loyalty-card-faq-question {
  margin: 0 0 2px;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--color-ink-900);
}

.db-loyalty-card-faq-answer {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-gray-700);
  line-height: 1.6;
}

/* -------- نافذة "المكافأة" — تفتح بالضغط على أيقونة الهدية ببطاقة الولاء -------- */
.db-modal--loyalty-reward {
  max-width: 340px;
  padding: var(--space-6);
  text-align: center;
}

.db-loyalty-reward-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-4);
  display: block;
}

.db-loyalty-reward-name {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-ink-900);
}

.db-loyalty-reward-desc {
  margin: 0 0 var(--space-4);
  font-size: 0.84rem;
  color: var(--color-gray-700);
  line-height: 1.6;
}

.db-loyalty-reward-discount {
  display: inline-block;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: var(--color-white);
  font-weight: 800;
  font-size: 0.9rem;
}

/* ============================================================================
   محادثة/تذكرة (المراسلات مع العملاء، تذاكر الدعم)
   ============================================================================
   اتفاقية الجانب: فقاعة "أنت" (التاجر أو فريق الدعم عند ردّه) تظهر دائمًا
   يمين الشاشة، وفقاعة الطرف الآخر (العميل أو أنت عند فتح تذكرة) يسار
   الشاشة — بغضّ النظر عن اتجاه RTL، بنفس اتفاقية واتساب/تيليجرام. */
.db-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 480px;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
}

.db-bubble-row {
  display: flex;
  flex-direction: column;
  max-width: 72%;
  gap: 4px;
}

.db-bubble-row--out {
  align-self: flex-start;
  align-items: flex-start;
}

.db-bubble-row--in {
  align-self: flex-end;
  align-items: flex-end;
}

.db-bubble {
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.86rem;
  line-height: 1.6;
}

.db-bubble-row--out .db-bubble {
  background: var(--color-brand-blue);
  color: var(--color-white);
  border-start-end-radius: 4px;
}

.db-bubble-row--in .db-bubble {
  background: var(--color-white);
  color: var(--color-ink-900);
  border: 1px solid var(--color-gray-300);
  border-start-start-radius: 4px;
}

.db-bubble-media {
  display: block;
  max-width: 220px;
  width: 100%;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  cursor: pointer;
}

.db-bubble-meta {
  font-size: 0.7rem;
  color: var(--color-gray-500);
  padding: 0 4px;
}

.db-thread-reply {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-4);
}

.db-thread-reply-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.db-thread-reply-row .db-form-textarea {
  flex: 1;
  min-height: 46px;
  max-height: 120px;
}

.db-thread-attach-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-thread-attach-btn:hover {
  border-color: var(--color-brand-blue);
  color: var(--color-brand-blue);
}

.db-thread-attach-btn svg {
  width: 18px;
  height: 18px;
}

.db-thread-send-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-brand-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-thread-send-btn svg {
  width: 18px;
  height: 18px;
}

/* شريط معلومات العميل أعلى شاشة محادثة العميل — اسم + أزرار الوصول
   السريع لشاشاته الفرعية (طلبات/تقييمات/عناوين/مكافآت/شكاوى/هدايا) */
.db-thread-customer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.db-thread-customer-name {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
}

/* ============================================================================
   جدول صلاحيات الأدوار — شاشات الإضافة/التعديل/العرض بقسم "الأدوار"
   ============================================================================
   صف عنوان قسم (.db-permission-group) يفصل شاشات كل قسم من القائمة
   الجانبية داخل نفس الجدول الطويل، وأربعة أعمدة مربّعات اختيار (عرض/
   إضافة/تعديل/حذف) لكل شاشة — مع مربّع "تحديد الكل" أعلى كل عمود
   [data-select-all] يُفعَّل عبر js/dashboard.js. */
.db-permission-table th input[type="checkbox"],
.db-permission-table td input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--color-brand-blue);
  cursor: pointer;
}

.db-permission-table td input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.65;
}

.db-permission-group td {
  background: var(--color-bg-alt);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--color-gray-900);
  padding: 10px 16px;
}

/* ============================================================================
   إدارة شاشة التلفزيون (dashboard/tv-screen-management.html)
   ============================================================================ */
.db-tv-mgmt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-300);
}

.db-tv-mgmt-toggle-label {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.db-tv-mgmt-toggle-hint {
  font-size: 0.82rem;
  color: var(--color-gray-500);
}

.db-tv-mgmt-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.db-tv-mgmt-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--color-ink-900);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}

.db-tv-mgmt-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-tv-mgmt-rules li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--color-gray-700);
  line-height: 1.6;
}

.db-tv-mgmt-rules li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary);
}

.db-tv-mgmt-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-gray-500);
  font-size: 0.88rem;
}


/* ============================================================================
   شاشة عرض التلفاز المباشرة (TV Live Display Board) — dashboard/tv-display.html
   ============================================================================
   شاشة قراءة فقط (بدون Topbar/Sidebar) تُفتح مباشرة على متصفح جهاز التلفاز
   عبر رابط خارجي (انظر بطاقة "رابط تطبيق التلفاز" بشاشة الهوية). كل الأحجام
   بوحدة rem مبنية على db-tv-page font-size (يتمدد مع عرض الشاشة) حتى تبقى
   القراءة واضحة من مسافة بعيدة. التحديث التلقائي (الساعة، الطلبات الجديدة،
   تقدّم الحالة، التذييل المتحرك) عبر js/dashboard.js مربوط بمعرّف #dbTvBoard. */
.db-tv-page {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(49, 100, 245, 0.16), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(248, 203, 37, 0.08), transparent 60%),
    var(--color-ink-900);
  color: var(--color-white);
  font-size: clamp(14px, 1.05vw, 21px);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem 1.8rem 1rem;
  box-sizing: border-box;
}

.db-tv-page * {
  box-sizing: border-box;
}

.db-tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}

.db-tv-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.db-tv-brand-logo {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-white);
}

.db-tv-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.db-tv-brand-name {
  font-size: 1.5rem;
  font-weight: 800;
}

.db-tv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-danger);
  background: rgba(225, 26, 44, 0.14);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
}

.db-tv-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-danger);
  animation: db-tv-pulse 1.6s ease-in-out infinite;
}

.db-tv-clock-wrap {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.db-tv-date {
  font-size: 0.85rem;
  color: var(--color-gray-500);
  font-weight: 500;
}

.db-tv-clock {
  font-size: 2.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  direction: ltr;
}

.db-tv-stats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
}

.db-tv-stat {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-ink-700);
  border: 1px solid var(--color-ink-600);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
}

.db-tv-stat-icon {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 203, 37, 0.14);
  color: var(--color-primary);
}

.db-tv-stat-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.db-tv-stat-icon--blue {
  background: rgba(49, 100, 245, 0.16);
  color: #7d9dff;
}

.db-tv-stat-icon--info {
  background: rgba(14, 165, 176, 0.16);
  color: #3cd7e4;
}

.db-tv-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  transition: color 0.3s ease;
}

.db-tv-stat-value .currency-icon svg {
  width: 0.75rem;
  height: 0.75rem;
  margin-inline-start: 0.2rem;
  vertical-align: middle;
}

.db-tv-stat-label {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  color: var(--color-gray-500);
  font-weight: 600;
}

.db-tv-stat-value.is-updated {
  color: var(--color-primary);
}

.db-tv-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: 1.1rem;
}

.db-tv-orders-panel,
.db-tv-panel {
  background: var(--color-ink-700);
  border: 1px solid var(--color-ink-600);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.db-tv-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.db-tv-panel-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.db-tv-panel-title svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-primary);
}

.db-tv-panel-count {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  font-weight: 600;
}

.db-tv-order-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-inline-end: 0.2rem;
}

/* شاشة التلفاز: إخفاء شريط التمرير بصريًا مع إبقاء التمرير شغّالًا بالماوس/
   اللمس — الصفحة نفسها db-tv-page وأي قائمة داخلية قابلة للتمرير
   (الطلبات/الأكثر طلبًا/آخر التقييمات). */
.db-tv-page,
.db-tv-order-list,
.db-tv-rank-list,
.db-tv-rating-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.db-tv-page::-webkit-scrollbar,
.db-tv-order-list::-webkit-scrollbar,
.db-tv-rank-list::-webkit-scrollbar,
.db-tv-rating-list::-webkit-scrollbar {
  display: none;
}

.db-tv-order-card {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--color-ink-800);
  border: 1px solid var(--color-ink-600);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
}

.db-tv-order-type {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-gray-500);
}

.db-tv-order-type svg {
  width: 1.2rem;
  height: 1.2rem;
}

.db-tv-order-type--delivery {
  color: #7d9dff;
  background: rgba(49, 100, 245, 0.16);
}

.db-tv-order-type--pickup {
  color: var(--color-primary);
  background: rgba(248, 203, 37, 0.14);
}

.db-tv-order-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.db-tv-order-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.db-tv-order-id {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.db-tv-order-customer {
  font-size: 0.85rem;
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-tv-order-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  color: var(--color-gray-500);
}


.db-tv-order-timer {
  flex: none;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-500);
  direction: ltr;
}

.db-tv-order-status {
  flex: none;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.db-tv-order-status--new {
  background: rgba(49, 100, 245, 0.18);
  color: #7d9dff;
}

.db-tv-order-status--prep {
  background: rgba(248, 203, 37, 0.18);
  color: var(--color-primary);
}

.db-tv-order-status--transit {
  background: rgba(14, 165, 176, 0.18);
  color: #3cd7e4;
}

.db-tv-order-status--ready {
  background: rgba(47, 174, 96, 0.18);
  color: #4ade80;
}

.db-tv-order-card.is-entering {
  animation: db-tv-flash-in 0.7s ease;
}

.db-tv-order-card.is-leaving {
  animation: db-tv-fade-out 0.5s ease forwards;
}

.db-tv-side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 0;
}

.db-tv-side .db-tv-panel {
  flex: 1;
}

.db-tv-side-row {
  flex: 1;
  display: flex;
  gap: 1.1rem;
  min-height: 0;
}

.db-tv-side-row .db-tv-panel--compact {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
}

.db-tv-panel--compact .db-tv-panel-title {
  font-size: 0.9rem;
}

/* ---- قائمة "كميات تنفد قريبًا" ---- */
.db-tv-stock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}

.db-tv-stock-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.db-tv-stock-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(225, 26, 44, 0.14);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-tv-stock-icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

.db-tv-stock-icon--warning {
  background: rgba(245, 158, 11, 0.16);
  color: var(--color-warning);
}

.db-tv-stock-info {
  flex: 1;
  min-width: 0;
}

.db-tv-stock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.db-tv-stock-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-tv-stock-qty {
  flex: none;
  margin-inline-start: 0.5rem;
  font-weight: 800;
  color: var(--color-danger);
}

.db-tv-stock-qty--warning {
  color: var(--color-warning);
}

.db-tv-stock-bar {
  height: 0.3rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.db-tv-stock-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-danger);
}

.db-tv-stock-bar-fill--warning {
  background: var(--color-warning);
}

.db-tv-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}

.db-tv-rank-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.db-tv-rank-num {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(248, 203, 37, 0.14);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-tv-rank-info {
  flex: 1;
  min-width: 0;
}

.db-tv-rank-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
}

.db-tv-rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-tv-rank-count {
  color: var(--color-gray-500);
  flex: none;
  margin-inline-start: 0.5rem;
}

.db-tv-rank-bar {
  height: 0.35rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.db-tv-rank-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-600));
}

.db-tv-rating-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.db-tv-rating-item {
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--color-ink-600);
}

.db-tv-rating-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.db-tv-rating-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.db-tv-rating-stars {
  display: inline-flex;
  gap: 0.1rem;
  color: var(--color-ink-600);
}

.db-tv-rating-stars svg {
  width: 0.85rem;
  height: 0.85rem;
}

.db-tv-rating-stars .is-filled {
  color: var(--color-primary);
}

.db-tv-rating-name {
  font-size: 0.78rem;
  color: var(--color-gray-500);
  font-weight: 600;
}

.db-tv-rating-text {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-gray-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-tv-rating-item.is-entering {
  animation: db-tv-flash-in 0.7s ease;
}

@keyframes db-tv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes db-tv-flash-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
    box-shadow: 0 0 0 2px var(--color-primary);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    box-shadow: none;
  }
}

@keyframes db-tv-fade-out {
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-tv-live-dot,
  .db-tv-order-card.is-entering,
  .db-tv-order-card.is-leaving,
  .db-tv-rating-item.is-entering {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .db-tv-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .db-tv-body {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   شريط التنبيهات — ثلاثة أماكن على شكل ناقل (dashboard/tv-display.html)
   ============================================================================
   كل تنبيه (طلب جديد / وصول مركبة / رسالة عميل / تقييم سيئ أو شكوى) يدخل
   بمكان 3، فينتقل من كان بمكان 3 لمكان 2، ومن كان بمكان 2 لمكان 1، ومن
   كان بمكان 1 يختفي — الأماكن الثلاثة تعمل بنفس الوقت (عدّاد مستقل لكل
   منها)، لكن الصوت يعمل بالتناوب (تنبيه واحد بكل مرة) لا الجميع معًا.
   الوميض (.is-flash) يُشغَّل لحظة وصول تنبيه جديد لجذب الانتباه. */
.db-tv-alerts-strip {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.db-tv-alert-slot {
  display: flex;
  min-height: 8rem;
}

.db-tv-alert-slot.is-flash .db-tv-alert-card {
  animation: db-tv-alert-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1), db-tv-slot-flash 1.3s ease 2;
}

.db-tv-alert-slot-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-ink-600);
  border-radius: var(--radius-lg);
  color: var(--color-gray-700);
  font-size: 0.85rem;
}

@keyframes db-tv-slot-flash {
  0%, 100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 0 3px rgba(248, 203, 37, 0.45), 0 0 26px rgba(248, 203, 37, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-tv-alert-slot.is-flash .db-tv-alert-card {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .db-tv-alerts-strip {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   بطاقة التنبيه (طلب جديد / وصول مركبة / رسالة عميل / تقييم سيئ أو شكوى)
   ============================================================================
   تُعرض داخل أحد مكاني .db-tv-alert-slot (انظر قسم "شريط التنبيهات" أعلاه)
   — بحجم مضغوط يلائم عرض مكانين جنبًا لجنب، وليس نافذة منبثقة بمنتصف
   الشاشة. */
.db-tv-alert-card {
  width: 100%;
  background: var(--color-ink-700);
  border: 1px solid var(--color-ink-600);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1.2rem 0.7rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  animation: db-tv-alert-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.db-tv-alert-icon {
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 auto 0.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 203, 37, 0.14);
  color: var(--color-primary);
}

.db-tv-alert-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.db-tv-alert-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: var(--color-white);
}

.db-tv-alert-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-white);
}

.db-tv-alert-card--gold {
  border-top-color: var(--color-primary);
}

.db-tv-alert-card--info .db-tv-alert-icon {
  background: rgba(14, 165, 176, 0.16);
  color: #3cd7e4;
}

.db-tv-alert-card--info {
  border-top-color: var(--color-info);
}

.db-tv-alert-card--blue .db-tv-alert-icon {
  background: rgba(49, 100, 245, 0.16);
  color: #7d9dff;
}

.db-tv-alert-card--blue {
  border-top-color: var(--color-brand-blue);
}

.db-tv-alert-card--danger .db-tv-alert-icon {
  background: rgba(225, 26, 44, 0.16);
  color: #f26a76;
}

.db-tv-alert-card--danger {
  border-top-color: var(--color-danger);
}

.db-tv-alert-stars {
  display: flex;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.db-tv-alert-stars svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-ink-600);
}

.db-tv-alert-stars svg.is-filled {
  color: #f26a76;
}

.db-tv-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.22rem 0;
  border-bottom: 1px dashed var(--color-ink-600);
  font-size: 0.78rem;
}

.db-tv-alert-row:last-of-type {
  border-bottom: none;
}

.db-tv-alert-row-label {
  color: var(--color-gray-500);
  font-weight: 600;
}

.db-tv-alert-row-value {
  color: var(--color-white);
  font-weight: 800;
}

.db-tv-alert-text {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--color-gray-300);
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.7rem;
}

.db-tv-alert-timer {
  height: 0.3rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 0.55rem;
}

.db-tv-alert-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-full);
  background: currentColor;
  color: var(--color-primary);
  transition-property: width;
  transition-timing-function: linear;
}

.db-tv-alert-card--info .db-tv-alert-bar-fill {
  color: var(--color-info);
}

.db-tv-alert-card--blue .db-tv-alert-bar-fill {
  color: var(--color-brand-blue);
}

.db-tv-alert-card--danger .db-tv-alert-bar-fill {
  color: var(--color-danger);
}

.db-tv-alert-countdown {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

.db-tv-alert-dismiss {
  margin-top: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  border: 1px solid var(--color-ink-600);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.4rem 1.3rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s ease;
}

.db-tv-alert-dismiss:hover {
  background: rgba(255, 255, 255, 0.16);
}

@keyframes db-tv-alert-pop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-tv-alert-card {
    animation: none;
  }
}

/* ============================================================================
   شاشة دخول التلفاز (Lock Screen) — dashboard/tv-login.html
   ============================================================================
   شاشة قفل مستقلة (بدون Topbar/Sidebar) تفتح قبل شاشة العرض المباشرة —
   حالتان: (1) رمز QR + رمز إقران يُدخله المدير من جهاز آخر، ثم (2) لوحة
   PIN لفتح الشاشة فعليًا. عند نجاح الإدخال تنتقل تلقائيًا لـ tv-display.html. */
.db-tv-login-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 550px at 20% -10%, rgba(248, 203, 37, 0.1), transparent 60%),
    radial-gradient(1000px 550px at 90% 110%, rgba(49, 100, 245, 0.14), transparent 60%),
    var(--color-ink-900);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

.db-tv-login-page * {
  box-sizing: border-box;
}

.db-tv-login-card {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.db-tv-login-logo {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.db-tv-login-name {
  margin: 1.1rem 0 0.3rem;
  font-size: 1.6rem;
  font-weight: 800;
}

.db-tv-login-sub {
  margin: 0 0 1.8rem;
  font-size: 0.85rem;
  color: var(--color-gray-500);
}

/* -------------------------- ساعة أنالوجية بمنتصف شاشة الدخول -------------------------- */
.db-tv-analog-clock {
  position: relative;
  width: 12rem;
  height: 12rem;
  margin: 0.6rem 0 1.8rem;
  border-radius: 50%;
  background: var(--color-ink-700);
  border: 1px solid var(--color-ink-600);
  box-shadow: var(--shadow-lg);
}

.db-tv-analog-tick {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  width: 2px;
  height: 0.6rem;
  background: var(--color-gray-500);
  transform-origin: 50% 5.4rem;
  margin-inline-start: -1px;
}

.db-tv-analog-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  border-radius: var(--radius-full);
  background: var(--color-white);
}

.db-tv-analog-hand--hour {
  width: 5px;
  height: 3.1rem;
  margin-inline-start: -2.5px;
}

.db-tv-analog-hand--minute {
  width: 4px;
  height: 4.2rem;
  margin-inline-start: -2px;
}

.db-tv-analog-hand--second {
  width: 2px;
  height: 4.6rem;
  margin-inline-start: -1px;
  background: var(--color-primary);
}

.db-tv-analog-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin: -0.3rem 0 0 -0.3rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.db-tv-login-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--color-gray-500);
}

.db-tv-login-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-primary);
  animation: db-tv-pulse 1.4s ease-in-out infinite;
}

.db-tv-login-status.is-success .db-tv-login-status-dot {
  background: var(--color-success);
  animation: none;
}

.db-tv-login-status.is-success {
  color: var(--color-success);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .db-tv-login-status-dot {
    animation: none;
  }
}

/* ============================================================================
   إدارة شاشة التلفزيون (dashboard/tv-screen-management.html) — نسخة لوحة
   التحكم من admin_app/pages/tv-screen-management.html: مفتاح تشغيل/إيقاف +
   عدّاد وقت التشغيل + قواعد الإيقاف التلقائي + سجل تشغيل/إطفاء بجدول.
   ============================================================================ */
.db-tv-mgmt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-300);
}

.db-tv-mgmt-toggle-label {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.db-tv-mgmt-toggle-hint {
  font-size: 0.82rem;
  color: var(--color-gray-500);
}

.db-tv-mgmt-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.db-tv-mgmt-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--color-ink-900);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}

.db-tv-mgmt-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-tv-mgmt-rules li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--color-gray-700);
  line-height: 1.6;
}

.db-tv-mgmt-rules li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary);
}

.db-tv-mgmt-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-gray-500);
  font-size: 0.88rem;
}

.db-demo-banner {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 10px 16px;
  background: #fff7d6;
  border-bottom: 1px solid #f0d56b;
  color: #6b4f00;
  font-size: 0.92rem;
  text-align: center;
}

.db-demo-banner strong {
  font-weight: 800;
}

.db-demo-banner__link {
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: underline;
}

.db-body--demo-readonly .db-status-switch,
.db-body--demo-readonly .db-status-menu {
  pointer-events: none;
  opacity: 0.65;
}