/* ============================================================
   Manage booking (/manage/{token}) — ported from _design/booking/screens/manage.html.
   Shares theme.css tokens + booking.css (.appbar / .phone-link / .meta-line / .trip-photo
   + the Look-B gold accents — same as the deposit page). The demo state-switcher is
   dropped; the server renders exactly ONE state. Mobile-first to 360px; modals become
   bottom-sheets under 576px. Icons are inline Feather SVG (no emoji — owner standard).
   ============================================================ */
.manage-body { background: radial-gradient(900px 420px at 50% -8%, #e7f4ff, transparent 60%), var(--bg-blue); min-height:100vh; }
.mng-wrap { max-width:600px; margin:0 auto; padding:1.75rem 0 4rem; }
.mng-wrap .trip-photo { height:140px; }

/* App-bar brandmark. The design ref's .brandmark/.bm-logo/.bm-ctx are NOT constrained
   in the deployed theme.css, so pin the logo size here (mirrors the deposit page's small
   appbar logo) — otherwise the full-size emblem fills the top of every page. */
.appbar .brandmark { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; min-width:0; }
.appbar .bm-logo { height:36px; width:auto; display:block; flex:none; }
.appbar .bm-ctx { font-family:'Farro',sans-serif; font-weight:700; color:var(--navy); font-size:.95rem; white-space:nowrap; }

/* deposit / balance tiles */
.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.status-tile { border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; }
.status-tile .st-k { font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.status-tile .st-v { font-family:'Farro',sans-serif; font-size:1.3rem; color:var(--navy); }

/* policy explainer + tone variants (refund-confirm strip reuses .policy.ok-tone) */
.policy { display:flex; gap:.7rem; align-items:flex-start; background:var(--bg-blue); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; font-size:.9rem; color:var(--ink-soft); }
.policy svg { flex:none; color:var(--cyan-ink); margin-top:1px; }
.policy b { color:var(--navy); }
.policy.ok-tone { background:var(--ok-soft); border-color:#cdeedd; color:#1c6b46; }
.policy.ok-tone svg, .policy.ok-tone b { color:#1c6b46; }
.policy.warn-tone { background:var(--warn-soft); border-color:#f0dcb6; color:#8a5a14; }
.policy.warn-tone svg { color:#a9741d; } .policy.warn-tone b { color:#6f4a10; }

/* action cards */
.action-card { display:flex; gap:1rem; align-items:center; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:all .15s; }
.action-card .ac-ico { width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--bg-blue);color:var(--navy); }
.action-card .ac-txt b { color:var(--navy); display:block; } .action-card .ac-txt small{ color:var(--ink-soft); }
.action-card .ac-btn { margin-left:auto; }

/* inside-cutoff banner */
.cutoff-banner { display:flex; gap:.7rem; align-items:flex-start; background:var(--warn-soft); border:1px solid #f0dcb6; border-radius:var(--r); padding:1rem 1.1rem; color:#8a5a14; font-size:.92rem; }
.cutoff-banner svg { flex:none; color:#a9741d; margin-top:1px; }
.cutoff-banner b{ color:#6f4a10; }

/* modal / bottom-sheet */
.sheet-overlay { position:fixed; inset:0; background:rgba(20,28,46,.5); backdrop-filter:blur(3px); z-index:90; display:none; align-items:center; justify-content:center; padding:1rem; }
.sheet-overlay.open { display:flex; }
.sheet { background:#fff; border-radius:20px; max-width:460px; width:100%; box-shadow:var(--shadow-lg); overflow:hidden; max-height:92vh; display:flex; flex-direction:column; }
.sheet-head { padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.sheet-head h4 { margin:0; }
.sheet-body { padding:1.3rem; overflow-y:auto; }
.sheet-foot { padding:1rem 1.3rem; border-top:1px solid var(--line); display:flex; gap:.6rem; }
.x-btn { background:none;border:0;color:var(--ink-faint);cursor:pointer;line-height:0;padding:.2rem; }
.x-btn:hover { color:var(--navy); }
.sheet-foot .btn[disabled] { opacity:.55; }

/* mini calendar */
.mc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.mc-month { font-family:'Farro',sans-serif; font-weight:700; color:var(--navy); }
.mc-nav { width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer; display:grid;place-items:center; }
.mc-nav:hover:not(:disabled){ border-color:var(--navy); }
.mc-nav:disabled { opacity:.35; cursor:not-allowed; }
.mc-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:5px; }
.mc-dow span{ text-align:center; font-size:.62rem; font-weight:800; color:var(--ink-faint); }
.mc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; min-height:210px; }
.mc-cell { aspect-ratio:1; border-radius:9px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:.85rem; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.mc-cell.empty{ visibility:hidden; cursor:default; } .mc-cell.dis{ background:#f4f6fa; color:#c2cbd8; cursor:not-allowed; border-color:#eef1f6; }
.mc-cell.open:hover{ border-color:var(--navy); }
.mc-cell.sel{ background:var(--navy); border-color:var(--navy); color:#fff; }
.mc-loading { grid-column:1 / -1; text-align:center; color:var(--ink-soft); font-size:.85rem; padding:1.5rem 0; }

/* toast */
.mng-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:.8rem 1.3rem; border-radius:999px; font-weight:700; box-shadow:var(--shadow-lg); opacity:0; transition:all .3s; z-index:120; pointer-events:none; font-size:.9rem; max-width:90vw; text-align:center; }
.mng-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Look B — gold accents to match the deposit page */
body[data-look="b"] .mc-cell.sel { background:var(--gold); border-color:var(--gold); color:#fff; }

@media (max-width:575px){
  .mng-wrap { padding:1.1rem 0 2.5rem; }
  .status-grid { grid-template-columns:1fr; }
  .action-card { flex-wrap:wrap; gap:.7rem .9rem; padding:1rem; }
  .action-card .ac-txt { flex:1 1 60%; min-width:0; }
  .action-card .ac-btn { margin-left:0; flex:1 1 100%; }
  .action-card .ac-btn.btn { width:100%; }
  .sheet { border-radius:16px 16px 0 0; align-self:flex-end; max-height:88vh; }
  .sheet-foot { flex-direction:column-reverse; }
  .sheet-foot .btn { width:100%; }
}