/* ====================================================================
   NadlanShark — mobile shell (≤768px only)
   ====================================================================
   This file provides the universal mobile layer: hamburger button,
   slide-in drawer, bottom tab bar, and a few generic helpers (table-to-
   card, form-row wrap). Everything is gated by @media (max-width: 768px)
   so desktop is byte-identical to before.

   All injected DOM uses the .ms-* prefix to avoid collision with
   existing classes.
   ==================================================================== */

:root {
  --ms-drawer-w: 280px;
  --ms-tabbar-h: 50px;
  --ms-z-tabbar: 9000;
  --ms-z-overlay: 9100;
  --ms-z-drawer: 9200;
  --ms-z-hamburger: 9050;
  --ms-bg: #0c1929;
  --ms-bg-glass: rgba(12, 25, 41, 0.92);
  --ms-bg-elev: #142336;
  --ms-border: rgba(91, 155, 213, 0.25);
  --ms-text: #e2e8f0;
  --ms-text-dim: #9aa5b1;
  --ms-accent: #5b9bd5;
  --ms-accent-soft: rgba(91, 155, 213, 0.15);
}

/* Default state: every .ms-* element is invisible above 768px.
   Belt-and-suspenders — the JS also avoids inserting them above 768px,
   but this guards the case where viewport shrinks and the elements
   already exist in the DOM. */
.ms-hamburger,
.ms-drawer,
.ms-drawer-overlay,
.ms-tabbar,
.ms-map-fab-stack,
.ms-mobile-bar-left,
.ms-mobile-bar-right,
.ms-gear-panel {
  display: none;
}

/* ==================================================================
   MOBILE BREAKPOINT
   ================================================================== */
@media (max-width: 768px) {

  /* ---------- Universal nav transformation ----------
     Hide the existing horizontal .nav-links on every template;
     the mobile shell takes over via the hamburger drawer.
     Also push the remaining content (the logo) to the physical
     LEFT side so it doesn't sit under the hamburger at the
     physical right. In RTL, flex-end maps to the physical left. */
  nav .nav-links {
    display: none !important;
  }
  nav {
    justify-content: flex-end !important;
  }
  /* Trim the right padding so the logo can hug the left edge cleanly */
  nav .nav-brand,
  nav .nav-logo {
    margin: 0 !important;
  }

  /* No bottom tab bar on mobile — body keeps its natural padding. */
  body.ms-drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  /* ---------- Hamburger button ---------- */
  .ms-hamburger {
    display: grid;
    place-items: center;
    position: fixed;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--ms-bg-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ms-border);
    color: #fff;
    z-index: var(--ms-z-hamburger);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }
  .ms-hamburger svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
  }

  /* ---------- Drawer overlay scrim ---------- */
  .ms-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--ms-z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  body.ms-drawer-open .ms-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- Drawer panel (slides from right edge in RTL) ---------- */
  .ms-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--ms-drawer-w);
    max-width: 86vw;
    background: var(--ms-bg);
    border-left: 1px solid var(--ms-border);
    z-index: var(--ms-z-drawer);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
    color: var(--ms-text);
    overflow-y: auto;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.ms-drawer-open .ms-drawer {
    transform: translateX(0);
  }
  .ms-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--ms-border);
  }
  .ms-drawer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--ms-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
  }
  .ms-drawer-greeting {
    font-size: 15px;
    font-weight: 600;
    color: var(--ms-text);
  }
  .ms-drawer-greeting small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--ms-text-dim);
    margin-top: 2px;
  }
  .ms-drawer-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    flex: 1;
  }
  .ms-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    color: var(--ms-text);
    text-decoration: none;
    font-size: 15px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: right;
    cursor: pointer;
    font-family: inherit;
  }
  .ms-drawer-link.is-active {
    background: var(--ms-accent-soft);
    color: var(--ms-accent);
    font-weight: 600;
  }
  .ms-drawer-link:active {
    background: rgba(255, 255, 255, 0.05);
  }
  .ms-drawer-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    font-size: 16px;
  }
  .ms-drawer-divider {
    height: 1px;
    background: var(--ms-border);
    margin: 6px 16px;
  }

  /* ---------- Bottom tab bar ---------- */
  .ms-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--ms-tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ms-bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--ms-border);
    z-index: var(--ms-z-tabbar);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
  }
  body.ms-no-tabbar .ms-tabbar {
    display: none;
  }
  .ms-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--ms-text-dim);
    text-decoration: none;
    font-size: 11px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    font-family: inherit;
  }
  .ms-tabbar-item.is-active {
    color: var(--ms-accent);
  }
  .ms-tabbar-icon {
    font-size: 18px;
    line-height: 1;
  }
  .ms-tabbar-label {
    font-size: 10.5px;
    line-height: 1.1;
  }

  /* ---------- Helpers: forms ---------- */
  /* Phone-row in register.html: select+input row that may overflow on
     very narrow phones. Wrap if the row gets squeezed. */
  .phone-row {
    flex-wrap: wrap;
  }
  @media (max-width: 380px) {
    .phone-row select {
      flex: 0 0 100% !important;
      min-width: 0 !important;
    }
  }

  /* ---------- Helpers: tables → cards ----------
     Opt-in: add class "ms-card-table" on the <table>. Each <td> needs
     data-label="…" so the card view knows what to label each cell with. */
  .ms-card-table thead {
    display: none;
  }
  .ms-card-table,
  .ms-card-table tbody,
  .ms-card-table tr,
  .ms-card-table td {
    display: block;
    width: 100%;
  }
  .ms-card-table tr {
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--ms-bg-elev);
  }
  .ms-card-table td {
    padding: 4px 0;
    border: none;
    font-size: 14px;
  }
  .ms-card-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--ms-accent);
    margin-left: 6px;
  }
  .ms-card-table td[data-label=""]::before,
  .ms-card-table td:not([data-label])::before {
    content: "";
    margin: 0;
  }

  /* ---------- Welcome modal generic safety ---------- */
  .welcome-modal,
  .modal-content {
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* No styles outside the media query — desktop must be untouched. */