:root {
  --bg: #edf3ff;
  --surface: #ffffff;
  --surface-2: #f5f8ff;
  --text: #101d39;
  --muted: #687895;
  --line: #dce5f2;
  --primary: #1455d9;
  --primary-strong: #0b3da6;
  --primary-light: #e6efff;
  --navy: #061b4f;
  --navy-2: #031238;
  --blue: #1455d9;
  --green: #0a9b5b;
  --amber: #f0a500;
  --violet: #6d45d8;
  --danger: #df3345;
  --shadow: 0 10px 30px rgba(22, 48, 90, 0.08);
  --shadow-lg: 0 20px 50px rgba(3, 18, 56, 0.16);
  --radius: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --bg: #0c1220;
  --surface: #131a2c;
  --surface-2: #1a2338;
  --text: #f3efe4;
  --muted: #a3a0b0;
  --line: #2a3350;
  --primary: #e6c98a;
  --primary-strong: #d8b76a;
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

/* "overflow: hidden" على مستوى html ينفع بس بصفحات لوحة التحكم (.erp-shell) عشان القائمة
   الجانبية تبقى ثابتة ومحتوى الصفحة يتحرك لحاله — لو طبقناها على كل الصفحات (زي صفحة تسجيل
   الدخول) بتقفل أي تمرير للصفحة كلها، ولو المحتوى أطول من الشاشة (بالموبايل مثلاً) يختفي جزء
   منه (زي زر "دخول") بدون أي طريقة توصله. لذا نربطها بوجود body.erp-shell تحديداً. */
html:has(body.erp-shell) {
  overflow: hidden;
}

body.erp-shell {
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(179, 137, 63, 0.09), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(12, 18, 32, 0.05), transparent 34rem),
    linear-gradient(145deg, var(--bg), var(--surface-2));
  color: var(--text);
  font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--text);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

button:active {
  transform: scale(0.97);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
}

.erp-shell {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  height: 100%;
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 290px;
  height: 100vh;
  height: 100dvh;
  padding: 24px 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(230, 201, 138, 0.1), transparent 45%),
    linear-gradient(165deg, #0c1220, #10182c 60%, #101a1a);
  color: #fff;
  border-left: 1px solid rgba(230, 201, 138, 0.12);

  /* القائمة الجانبية (يمين الشاشة بالعربي RTL) عندها سكرول خاص فيها لو محتواها طويل.
     نقلب الاتجاه لـ ltr على الحاوية نفسها فقط عشان شريط التمرير يرسم على يمين الشاشة
     (حافة القائمة الخارجية) بدل ما ينرسم بمنتصف الصفحة، ثم نرجّع rtl على كل العناصر
     الداخلية مباشرة عشان النصوص والترتيب العربي يضلوا طبيعيين تماماً. */
  direction: ltr;
  overflow-y: auto;
  overflow-x: hidden;
}

.app-sidebar > * {
  direction: rtl;
}

.brand-lockup {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(179, 137, 63, 0.35);
}

.brand-lockup strong {
  display: block;
  font-size: 1.02rem;
}

.brand-lockup small,
.sidebar-status small,
.metric-card small,
.repair-item small,
.system-grid small {
  display: block;
  color: var(--muted);
}

.brand-lockup small,
.sidebar-status small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
}

.side-nav {
  display: grid;
  gap: 8px;
}

.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 13px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: 200ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .side-nav a:hover {
    background: rgba(230, 201, 138, 0.09);
    color: #fff;
    transform: translateX(-2px);
  }
}

.side-nav a.active {
  background: linear-gradient(90deg, rgba(230, 201, 138, 0.18), rgba(230, 201, 138, 0.04));
  color: var(--primary-light);
  box-shadow: inset 3px 0 0 var(--primary-light);
}

.side-nav b {
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.76rem;
}

.sidebar-user {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding: 10px;
  border: 1px solid rgba(230, 201, 138, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.user-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-weight: 900;
}

.user-meta {
  min-width: 0;
}

.user-meta strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-meta small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
}

.sidebar-user .icon-button.small {
  border-color: rgba(230, 201, 138, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.sidebar-status {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(230, 201, 138, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.13);
}

.app-frame {
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  /* هذا هو سكرول "الصفحة المفتوحة" — مستقل تماماً عن سكرول القائمة الجانبية.
     بما إنه العمود الأيسر بتخطيط RTL، شريط تمريره الطبيعي (بدون أي تعديل اتجاه)
     يرتسم أصلاً على يسار الشاشة تماماً. */
  overflow-y: auto;
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px 28px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.topbar-kicker,
.eyebrow {
  margin: 0 0 4px;
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.topbar h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.global-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(460px, 34vw);
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: 200ms var(--ease);
}

.global-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.global-search span {
  width: 15px;
  height: 15px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  position: relative;
}

.global-search span::after {
  position: absolute;
  width: 7px;
  height: 2px;
  content: "";
  background: var(--muted);
  transform: rotate(45deg);
  left: -5px;
  bottom: -3px;
}

.global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.primary-action,
.ghost-button,
.command-strip button,
.segmented-actions button,
.report-chips button,
.scan-box button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #1a1a2e;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(179, 137, 63, 0.22);
}

.primary-action:hover,
.command-strip button:hover,
.segmented-actions button:hover,
.scan-box button:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(179, 137, 63, 0.3);
  transform: translateY(-1px);
}

.primary-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.ghost-button,
.report-chips button,
.command-strip button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.ghost-button:hover,
.report-chips button:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  transform: translateY(-1px);
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.icon-button:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:not(.small):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
}

.icon-button.small {
  width: 36px;
  height: 36px;
}

.theme-sun {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent);
}

.app-content {
  display: grid;
  gap: 18px;
  padding: 24px 28px 88px;
  min-width: 0;
}

.command-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.command-strip button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.metrics-grid,
.lower-grid,
.system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric-card,
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease);
}

.table-wrap {
  min-width: 0;
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.panel:hover {
  box-shadow: var(--shadow-lg);
}

@media (hover: hover) and (pointer: fine) {
  .metric-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
}

.metric-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  content: "";
  background: var(--accent);
}

.accent-blue { --accent: var(--blue); }
.accent-green { --accent: var(--green); }
.accent-amber { --accent: var(--amber); }
.accent-violet { --accent: var(--violet); }
.accent-red { --accent: var(--danger); }
.accent-indigo { --accent: #2f5fed; }

/* بطاقة "مساعد العراقي" بلوحة القيادة — تصميم مميّز (تدرّج لوني + توهّج) يفرّقها بصرياً عن
   بطاقات الإحصائيات العادية، لأنها رابط لأداة/مساعد ذكاء اصطناعي مو رقم إحصائي. */
.assistant-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #2f5fed 0%, var(--violet) 100%);
  box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease);
}

.assistant-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -20%, rgba(255, 255, 255, 0.35), transparent 60%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .assistant-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
}

.assistant-card-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.assistant-card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.assistant-card-text strong {
  font-size: 1rem;
  font-weight: 800;
}

.assistant-card-text small {
  opacity: 0.85;
  font-size: 0.78rem;
}

.assistant-card-arrow {
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
  opacity: 0.9;
}

/* بطاقة "المتجر الإلكتروني" بلوحة القيادة — نفس فكرة بطاقة المساعد الذكي (تدرّج + توهّج)
   بلون تركواز/سماوي مميّز عن باقي البطاقات (بدل الذهبي الأولي اللي ما عجب المستخدم). */
.store-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
  box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease);
}

.store-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -20%, rgba(255, 255, 255, 0.4), transparent 60%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .store-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
}

.store-card-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.store-card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.store-card-text strong {
  font-size: 1rem;
  font-weight: 800;
}

.store-card-text small {
  opacity: 0.85;
  font-size: 0.78rem;
}

.store-card-arrow {
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
  opacity: 0.9;
}

/* بطاقات لوحة القيادة الرئيسية (مبيعات اليوم/صيانة/مخزون/ذمم/أقساط) — أيقونة + تدرّج لوني
   خاص يعبّر عن محتوى كل بطاقة، بنفس روح بطاقتي المساعد والمتجر. كلاس مستقل تماماً عن
   metric-card (المستخدم بصفحات ثانية: التقارير، الفنيين، سعر الصرف) — قصداً، حتى تصميم
   هذي الصفحات الثانية يضل بدون أي تغيير. */
.dash-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  box-shadow: var(--shadow);
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease);
}

.dash-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -20%, rgba(255, 255, 255, 0.3), transparent 60%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .dash-tile:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
}

