/* Dashboard look: calm paper page, soft cards, one photo hero, green and gold accents.
   Loaded after app.css; only restyles, never changes structure. */
:root {
  --rf-ink: #172422;
  --rf-ink-2: #285144;
  --rf-saffron: #F0BC1E;
  --rf-cream: #FFF7DE;
  --rf-page: #F7F8F6;
  --rf-field: #FAFBFA;
  --rf-line: rgba(23, 36, 34, .09);
  --rf-muted: #51655E;
  --rf-shadow: 0 1px 2px rgba(23, 36, 34, .04), 0 12px 28px -18px rgba(23, 36, 34, .22);
  --rf-display: Alexandria, "IBM Plex Sans Arabic", sans-serif;
}

body { background: var(--rf-page); }

/* ---------- top bar ---------- */
#mainUI > header {
  background: rgba(247, 248, 246, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rf-line);
}
#mainUI > header > div { height: 64px; }
#mainUI .brand-mark { border-radius: 11px; width: 36px; height: 36px; }
#svcName { font-family: var(--rf-display); font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
#mainUI #storeSelect {
  background-color: #fff; border-color: var(--rf-line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(23, 36, 34, .04);
}
#btnNewStore { border-radius: 999px; }
/* the save state lives in the hero card; keep the top bar quiet */
#mainUI > header [aria-live] { display: none; }

/* ---------- surfaces ---------- */
#mainUI .k-card {
  border-color: var(--rf-line);
  border-radius: 24px;
  box-shadow: var(--rf-shadow);
}
#mainUI .k-h { font-family: var(--rf-display); font-weight: 700; font-size: 17px; letter-spacing: -.2px; color: var(--rf-ink); }
#mainUI .k-sub, #mainUI .k-hint { color: var(--rf-muted); }
#mainUI .k-label { color: var(--rf-ink-2); }

/* ---------- controls ---------- */
#mainUI .k-btn, dialog.k-dialog .k-btn {
  border-radius: 14px; font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
#mainUI .k-btn:active, dialog.k-dialog .k-btn:active { transform: scale(.98); }
#mainUI .k-outline, dialog.k-dialog .k-outline { border-color: var(--rf-line); background: #fff; color: var(--rf-ink); }
#mainUI .k-ghost, dialog.k-dialog .k-ghost { background: #E9F0EB; color: var(--rf-ink); }
@media (hover: hover) {
  #mainUI .k-outline:hover, dialog.k-dialog .k-outline:hover { background: var(--rf-field); border-color: rgba(23, 36, 34, .2); }
  #mainUI .k-ghost:hover, dialog.k-dialog .k-ghost:hover { background: #DCE5DF; }
}
#mainUI .k-input, dialog.k-dialog .k-input {
  border-radius: 14px; border-color: var(--rf-line); background-color: var(--rf-field);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#mainUI .k-input:focus, dialog.k-dialog .k-input:focus {
  outline: none; background-color: #fff; border-color: var(--rf-ink);
  box-shadow: 0 0 0 4px rgba(240, 188, 30, .35);
}
#mainUI .k-btn:focus-visible, #mainUI .k-icon:focus-visible, dialog.k-dialog .k-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 4px rgba(240, 188, 30, .55);
}
#mainUI .k-icon { border-radius: 12px; }
dialog.k-dialog { border-radius: 26px; }

/* ---------- tabs ---------- */
#mainUI [role="tablist"] { background: #E4EBE6; border-radius: 999px; padding: 4px; }
#mainUI .tab-btn { border-radius: 999px; padding-inline: 18px; color: var(--rf-muted); }
#mainUI .tab-btn[aria-current="page"] { background: var(--rf-ink); color: var(--rf-cream); box-shadow: none; }

/* ---------- this week ---------- */
#statsCard .grid > div {
  border-radius: 18px; padding: 16px; background: var(--rf-field); border: 1px solid var(--rf-line);
}
#statsCard .grid > div:first-child { background: var(--rf-cream); border-color: #EBD88F; }
#statsCard .grid > div > div:first-child {
  font-family: var(--rf-display); font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -1px; color: var(--rf-ink);
}
#statsCard .grid > div > div:nth-child(2) { font-weight: 600; color: var(--rf-ink); margin-top: 2px; }

/* ---------- lists ---------- */
#mainUI #prodList > * { border-color: var(--rf-line); }
#mainUI #prodCount { color: var(--rf-muted); }
#mainUI .fulfillment-settings summary { font-family: var(--rf-display); font-size: 17px; color: var(--rf-ink); }
#mainUI #planBadge { background: var(--rf-cream); color: var(--rf-ink-2); }
#mainUI #planBar { min-width: 6px; }

