/* ============================================================================
 * MOBILE.CSS – responsive overrides for app.html, account.html, differential
 * Breakpoints: 760px (mobile), 520px (small mobile), 400px (tiny)
 * Strategy: single-column, full-screen overlays, 44px+ touch targets
 * ============================================================================ */

/* ===== UNIVERSAL – apply to all viewports ===== */
img, svg { max-width: 100%; height: auto; }
* { box-sizing: border-box; }
button, a, input, select, textarea { -webkit-tap-highlight-color: rgba(124,77,255,0.15); }

/* Disable horizontal scroll globally */
html, body { overflow-x: hidden; }

/* ============================================================================
 * MOBILE BREAKPOINT (≤760px) – phones + small tablets
 * ============================================================================ */
@media (max-width: 760px) {

  /* ===== TOPBAR ===== */
  #topbar {
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  #topbar .logo,
  #topbar .logo a img,
  #topbar .topbar-logo {
    width: auto !important;
    max-width: 130px !important;
    max-height: 36px !important;
  }
  /* Hide mode-switch labels on small screens – keep icons only */
  #topbar .mode-switch button {
    padding: 0 10px !important;
    height: 38px !important;
    font-size: 12px !important;
    margin-left: 4px !important;
  }
  #topbar .mode-switch button + button {
    margin-left: 4px !important;
  }
  #topbar .mode-switch button .btn-icon {
    margin-right: 4px !important;
  }
  /* Hide patient name in topbar mode-switch on mobile (will appear in panel) */
  #topbar .mode-switch button[onclick*="patient"] span:not(.btn-icon),
  #topbar .mode-switch button#mode-patient span:not(.btn-icon) {
    display: none !important;
  }

  /* Topbar account/notif controls compact */
  #topbar .controls {
    gap: 6px !important;
    margin-right: 0 !important;
  }
  .topbar-user {
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 4px !important;
  }
  .topbar-user .user-name {
    display: none !important;
  }
  .topbar-user .user-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  /* Notif bell button compact */
  #notification-bell, .notif-bell-btn {
    width: 40px !important;
    height: 40px !important;
  }
  /* Dropdowns full-width with margin */
  #notificationsdropdown,
  #account-dropdown {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
  }

  /* Reset desktop padding-left compensation – mobile #left is slide-over,
     not fixed-pinned to layout. Body content takes full width. */
  #app {
    padding-left: 0 !important;
  }

  /* ===== ICD TREE PANEL (#left) – slide-over from left ===== */
  #left {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    width: 88vw !important;
    max-width: 360px !important;
    min-width: 0 !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    z-index: 1500 !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  }
  /* Default: tree visible if NOT collapsed */
  body:not(.tree-collapsed) #left {
    transform: translateX(0);
  }
  /* Backdrop when tree open on mobile */
  body:not(.tree-collapsed)::before {
    content: "";
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1499;
    backdrop-filter: blur(2px);
  }
  /* Tree toggle ribbon – visible on mobile bottom-right */
  #tree-toggle-ribbon {
    bottom: 80px !important;
    right: 12px !important;
    top: auto !important;
  }

  /* ===== MAIN CONTENT ===== */
  #main, #right, .main-wrap {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 12px !important;
  }
  #diagnosis-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
    padding: 8px !important;
  }
  #diagnosis-layout > * {
    width: 100% !important;
  }

  /* ===== DRAWER (#drawer) – full-screen slide from right ===== */
  :root {
    --drawer-width: 100vw;
  }
  #drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 16px !important;
    border-left: none !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
  }
  #drawer.closed {
    right: -100vw !important;
  }
  /* Drawer close X – bigger touch target */
  #drawer-close-x,
  #drawer .drawer-close-x,
  #drawer-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Hide desktop drawer-toggle on mobile (drawer is full-screen, close inside) */
  #drawer-toggle {
    display: none !important;
  }
  /* Drawer body scroll lock (paired with JS) */
  body.drawer-open-mobile {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  /* Drawer backdrop */
  body.drawer-open-mobile::after {
    content: none; /* drawer is full-screen, no backdrop needed */
  }

  /* Drawer symptom rows – bigger touch targets */
  .dr-sym-row {
    padding: 10px 12px !important;
    font-size: 13px !important;
    min-height: 44px !important;
    align-items: center !important;
  }
  .dr-sym-required-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .dr-section-label-row {
    padding: 8px 10px !important;
  }
  /* Drawer tabs full width */
  #drawer-tabs {
    flex-wrap: nowrap !important;
  }
  #drawer-tabs button,
  .drawer-tab {
    padding: 12px 8px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }

  /* ===== PATIENT PANEL (#patient-panel) – full-screen modal ===== */
  #patient-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 9998 !important;
  }
  #patient-panel.pinned {
    width: 100vw !important;
    height: auto !important;
    max-height: 70vh !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: 14px 14px 0 0 !important;
    transform: translateX(0) !important;
    left: 0 !important;
  }
  .pp-panel-body {
    padding: 12px !important;
  }
  .pp-grid,
  #patient-panel .pp-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ===== AUTOCOMPLETE / SUGGESTIONS ===== */
  #suggestions, .autocomplete-suggestions, .ac-suggestions {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
  }
  #symptom-input, .symptom-input, input[type="text"], input[type="search"] {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* ===== QUICKSWITCH PILL – hide on mobile ===== */
  #qs-toggle, #quickswitch, .quickswitch-pill {
    display: none !important;
  }

  /* ===== BOTTOM ACTION BAR ===== */
  #bottom-action-bar, .bottom-action-bar {
    padding: 8px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  #bottom-action-bar button, .bottom-action-bar button {
    min-height: 44px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  /* ===== MODALS – full-screen on mobile ===== */
  .np-modal-box,
  .fs-modal-content,
  .acc-del-card,
  #acc-confirm-modal > div[role="dialog"],
  .modal-content,
  .modal-card {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }
  /* Modal padding compact */
  .np-modal-box,
  .fs-modal-content {
    padding: 16px !important;
  }
  /* Modal action buttons stack */
  .np-modal-actions,
  .fs-modal-actions,
  .acc-del-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .np-modal-actions button,
  .fs-modal-actions button,
  .acc-del-actions button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* ===== DIFFERENTIAL VIEW ===== */
  #differential-view, #diff-medium {
    padding: 12px !important;
  }
  .diff-search-card {
    padding: 12px !important;
  }
  .diff-search-card input {
    font-size: 16px !important;
  }
  .diff-block-wrap {
    padding: 12px !important;
  }
  .diff-block-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  /* Hit area bump for diff-block-close */
  .diff-block-close::before {
    content: "";
    position: absolute;
    inset: -8px;
  }

  /* ===== WIZARDS – inline mobile fixes ===== */
  .wiz, .wiz-shell, .wiz-panel {
    padding: 0 !important;
  }
  .wiz > div:not(.wiz-stepper) {
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
  .iq-two-col, .wiz-two-col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .speech-check-row,
  .psych-check-row,
  .wiz-check-row {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  .deep-btn, .wiz-yn-btn, .psych-yn-btn {
    min-height: 44px !important;
    min-width: 64px !important;
  }

  /* ===== ACCOUNT PAGE ===== */
  /* Settings sidebar → top nav scrolling */
  .settings-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(167, 139, 250, 0.25) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-direction: row !important;
    padding: 8px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .settings-sidebar .sidebar-logo-area,
  .settings-sidebar .sidebar-logout-btn {
    display: none !important;
  }
  .settings-sidebar .sidebar-nav-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .settings-body {
    flex-direction: column !important;
    padding: 0 !important;
  }
  .settings-section {
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Account cards → single column */
  .acc-card,
  .acc-row,
  .acc-row-pass-discreet,
  .acc-grid,
  #account .acc-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .acc-card {
    padding: 16px !important;
  }
  .acc-info-row, .acc-form-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .acc-info-row label, .acc-form-row label {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .acc-info-row input, .acc-info-row select, .acc-info-row textarea {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Settings topbar (account page) */
  #topbar.settings-topbar {
    padding: 0 12px !important;
    height: 56px !important;
  }
  #topbar.settings-topbar .controls {
    gap: 6px !important;
  }
  #topbar.settings-topbar .acc-topbar-help {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  #topbar.settings-topbar .acc-topbar-help span:not(.acc-topbar-help-circle) {
    display: none !important;
  }

  /* Billing settings grid */
  .bs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .bs-card {
    padding: 16px !important;
  }
  .bs-cycle-list {
    gap: 8px !important;
  }
  .bs-cycle-opt {
    padding: 12px !important;
    flex-wrap: wrap !important;
  }

  /* ===== TYPOGRAPHY ===== */
  body { font-size: 14px; }
  h1 { font-size: 22px !important; line-height: 1.25; }
  h2 { font-size: 19px !important; line-height: 1.3; }
  h3 { font-size: 16px !important; line-height: 1.35; }

  /* ===== FORMS – prevent iOS zoom ===== */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ===== TOOLTIPS – disable on touch ===== */
  [title]:hover::after,
  [data-tooltip]:hover::after {
    display: none !important;
  }
}

