/* ══════════ صورة الفئة المولَّدة (src/components/CategoryArt.jsx) — النسخة نفسها في لوحة الإدارة ══════════ */
.cat-art {
  position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; container-type: size;
  background: linear-gradient(var(--art-angle, 135deg), var(--art-a), var(--art-b));
  border-radius: inherit;
}
.cat-art-glow {
  position: absolute; width: 95%; aspect-ratio: 1; left: var(--blob-x, 50%); top: var(--blob-y, 50%); translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--art-c) 75%, transparent), transparent 66%);
  opacity: .55; animation: art-drift 16s ease-in-out infinite alternate; pointer-events: none;
}
.cat-art-motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .26; pointer-events: none; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.cat-art-spark {
  position: absolute; width: calc(7% * var(--s, 1)); aspect-ratio: 1; translate: -50% -50%; background: var(--art-ink);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px var(--art-c)); animation: art-twinkle 3.8s ease-in-out infinite; opacity: .2;
}
.cat-art-cards { position: absolute; inset: 0; display: grid; place-items: center; }
.cat-art-card {
  grid-area: 1 / 1; width: 50%; aspect-ratio: 1; border-radius: 18%; overflow: hidden; background: #fff;
  box-shadow: 0 14px 28px -10px rgb(0 0 0 / .55), 0 0 0 max(2px, 2.2cqw) rgb(255 255 255 / .9);
  transform: translateX(calc(var(--k, 0) * 30%)) translateY(calc(var(--ka, 0) * 7%)) rotate(calc(var(--art-tilt, 0deg) + var(--k, 0) * var(--art-spread, 12deg))) scale(calc(1 - var(--ka, 0) * .1));
  z-index: var(--z, 1);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s;
}
.cat-art-card img { width: 100%; height: 100%; object-fit: cover; display: block; position: static !important; transform: none !important; }
.cat-art[data-count="1"] .cat-art-card { width: 62%; }
.cat-art[data-count="2"] .cat-art-card { width: 52%; }
.cat-art-glyph {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--art-ink);
  font: 900 52cqw/1 'SF Pro Display', 'SF Pro', system-ui, sans-serif;
  text-shadow: .035em .035em 0 color-mix(in srgb, var(--art-c) 85%, transparent), .07em .07em 0 color-mix(in srgb, var(--art-c) 40%, transparent), 0 .1em .3em rgb(0 0 0 / .25);
  transform: rotate(var(--art-tilt, 0deg)); transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.cat-art-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .38) 50%, transparent 65%);
  transform: translateX(130%); transition: transform 0s;
}
[dir="ltr"] .cat-art-shine { transform: translateX(-130%); }

/* التحويم: البطاقات تنفرج كيد ورق، الزخرفة تدور قليلاً، ولمعة تعبر */
:is(.tile, .cat-card, .cat-cover, .cat-preview):hover .cat-art-card, .cat-art:hover .cat-art-card {
  transform: translateX(calc(var(--k, 0) * 42%)) translateY(calc(var(--ka, 0) * 4% - 4%)) rotate(calc(var(--art-tilt, 0deg) * .4 + var(--k, 0) * var(--art-spread, 12deg) * 1.6)) scale(calc(1.04 - var(--ka, 0) * .08));
  box-shadow: 0 20px 34px -12px rgb(0 0 0 / .6), 0 0 0 max(2px, 2.2cqw) #fff;
}
:is(.tile, .cat-card, .cat-cover, .cat-preview):hover .cat-art-motif { transform: rotate(-8deg) scale(1.12); }
:is(.tile, .cat-card, .cat-cover, .cat-preview):hover .cat-art-glyph { transform: rotate(0deg) scale(1.06); }
:is(.tile, .cat-card, .cat-cover, .cat-preview):hover .cat-art-shine { transform: translateX(-130%); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
[dir="ltr"] :is(.tile, .cat-card, .cat-cover, .cat-preview):hover .cat-art-shine { transform: translateX(130%); }

@keyframes art-drift { 0% { translate: -50% -50%; scale: 1; } 100% { translate: -38% -60%; scale: 1.18; } }
@keyframes art-twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }

