/*
 * mobile.css — MyDoctorDiary
 *
 * SCOPE: Only mobile overrides. Never modifies desktop layout.
 * All rules are inside @media (max-width: 768px) or smaller.
 * Does not override any business logic, only visual layout.
 */

/* ── Mobile brand logo: hidden on desktop ────────────────────────────────── */
.mob-topbar-brand { display: none; }

/* ── Sidebar: fixed to viewport edges so it never scrolls with the page ─── */
/* 100vh changes when mobile browser chrome appears/disappears → sidebar jitters.
   top+bottom:0 with height:auto pins it to the exact visible viewport instead. */
@media (max-width: 768px) {
  .sidebar {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
  }
  /* Lock body scroll while sidebar is open so content behind doesn't drift */
  body.sidebar-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL — base adjustments for all screens ≤ 768px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Top header ────────────────────────────────────────────────────────── */
  .top-header {
    padding: 0 4px 0 0;
    gap: 0;
    position: relative;
  }

  /* Hamburger: 44×44px minimum touch target */
  .mobile-menu-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
  }

  /* Logo centered between hamburger and avatar */
  .mob-topbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* Hide ALL topbar action buttons on mobile — accessible via sidebar + page content */
  .topbar-qc-btn,
  .topbar-new-btn {
    display: none !important;
  }

  /* Hide search bar (already hidden below, keep explicit) */
  .top-search-form { display: none !important; }

  /* User name + chevron in top bar */
  .top-user-name {
    display: none;
  }
  .top-user-chevron {
    display: none;
  }

  /* ── Content padding ────────────────────────────────────────────────────── */
  .content-inner {
    padding: 16px 12px !important;
  }

  /* ── Page header ─────────────────────────────────────────────────────────  */
  .page-header {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .page-header-left {
    width: 100%;
  }
  .page-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .page-actions .btn,
  .page-actions button,
  .page-actions a[class*="btn"] {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  /* Hide verbose text in patient actions, keep short labels */
  .page-actions .btn span { display: none; }

  /* ── Cards & grids ──────────────────────────────────────────────────────── */
  .card { border-radius: 10px !important; }
  .card-body { padding: 14px !important; }
  .card-header { padding: 12px 14px !important; }

  .stats-grid       { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dashboard-grid   { grid-template-columns: 1fr !important; }
  .detail-grid      { grid-template-columns: 1fr !important; }
  .form-row         { flex-direction: column !important; gap: 12px !important; }

  /* ── Tables — horizontal scroll instead of overflow ────────────────────── */
  .table-responsive,
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Modals — full-width on mobile ─────────────────────────────────────── */
  .modal-overlay {
    padding: 12px !important;
    align-items: flex-end !important; /* slide up from bottom */
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  /* Generic white dialog boxes (prescription, schedule, etc.) */
  [style*="border-radius:16px"][style*="padding:28px"],
  [style*="border-radius:20px"][style*="padding:28px"],
  [style*="border-radius:18px"][style*="padding:30px"] {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
  }
  /* Fix modal overlay to slide from bottom */
  .modal-overlay,
  [style*="position:fixed"][style*="align-items:center"][style*="justify-content:center"] {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  /* ── Patient detail specific ─────────────────────────────────────────────  */
  .patient-quick-stats { grid-template-columns: 1fr 1fr !important; }
  .timeline-entry      { padding: 12px !important; }
  .page-title          { font-size: 20px !important; }

  /* ── Consultation form ──────────────────────────────────────────────────── */
  .consult-layout       { flex-direction: column !important; }
  .consult-history-panel{ width: 100% !important; max-height: 300px; overflow-y: auto; }
  .vitals-form-grid     { grid-template-columns: 1fr 1fr !important; }

  /* ── Settings ───────────────────────────────────────────────────────────── */
  .cfg-main-grid        { grid-template-columns: 1fr !important; }
  .cfg-section-layout   { flex-direction: column !important; }
  .cfg-bottom-grid      { grid-template-columns: 1fr !important; }
  .cfg-col-left, .cfg-col-right { width: 100% !important; }

  /* ── Subscription plan cards ────────────────────────────────────────────── */
  .sub-grid { grid-template-columns: 1fr !important; }
  .sub-card { padding: 20px !important; }

  /* ── Checkout page ──────────────────────────────────────────────────────── */
  .ck-wrap { grid-template-columns: 1fr !important; }

  /* ── Patient list ───────────────────────────────────────────────────────── */
  .pt-kpi-row { grid-template-columns: 1fr 1fr !important; }

  /* ── Dashboard ──────────────────────────────────────────────────────────── */
  .dash-hero-illus, .dash-hero-illus-wrap { display: none !important; }
  .quick-actions-row { gap: 8px !important; flex-wrap: wrap !important; }
  .quick-action-item { min-width: calc(50% - 4px) !important; }

  /* ── Calendar ───────────────────────────────────────────────────────────── */
  .calendar-grid { grid-template-columns: 1fr !important; }

  /* ── Import review table ────────────────────────────────────────────────── */
  .import-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── Support page ───────────────────────────────────────────────────────── */
  .support-grid,
  [style*="grid-template-columns:1fr 360px"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* ── Checkout ck-panel stacks below plan summary ─────────────────────────  */
  .ck-panel { margin-top: 0 !important; }

  /* ── Upsell modal ───────────────────────────────────────────────────────── */
  #upsellModal > div {
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  #upsellModal > div > div:last-child { /* plan cards grid */
    grid-template-columns: 1fr !important;
  }

  /* ── Generic inline-style grids ────────────────────────────────────────── */
  /* Subscription plan cards (3 columns → 1) */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Two-column layouts → single */
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 1fr;"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Text adjustments ───────────────────────────────────────────────────── */
  h1, .page-title    { font-size: 20px !important; }
  .card-title        { font-size: 14px !important; }
  .btn               { font-size: 13px !important; }
  .form-label        { font-size: 13px !important; }
  .form-input        { font-size: 14px !important; } /* prevent iOS zoom on focus */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL PHONES — ≤ 480px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Stats: single column */
  .stats-grid,
  .patient-quick-stats { grid-template-columns: 1fr !important; }

  /* Vitals: single column */
  .vitals-form-grid { grid-template-columns: 1fr !important; }

  /* Page title smaller */
  h1, .page-title { font-size: 18px !important; }

  /* Content padding tighter */
  .content-inner { padding: 12px 10px !important; }

  /* Patient detail chip row — wrap */
  .page-meta-chips { flex-wrap: wrap !important; gap: 4px !important; }

  /* Quick actions dashboard: 2 per row */
  .quick-action-item { min-width: calc(50% - 4px) !important; }

  /* Consultation form tabs */
  .consult-type-tabs { flex-wrap: wrap !important; gap: 4px !important; }
  .consult-type-tab  { font-size: 12px !important; padding: 5px 10px !important; }

  /* Card body padding */
  .card-body { padding: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH PAGES (login, register, reset)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .auth-body {
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh;
    padding: 20px 0;
  }
  .auth-container {
    padding: 0 16px !important;
    min-height: unset !important;
    justify-content: center !important;
  }
  .auth-card {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }
  .auth-brand { margin-bottom: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM INPUT ZOOM FIX — iOS zooms in on inputs smaller than 16px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMPORT FLOW — mobile responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Review page: document row stacks vertically */
  .imp-doc-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .imp-doc-row select,
  .imp-doc-row input[type="text"] {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Review patient card: 2-col grid → 1-col */
  #fields_0 > div,
  [id^="fields_"] > div {
    grid-template-columns: 1fr !important;
  }

  /* Import sticky footer: stack on small screens */
  #confirmForm > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #confirmForm > div:last-child .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Summary page attachments: single row wraps */
  .imp-att-row {
    flex-wrap: wrap !important;
  }

  /* Document upload timeline item: truncate long filenames */
  .tl-item.tl-documento .tl-card a[href*="/download"] {
    max-width: 180px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIPS / HELP NOTES — fix móvil (dashboard stat cards y demás)
   En desktop funcionan bien. En móvil fallaban por dos motivos:
   1) white-space:nowrap → el texto largo se sale del ancho y .main-content /
      .content-inner (overflow-x:clip) lo recortaban (texto cortado a la derecha).
   2) .kpi-card:hover{transform} crea un stacking context que ATRAPA el z-index
      del tooltip; como cada .kpi-card es position:relative, la card siguiente se
      pintaba encima y el tooltip quedaba oculto.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* (1) Envolver el texto en varias líneas y limitar el ancho al viewport,
         centrado, para que nunca se salga ni lo recorte el overflow-x:clip. */
  [data-tooltip]::after {
    white-space: normal;
    width: max-content;
    max-width: min(290px, calc(100vw - 32px));
    text-align: center;
  }
  /* (2) Elevar la card activa (que ya es stacking context por el transform del
         hover) para que su tooltip quede por encima de la card siguiente. */
  .kpi-card:hover,
  .kpi-card:focus-within {
    z-index: 60;
  }
}