.dash-tile-icon {
  position: relative;
  z-index: 1;
  font-size: 1.9rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.dash-tile-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dash-tile-text .metric-label {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 0.8rem;
}

.dash-tile-text strong {
  display: block;
  margin-bottom: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}

.dash-tile-text small {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
}

.dash-tile-sales { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.dash-tile-repair { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.dash-tile-stock { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.dash-tile-receivables { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); }
.dash-tile-due { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.dash-tile-overdue { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }

/* بطاقات صفحة الإعدادات الرئيسية (/Settings) — نفس فكرة وتصميم بطاقات لوحة القيادة أعلاه
   (dash-tile) بس بألوان مستقلة خاصة فيها، حتى تصير صفحة الإعدادات متناسقة بصرياً مع باقي
   النظام بدل التصميم النصي القديم. */
.dash-tile-settings-general { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.dash-tile-settings-lists { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); }
.dash-tile-settings-roles { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); }
.dash-tile-settings-users { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.dash-tile-settings-devicemodels { background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); }
.dash-tile-settings-technicians { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.dash-tile-settings-auditlogs { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.dash-tile-settings-recovery { background: linear-gradient(135deg, #db2777 0%, #be185d 100%); }
.dash-tile-settings-assistant { background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%); }
.dash-tile-settings-backup {
  width: 100%;
  border: 0;
  text-align: start;
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
}

.dash-tile-settings-backup:disabled {
  cursor: wait;
  filter: saturate(.65);
  opacity: .82;
}

.database-backup-status {
  display: none;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.database-backup-status:not(:empty) { display: block; }
.database-backup-status.working { border-color: rgba(37, 99, 235, .3); background: rgba(37, 99, 235, .08); color: var(--blue); }
.database-backup-status.success { border-color: rgba(22, 163, 74, .3); background: rgba(22, 163, 74, .09); color: var(--green); }
.database-backup-status.error { border-color: rgba(220, 38, 38, .3); background: rgba(220, 38, 38, .08); color: var(--danger); }

.assistant-cloud-settings { max-width: 920px; }
.assistant-cloud-state { display:flex; gap:12px; align-items:center; margin-bottom:20px; padding:15px 17px; border:1px solid; border-radius:var(--radius); }
.assistant-cloud-state > span { display:grid; width:38px; height:38px; place-items:center; flex:0 0 38px; border-radius:50%; color:#fff; font-size:1.15rem; font-weight:900; }
.assistant-cloud-state strong,.assistant-cloud-state small { display:block; }
.assistant-cloud-state small { margin-top:3px; color:var(--muted); }
.assistant-cloud-state.ready { border-color:rgba(22,163,74,.3); background:rgba(22,163,74,.08); }
.assistant-cloud-state.ready > span { background:var(--green); }
.assistant-cloud-state.missing { border-color:rgba(217,119,6,.3); background:rgba(217,119,6,.08); }
.assistant-cloud-state.missing > span { background:var(--amber); }
.assistant-cloud-checks { display:grid; gap:10px; align-content:center; }
.assistant-cloud-checks label { display:flex; gap:9px; align-items:flex-start; color:var(--text); font-weight:700; cursor:pointer; }
.assistant-cloud-checks label.danger { color:var(--danger); }
.assistant-cloud-checks input { margin-top:5px; }
.assistant-cloud-note { display:grid; gap:4px; margin:20px 0; padding:14px 16px; border-inline-start:4px solid var(--blue); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--blue) 7%,var(--surface)); }
.assistant-cloud-note span { color:var(--muted); font-size:.86rem; }

.metric-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.45rem;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 14px;
  min-width: 0;
}

.workspace-grid > * {
  min-width: 0;
}

.panel {
  padding: 18px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.scan-box {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.scan-box label {
  color: var(--muted);
  font-weight: 800;
}

.scan-box div {
  display: flex;
  gap: 8px;
}

.scan-box input {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  direction: ltr;
  text-align: left;
}

.cart-list,
.repair-timeline,
.inventory-list,
.finance-bars,
.report-chips {
  display: grid;
  gap: 10px;
}

.cart-row,
.payment-box,
.repair-item,
.inventory-list div,
.system-grid div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.cart-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.cart-row span {
  min-width: 0;
}

.payment-box {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 13px;
}

.payment-box div,
.finance-bars div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.payment-box span {
  color: var(--muted);
}

.payment-box .total {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.payment-box .total strong {
  color: var(--primary);
  font-size: 1.2rem;
}

.segmented-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.segmented-actions button {
  background: var(--surface-2);
  color: var(--text);
}

.segmented-actions .active {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #1a1a2e;
}

.repair-item {
  padding: 13px;
}

.repair-code {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  direction: ltr;
}

.repair-item strong {
  display: block;
}

.progress {
  height: 7px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.progress.complete span {
  background: var(--green);
}

.lower-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.inventory-list div {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
}

.stock {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stock.high { background: var(--green); }
.stock.mid { background: var(--amber); }
.stock.low { background: var(--danger); }

.finance-bars div {
  display: grid;
  grid-template-columns: 78px 1fr 42px;
}

.finance-bars b {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #38bdf8);
}

.finance-bars strong,
.finance-bars span {
  color: var(--muted);
  font-size: 0.86rem;
}

.report-chips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-chips button {
  white-space: normal;
}

.system-panel {
  box-shadow: none;
}

.pill-success {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.13);
  color: var(--green);
  font-weight: 900;
  white-space: nowrap;
}

.system-grid div {
  padding: 14px;
}

.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 28px 22px;
  color: var(--muted);
  font-size: 0.86rem;
}

.mobile-nav {
  display: none;
}

.topbar-logout-form {
  display: none;
}

.mobile-menu-toggle {
  display: none;
}

.mobile-sidebar-close {
  display: none;
}

.mobile-nav-backdrop {
  display: none;
}

/* ===== Shared CRUD module styles (Customers, Products, ...) ===== */

.alert-success-bar {
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
  font-weight: 800;
}

.customers-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.customers-search-bar input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: 200ms var(--ease);
}

.customers-search-bar input[type="search"]:focus,
.customers-search-bar select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.customers-search-bar select {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: 200ms var(--ease);
}

.empty-state {
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.data-table th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.data-table tbody tr {
  transition: background 180ms var(--ease);
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-2));
}

.row-link {
  color: var(--text);
  font-weight: 800;
}

.row-link:hover {
  color: var(--primary-strong);
}

.mono {
  direction: ltr;
  font-family: "Consolas", "Courier New", monospace;
  text-align: left;
}

/* جدول المنتجات: توزيع ثابت ومتوازن يمنع عمود الباركود من ابتلاع المساحة الفارغة. */
.products-data-table {
  min-width: 1080px;
  table-layout: fixed;
}

.products-data-table .products-col-select { width: 3%; }
.products-data-table .products-col-product { width: 14%; }
.products-data-table .products-col-category { width: 17%; }
.products-data-table .products-col-barcode { width: 14%; }
.products-data-table .products-col-quantity { width: 8%; }
.products-data-table .products-col-cost { width: 12%; }
.products-data-table .products-col-price { width: 10%; }
.products-data-table .products-col-status { width: 8%; }
.products-data-table .products-col-actions { width: 14%; }

.products-data-table th,
.products-data-table td {
  vertical-align: middle;
}

.products-data-table tbody tr {
  height: 72px;
}

.products-data-table tbody td {
  padding-block: 9px;
}

.products-data-table th:nth-child(1),
.products-data-table td:nth-child(1),
.products-data-table th:nth-child(5),
.products-data-table td:nth-child(5),
.products-data-table th:nth-child(6),
.products-data-table td:nth-child(6),
.products-data-table th:nth-child(7),
.products-data-table td:nth-child(7),
.products-data-table th:nth-child(8),
.products-data-table td:nth-child(8),
.products-data-table th:nth-child(9),
.products-data-table td:nth-child(9) {
  text-align: center;
}

.products-data-table th:nth-child(2),
.products-data-table td:nth-child(2),
.products-data-table th:nth-child(3),
.products-data-table td:nth-child(3),
.products-data-table th:nth-child(4),
.products-data-table td:nth-child(4) {
  text-align: right;
}

.products-data-table td.products-barcode-cell {
  direction: rtl;
  text-align: right;
  padding-inline: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-data-table .products-barcode-value {
  display: inline-block;
  direction: ltr;
  text-align: left;
  white-space: nowrap;
}

.products-data-table td.table-actions {
  display: table-cell;
  text-align: center;
  white-space: nowrap;
}

.products-data-table td.table-actions > a,
.products-data-table td.table-actions > form {
  vertical-align: middle;
}

.products-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.products-actions-row form {
  display: inline-flex;
  margin: 0;
}

.products-restock-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-top: 4px;
  padding: 4px 9px;
  border: 1px solid #c9d8ef;
  border-radius: 9px;
  background: #f7faff;
  color: #173866;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.products-restock-button:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 7%, #fff);
}

.products-row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-meta-separator {
  color: #a8b6cb;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.badge-danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.debt-groups {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.debt-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}

.debt-group.is-overdue {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

.debt-group-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.debt-group-summary::-webkit-details-marker {
  display: none;
}

.debt-group-summary::before {
  content: "›";
  display: inline-block;
  margin-inline-end: 8px;
  font-weight: 900;
  color: var(--muted);
  transition: transform 200ms var(--ease);
}

.debt-group[open] .debt-group-summary::before {
  transform: rotate(90deg);
}

.debt-group-customer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.debt-group-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.debt-group > .table-wrap,
.debt-group > div {
  padding: 0 16px 14px;
}

/* ===== نظام الدردشة الداخلية ===== */

.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 22, 0.45);
  backdrop-filter: blur(1px);
}

.chat-overlay.is-open {
  display: flex;
}

.chat-window {
  display: flex;
  width: min(420px, 92vw);
  height: min(600px, 82vh);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.chat-window-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.chat-contacts {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
}

.chat-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: 160ms var(--ease);
}

.chat-contact-item:hover {
  background: var(--surface-2);
}

.chat-contact-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-weight: 900;
}

.chat-contact-meta {
  flex: 1;
  min-width: 0;
}

.chat-contact-meta strong {
  display: block;
  font-size: 0.9rem;
}

.chat-contact-meta small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-contact-unread {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}

.chat-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}

.chat-msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  word-break: break-word;
}

.chat-msg.is-mine {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--primary);
  color: #fff;
}

.chat-msg.is-theirs {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
}

.chat-msg .chat-msg-meta {
  display: block;
  margin-top: 4px;
  opacity: 0.75;
  font-size: 0.68rem;
  text-align: left;
}

.chat-send-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}

.chat-send-form input {
  flex: 1;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

.chat-center-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 95;
  display: flex;
  visibility: hidden;
  align-items: center;
  gap: 12px;
  max-width: min(420px, 90vw);
  padding: 16px 18px;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: 220ms var(--ease);
  border: 1px solid rgba(230, 201, 138, 0.3);
  border-inline-start: 5px solid var(--primary-light);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #0c1220, #10182c 55%, #123a34);
  box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 1px rgba(230, 201, 138, 0.08);
  color: #fff;
  pointer-events: none;
  cursor: pointer;
}

.chat-center-popup.is-visible {
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  animation: chatPopupPulse 1.6s var(--ease);
}

@keyframes chatPopupPulse {
  0% { box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 0 rgba(230, 201, 138, 0.55); }
  70% { box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 16px rgba(230, 201, 138, 0); }
  100% { box-shadow: 0 25px 60px rgba(12, 18, 32, 0.45), 0 0 0 0 rgba(230, 201, 138, 0); }
}

.chat-center-popup-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #10203a;
  font-size: 1.3rem;
}

