/* =============================================================================
   إدارة المستودعات — طقم iv-* المشترك لكل شاشات المخزون
   على نظام لوحة الإدارة نفسه: خلفية فاتحة، بطاقات بيضاء بحدّ رمادي، أخضر زمردي للفعل
   الأساسي (#047857 الحامل لنص أبيض)، والحالة بالشكل (شريط/شارة) قبل اللون.
   الإضافة والتعديل والتفاصيل شاشات مستقلة بأصناف rc-* من record-page.css؛
   هذا الملف للّوحة والقوائم والتقارير.
   ============================================================================= */
:root {
    --iv-ink: #0f172a; --iv-mut: #64748b; --iv-line: #e5e7eb; --iv-soft: #f1f5f9; --iv-bg: #f8fafc;
    --iv-acc: #047857; --iv-acc2: #065f46; --iv-accs: #ecfdf5;
    --iv-warn: #b45309; --iv-warns: #fffbeb; --iv-bad: #b91c1c; --iv-bads: #fef2f2; --iv-info: #1d4ed8; --iv-infos: #eff6ff;
}
.iv { display: flex; flex-direction: column; gap: 14px; color: var(--iv-ink); padding-bottom: 30px; }
.iv .num { font-variant-numeric: tabular-nums; }
.iv a { text-decoration: none; }