/* صغيرة (صورة مصغّرة في القوائم): بطاقة واحدة وزخرفة هادئة */
@container (max-width: 96px) {
  .cat-art-spark { display: none; }
  .cat-art-motif { opacity: .18; }
  .cat-art[data-count="3"] .cat-art-card:not(:nth-child(2)), .cat-art[data-count="2"] .cat-art-card:nth-child(2) { display: none; }
  .cat-art-card { width: 66% !important; transform: rotate(var(--art-tilt, 0deg)) !important; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .5), 0 0 0 2px #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-art-glow, .cat-art-spark { animation: none; }
  .cat-art-card, .cat-art-motif, .cat-art-glyph, .cat-art-shine { transition: none !important; }
}

/* ══════════ حقول الطلب في حوار الشراء ══════════ */
.order-fields { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.order-fields > * { flex: 1 1 100%; min-width: 0; }
.order-fields > .of-half { flex: 1 1 calc(50% - var(--s-4)); }
.control-textarea { align-items: stretch; padding-block: var(--s-3); }
.control > textarea { resize: vertical; min-height: 72px; line-height: 22px; outline: none; }
.of-radios { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.of-radios > button {
  min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-full); border: 1px solid var(--border-strong); background: var(--surface);
  font: var(--t-callout-strong); color: var(--text-2); transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease-back, ease);
}
.of-radios > button:hover { border-color: var(--accent); color: var(--text); }
.of-radios > button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.04); }
.of-check { padding: var(--s-3); border-radius: var(--r-2); background: var(--surface-2); }

/* ══════════ قائمة منسدلة مع بحث ══════════ */
.ss { position: relative; }
.ss-trigger { width: 100%; justify-content: space-between; cursor: pointer; text-align: start; font: var(--t-body); }
.ss-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-placeholder { color: var(--text-3); }
.ss-chevron { width: 16px; height: 16px; color: var(--text-3); flex: none; transition: transform .25s var(--ease-emph, ease); }
.ss[data-open="true"] .ss-chevron { transform: rotate(180deg); }
.ss[data-open="true"] .ss-trigger { border-color: var(--accent); box-shadow: var(--focus); }
.ss-pop { z-index: 120; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-3); overflow: hidden; transform-origin: top center; }
.ss-search { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); border-bottom: 1px solid var(--border); }
.ss-search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.ss-search input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; outline: none; font: var(--t-body); }
.ss-list { max-height: 248px; overflow-y: auto; padding: var(--s-1); margin: 0; list-style: none; }
.ss-list > li { display: flex; align-items: center; gap: var(--s-2); min-height: 42px; padding: 0 var(--s-3); border-radius: var(--r-1); cursor: pointer; font: var(--t-callout); }
.ss-list > li[data-active="true"] { background: var(--surface-2); }
.ss-list > li[aria-selected="true"] { color: var(--accent-text); font-weight: 600; }
.ss-list > li > svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.ss-empty { color: var(--text-3); justify-content: center; cursor: default !important; }
.ss-foot { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); font: var(--t-caption-strong); color: var(--text-2); text-align: end; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ══════════ شريط القسم (components/CategoryBand.jsx) — هوية كل فئة رئيسية في المتجر ══════════ */
.cat-band {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: var(--s-4);
  min-height: 104px; padding: var(--s-4) var(--s-5); border-radius: 28px; color: #fff;
  background: linear-gradient(var(--art-angle, 135deg), var(--art-a), var(--art-b));
  box-shadow: 0 22px 44px -30px var(--art-a), inset 0 0 0 1px rgb(255 255 255 / .12);
}
.cat-band > .cat-art-motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .2; z-index: -1; transition: transform 1.4s var(--ease-emph, ease); }
.cat-band:hover > .cat-art-motif { transform: scale(1.08) rotate(-3deg); }
.cat-band-glow { position: absolute; z-index: -1; width: 420px; aspect-ratio: 1; inset-inline-end: -120px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--art-c) 70%, transparent), transparent 65%); opacity: .55; animation: band-drift 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes band-drift { to { transform: translate(-60px, 50px) scale(1.15); } }
.cat-band-icon { position: relative; flex: none; width: 72px; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: rgb(255 255 255 / .15);
  box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 14px 26px -12px rgb(0 0 0 / .55); transform: rotate(var(--art-tilt, 0deg)); transition: transform .6s var(--ease-back, ease); }
