/* ===========================================================================
   THE OLD EDITOR INSIDE THE PANEL — the same cards as the panel's own pages.
   ===========================================================================
   /panel draws the owner's older pages (معلومات المنشأة، الدوام، الأقسام،
   الأطباق، الإضافات، العروض، التصميم، الترجمة، البطاقة) through
   /owner?embed=1. Their markup was written for the standalone console: flat
   blocks on the page ground, a tall «تحرر الآن» card and the full setup strip
   above every tab. Beside the panel's own home and the network pages, which
   are cards on a ground with one header each, they read as another product.

   This sheet is loaded LAST and every rule is behind `body.embed`, so the
   standalone /owner page keeps its look. It follows console-theme.css's one
   discipline: no behaviour, no new class, no markup moved. It only re-draws
   shapes that already exist:

     * every `.panel-block` and every fold is a card (the home's `.section`);
     * the first card's title is the page heading, the rest are card titles;
     * rows inside a card (a dish, a section, a day) sit on the inset ground,
       as the home's tiles do;
     * notes are callouts with a coloured edge, as the network's alerts are;
     * a long card's save row stays on screen at the card's foot;
     * «تحرر الآن» is one line and the setup strip is one compact card.
   =========================================================================== */

/* ---- THE PAGE ------------------------------------------------------------ */
body.embed .wrap { padding-top: var(--s4); padding-bottom: var(--s5); }
body.embed .ptab-body { color: var(--ink); }

/* ---- «تحرر الآن»: one line. -----------------------------------------------
   The panel's bar already names the shop; this line keeps the branch in view.
   The hint under it pointed at the standalone list's «إدارة القائمة» button,
   which does not exist in here (the panel's own picker switches branches),
   so it is not shown inside the panel. */
body.embed .editing-now {
  display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap;
  padding: 10px var(--s4); margin-bottom: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent); border-radius: var(--r-btn);
  box-shadow: var(--e-rest);
}
body.embed .editing-now .en-line { align-items: center; gap: var(--s2); }
body.embed .editing-now .en-label {
  font-size: var(--t-xs); letter-spacing: 0; text-transform: none;
  padding: 2px 10px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent-press);
}
body.embed .editing-now .en-name { font-size: var(--t-md); unicode-bidi: plaintext; }
body.embed .editing-now .en-place { font-size: var(--t-sm); }
body.embed .editing-now .en-hint { display: none; }

/* ---- THE SETUP STRIP: one compact card. ---------------------------------
   Title, count and bar on one side, the next step's button on the other, the
   steps underneath; on a phone they are one row that scrolls sideways
   instead of stacking four rows tall. */
body.embed .su-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head next" "pills pills";
  align-items: center; gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent); border-radius: var(--r-card);
  box-shadow: var(--e-rest);
}
body.embed .su-head { grid-area: head; flex-wrap: nowrap; min-width: 0; }
body.embed .su-h { margin: 0; font-size: var(--t-md); color: var(--ink); white-space: nowrap; }
body.embed .su-count { font-variant-numeric: tabular-nums; }
body.embed .su-track { flex: 1 1 auto; max-width: 260px; min-width: 60px; }
body.embed .su-next { grid-area: next; margin: 0; }
body.embed .su-next-l { display: none; }
body.embed .su-next-go { min-height: 40px; }
body.embed .su-pills { grid-area: pills; flex-wrap: wrap; gap: var(--s2); }
body.embed .su-pills::-webkit-scrollbar { display: none; }
body.embed .su-pill {
  flex: 0 0 auto; min-height: 36px; padding: 4px 12px 4px 14px;
  font-size: var(--t-sm); background: var(--surface-2); white-space: nowrap;
}
body.embed .su-pill.done { background: var(--accent-weak); }

/* ---- CARDS ---------------------------------------------------------------
   Every block of a tab is the console's one card. Inside the page tab the
   form column and the preview column hold their own blocks. */
body.embed .ptab-body .panel-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e-rest);
  padding: var(--s5); margin: 0 0 var(--s4);
}
body.embed .ptab-body .panel-block:last-child { margin-bottom: 0; }
/* A block inside a fold or inside another block is a part, not a card. */
body.embed .ptab-body .pg-sec .panel-block,
body.embed .ptab-body .panel-block .panel-block {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}

/* The heading: the tab's first card carries the page's title, every later
   card a card title, and the line under each one reads as a subtitle. */
