/* ═══════════════════════════════════════════════════════════════════
   PureFood BD — ADMIN Panel Enhancement v1.0  (purefood-admin.css)
   Scope: applies ONLY inside /admin/*  (body.pf-admin set by JS).
   Design language = storefront premium: emerald #4e7e5a, deep #10312b,
   cream #FAF8F5, honey #df912c, hairline #E8E1D7, radius 16–28px.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens + page canvas ───────────────────────────────────── */
body.pf-admin {
  --pf-ink: #10312b;
  --pf-ink-soft: #4e7e5a;
  --pf-cream: #faf8f5;
  --pf-line: #e8e1d7;
  --pf-honey: #df912c;
  --pf-card: #ffffff;
  --pf-shadow: 0 18px 44px -18px rgba(16, 49, 43, .16);
  --pf-shadow-lg: 0 28px 64px -24px rgba(16, 49, 43, .28);
  --pf-ease: cubic-bezier(.22, 1, .36, 1);
}

/* warm cream gradient instead of flat grey canvas */
body.pf-admin {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(78, 126, 90, .06), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(223, 145, 44, .05), transparent 60%),
    var(--pf-cream) !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ── 2. Entrance choreography (staggered, one-shot) ────────────── */
@keyframes pfadm-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
body.pf-admin [class*="grid"] > * { animation: pfadm-in .55s var(--pf-ease) both; }
body.pf-admin [class*="grid"] > *:nth-child(1) { animation-delay: .02s; }
body.pf-admin [class*="grid"] > *:nth-child(2) { animation-delay: .06s; }
body.pf-admin [class*="grid"] > *:nth-child(3) { animation-delay: .10s; }
body.pf-admin [class*="grid"] > *:nth-child(4) { animation-delay: .14s; }
body.pf-admin [class*="grid"] > *:nth-child(5) { animation-delay: .18s; }
body.pf-admin [class*="grid"] > *:nth-child(6) { animation-delay: .22s; }
body.pf-admin [class*="grid"] > *:nth-child(7) { animation-delay: .26s; }
body.pf-admin [class*="grid"] > *:nth-child(8) { animation-delay: .30s; }

/* ── 3. Sidebar: glow rail + active indicator ──────────────────── */
body.pf-admin aside,
body.pf-admin [class*="w-64"][class*="fixed"],
body.pf-admin [class*="w-64"][class*="h-screen"] {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%) !important;
  box-shadow: 6px 0 32px -18px rgba(16, 49, 43, .18);
}
body.pf-admin a[href^="/admin/"], body.pf-admin a[href="/admin"] {
  position: relative;
  border-radius: 14px !important;
  transition: background .28s var(--pf-ease), transform .28s var(--pf-ease),
              box-shadow .28s var(--pf-ease), color .2s linear;
  will-change: transform;
}
body.pf-admin a[href^="/admin/"]:hover, body.pf-admin a[href="/admin"]:hover {
  transform: translateX(3px);
  background: rgba(78, 126, 90, .07) !important;
}
body.pf-admin a[href^="/admin/"]::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 3.5px; border-radius: 99px;
  background: linear-gradient(180deg, var(--pf-ink-soft), var(--pf-honey));
  opacity: 0; transform: scaleY(.3);
  transition: opacity .25s var(--pf-ease), transform .25s var(--pf-ease);
}
body.pf-admin a[href^="/admin/"].pfadm-active::before { opacity: 1; transform: none; }
body.pf-admin a[href^="/admin/"].pfadm-active {
  background: linear-gradient(90deg, rgba(78, 126, 90, .13), rgba(223, 145, 44, .07)) !important;
  box-shadow: inset 0 0 0 1px rgba(78, 126, 90, .16);
  font-weight: 800;
}
/* mobile drawer overlay polish */
body.pf-admin [class*="fixed"][class*="inset-0"][class*="bg-black"] {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity .3s var(--pf-ease);
}

/* ── 4. Topbar glass ───────────────────────────────────────────── */
body.pf-admin [class*="sticky"][class*="top-0"],
body.pf-admin header[class*="border-b"] {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgba(16, 49, 43, .18);
}