.cat-band:hover .cat-band-icon { transform: rotate(0deg) scale(1.06); }
.cat-band-icon > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-band-icon .cat-art-spark { display: none; }
.cat-band-title { font: 800 24px/1.25 var(--font-display); margin: 0; min-width: 0; text-shadow: 0 2px 14px rgb(0 0 0 / .25); overflow-wrap: anywhere; }
.cat-band-spacer { margin-inline-start: auto; }
.cat-band-peek { margin-inline-start: auto; display: flex; align-items: center; padding-inline-end: var(--s-2); }
.cat-band-peek > img { width: 58px; height: 58px; border-radius: 17px; object-fit: cover; background: #fff; flex: none;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 10px 20px -10px rgb(0 0 0 / .6);
  margin-inline-start: -16px; transform: rotate(calc((var(--n) - 1.5) * 7deg)) translateY(calc(var(--n) * 2px - 3px));
  transition: transform .55s var(--ease-emph, ease), margin .55s var(--ease-emph, ease);
  animation: peek-in .7s var(--ease-back, ease) both; animation-delay: calc(.15s + var(--n) * 70ms); }
.cat-band:hover .cat-band-peek > img { margin-inline-start: 6px; transform: rotate(calc((var(--n) - 1.5) * 3deg)) translateY(-3px); }
@keyframes peek-in { from { opacity: 0; transform: translateY(24px) rotate(0deg) scale(.6); } }
.cat-band-actions { position: relative; display: flex; gap: var(--s-2); flex: none; }
.cat-band-back { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 var(--s-4) 0 var(--s-3); border-radius: 999px;
  background: rgb(255 255 255 / .18); color: #fff; font: var(--t-callout-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); transition: background .2s, transform .3s var(--ease-back, ease); }
.cat-band-back:hover { background: rgb(255 255 255 / .3); transform: translateX(3px); }
.cat-band-back svg { width: 16px; height: 16px; }

/* رأس صفحة الفئة */
.cat-band-hero { min-height: 196px; padding: var(--s-6) var(--s-8); border-radius: 36px; gap: var(--s-6); }
.cat-band-hero .cat-band-icon { width: 128px; border-radius: 34px; box-shadow: 0 0 0 4px rgb(255 255 255 / .92), 0 22px 40px -16px rgb(0 0 0 / .6); }
.cat-band-hero .cat-band-title { font-size: clamp(28px, 3.4vw, 42px); }
.cat-band-hero .cat-band-peek > img { width: 84px; height: 84px; border-radius: 24px; margin-inline-start: -22px; }
.cat-band-hero .cat-band-actions { position: absolute; top: var(--s-4); inset-inline-end: var(--s-4); }
.cat-band-hero .cat-band-peek { align-self: flex-end; margin-bottom: calc(-1 * var(--s-2)); }
.cat-band-hero .cat-band-icon .cat-art-spark { display: block; }

@media (max-width: 760px) {
  .cat-band { min-height: 84px; padding: var(--s-3) var(--s-4); border-radius: 22px; gap: var(--s-3); }
  .cat-band-icon { width: 56px; border-radius: 17px; }
  .cat-band-title { font-size: 19px; }
  .cat-band-peek > img { width: 42px; height: 42px; border-radius: 13px; margin-inline-start: -14px; }
  .cat-band-peek > img:nth-child(n+4) { display: none; }
  .cat-band-hero { min-height: 150px; padding: var(--s-5) var(--s-4) var(--s-4); flex-wrap: wrap; align-content: flex-end; }
  .cat-band-hero .cat-band-icon { width: 84px; border-radius: 24px; }
  .cat-band-hero .cat-band-peek { display: none; }
  .cat-band-hero .cat-band-actions { top: var(--s-3); inset-inline-end: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-band-glow, .cat-band-peek > img { animation: none; }
  .cat-band-icon, .cat-band-peek > img, .cat-band > .cat-art-motif { transition: none; }
}

/* ══════════ صفوف السجلات قابلة للفتح، وورقة التفاصيل ══════════ */
.table tbody tr[data-clickable="true"], .rowcard[data-clickable="true"] { cursor: pointer; }
.table tbody tr[data-clickable="true"] td:first-child { position: relative; }
.table tbody tr[data-clickable="true"] td:first-child::before {
  content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--accent);
  transform: scaleY(0); transition: transform .3s var(--ease-emph, ease);
}
.table tbody tr[data-clickable="true"]:hover td:first-child::before, .table tbody tr[data-clickable="true"]:focus-visible td:first-child::before { transform: scaleY(1); }
.table tbody tr[data-clickable="true"]:focus-visible { outline: none; }
.table tbody tr[data-clickable="true"]:focus-visible td { background: var(--accent-soft); }
.rowcard[data-clickable="true"] { border-radius: var(--r-2); transition: background .2s; padding-inline: var(--s-2); margin-inline: calc(-1 * var(--s-2)); }
.rowcard[data-clickable="true"]:active { background: var(--surface-2); }

.rs-status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.rs-reason { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--danger-soft, rgb(253 101 90 / .14)); color: var(--danger-text, #B32A20); font: var(--t-callout-strong); align-self: stretch; }
.rs-note { font: var(--t-callout); color: var(--text-2); }
.rs-amount { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rs-amount > .num { font: 800 34px/1.1 var(--font-display); direction: ltr; }
.rs-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin: 0; padding: var(--s-4); border-radius: var(--r-3); background: var(--surface-2); }
.rs-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rs-row dt { font: var(--t-caption); color: var(--text-2); }
.rs-row dd { margin: 0; font: var(--t-callout); min-width: 0; overflow-wrap: anywhere; }
.rs-strong { font-weight: 700; }
.rs-code { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-4); border-radius: var(--r-3);
  border: 1.5px dashed var(--accent); background: var(--accent-soft); color: var(--accent-text); transition: transform .3s var(--ease-back, ease); }
.rs-code:hover { transform: scale(1.01); }
.rs-code:active { transform: scale(.98); }
.rs-code-label { font: var(--t-caption-strong); }
.rs-code code { font: 700 20px/1.3 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--text); letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; text-align: center; }
.rs-code-copy { display: inline-flex; align-items: center; gap: 4px; font: var(--t-callout-strong); }
.rs-code-copy svg { width: 15px; height: 15px; }
.rs-receipt { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-3); background: var(--surface-2); color: var(--accent-text); font: var(--t-callout-strong); }
.rs-receipt img { max-width: 100%; max-height: 300px; object-fit: contain; border-radius: var(--r-2); box-shadow: var(--shadow-2); transition: transform .4s var(--ease-emph, ease); }
.rs-receipt:hover img { transform: scale(1.02); }
.sheet .rs-kv, .sheet .rs-code, .sheet .rs-receipt, .sheet .rs-status, .sheet .rs-amount { animation: m-rise .5s var(--ease-emph, ease) both; }
.sheet .rs-kv { animation-delay: 80ms; } .sheet .rs-receipt { animation-delay: 140ms; }
@media (prefers-reduced-motion: reduce) { .sheet .rs-kv, .sheet .rs-code, .sheet .rs-receipt, .sheet .rs-status, .sheet .rs-amount { animation: none; } }