/* ══════════════════════════════════════════════════════════════════
   redesign.css — طبقة تسطيح وتهدئة الواجهة (ydora / tezkar فقط)
   يُحمَّل آخر ملف بعد mobile-responsive.css
   لا يعدّل أي ملف CSS قائم — كل شيء هنا override
   ملاحظة: premium.css يستخدم !important بكثافة، لذلك القواعد هنا
   تستخدم بادئة (html body) لرفع الـspecificity + !important لتغلبه.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1) التوكنز — 10 متغيرات فقط (الباقي كما هو)
   ───────────────────────────────────────────── */
:root,
[data-theme="zid-dark"] {
  --premium-gradient: var(--accent) !important;  /* كان linear-gradient */
  --mesh1:            transparent !important;    /* شبكة body::before */
  --mesh2:            transparent !important;
  --glow:             transparent !important;    /* هالة بنفسجية */
  --border:           rgba(255,255,255,0.10) !important;
  --shadow:           none !important;
  --shadow-sm:        none !important;
  --radius:           8px !important;
  --radius-sm:        6px !important;
  --accent2:          #5b5470 !important;        /* كان #F5A623 */
}

[data-theme="zid-light"] {
  --premium-gradient: var(--accent) !important;
  --mesh1:            transparent !important;
  --mesh2:            transparent !important;
  --glow:             transparent !important;
  --border:           rgba(0,0,0,0.12) !important;
  --shadow:           none !important;
  --shadow-sm:        none !important;
  --radius:           8px !important;
  --radius-sm:        6px !important;
  --accent2:          #5f5873 !important;        /* كان #e89209 */
}

/* استعادة الدلالة اللونية للمؤشرات التي كانت تعتمد على accent2
   (بدونها يصبح "غير متصل" بنفس لون كل شيء آخر) */
html body .status-dot.disconnected,
html body .w-dot.off,
html body .notif-count { background: var(--orange) !important; }

/* ─────────────────────────────────────────────
   2) إزالة كل التدرّجات — ألوان مسطّحة فقط
   ───────────────────────────────────────────── */
html body::before { background: none !important; }

/* أسطح وبطاقات */
html body .connection-card,
html body .welcome-banner,
html body .chat-messages,
html body .chat-empty,
html body .premium-glass-panel,
html body .luxury-welcome-section,
html body .brand-banner-premium,
html body .camp-kpi-card.accent,
html body .camp-kpi-card.orange,
html body .camp-lead-card.selected,
html body .conv-preview-item.active,
html body .cfp.active,
html body .cpg-page.active,
html body .cs-tab.active,
html body .msg-wrapper.outgoing-ai .msg-bubble {
  background-image: none !important;
  background-color: var(--surface) !important;
  box-shadow: none !important;
}

/* عناصر ملوّنة تبقى بلون واحد مسطّح */
html body .logo-icon,
html body .conv-avatar,
html body .clc-avatar,
html body .cpp-bar-fill,
html body .clc-badge.vip,
html body .um-badge-super,
html body .pa-brand-logo,
html body .ai-pill input:checked + span,
html body .nav-item.active {
  background-image: none !important;
  background-color: var(--accent) !important;
  box-shadow: none !important;
}

/* طبقات زخرفية (::before/::after) تحمل تدرّجات أو وميض */
html body .stat-card::after,
html body .stats-kpi-card::before,
html body .camp-kpi-card::before,
html body .camp-lead-card::before,
html body .welcome-banner::after,
html body .send-btn::before,
html body .brand-banner::after,
html body #sidebarLogo::after,
html body .logo-icon::after,
html body .banner-glow,
html body .banner-divider,
html body .logo-scan-line {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* ⚠️ نصوص بتدرّج + -webkit-text-fill-color:transparent
   إزالة الخلفية وحدها تجعل النص غير مرئي — لذلك نعيد لون التعبئة */
html body .logo-title,
html body .topbar-brand-text,
html body .greeting-text h1 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
}

/* ─────────────────────────────────────────────
   3) الجداول — صف 48px، بلا بطاقات ولا ظلال
   يغلب: premium.css table/tbody tr/tbody td (كلها !important)
   ───────────────────────────────────────────── */
html body table,
html body .premium-luxury-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  box-shadow: none !important;
}

html body tbody tr,
html body .premium-luxury-table tbody tr {
  height: 48px !important;
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border2) !important;
}