/* ── 5. Cards: hover lift + honey sheen sweep ──────────────────── */
@keyframes pfadm-sheen {
  0%   { transform: translateX(-130%) skewX(-14deg); }
  60%, 100% { transform: translateX(230%) skewX(-14deg); }
}
body.pf-admin [class*="bg-white"][class*="rounded"],
body.pf-admin [class*="shadow-soft"] {
  transition: transform .35s var(--pf-ease), box-shadow .35s var(--pf-ease),
              border-color .35s var(--pf-ease);
}
body.pf-admin [class*="shadow-soft"] {
  position: relative;
  overflow: hidden;
}
body.pf-admin [class*="shadow-soft"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--pf-shadow-lg);
  border-color: rgba(78, 126, 90, .25);
}
body.pf-admin [class*="shadow-soft"]::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  opacity: 0; pointer-events: none;
  border-radius: inherit;
}
body.pf-admin [class*="shadow-soft"]:hover::after {
  opacity: 1;
  animation: pfadm-sheen 1.1s var(--pf-ease) forwards;
}

/* ── 6. Tables: sticky header, row accent, mobile scroll hint ──── */
body.pf-admin table { border-collapse: separate; border-spacing: 0; }
body.pf-admin thead th {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #fbfaf7, #f4f1ea);
  box-shadow: 0 1px 0 var(--pf-line), 0 8px 14px -12px rgba(16, 49, 43, .14);
  letter-spacing: .04em;
}
body.pf-admin tbody tr {
  transition: background .22s var(--pf-ease), box-shadow .22s var(--pf-ease);
}
body.pf-admin tbody tr:nth-child(even) { background: rgba(78, 126, 90, .025); }
body.pf-admin tbody tr:hover {
  background: rgba(78, 126, 90, .065) !important;
  box-shadow: inset 3px 0 0 var(--pf-ink-soft);
}
@media (max-width: 1023px) {
  body.pf-admin .pfadm-tscroll {
    background:
      linear-gradient(90deg, var(--pf-cream) 30%, rgba(250, 248, 245, 0)),
      linear-gradient(-90deg, var(--pf-cream) 30%, rgba(250, 248, 245, 0)) right / 18px 100% no-repeat local,
      radial-gradient(farthest-side at 50% 50%, rgba(16, 49, 43, .14), transparent) right / 12px 100% no-repeat,
      linear-gradient(-90deg, var(--pf-cream) 30%, rgba(250, 248, 245, 0)) left / 18px 100% no-repeat local,
      radial-gradient(farthest-side at 50% 50%, rgba(16, 49, 43, .14), transparent) left / 12px 100% no-repeat;
  }
}

/* ── 7. Status badges: pill gloss + pending pulse ──────────────── */
body.pf-admin [class*="rounded-full"][class*="font-bold"] {
  box-shadow: inset 0 0 0 1px rgba(16, 49, 43, .05), 0 2px 6px -2px rgba(16, 49, 43, .12);
  letter-spacing: .03em;
}
@keyframes pfadm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223, 145, 44, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(223, 145, 44, 0); }
}
body.pf-admin [class*="bg-amber"][class*="rounded-full"],
body.pf-admin [class*="bg-orange"][class*="rounded-full"] {
  animation: pfadm-pulse 2.2s ease-in-out infinite;
}

/* ── 8. Buttons: press physics + primary glow ──────────────────── */
body.pf-admin button:active {
  transform: scale(.965);
  transition: transform .12s ease;
}
body.pf-admin [class*="from-primary"][class*="to-"],
body.pf-admin button[class*="bg-primary"] {
  box-shadow: 0 10px 22px -10px rgba(78, 126, 90, .55);
  transition: box-shadow .3s var(--pf-ease), transform .2s var(--pf-ease),
              filter .25s var(--pf-ease);
}
body.pf-admin [class*="from-primary"][class*="to-"]:hover,
body.pf-admin button[class*="bg-primary"]:hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 14px 30px -10px rgba(78, 126, 90, .6);
  transform: translateY(-1px);
}