/* ---------- customer preview ---------- */
@media (min-width: 1024px) {
  .pv-frame { border-color: var(--rf-ink); border-width: 9px; border-radius: 48px; box-shadow: 0 40px 70px -34px rgba(23, 36, 34, .55); }
  #merchantPreview > div:first-child span:first-child { font-family: var(--rf-display); font-weight: 700; }
}

/* ---------- phone: floating bottom bar ---------- */
#mobileNav {
  inset-inline: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding-bottom: 0;
  border: 1px solid var(--rf-line); border-radius: 22px; overflow: hidden;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 18px 40px -18px rgba(23, 36, 34, .4);
}
#mobileNav .nav-btn { color: var(--rf-muted); position: relative; transition: color .16s ease; }
#mobileNav .nav-btn[aria-current="page"] { color: var(--rf-ink); }
#mobileNav .nav-btn[aria-current="page"]::before {
  content: ""; position: absolute; inset: 8px 14px; border-radius: 14px; background: var(--rf-cream); z-index: -1;
}
#mobileNav > div { position: relative; z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  #mainUI .k-btn, #mainUI .k-input, dialog.k-dialog .k-btn, dialog.k-dialog .k-input, #mobileNav .nav-btn { transition: none; }
  #mainUI .k-btn:active, dialog.k-dialog .k-btn:active { transform: none; }
}

/* ================= shared language with the landing page and the sign-in screen ================= */

/* glow button: dark green with a bank of gold light clipped at its foot (the landing page's signature) */
body.merchant #mainUI .k-primary, body.merchant dialog.k-dialog .k-primary {
  position: relative; overflow: hidden; color: #FFF7DE;
  background: linear-gradient(to top, #FFEDB5 1px, #FDDC78 2px, #F0BC1E 3px, #B39B28 4px, #7A7C31 5px, #4A5F37 7px, #3A5439 9px, #2C4C3E 12px, #285144 16px, #285144 100%);
  box-shadow: 0 1px 0 rgba(194,144,15,.4), 0 2px 5px -3px rgba(194,144,15,.55);
}
@media (hover: hover) { body.merchant #mainUI .k-primary:hover, body.merchant dialog.k-dialog .k-primary:hover { filter: brightness(1.12); transform: translateY(-1px); } }
body.merchant #mainUI .k-primary:disabled, body.merchant dialog.k-dialog .k-primary:disabled { filter: none; transform: none; }

/* side rail */
@media (min-width: 1024px) {
  body.merchant #workspace:not(.hidden) .merchant-nav { padding: 10px; border-color: var(--rf-line); border-radius: 22px; box-shadow: var(--rf-shadow); }
}
body.merchant .merchant-nav :is(a, button) { border-radius: 14px; font-weight: 600; color: var(--rf-muted); transition: background-color .16s, color .16s; }
body.merchant .merchant-nav :is(a, button):hover { background: #E9F0EB; color: var(--rf-ink); }
body.merchant .merchant-nav .tab-btn[aria-current="page"] { background: var(--rf-ink); color: #fff; }

#mobileNav .nav-btn[aria-current="page"]::before { background: #E9F0EB; }

/* weekly numbers */
#statsCard .grid > div:first-child { background: #E9F0EB; border-color: #D3E0D8; box-shadow: inset 0 -3px 0 var(--rf-saffron); }

/* entrance: the working column settles in once, card by card */
body[data-auth="in"] #workspace [data-panel="builder"] > * { animation: rf-rise .6s cubic-bezier(.16, 1, .3, 1) backwards; }
body[data-auth="in"] #workspace [data-panel="builder"] > :nth-child(1) { animation-delay: .05s; }
body[data-auth="in"] #workspace [data-panel="builder"] > :nth-child(2) { animation-delay: .11s; }
body[data-auth="in"] #workspace [data-panel="builder"] > :nth-child(3) { animation-delay: .17s; }
body[data-auth="in"] #workspace [data-panel="builder"] > :nth-child(4) { animation-delay: .23s; }
body[data-auth="in"] #workspace [data-panel="builder"] > :nth-child(n+5) { animation-delay: .29s; }
@keyframes rf-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  body[data-auth="in"] #workspace [data-panel="builder"] > * { animation: none; }
  body.merchant .merchant-nav :is(a, button) { transition: none; }
}