/* ==========================================================================
   Rovy Foods — هيدر كل الصفحات بنفس شكل بانر لوحة التحكم
   لوجو (يمين) • العنوان « » في النص + تاريخ النهارده + «مباشر» • الأزرار (شمال)
   ========================================================================== */
.page-head.ph2{
  display:grid!important; grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr); align-items:center; gap:20px!important;
  min-height:92px; margin:6px 0 18px!important; padding:12px 22px!important; border:0!important; border-radius:20px!important;
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background:
    radial-gradient(380px 160px at 50% -30%,rgba(217,189,140,.22),transparent 70%),
    linear-gradient(120deg,#2e1d11 0%,#24160d 55%,#170e08 100%)!important;
  box-shadow:0 16px 34px -24px rgba(36,22,13,.8)!important;
}
.page-head.ph2::before{content:''!important; position:absolute; inset:0!important; width:auto!important; height:auto!important; border-radius:0!important; z-index:-1;
  background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(217,189,140,.035) 40px 41px)!important; opacity:.5}
.page-head.ph2::after{content:''!important; display:block!important; position:absolute; inset:6px; border:1px solid rgba(217,189,140,.13); border-radius:15px; pointer-events:none}

.ph2 .ph2-logo{height:52px; width:auto; max-width:160px; object-fit:contain; justify-self:start; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.page-head.ph2 .ph-ico{display:none!important}
.ph2 .ph-main{text-align:center; min-width:0}
.ph2 .ph-crumb{display:none!important}
.page-head.ph2 h1{margin:0!important; font:600 23px/1.3 'Readex Pro',var(--font)!important; color:#fff!important; display:inline-flex; align-items:center; gap:12px; max-width:100%}
.page-head.ph2 h1 > span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; gap:8px}
.page-head.ph2 h1 > i{font-style:normal; color:#b8925a; font-size:17px; flex:none}
.page-head.ph2 h1::before,.page-head.ph2 h1::after{content:''; flex:none; width:clamp(16px,6vw,100px); height:1px; background:linear-gradient(90deg,transparent,rgba(217,189,140,.55))}
.page-head.ph2 h1::after{transform:scaleX(-1)}
.ph2 .ph2-meta{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:3px}
.ph2 .ph2-day{font-size:12px; color:rgba(247,241,232,.6)}

/* مؤشر «مباشر» (نفس اللي في لوحة التحكم) */
.ph2 .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)}
.ph2 .db-live i{width:6px; height:6px; border-radius:50%; background:#3ecf8e; animation:dbPulse 1.8s infinite}
.ph2 .db-live.off{color:#e8d6bf; background:rgba(217,189,140,.12); border-color:rgba(217,189,140,.3)}
.ph2 .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)}}

