/* ==========================================================================
   Rovy Foods — لوحة التحكم
   ========================================================================== */
.db{
  --rv-esp:#24160d; --rv-ink:#3a2417; --rv-brown:#5a3a22; --rv-gold:#b8925a; --rv-gold-2:#d9bd8c;
  --db-line:#ece4d8; --db-card:#fff; --db-soft:#faf6f0;
  display:flex; flex-direction:column; gap:16px; padding-top:6px;
}

/* ---------- البانر (مضغوط) ---------- */
.db-banner{
  position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  min-height:92px; padding:12px 22px; border-radius:20px; color:#fff;
  background:
    radial-gradient(380px 160px at 50% -30%,rgba(217,189,140,.22),transparent 70%),
    linear-gradient(120deg,#2e1d11 0%,var(--rv-esp) 55%,#170e08 100%);
  box-shadow:0 16px 34px -24px rgba(36,22,13,.8);
}
.db-banner::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(217,189,140,.035) 40px 41px)}
.db-banner::after{content:''; position:absolute; inset:6px; border:1px solid rgba(217,189,140,.13); border-radius:15px; pointer-events:none}
.db-banner > *{position:relative; z-index:1}
.db-b-logo{height:52px; width:auto; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.db-b-ic{display:none}
.db-b-mid{text-align:center; min-width:0}
.db-b-mid h1{margin:0; font-family:'Readex Pro',var(--font); font-weight:600; font-size:23px; line-height:1.3; color:#fff; display:inline-flex; align-items:center; gap:12px}
.db-b-mid h1 i{font-style:normal; color:var(--rv-gold); font-size:17px}
.db-b-mid h1::before,.db-b-mid h1::after{content:''; width:clamp(20px,8vw,120px); height:1px; background:linear-gradient(90deg,transparent,rgba(217,189,140,.55))}
.db-b-mid h1::after{transform:scaleX(-1)}
.db-b-mid p{margin:2px 0 0; font-size:12px; color:rgba(247,241,232,.6)}
.db-b-act{display:flex; gap:8px; align-items:center}
.db-btn{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border-radius:11px; cursor:pointer; font:600 13px/1 var(--font);
  color:#f7f1e8; background:rgba(255,255,255,.06); border:1px solid rgba(217,189,140,.28); text-decoration:none; transition:background .15s,border-color .15s}
.db-btn:hover{background:rgba(255,255,255,.12); border-color:rgba(217,189,140,.5); color:#fff}
.db-btn svg.i{width:17px; height:17px}
.db-btn.gold{background:linear-gradient(180deg,#d2b07a,#a8814a); border-color:transparent; color:#24160d; box-shadow:0 8px 18px -10px rgba(184,146,90,.9)}
.db-btn.gold:hover{filter:brightness(1.07); color:#24160d}
.db-new{position:relative}
.db-menu{position:absolute; top:calc(100% + 8px); left:0; z-index:30; min-width:210px; padding:6px; border-radius:14px; background:#fff; border:1px solid var(--db-line);
  box-shadow:0 22px 50px -18px rgba(36,22,13,.45)}
.db-menu[hidden]{display:none}
.db-menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--rv-ink); font-size:13.5px; font-weight:600}
.db-menu a:hover{background:#f6efe4}
.db-menu a svg.i{color:var(--rv-gold); width:17px; height:17px}

/* ---------- الفلتر ---------- */
.db-filter{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; background:var(--db-card); border:1px solid var(--db-line); border-radius:18px}
.db-f-lbl{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--rv-ink)}
.db-f-lbl svg.i{width:34px; height:34px; padding:8px; border-radius:10px; background:var(--rv-ink); color:var(--rv-gold-2)}
.db-seg{display:flex; gap:4px; padding:4px; border-radius:13px; background:#f5efe6; overflow-x:auto; scrollbar-width:none}
.db-seg::-webkit-scrollbar{display:none}
.db-seg button{flex:none; height:34px; padding:0 14px; border:0; border-radius:10px; background:transparent; color:var(--text-2); font:600 13px var(--font); cursor:pointer; white-space:nowrap; transition:.15s}
.db-seg button:hover{color:var(--rv-ink); background:rgba(255,255,255,.7)}
.db-seg button.on{background:var(--rv-ink); color:#fff; box-shadow:0 6px 14px -8px rgba(36,22,13,.8)}
.db-dates{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
.db-dates label{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3)}
.db-dates .inp{height:38px; width:150px; border-radius:10px; border:1px solid var(--db-line); background:var(--db-soft); font-size:13px}
.db-dates .inp:focus{border-color:var(--rv-gold)!important; box-shadow:0 0 0 3px rgba(184,146,90,.15)}
.db-dsep{color:var(--text-3)}

/* ---------- المؤشرات ---------- */
.db-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.db-kpi{
  --tc:#5a3a22; --tt:#f3ebe2; --tg:rgba(90,58,34,.10);
  position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:14px;
  padding:18px 20px 16px; border-radius:20px; min-height:158px;
  background:#fff; border:1px solid var(--db-line); color:var(--text); text-decoration:none!important;
  box-shadow:0 1px 2px rgba(36,22,13,.04);
  transition:transform .18s,box-shadow .22s,border-color .22s;
}
.db-kpi::before{ /* هالة لون خفيفة في الركن */
  content:''; position:absolute; z-index:-1; width:220px; height:220px; top:-120px; left:-90px; border-radius:50%;
  background:radial-gradient(circle,var(--tg),transparent 70%);
}
.db-kpi::after{ /* خط علوي رفيع بلون الكارت */
  content:''; position:absolute; top:0; right:20px; left:20px; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,transparent,var(--tc) 30%,var(--tc) 70%,transparent); opacity:.85;
}
.db-kpi[href]:hover{transform:translateY(-3px); border-color:#dccdb8; box-shadow:0 22px 40px -28px rgba(36,22,13,.6)}
.db-kpi.t-green{--tc:#2f7d5b; --tt:#e7f3ed; --tg:rgba(47,125,91,.13)}
.db-kpi.t-gold{--tc:#a8814a; --tt:#f7efe1; --tg:rgba(184,146,90,.16)}
.db-kpi.t-red{--tc:#c0473a; --tt:#fcebe8; --tg:rgba(192,71,58,.11)}
.db-kpi.t-blue{--tc:#3d6fa8; --tt:#e9f0f9; --tg:rgba(61,111,168,.12)}
.db-kpi.t-teal{--tc:#1f8a8a; --tt:#e4f4f3; --tg:rgba(31,138,138,.12)}
.dk-top{display:flex; align-items:center; gap:12px}
.dk-lbl{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dk-ico{width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center; background:var(--tt); color:var(--tc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.dk-ico svg.i{width:20px; height:20px; stroke-width:1.9}
.dk-mid{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-width:0}
.dk-val{font-family:'Readex Pro',var(--font); font-size:30px; font-weight:600; letter-spacing:-.6px; color:var(--rv-ink); line-height:1; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.dk-val small{font-size:13px; font-weight:500; color:var(--text-3); margin-inline-start:6px; letter-spacing:0}
.dk-spark{width:120px; height:40px; flex:none; overflow:visible}
.dk-spark polyline{fill:none; stroke:var(--tc); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.dk-spark polygon{fill:var(--tc); opacity:.10}
.dk-spark.flat line{stroke:var(--tc); stroke-width:2; stroke-dasharray:4 5; opacity:.35; vector-effect:non-scaling-stroke}
.dk-split{display:flex; gap:3px; width:120px; height:8px; flex:none; margin-bottom:6px}
.dk-split i{display:block; height:100%; border-radius:4px; min-width:6px}
.dk-split i.none{flex:1; background:repeating-linear-gradient(90deg,#ece4d8 0 6px,transparent 6px 10px)}
.dk-sub{margin-top:auto; padding-top:12px; border-top:1px dashed #ece4d8; font-size:12px; color:var(--text-3); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dk-sub .num{color:var(--text-2); font-weight:600}
.dk-k{display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--k); margin-inline-end:5px; vertical-align:middle}
.dk-k + .num{margin-inline-end:8px}

/* الكارت الأساسي (المبيعات) غامق ببراند Rovy */
.db-kpi.t-esp{background:linear-gradient(150deg,#3a2416 0%,#24160d 60%,#1a100a 100%); border-color:#2a1a10; color:#fff;
  box-shadow:0 20px 40px -26px rgba(36,22,13,.9)}
.db-kpi.t-esp{--tc:#d9bd8c; --tt:rgba(217,189,140,.14); --tg:rgba(217,189,140,.22)}
.db-kpi.t-esp .dk-lbl{color:rgba(247,241,232,.75)}
.db-kpi.t-esp .dk-ico{color:#d9bd8c; box-shadow:inset 0 0 0 1px rgba(217,189,140,.25)}
.db-kpi.t-esp .dk-val{color:#fff}
.db-kpi.t-esp .dk-val small{color:rgba(247,241,232,.55)}
.db-kpi.t-esp .dk-sub{color:rgba(247,241,232,.55); border-top-color:rgba(217,189,140,.2)}
.db-kpi.t-esp .dk-sub .num{color:#f7f1e8}
.db-kpi.t-esp[href]:hover{border-color:#4a2e1b}

/* ---------- الكروت ---------- */
.db-grid{display:grid; gap:14px}
.db-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.db-grid.g-tbl{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
.db-grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.db-span2{grid-column:span 2}
.db-card{background:var(--db-card); border:1px solid var(--db-line); border-radius:20px; box-shadow:0 1px 2px rgba(36,22,13,.04); display:flex; flex-direction:column; min-width:0}
.db-ch{display:flex; align-items:center; gap:12px; padding:16px 18px 12px; margin:0 0 4px; border-bottom:1px solid #f3ede4}
.db-ch > div{min-width:0}
.db-ch h3{margin:0; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; color:var(--rv-ink); font-family:'Readex Pro',var(--font); display:flex; align-items:center; gap:8px}
.db-ch small{display:block; font-size:11.5px; color:var(--text-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.db-ci{width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; background:linear-gradient(145deg,#f7efe3,#efe3d1); color:var(--rv-brown)}
.db-ci svg.i{width:17px; height:17px}
.db-cr{margin-inline-start:auto}
.db-more{border:0; background:#f6efe4; color:var(--rv-brown); font:600 12px var(--font); padding:6px 10px; border-radius:8px; cursor:pointer}
.db-more:hover{background:#efe3d1}
.db-cb{padding:10px 18px 18px; flex:1; display:flex; flex-direction:column; min-width:0}
.db-badge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#fbe9e6; color:#c0473a}

/* الدايرة */
.dbd{display:flex; flex-direction:column; align-items:center; gap:14px; flex:1; justify-content:center}
.dbd-svg{position:relative; line-height:0}
.dbd-pct{font:700 11px var(--font); fill:#fff; paint-order:stroke; stroke:rgba(0,0,0,.18); stroke-width:2px}
.dbd-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.3; padding:0 52px}
.dbd-c b{font-family:'Readex Pro',var(--font); font-size:17px; color:var(--rv-ink)}
.dbd-c small{font-size:11px; color:var(--text-3)}
.dbd-leg{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font-size:12px; color:var(--text-2)}
.dbd-leg span,.db-legend span{display:inline-flex; align-items:center; gap:6px}
.dbd-leg i,.db-legend i{width:10px; height:10px; border-radius:3px; flex:none}

/* الأعمدة */
.dbb{position:relative}
.dbb svg{display:block; overflow:visible}
.dbb .g{stroke:#efe8de; stroke-dasharray:3 4} .dbb .g0{stroke:#e2d8ca}
.dbb .ax{font:11px var(--font); fill:#9a8a78}
.dbb rect{transition:opacity .15s} .dbb svg:hover rect{opacity:.75} .dbb svg rect:hover{opacity:1}
.dbb-empty{position:absolute; inset:0 46px 26px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-3); font-size:12.5px; pointer-events:none}
.dbb-empty svg.i{width:26px; height:26px; color:#d6c8b4}
.db-legend{display:flex; justify-content:center; gap:16px; margin-top:8px; font-size:12px; color:var(--text-2)}

/* أعمدة أفقية */
.dbh{display:flex; flex-direction:column; gap:12px}
.dbh-r{display:grid; grid-template-columns:minmax(70px,34%) 1fr auto; align-items:center; gap:10px; font-size:12.5px}
.dbh-l{color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dbh-t{height:10px; border-radius:6px; background:#f3ece2; overflow:hidden}
.dbh-t i{display:block; height:100%; border-radius:6px}
.dbh-r b{font-size:12.5px; color:var(--rv-ink)}

/* حالة فاضية */
.db-empty{flex:1; min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-3); font-size:13px; text-align:center}
.db-empty svg.i{width:34px; height:34px; padding:7px; border-radius:12px; background:#f6efe4; color:#b8a387}
.db-empty.tall{min-height:220px}

/* حركات المخزون */
.db-moves{display:flex; flex-direction:column}
.db-mv{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--db-line)}
.db-mv:last-child{border-bottom:0}
.db-mv-i{width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center}
.db-mv-i svg.i{width:15px; height:15px}
.db-mv-i.in{background:#e6f2ec; color:#2f7d5b} .db-mv-i.out{background:#fbe9e6; color:#c0473a}
.db-mv-t{flex:1; min-width:0}
.db-mv-t b{display:block; font-size:13px; color:var(--rv-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.db-mv-t small{font-size:11px; color:var(--text-3)}
.db-mv-v{text-align:end}
.db-mv-v b{display:block; font-size:13px} .db-mv-v b.in{color:#2f7d5b} .db-mv-v b.out{color:#c0473a}
.db-mv-v small{font-size:11px; color:var(--text-3)}

/* الجدول */
.db-tw{overflow-x:auto; margin:0 -18px; padding:0 18px}
.db-t{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; min-width:620px}
.db-t th{background:#f7f1e8; color:var(--text-2); font-weight:600; font-size:12px; text-align:start; padding:10px 12px; white-space:nowrap}
.db-t th:first-child{border-radius:0 10px 10px 0} .db-t th:last-child{border-radius:10px 0 0 10px}
.db-t td{padding:12px; border-bottom:1px solid #f1ebe2; white-space:nowrap; color:var(--text)}
.db-t td.b{font-weight:700; color:var(--rv-ink)}
.db-t tfoot td{border-bottom:0; font-weight:700; color:var(--rv-ink); background:#fcf9f4}
.db-dot{display:inline-block; width:9px; height:9px; border-radius:3px; margin-inline-end:8px; vertical-align:middle}

/* الخزن */
.db-acc{display:flex; flex-direction:column; gap:8px}
.db-ac{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:13px; background:var(--db-soft); border:1px solid #f1e9dd}
.db-ac > div{flex:1; min-width:0}
.db-ac b{font-size:13px; color:var(--rv-ink)} .db-ac b.neg{color:#c0473a}
.db-ac small{display:block; font-size:11px; color:var(--text-3)}
.db-ac-i{width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:#e3f3f2; color:#1f8a8a}
.db-ac-i svg.i{width:17px; height:17px}
.db-ac.tot{background:var(--rv-ink); border-color:var(--rv-ink); justify-content:space-between; margin-top:4px}
.db-ac.tot span{color:var(--rv-gold-2); font-size:12.5px; font-weight:600} .db-ac.tot b{color:#fff; font-size:15px}

/* المؤشرات الصغيرة */
.db-rings{display:flex; justify-content:space-around; gap:10px; margin-bottom:14px}
.db-mini{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.db-mini div{padding:10px 12px; border-radius:12px; background:var(--db-soft); border:1px solid #f1e9dd}
.db-mini span{display:block; font-size:11.5px; color:var(--text-3)}
.db-mini b{font-size:14px; color:var(--rv-ink)}
.db-alerts{max-height:330px; overflow:auto}

/* ---------- مقاسات الشاشة ---------- */
@media (min-width:1880px){ .db-kpis{grid-template-columns:repeat(6,minmax(0,1fr))} .dk-spark,.dk-split{width:84px} .dk-val{font-size:26px} }
@media (max-width:1680px){ .db-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1440px){
  .db-grid.g-tbl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-grid.g-tbl .db-span2{grid-column:1 / -1; order:-1}
}
@media (max-width:1100px){
  .db-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-b-mid h1::before,.db-b-mid h1::after{width:24px}
  .db-grid.g-3{grid-template-columns:1fr}
  .db-grid.g-3 .db-span2{grid-column:auto}
}
@media (max-width:760px){
  .db{gap:12px}
  .db-banner{grid-template-columns:auto 1fr auto; gap:12px; min-height:0; padding:12px 12px 12px 10px; border-radius:18px; text-align:start}
  .db-banner::after{inset:5px; border-radius:13px}
  .db-b-logo{display:none}
  .db-b-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:rgba(217,189,140,.14); color:var(--rv-gold-2); border:1px solid rgba(217,189,140,.22)}
  .db-b-ic svg.i{width:21px; height:21px}
  .db-b-mid{text-align:start}
  .db-b-mid h1{font-size:18px; gap:6px}
  .db-b-mid h1 i,.db-b-mid h1::before,.db-b-mid h1::after{display:none}
  .db-b-mid p{font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .db-b-act{gap:6px}
  .db-new{display:none}
  .db-btn{width:40px; height:40px; padding:0; justify-content:center; border-radius:12px}
  .db-btn span{display:none}
  .db-filter{padding:10px; gap:10px; border-radius:16px}
  .db-f-lbl{display:none}
  .db-seg{width:100%}
  .db-seg button{flex:1 0 auto; padding:0 12px}
  .db-dates{width:100%; margin:0}
  .db-dates label{flex:1}
  .db-dates label span{display:none}
  .db-dates .inp{width:100%}
  .db-kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .db-kpi{padding:14px 14px 12px; border-radius:18px; gap:10px; min-height:0}
  .db-kpi::after{right:14px; left:14px}
  .db-kpi.t-esp{grid-column:1 / -1; padding:16px 16px 14px}
  .db-kpi.t-esp .dk-val{font-size:28px}
  .db-kpi.t-esp .dk-spark{display:block; width:110px}
  .dk-top{gap:8px}
  .dk-ico{width:34px; height:34px; border-radius:10px; order:-1} .dk-ico svg.i{width:17px; height:17px}
  .dk-lbl{font-size:12.5px}
  .dk-val{font-size:21px; letter-spacing:-.3px}
  .dk-val small{font-size:11px; margin-inline-start:4px}
  .dk-spark,.dk-split{display:none}
  .db-kpi:last-child{grid-column:1 / -1}
  .db-kpi:last-child .dk-split{display:flex; width:96px}
  .dk-sub{padding-top:9px; font-size:11px}
  .db-grid.g4,.db-grid.g-tbl{grid-template-columns:1fr}
  .db-grid.g-tbl .db-span2{grid-column:auto; order:0}
  .db-card{border-radius:18px}
  .db-ch{padding:14px 14px 4px} .db-cb{padding:8px 14px 14px}
  .db-tw{margin:0 -14px; padding:0 14px}
}
@media (max-width:380px){ .dk-val{font-size:18px} .db-seg button{padding:0 10px; font-size:12.5px} }

/* ---------- الطباعة ---------- */
@media print{
  .db-b-act,.db-filter .db-seg,.db-more{display:none!important}
  .db-banner{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .db-kpi,.db-card{break-inside:avoid}
}

/* مؤشر «مباشر» — التحديثات بتوصل لحظياً */
.db-b-mid p{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap}
.db-live{display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; border-radius:999px; font-size:10.5px; font-weight:700;
  color:#bfe8d3; background:rgba(47,158,106,.16); border:1px solid rgba(47,158,106,.35)}
.db-live i{width:6px; height:6px; border-radius:50%; background:#3ecf8e; box-shadow:0 0 0 0 rgba(62,207,142,.6); animation:dbPulse 1.8s infinite}
.db-live.off{color:#e8d6bf; background:rgba(217,189,140,.12); border-color:rgba(217,189,140,.3)}
.db-live.off i{background:#d9bd8c; animation:none}
@keyframes dbPulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.6)}70%{box-shadow:0 0 0 6px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
@media (max-width:760px){ .db-b-mid p{justify-content:flex-start; gap:6px} .db-live{height:18px; font-size:10px; padding:0 6px} }
html[data-live="off"] .tb-on{background:#c9b79c}
@media (prefers-reduced-motion:reduce){ .db-live i{animation:none} }