/* Local, offline-safe mobile shell. Tailwind enhances the visual design when available. */
:root { --navy:#0f1218; --gold:#c5a059; --paper:#f8f9fa; --line:#e2e8f0; --safe-bottom:env(safe-area-inset-bottom, 0px); }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; }
body { min-height:100vh; min-height:100dvh; background:var(--paper); }
button, input, select, textarea { font:inherit; }
button { min-height:44px; touch-action:manipulation; }
input, select, textarea { max-width:100%; }
img, video, canvas { max-width:100%; }
#appMain { -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
#mobileBottomNav { display:none; }

@media (max-width: 767px) {
  body { overflow:hidden; }
  body.drawer-open { touch-action:none; }
  body > .flex.h-screen { height:100vh; height:100dvh; }
  header.md\:hidden { display:flex !important; min-height:56px; padding-top:env(safe-area-inset-top, 0px); height:calc(56px + env(safe-area-inset-top, 0px)); }
  #sidebar { width:min(86vw, 320px); height:100vh; height:100dvh; padding-top:env(safe-area-inset-top, 0px); }
  #sidebar.-translate-x-full { transform:translateX(-105%) !important; }
  #sidebar:not(.-translate-x-full) { transform:translateX(0) !important; }
  #overlay:not(.hidden) { display:block !important; }
  #appMain { padding:16px 14px calc(88px + var(--safe-bottom)) !important; }
  #appMain h2 { font-size:1.65rem; line-height:1.2; }
  .view-panel { width:100%; min-width:0; }
  .overflow-x-auto { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  table { max-width:none; }
  input, select, textarea { min-height:46px; }

  #mobileBottomNav {
    position:fixed; display:grid; grid-template-columns:repeat(5, 1fr); left:0; right:0; bottom:0; z-index:35;
    min-height:64px; padding:5px 4px calc(5px + var(--safe-bottom)); background:rgba(15,18,24,.98);
    border-top:1px solid #26303d; box-shadow:0 -5px 18px rgba(15,18,24,.18);
  }
  #mobileBottomNav button { border:0; background:transparent; color:#a8b1c0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:3px 2px; }
  #mobileBottomNav button span { font-size:20px; line-height:1; }
  #mobileBottomNav button small { font-size:10px; letter-spacing:.02em; }
  #mobileBottomNav button.active { color:#e0bd72; }

  [id$="Modal"] > div { max-width:100vw; }
  #paymentModal > div { height:min(94dvh, 900px) !important; }
}

@media (min-width: 768px) and (max-width: 1180px) {
  #sidebar { width:240px !important; }
  #appMain { padding:24px !important; }
}

/* Functional fallback if the online utility stylesheet is unavailable. */
@supports not (height: 100dvh) { body > .flex.h-screen { height:100vh; } }
.hidden { display:none !important; }
.view-panel:not(.active) { display:none; }
.view-panel.active { display:block; }
@media (max-width:767px) {
  .grid { display:grid; }
  .grid-cols-1 { grid-template-columns:minmax(0,1fr); }
  .grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flex { display:flex; }
  .flex-col { flex-direction:column; }
  .flex-1 { flex:1 1 0%; min-width:0; }
  .w-full { width:100%; }
  .overflow-hidden { overflow:hidden; }
}