/* ── رأس الشاشة ── */
.iv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--iv-line); border-radius: 16px; padding: 14px 18px; }
.iv-head h1 { margin: 0; font-size: 1.35rem; font-weight: 900; display: flex; gap: 8px; align-items: center; }
.iv-head h1 i { color: var(--iv-acc); }
.iv-head p { margin: 3px 0 0; color: var(--iv-mut); font-size: .86rem; }
.iv-head__a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.iv-crumb { font-size: .78rem; color: var(--iv-mut); display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.iv-crumb a { color: var(--iv-mut); } .iv-crumb a:hover { color: var(--iv-acc); }

/* ── أزرار ── */
.iv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--iv-acc); color: #fff; border: 1px solid var(--iv-acc); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.iv-btn:hover { background: var(--iv-acc2); color: #fff; }
.iv-btn:disabled { opacity: .55; cursor: not-allowed; }
.iv-btn--ghost { background: #fff; color: var(--iv-ink); border-color: #cbd5e1; }
.iv-btn--ghost:hover { background: var(--iv-soft); color: var(--iv-ink); }
.iv-btn--danger { background: #fff; color: var(--iv-bad); border-color: #fecaca; }
.iv-btn--danger:hover { background: var(--iv-bads); color: var(--iv-bad); }
.iv-btn--sm { height: 32px; padding: 0 10px; font-size: .8rem; border-radius: 8px; }
.iv-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; color: var(--iv-ink); cursor: pointer; }
.iv-ico:hover { background: var(--iv-soft); color: var(--iv-ink); }
.iv-ico .spin { display: inline-block; animation: iv-spin 1s linear infinite; }
.iv-act { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; color: var(--iv-mut); background: none; border: 0; cursor: pointer; }
.iv-act:hover { background: var(--iv-soft); color: var(--iv-ink); }
.iv-act--bad:hover { background: var(--iv-bads); color: var(--iv-bad); }

/* ── عناوين وصناديق ── */
.iv-h { margin: 0; font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.iv-h i { color: var(--iv-acc); } .iv-h .num { color: var(--iv-mut); font-size: .82rem; }
.iv-box { background: #fff; border: 1px solid var(--iv-line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.iv-box > h3 { margin: 0 0 10px; font-size: .92rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.iv-box > h3 i { color: var(--iv-acc); }
.iv-box > h3 a, .iv-box > h3 .iv-more { margin-inline-start: auto; font-size: .76rem; font-weight: 700; color: #2563eb; }
.iv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.iv-main, .iv-aside { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.iv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── تنبيهات ── */
.iv-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.iv-alert { display: flex; align-items: center; gap: 10px; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--iv-line); background: #fff; color: var(--iv-ink); border-inline-start: 4px solid var(--iv-mut); }
.iv-alert:hover { box-shadow: 0 6px 16px -10px rgba(15,23,42,.35); color: var(--iv-ink); }
.iv-alert--bad { border-inline-start-color: var(--iv-bad); } .iv-alert--bad .iv-alert__n { background: var(--iv-bads); color: var(--iv-bad); }
.iv-alert--warn { border-inline-start-color: #f59e0b; } .iv-alert--warn .iv-alert__n { background: var(--iv-warns); color: var(--iv-warn); }
.iv-alert--info { border-inline-start-color: #3b82f6; } .iv-alert--info .iv-alert__n { background: var(--iv-infos); color: var(--iv-info); }
.iv-alert__n { min-width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.05rem; padding: 0 6px; }
.iv-alert__t { flex: 1; min-width: 0; } .iv-alert__t b { display: block; font-size: .88rem; } .iv-alert__t small { display: block; color: var(--iv-mut); font-size: .75rem; }
.iv-alert > i { color: var(--iv-mut); }
.iv-ok { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--iv-accs); border: 1px solid #a7f3d0; color: var(--iv-acc2); }
.iv-ok i { font-size: 1.5rem; } .iv-ok b { display: block; } .iv-ok span { font-size: .85rem; }

/* ── مؤشرات ── */
.iv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.iv-kpi { background: #fff; border: 1px solid var(--iv-line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; color: var(--iv-ink); }
a.iv-kpi:hover { border-color: #a7f3d0; color: var(--iv-ink); }
.iv-kpi > span { font-size: .78rem; color: var(--iv-mut); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.iv-kpi > b { font-size: 1.4rem; font-weight: 900; line-height: 1.2; }
.iv-kpi > b em { font-style: normal; font-size: .78rem; color: var(--iv-mut); font-weight: 700; }
.iv-kpi > small { font-size: .74rem; color: var(--iv-mut); }
.iv-kpi--main { background: var(--iv-ink); border-color: var(--iv-ink); }
.iv-kpi--main > span, .iv-kpi--main > small { color: #cbd5e1; } .iv-kpi--main > b { color: #fff; }
.iv-trend { font-size: .74rem; font-weight: 800; } .iv-trend.up { color: #16a34a; } .iv-trend.down { color: #dc2626; }
.iv-kpi--main .iv-trend.up { color: #4ade80; } .iv-kpi--main .iv-trend.down { color: #fca5a5; }

/* ── أشرطة الفلاتر والبحث ── */
.iv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid var(--iv-line); border-radius: 14px; padding: 10px 12px; }
.iv-search { position: relative; flex: 1 1 240px; }
.iv-search i { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--iv-mut); }
.iv-search input { width: 100%; height: 38px; border: 1px solid #cbd5e1; border-radius: 10px; padding-inline: 32px 10px; font: inherit; font-size: .88rem; background: #fff; color: var(--iv-ink); }
.iv-sel { height: 38px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 10px; font: inherit; font-size: .86rem; background: #fff; color: var(--iv-ink); min-width: 150px; }
.iv-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.iv-chips button { height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--iv-line); background: #fff; font: inherit; font-size: .8rem; font-weight: 700; color: #334155; cursor: pointer; }
.iv-chips button .num { color: var(--iv-mut); margin-inline-start: 3px; }
.iv-chips button.on { background: var(--iv-ink); color: #fff; border-color: var(--iv-ink); } .iv-chips button.on .num { color: #cbd5e1; }

/* ── جداول القوائم ── */
.iv-tblw { background: #fff; border: 1px solid var(--iv-line); border-radius: 14px; overflow-x: auto; }
.iv-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.iv-tbl th { text-align: start; font-size: .74rem; font-weight: 800; color: var(--iv-mut); padding: 10px 12px; border-bottom: 1px solid var(--iv-line); background: #fbfcfd; white-space: nowrap; }
.iv-tbl td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--iv-soft); vertical-align: middle; }
.iv-tbl tr:last-child td { border-bottom: 0; }
.iv-tbl tbody tr:hover td { background: #fbfdfc; }
.iv-tbl td.n, .iv-tbl th.n { text-align: end; font-variant-numeric: tabular-nums; }
.iv-tbl td.acts { white-space: nowrap; text-align: end; }
.iv-tbl a.iv-name { color: var(--iv-ink); font-weight: 700; } .iv-tbl a.iv-name:hover { color: var(--iv-acc); }
.iv-tbl small { display: block; color: var(--iv-mut); font-size: .74rem; }
.iv-tbl tr.is-off td { color: #94a3b8; }
.iv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; font-size: .8rem; color: var(--iv-mut); border-top: 1px solid var(--iv-line); }
.iv-pg { display: flex; gap: 4px; }
.iv-pg button { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--iv-line); background: #fff; font: inherit; font-size: .8rem; cursor: pointer; color: var(--iv-ink); }
.iv-pg button.on { background: var(--iv-acc); border-color: var(--iv-acc); color: #fff; }
.iv-pg button:disabled { opacity: .45; cursor: not-allowed; }

/* ── شارات ورموز ── */
.iv-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; border: 1px solid var(--iv-line); background: #fff; color: #334155; white-space: nowrap; }
.iv-tag--ok { border-color: #a7f3d0; color: var(--iv-acc2); background: var(--iv-accs); }
.iv-tag--warn { border-color: #fde68a; color: var(--iv-warn); background: var(--iv-warns); }
.iv-tag--bad { border-color: #fecaca; color: var(--iv-bad); background: var(--iv-bads); }
.iv-tag--info { border-color: #bfdbfe; color: var(--iv-info); background: var(--iv-infos); }
.iv-tag--off { color: #94a3b8; }
.iv-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; color: #2563eb; background: var(--iv-infos); border: 1px solid #bfdbfe; border-radius: 6px; padding: 0 6px; direction: ltr; unicode-bidi: isolate; }
.iv-av { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; flex: none; background: var(--iv-accs); color: var(--iv-acc2); }
.iv-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.iv-who > div { min-width: 0; }
.iv-q { font-weight: 800; } .iv-q.neg { color: var(--iv-bad); } .iv-q.low { color: var(--iv-warn); }
.iv-meter { height: 5px; border-radius: 9px; background: var(--iv-soft); overflow: hidden; min-width: 70px; }
.iv-meter i { display: block; height: 100%; background: var(--iv-acc); border-radius: 9px; }
.iv-meter.low i { background: #f59e0b; } .iv-meter.out i { background: var(--iv-bad); }

/* ── قوائم مضغوطة داخل الصناديق ── */
.iv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.iv-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--iv-soft); font-size: .84rem; }
.iv-list li:last-child { border-bottom: 0; }
.iv-list li > div { flex: 1; min-width: 0; }
.iv-list b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-list small { color: var(--iv-mut); font-size: .74rem; }
.iv-list .end { text-align: end; white-space: nowrap; }
.iv-list bdi, .iv-tbl bdi { white-space: nowrap; font-variant-numeric: tabular-nums; }
.iv-dir { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: .9rem; }
.iv-dir.in { background: var(--iv-accs); color: var(--iv-acc2); } .iv-dir.out { background: var(--iv-bads); color: var(--iv-bad); } .iv-dir.mid { background: var(--iv-infos); color: var(--iv-info); }
.iv-top li { position: relative; padding: 7px 8px; border-radius: 8px; overflow: hidden; border: 0; }
.iv-top li > i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--iv-accs); z-index: 0; }
.iv-top li > div { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 6px; }

/* ── رسم الداخل والخارج ── */
.iv-flow { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.iv-flow .d { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.iv-flow .d i { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; }
.iv-flow .d i.in { background: #34d399; } .iv-flow .d i.out { background: #fca5a5; }
.iv-flow .d.today i.in { background: var(--iv-acc); } .iv-flow .d.today i.out { background: #ef4444; }
.iv-flow__x { display: flex; justify-content: space-between; font-size: .7rem; color: var(--iv-mut); margin-top: 4px; }
.iv-legend { display: flex; gap: 14px; font-size: .76rem; color: var(--iv-mut); margin-top: 6px; flex-wrap: wrap; }
.iv-legend span { display: inline-flex; align-items: center; gap: 5px; } .iv-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── بطاقات المستودعات ── */
.iv-whs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.iv-wh { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--iv-line); background: #fff; color: var(--iv-ink); }
.iv-wh:hover { border-color: #a7f3d0; color: var(--iv-ink); }
.iv-wh__t { display: flex; align-items: center; gap: 8px; } .iv-wh__t b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-wh__v { font-size: 1.15rem; font-weight: 900; }
.iv-wh__m { display: flex; gap: 10px; font-size: .74rem; color: var(--iv-mut); flex-wrap: wrap; }

/* ── مساعدة وفراغ وتحميل ── */
.iv-tip { display: inline-flex; color: #94a3b8; cursor: help; position: relative; }
.iv-tip:hover::after, .iv-tip:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); inset-inline-start: -10px; width: 230px; padding: 7px 9px; border-radius: 8px; background: var(--iv-ink); color: #fff; font-size: .74rem; font-weight: 500; line-height: 1.6; z-index: 30; white-space: normal; }
.iv-empty { padding: 26px 12px; text-align: center; color: var(--iv-mut); font-size: .86rem; }
.iv-empty i { display: block; font-size: 1.8rem; color: #cbd5e1; margin-bottom: 6px; }
.iv-skel { display: grid; gap: 12px; } .iv-skel div { height: 110px; border-radius: 14px; background: #eef2f6; animation: iv-pulse 1.4s infinite; }
.iv button:focus-visible, .iv a:focus-visible, .iv input:focus-visible, .iv select:focus-visible { outline: 2px solid var(--iv-acc); outline-offset: 2px; }

@keyframes iv-spin { to { transform: rotate(360deg); } }
@keyframes iv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .iv-ico .spin, .iv-skel div { animation: none; } }
@media (max-width: 1150px) { .iv-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .iv-two { grid-template-columns: 1fr; }
    .iv-tbl.iv-cards thead { display: none; }
    .iv-tbl.iv-cards tr { display: block; border-bottom: 1px solid var(--iv-line); padding: 6px 0; }
    .iv-tbl.iv-cards td { display: flex; justify-content: space-between; gap: 10px; border: 0; padding: 5px 12px; }
    .iv-tbl.iv-cards td::before { content: attr(data-label); color: var(--iv-mut); font-size: .74rem; font-weight: 700; }
    .iv-tbl.iv-cards td.n { text-align: start; }
}