/* =====================================================================
   Dashboard skin — floating white cards on soft grey, pill navigation,
   light / dark, and an accent colour the owner picks (dash.js keeps the
   choice). Loaded after assets/css/style.css by admin_header.php.
   Everything is scoped to html.dash so the storefront never sees it; the
   existing pages keep their markup and take the look through the shared
   variables (--leaf, --navy, --white, --cream-*) redefined below.
   ===================================================================== */

html.dash {
    --d-accent: #49861B;                       /* replaced by dash.js with the picked colour */
    --d-accent-2: color-mix(in srgb, var(--d-accent) 72%, #000);
    --d-accent-soft: color-mix(in srgb, var(--d-accent) 12%, transparent);
    --d-bg: #EEF0F3;
    --d-card: #FFFFFF;
    --d-card-2: #F6F7F9;
    --d-ink: #15171C;
    --d-muted: #6B7180;
    --d-line: rgba(20, 23, 30, .08);
    --d-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -18px rgba(16, 24, 40, .18);
    --d-radius: 22px;

    /* the variables every admin page already uses → the new look everywhere */
    --leaf: var(--d-accent);
    --leaf-dark: var(--d-accent-2);
    --leaf-bright: var(--d-accent);
    --leaf-50: var(--d-accent-soft);
    --blue: var(--d-accent-2);
    --navy: var(--d-ink);
    --forest: var(--d-ink);
    --ink: var(--d-ink);
    --ink-60: var(--d-muted);
    --white: var(--d-card);
    --cream: var(--d-bg);
    --cream-50: var(--d-card-2);
    --cream-100: var(--d-bg);
    --shadow-card: var(--d-shadow);
    --radius-card: var(--d-radius);
    --border-soft: 1px solid var(--d-line);
    color-scheme: light;
}
html.dash[data-dm="dark"] {
    --d-bg: #0C0D10;
    --d-card: #17191F;
    --d-card-2: #20232B;
    --d-ink: #F2F3F5;
    --d-muted: #9AA0AD;
    --d-line: rgba(255, 255, 255, .08);
    --d-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -18px rgba(0, 0, 0, .7);
    --d-accent-soft: color-mix(in srgb, var(--d-accent) 22%, transparent);
    color-scheme: dark;
}

html.dash body.admin-body { background: var(--d-bg); color: var(--d-ink); }
html.dash h1, html.dash h2, html.dash h3, html.dash h4 { color: var(--d-ink); }
html.dash a { color: var(--d-accent-2); }
html[data-dm="dark"].dash a { color: color-mix(in srgb, var(--d-accent) 70%, #fff); }

/* ---------------- shell: everything floats ---------------- */
html.dash .admin-shell { gap: 14px; padding: 14px; }
html.dash .admin-sidebar {
    background: var(--d-card); color: var(--d-ink); border-radius: var(--d-radius);
    box-shadow: var(--d-shadow); top: 14px; height: calc(100vh - 28px); width: 248px;
    transition: width .3s cubic-bezier(.2, .8, .2, 1);
}
html.dash .admin-sidebar .brand { border-bottom: 1px solid var(--d-line); }
html.dash .admin-sidebar .brand img { height: 36px; }
.dash-logo-l { display: none; }
html.dash .dash-logo-d { display: none; }
html.dash .dash-logo-l { display: inline; }
html.dash[data-dm="dark"] .dash-logo-d { display: inline; }
html.dash[data-dm="dark"] .dash-logo-l { display: none; }
html.dash .admin-nav a { color: var(--d-muted); border-radius: 999px; font-weight: 600; font-size: 14px; padding: .6rem .9rem; }
html.dash .admin-nav a:hover { background: var(--d-card-2); color: var(--d-ink); }
html.dash .admin-nav a.active { background: var(--d-ink); color: var(--d-card); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
html.dash .admin-nav .nav-grp > summary { color: var(--d-ink); border-radius: 999px; }
html.dash .admin-nav .nav-grp > summary:hover { background: var(--d-card-2); }
html.dash .admin-nav a.adm-pos, html.dash .admin-nav a.adm-diet, html.dash .admin-nav a.adm-hr { color: #fff; border-radius: 16px; }
html.dash .admin-nav a.adm-hr.active { background: linear-gradient(135deg,#5b6bd6,#2f3c99); color: #fff; }
html.dash .admin-sidebar .side-foot { border-top: 1px solid var(--d-line); }
html.dash .adm-menu-btn { background: var(--d-card-2); color: var(--d-ink); }

/* collapse to an icon rail (button in the top bar) */
html.dash.dash-rail .admin-sidebar { width: 76px; }
html.dash.dash-rail .admin-sidebar .brand img { height: 30px; }
html.dash.dash-rail .admin-nav a { font-size: 0; justify-content: center; padding: .7rem; gap: 0; }
html.dash.dash-rail .admin-nav a svg { width: 20px; height: 20px; }
html.dash.dash-rail .admin-nav a span, html.dash.dash-rail .admin-nav .nav-grp > summary { display: none; }
html.dash.dash-rail .admin-nav .nav-grp { display: contents; }

/* top bar: a floating pill row */
html.dash .admin-main { gap: 14px; }
html.dash .admin-topbar {
    background: color-mix(in srgb, var(--d-card) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 0; border-radius: var(--d-radius); box-shadow: var(--d-shadow); top: 14px; padding: .7rem 1rem .7rem 1.2rem;
}
html.dash .admin-topbar h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
html.dash .admin-content { padding: 0 4px 2rem; }
html.dash .lang-pill { background: var(--d-card-2); }
html.dash .chip-leaf { background: var(--d-accent-soft); color: var(--d-accent-2); }
html[data-dm="dark"].dash .chip-leaf { color: color-mix(in srgb, var(--d-accent) 70%, #fff); }
.dash-tools { display: inline-flex; gap: 6px; align-items: center; }
.dash-ic {
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-card-2); color: var(--d-ink); transition: transform .2s, background .2s;
}
.dash-ic:hover { transform: translateY(-2px); background: var(--d-accent-soft); }
.dash-ic svg { width: 18px; height: 18px; }

/* ---------------- cards ---------------- */
html.dash .panel, html.dash .stat-card, html.dash .table-wrap {
    background: var(--d-card); border: 0; border-radius: var(--d-radius); box-shadow: var(--d-shadow);
}
html.dash .stat-card, html.dash .panel { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
html.dash .stat-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(16, 24, 40, .35); }
html.dash .stat-card .stat-value { color: var(--d-ink); font-weight: 800; letter-spacing: -.02em; }
html.dash .stat-card .stat-value.leaf { color: var(--d-accent); }
/* the first number on a page = the hero card: accent gradient + soft glow + a progress line */
html.dash [data-page="dashboard"] .stat-grid > .stat-card:first-child {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(120% 140% at 85% 20%, color-mix(in srgb, var(--d-accent) 55%, #fff) 0%, var(--d-accent) 45%, var(--d-accent-2) 100%);
    box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--d-accent) 80%, #000);
}
html.dash [data-page="dashboard"] .stat-grid > .stat-card:first-child .stat-label { color: rgba(255, 255, 255, .85); }
html.dash [data-page="dashboard"] .stat-grid > .stat-card:first-child .stat-value { color: #fff; }
html.dash [data-page="dashboard"] .stat-grid > .stat-card:first-child::after {
    content: ""; position: absolute; inset-inline: 1.3rem; bottom: 1rem; height: 5px; border-radius: 9px;
    background: linear-gradient(90deg, #fff 62%, rgba(255, 255, 255, .25) 62%);
}

/* ---------------- tables, forms, buttons ---------------- */
html.dash .table th { background: transparent; color: var(--d-muted); font-size: 12.5px; letter-spacing: .02em; border-bottom: 1px solid var(--d-line); }
html.dash .table td { border-bottom: 1px solid var(--d-line); color: var(--d-ink); }
html.dash .table tr:hover td { background: var(--d-card-2); }
html.dash .field input, html.dash .field select, html.dash .field textarea,
html.dash .toolbar input[type="search"], html.dash .toolbar select,
html.dash input[type="text"], html.dash input[type="number"], html.dash input[type="email"], html.dash input[type="password"],
html.dash input[type="date"], html.dash input[type="search"], html.dash input[type="tel"], html.dash input[type="url"], html.dash select, html.dash textarea {
    background: var(--d-card-2); color: var(--d-ink); border: 1px solid var(--d-line); border-radius: 14px;
}
html.dash input:focus, html.dash select:focus, html.dash textarea:focus { outline: 0; border-color: var(--d-accent); box-shadow: 0 0 0 4px var(--d-accent-soft); }
html.dash .btn { border-radius: 999px; }
html.dash .btn-primary { background: var(--d-ink); color: var(--d-card); }
html.dash .btn-primary:hover { background: var(--d-accent); color: #fff; box-shadow: 0 10px 22px -12px var(--d-accent); }
html.dash .btn-secondary { border-color: var(--d-line); color: var(--d-ink); background: var(--d-card); }
html.dash .btn-secondary:hover { border-color: var(--d-accent); color: var(--d-accent-2); background: var(--d-accent-soft); }
html.dash .flash { border-radius: 16px; border: 0; }
html.dash .status { font-weight: 700; }

/* dark mode: the light blocks some pages paint by hand get a dark surface */
html[data-dm="dark"].dash [style*="background:#fff"], html[data-dm="dark"].dash [style*="background: #fff"],
html[data-dm="dark"].dash [style*="background:#FFF"], html[data-dm="dark"].dash [style*="background:white"] { background: var(--d-card) !important; color: var(--d-ink); }

/* ---------------- colour panel ---------------- */
.dash-pop {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 270px; z-index: 300;
    background: var(--d-card); color: var(--d-ink); border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
    padding: 14px; transform-origin: top; animation: dashPop .22s cubic-bezier(.2, .8, .2, 1);
}
.dash-pop[hidden] { display: none; }
.dash-pop b { display: block; font-size: 13px; margin: 2px 2px 8px; }
.dash-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--d-card-2); border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.dash-seg button { border: 0; border-radius: 999px; padding: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; background: transparent; color: var(--d-muted); }
.dash-seg button.on { background: var(--d-card); color: var(--d-ink); box-shadow: var(--d-shadow); }
.dash-sw { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.dash-sw button, .dash-sw label {
    width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; position: relative; padding: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); transition: transform .15s;
}
.dash-sw button:hover, .dash-sw label:hover { transform: scale(1.12); }
.dash-sw button.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; }
.dash-sw label { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; }
.dash-sw label input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dash-tools { position: relative; }

/* ---------------- motion ---------------- */
@keyframes dashPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dashIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dashTitle { from { opacity: 0; filter: blur(10px); letter-spacing: .04em; } to { opacity: 1; filter: none; } }
@keyframes dashShine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
html.dash.dash-anim .admin-topbar h1 { animation: dashTitle .7s cubic-bezier(.2, .8, .2, 1) both; }
html.dash.dash-anim .dash-in { animation: dashIn .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
/* skeleton shimmer while each card arrives */
html.dash.dash-anim .dash-in { position: relative; }
html.dash.dash-anim .dash-in::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--d-card) 70%, transparent) 50%, transparent 80%);
    animation: dashShine .9s ease both; animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
html.dash .admin-nav a, html.dash .dash-ic, html.dash .btn { transition: background .2s, color .2s, transform .2s, box-shadow .2s; }

/* light ↔ dark: a curved sweep over the whole screen (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: dashSweep .75s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes dashSweep {
    from { clip-path: circle(0 at var(--sx, 50%) var(--sy, 0%)); }
    to { clip-path: circle(150% at var(--sx, 50%) var(--sy, 0%)); }
}

@media (max-width: 900px) {
    html.dash .admin-shell { flex-direction: column; padding: 10px; gap: 10px; }
    html.dash .admin-sidebar { width: auto; height: auto; position: relative; top: 0; }
    html.dash.dash-rail .admin-sidebar { width: auto; }
    html.dash .admin-topbar { top: 10px; border-radius: 18px; }
    html.dash .dash-rail-btn { display: none; }
    /* phone menu: one column — a lone link (نظرة عامة) used to stretch into a huge pill next to the groups */
    html.dash .admin-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    html.dash .admin-nav > a { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    html.dash.dash-anim .dash-in, html.dash.dash-anim .dash-in::before, html.dash.dash-anim .admin-topbar h1 { animation: none; }
    ::view-transition-new(root) { animation: none; }
}

/* ---------------- login page ---------------- */
html.dash .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background:
    radial-gradient(60% 50% at 80% 10%, var(--d-accent-soft), transparent 70%), var(--d-bg); }
html.dash .login-card { background: var(--d-card); border-radius: 28px; box-shadow: 0 30px 70px -30px rgba(16, 24, 40, .35); border: 0; animation: dashIn .7s cubic-bezier(.2, .8, .2, 1) both; }
html.dash .login-card h1 { animation: dashTitle .8s .15s cubic-bezier(.2, .8, .2, 1) both; }
html.dash .login-card .btn-primary { background: var(--d-ink); color: var(--d-card); }
html.dash .login-card .btn-primary:hover { background: var(--d-accent); color: #fff; }

/* the storefront ".hero" rule (70vh tall, flex) leaks into admin cards that reuse the name (sales profit) */
html.dash .admin-content .hero:not(section) { display: block; min-height: 0; padding: 1rem 1.1rem; }
/* form boxes never wider than their card (the offers page used to push the page sideways) */
html.dash .admin-content input:not([type="checkbox"]):not([type="radio"]), html.dash .admin-content select, html.dash .admin-content textarea { max-width: 100%; box-sizing: border-box; }
html.dash .admin-content .form-grid > *, html.dash .admin-content .field { min-width: 0; }
/* the offers image picker hides its radio buttons with position:absolute; keep them inside their tile */
html.dash .img-picker label { position: relative; }
html.dash .img-picker input[type="radio"] { width: auto; }