/* ==========================================================================
   Salam BI v7 (معاينة) — توحيد شكل باقي الشاشات مع الرئيسية والتنفيذية
   (رصيد صنف، متابعة البيع والتوزيع، الأرباح والخسائر، مؤشرات الأداء، المهام، الإعدادات)
   - مفيش تغيير في منطق الشاشات: نفس العناصر والـ IDs، الشكل بس.
   - كل القواعد تحت html.v7 .v6-page علشان تغلب تنسيقات الصفحة الداخلية.
   ========================================================================== */

/* ---- متغيرات النظام القديم → ألوان v7 (بتلوّن كل المكونات اللي بتستعملها) ---- */
html.v7 {
  --bg: #f4f7fc; --panel: #ffffff; --card: #ffffff; --line: #dde6f3; --text: #0f2d5b; --muted: #4b5b75;
  --navy: #0b3d91; --navy-2: #0b3d91; --navy-3: #2563c7;
  --palette-accent: #0b3d91; --palette-accent-hover: #0b2a5b; --palette-accent-shadow: rgba(11, 61, 145, .28);
  --palette-pill-bg: rgba(11, 61, 145, .08); --palette-focus-ring: rgba(37, 99, 199, .22); --palette-tint: rgba(11, 61, 145, .04);
  --palette-table-th: #0b2a5b; --palette-table-border: #d7263d;
  --row-hover: rgba(42, 120, 214, .07); --row-alt: #f8fafd;
  --shadow: 0 1px 2px rgba(11, 42, 91, .04), 0 10px 28px -14px rgba(11, 42, 91, .14);
  --shadow-md: 0 12px 28px rgba(16, 24, 40, .10);
}

/* ---- عناوين الشاشات (زي .ph في المعرض) ---- */
html.v7 .v6-page .sr-title,
html.v7 .v6-page .pl-title,
html.v7 .v6-page .sl-card h1 { font-size: 22px !important; font-weight: 700; color: var(--v7-ink); letter-spacing: -.005em; }
html.v7 .v6-page .sr-card h2.sr-title { font-size: 16px !important; }

/* ---- الكروت ---- */
html.v7 .v6-page .sl-card,
html.v7 .v6-page .pl-card,
html.v7 .v6-page .sr-card,
html.v7 .v6-page .card:not(.g7 *),
html.v7 .v6-page .kpi-card {
  background: #fff; border: 1px solid var(--v7-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(11, 42, 91, .04), 0 10px 28px -14px rgba(11, 42, 91, .14);
  transition: transform .35s var(--v7-ease-out), box-shadow .35s, border-color .35s;
}
html.v7 .v6-page .sr-card { padding: 18px 20px; }
html.v7 .v6-page .kpi-card:hover, html.v7 .v6-page .sr-kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .10); border-color: #d3d9e2; }
html.v7 .v6-page .kpi-card .value { font-size: 26px; font-weight: 700; color: var(--v7-ink); letter-spacing: -.01em; }
html.v7 .v6-page .kpi-card .label { color: var(--v7-ink-2); font-weight: 500; }
html.v7 .v6-page .kpi-card.good { border-inline-start: 4px solid var(--v7-good); }
html.v7 .v6-page .kpi-card.bad { border-inline-start: 4px solid var(--v7-accent); }
html.v7 .v6-page .kpi-card.bad .value, html.v7 .v6-page .kpi-card.bad .note { color: var(--v7-accent); }

/* شريط الفلاتر الثابت في الأرباح والخسائر */
html.v7 .v6-page .pl-sticky { background: var(--v7-bg); box-shadow: 0 10px 16px -14px rgba(11, 42, 91, .35); }