/* ============================================================================
 * SMALL MOBILE (≤520px) – narrow phones
 * ============================================================================ */
@media (max-width: 520px) {

  /* Wizard stepper labels hide – circles only */
  .wiz-step-label {
    display: none !important;
  }
  .wiz-step {
    min-width: auto !important;
    flex: 0 0 auto !important;
  }
  .wiz-stepper {
    gap: 6px !important;
    padding: 8px !important;
  }
  .wiz-stepper line, .wiz-stepper .wiz-step-line {
    flex: 1 1 auto !important;
  }

  /* Mode-switch pills – show icons only */
  #topbar .mode-switch button span:not(.btn-icon) {
    display: none !important;
  }
  #topbar .mode-switch button {
    padding: 0 10px !important;
    min-width: 38px !important;
  }
}

/* ============================================================================
 * TINY MOBILE (≤400px) – iPhone SE 1st gen, very narrow
 * ============================================================================ */
@media (max-width: 400px) {

  /* Wizard nav buttons stack vertically */
  .wiz-nav, .wiz-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .wiz-btn-primary, .wiz-btn-secondary {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 20px !important;
  }
  .wiz-nav-left {
    width: 100% !important;
    justify-content: space-between !important;
    display: flex !important;
    gap: 8px !important;
  }
  .wiz-nav-left button {
    flex: 1 1 auto !important;
  }

  /* Topbar logo even smaller */
  #topbar .logo, #topbar .topbar-logo {
    max-width: 100px !important;
  }

  /* Modal action buttons */
  .np-modal-actions button,
  .fs-modal-actions button {
    font-size: 13px !important;
  }
}

/* ============================================================================
 * DARK MODE PARITY – body.dark-mode mobile rules
 * ============================================================================ */
@media (max-width: 760px) {
  body.dark-mode #patient-panel,
  body.dark-mode #drawer,
  body.dark-mode #left {
    background: #1e1e2e !important;
  }
  body.dark-mode body:not(.tree-collapsed)::before {
    background: rgba(0, 0, 0, 0.6) !important;
  }
}

/* ============================================================================
 * PRINT – ensure mobile rules don't leak into print
 * ============================================================================ */
@media print {
  #left, #drawer, #topbar, #patient-panel, #qs-toggle {
    display: none !important;
  }
}