.chat-center-popup b {
  display: block;
  color: var(--primary-light);
  font-size: 0.92rem;
}

.chat-center-popup p {
  display: block;
  overflow: hidden;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .chat-window {
    width: 94vw;
    height: 86vh;
  }

  .chat-center-popup {
    width: 92vw;
    max-width: 92vw;
  }
}

.badge-success {
  background: color-mix(in srgb, var(--green) 13%, transparent);
  color: var(--green);
}

.badge-muted {
  background: var(--surface-2);
  color: var(--muted);
}

.table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.form-panel {
  width: 100%;
  max-width: none;
}

/* فاتورة الشراء تحتوي أصنافاً وأسعاراً وعملات ومدفوعات متعددة، لذلك تستفيد من
   كامل مساحة العمل بدل حصرها في 900px وترك نصف الشاشة فارغاً. */
.purchase-invoice-editor-panel {
  width: 100%;
  max-width: none;
}

.purchase-invoice-editor-panel .purchase-invoice-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.purchase-invoice-editor-panel .purchase-invoice-payment-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

/* تفاصيل الضمان: ملخص بعرض كامل ثم بيانات المصدر والمطالبات بدون عمود فارغ طويل. */
.warranty-details-panel {
  width: 100%;
}

.warranty-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.warranty-source-card,
.warranty-inner-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.warranty-source-sale {
  border-inline-start: 4px solid var(--primary);
}

.warranty-source-repair {
  border-inline-start: 4px solid var(--amber);
}

.warranty-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.warranty-section-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

.warranty-source-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.warranty-source-note,
.warranty-terms {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
  color: var(--muted);
  font-size: .84rem;
}

.warranty-parts-block {
  margin-top: 14px;
}

.warranty-parts-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.warranty-part-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.warranty-lower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.warranty-inner-card .panel-header {
  margin-bottom: 10px;
}

.warranty-claim-form,
.warranty-resolution-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 14px;
  flex-wrap: wrap;
}

.warranty-claim-form .login-field,
.warranty-resolution-form > input {
  flex: 1;
  min-width: 220px;
}

.warranty-claim-form .login-submit {
  width: auto;
  padding-inline: 24px;
}

.warranty-empty-claims {
  min-height: 120px;
}

.warranty-approve {
  border-color: var(--green);
  color: var(--green);
}

.warranty-reject {
  border-color: var(--danger);
  color: var(--danger);
}

@media (max-width: 1350px) {
  .warranty-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .warranty-source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .purchase-invoice-editor-panel .purchase-invoice-meta-grid,
  .purchase-invoice-editor-panel .purchase-invoice-payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warranty-source-grid,
  .warranty-lower-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .purchase-invoice-editor-panel .purchase-invoice-meta-grid,
  .purchase-invoice-editor-panel .purchase-invoice-payment-grid {
    grid-template-columns: 1fr;
  }

  .warranty-summary-grid,
  .warranty-source-grid,
  .warranty-lower-grid,
  .warranty-part-row {
    grid-template-columns: 1fr;
  }

  .warranty-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .warranty-section-heading .ghost-button {
    justify-content: center;
  }
}

/* نموذج الحجز يحتوي مواصفات وسعراً وعربوناً وهدايا؛ يستعمل عرض الصفحة كاملاً
   بثلاثة أعمدة متوازنة بدل ترك مساحة مكتبية فارغة. */
.reservation-editor-panel {
  width: 100%;
  max-width: none;
}

