/* ============================================================================
   Mobile admin — full presentation layer for phone widths (<= 680px).
   Desktop (> 680px) is untouched: every rule lives inside a media query and
   every injected element carries .m-only, which is display:none on desktop.
   All data reads/writes still run through each page's own authenticated
   module scripts (window.mobileAdmin / window.mobileSeating / stay.html).
   ============================================================================ */

.m-only { display: none !important; }
/* Seating overlays manage their own visibility via .open and must NOT carry
   .m-only (its display:block !important would force them permanently open,
   covering the canvas). Default them hidden at every width. */
.m-sheet-backdrop, .m-picker-backdrop { display: none; }

@media (max-width: 680px) {
  .m-only { display: block !important; }

  /* Reset the desktop shells so the phone screens own the viewport. */
  body {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
    background: var(--romance-paper) !important;
    padding: 0 0 calc(74px + env(safe-area-inset-bottom)) !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
  }
  .sidebar { display: none !important; }
  .main-col { width: 100%; overflow: visible !important; display: block !important; }

  button, input, select, textarea { font-size: 16px; }

  /* ── Shared top bar ─────────────────────────────────────────────────── */
  .m-topbar {
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 14px 18px calc(12px);
    padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--romance-paper);
    border-bottom: 1px solid var(--romance-border);
    position: sticky; top: 0; z-index: 250;
  }
  .m-topbar strong {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 22px; font-weight: 400; letter-spacing: .01em;
    color: var(--romance-wine);
  }
  .m-topbar .m-signout {
    width: 40px; height: 40px; border: none; background: none; cursor: pointer;
    color: var(--romance-ink); display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
  }
  .m-topbar .m-signout:hover { background: var(--romance-blush-wash); }
  .m-topbar .m-signout svg { width: 22px; height: 22px; }

  /* ── Bottom navigation ──────────────────────────────────────────────── */
  /* Pill nav: inactive tabs are icon-only; the active tab expands into a
     filled wine pill with icon + label. Bar height and palette are unchanged. */
  .m-nav {
    display: flex !important; align-items: center; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: var(--romance-blush-wash);
    border-top: 1px solid var(--romance-border);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .m-nav a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 10px; border-radius: 999px; overflow: hidden;
    text-decoration: none; color: #A98A94;
    font-family: 'Inter', sans-serif; transition: background .15s, color .15s;
  }
  .m-nav a svg { width: 24px; height: 24px; flex-shrink: 0; }
  .m-nav a small { display: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .m-nav a[aria-current="page"] {
    background: var(--romance-wine); color: #fff; padding: 0 18px;
  }
  .m-nav a[aria-current="page"] small { display: inline; }

  /* ── Screen scaffolding ─────────────────────────────────────────────── */
  .m-screen { padding: 18px 18px 8px; }
  .m-screen[hidden] { display: none !important; }
  .m-h1 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 40px; line-height: 1.02; color: var(--romance-wine); letter-spacing: .005em;
  }
  .m-sub { font-size: 15px; color: var(--romance-muted); margin-top: 8px; line-height: 1.5; }
  .m-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .m-btn-pill {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 9px 16px; background: var(--romance-wine); color: #fff; border: none;
    border-radius: 22px; font-family: 'Inter', sans-serif; font-size: 15px; cursor: pointer;
  }
  .m-btn-pill:hover { opacity: .92; }
  .m-btn-pill svg { width: 15px; height: 15px; }

  /* ── Hide the desktop guest/seating page bodies on mobile ───────────── */
  body[data-m-page="guests"] > .main-col,
  body[data-m-page="seating"] > .main-col > .toolbar,
  body[data-m-page="seating"] .right-panel { display: none !important; }

  /* ============================ OVERVIEW ============================ */
  .m-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
  .m-stat {
    background: var(--romance-card); border: 1px solid var(--romance-border);
    border-radius: 14px; padding: 16px 16px 18px;
  }
  .m-stat .m-stat-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 34px; line-height: 1; color: var(--romance-wine); }
  .m-stat .m-stat-lbl { font-size: 14px; color: var(--romance-muted); margin-top: 6px; }
  .m-stat.olive .m-stat-num { color: var(--romance-olive-dark); }

  .m-countdown {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    background: var(--romance-card); border: 1px solid var(--romance-border);
    border-radius: 16px; padding: 16px; margin-top: 14px;
  }
  .m-cd-cell {
    background: var(--romance-blush-soft); border-radius: 12px; text-align: center;
    padding: 12px 4px;
  }
  .m-cd-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; line-height: 1; color: var(--romance-wine); }
  .m-cd-lbl { font-size: 10px; letter-spacing: .1em; color: var(--romance-muted); margin-top: 5px; white-space: nowrap; }

  .m-section-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 10px; }
  .m-section-head h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; font-weight: 400; color: var(--romance-wine); }
  .m-section-head a { color: var(--romance-wine); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
  .m-section-note { font-size: 13px; color: var(--romance-muted); margin: -4px 0 8px; }

  .m-card-box { background: var(--romance-card); border: 1px solid var(--romance-border); border-radius: 14px; overflow: hidden; }
  .m-empty { padding: 18px 16px; color: var(--romance-muted); font-size: 15px; }
  .m-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 14px 16px; border: none; background: none; font-family: 'Inter', sans-serif;
    border-top: 1px solid var(--romance-border); cursor: pointer;
  }
  .m-card-box .m-row:first-child { border-top: none; }
  .m-row .m-row-main { flex: 1; min-width: 0; }
  .m-row .m-row-name { font-size: 15px; color: var(--romance-ink); font-weight: 600; overflow-wrap: anywhere; }
  .m-row .m-row-meta { font-size: 13px; color: var(--romance-muted); margin-top: 2px; text-transform: capitalize; }
  .m-row .m-row-date { font-size: 12px; color: var(--romance-muted); white-space: nowrap; }
  .m-log-divider { height: 1px; background: var(--romance-border); margin: 6px 0 0; }

  /* ============================ GUESTS ============================ */
  .m-searchbar { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
  .m-search {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--romance-card); border: 1px solid var(--romance-border);
    border-radius: 22px; padding: 10px 14px;
  }
  .m-search svg { width: 18px; height: 18px; color: var(--romance-muted); flex-shrink: 0; }
  .m-search input { flex: 1; border: none; background: none; outline: none; font-size: 15px; color: var(--romance-ink); font-family: 'Inter', sans-serif; min-width: 0; }
  .m-search-spark {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .m-search-spark svg { width: 20px; height: 20px; }

  .m-chips { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chip {
    flex-shrink: 0; padding: 7px 16px; border-radius: 18px; border: 1px solid var(--romance-border);
    background: transparent; color: var(--romance-ink); font-size: 14px; cursor: pointer; white-space: nowrap;
    font-family: 'Inter', sans-serif;
  }
  .m-chip[aria-pressed="true"] { background: var(--romance-wine); color: #fff; border-color: var(--romance-wine); }

  .m-count { font-size: 13px; color: var(--romance-muted); margin: 16px 0 4px; }

  .m-guest-list { display: block; }
  .m-guest-row { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--romance-border); }
  .m-guest {
    display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; text-align: left;
    padding: 16px 4px; border: none;
    background: none; font-family: 'Inter', sans-serif; cursor: pointer;
  }
  .m-guest-del {
    flex-shrink: 0; align-self: center; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--romance-wine);
    border-radius: 8px; cursor: pointer;
  }
  .m-guest-del svg { width: 18px; height: 18px; }
  .m-guest-del:hover, .m-guest-del:active { background: var(--romance-blush-wash); }
  .m-guest .m-guest-main { flex: 1; min-width: 0; }
  .m-guest .m-guest-name { font-size: 17px; color: var(--romance-ink); font-weight: 700; overflow-wrap: anywhere; }
  .m-guest .m-guest-name .plus { color: var(--romance-muted); font-weight: 400; }
  .m-guest .m-guest-meta { font-size: 13px; color: var(--romance-muted); margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .m-guest .m-guest-meta svg { width: 15px; height: 15px; vertical-align: -2px; }
  .m-guest .m-guest-meta .std-ok { color: var(--romance-olive-dark); }
  .m-guest .m-guest-meta .dot { color: var(--romance-border); }
  .m-badge {
    flex-shrink: 0; padding: 5px 12px; border-radius: 16px; font-size: 13px; text-transform: capitalize;
    background: var(--romance-blush-soft); color: var(--romance-elderberry);
  }
  .m-badge.confirmed { background: var(--romance-olive-wash); color: var(--romance-olive-dark); }
  .m-badge.declined { background: var(--romance-blush-wash); color: var(--romance-wine); }
  .m-badge.pending { background: var(--romance-blush-soft); color: var(--romance-elderberry); }

  /* ============================ SEATING ============================ */
  body[data-m-page="seating"] .m-seat-toolbar {
    display: flex !important; gap: 8px; align-items: center; padding: 0 18px 12px; flex-wrap: wrap;
  }
  .m-seat-toolbar .m-btn-dark {
    display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 20px;
    background: var(--romance-wine); color: #fff; border: none; font-size: 15px; cursor: pointer;
    font-family: 'Inter', sans-serif;
  }
  .m-seat-toolbar .m-zoom { margin-left: auto; display: flex; gap: 8px; }
  .m-seat-toolbar .m-zoom button {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--romance-border);
    background: var(--romance-card); color: var(--romance-ink); font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  body[data-m-page="seating"] .workspace { display: block !important; overflow: visible !important; }
  body[data-m-page="seating"] .canvas-wrap {
    height: calc(100dvh - 260px); min-height: 320px; width: 100%;
    overflow: auto !important; touch-action: pan-x pan-y pinch-zoom;
    border-top: 1px solid var(--romance-border);
  }
  body[data-m-page="seating"] .table-delete { opacity: 1 !important; }

  /* Table bottom sheet */
  .m-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(42,38,34,.4); z-index: 500; }
  .m-sheet-backdrop.open { display: block; }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 510;
    background: var(--romance-paper); border-radius: 20px 20px 0 0;
    max-height: 82dvh; overflow-y: auto; transform: translateY(100%);
    transition: transform .22s ease-out; padding: 0 18px calc(20px + env(safe-area-inset-bottom));
  }
  .m-sheet.open { transform: translateY(0); }
  .m-sheet .m-sheet-grip { width: 40px; height: 4px; background: var(--romance-border); border-radius: 2px; margin: 10px auto 4px; }
  .m-sheet h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 30px; font-weight: 400; color: var(--romance-wine); margin-top: 6px; }
  .m-sheet .m-sheet-sub { font-size: 15px; color: var(--romance-muted); margin: 2px 0 16px; }
  .m-sheet-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
  .m-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--romance-ink); }
  .m-btn-ghost {
    padding: 9px 16px; border-radius: 20px; border: 1px solid var(--romance-border);
    background: var(--romance-card); color: var(--romance-ink); font-size: 15px; cursor: pointer;
    font-family: 'Inter', sans-serif;
  }
  .m-btn-round-del {
    margin-left: auto; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--romance-blush); background: var(--romance-card); color: var(--romance-wine);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .m-btn-round-del svg { width: 18px; height: 18px; }
  .m-sheet h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 18px; font-weight: 400; color: var(--romance-wine); margin: 18px 0 10px; }
  /* Fixed 4-per-row grid so an 8-seat table reads 4 + 4, chairs centred with
     equal gaps and symmetric distance from the edges at any seat count. */
  .m-chairs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px;
    justify-items: center; align-items: center;
    background: var(--romance-blush-wash); border-radius: 14px; padding: 20px 16px;
  }
  .m-chair {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; font-weight: 600; border: none; font-family: 'Inter', sans-serif;
  }
  .m-chair.filled { background: var(--romance-wine); color: #fff; }
  .m-chair.empty { background: transparent; border: 2px dashed var(--romance-blush); color: var(--romance-wine); font-size: 22px; font-weight: 300; }

  /* ── Reusable inline stepper (seating sheet) ────────────────────────── */
  .m-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--romance-border); border-radius: 8px; overflow: hidden; background: var(--romance-card); height: 36px; }
  .m-stepper input { width: 38px; border: none; text-align: center; font-size: 15px; background: transparent; color: var(--romance-ink); -moz-appearance: textfield; font-family: 'Inter', sans-serif; }
  .m-stepper input::-webkit-outer-spin-button, .m-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .m-stepper input:focus { outline: none; }
  .m-stepper .st { display: flex; flex-direction: column; border-left: 1px solid var(--romance-border); }
  .m-stepper .st button { border: none; background: var(--romance-card); color: var(--romance-muted); width: 24px; flex: 1; cursor: pointer; font-size: 9px; padding: 0; display: flex; align-items: center; justify-content: center; }
  .m-stepper .st button:first-child { border-bottom: 1px solid var(--romance-border); }

  /* ── Shared guest picker (seating) ──────────────────────────────────── */
  .m-picker-backdrop { display: none; position: fixed; inset: 0; background: rgba(42,38,34,.4); z-index: 600; align-items: flex-end; }
  .m-picker-backdrop.open { display: flex; }
  .m-picker { width: 100%; background: var(--romance-card); border-radius: 18px 18px 0 0; max-height: 76dvh; display: flex; flex-direction: column; overflow: hidden; }
  .m-picker h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; font-weight: 400; color: var(--romance-wine); padding: 18px 18px 6px; }
  .m-picker input { margin: 0 18px 10px; padding: 10px 14px; border: 1px solid var(--romance-border); border-radius: 10px; background: var(--romance-paper); font-size: 15px; outline: none; }
  .m-picker-list { overflow-y: auto; padding: 6px 10px calc(14px + env(safe-area-inset-bottom)); }
  .m-picker-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: none; background: none; border-radius: 10px; cursor: pointer; font-family: 'Inter', sans-serif; }
  .m-picker-item:hover { background: var(--romance-paper); }
  .m-picker-item .av { width: 34px; height: 34px; border-radius: 50%; background: var(--romance-wine); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .m-picker-item .nm { font-size: 15px; color: var(--romance-ink); }
  .m-picker-empty { padding: 26px; text-align: center; color: var(--romance-muted); font-size: 14px; }

  /* ── Fullscreen modals (reuse the desktop guest/confirm/vcf modals) ── */
  .modal-backdrop { padding: 0 !important; align-items: stretch !important; z-index: 700 !important; }
  .modal-backdrop .modal {
    width: 100% !important; max-width: none !important; height: 100dvh; max-height: 100dvh !important;
    border-radius: 0 !important; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  .modal-actions { position: sticky; bottom: 0; background: var(--romance-card); padding-top: 14px; z-index: 2; }
  .modal-actions button { flex: 1; }
  .form-row { grid-template-columns: 1fr !important; }

  /* The shared theme flattens every admin button to a 6px radius
     (body:not(.paper) :is(button, …)). Re-assert the phone shapes here — this
     sheet loads after the theme, so at matching specificity these win. */
  body:not(.paper) :is(.m-btn-pill, .m-chip, .m-btn-dark, .m-btn-ghost) { border-radius: 999px; }
  body:not(.paper) :is(.m-chair, .m-btn-round-del) { border-radius: 50%; }
  body:not(.paper) :is(.m-search-spark, .m-signout, .m-picker-item) { border-radius: 10px; }

  /* Toast sits above the bottom nav. */
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  body.m-modal-open { overflow: hidden !important; }
  body.m-modal-open .m-nav { display: none !important; }
}

/* Login and VCF-import pages: keep them centered/simple, no chrome. */
@media (max-width: 680px) {
  body[data-m-page="index"] { padding: 24px 16px !important; min-height: 100dvh; display: grid !important; place-items: center; }
  body[data-m-page="index"] > .card { width: 100%; max-width: 420px; }
  body[data-m-page="import-guests"] > .card { width: 100%; max-width: 100%; padding: 20px 12px; overflow-x: auto; }
}


/* Allow the new Tasks destination beside Overview without crowding the bar. */
@media (max-width: 680px) {
  .m-nav:has(a[data-key="tasks"]) a { min-width: 44px; padding-inline: 8px; }
  .m-nav:has(a[data-key="tasks"]) a[aria-current="page"] { padding-inline: 12px; }
}