/*
 * 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;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESBORDAMIENTO HORIZONTAL EN MÓVIL ("zoom in" por default) — fix
   Causa raíz: body.app-layout es display:flex; .main-wrapper tenía el min-width:auto
   por defecto, así que NO podía encoger por debajo del min-content de su contenido.
   En estas páginas un elemento no-colapsable propagaba un min-content > ancho de
   pantalla y estiraba todo el shell (.main-wrapper/.top-header/.main-content) más
   allá de 390px → con initial-scale=1 el navegador móvil lo dibujaba 1:1 y se veía
   "con zoom". El cap global vive en .main-wrapper{min-width:0;max-width:100vw}
   (styles.css). Aquí dejamos que el contenido REFLÚYA en vez de desbordar (no se
   oculta nada; escritorio intacto porque todo va dentro de @media ≤768px).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Dashboard: el grid de una columna (1fr == minmax(auto,1fr)) no encogía por su
     hijo flex con min-width:auto → usar minmax(0,1fr) y permitir que las columnas encojan. */
  .dash-main-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-col-left, .dash-col-right { min-width: 0; }

  /* Detalle de paciente: el track 1fr (.detail-main) y las filas del timeline no
     encogían; la fila de acciones (Completar/Ver/Editar/Eliminar) era nowrap y fijaba
     un min-content de ~262px → permitir que envuelva. */
  .detail-grid > .detail-main,
  .detail-grid > .detail-sidebar { min-width: 0; }
  .timeline, .tl-item, .tl-card { min-width: 0; }
  /* El header de la card del timeline (info + botones Completar/Ver/Editar/Eliminar)
     no encogía: .tl-actions es flex-shrink:0. Que el header ENVUELVA → los botones
     bajan a una segunda línea en vez de recortarse (nada se oculta). */
  .tl-card-header { flex-wrap: wrap; gap: 8px; }
  .tl-actions { flex-shrink: 1; flex-wrap: wrap; min-width: 0; }

  /* Nuevo paciente: la tarjeta de voz/IA mantenía 2 columnas en móvil → apilar. */
  #pvCardBody { grid-template-columns: 1fr !important; }
  #pvCardBody > div:first-child { border-right: none !important; border-bottom: 1px solid #F3F4F6; }

  /* Configuración: nombre largo con white-space:nowrap en el panel de almacenamiento
     fijaba el ancho a su texto completo → permitir que envuelva. */
  #storageList [style*="nowrap"] { white-space: normal !important; word-break: break-word; }

  /* Staff: la tabla de roles (table-layout:auto) forzaba el min-content de sus
     columnas → fijar layout al contenedor y permitir wrap de celdas. */
  .role-perms-table { display: table; table-layout: fixed; width: 100%; }
  .role-perms-table th, .role-perms-table td { overflow-wrap: break-word; }
  /* La 1ª columna lleva etiquetas largas; las 3 de roles solo ✓/— → darle más ancho
     para que las palabras envuelvan en los espacios y no se partan a la mitad. */
  .role-perms-table th:first-child, .role-perms-table td:first-child { width: 44%; }
}