body.embed .panel-h {
  font-size: var(--t-lg); font-weight: 700; line-height: var(--lh-tight);
  margin: 0 0 var(--s1); color: var(--ink); unicode-bidi: plaintext;
}
body.embed .ptab-body > .panel-block:first-child > .panel-h:first-child,
body.embed .ptab-body > :first-child > .panel-block:first-child > .panel-h:first-child,
body.embed .pg-form-col > .panel-block:first-child > .panel-h:first-child {
  font-size: var(--t-xl);
}
body.embed .panel-sub {
  font-size: var(--t-sm); line-height: var(--lh-body); color: var(--muted);
  margin: 0 0 var(--s4); max-width: 78ch;
}
body.embed .menu-legend { font-size: var(--t-sm); line-height: 1.7; }

/* ---- FOLDS: the same card, with a header you can tap. ------------------- */
body.embed .pg-sec {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e-rest);
  margin: 0 0 var(--s4); overflow: clip;
}
body.embed .pg-sec[open] { border-color: var(--line); }
body.embed .pg-sec-h {
  min-height: 60px; padding: var(--s3) var(--s5); gap: var(--s3);
  font-size: var(--t-lg); font-weight: 700;
  transition: background var(--dur-fast) var(--ease);
}
body.embed .pg-sec[open] > .pg-sec-h { border-bottom: 1px solid var(--line); }
body.embed .pg-sec-n {
  font-size: var(--t-xs); padding: 2px 10px; font-variant-numeric: tabular-nums;
}
body.embed .pg-sec-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
body.embed .pg-sec-mark .ic { width: 16px; height: 16px; transition: transform var(--dur-move) var(--ease); }
body.embed .pg-sec-b { padding: var(--s4) var(--s5) var(--s5); }
body.embed .pg-sec.is-adv { background: var(--surface); border-style: dashed; box-shadow: none; }
body.embed .pg-sec.is-adv .pg-sec-h { font-size: var(--t-md); }
/* A fold inside a fold steps back onto the inset ground. */
body.embed .pg-sec .pg-sec {
  background: var(--surface-2); box-shadow: none; border-radius: var(--r-btn); margin: var(--s3) 0 0;
}
body.embed .pg-sec .pg-sec > .pg-sec-h { min-height: 52px; padding: var(--s2) var(--s4); font-size: var(--t-md); }
body.embed .pg-sec .pg-sec > .pg-sec-b { padding: var(--s3) var(--s4) var(--s4); }

@media (hover: hover) and (pointer: fine) {
  body.embed .pg-sec-h:hover { background: var(--surface-2); color: var(--ink); }
  body.embed .pg-sec-h:hover .pg-sec-mark { border-color: var(--line-strong); color: var(--accent); }
}
body.embed .pg-sec-h:focus-visible { outline: none; box-shadow: inset var(--ring); }

/* ---- NOTES: callouts with a coloured edge (the network's alerts). --------
   The ground is the inset one, the ink is the body ink so a long note stays
   readable, and the edge plus the bold first line carry the kind. */
body.embed .biz-note {
  font-size: var(--t-sm); line-height: 1.75; color: var(--ink-2);
  margin: var(--s3) 0 0; padding: var(--s3) var(--s4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line-strong); border-radius: var(--r-btn);
  unicode-bidi: plaintext;
}
body.embed .biz-note strong { color: var(--ink); }
body.embed .biz-note.info { background: var(--accent-weak); border-color: transparent; border-inline-start-color: var(--accent); color: var(--ink-2); }
body.embed .biz-note.info strong { color: var(--accent-press); }
body.embed .biz-note.warn { background: var(--danger-weak); border-color: transparent; border-inline-start-color: var(--danger); color: var(--ink); }
body.embed .biz-note.warn strong { color: var(--danger); }
body.embed .panel-sub + .biz-note, body.embed .panel-sub + .pg-status { margin-top: 0; }
body.embed .biz-note + .biz-note { margin-top: var(--s2); }
/* Whatever follows a note keeps a breath from it. */
body.embed .panel-block > .biz-note + :not(.biz-note):not(.hidden):not(.menu-actions) { margin-top: var(--s4); }

/* ---- ROWS inside a card: the inset ground, like the home's tiles. ------- */
body.embed .menu-rows, body.embed .sec-list, body.embed .hr-week { gap: var(--s2); }
body.embed .menu-row, body.embed .sec-row, body.embed .hr-day {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-btn); padding: var(--s3) var(--s4);
  transition: border-color var(--dur-fast) var(--ease);
}
body.embed .menu-row.is-open { background: var(--surface); border-color: var(--accent); box-shadow: var(--ring); }
body.embed .sec-row.is-asking { border-color: var(--danger); }
body.embed .hr-day.is-closed, body.embed .hr-day.is-unknown { background: var(--surface); }
body.embed .menu-row input[type="text"], body.embed .menu-row input[type="number"],
body.embed .sec-row input[type="text"] { font-size: var(--t-md); min-height: 44px; }
body.embed .hr-name { font-size: var(--t-md); font-weight: 700; }
body.embed .hr-st { min-height: 36px; padding-inline: 12px; }
@media (hover: hover) and (pointer: fine) {
  body.embed .menu-row:not(.is-open):hover,
  body.embed .sec-row:not(.is-asking):hover,
  body.embed .hr-day:hover { border-color: var(--line-strong); }
}