.reservation-editor-panel .entity-form > .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 1100px) {
  .reservation-editor-panel .entity-form > .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .reservation-editor-panel .entity-form > .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Product create/edit has many compact fields. Let it use the available page
   width instead of leaving half of a desktop screen empty. This is scoped to
   this editor so the width of every other form in the system stays unchanged. */
.product-editor-panel {
  width: 100%;
  max-width: none;
}

.product-editor-panel .entity-form > .form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.product-editor-panel .entity-form > .form-grid > .product-name-field {
  grid-column: span 2;
}

.product-editor-panel .entity-form .product-pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.product-editor-panel .product-pricing-grid > .product-purchase-main-field {
  grid-column: span 2;
}

.product-editor-panel .entity-form > .form-grid > .product-stock-reason-field {
  grid-column: span 2;
}

.product-stock-logs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.product-stock-logs.single {
  grid-template-columns: 1fr;
}

.product-stock-log-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

@media (max-width: 1380px) {
  .product-editor-panel .entity-form > .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-editor-panel .entity-form > .form-grid > .product-name-field {
    grid-column: span 1;
  }
}

@media (max-width: 900px) {
  .product-editor-panel .entity-form .product-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-editor-panel .product-pricing-grid > .product-purchase-main-field {
    grid-column: span 1;
  }

  .product-editor-panel .entity-form > .form-grid > .product-stock-reason-field {
    grid-column: span 1;
  }

  .product-stock-logs {
    grid-template-columns: 1fr;
  }
}

.entity-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.entity-form .span-2 {
  grid-column: 1 / -1;
}

.entity-form textarea {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
  transition: 200ms var(--ease);
}

.entity-form input:not([type="radio"]):not([type="checkbox"]),
.entity-form textarea,
.entity-form select {
  border-radius: var(--radius-sm);
}

.entity-form input:focus,
.entity-form textarea:focus,
.entity-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.checklist-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.lock-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.lock-tab {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.lock-tab.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.checklist-box .login-remember {
  margin: 0;
}

.login-field select,
.login-field textarea {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

@media (max-width: 680px) {
  .entity-form .form-grid {
    grid-template-columns: 1fr;
  }

  .product-editor-panel .entity-form > .form-grid {
    grid-template-columns: 1fr;
  }

  .product-editor-panel .entity-form .product-pricing-grid {
    grid-template-columns: 1fr;
  }

  .product-editor-panel .product-pricing-grid > .product-purchase-main-field {
    grid-column: span 1;
  }
}

@media (max-width: 1180px) {
  .erp-shell {
    grid-template-columns: 1fr;
  }

  /* بدل ما تختفي القائمة الجانبية كلياً بالموبايل/التابلت (وتسبب فقدان الوصول لأغلب
     الصفحات حسب صلاحية المستخدم)، نحولها لـ Drawer ينزلق من يمين الشاشة فوق المحتوى،
     يتفتح بزر ☰ بالأعلى ويتسكر بزر ✕ أو بالنقر على الخلفية المعتمة. */
  .app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 60;
    width: min(300px, 84vw);
    transform: translateX(100%);
    transition: transform 260ms var(--ease);
    box-shadow: var(--shadow-lg);
  }

  body.mobile-nav-open .app-sidebar {
    transform: translateX(0);
  }

  .mobile-sidebar-close {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(230, 201, 138, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    z-index: 1;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
    background: rgba(8, 12, 22, 0.55);
    backdrop-filter: blur(1px);
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .global-search {
    width: min(460px, 44vw);
  }

  .mobile-nav {
    position: fixed;
    inset-inline: 10px;
    bottom: 10px;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .mobile-nav a {
    display: grid;
    min-height: 38px;
    place-items: center;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
  }

  .mobile-nav a.active {
    background: var(--primary);
    color: #fff;
  }

  .app-content {
    padding-bottom: 76px;
  }

  .topbar-logout-form {
    display: block;
  }
}

@media (max-width: 960px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .global-search {
    width: 100%;
    order: 3;
  }

  .metrics-grid,
  .workspace-grid,
  .lower-grid,
  .system-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .topbar,
  .app-content {
    padding-inline: 14px;
  }

  .topbar h1 {
    font-size: 1.25rem;
  }

  .metrics-grid,
  .lower-grid,
  .system-grid,
  .report-chips {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .segmented-actions {
    grid-template-columns: 1fr 1fr;
  }

  .cart-row,
  .payment-box div {
    align-items: flex-start;
    flex-direction: column;
  }

  .primary-action {
    flex: 1;
    justify-content: center;
  }

  .app-footer {
    display: none;
  }

  .data-table th,
  .data-table td {
    padding: 9px 8px;
    font-size: 0.82rem;
  }

  .data-table th {
    font-size: 0.68rem;
  }

  .table-actions {
    gap: 4px;
  }

  .icon-button.small {
    min-width: 30px;
    min-height: 30px;
  }

  .panel {
    padding: 16px;
  }

  .form-panel {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .data-table th,
  .data-table td {
    padding: 7px 6px;
    font-size: 0.78rem;
  }

  .badge {
    font-size: 0.7rem;
    padding: 0 8px;
    min-height: 22px;
  }

  .mobile-nav a {
    font-size: 0.72rem;
    min-height: 34px;
  }
}

/* ===================== لوحة القيادة المرجعية ===================== */
.dashboard-premium {
  --dashboard-navy: #061b4f;
  --dashboard-dark: #031238;
  --dashboard-blue: #1455d9;
  --dashboard-gold: #f5b800;
  --dashboard-bg: #eef4ff;
  background: #eef4ff;
  direction: rtl;
}

.dashboard-premium.erp-shell {
  grid-template-columns: 300px minmax(0, 1fr);
  direction: rtl;
}

.dashboard-premium .app-sidebar {
  grid-column: 1;
  width: 300px;
  gap: 14px;
  padding: 16px 14px;
  border-left: 1px solid rgba(245, 184, 0, .26);
  background:
    radial-gradient(circle at 50% 3%, rgba(20, 85, 217, .5), transparent 30%),
    linear-gradient(180deg, #082967 0%, #061b4f 48%, #031238 100%);
  box-shadow: -10px 0 36px rgba(3, 18, 56, .18);
  scrollbar-width:thin;
  scrollbar-color:rgba(245,184,0,.55) rgba(255,255,255,.04);
}

.dashboard-premium .app-sidebar::-webkit-scrollbar { width:6px; }
.dashboard-premium .app-sidebar::-webkit-scrollbar-track { background:rgba(255,255,255,.04); }
.dashboard-premium .app-sidebar::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(245,184,0,.55); }

.sidebar-svg-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

.dashboard-premium .app-frame {
  grid-column: 2;
  direction: rtl;
}

.dashboard-premium .brand-lockup {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 14px;
  min-height: 82px;
  padding: 4px 7px 15px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.dashboard-premium .brand-mark {
  width: 68px;
  height: 68px;
  border: 2px solid var(--dashboard-gold);
  border-radius: 17px;
  background: #082768;
  box-shadow: 0 10px 26px rgba(0,0,0,.25), 0 0 0 4px rgba(245,184,0,.05);
}

.dashboard-premium .brand-lockup strong { font-size: 1.18rem; font-weight: 900; }
.dashboard-premium .brand-lockup small { margin-top: 4px; font-size: .67rem; color: #f5c833; font-weight:700; }
.dashboard-premium .side-nav { gap: 7px; }
.dashboard-premium .side-nav a {
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 46px;
  gap:10px;
  align-items:center;
  min-height:54px;
  padding:5px 12px;
  border:1px solid rgba(132,181,255,.2);
  border-radius:14px;
  background:linear-gradient(100deg,rgba(11,55,123,.78),rgba(3,27,72,.78));
  color:rgba(255,255,255,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 14px rgba(1,13,45,.14);
  font-size:.96rem;
  overflow:hidden;
}
.dashboard-premium .side-nav .nav-label {
  min-width:0;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
}
.dashboard-premium .nav-glyph {
  display:block;
  width:42px;
  height:42px;
  box-sizing:border-box;
  padding:8px;
  color:#fff;
  border-inline-start:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-premium .nav-chevron {
  display:block;
  width:21px;
  height:21px;
  color:rgba(255,255,255,.74);
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 180ms var(--ease),color 180ms var(--ease);
}
.dashboard-premium .side-nav a:hover {
  border-color:rgba(245,184,0,.38);
  background:linear-gradient(100deg,rgba(15,72,156,.9),rgba(5,36,91,.92));
  transform:translateX(-2px);
}
.dashboard-premium .side-nav a:hover .nav-chevron { color:#ffd34f; transform:translateX(-2px); }
.dashboard-premium .side-nav b {
  display:none;
}
.dashboard-premium .side-nav a.active {
  border-color:#f5b800;
  background:linear-gradient(100deg,rgba(245,184,0,.16),rgba(13,57,125,.92));
  color:#ffd34f;
  box-shadow:inset -4px 0 0 #f5b800,0 9px 23px rgba(0,0,0,.2),0 0 0 1px rgba(245,184,0,.08);
}
.dashboard-premium .side-nav a.active .nav-glyph {
  color:#f5b800;
  border-inline-start-color:rgba(245,184,0,.35);
  background:linear-gradient(145deg,rgba(245,184,0,.18),rgba(245,184,0,.04));
  filter:drop-shadow(0 0 5px rgba(245,184,0,.2));
}
.dashboard-premium .side-nav a.active .nav-chevron { color:#f5b800; }
.dashboard-premium .sidebar-status { display:none; }
.dashboard-premium .sidebar-user {
  margin-top: auto;
  min-height:66px;
  padding:10px 12px;
  border-color:rgba(132,181,255,.25);
  border-radius:16px;
  background:linear-gradient(100deg,rgba(10,53,119,.88),rgba(3,27,72,.9));
  box-shadow:0 7px 18px rgba(0,0,0,.16);
}
.dashboard-premium .user-avatar { background:linear-gradient(145deg,#fff,#dbe7ff); color:#0a2d70; }

.dashboard-premium .app-frame { background:linear-gradient(145deg,#f7faff,#eaf2ff 70%,#f8fbff); }
.dashboard-premium .topbar {
  position:sticky;
  min-height:126px;
  padding:18px 28px 34px;
  border:0;
  border-bottom:4px solid var(--dashboard-gold);
  border-radius:0 0 0 70px;
  background:
    radial-gradient(circle at 65% 0%,rgba(20,85,217,.52),transparent 37%),
    linear-gradient(110deg,#082b72 0%,#061b4f 56%,#031238 100%);
  box-shadow:0 14px 34px rgba(6,27,79,.18);
  color:#fff;
}
.dashboard-premium .topbar::after {
  position:absolute;
  inset-inline:0;
  bottom:-13px;
  height:18px;
  content:"";
  border-radius:0 0 0 75%;
  background:linear-gradient(90deg,#f5b800,#ffcb2d 45%,transparent 82%);
  opacity:.22;
  pointer-events:none;
}
.dashboard-premium .topbar-kicker { color:rgba(255,255,255,.72); font-size:.78rem; letter-spacing:0; text-transform:none; }
.dashboard-premium .topbar h1 { color:#fff; font-size:1.45rem; }
.dashboard-premium .topbar-actions { flex:1; justify-content:flex-start; gap:9px; direction:ltr; }
.dashboard-premium .topbar-actions > * { direction:rtl; }
.dashboard-premium .global-search {
  order:5;
  width:min(365px,30vw);
  min-height:46px;
  border-color:rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(1,13,48,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dashboard-premium .global-search input { color:#fff; }
.dashboard-premium .global-search input::placeholder { color:rgba(255,255,255,.5); }
.dashboard-premium .global-search span { border-color:rgba(255,255,255,.7); }
.dashboard-premium .global-search span::after { background:rgba(255,255,255,.7); }
.dashboard-premium #globalSearchCameraBtn { display:none; }
.dashboard-premium .topbar .icon-button {
  width:43px;
  height:43px;
  border-color:rgba(255,255,255,.24);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(0,0,0,.05));
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.dashboard-premium .theme-toggle-button,
.dashboard-premium .language-switch-wrap,
.dashboard-premium .header-logout-form,
.dashboard-premium #installAppBtn { display:none!important; }
.dashboard-premium .topbar .primary-action {
  order:-1;
  min-height:44px;
  padding:0 17px;
  border-radius:13px;
  background:linear-gradient(145deg,#ffd34c,#f5a900);
  color:#19213a;
  box-shadow:0 8px 20px rgba(245,184,0,.28);
}
.dashboard-premium .dhikr-ticker { display:none; }
.dashboard-premium .app-content { gap:16px; padding:22px 20px 24px; }
.dashboard-premium .app-footer { display:none; }

.dashboard-command-strip { display:flex; gap:10px; justify-content:flex-start; }
.dashboard-command-strip a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 15px;
  border:1px solid #dce5f4;
  border-radius:11px;
  background:rgba(255,255,255,.88);
  color:#1b2947;
  font-size:.8rem;
  font-weight:800;
  box-shadow:0 7px 20px rgba(22,48,90,.08);
}
.dashboard-command-strip a:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,85,217,.12); }

.premium-metrics { display:flex; flex-wrap:wrap; gap:11px; }
.premium-metric {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:1fr auto;
  min-width:0;
  min-height:177px;
  overflow:hidden;
  padding:16px 13px 10px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:27px;
  color:#fff;
  box-shadow:0 15px 25px rgba(17,49,108,.18),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s ease,box-shadow .2s ease;
  flex:1 1 165px;
}
.premium-metric::before { position:absolute; inset:0; z-index:-1; content:""; background:radial-gradient(circle at 0 0,rgba(255,255,255,.31),transparent 38%),linear-gradient(180deg,transparent,rgba(0,0,0,.2)); }
.premium-metric::after { position:absolute; width:100px; height:100px; inset-inline-end:-45px; top:-42px; z-index:-1; content:""; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:0 0 0 20px rgba(255,255,255,.04); }
.premium-metric:hover { transform:translateY(-4px); box-shadow:0 20px 34px rgba(17,49,108,.24); color:#fff; }
.metric-violet { background:linear-gradient(145deg,#7627f4,#4213a9); }
.metric-orange { background:linear-gradient(145deg,#e97b0b,#a94706); }
.metric-green { background:linear-gradient(145deg,#0aa05d,#08723e); }
.metric-blue { background:linear-gradient(145deg,#1983f7,#0852c5); }
.metric-red { background:linear-gradient(145deg,#f33d4c,#bf192c); }
.metric-cyan { background:linear-gradient(145deg,#11b9c7,#087787); }
.metric-indigo { background:linear-gradient(145deg,#5234d9,#271a86); }
.metric-art { position:absolute; inset-inline-end:8px; top:45px; font-size:3.2rem; filter:drop-shadow(0 8px 9px rgba(0,0,0,.28)); transform:rotate(-4deg); opacity:.96; }
.metric-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; max-width:75%; }
.metric-copy small { color:rgba(255,255,255,.92); font-size:.78rem; font-weight:700; }
.metric-copy strong { margin-top:11px; font-size:1.22rem; font-weight:900; white-space:nowrap; }
.metric-copy em { margin-top:5px; color:rgba(255,255,255,.79); font-size:.67rem; font-style:normal; line-height:1.5; }
.metric-foot { display:flex; justify-content:space-between; align-items:center; margin:10px -13px -10px; padding:8px 13px; background:rgba(0,0,0,.13); font-size:.68rem; }
.metric-foot b { font-weight:700; }
.metric-foot i { display:grid; width:24px; height:24px; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:50%; font-style:normal; }

.dashboard-workspace { display:flex; flex-wrap:wrap; gap:13px; }
.dashboard-workspace > .premium-panel { flex:1 1 285px; }
.dashboard-workspace > .sales-chart-panel { flex:1.45 1 430px; }
.premium-panel { min-width:0; overflow:hidden; border:1px solid #d7e1f2; border-radius:20px; background:rgba(255,255,255,.79); box-shadow:0 10px 30px rgba(22,48,90,.08),inset 0 1px 0 #fff; }
.premium-panel-head { display:flex; justify-content:space-between; align-items:center; min-height:58px; padding:0 17px; border-bottom:1px solid #e4ebf6; }
.premium-panel-head > div { display:flex; align-items:center; gap:9px; }
.premium-panel-head h2 { margin:0; color:#14213d; font-size:.98rem; font-weight:900; }
.panel-title-icon { color:#1455d9; font-size:1.3rem; }
.premium-panel-head select { min-width:105px; height:34px; padding:0 12px; border:1px solid #dce4f1; border-radius:10px; background:#f8fbff; color:#495976; font:inherit; font-size:.75rem; }
.sales-chart-wrap { height:218px; padding:13px 13px 0; direction:ltr; }
.sales-chart-wrap svg { width:100%; height:100%; overflow:visible; }
.chart-grid line { stroke:#d8e1ef; stroke-width:1; stroke-dasharray:4 4; }
.sales-line { fill:none; stroke:#1455d9; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 3px 4px rgba(20,85,217,.2)); }
.sales-dot { fill:#1455d9; stroke:#fff; stroke-width:2; }
.chart-labels { fill:#687895; font-size:9px; font-family:Arial,sans-serif; }
.sales-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 14px 12px; }
.sales-mini-stats div { position:relative; min-height:78px; padding:12px; border:1px solid #dde6f3; border-radius:13px; background:linear-gradient(145deg,#fff,#f4f8ff); }
.sales-mini-stats span,.sales-mini-stats strong { display:block; }
.sales-mini-stats span { color:#66748d; font-size:.72rem; }
.sales-mini-stats strong { margin-top:6px; color:#0d1834; font-size:1.04rem; font-weight:900; }
.sales-mini-stats i { position:absolute; inset-inline-end:10px; bottom:10px; color:#1455d9; font-style:normal; }
.panel-bottom-link { display:flex; justify-content:center; align-items:center; gap:8px; min-height:44px; border-top:1px solid #e5ecf6; color:#1455d9; font-size:.75rem; font-weight:800; }
.activity-list,.active-repairs-list { display:grid; gap:0; padding:6px 13px; }
.activity-row { display:grid; grid-template-columns:42px 38px 1fr; gap:8px; align-items:center; min-height:72px; border-bottom:1px solid #e4ebf5; }
.activity-row time { color:#121c34; font-size:.72rem; font-weight:800; direction:ltr; }
.activity-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#e9efff; color:#183d99; font-size:1.05rem; }
.activity-row.repair .activity-icon { background:#e7f9f0; color:#07844b; }
.activity-row strong,.activity-row small { display:block; }
.activity-row strong { color:#17223e; font-size:.75rem; }
.activity-row small { margin-top:3px; overflow:hidden; color:#67738b; font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-empty { display:grid; min-height:150px; place-items:center; color:#78869e; font-size:.82rem; }
.active-repair-card { position:relative; display:block; margin:5px 0; padding:11px 10px 18px; border:1px solid #dce5f2; border-radius:12px; background:linear-gradient(145deg,#fff,#f5f8fe); }
.active-repair-card > div:first-child { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.repair-number { color:#1455d9; font-family:Arial,sans-serif; font-size:.68rem; font-weight:800; direction:ltr; }
.repair-status { padding:4px 10px; border-radius:999px; background:#e0f6ed; color:#07804a; font-size:.65rem; }
.active-repair-card strong { display:block; margin-top:5px; overflow:hidden; color:#18243e; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.repair-progress { height:5px; margin-top:11px; overflow:hidden; border-radius:999px; background:#dce4ef; }
.repair-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1455d9,#31a6fa); }
.active-repair-card small { position:absolute; inset-inline-end:10px; bottom:3px; color:#253450; font-size:.62rem; }

.panel-head-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 11px;
  border:1px solid #cddaf0;
  border-radius:9px;
  background:#f7faff;
  color:#1455d9;
  font-size:.68rem;
  font-weight:800;
}
.panel-head-action:hover { border-color:#1455d9; background:#edf3ff; color:#0b3da6; }
.dashboard-section-heading { display:flex; justify-content:space-between; align-items:end; padding:4px 5px 0; }
.dashboard-section-heading span { color:#1455d9; font-size:.7rem; font-weight:900; }
.dashboard-section-heading h2 { margin:3px 0 0; color:#101d39; font-size:1.03rem; font-weight:900; }
.dashboard-operations-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:13px; }
.dashboard-secondary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:13px; }
.operation-panel .premium-panel-head > div > span:last-child small { display:block; margin-bottom:2px; color:#71819b; font-size:.6rem; font-weight:800; letter-spacing:.5px; direction:ltr; text-align:right; }
.operation-list { display:grid; padding:8px 14px; }
.operation-row { display:flex; justify-content:space-between; gap:12px; padding:11px 5px; border-bottom:1px solid #e5ebf5; color:#26334d; font-size:.76rem; }
.operation-row:hover { padding-inline:9px; border-radius:10px; background:#f4f8ff; color:#1455d9; }
.operation-row span small { display:block; margin-top:3px; color:#748198; font-size:.68rem; direction:ltr; }
.operation-row strong { color:#0c1934; white-space:nowrap; }
.operation-total { display:flex; justify-content:space-between; align-items:center; margin:5px 14px 14px; padding:13px 14px; border:1px solid #cfe0fb; border-radius:12px; background:linear-gradient(145deg,#edf4ff,#fff); color:#22304c; font-size:.78rem; font-weight:800; }
.operation-total strong { color:#1455d9; font-size:1rem; }
.operation-total strong small { color:#52627d; font-size:.72rem; }
.installments-dashboard-list { display:grid; padding:8px 13px 13px; }
.installments-dashboard-list > a { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 5px; border-bottom:1px solid #e5ebf5; }
.installments-dashboard-list > a:hover { padding-inline:9px; border-radius:10px; background:#f4f8ff; }
.installments-dashboard-list strong,.installments-dashboard-list small { display:block; }
.installments-dashboard-list strong { color:#18243f; font-size:.75rem; }
.installments-dashboard-list small { margin-top:2px; color:#748198; font-size:.64rem; }
.installment-value { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.installment-value b { color:#15223e; font-size:.72rem; }
.installment-value em { padding:4px 8px; border-radius:999px; font-size:.6rem; font-style:normal; font-weight:800; }
.installment-value .overdue { background:#ffe6e8; color:#c52636; }
.installment-value .soon { background:#fff2d7; color:#a76800; }
.panel-refresh { display:grid; width:32px; height:32px; place-items:center; border:1px solid #d5e0f1; border-radius:9px; background:#f8fbff; color:#1455d9; }
.inventory-dashboard-list { display:grid; gap:7px; padding:12px 13px 15px; }
.inventory-dashboard-list a { display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:center; min-height:45px; padding:0 10px; border:1px solid #e0e7f2; border-radius:10px; background:#f9fbff; }
.inventory-dashboard-list a:hover { border-color:#b8cdf1; background:#f1f6ff; }
.inventory-dashboard-list strong { color:#1a2742; font-size:.72rem; }
.inventory-dashboard-list small { display:grid; justify-items:end; color:#758198; font-size:.63rem; }
.inventory-dashboard-list small em { color:#c52636; font-size:.58rem; font-style:normal; font-weight:800; }
.stock-dot { width:8px; height:8px; border-radius:50%; }
.stock-dot.high { background:#18a765; box-shadow:0 0 0 4px rgba(24,167,101,.11); }
.stock-dot.mid { background:#f5a900; box-shadow:0 0 0 4px rgba(245,169,0,.11); }
.stock-dot.low { background:#e23343; box-shadow:0 0 0 4px rgba(226,51,67,.11); }
.accounting-bars { display:grid; gap:11px; padding:15px 15px 8px; }
.accounting-bars > div { display:grid; grid-template-columns:58px 1fr 36px; gap:8px; align-items:center; color:#65748d; font-size:.67rem; }
.accounting-bars i { height:7px; overflow:hidden; border-radius:999px; background:#e4eaf3; }
.accounting-bars i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1455d9,#31a5f7); }
.accounting-bars i b.expense { background:linear-gradient(90deg,#f04452,#ff8a32); }
.accounting-bars strong { color:#26334e; font-size:.65rem; text-align:left; direction:ltr; }
.accounting-summary { margin:8px 15px; color:#6b7890; font-size:.63rem; line-height:1.8; }
.net-profit { display:flex; justify-content:space-between; align-items:center; margin:12px 14px 15px; padding:13px; border:1px solid #cfe0fb; border-radius:12px; background:linear-gradient(145deg,#edf4ff,#fff); color:#1d2b48; font-size:.72rem; font-weight:800; }
.net-profit strong { color:#1455d9; font-size:.95rem; }
.net-profit.loss { border-color:#ffd1d7; background:linear-gradient(145deg,#fff0f2,#fff); }
.net-profit.loss strong { color:#c52636; }
.dashboard-receivables { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:8px 15px; padding:10px 12px; border:1px solid #dce5f2; border-radius:11px; background:#f8fbff; color:#26334e; font-size:.72rem; font-weight:800; }
.dashboard-receivables:hover { border-color:#9db9e9; background:#f1f6ff; color:#1455d9; }
.dashboard-receivables strong { white-space:nowrap; direction:ltr; }
.dashboard-receivables strong small { color:#52627d; font-size:.68rem; }
.reports-dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; }
.reports-dashboard-grid a,.reports-dashboard-grid span { display:grid; min-height:42px; place-items:center; padding:5px; border:1px solid #dce5f2; border-radius:10px; background:linear-gradient(145deg,#fff,#f4f8ff); color:#263550; font-size:.68rem; font-weight:800; text-align:center; }
.reports-dashboard-grid a:hover { border-color:#9db9e9; color:#1455d9; transform:translateY(-1px); }
.reports-dashboard-grid span { opacity:.55; cursor:not-allowed; }

.dashboard-service-strip { display:grid; grid-template-columns:repeat(4,1fr); min-height:88px; padding:13px 26px; border:1px solid #d8e2f1; border-radius:19px; background:rgba(255,255,255,.82); box-shadow:0 9px 27px rgba(22,48,90,.07); }
.dashboard-service-strip > div { display:flex; justify-content:center; align-items:center; gap:14px; border-inline-start:1px solid #dfe7f3; }
.dashboard-service-strip > div:first-child { border-inline-start:0; }
.dashboard-service-strip i { color:#082a72; font-family:"Segoe UI Symbol",sans-serif; font-size:2.35rem; font-style:normal; }
.dashboard-service-strip strong,.dashboard-service-strip small { display:block; }
.dashboard-service-strip strong { color:#12203c; font-size:.87rem; }
.dashboard-service-strip small { margin-top:3px; color:#7a879c; font-size:.7rem; }
.dashboard-brand-footer { display:grid; grid-template-columns:72px 1fr 1.4fr 1fr; gap:15px; align-items:center; min-height:100px; padding:13px 26px; overflow:hidden; border-radius:50px; background:linear-gradient(105deg,#082f7d,#061b4f 58%,#031238); color:#fff; box-shadow:0 15px 32px rgba(3,18,56,.24); }
.footer-support-icon { display:grid; width:66px; height:66px; place-items:center; border:2px solid #f5b800; border-radius:50%; background:linear-gradient(145deg,#ffd841,#f5aa00); font-size:2rem; box-shadow:0 0 0 8px rgba(245,184,0,.08); }
.footer-support strong,.footer-support small,.footer-brand strong,.footer-brand small { display:block; }
.footer-support strong { font-size:.88rem; }
.footer-support small { margin-top:4px; color:rgba(255,255,255,.7); font-size:.7rem; }
.footer-brand { text-align:center; }
.footer-brand strong { font-size:1.35rem; font-weight:900; }
.footer-brand span { display:block; width:165px; height:2px; margin:7px auto 4px; background:linear-gradient(90deg,transparent,#f5b800,transparent); }
.footer-brand small { color:#fff; font-size:.72rem; }
.footer-symbols { display:flex; justify-content:flex-end; gap:10px; }
.footer-symbols i { display:grid; width:45px; height:45px; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:13px; font-style:normal; font-size:1.25rem; }

@media (max-width: 1400px) {
  .premium-metric { flex-basis:190px; }
  .active-repairs-list { grid-template-columns:repeat(3,1fr); gap:10px; }
}

@media (max-width: 1180px) {
  .dashboard-premium.erp-shell { grid-template-columns:1fr; }
  .dashboard-premium .app-sidebar { grid-column:1; width:min(300px,84vw); }
  .dashboard-premium .app-frame { grid-column:1; }
  .dashboard-premium .topbar { border-radius:0 0 0 45px; }
}

@media (max-width: 960px) {
  .dashboard-premium .topbar { align-items:flex-start; padding-bottom:27px; }
  .dashboard-premium .topbar-actions { width:100%; flex-wrap:wrap; }
  .dashboard-premium .global-search { order:10; width:100%; }
  .premium-metric { flex-basis:calc(50% - 11px); }
  .dashboard-workspace { display:grid; grid-template-columns:1fr; }
  .active-repairs-list { grid-template-columns:repeat(2,1fr); }
  .dashboard-operations-grid,.dashboard-secondary-grid { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .dashboard-premium .app-content { padding-inline:11px; }
  .dashboard-premium .topbar { min-height:150px; padding:14px 14px 24px; }
  .dashboard-premium .topbar h1 { font-size:1.05rem; }
  .dashboard-premium .topbar-actions { gap:6px; }
  .dashboard-premium .topbar .icon-button { width:39px; height:39px; }
  .dashboard-premium .topbar .primary-action { min-height:39px; padding-inline:12px; font-size:.76rem; }
  .dashboard-command-strip { overflow-x:auto; justify-content:flex-start; }
  .dashboard-command-strip a { flex:0 0 auto; }
  .premium-metric { flex-basis:100%; }
  .premium-metric { min-height:157px; }
  .dashboard-workspace { grid-template-columns:minmax(0,1fr); }
  .sales-chart-wrap { height:190px; }
  .sales-mini-stats { grid-template-columns:1fr; }
  .active-repairs-list { grid-template-columns:1fr; }
  .installments-dashboard-list > a { align-items:flex-start; flex-direction:column; }
  .dashboard-service-strip { grid-template-columns:1fr 1fr; gap:12px; padding:15px; }
  .dashboard-service-strip > div { justify-content:flex-start; border:0; }
  .dashboard-brand-footer { grid-template-columns:60px 1fr; border-radius:28px; padding:16px; }
  .footer-support-icon { width:56px; height:56px; }
  .footer-brand,.footer-symbols { grid-column:1 / -1; }
  .footer-symbols { justify-content:center; }
  .mobile-nav { display:none; }
}

/* تكبير خط لوحة القيادة وتحسين وضوح النصوص */
.dashboard-premium .side-nav a { font-size:1rem; font-weight:700; }
.dashboard-premium .side-nav b { font-size:.82rem; }
.dashboard-premium .brand-lockup strong { font-size:1.25rem; }
.dashboard-premium .brand-lockup small { font-size:.7rem; }
.dashboard-premium .topbar-kicker { font-size:.88rem; }
.dashboard-premium .topbar h1 { font-size:1.62rem; }
.dashboard-premium .global-search input { font-size:.9rem; }
.dashboard-premium .topbar .primary-action { font-size:.9rem; font-weight:900; }
.dashboard-command-strip a { font-size:.88rem; }
.metric-copy small { font-size:.88rem; }
.metric-copy strong { font-size:1.42rem; }
.metric-copy em { font-size:.76rem; }
.metric-foot { font-size:.76rem; }
.premium-panel-head h2 { font-size:1.08rem; }
.premium-panel-head select { font-size:.83rem; }
.panel-head-action { font-size:.76rem; }
.sales-mini-stats span { font-size:.8rem; }
.sales-mini-stats strong { font-size:1.17rem; }
.panel-bottom-link { font-size:.84rem; }
.activity-row strong { font-size:.84rem; }
.activity-row small { font-size:.73rem; }
.activity-row time { font-size:.8rem; }
.repair-number { font-size:.76rem; }
.repair-status { font-size:.72rem; }
.active-repair-card strong { font-size:.84rem; }
.active-repair-card small { font-size:.7rem; }
.dashboard-section-heading span { font-size:.78rem; }
.dashboard-section-heading h2 { font-size:1.16rem; }
.operation-panel .premium-panel-head > div > span:last-child small { font-size:.68rem; }
.operation-row { font-size:.86rem; }
.operation-total { font-size:.87rem; }
.operation-total strong { font-size:1.13rem; }
.installments-dashboard-list strong { font-size:.84rem; }
.installments-dashboard-list small { font-size:.72rem; }
.installment-value b { font-size:.8rem; }
.installment-value em { font-size:.68rem; }
.inventory-dashboard-list strong { font-size:.81rem; }
.inventory-dashboard-list small { font-size:.71rem; }
.accounting-bars > div { font-size:.76rem; }
.accounting-bars strong { font-size:.73rem; }
.accounting-summary { font-size:.72rem; }
.net-profit { font-size:.81rem; }
.net-profit strong { font-size:1.08rem; }
.reports-dashboard-grid a,
.reports-dashboard-grid span { font-size:.77rem; }
.dashboard-service-strip strong { font-size:.97rem; }
.dashboard-service-strip small { font-size:.78rem; }
.footer-support strong { font-size:.98rem; }
.footer-support small { font-size:.78rem; }
.footer-brand strong { font-size:1.5rem; }
.footer-brand small { font-size:.8rem; }

@media (max-width: 680px) {
  .dashboard-premium .topbar h1 { font-size:1.2rem; }
  .metric-copy strong { font-size:1.32rem; }
}

/* ===================== Unified ERP Design System =====================
   Dashboard is the visual source of truth for every authenticated module. */
.dashboard-premium .app-content {
  align-content: start;
  padding: 22px clamp(14px, 2vw, 28px) 34px;
  background:
    radial-gradient(circle at 8% 0%, rgba(20,85,217,.08), transparent 30rem),
    linear-gradient(145deg,#f7faff,#eaf2ff 72%,#f8fbff);
}

.dashboard-premium .panel,
.dashboard-premium .metric-card,
.dashboard-premium .table-wrap,
.dashboard-premium .payment-box,
.dashboard-premium .repair-item,
.dashboard-premium .debt-group {
  border-color: #d7e1f2;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 30px rgba(22,48,90,.08), inset 0 1px 0 #fff;
}

.dashboard-premium .panel {
  padding: clamp(16px, 2vw, 22px);
}

.dashboard-premium .panel:hover {
  box-shadow: 0 16px 38px rgba(22,48,90,.12), inset 0 1px 0 #fff;
}

.dashboard-premium .panel-header {
  min-height: 48px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4ebf6;
}

.dashboard-premium .panel-header h2 {
  color: #101d39;
  font-size: 1.24rem;
  line-height: 1.45;
}

.dashboard-premium .eyebrow {
  color: #1455d9;
  font-size: .8rem;
  letter-spacing: .35px;
}

.dashboard-premium .primary-action,
.dashboard-premium .login-submit,
.dashboard-premium .scan-box button,
.dashboard-premium button[type="submit"]:not(.ghost-button):not(.icon-button):not(.panel-refresh) {
  min-height: 44px;
  border: 1px solid rgba(20,85,217,.18);
  border-radius: 12px;
  background: linear-gradient(135deg,#2173ed,#0d48c4);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(20,85,217,.22);
}

.dashboard-premium .primary-action:hover,
.dashboard-premium .login-submit:hover,
.dashboard-premium .scan-box button:hover,
.dashboard-premium button[type="submit"]:not(.ghost-button):not(.icon-button):not(.panel-refresh):hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(20,85,217,.28);
}

.dashboard-premium .ghost-button {
  min-height: 42px;
  border: 1px solid #d5e0f1;
  border-radius: 12px;
  background: linear-gradient(145deg,#fff,#f4f8ff);
  color: #24405f;
  font-weight: 800;
}

.dashboard-premium .ghost-button:hover {
  border-color: #8fb2ec;
  background: #edf4ff;
  color: #0b3da6;
}

.dashboard-premium .icon-button {
  border-color: #d5e0f1;
  border-radius: 12px;
  background: linear-gradient(145deg,#fff,#f4f8ff);
  color: #18376d;
}

.dashboard-premium .login-field label,
.dashboard-premium .scan-box label,
.dashboard-premium .entity-form label {
  color: #243651;
  font-size: .88rem;
  font-weight: 800;
}

.dashboard-premium .login-field input,
.dashboard-premium .login-field select,
.dashboard-premium .login-field textarea,
.dashboard-premium .entity-form input:not([type="radio"]):not([type="checkbox"]),
.dashboard-premium .entity-form select,
.dashboard-premium .entity-form textarea,
.dashboard-premium .customers-search-bar input,
.dashboard-premium .customers-search-bar select,
.dashboard-premium .scan-box input {
  min-height: 46px;
  border: 1px solid #d7e1f0;
  border-radius: 12px;
  background: #fbfdff;
  color: #14213d;
  box-shadow: inset 0 1px 2px rgba(31,56,94,.03);
}

.dashboard-premium .login-field input:focus,
.dashboard-premium .login-field select:focus,
.dashboard-premium .login-field textarea:focus,
.dashboard-premium .entity-form input:focus,
.dashboard-premium .entity-form select:focus,
.dashboard-premium .entity-form textarea:focus,
.dashboard-premium .customers-search-bar input:focus,
.dashboard-premium .customers-search-bar select:focus,
.dashboard-premium .scan-box input:focus {
  outline: 0;
  border-color: #4f87e6;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(20,85,217,.1);
}

.dashboard-premium .table-wrap {
  overflow: auto;
  border: 1px solid #dce5f2;
}

.dashboard-premium .data-table {
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.dashboard-premium .data-table th,
.dashboard-premium .data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e6edf7;
  text-align: start;
  vertical-align: middle;
}

.dashboard-premium .data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg,#f4f8ff,#edf3fc);
  color: #36506f;
  font-size: .84rem;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-premium .data-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-premium .data-table tbody tr:hover { background: rgba(20,85,217,.045); }

.dashboard-premium .badge,
.dashboard-premium [class*="badge-"] {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
}

.dashboard-premium .badge-success { border-color: rgba(10,155,91,.22); background:#e4f8ef; color:#087b49; }
.dashboard-premium .badge-danger { border-color: rgba(223,51,69,.2); background:#ffe9ec; color:#bd2033; }
.dashboard-premium .badge-muted { border-color:#dce5f2; background:#f0f4fa; color:#61718a; }

.dashboard-premium .alert-success-bar,
.dashboard-premium .alert-success,
.dashboard-premium .alert-danger,
.dashboard-premium .alert-warning,
.dashboard-premium .login-alert {
  border-radius: 14px;
  box-shadow: 0 7px 20px rgba(22,48,90,.06);
}

.dashboard-premium .alert-success-bar,
.dashboard-premium .alert-success { border:1px solid rgba(10,155,91,.25); background:#e8f9f1; color:#08784a; }
.dashboard-premium .alert-danger,
.dashboard-premium .login-alert { border:1px solid rgba(223,51,69,.22); background:#fff0f2; color:#b82637; }
.dashboard-premium .alert-warning { border:1px solid rgba(240,165,0,.28); background:#fff7df; color:#946300; }

.dashboard-premium .empty-state,
.dashboard-premium .dashboard-empty {
  min-height: 150px;
  border: 1px dashed #c8d6e9;
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(255,255,255,.75),rgba(238,244,253,.75));
  color: #71809a;
}

.dashboard-premium [id$="Overlay"],
.dashboard-premium [id$="Modal"] {
  backdrop-filter: blur(7px);
}

.dashboard-premium .unified-app-footer {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 22px;
  align-items: center;
  margin: 2px clamp(14px,2vw,28px) 26px;
  padding: 16px 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: linear-gradient(105deg,#082f7d,#061b4f 58%,#031238);
  color: #fff;
  box-shadow: 0 15px 32px rgba(3,18,56,.22);
}

.unified-footer-support { display:flex; align-items:center; gap:12px; }
.unified-footer-support i { display:grid; width:48px; height:48px; place-items:center; border:2px solid #f5b800; border-radius:50%; background:linear-gradient(145deg,#ffd841,#f5aa00); font-size:1.35rem; font-style:normal; }
.unified-footer-support strong,.unified-footer-support small,.unified-footer-brand strong,.unified-footer-brand small,.unified-footer-meta span,.unified-footer-meta small { display:block; }
.unified-footer-support small,.unified-footer-brand small,.unified-footer-meta small { margin-top:3px; color:rgba(255,255,255,.7); font-size:.72rem; }
.unified-footer-brand { text-align:center; }
.unified-footer-brand strong { font-size:1.15rem; font-weight:900; }
.unified-footer-brand span { display:block; width:130px; height:2px; margin:6px auto 3px; background:linear-gradient(90deg,transparent,#f5b800,transparent); }
.unified-footer-meta { text-align:end; }

html[dir="ltr"] .app-sidebar { direction: rtl; border-left:0; border-right:1px solid rgba(255,255,255,.12); }
html[dir="ltr"] .app-sidebar > * { direction:ltr; }
html[dir="ltr"] .dashboard-premium .topbar-actions { direction:rtl; }
html[dir="ltr"] .dashboard-premium .topbar-actions > * { direction:ltr; }

@media (max-width: 960px) {
  .dashboard-premium .unified-app-footer { grid-template-columns:1fr 1fr; }
  .unified-footer-meta { grid-column:1 / -1; text-align:center; }
}

@media (max-width: 680px) {
  .dashboard-premium .app-content { padding: 14px 11px 24px; }
  .dashboard-premium .panel { padding:14px; border-radius:16px; }
  .dashboard-premium .panel-header { align-items:flex-start; }
  .dashboard-premium .panel-header .primary-action,
  .dashboard-premium .panel-header .ghost-button { width:100%; justify-content:center; }
  .dashboard-premium .data-table th,.dashboard-premium .data-table td { padding:11px 10px; }
  .dashboard-premium .unified-app-footer { grid-template-columns:1fr; margin:0 11px 18px; border-radius:22px; text-align:center; }
  .unified-footer-support { justify-content:center; }
  .unified-footer-meta { grid-column:auto; }
}

/* Module surfaces: POS, maintenance, inventory and customers. */
.dashboard-premium .customers-search-bar {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 16px 0 18px;
  padding: 13px;
  border: 1px solid #dce5f2;
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(247,250,255,.96),rgba(237,244,255,.88));
}

.dashboard-premium .customers-search-bar > input[type="search"] { flex: 1 1 260px; }
.dashboard-premium .customers-search-bar > select { flex: 0 1 190px; }
.dashboard-premium .customers-search-bar .login-field { flex: 1 1 150px; }

.dashboard-premium .workspace-grid {
  align-items: start;
  gap: 18px;
}

.dashboard-premium .form-panel,
.dashboard-premium .scan-box,
.dashboard-premium .payment-box,
.dashboard-premium .system-grid > div,
.dashboard-premium .info-grid > div,
.dashboard-premium .device-card,
.dashboard-premium .repair-item,
.dashboard-premium .cart-row {
  border: 1px solid #dce5f2;
  border-radius: 16px;
  background: linear-gradient(145deg,#fff,#f7faff);
  box-shadow: 0 7px 18px rgba(22,48,90,.055);
}

.dashboard-premium .scan-box {
  margin-bottom: 15px;
  padding: 14px;
  border-color: #cbdcf5;
  background: linear-gradient(135deg,#f7faff,#eaf2ff);
}

.dashboard-premium .payment-box { padding: 15px; }
.dashboard-premium .payment-box .total {
  margin-inline: -15px;
  margin-bottom: -15px;
  padding: 14px 15px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(105deg,#082f7d,#1455d9);
  color: #fff;
}
.dashboard-premium .payment-box .total span,
.dashboard-premium .payment-box .total strong { color:#fff; }

.dashboard-premium .system-grid,
.dashboard-premium .info-grid { gap: 12px; }
.dashboard-premium .system-grid > div,
.dashboard-premium .info-grid > div { min-height: 82px; padding: 14px; }
.dashboard-premium .system-grid b,
.dashboard-premium .info-grid b { color:#183153; }
.dashboard-premium .system-grid small,
.dashboard-premium .info-grid small { margin-top:5px; color:#61718a; }

.dashboard-premium .repair-timeline,
.dashboard-premium .cart-list { gap: 10px; }
.dashboard-premium .repair-item,
.dashboard-premium .cart-row { transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.dashboard-premium .repair-item:hover,
.dashboard-premium .cart-row:hover {
  border-color:#a9c4ed;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(20,85,217,.09);
}

.dashboard-premium .table-actions { white-space: nowrap; }
.dashboard-premium .table-actions .icon-button { margin-inline: 2px; }
.dashboard-premium .row-link { color:#0d48c4; font-weight:900; }
.dashboard-premium .row-link:hover { color:#082f7d; text-decoration:underline; }

.dashboard-premium input[type="checkbox"],
.dashboard-premium input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #1455d9;
}

.dashboard-premium .field-error,
.dashboard-premium .validation-summary-errors { color:#bd2033; font-weight:700; }

@media (max-width: 840px) {
  .dashboard-premium .customers-search-bar { align-items:stretch; }
  .dashboard-premium .customers-search-bar > *,
  .dashboard-premium .customers-search-bar .login-field { flex:1 1 calc(50% - 10px); }
  .dashboard-premium .system-grid[style*="repeat(3"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 560px) {
  .dashboard-premium .customers-search-bar { display:grid; grid-template-columns:1fr; }
  .dashboard-premium .customers-search-bar > *,
  .dashboard-premium .customers-search-bar .login-field { width:100%; min-width:0 !important; }
  .dashboard-premium .form-grid,
  .dashboard-premium .entity-form .form-grid,
  .dashboard-premium .system-grid,
  .dashboard-premium .info-grid,
  .dashboard-premium .system-grid[style*="repeat(3"] { grid-template-columns:1fr !important; }
  .dashboard-premium .panel-header > div:last-child { width:100%; flex-wrap:wrap; }
  .dashboard-premium .table-wrap { border-radius:14px; }
}

/* Financial and operational modules. */
.dashboard-premium .metrics-grid {
  gap: 14px;
  margin-bottom: 18px;
}
.dashboard-premium .metric-card {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  padding: 18px;
  isolation: isolate;
}
.dashboard-premium .metric-card::after {
  content:"";
  position:absolute;
  inset-inline-end:-36px;
  bottom:-50px;
  z-index:-1;
  width:130px;
  height:130px;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent,#1455d9) 13%,transparent);
}
.dashboard-premium .metric-card::before {
  content:"";
  position:absolute;
  inset-block:14px;
  inset-inline-start:0;
  width:4px;
  border-radius:0 6px 6px 0;
  background:var(--accent,#1455d9);
}
.dashboard-premium .metric-card strong { color:#101d39; font-size:1.45rem; }
.dashboard-premium .metric-card small { color:#71809a; }
.dashboard-premium .metric-card.accent-green { --accent:#0a9b5b; }
.dashboard-premium .metric-card.accent-danger { --accent:#df3345; }
.dashboard-premium .metric-card.accent-blue { --accent:#1455d9; }

.dashboard-premium .checklist-box {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:9px;
  padding:12px;
  border:1px solid #dce5f2;
  border-radius:15px;
  background:#f8fbff;
}
.dashboard-premium .checklist-box .login-remember {
  min-height:44px;
  margin:0;
  padding:9px 10px;
  border:1px solid #e2eaf5;
  border-radius:11px;
  background:#fff;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.dashboard-premium .checklist-box .login-remember:hover {
  border-color:#9ebce9;
  background:#f0f6ff;
  transform:translateY(-1px);
}

.dashboard-premium details {
  border:1px solid #dce5f2 !important;
  border-radius:13px !important;
  background:#f8fbff !important;
}
.dashboard-premium details summary { color:#183153; }

@media (max-width: 680px) {
  .dashboard-premium .metrics-grid { grid-template-columns:1fr; }
  .dashboard-premium .metric-card { min-height:110px; }
  .dashboard-premium .checklist-box { grid-template-columns:1fr; }
}

/* Large report navigation cards. */
.report-navigation {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}
.report-nav-card {
  --report-color:#1455d9;
  --report-color-dark:#0b3da6;
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 22px;
  gap:12px;
  align-items:center;
  min-height:118px;
  overflow:hidden;
  padding:17px;
  border:1px solid color-mix(in srgb,var(--report-color) 25%,#dce5f2);
  border-radius:20px;
  background:
    radial-gradient(circle at 0 100%,color-mix(in srgb,var(--report-color) 12%,transparent),transparent 58%),
    linear-gradient(145deg,#fff,#f5f9ff);
  color:#14213d;
  box-shadow:0 10px 26px rgba(22,48,90,.08);
  isolation:isolate;
}
.report-nav-card::before {
  content:"";
  position:absolute;
  inset-block:16px;
  inset-inline-start:0;
  width:4px;
  border-radius:0 6px 6px 0;
  background:var(--report-color);
}
.report-nav-card.profit { --report-color:#6d45d8; --report-color-dark:#4e2db3; }
.report-nav-card.inventory { --report-color:#e39a00; --report-color-dark:#a96e00; }
.report-nav-card.activity { --report-color:#0a9b5b; --report-color-dark:#087548; }
.report-nav-card.cashflow { --report-color:#148dc1; --report-color-dark:#096b9c; }
.report-nav-card:hover {
  border-color:var(--report-color);
  transform:translateY(-3px);
  box-shadow:0 16px 34px color-mix(in srgb,var(--report-color) 18%,transparent);
}
.report-nav-card.active {
  border-color:transparent;
  background:linear-gradient(135deg,var(--report-color),var(--report-color-dark));
  color:#fff;
  box-shadow:0 16px 34px color-mix(in srgb,var(--report-color) 34%,transparent);
}
.report-nav-icon {
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  border-radius:17px;
  background:color-mix(in srgb,var(--report-color) 12%,#fff);
  color:var(--report-color-dark);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--report-color) 18%,transparent);
}
.report-nav-card.active .report-nav-icon { background:rgba(255,255,255,.17); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.report-nav-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.report-nav-copy { min-width:0; }
.report-nav-copy strong { display:block; font-size:1.02rem; font-weight:900; line-height:1.4; }
.report-nav-copy small { display:block; margin-top:5px; color:#71809a; font-size:.73rem; font-weight:700; line-height:1.55; }
.report-nav-card.active .report-nav-copy small { color:rgba(255,255,255,.78); }
.report-nav-arrow { color:var(--report-color); font-size:1.65rem; font-weight:300; transition:transform .18s ease; }
.report-nav-card:hover .report-nav-arrow { transform:translateX(-3px); }
.report-nav-card.active .report-nav-arrow { color:#fff; }
html[dir="ltr"] .report-nav-arrow { transform:rotate(180deg); }
html[dir="ltr"] .report-nav-card:hover .report-nav-arrow { transform:rotate(180deg) translateX(-3px); }

@media (max-width: 1180px) {
  .report-navigation { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .report-navigation { grid-template-columns:1fr; gap:10px; }
  .report-nav-card { min-height:98px; grid-template-columns:50px minmax(0,1fr) 18px; padding:14px; border-radius:16px; }
  .report-nav-icon { width:50px; height:50px; border-radius:14px; }
  .report-nav-icon svg { width:27px; height:27px; }
}