/* Mobile Patch v2 (Safari-safe) for PT EMR Simulator
   - Uses transform: translateX(...) (not 'translate:')
   - Positions drawer below sticky topbar; above edu ribbon
   - Adds better touch targets and layout polish
   Place AFTER app/css/styles.css and app/css/sidebar.css
*/

:root {
  --mobile-safe-pad: 12px;
}

/* Desktop defaults: hide site menu and its overlay */
.site-menu {
  display: none;
}
.site-menu-overlay {
  display: none;
}

/* Breadcrumbs: scroll horizontally on small screens */
@media (max-width: 768px) {
  .breadcrumbs {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    /* Horizontal scroll without wrapping */
    padding: 8px var(--mobile-safe-pad);
  }
  .breadcrumbs a {
    display: inline-block;
    padding: 6px 8px;
  }
}

/* Sidebar as off-canvas drawer */
@media (max-width: 900px) {
  /* Outer container rendered by ChartNavigation.js */
  /* Prefer class; keep ID for compatibility */
  .chart-navigation {
    position: fixed;
    top: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: calc(var(--edu-ribbon-h, 24px) + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(86vw, 360px);
    max-width: 92vw;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1100;
    /* Ensure background is opaque; override gradient if needed */
    background: var(--bg, #0b0d10);
    box-shadow: -10px 0 24px rgba(0, 0, 0, 0.35);
    border-left: 1px solid var(--border, #232a36);
    display: flex;
    flex-direction: column;
  }
  .chart-navigation.is-open,
  .chart-navigation.mobile-open {
    transform: translateX(0);
  }

  /* Panel inside drawer */
  .chart-navigation .sidebar-nav-panel {
    height: 100%;
    overflow: auto;
    padding: 10px var(--mobile-safe-pad) 88px;
  }

  /* Visible close control (uses your .btn styles) */
  .chart-navigation .mobile-close {
    position: sticky;
    top: 0;
    display: block;
    background: var(--panel, #141821);
    padding: 10px var(--mobile-safe-pad);
    border-bottom: 1px solid var(--border, #232a36);
    z-index: 1;
  }

  /* Content gets side padding; full width layout */
  main#app,
  #app {
    padding: 0 var(--mobile-safe-pad);
  }

  /* Hamburger visible on mobile */
  .hamburger-btn {
    display: inline-flex !important;
  }
}

/* Full-screen overlay when drawer is open */
@media (max-width: 900px) {
  .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(1px); /* Safari/iOS */
    backdrop-filter: blur(1px);
    z-index: 1090;
    display: none;
  }
  .drawer-overlay.is-visible {
    display: block;
  }
  body.mobile-drawer-open {
    overflow: hidden;
  }
}

/* Site Menu Drawer (mobile header actions in a right-side panel) */
@media (max-width: 900px) {
  .site-menu {
    display: block; /* becomes visible on mobile */
    position: fixed;
    top: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: calc(var(--edu-ribbon-h, 24px) + env(safe-area-inset-bottom, 0px));
    width: min(86vw, 360px);
    max-width: 92vw;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1200;
    background: var(--bg, #0b0d10);
    border-left: 1px solid var(--border, #232a36);
    outline: none;
  }
  .site-menu.is-open {
    transform: translateX(0);
  }
  .site-menu-panel {
    height: 100%;
    overflow: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Make standard buttons stretch full width inside the drawer */
  .site-menu .btn.block {
    width: 100%;
    text-align: center;
  }
  .site-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(1px); /* Safari/iOS */
    backdrop-filter: blur(1px);
    z-index: 1190;
    display: none;
  }
  .site-menu-overlay.is-visible {
    display: block;
  }
}

/* Forms: stack and enlarge touch targets */
@media (max-width: 640px) {
  .form-row,
  .row {
    display: block;
  }
  label {
    display: block;
    margin-bottom: 6px;
  }
  input[type='text'],
  input[type='number'],
  select,
  textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
  }
  .btn {
    min-height: 44px;
  }
}

/* Tables → card rows (opt-in) */
@media (max-width: 640px) {
  table.stack-on-mobile {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  table.stack-on-mobile thead {
    display: none;
  }
  table.stack-on-mobile tr {
    display: block;
    background: var(--panel, #141821);
    border: 1px solid var(--border, #232a36);
    border-radius: 12px;
    padding: 8px 10px;
  }
  table.stack-on-mobile td {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 8px;
    padding: 6px 0;
    border: none;
  }
  table.stack-on-mobile td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted, #8892a6);
  }
}

/* Minor text/spacing tune-ups */
@media (max-width: 480px) {
  .brand-label {
    font-size: 0.875rem; /* 14px */
  }
  .brand-label-suffix {
    display: none;
  }
  .topnav a {
    padding: 8px 10px;
  }
}