/* The search-and-fold tools above the dish list sit as one toolbar. */
body.embed .menu-tools {
  gap: var(--s2); padding: var(--s2); margin: var(--s3) 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-btn);
}
body.embed .menu-tools .row-filter { min-height: 40px; background: var(--surface); }

/* An empty tab says so in the middle of its card, not in a grey box. */
body.embed .tab-empty {
  text-align: center; padding: var(--s6) var(--s5); margin: var(--s3) 0 0;
  background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-card);
}
body.embed .tab-empty .te-h { font-size: var(--t-lg); margin-bottom: var(--s1); }
body.embed .tab-empty .te-b { font-size: var(--t-sm); max-width: 56ch; margin-inline: auto; }

/* The live line above the page's save: a row of chips. */
body.embed .pg-status { gap: var(--s2); margin: 0 0 var(--s3); }

/* ---- THE SAVE ROW --------------------------------------------------------
   A tab's save row is the foot of its card. When the card runs longer than
   the screen (forty dishes, twenty sections) the foot stays on screen, so
   «احفظ» is never a scroll away from the row that was just changed. It is
   sticky, not fixed: it stays inside its own card and settles at the card's
   end. */
body.embed .ptab-body .panel-block > .menu-actions {
  position: sticky; bottom: 0; z-index: 4;
  margin: var(--s4) calc(-1 * var(--s5)) calc(-1 * var(--s5));
  padding: var(--s3) var(--s5);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
/* An error printed under the row sits in the card, below the foot. */
body.embed .ptab-body .panel-block > .menu-actions ~ .error-box:not(.hidden),
body.embed .ptab-body .panel-block > .menu-actions ~ .menu-err:not(.hidden) {
  margin: calc(var(--s5) + var(--s3)) 0 0;
}
body.embed .pg-actions { gap: var(--s2); margin-top: var(--s4); }
body.embed .menu-count { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

/* ---- «شوف صفحتك» ---------------------------------------------------------
   It floats at the far corner from the save button, and the save foot keeps a
   lane clear under it, so the two never sit on each other. */
body.embed .pv-fab {
  inset-inline-start: auto; inset-inline-end: var(--s4);
  box-shadow: var(--e-float);
  transition: background var(--dur-fast) var(--ease), transform 160ms var(--ease);
}
body.embed .pv-fab:active { transform: scale(.97); }
body.embed .biz-panel:has(.pv-fab) .panel-block > .menu-actions { padding-inline-end: 200px; }
body.embed .biz-panel:has(.pv-fab) .ptab-body { padding-bottom: 88px; }

/* ---- PHONE ---------------------------------------------------------------- */
@media (max-width: 640px) {
  body.embed .wrap { padding-inline: var(--s3); }
  body.embed .ptab-body .panel-block { padding: var(--s4); }
  body.embed .ptab-body .panel-block > .menu-actions {
    margin: var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding: var(--s3) var(--s4);
  }
  body.embed .ptab-body .panel-block > .menu-actions ~ .error-box:not(.hidden),
  body.embed .ptab-body .panel-block > .menu-actions ~ .menu-err:not(.hidden) {
    margin-top: calc(var(--s4) + var(--s3));
  }
  body.embed .pg-sec-h { padding: var(--s3) var(--s4); min-height: 56px; font-size: var(--t-md); }
  body.embed .pg-sec-b { padding: var(--s3) var(--s4) var(--s4); }
  body.embed .su-strip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "pills" "next"; padding: var(--s3); }
  body.embed .su-pills {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--s3)); padding: 2px var(--s3);
  }
  body.embed .su-next-go { width: 100%; justify-content: center; }
  body.embed .ptab-body > .panel-block:first-child > .panel-h:first-child,
  body.embed .ptab-body > :first-child > .panel-block:first-child > .panel-h:first-child,
  body.embed .pg-form-col > .panel-block:first-child > .panel-h:first-child { font-size: var(--t-lg); }
  /* The preview button folds to its icon; the label stays for screen readers. */
  body.embed .pv-fab { width: 52px; height: 52px; min-height: 52px; padding: 0; justify-content: center; }
  body.embed .pv-fab > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.embed .biz-panel:has(.pv-fab) .panel-block > .menu-actions { padding-inline-end: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  body.embed .pg-sec-mark .ic, body.embed .pv-fab { transition: none; }
}