/* ---- الأزرار: أساسي كحلي + ثانوي فاتح (زي .btn.pri / .btn في المعرض) ---- */
html.v7 .v6-page .sl-btn-primary,
html.v7 .v6-page .pl-btn:not(.ghost),
html.v7 .v6-page .sr-btn:not(.ghost):not(.ok),
html.v7 .v6-page button.primary {
  background: var(--v7-navy-2); color: #fff; border: 1px solid var(--v7-navy-2); border-radius: 10px; font-weight: 600;
  transition: transform .2s var(--v7-ease-out), background .25s, box-shadow .25s; position: relative; overflow: hidden;
}
html.v7 .v6-page .sl-btn-primary:hover,
html.v7 .v6-page .pl-btn:not(.ghost):hover,
html.v7 .v6-page .sr-btn:not(.ghost):not(.ok):hover,
html.v7 .v6-page button.primary:hover { background: var(--v7-navy); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11, 42, 91, .28); }
html.v7 .v6-page .sr-btn.ok { background: var(--v7-accent); border-color: var(--v7-accent); }
html.v7 .v6-page .sr-btn.ok:hover { background: #b81e32; box-shadow: 0 8px 20px rgba(215, 38, 61, .3); }
html.v7 .v6-page .sl-btn-ghost,
html.v7 .v6-page .pl-btn.ghost,
html.v7 .v6-page .sr-btn.ghost,
html.v7 .v6-page button.secondary {
  background: #fff; color: var(--v7-ink); border: 1px solid var(--v7-line); border-radius: 10px; font-weight: 600;
  transition: transform .2s var(--v7-ease-out), background .25s, border-color .25s; position: relative; overflow: hidden;
}
html.v7 .v6-page .sl-btn-ghost:hover,
html.v7 .v6-page .pl-btn.ghost:hover,
html.v7 .v6-page .sr-btn.ghost:hover,
html.v7 .v6-page button.secondary:hover { background: #f3f7fd; border-color: #c9d6ea; transform: translateY(-1px); }
html.v7 .v6-page .sl-btn:active, html.v7 .v6-page .pl-btn:active, html.v7 .v6-page .sr-btn:active,
html.v7 .v6-page button.primary:active, html.v7 .v6-page button.secondary:active { transform: scale(.96); }

/* ---- الحقول ---- */
html.v7 .v6-page .sl-search input,
html.v7 .v6-page .pl-form input, html.v7 .v6-page .pl-form select,
html.v7 .v6-page .sr-f input, html.v7 .v6-page .sr-f select, html.v7 .v6-page .sr-in,
html.v7 .v6-page .ms-btn, html.v7 .v6-page .pk-box {
  border: 1px solid var(--v7-line) !important; background: #fff !important; border-radius: 10px !important; color: var(--v7-ink);
  transition: border-color .2s, box-shadow .2s;
}
html.v7 .v6-page .sl-search input:focus,
html.v7 .v6-page .pl-form input:focus, html.v7 .v6-page .pl-form select:focus,
html.v7 .v6-page .sr-f input:focus, html.v7 .v6-page .sr-f select:focus, html.v7 .v6-page .sr-in:focus,
html.v7 .v6-page .ms-btn:focus, html.v7 .v6-page .pk-box:focus-within {
  border-color: var(--v7-navy-3) !important; box-shadow: 0 0 0 3px rgba(37, 99, 199, .15) !important; outline: none;
}
html.v7 .v6-page .ms-panel, html.v7 .v6-page .pk-res { border: 1px solid var(--v7-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(11, 42, 91, .18); }
html.v7 .v6-page .ms-list label:hover, html.v7 .v6-page .pk-res button:hover { background: #eef3fb; }
html.v7 .v6-page .ms-list input, html.v7 .v6-page .sr-chk input, html.v7 .v6-page .sr-kind input { accent-color: var(--v7-navy-2); }
html.v7 .v6-page .pk-chip { background: #eef3fb; color: var(--v7-navy-2); }

/* ---- الشارات ---- */
html.v7 .v6-page .sl-chip { background: #eef3fb; color: var(--v7-navy-2); font-weight: 600; }
html.v7 .v6-page .sl-branch-chip { background: rgba(27, 175, 122, .12); color: #12805c; border-color: rgba(27, 175, 122, .3); }
html.v7 .v6-page .kind-sales { background: #e8f0fc; color: var(--v7-navy-2); }
html.v7 .v6-page .st-ok { background: #e7f6ef; color: #12805c; }

/* ---- التبويبات: شريط مقسّم بمؤشر منزلق (زي .seg في المعرض) ---- */
html.v7 .v6-page .sr-tabs, html.v7 .v6-page .preset-row {
  position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px;
  background: #fff; border: 1px solid var(--v7-line);
}
html.v7 .v6-page .sr-tab, html.v7 .v6-page .preset-row > button {
  position: relative; z-index: 1; border: 0 !important; background: none !important; color: var(--v7-ink-2) !important;
  border-radius: 9px; padding: 7px 14px; font-weight: 600; box-shadow: none !important; transition: color .25s;
}
html.v7 .v6-page .sr-tab.on, html.v7 .v6-page .preset-row > button.primary, html.v7 .v6-page .preset-row > button.on { color: #fff !important; }
.v7-seg-ind {
  position: absolute; z-index: 0; border-radius: 9px; background: var(--v7-navy-2);
  box-shadow: 0 6px 14px -6px rgba(11, 42, 91, .5); transition: all .4s var(--v7-ease-out); pointer-events: none;
}

/* ---- الجداول (زي .t في المعرض) ---- */
html.v7 .v6-page table.pl th, html.v7 .v6-page table.sr th { background: var(--v7-navy) !important; color: #fff; font-weight: 600; }
html.v7 .v6-page table.pl th.co { background: #0f5a74 !important; }
html.v7 .v6-page table.pl th.sub { background: #123b7a !important; }
html.v7 .v6-page table.pl td, html.v7 .v6-page table.sr td { border-bottom-color: #eef2f8; }
html.v7 .v6-page table.pl tr.grp td, html.v7 .v6-page table.pl tr.co td, html.v7 .v6-page table.sr tr.grp td { background: #f3f6fb; color: var(--v7-navy); }
html.v7 .v6-page table.pl tr.gp td, html.v7 .v6-page table.pl tr.tot td { background: #e8f0fc; }
html.v7 .v6-page table.pl tr.net td { background: var(--v7-navy); color: #fff; }
html.v7 .v6-page table.pl tr.net td.neg, html.v7 .v6-page table.pl tr.net .neg { color: #ffb3bd; }
html.v7 .v6-page table.pl tr:hover td, html.v7 .v6-page table.sr tr:hover td { background-color: #f3f7fd; }
html.v7 .v6-page .neg { color: var(--v7-accent); }
html.v7 .v6-page table.pl tr.k-net td:first-child { border-right-color: var(--v7-navy-3); }
html.v7 .v6-page .sl-tbl th { background: #f3f6fb; color: var(--v7-ink-2); }
html.v7 .v6-page .sl-tbl td.cur { background: rgba(42, 120, 214, .14); }
html.v7 .v6-page .pl-scroll, html.v7 .v6-page .sr-scroll { border: 1px solid var(--v7-line); border-radius: 12px; }

/* ---- رصيد صنف: المربعات زي الموبايل في المعرض (فرعك كحلي) ---- */
html.v7 .v6-page .sl-qbox { background: #f5f8fd; border: 1px solid var(--v7-line); border-radius: 12px; }
html.v7 .v6-page .sl-qbox b { font-weight: 700; color: var(--v7-ink); }
html.v7 .v6-page .sl-qbox.mine { background: var(--v7-navy-2); border-color: var(--v7-navy-2); color: #fff; }
html.v7 .v6-page .sl-qbox.mine b { color: #fff; }
html.v7 .v6-page .sl-qbox.mine span { color: #dbe5f7; opacity: 1; }
html.v7 .v6-page .sl-qbox.zero b { color: var(--v7-accent); }
html.v7 .v6-page .sl-item { transition: background .2s; }
html.v7 .v6-page .sl-item:hover { background: #f8fafd; }
html.v7 .v6-page .sl-price { color: var(--v7-navy-2); }
html.v7 .v6-page .sl-sheet { border-radius: 20px; }
/* نتائج البحث بتدخل متتابعة */
html.v7 .v6-page #slList > * { animation: v7row .45s var(--v7-ease-out) both; }
html.v7 .v6-page #slList > *:nth-child(2) { animation-delay: .04s; } html.v7 .v6-page #slList > *:nth-child(3) { animation-delay: .08s; }
html.v7 .v6-page #slList > *:nth-child(4) { animation-delay: .12s; } html.v7 .v6-page #slList > *:nth-child(n+5) { animation-delay: .16s; }

/* ---- متابعة البيع والتوزيع: مربعات الأرقام ---- */
html.v7 .v6-page .sr-kpi { background: #fff; border: 1px solid var(--v7-line); border-radius: 14px; transition: transform .35s var(--v7-ease-out), box-shadow .35s, border-color .35s; }
html.v7 .v6-page .sr-kpi .big { color: var(--v7-navy-2); font-weight: 700; }

/* ---- صفوف الجداول بتدخل متتابعة (زي row-in في المعرض) ---- */
html.v7.v7-in .v6-page tbody tr.v7-row { animation: v7row .45s var(--v7-ease-out) both; animation-delay: calc(var(--r, 0) * 28ms + .35s); }

@media (prefers-reduced-motion: reduce) {
  html.v7 .v6-page #slList > *, html.v7.v7-in .v6-page tbody tr.v7-row { animation: none !important; }
}

/* ===== v7: متابعة البيع والتوزيع — نفس تصميم Wix (repl) ===== */
html.v7-sr .v6-page .sr-wrap { max-width: none; }
html.v7 .v7-sr-ph .ph { align-items: flex-end; }
html.v7 .v7-sr-ph .sr-tabs.v7-seg { display: inline-flex; gap: 2px; padding: 3px; margin: 0; background: #fff; border: 1px solid var(--v7-line); border-radius: 10px; box-shadow: none; flex-wrap: wrap; }
html.v7 .v7-sr-ph .sr-tabs.v7-seg .sr-tab { border: 0; background: none; padding: 6px 14px; border-radius: 7px; font-size: 13px; color: #475467 !important; font-weight: 500; box-shadow: none; transition: background .25s, color .25s; }
html.v7 .v7-sr-ph .sr-tabs.v7-seg .sr-tab:hover { background: #f5f6f8; }
html.v7 .v7-sr-ph .sr-tabs.v7-seg .sr-tab.on { background: #f2f4f7 !important; color: #101828 !important; font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
html.v7 .v7-sr-ph .sr-tabs.v7-seg .seg-ind { display: none; }
/* الخطوات */
html.v7 .v7-sr-steps { margin: 0 0 14px; }
html.v7 .v7-sr-steps .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
html.v7 .v7-sr-steps .steps .s { font: inherit; text-align: start; cursor: pointer; min-width: 0; padding: 14px 16px; border-radius: 14px; background: #fff; transition: border-color .35s, box-shadow .35s, transform .2s; }
html.v7 .v7-sr-steps .steps .s:hover { transform: translateY(-1px); }
html.v7 .v7-sr-steps .steps .s:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; }
html.v7 .v7-sr-steps .steps .s i { flex: none; }
html.v7 .v7-sr-steps .steps .s b { display: block; font-size: 13.5px; color: #101828; }
html.v7 .v7-sr-steps .steps .s .sub { font-size: 12.5px; color: #475467; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
html.v7 .v7-sr-steps .steps .s > div { min-width: 0; }
/* الفلاتر بتتطوى بعد الحساب */
html.v7.v7-sr-collapsed .v7-sr-filters { display: none !important; }
html.v7 .v7-sr-filters { margin-bottom: 14px; }
/* المؤشرات */
html.v7 .v7-sr-head { margin-bottom: 14px; }
html.v7 .v7-sr-head[hidden] { display: none !important; }
html.v7 .v7-sr-head .stat { padding: 18px 18px 14px; }
html.v7 .v7-sr-head .stat .val { font-size: 26px; margin: 10px 0 8px; }
html.v7 .v7-sr-head .stat .val.warn { color: #b45309; }
html.v7 .v7-sr-head .stat .val.bad { color: #d7263d; }
html.v7 .v7-sr-head .stat .foot b { color: #344054; }
html.v7 .v7-sr-head .mt { margin-top: 14px; }
/* إشغال الفروع */
html.v7 .v7-occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; }
html.v7 .v7-occ-c { border: 1px solid var(--v7-line); border-radius: 12px; padding: 12px 14px; background: #fff; transition: transform .25s, box-shadow .25s; }
html.v7 .v7-occ-c:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.08); }
html.v7 .v7-occ-c .t1 { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13.5px; }
html.v7 .v7-occ-c .t1 b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v7 .v7-occ-c .pct { font-size: 22px; font-weight: 700; margin: 10px 0 8px; color: #101828; }
html.v7 .v7-occ-c .prog i { background: #2a78d6; }
html.v7 .v7-occ-c.st-bad .prog i { background: #d7263d; }
html.v7 .v7-occ-c .meta { display: flex; justify-content: space-between; font-size: 12px; color: #98a2b3; margin-top: 8px; }
html.v7 .v7-occ-c .meta b { color: #475467; }
html.v7 .v7-occ-c .meta:last-child b { color: #101828; }
html.v7 .v7-occ-c .badge { white-space: nowrap; flex: none; }
html.v7 .v7-occ-c .badge.neu { background: #f2f4f7; color: #475467; }
html.v7-in .v7-occ-c { animation: g7-rise .5s var(--ease-out, ease) both; animation-delay: calc(var(--k,0) * 40ms + .1s); }
/* لما كروت الإشغال الجديدة ظاهرة: كروت الفروع القديمة تستخبى (كروت الأقسام تفضل) */
html.v7.v7-sr-hasocc #resBranches .sr-kpi:not(.cat-card) { display: none !important; }
/* سطور التحويل */
html.v7 .v6-page .sr-card.v7-sr-lines { padding: 16px 18px; }
html.v7 .v7-lines-h .ch { margin-bottom: 10px; }
html.v7 .v7-lines-h .ch h3 { font-size: 15px; font-weight: 600; margin: 0; }
html.v7 .v7-lines-h .btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--v7-line); background: #fff; font-size: 13px; cursor: pointer; }
html.v7 .v6-page .v7-btn-red, html.v7 .v6-page .sr-btn.ok.v7-btn-red { display: inline-flex !important; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; background: #d7263d !important; border-color: #d7263d !important; color: #fff !important; font-weight: 600; }
html.v7 .v6-page .v7-btn-red:hover { background: #b81e32 !important; }
html.v7 .v7-lines-opts { justify-content: flex-start !important; gap: 10px !important; margin-bottom: 8px; }
html.v7 .v7-lines-opts > div:first-child { display: none; }
html.v7 .v7-lines-opts #exportForm { gap: 10px !important; }
html.v7 #resWarn:not(.v7-open) { display: none; }
html.v7 .v6-page .sr-sub-tabs { margin: 10px 0 8px; }
html.v7 .v6-page #subLines table.sr, html.v7 .v6-page #subCats table.sr { font-size: 13px; }
html.v7 .v6-page #subLines table.sr th, html.v7 .v6-page #subCats table.sr th { background: #f9fafb !important; color: #475467 !important; font-weight: 600; border-bottom: 1px solid var(--v7-line); }
html.v7 .v6-page #subLines table.sr td { border-bottom: 1px solid #f2f4f7; padding: 10px 12px; }
html.v7 .v6-page #subLines table.sr tr:hover td { background: #f9fafb; }
html.v7 .v6-page .kind-tag { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; border: 0; }
html.v7 .v6-page .kind-tag.kind-sales { background: #e3f6ee; color: #0f8a5f; }
html.v7 .v6-page .kind-tag.kind-arrivals { background: #f2f4f7; color: #475467; }
/* جدول التغذية الأسبوعي */
html.v7 .v7-sr-sched { margin-top: 14px; }
html.v7 .v7-week { width: 100%; }
html.v7 .v7-week th.c, html.v7 .v7-week td.c { text-align: center; }
html.v7 .v7-week td { height: 40px; }
html.v7 .v7-week .today { background: #f8fafe; }
html.v7 .v7-day { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-style: normal; font-weight: 700; font-size: 12px; vertical-align: middle; }
html.v7 .v7-day.go { background: #2a78d6; color: #fff; }
html.v7 .v7-day.prep { background: rgba(42,120,214,.14); color: #2a78d6; }
html.v7 .v7-sched-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: #475467; margin-top: 12px; }
html.v7 .v7-sched-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* شكل نفس النقاط في تبويب «جدول التغذية» للتعديل */
html.v7 #planTable input[type=checkbox][data-pk=day], html.v7 #planTable input[type=checkbox][data-pk=prepBefore] {
    -webkit-appearance: none; appearance: none; width: 24px !important; height: 24px !important; margin: 0; border-radius: 7px;
    border: 1px dashed #d0d5dd; background: #fff; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; transition: background .25s, border-color .25s, transform .15s; }
html.v7 #planTable input[type=checkbox][data-pk=day]:checked { background: #2a78d6; border: 1px solid #2a78d6; }
html.v7 #planTable input[type=checkbox][data-pk=day]:checked::after { content: "✓"; color: #fff; font-weight: 700; font-size: 14px; line-height: 1; }
html.v7 #planTable input[type=checkbox][data-pk=prepBefore]:checked { background: rgba(42,120,214,.16); border: 1px solid rgba(42,120,214,.4); }
html.v7 #planTable input[type=checkbox][data-pk=prepBefore]:checked::after { content: "ت"; color: #2a78d6; font-weight: 700; font-size: 12px; line-height: 1; }
html.v7 #planTable input[type=checkbox]:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; }
html.v7 #planTable input[type=checkbox]:disabled { opacity: .5; cursor: default; }
@media (max-width: 1100px) { html.v7 .v7-sr-steps .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  html.v7 .v7-sr-steps .steps { grid-template-columns: minmax(0, 1fr); }
  html.v7 .v7-sr-ph .sr-tabs.v7-seg { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  html.v7 .v7-occ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { html.v7 .v7-occ-c, html.v7 .v7-sr-steps .steps .s, html.v7 #planTable input[type=checkbox] { transition: none; animation: none !important; } }
html.v7 .v7-occ-empty { grid-column: 1 / -1; text-align: center; padding: 26px 12px; color: #667085; }