/* الأزرار: نفس أزرار البانر */
.page-head.ph2 .actions{justify-self:end; margin:0!important; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px}
.page-head.ph2 .actions .btn{height:38px!important; padding:0 13px!important; border-radius:11px!important; font-size:13px; font-weight:600; gap:7px}
.page-head.ph2 .actions .btn svg.i{width:17px; height:17px}
.page-head.ph2 .actions .btn.primary,.page-head.ph2 .actions .btn.success{background:linear-gradient(180deg,#d2b07a,#a8814a)!important; color:#24160d!important; border:0!important;
  box-shadow:0 8px 18px -10px rgba(184,146,90,.9)!important}
.page-head.ph2 .actions .btn.primary svg.i,.page-head.ph2 .actions .btn.success svg.i{color:#24160d}
.page-head.ph2 .actions .btn.primary:hover,.page-head.ph2 .actions .btn.success:hover{filter:brightness(1.07)}
.page-head.ph2 .actions .btn:not(.primary):not(.success):not(.danger){background:rgba(255,255,255,.06)!important; border:1px solid rgba(217,189,140,.28)!important; color:#f7f1e8!important}
.page-head.ph2 .actions .btn:not(.primary):not(.success):not(.danger):hover{background:rgba(255,255,255,.12)!important; border-color:rgba(217,189,140,.5)!important}
.page-head.ph2 .actions .inp{height:38px; border-radius:11px; background:rgba(255,255,255,.07); border:1px solid rgba(217,189,140,.28); color:#fff}
.ph2 .ph2-sp{min-width:1px}

/* لابتوب صغير: الأزرار كتير → تنزل سطر لوحدها */
@media (max-width:1180px) and (min-width:861px){
  .page-head.ph2{grid-template-columns:auto 1fr; row-gap:10px!important}
  .page-head.ph2 .ph-main{text-align:start}
  .page-head.ph2 .ph2-meta{justify-content:flex-start}
  .page-head.ph2 h1::before,.page-head.ph2 h1::after{display:none}
  .page-head.ph2 .actions{grid-column:1 / -1; justify-self:stretch; justify-content:flex-start}
  .page-head.ph2 .ph2-sp{display:none}
}

/* موبايل: سطر واحد مضغوط زي لوحة التحكم، والأزرار تحت */
@media (max-width:860px){
  .page-head.ph2{grid-template-columns:auto 1fr; gap:12px!important; row-gap:12px!important; min-height:0; margin:4px 0 14px!important; padding:12px!important; border-radius:18px!important}
  .page-head.ph2::after{inset:5px; border-radius:13px}
  .ph2 .ph2-logo{display:none}
  .page-head.ph2 .ph-ico{display:grid!important; place-items:center; width:44px!important; height:44px!important; border-radius:13px!important;
    background:rgba(217,189,140,.14)!important; color:#d9bd8c!important; border:1px solid rgba(217,189,140,.22); box-shadow:none!important}
  .page-head.ph2 .ph-ico svg.i{width:21px; height:21px}
  .ph2 .ph-main{text-align:start}
  .page-head.ph2 h1{font-size:18px!important; gap:6px}
  .page-head.ph2 h1 > i,.page-head.ph2 h1::before,.page-head.ph2 h1::after{display:none}
  .ph2 .ph2-meta{justify-content:flex-start; gap:6px; margin-top:2px; flex-wrap:nowrap}
  .ph2 .ph2-day{font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
  .ph2 .db-live{height:18px; font-size:10px; padding:0 6px; flex:none}
  .page-head.ph2 .actions{grid-column:1 / -1; justify-self:stretch; position:relative; z-index:1}
  .page-head.ph2 .actions .btn{height:42px!important; justify-content:center}
  .ph2 .ph2-sp{display:none}
}
@media print{ .page-head.ph2{background:none!important; color:#000; box-shadow:none!important; min-height:0} .page-head.ph2 h1{color:#000!important} .ph2 .ph2-meta,.page-head.ph2::after,.page-head.ph2::before{display:none!important} }
@media (prefers-reduced-motion:reduce){ .ph2 .db-live i{animation:none} }


/* ==========================================================================
   بانر موحّد: لوحة التحكم + هيدر كل الصفحات — نفس الشكل بالظبط + رسمة قمح خفيفة ورا
   ========================================================================== */
.db-banner,.page-head.ph2{
  min-height:96px; padding:14px 24px!important; border-radius:20px!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 140%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cg stroke=%22%23d9bd8c%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%22.24%22%3E%3Cg transform=%22translate(300 128) rotate(-18)%22%3E%3Cpath d=%22M0 0 C 4.0 -32.199999999999996 10.0 -64.39999999999999 6.0 -92%22 fill=%22none%22 stroke-width=%221.6%22/%3E%3Cellipse cx=%22-1.8%22 cy=%22-43.6%22 rx=%222.9%22 ry=%226.8%22 transform=%22rotate(-42 -1.8 -43.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%228.1%22 cy=%22-43.6%22 rx=%222.9%22 ry=%226.8%22 transform=%22rotate(34 8.1 -43.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-0.8%22 cy=%22-51.8%22 rx=%222.7%22 ry=%226.3%22 transform=%22rotate(-42 -0.8 -51.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%228.4%22 cy=%22-51.8%22 rx=%222.7%22 ry=%226.3%22 transform=%22rotate(34 8.4 -51.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%220.2%22 cy=%22-59.9%22 rx=%222.5%22 ry=%225.8%22 transform=%22rotate(-42 0.2 -59.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%228.7%22 cy=%22-59.9%22 rx=%222.5%22 ry=%225.8%22 transform=%22rotate(34 8.7 -59.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%221.1%22 cy=%22-68.0%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(-42 1.1 -68.0)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%229.0%22 cy=%22-68.0%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(34 9.0 -68.0)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%222.1%22 cy=%22-76.1%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(-42 2.1 -76.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%229.2%22 cy=%22-76.1%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(34 9.2 -76.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%223.1%22 cy=%22-84.3%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(-42 3.1 -84.3)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%229.5%22 cy=%22-84.3%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(34 9.5 -84.3)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%226.0%22 cy=%22-98.0%22 rx=%222.6%22 ry=%226.5%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(322 132) rotate(8)%22%3E%3Cpath d=%22M0 0 C -3.4 -25.9 -8.5 -51.8 -5.1 -74%22 fill=%22none%22 stroke-width=%221.6%22/%3E%3Cellipse cx=%22-6.9%22 cy=%22-35.2%22 rx=%222.4%22 ry=%225.7%22 transform=%22rotate(-34 -6.9 -35.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%221.5%22 cy=%22-35.2%22 rx=%222.4%22 ry=%225.7%22 transform=%22rotate(42 1.5 -35.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-7.1%22 cy=%22-41.7%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(-34 -7.1 -41.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%220.7%22 cy=%22-41.7%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(42 0.7 -41.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-7.4%22 cy=%22-48.3%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(-34 -7.4 -48.3)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-0.1%22 cy=%22-48.3%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(42 -0.1 -48.3)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-7.6%22 cy=%22-54.8%22 rx=%221.9%22 ry=%224.5%22 transform=%22rotate(-34 -7.6 -54.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-1.0%22 cy=%22-54.8%22 rx=%221.9%22 ry=%224.5%22 transform=%22rotate(42 -1.0 -54.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-7.8%22 cy=%22-61.3%22 rx=%221.8%22 ry=%224.1%22 transform=%22rotate(-34 -7.8 -61.3)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-1.8%22 cy=%22-61.3%22 rx=%221.8%22 ry=%224.1%22 transform=%22rotate(42 -1.8 -61.3)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-8.1%22 cy=%22-67.8%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(-34 -8.1 -67.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-2.6%22 cy=%22-67.8%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(42 -2.6 -67.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-5.1%22 cy=%22-79.1%22 rx=%222.2%22 ry=%225.5%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(282 136) rotate(-38)%22%3E%3Cpath d=%22M0 0 C 2.8 -21.0 7.0 -42.0 4.199999999999999 -60%22 fill=%22none%22 stroke-width=%221.6%22/%3E%3Cellipse cx=%22-1.3%22 cy=%22-28.6%22 rx=%222.0%22 ry=%224.7%22 transform=%22rotate(-42 -1.3 -28.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%225.7%22 cy=%22-28.6%22 rx=%222.0%22 ry=%224.7%22 transform=%22rotate(34 5.7 -28.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-0.6%22 cy=%22-33.9%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(-42 -0.6 -33.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%225.9%22 cy=%22-33.9%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(34 5.9 -33.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%220.1%22 cy=%22-39.2%22 rx=%221.7%22 ry=%224.1%22 transform=%22rotate(-42 0.1 -39.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%226.1%22 cy=%22-39.2%22 rx=%221.7%22 ry=%224.1%22 transform=%22rotate(34 6.1 -39.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%220.8%22 cy=%22-44.4%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(-42 0.8 -44.4)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%226.3%22 cy=%22-44.4%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(34 6.3 -44.4)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%221.5%22 cy=%22-49.7%22 rx=%221.5%22 ry=%223.4%22 transform=%22rotate(-42 1.5 -49.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%226.5%22 cy=%22-49.7%22 rx=%221.5%22 ry=%223.4%22 transform=%22rotate(34 6.5 -49.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%222.2%22 cy=%22-55.0%22 rx=%221.3%22 ry=%223.1%22 transform=%22rotate(-42 2.2 -55.0)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%226.7%22 cy=%22-55.0%22 rx=%221.3%22 ry=%223.1%22 transform=%22rotate(34 6.7 -55.0)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%224.2%22 cy=%22-64.2%22 rx=%221.8%22 ry=%224.5%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(392 46) rotate(-12)%22%3E%3Cpath d=%22M-11.200000000000001 4.800000000000001 C -19.200000000000003 3.2 -19.200000000000003 -9.600000000000001 -9.600000000000001 -9.600000000000001 C -9.600000000000001 -19.200000000000003 3.2 -20.8 4.800000000000001 -12.0 C 14.4 -16.0 20.8 -3.2 11.200000000000001 4.800000000000001 L 9.600000000000001 14.4 L -9.600000000000001 14.4 Z%22 fill=%22none%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M-9.600000000000001 9.600000000000001 H 9.600000000000001%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(900 130) rotate(16)%22%3E%3Cpath d=%22M0 0 C -4.0 -30.799999999999997 -10.0 -61.599999999999994 -6.0 -88%22 fill=%22none%22 stroke-width=%221.6%22/%3E%3Cellipse cx=%22-8.1%22 cy=%22-41.9%22 rx=%222.9%22 ry=%226.8%22 transform=%22rotate(-34 -8.1 -41.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%221.8%22 cy=%22-41.9%22 rx=%222.9%22 ry=%226.8%22 transform=%22rotate(42 1.8 -41.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-8.4%22 cy=%22-49.6%22 rx=%222.7%22 ry=%226.3%22 transform=%22rotate(-34 -8.4 -49.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%220.8%22 cy=%22-49.6%22 rx=%222.7%22 ry=%226.3%22 transform=%22rotate(42 0.8 -49.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-8.7%22 cy=%22-57.4%22 rx=%222.5%22 ry=%225.8%22 transform=%22rotate(-34 -8.7 -57.4)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-0.2%22 cy=%22-57.4%22 rx=%222.5%22 ry=%225.8%22 transform=%22rotate(42 -0.2 -57.4)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-9.0%22 cy=%22-65.1%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(-34 -9.0 -65.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-1.1%22 cy=%22-65.1%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(42 -1.1 -65.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-9.2%22 cy=%22-72.9%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(-34 -9.2 -72.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-2.1%22 cy=%22-72.9%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(42 -2.1 -72.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-9.5%22 cy=%22-80.7%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(-34 -9.5 -80.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-3.1%22 cy=%22-80.7%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(42 -3.1 -80.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-6.0%22 cy=%22-94.0%22 rx=%222.6%22 ry=%226.5%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(878 134) rotate(-10)%22%3E%3Cpath d=%22M0 0 C 3.4 -24.5 8.5 -49.0 5.1 -70%22 fill=%22none%22 stroke-width=%221.6%22/%3E%3Cellipse cx=%22-1.5%22 cy=%22-33.4%22 rx=%222.4%22 ry=%225.7%22 transform=%22rotate(-42 -1.5 -33.4)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%226.9%22 cy=%22-33.4%22 rx=%222.4%22 ry=%225.7%22 transform=%22rotate(34 6.9 -33.4)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-0.7%22 cy=%22-39.6%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(-42 -0.7 -39.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%227.1%22 cy=%22-39.6%22 rx=%222.3%22 ry=%225.3%22 transform=%22rotate(34 7.1 -39.6)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%220.1%22 cy=%22-45.7%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(-42 0.1 -45.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%227.4%22 cy=%22-45.7%22 rx=%222.1%22 ry=%224.9%22 transform=%22rotate(34 7.4 -45.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%221.0%22 cy=%22-51.9%22 rx=%221.9%22 ry=%224.5%22 transform=%22rotate(-42 1.0 -51.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%227.6%22 cy=%22-51.9%22 rx=%221.9%22 ry=%224.5%22 transform=%22rotate(34 7.6 -51.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%221.8%22 cy=%22-58.1%22 rx=%221.8%22 ry=%224.1%22 transform=%22rotate(-42 1.8 -58.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%227.8%22 cy=%22-58.1%22 rx=%221.8%22 ry=%224.1%22 transform=%22rotate(34 7.8 -58.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%222.6%22 cy=%22-64.2%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(-42 2.6 -64.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%228.1%22 cy=%22-64.2%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(34 8.1 -64.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%225.1%22 cy=%22-75.1%22 rx=%222.2%22 ry=%225.5%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(920 138) rotate(36)%22%3E%3Cpath d=%22M0 0 C -2.8 -20.299999999999997 -7.0 -40.599999999999994 -4.199999999999999 -58%22 fill=%22none%22 stroke-width=%221.6%22/%3E%3Cellipse cx=%22-5.7%22 cy=%22-27.7%22 rx=%222.0%22 ry=%224.7%22 transform=%22rotate(-34 -5.7 -27.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%221.3%22 cy=%22-27.7%22 rx=%222.0%22 ry=%224.7%22 transform=%22rotate(42 1.3 -27.7)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-5.9%22 cy=%22-32.8%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(-34 -5.9 -32.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%220.6%22 cy=%22-32.8%22 rx=%221.9%22 ry=%224.4%22 transform=%22rotate(42 0.6 -32.8)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-6.1%22 cy=%22-37.9%22 rx=%221.7%22 ry=%224.1%22 transform=%22rotate(-34 -6.1 -37.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-0.1%22 cy=%22-37.9%22 rx=%221.7%22 ry=%224.1%22 transform=%22rotate(42 -0.1 -37.9)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-6.3%22 cy=%22-43.0%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(-34 -6.3 -43.0)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-0.8%22 cy=%22-43.0%22 rx=%221.6%22 ry=%223.7%22 transform=%22rotate(42 -0.8 -43.0)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-6.5%22 cy=%22-48.1%22 rx=%221.5%22 ry=%223.4%22 transform=%22rotate(-34 -6.5 -48.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-1.5%22 cy=%22-48.1%22 rx=%221.5%22 ry=%223.4%22 transform=%22rotate(42 -1.5 -48.1)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-6.7%22 cy=%22-53.2%22 rx=%221.3%22 ry=%223.1%22 transform=%22rotate(-34 -6.7 -53.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-2.2%22 cy=%22-53.2%22 rx=%221.3%22 ry=%223.1%22 transform=%22rotate(42 -2.2 -53.2)%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22-4.2%22 cy=%22-62.2%22 rx=%221.8%22 ry=%224.5%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Cg transform=%22translate(812 40) rotate(14)%22%3E%3Cpath d=%22M-9.799999999999999 4.199999999999999 C -16.799999999999997 2.8 -16.799999999999997 -8.399999999999999 -8.399999999999999 -8.399999999999999 C -8.399999999999999 -16.799999999999997 2.8 -18.2 4.199999999999999 -10.5 C 12.6 -14.0 18.2 -2.8 9.799999999999999 4.199999999999999 L 8.399999999999999 12.6 L -8.399999999999999 12.6 Z%22 fill=%22none%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M-8.399999999999999 8.399999999999999 H 8.399999999999999%22 fill=%22none%22 stroke-width=%221.3%22/%3E%3C/g%3E%3Ccircle cx=%22205%22 cy=%2238%22 r=%221.4%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3Ccircle cx=%22470%22 cy=%22104%22 r=%221.2%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3Ccircle cx=%22520%22 cy=%2226%22 r=%221%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3Ccircle cx=%22690%22 cy=%22112%22 r=%221.2%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3Ccircle cx=%22735%22 cy=%2230%22 r=%221%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3Ccircle cx=%221000%22 cy=%2244%22 r=%221.4%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3Ccircle cx=%221060%22 cy=%22100%22 r=%221.1%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3Ccircle cx=%22150%22 cy=%2296%22 r=%221.1%22 fill=%22%23d9bd8c%22 stroke=%22none%22/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(380px 160px at 50% -30%,rgba(217,189,140,.22),transparent 70%),
    radial-gradient(260px 160px at 100% 120%,rgba(184,146,90,.14),transparent 70%),
    linear-gradient(120deg,#2e1d11 0%,#24160d 55%,#170e08 100%)!important;
  box-shadow:0 16px 34px -24px rgba(36,22,13,.8)!important;
}
.db-banner::before,.page-head.ph2::before{display:none!important}
.db-banner::after,.page-head.ph2::after{content:''!important; display:block!important; position:absolute; inset:6px; border:1px solid rgba(217,189,140,.14); border-radius:15px; pointer-events:none; z-index:0}
.db-banner > *,.page-head.ph2 > *{position:relative; z-index:1}
/* نفس المقاسات في الاتنين */
.page-head.ph2{grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr)!important; margin:6px 0 18px!important}
.db-b-logo,.ph2 .ph2-logo{height:54px}
.db-b-mid h1,.page-head.ph2 h1{font-size:23px!important}
.db-b-mid p,.ph2 .ph2-meta{margin-top:4px!important}
.db-b-mid p .num,.ph2 .ph2-day{font-size:12.5px; color:rgba(247,241,232,.64); font-variant-numeric:tabular-nums}
.page-head.ph2 .actions{justify-self:end}
.db-b-act{justify-self:end}
@media (max-width:1180px) and (min-width:861px){ .page-head.ph2{grid-template-columns:auto 1fr!important} }
@media (max-width:860px){
  .db-banner,.page-head.ph2{min-height:0; padding:12px!important; border-radius:18px!important;
    background-size:auto 150%, auto, auto, auto!important; background-position:left -40px center, 0 0, 0 0, 0 0!important}
  .db-banner::after,.page-head.ph2::after{inset:5px; border-radius:13px}
  .page-head.ph2{grid-template-columns:auto 1fr!important}
  .db-b-mid h1,.page-head.ph2 h1{font-size:18px!important}
}

/* الإطار الدهبي الداخلي لازم يغطي البانر كله (قاعدة قديمة في ui.css كانت مدياه مقاس ثابت 180px فبيطلع مربع حوالين اللوجو) */
.page-head.ph2::after{width:auto!important; height:auto!important; left:6px!important; right:6px!important; top:6px!important; bottom:6px!important; inset:6px!important; border-radius:15px!important; border-width:1px!important}
@media (max-width:860px){ .page-head.ph2::after{inset:5px!important; left:5px!important; right:5px!important; top:5px!important; bottom:5px!important; border-radius:13px!important} }

/* ==========================================================================
   موبايل — هيدر مضغوط وبروفيشنال: سطر للعنوان، وسطر واحد للأزرار (لحد 3 جنب بعض)
   ========================================================================== */
@media (max-width:860px){
  .page-head.ph2{gap:10px!important; row-gap:10px!important; padding:11px 12px 12px!important; margin:2px 0 12px!important;
    background-size:820px auto, auto, auto, auto!important; background-position:center 40%, 0 0, 0 0, 0 0!important}
  .page-head.ph2 .ph-ico{width:40px!important; height:40px!important; border-radius:12px!important}
  .page-head.ph2 .ph-ico svg.i{width:19px; height:19px}
  .page-head.ph2 h1{font-size:16.5px!important; line-height:1.35!important}
  .ph2 .ph2-meta{margin-top:1px!important}
  .ph2 .ph2-day{font-size:11px!important}

  /* الأزرار: Flex بدل الشبكة القديمة — 1 = عرض كامل، 2 = نص ونص، 3 أو أكتر = تلات في السطر */
  .page-head.ph2 .actions{display:flex!important; flex-wrap:wrap; gap:6px!important; grid-template-columns:none!important; margin:0!important;
    padding-top:10px; border-top:1px solid rgba(217,189,140,.14)}
  .page-head.ph2 .actions > *{grid-column:auto!important; flex:1 1 calc(33.333% - 6px); min-width:0; width:auto!important; order:0}
  .page-head.ph2 .actions > .btn.primary,.page-head.ph2 .actions > .btn.success{order:-1}
  .page-head.ph2 .actions .btn{height:38px!important; padding:0 8px!important; border-radius:11px!important; font-size:12.5px!important; gap:5px!important;
    justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .page-head.ph2 .actions .btn.primary,.page-head.ph2 .actions .btn.success{height:38px!important; font-size:13px!important}
  .page-head.ph2 .actions .btn svg.i{width:15px!important; height:15px!important; flex:none}
  .page-head.ph2 .actions select.inp,.page-head.ph2 .actions .date-chip{flex:1 1 100%; height:38px}
}

/* أزرار صف الجدول: زرار الحذف بالأحمر + العميل الموقوف باهت */
table.t .act-btn.danger,.mcard-act .act-btn.danger{background:#fff!important; color:#c0473a!important; border:1px solid rgba(192,71,58,.35)!important}
table.t .act-btn.danger:hover,.mcard-act .act-btn.danger:hover{background:#c0473a!important; color:#fff!important; border-color:#c0473a!important}
table.t tr.row-off td{opacity:.55}
table.t tr.row-off td:first-child b::after{content:' • موقوف'; font-size:11px; font-weight:600; color:#c0473a}

/* ==========================================================================
   أزرار الإجراءات في الجداول والكروت — كل نوع بلونه وأيقونته واضحة
   ========================================================================== */
/* الشكل الأصلي (غامق) — مع لمسة أنضف: أيقونة دهبي بتنوّر، والحذف أحمر */
table.t [data-act].act-btn,.mcard-act [data-act].act-btn{
  width:34px; height:34px; padding:0!important; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  border-radius:10px!important; border:0!important; color:#fff!important;
  background:linear-gradient(180deg,#3a2a1f,#1e1510)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 5px 12px -7px rgba(0,0,0,.75)!important;
  transition:background .15s,transform .12s,box-shadow .15s;
}
table.t [data-act].act-btn svg.i,.mcard-act [data-act].act-btn svg.i{width:16px!important; height:16px!important; color:#fff!important; stroke-width:1.9}
table.t [data-act].act-btn:hover,.mcard-act [data-act].act-btn:hover{background:linear-gradient(180deg,#c9a15e,#8a5a2b)!important; transform:translateY(-1px); box-shadow:0 8px 16px -8px rgba(138,90,43,.8)!important}
table.t [data-act="del"].act-btn,.mcard-act [data-act="del"].act-btn,table.t .act-btn.danger,.mcard-act .act-btn.danger{
  background:linear-gradient(180deg,#d9524a,#a9292f)!important; box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 5px 12px -7px rgba(169,41,47,.8)!important}
table.t [data-act="del"].act-btn:hover,.mcard-act [data-act="del"].act-btn:hover,table.t .act-btn.danger:hover,.mcard-act .act-btn.danger:hover{
  background:linear-gradient(180deg,#e5635a,#b8323a)!important; box-shadow:0 8px 16px -8px rgba(169,41,47,.9)!important}
.act-btn .ab-l{display:none}
table.t .row-actions{display:flex; gap:6px; justify-content:flex-end}

/* ---------- كروت الموبايل ---------- */
@media (max-width:860px){
  .mcards{gap:10px!important}
  .mcard{padding:14px 14px 12px!important; border-radius:18px!important; border-color:#ece3d6!important; box-shadow:0 1px 2px rgba(36,22,13,.04),0 10px 24px -22px rgba(36,22,13,.45)!important}
  .mcard-top{gap:12px; margin-bottom:10px; align-items:center}
  .mcard-top .t1 .cell-name b{font-size:15px}
  .mcard-sub{margin-top:6px}
  .mcard-top .t2{display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding:7px 11px; border-radius:12px; background:#faf6f0; border:1px solid #f0e7da; font-size:15.5px!important}
  .mcard-top .t2 small{font-size:10.5px; font-weight:600; color:var(--text-3)}
  .mcard-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; padding-top:10px!important; border-top:1px dashed #ece3d6!important}
  .mcard-grid > div{background:#fbf8f3; border-radius:10px; padding:7px 9px}
  .mcard-grid label{font-size:10.5px!important; margin-bottom:2px}
  .mcard-grid span.v{font-size:12.5px; font-weight:600}
  /* شريط الأزرار: كل زرار بأيقونة واسمه، متساويين في العرض */
  .mcard-act{display:flex!important; flex-wrap:nowrap!important; gap:6px!important; margin-top:12px!important; padding-top:12px!important; border-top:1px solid #f1eae0!important; justify-content:stretch}
  .mcard-act [data-act].act-btn{flex:1 1 0; min-width:0; width:auto!important; height:48px!important; flex-direction:column; gap:3px!important; border-radius:12px!important}
  .mcard-act [data-act].act-btn svg.i{width:17px!important; height:17px!important}
  .mcard-act .act-btn .ab-l{display:block; font-size:10.5px; font-weight:700; line-height:1; white-space:nowrap}
}


/* ==========================================================================
   نافذة التأكيد (حذف / خروج / أي تأكيد)
   ========================================================================== */
.cfm-ov{position:fixed; inset:0; z-index:100050; display:grid; place-items:center; padding:20px; background:rgba(20,12,8,0); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); transition:background .18s,backdrop-filter .18s}
.cfm-ov.show{background:rgba(20,12,8,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.cfm{--c:#c0473a; --ct:#fdecea; --cg:rgba(192,71,58,.35);
  position:relative; width:100%; max-width:420px; padding:28px 24px 20px; border-radius:24px; background:#fff; text-align:center; color:#24160d;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55),0 0 0 1px rgba(36,22,13,.05); opacity:0; transform:translateY(10px) scale(.97); transition:opacity .18s,transform .2s cubic-bezier(.2,.8,.2,1)}
.cfm.is-ok{--c:#8a5a2b; --ct:#f6eedf; --cg:rgba(184,146,90,.4)}
.cfm-ov.show .cfm{opacity:1; transform:none}
.cfm-ov.hide .cfm{opacity:0; transform:translateY(6px) scale(.98)}
.cfm::before{content:''; position:absolute; inset:0 0 auto 0; height:110px; border-radius:24px 24px 0 0; background:radial-gradient(240px 110px at 50% 0%,var(--ct),transparent 75%); pointer-events:none}
.cfm-grab{display:none}
.cfm-ic{position:relative; width:76px; height:76px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; background:var(--ct)}
.cfm-ic::after{content:''; position:absolute; inset:-7px; border-radius:50%; border:1.5px dashed var(--cg)}
.cfm-ic span{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--c); box-shadow:0 12px 24px -12px var(--c)}
.cfm-ic svg.i{width:24px; height:24px; stroke-width:2}
.cfm h3{position:relative; margin:0 0 8px; font:600 19px/1.4 'Readex Pro',var(--font); color:#24160d}
.cfm p{position:relative; margin:0 auto; max-width:330px; font-size:14px; line-height:1.85; color:#6b5644}
.cfm p b{color:#24160d}
.cfm-warn{display:flex; align-items:center; gap:8px; margin:16px 0 0; padding:9px 12px; border-radius:12px; background:#faf6f0; border:1px solid #f0e7da; font-size:12px; color:#8a7764; text-align:start}
.cfm-warn svg.i{width:15px; height:15px; flex:none; color:#b8925a}
.cfm-act{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px}
.cfm-b{height:48px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:600 14.5px var(--font); transition:filter .15s,background .15s,transform .12s}
.cfm-b svg.i{width:17px; height:17px}
.cfm-b.ok{border:0; color:#fff; background:var(--c); background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c)); box-shadow:0 12px 22px -14px var(--c)}
.cfm.is-ok .cfm-b.ok{background:linear-gradient(180deg,#4a2e1b,#2a1a10)}
.cfm-b.ok:hover{filter:brightness(1.08)}
.cfm-b.no{border:1px solid #e6dccd; background:#fff; color:#4a3a2c}
.cfm-b.no:hover{background:#f7f1e8}
.cfm-b:active{transform:translateY(1px)}
.cfm-b:focus-visible{outline:0; box-shadow:0 0 0 4px rgba(184,146,90,.35)}
@media (max-width:560px){
  .cfm-ov{place-items:end center; padding:0}
  .cfm{max-width:none; border-radius:26px 26px 0 0; padding:12px 18px calc(18px + env(safe-area-inset-bottom)); transform:translateY(100%)}
  .cfm::before{border-radius:26px 26px 0 0}
  .cfm-ov.show .cfm{transform:none} .cfm-ov.hide .cfm{transform:translateY(100%)}
  .cfm-grab{display:block; width:44px; height:5px; border-radius:5px; background:#e6dccd; margin:0 auto 16px; position:relative}
  .cfm-ic{width:68px; height:68px; margin-bottom:12px} .cfm-ic span{width:46px; height:46px}
  .cfm-act{grid-template-columns:1fr; gap:8px} .cfm-b{height:50px}
}
@media (prefers-reduced-motion:reduce){ .cfm,.cfm-ov{transition:none} }

/* سلة المحذوفات */
.tr-note{display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; padding:12px 14px; border-radius:14px; background:#fbf6ee; border:1px solid #efe2cd; font-size:13px; line-height:1.8; color:#6b5644}
.tr-note svg.i{width:18px; height:18px; flex:none; margin-top:2px; color:#b8925a}
.tr-note b{color:#3a2417}
.tr-note.sm{margin:14px 0 0; font-size:12.5px}
.tr-av{background:linear-gradient(145deg,#f3e9da,#e6d5bc)!important; color:#5a3a22!important}
.tr-av svg.i{width:18px; height:18px}
.tr-fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
.tr-fields div{padding:10px 12px; border-radius:12px; background:#faf6f0; border:1px solid #f0e7da; min-width:0}
.tr-fields label{display:block; font-size:11px; color:var(--text-3); margin-bottom:3px}
.tr-fields b{display:block; font-size:13.5px; color:#24160d; word-break:break-word}
.tr-kids{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.tr-kids span{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f3ece2; font-size:12px; color:#5a3a22}
.tr-kids svg.i{width:14px; height:14px}
table.t [data-act="restore"].act-btn,.mcard-act [data-act="restore"].act-btn{background:linear-gradient(180deg,#2f9e6a,#1f7a50)!important; width:34px!important; padding:0!important}
table.t [data-act="restore"].act-btn:hover,.mcard-act [data-act="restore"].act-btn:hover{background:linear-gradient(180deg,#38b57a,#238a5b)!important}


/* التلميح العائم */
[data-tip]::after{display:none!important; content:none!important}
.ftip{position:fixed; z-index:100100; pointer-events:none; max-width:240px; padding:7px 11px; border-radius:10px; background:#1e140d; color:#fff;
  font:600 12px/1.4 var(--font); white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.6),0 0 0 1px rgba(217,189,140,.18);
  opacity:0; transform:translateY(3px); transition:opacity .12s,transform .12s}
.ftip.below{transform:translateY(-3px)}
.ftip.on{opacity:1; transform:none}
.ftip::after{content:''; position:absolute; left:var(--ax,50%); top:100%; width:10px; height:10px; margin-left:-5px; margin-top:-5px; background:#1e140d; transform:rotate(45deg); border-radius:2px}
.ftip.below::after{top:auto; bottom:100%; margin-top:0; margin-bottom:-5px}
/* صف بيتحذف: يبهت فوراً بعد التأكيد، ويختفي أول ما السيرفر يرد */
tr.is-busy,.mcard.is-busy{opacity:.45; pointer-events:none; transition:opacity .15s}
tr.is-busy td:first-child b::after,.mcard.is-busy .t1 b::after{content:' • جاري الحذف…'; font-size:11px; font-weight:600; color:#c0473a}
tr.is-gone,.mcard.is-gone{opacity:0!important; transition:opacity .2s}