/* ==================================================================
   MOBILE UI v11.2 — one design system for every table, sheet and modal.
   Phones only (<=768px). Desktop is never touched.

   Frame language:
     --border-default (#F37421)  = you can tap it or type in it
     --border-active  (#36C2D9)  = read-only information
   ================================================================== */
@media (max-width: 768px) {

  /* ---------- neutralise legacy mobile table rules ---------- */
  .overflow-x-auto {
    overflow-x: visible !important;
    background: none !important; border: none !important;
    box-shadow: none !important; padding: 0 !important;
  }
  .tbl-pager { display: none !important; }
  [data-mui-dupe] { display: none !important; }

  table[data-mui="cmp"] th, table[data-mui="cmp"] td {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    min-width: 0 !important; max-width: none !important;
    box-shadow: none !important; z-index: auto !important;
  }

  /* ================= COMPACT TABLE ================= */
  table[data-mui="cmp"] {
    --rule: color-mix(in srgb, var(--border-default) 50%, transparent);
    display: block !important;
    width: 100% !important; min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important; border-spacing: 0 !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 12px; overflow: hidden;
    background: var(--bg-card);
  }
  table[data-mui="cmp"] > thead,
  table[data-mui="cmp"] > tbody,
  table[data-mui="cmp"] > tfoot { display: block !important; width: 100% !important; }

  table[data-mui="cmp"] > thead > tr,
  table[data-mui="cmp"] > tbody > tr[data-mrow="card"],
  table[data-mui="cmp"] > tfoot > tr {
    display: flex !important; align-items: stretch !important; width: 100% !important;
  }
  table[data-mui="cmp"] > tbody > tr[data-mrow="banner"] { display: block !important; }

  .overflow-x-auto:has(table[data-mui="cmp"] tr[data-sheet])::before {
    content: 'Tap any row to edit';
    display: block; padding: 0 2px 7px;
    font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-muted); opacity: .75;
  }

  table[data-mui="cmp"] > thead > tr > th {
    display: flex !important; align-items: center !important;
    min-height: 40px;
    padding: 9px 10px !important;
    font-size: 9px !important; letter-spacing: .4px; line-height: 1.2;
    text-transform: uppercase; font-weight: 700;
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--border-default) 14%, transparent) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    white-space: normal !important; text-align: start !important;
  }

  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td {
    display: flex !important; align-items: center !important;
    min-height: 48px;
    padding: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    background: transparent !important;
    font-size: 12.5px !important; line-height: 1.3;
    white-space: normal !important;
  }
  table[data-mui="cmp"] > tbody > tr:last-child > td { border-bottom: 0 !important; }
  table[data-mui="cmp"] > tbody > tr[data-sheet]:active > td {
    background: color-mix(in srgb, var(--border-active) 13%, transparent) !important;
  }

  /* columns: name flexes; numbers fixed, unequal, with vertical rules */
  table[data-mui="cmp"] th[data-role="identity"],
  table[data-mui="cmp"] td[data-role="identity"] {
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
    text-align: start !important;
  }
  table[data-mui="cmp"] th[data-role="col"],
  table[data-mui="cmp"] td[data-role="col"] {
    flex: 0 0 15% !important; width: auto !important; min-width: 0 !important;
    justify-content: flex-end !important; text-align: end !important;
    border-inline-start: 1px solid var(--rule) !important;
    padding-left: 5px !important; padding-right: 7px !important;
  }
  table[data-mui="cmp"] th[data-role="col"] ~ th[data-role="col"],
  table[data-mui="cmp"] td[data-role="col"] ~ td[data-role="col"] {
    flex: 0 0 23% !important; padding-right: 10px !important;
  }

  /* value renders from data-val: the live control never paints in the table */
  table[data-mui="cmp"] > tbody > tr > td[data-val] { font-size: 0 !important; }
  table[data-mui="cmp"] > tbody > tr > td[data-val] > * { display: none !important; }
  table[data-mui="cmp"] > tbody > tr > td[data-val]::after {
    content: attr(data-val);
    flex: 1 1 auto; min-width: 0;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    word-break: normal !important; overflow-wrap: break-word !important;
    line-height: 1.3;
  }
  table[data-mui="cmp"] td[data-role="identity"][data-val]::after {
    -webkit-line-clamp: 3;
    font-size: 12.5px !important; font-weight: 650;
    color: var(--text-primary); text-align: start;
  }
  table[data-mui="cmp"] td[data-role="col"][data-val]::after {
    -webkit-line-clamp: 1; white-space: nowrap !important;
    font-size: 12px !important; text-align: end;
    font-variant-numeric: tabular-nums; letter-spacing: -.2px;
  }
  table[data-mui="cmp"] td[data-val=""]::after { content: '—'; opacity: .32; }

  table[data-mui="cmp"] th[data-role="drop"],
  table[data-mui="cmp"] td[data-role="drop"],
  table[data-mui="cmp"] td[data-role="more"],
  table[data-mui="cmp"] td[data-role="field"],
  table[data-mui="cmp"] td[data-role="action"] { display: none !important; }

  table[data-mui="cmp"] td[data-role="banner"] {
    padding: 22px 12px !important; text-align: center !important;
    color: var(--text-muted); font-size: 12.5px !important; border: 0 !important;
  }

  table[data-mui="cmp"] > tfoot > tr > td {
    display: flex !important; align-items: center;
    min-height: 48px; padding: 12px 10px !important;
    border: 0 !important;
    border-top: 1px solid var(--border-active) !important;
    background: color-mix(in srgb, var(--border-active) 12%, transparent) !important;
    font-size: 12.5px !important; font-weight: 700;
  }
  table[data-mui="cmp"] > tfoot > tr > td:first-child { flex: 1 1 auto; }
  table[data-mui="cmp"] > tfoot > tr > td:not(:first-child) {
    flex: 0 0 38%; justify-content: flex-end;
    border-inline-start: 1px solid var(--rule) !important;
  }
  table[data-mui="cmp"] > tfoot td[data-role="drop"] { display: none !important; }

  .overflow-x-auto:has(> table[data-mui="grid"]) { overflow-x: auto !important; }

  /* ================= BOTTOM SHEET ================= */
  .mui-backdrop {
    position: fixed; inset: 0; z-index: 9990;
    background: rgba(0,0,0,.66);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .mui-sheet {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 10000;
    display: none; flex-direction: column; gap: 8px;
    max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.75);
  }
  body.mui-open { overflow: hidden; }
  body.mui-open .mui-backdrop { opacity: 1; pointer-events: auto; }
  body.mui-open .mui-sheet {
    display: flex;
    animation: muiUp .26s cubic-bezier(.32,.72,0,1);
  }
  @keyframes muiUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

  .mui-grab {
    flex: 0 0 auto; align-self: center;
    width: 40px; height: 4px; border-radius: 99px;
    background: var(--text-muted); opacity: .5;
  }
  .mui-title {
    flex: 0 0 auto;
    font-size: 19px; font-weight: 700; line-height: 1.3;
    color: var(--text-primary);
    padding: 2px 2px 11px;
    border-bottom: 1px solid var(--border-default);
  }
  .mui-body { display: flex; flex-direction: column; gap: 8px; }

  .mui-row { display: flex; align-items: stretch; gap: 8px; }
  .mui-key {
    flex: 0 0 38%; min-width: 0;
    display: flex; align-items: center;
    min-height: 50px; padding: 8px 11px;
    border: 1px solid var(--border-default);
    border-radius: 11px;
    background: var(--bg-primary);
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-muted);
    line-height: 1.25; text-align: start;
    overflow-wrap: break-word; word-break: normal;
  }
  .mui-val {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: flex-end;
    min-height: 50px; padding: 8px 12px;
    border: 1px solid var(--border-active);
    border-radius: 11px;
    background: var(--bg-primary);
    font-size: 14px; font-weight: 650;
    color: var(--text-primary);
    text-align: end;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    overflow-wrap: break-word; word-break: normal;
  }
  .mui-val.is-edit {
    border-color: var(--border-default);
    padding: 0; background: transparent;
  }
  .mui-val > input, .mui-val > select, .mui-val > textarea {
    width: 100%; min-width: 0;
    min-height: 50px; padding: 8px 12px;
    border: 0; border-radius: 11px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px; font-family: inherit;
    text-align: end;
    -webkit-appearance: none; appearance: none;
  }
  .mui-val > select {
    text-align: center; text-align-last: center;
    background-image: none;
  }
  .mui-val > input:focus, .mui-val > select:focus {
    outline: 2px solid var(--border-active); outline-offset: -2px;
  }

  .mui-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding-top: 4px;
  }
  .mui-act, .mui-close {
    min-height: 50px; padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: 11px;
    background: transparent;
    font-size: 14px; font-weight: 700; font-family: inherit;
    line-height: 1.15; white-space: normal;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .mui-act.is-off { opacity: .35; }
  .mui-close {
    grid-column: 1 / -1;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
    font-weight: 650;
  }

  /* ================= UNIVERSAL MODAL ================= */
  .modal-backdrop, .fixed.inset-0 { z-index: 10060 !important; }
  .modal-backdrop { align-items: center !important; padding: 10px !important; }
  .modal-backdrop > .app-card,
  .modal-backdrop > div:not([data-mui-ui]) {
    width: 100% !important; max-width: 100% !important;
    max-height: 88vh !important; overflow-y: auto !important;
    padding: 16px !important;
    border: 1px solid var(--border-active) !important;
    border-radius: 18px !important;
    background: var(--bg-card) !important;
  }
  .modal-backdrop h3 { font-size: 17px !important; line-height: 1.3; }
  .modal-backdrop .grid.grid-cols-2:not(.mui-actions) {
    grid-template-columns: 1fr !important; gap: 10px !important;
  }
  .modal-backdrop label { font-size: 12px !important; }
  .modal-backdrop input, .modal-backdrop select,
  .modal-backdrop textarea, .modal-backdrop .app-input {
    width: 100% !important; min-height: 48px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 11px !important;
  }
  .modal-backdrop button:not(.text-2xl),
  .modal-backdrop label.app-btn, .modal-backdrop a.app-btn {
    min-height: 48px !important;
    border-width: 1px !important; border-style: solid !important;
    border-radius: 11px !important;
    white-space: normal !important; line-height: 1.2;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  .modal-backdrop button.text-2xl {
    border: 0 !important; min-height: 0 !important; padding: 0 6px !important;
  }
  .modal-backdrop .flex.gap-3, .modal-backdrop .flex.gap-2 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .modal-backdrop [data-mui-ro],
  .modal-backdrop div[style*="--bg-primary"] {
    border: 1px solid var(--border-active) !important;
    border-radius: 11px !important;
  }

  /* ================= GLOBAL FRAMES ================= */
  .app-card { border: 1px solid var(--border-default) !important; }
  [data-mui-ro] {
    border: 1px solid var(--border-active) !important;
    border-radius: 11px; padding: 8px 10px;
  }

  /* ================= COLLAPSIBLE CARD HEADERS ================= */
  div.cursor-pointer.flex.items-center.justify-between:has(> div.flex > h2) {
    display: flex !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: flex-start !important;
    gap: 8px !important; padding: 12px !important;
  }
  div.cursor-pointer.flex.items-center.justify-between:has(> div.flex > h2)
    > div.flex.items-center { display: contents !important; }
  div.cursor-pointer.flex.items-center.justify-between:has(> div.flex > h2)
    > div.flex.items-center > span.text-2xl {
    order: 1; flex: 0 0 34px; width: 34px; height: 34px;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 12px !important; line-height: 1;
    border: 1px solid var(--border-default); border-radius: 9px;
    background: var(--bg-card); color: var(--border-active);
  }
  div.cursor-pointer.flex.items-center.justify-between:has(> div.flex > h2)
    > div.flex.items-center > h2 {
    order: 2; flex: 1 1 auto; margin: 0 !important; font-size: 14px !important;
  }
  div.cursor-pointer.flex.items-center.justify-between:has(> div.flex > h2)
    > div.flex.items-center > span.rounded-full { order: 3; font-size: 10px !important; }
  div.cursor-pointer.flex.items-center.justify-between:has(> div.flex > h2)
    > div.flex.items-center > .app-btn,
  div.cursor-pointer.flex.items-center.justify-between:has(> div.flex > h2)
    > a.app-btn {
    order: 4; flex: 1 1 calc(50% - 4px);
    margin: 0 !important; min-height: 46px !important;
    border-width: 1px !important; border-style: solid !important;
    border-radius: 11px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    gap: 6px; font-size: 12.5px !important;
    white-space: normal !important; line-height: 1.15;
  }

  /* ================= ORDER PAGE ================= */
  .order-page-fixed { height: auto !important; overflow: visible !important; }
  .order-layout-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .order-header-area { padding: 10px 0 !important; }
  .order-header-area h1 { font-size: 18px !important; line-height: 1.3; }
  .order-header-area .app-btn {
    min-height: 42px !important; padding: 8px 18px !important;
    font-size: 13px !important; border-radius: 11px !important;
  }
  .order-menu-col { overflow: visible !important; height: auto !important; padding: 12px !important; }
  .order-menu-col .menu-cats-area {
    position: sticky !important; top: 56px !important; z-index: 25 !important;
    background: color-mix(in srgb, var(--bg-primary) 95%, transparent) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--border-default) !important;
    border-radius: 12px !important;
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; overflow-y: visible !important;
    gap: 7px !important; padding: 7px !important; margin-bottom: 20px !important;
    scrollbar-width: none;
  }
  .order-menu-col .menu-cats-area::-webkit-scrollbar { display: none; }
  .order-menu-col .menu-cats-area > button {
    flex: 0 0 auto !important; white-space: nowrap !important;
    padding: 8px 15px !important; font-size: 12.5px !important;
    border-radius: 999px !important; min-height: 38px !important;
  }
  .order-menu-col .menu-scroll-area {
    position: relative !important; z-index: 1 !important; overflow: visible !important;
  }
  .order-summary-col {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 9px !important;
    height: auto !important; overflow: visible !important; padding: 14px !important;
  }
  .order-summary-col > * { flex: 0 0 auto !important; width: 100% !important; margin: 0 !important; }
  .order-summary-col > h2 { font-size: 17px !important; }
  .order-summary-col > .overflow-auto {
    border: 1px solid var(--border-default) !important;
    border-radius: 12px !important; padding: 8px !important; max-height: 260px !important;
  }
  .order-summary-col > .border-t {
    border: 1px solid var(--border-active) !important;
    border-radius: 12px !important; padding: 12px !important;
  }
  .order-summary-col button, .order-summary-col .app-btn, .order-summary-col .app-btn-primary {
    width: 100% !important; min-height: 50px !important; border-radius: 12px !important;
    font-size: 14px !important; white-space: normal !important; line-height: 1.2;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  }
  .order-summary-col > .app-btn-primary { min-height: 58px !important; font-weight: 700 !important; }
  .order-summary-col > .grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .order-summary-col .overflow-auto button {
    width: 38px !important; min-width: 38px !important; min-height: 38px !important;
    padding: 0 !important; font-size: 18px !important; border-radius: 9px !important;
  }
  .order-summary-col .overflow-auto .flex.items-center.justify-between {
    border: 1px solid var(--border-default) !important;
    border-radius: 10px !important; padding: 9px !important;
  }

  [data-mui-canvas] {
    position: relative !important; display: flex !important; flex-direction: column;
    gap: 12px; width: 100% !important; height: auto !important; overflow: visible !important;
  }
  [data-mui-flow] {
    position: static !important; inset: auto !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; transform: none !important; margin: 0 !important;
  }

  /* ================= CHIP RAILS + ACTION ROWS ================= */
  div.flex.flex-wrap.gap-2.mb-6:has(> button) {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; scrollbar-width: none;
    gap: 7px !important; padding-bottom: 3px; margin-bottom: 16px !important;
    position: relative; z-index: 4;
  }
  div.flex.flex-wrap.gap-2.mb-6:has(> button)::-webkit-scrollbar { display: none; }
  div.flex.flex-wrap.gap-2.mb-6:has(> button) > * { flex: 0 0 auto !important; }
  div.flex.flex-wrap.gap-2.mb-6:has(> button) > button,
  div.flex.flex-wrap.gap-2.mb-6:has(> button) > .relative > button {
    white-space: nowrap !important; padding: 9px 16px !important;
    font-size: 13px !important; border-radius: 999px !important; min-height: 40px;
  }
  .flex.flex-wrap.gap-3.mb-6 > .app-btn,
  .flex.flex-wrap.gap-3.mb-6 > .app-btn-primary,
  .flex.items-center.justify-between > .flex.gap-2 > .app-btn,
  .flex.items-center.justify-between > .flex.gap-2 > .app-btn-primary,
  .flex.items-center.justify-between > .flex.gap-2 > label.app-btn,
  .flex.items-center.justify-between > .flex.gap-2 > a.app-btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 46px !important; border-radius: 11px !important;
    white-space: normal !important; line-height: 1.2; font-size: 12.5px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  .flex.items-center.justify-between:has(> h1) {
    flex-wrap: wrap !important; gap: 10px !important;
  }
  .flex.items-center.justify-between > .flex.gap-2 {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100%;
  }


  /* ============ v11.1: SPECIFICITY — hide rules must outrank the
     row rule `> tbody > tr[data-mrow="card"] > td` (2 attrs / 4 elems).
     Every selector below carries 3 attributes on the same 4-element path. ============ */

  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td[data-role="drop"],
  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td[data-role="more"],
  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td[data-role="field"],
  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td[data-role="action"] {
    display: none !important;
  }
  table[data-mui="cmp"] > thead > tr > th[data-role="drop"] { display: none !important; }
  table[data-mui="cmp"] > tfoot > tr > td[data-role="drop"] { display: none !important; }

  /* the three surviving columns, re-declared at winning weight */
  table[data-mui="cmp"] > thead > tr > th[data-role="identity"],
  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td[data-role="identity"] {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important; min-width: 0 !important;
    justify-content: flex-start !important;
    text-align: start !important;
    padding-inline: 10px !important;
  }
  table[data-mui="cmp"] > thead > tr > th[data-role="col"],
  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td[data-role="col"] {
    display: flex !important;
    flex: 0 0 15% !important;
    width: auto !important; min-width: 0 !important;
    justify-content: flex-end !important;
    text-align: end !important;
    border-inline-start: 1px solid var(--rule) !important;
    padding-inline: 5px 7px !important;
  }
  table[data-mui="cmp"] > thead > tr > th[data-role="col"] ~ th[data-role="col"],
  table[data-mui="cmp"] > tbody > tr[data-mrow="card"] > td[data-role="col"] ~ td[data-role="col"] {
    flex: 0 0 23% !important;
    padding-inline: 5px 10px !important;
  }


  /* ============ v11.2: MODAL STACKING ============
     A modal that declares its own z-index inline was written to sit ABOVE
     the ordinary ones (image crop, image zoom, background crop). The blanket
     `z-index: 10060 !important` flattened them onto one layer, so DOM order
     decided who won. Give the explicit ones their own higher layer. */

  .modal-backdrop[style*="z-index"],
  .fixed.inset-0[style*="z-index"] {
    z-index: 10080 !important;
  }

  /* a crop surface needs the full sheet, not a padded card */
  .modal-backdrop[style*="z-index"] > div:not([data-mui-ui]) {
    max-height: 92vh !important;
    padding: 12px !important;
  }
  .modal-backdrop img,
  .modal-backdrop .cropper-container {
    max-width: 100% !important;
  }
}