/* ── 9. Inputs: focus glow ─────────────────────────────────────── */
body.pf-admin input, body.pf-admin textarea, body.pf-admin select {
  transition: border-color .25s var(--pf-ease), box-shadow .25s var(--pf-ease),
              background .25s var(--pf-ease);
}
body.pf-admin input:focus, body.pf-admin textarea:focus, body.pf-admin select:focus {
  box-shadow: 0 0 0 4px rgba(78, 126, 90, .12), 0 0 0 1px rgba(78, 126, 90, .5) !important;
  background: #fff;
}
body.pf-admin input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* ── 10. Modals / drawers: cinematic enter ─────────────────────── */
@keyframes pfadm-modal { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pfadm-fade  { from { opacity: 0; } to { opacity: 1; } }
body.pf-admin [class*="fixed"][class*="inset-0"] { animation: pfadm-fade .3s var(--pf-ease) both; }
body.pf-admin [class*="fixed"][class*="inset-0"] > div,
body.pf-admin [class*="fixed"][class*="inset-0"] [class*="max-w-"] {
  animation: pfadm-modal .42s var(--pf-ease) both;
}

/* ── 11. Skeleton shimmer (upgrades animate-pulse) ─────────────── */
@keyframes pfadm-shimmer { from { background-position: -420px 0; } to { background-position: 420px 0; } }
body.pf-admin .pfadm-shimmer, body.pf-admin .animate-pulse {
  background-image: linear-gradient(96deg,
    rgba(78, 126, 90, .05) 8%, rgba(78, 126, 90, .14) 22%,
    rgba(78, 126, 90, .05) 36%) !important;
  background-size: 420px 100% !important;
  animation: pfadm-shimmer 1.5s linear infinite !important;
}

/* ── 12. Toasts (react-hot-toast): premium glass ───────────────── */
body.pf-admin [aria-live] > div {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px !important;
  border: 1px solid rgba(78, 126, 90, .18);
  box-shadow: 0 18px 40px -16px rgba(16, 49, 43, .3) !important;
  font-weight: 600;
}

/* ── 13. Scrollbars ────────────────────────────────────────────── */
body.pf-admin *::-webkit-scrollbar { width: 9px; height: 9px; }
body.pf-admin *::-webkit-scrollbar-track { background: transparent; }
body.pf-admin *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(78, 126, 90, .4), rgba(78, 126, 90, .55));
  border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}
body.pf-admin *::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 126, 90, .75); background-clip: padding-box;
}

/* ── 14. Soft icons ────────────────────────────────────────────── */
body.pf-admin svg[class*="text-slate-300"],
body.pf-admin svg[class*="text-slate-400"] {
  filter: drop-shadow(0 6px 14px rgba(16, 49, 43, .12));
}

/* ── 15. Login page: cinematic entrance ────────────────────────── */
@keyframes pfadm-login { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
body.pf-admin [class*="max-w-md"][class*="bg-white"][class*="rounded-3xl"] {
  animation: pfadm-login .7s var(--pf-ease) both;
}
@keyframes pfadm-orb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, -14px) scale(1.06); } }
body.pf-admin [class*="rounded-full"][class*="blur-\[120px\]"] {
  animation: pfadm-orb 9s ease-in-out infinite;
}

/* ── 16. Reduced motion & mobile safety ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.pf-admin *, body.pf-admin *::before, body.pf-admin *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}
@media (max-width: 640px) {
  body.pf-admin [class*="shadow-soft"]:hover { transform: none; }
  body.pf-admin [class*="grid"] > * { animation-duration: .4s; }
}

/* ── 17. Print (orders / invoices) ─────────────────────────────── */
@media print {
  body.pf-admin aside, body.pf-admin header[class*="sticky"],
  body.pf-admin button { display: none !important; }
  body.pf-admin main { margin: 0 !important; padding: 0 !important; }
  body.pf-admin [class*="shadow-soft"] { box-shadow: none !important; border: 1px solid #ddd; }
}