html body tbody td,
html body .premium-luxury-table td,
html body .premium-luxury-table tbody td {
  height: 48px !important;
  padding: 0 16px !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* أنصاف الأقطار على أول/آخر خلية (كانت 18px !important) */
html body tbody td:first-child,
html body tbody td:last-child,
html body .premium-luxury-table td:first-child,
html body .premium-luxury-table td:last-child { border-radius: 0 !important; }

html body thead th,
html body .premium-luxury-table thead th {
  padding: 0 16px !important;
  height: 40px !important;
  background: var(--surface2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
}

html body tbody tr:hover,
html body .premium-luxury-table tbody tr:hover {
  background: var(--surface2) !important;
  transform: none !important;
}

html body .premium-table-container {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* ─────────────────────────────────────────────
   4) بطاقات المؤشرات — خلفية محايدة موحّدة
   ───────────────────────────────────────────── */
html body .stat-card,
html body .stats-kpi-card,
html body .camp-kpi-card,
html body .camp-kpi-card.accent,
html body .camp-kpi-card.orange,
html body .stat-card.success,
html body .um-stat-card,
html body .perf2-kpi,
html body .pa-kpi,
html body .glass-stat-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body .stat-card:hover,
html body .stats-kpi-card:hover,
html body .um-stat-card:hover,
html body .perf2-kpi:hover,
html body .pa-kpi:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
}

/* شارات الأيقونات الملوّنة داخل البطاقات → محايدة */
html body .perf2-kpi-icon.ic-indigo,
html body .perf2-kpi-icon.ic-sky,
html body .perf2-kpi-icon.ic-rose,
html body .perf2-kpi-icon.ic-emerald,
html body .pa-kpi-icon.i-indigo,
html body .pa-kpi-icon.i-rose {
  background: var(--surface2) !important;
  border-radius: var(--radius-sm) !important;
}

/* ─────────────────────────────────────────────
   5) كتلة اللوجو في السايدبار: ~210px → 56px
   ───────────────────────────────────────────── */
html body .brand-banner {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow: hidden !important;
  background: none !important;
  border-bottom: 1px solid var(--border2) !important;
}

html body .banner-logo-wrap { padding: 0 !important; flex-shrink: 0 !important; }

html body .banner-logo,
html body #brandLogo {
  max-width: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html body .banner-slogan,
html body .slogan-text,
html body .slogan-line,
html body .slogan-sub { display: none !important; }

/* ─────────────────────────────────────────────
   6) أشرطة الفلاتر — صف واحد بدل ثلاثة
   ───────────────────────────────────────────── */
html body .camp-filters-bar,
html body .q-filter-panel,
html body .q-stats-bar,
html body .crm-toolbar-premium,
html body .perf-grid-toolbar,
html body .wl-toolbar,
html body .cs-tab-bar,
html body .camp-filter-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin-bottom: 10px !important;
  overflow-x: auto !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

html body .q-filter-group,
html body .crm-toolbar-left {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .perf-filter-input,
html body .perf-filter-select,
html body .inv-filter-btn {
  height: 32px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: var(--radius-sm) !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────
   7) الأزرار — البنفسجي للأساسية فقط، والثانوية ghost
   ───────────────────────────────────────────── */
html body .btn-primary,
html body .premium-launch-btn,
html body .camp-launch-btn,
html body .um-btn-submit,
html body .confirm-btn-ok,
html body .send-btn,
html body .clc-btn-send {
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

html body .btn-success,
html body .um-add-btn,
html body .camp-add-btn,
html body .btn-connect {
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

html body .btn-success:hover,
html body .um-add-btn:hover,
html body .camp-add-btn:hover,
html body .btn-connect:hover {
  background: var(--surface2) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* ─────────────────────────────────────────────
   8) إزالة علامة اللوجو المائية من أقسام الصفحات
      (تُخفى بلا تعديل HTML)
   ───────────────────────────────────────────── */
html body .page-watermark,
html body .watermark-img { display: none !important; }

/* ═════════════════════════════════════════════════════════════════
   9) إغلاق الثغرات التي كشفها القياس في المتصفح
   ═════════════════════════════════════════════════════════════════ */

/* 9-أ) .pa-scope أعلى تخصيصاً (0,3,3) فكان يغلب قاعدة الجدول
        ويعيد ارتفاع الصف داخل قسم مستشار الأداء */
html body .pa-scope .premium-luxury-table tbody td {
  padding: 0 16px !important;
  height: 48px !important;
  line-height: 1.4 !important;
}
html body .pa-scope .premium-luxury-table tbody tr {
  height: 48px !important;
  border-bottom: 1px solid var(--border2) !important;
}

/* 9-ب) #page-settings .btn-primary يحمل ID + !important (1,1,0)
        و .btn.btn-primary يحمل صنفين — كلاهما كان يغلب */
html body #page-settings .btn-primary,
html body .btn.btn-primary,
html body button.btn.btn-primary,
html body .btn-reconnect,
html body .btn-lock-now,
html body .premium-action-btn {
  background-color: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
}

/* 9-ج) تدرّجات مكتوبة inline في style="" داخل الـHTML
        (لا يمكن تعديل الـbody، و!important في CSS يغلب الـinline).
        الأزرار → لون أساسي مسطّح | العناصر الزخرفية → سطح محايد */
html body button[style*="gradient"],
html body a[style*="gradient"] {
  background-image: none !important;
  background-color: var(--accent) !important;
  color: #fff !important;
}

html body div[style*="gradient"],
html body span[style*="gradient"],
html body .stats-kpi-icon,
html body .security-badge-glow {
  background-image: none !important;
  background-color: var(--surface2) !important;
}

/* 9-د) استثناء مقصود: .logo-color-btn عيّنات ألوان في الإعدادات،
        التدرّج فيها هو محتواها الوظيفي — تُترك كما هي عمداً */


/* ═════════════════════════════════════════════════════════════════
   10) مودال عرض السعر — إعادة هيكلة (شاشة واحدة)
   ═════════════════════════════════════════════════════════════════ */
html body .q-modal { width: 900px; max-width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; }

/* الترويسة: سطح الثيم + نص الثيم + حد سفلي 1px، بلا تعبئة بنفسجية */
html body .q-modal-header {
  background: var(--surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border2) !important;
  padding: 18px 24px !important;
}
html body .q-modal-header h2 { color: var(--text) !important; font-size: 17px !important; font-weight: 800 !important; }
html body .q-modal .modal-close:hover { background: var(--surface2) !important; color: var(--text) !important; transform: none !important; }

html body .q-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }

/* شريط الإجراءات + اللوحات: :empty يخفيها تلقائياً في وضع الإنشاء */
html body .q-actionbar:empty,
html body .q-panel:empty { display: none !important; }
html body .q-actionbar { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border2); }
html body .q-actionbar-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

html body .q-btn-secondary,
html body .q-btn-ghost,
html body .q-btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border-radius: var(--radius-sm); font-weight: 700; white-space: nowrap;
  background: transparent; background-image: none; transition: background .15s, border-color .15s;
}
html body .q-btn-secondary { padding: 8px 14px; font-size: 13px; color: var(--text); border: 1px solid var(--accent); }
html body .q-btn-ghost     { padding: 8px 14px; font-size: 13px; color: var(--text2); border: 1px solid var(--border2); }
html body .q-btn-ghost-sm  { padding: 5px 12px; font-size: 12px; color: var(--text2); border: 1px solid var(--border2); }
html body .q-btn-secondary:hover { background: var(--surface2); }
html body .q-btn-ghost:hover,
html body .q-btn-ghost-sm:hover { background: var(--surface2); color: var(--text); border-color: var(--accent); }

/* قائمة ⋯ */
html body .q-more { position: relative; display: inline-block; }
html body .q-more-btn { font-size: 16px !important; line-height: 1; padding: 7px 12px !important; }
html body .q-more-menu {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
  min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
html body .q-more-menu.is-open { display: block; }
html body .q-more-menu > button,
html body .q-more-menu > a {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
  background: none; border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  text-align: start; text-decoration: none;
}
html body .q-more-menu > button:hover,
html body .q-more-menu > a:hover { background: var(--surface2); }
html body .q-more-menu > .q-danger { color: #ef5350; }

/* الحقول */
html body .q-fields { display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; align-items: flex-end; }
html body .q-fields .form-group { margin: 0; }
html body .q-fields label { display: block; margin-bottom: 5px; color: var(--text2); font-weight: 600; font-size: 12.5px; }
html body .q-fields .search-input { width: 100%; }
html body .q-f-cust { flex: 2; min-width: 250px; }
html body .q-f-grp, html body .q-f-vat, html body .q-f-val { flex: 1; min-width: 150px; }

/* جدول البنود */
html body .q-items-wrap { overflow-x: auto; margin-bottom: 14px; border: 1px solid var(--border2); border-radius: var(--radius); }
html body .q-items-table { width: 100%; border-collapse: collapse; text-align: right; table-layout: fixed; }
html body .q-items-table thead th { background: var(--surface2); font-weight: 600; color: var(--text2); font-size: 12px; }
html body .q-items-table .q-col-sm { width: 92px; }
html body .q-items-table .q-col-md { width: 110px; }
html body .q-items-table .q-col-x  { width: 32px; }
html body .q-items-table td input,
html body .q-items-table td select { width: 100%; border: none; background: transparent; }
html body .q-items-table td.q-item-amount { font-weight: 800; color: var(--accent); }
html body .q-items-table td.q-item-tax { color: var(--text2); font-size: 12px; }
html body .q-row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

/* اللوحات المرجعية */
html body .q-panel { margin-top: 16px; }
html body .q-panel-box { border: 1px solid var(--border2); border-radius: var(--radius); padding: 14px 16px; background: var(--surface2); }
html body .q-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
html body .q-panel-sub { font-size: 11px; color: var(--text3); font-weight: 500; }
html body .q-panel-body { font-size: 12.5px; color: var(--text3); }

/* التذييل */
html body .q-modal-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid var(--border2);
  background: var(--surface2); flex-shrink: 0;
}
html body .q-totals { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
html body .q-total-cell { text-align: center; min-width: 88px; }
html body .q-total-label { display: block; font-size: 10px; color: var(--text3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
html body .q-total-cell strong { font-size: 15px; color: var(--text); }
html body .q-total-cell strong.q-vat { color: var(--orange); }
html body .q-total-cell strong.q-grand { font-size: 21px; font-weight: 900; color: var(--accent); }
html body .q-total-sep { width: 1px; height: 30px; background: var(--border2); }
html body #q_submitBtn { padding: 11px 34px !important; font-size: 15px !important; font-weight: 700 !important; flex-shrink: 0; }

@media (max-width: 640px) {
  html body .q-fields .form-group { flex: 1 1 100%; }
  html body .q-modal-footer { justify-content: center; }
}