/* ─── MOBILE OVERRIDES (max-width: 768px) ─────────────────── */
@media (max-width: 768px) {

  /* ─── PREVENT HORIZONTAL OVERFLOW ───────────────────────── */
  html, body, #app {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* ─── TOPBAR ─────────────────────────────────────────────── */
  .topbar-brand { font-size: 15px; }

  /* ─── PAGE HEADER ACTIONS ────────────────────────────────── */
  .ph-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .ph-actions .btn { width: 100%; justify-content: center; }

  /* ─── KPI GRID ───────────────────────────────────────────── */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .kpi { padding: 14px 12px !important; }
  .kpi-label { font-size: 9.5px !important; }
  .kpi-value { font-size: 24px !important; }
  .kpi-icon { width: 34px !important; height: 34px !important; font-size: 16px !important; }
  .kpi-footer { font-size: 10px !important; margin-top: 8px !important; }

  /* ─── DASHBOARD SCHEDULE TABLE → CARD LIST ───────────────── */
  .dash-table thead { display: none !important; }
  .dash-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px !important;
    border-top: 1px solid var(--slate-100) !important;
    gap: 6px !important;
  }
  .dash-table tbody tr:first-child { border-top: none !important; }
  .dash-table tbody td {
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }
  .dash-table tbody td.td-time {
    font-size: 11px !important;
    color: var(--slate-400) !important;
    font-family: var(--font-mono) !important;
  }
  .dash-table tbody td.td-patient { font-size: 14px !important; }
  .dash-table tbody td.td-type-sms {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* ─── SMS ACTIVITY LOG ───────────────────────────────────── */
  .activity-item { padding: 12px 14px !important; }

  /* ─── CALENDAR ───────────────────────────────────────────── */
  .cal-header { display: none !important; }
  .cal-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 8px;
  }
  .cal-day {
    background: white !important;
    border-radius: var(--r-md, 8px) !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: auto !important;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--slate-200);
  }
  .cal-day.empty-day { display: none !important; }
  .cal-day-date {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--slate-900) !important;
    border-bottom: 1px solid var(--slate-100);
    padding-bottom: 8px;
    margin-bottom: 4px !important;
  }

  /* ─── SMS LOGS TABLE → CARD LIST ────────────────────────── */
  .sms-table thead { display: none !important; }
  .sms-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--slate-200) !important;
    gap: 8px !important;
    position: relative !important;
  }
  .sms-table tbody td {
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .sms-table tbody td:nth-child(4) { margin-top: 6px !important; }
  .sms-table tbody td:nth-child(4) div {
    max-width: 100% !important;
    width: 100% !important;
  }
  .sms-table tbody td:nth-child(5) {
    position: absolute;
    right: 16px;
    top: 16px;
  }

  /* ─── PATIENTS TABLE → CARD LIST ────────────────────────── */
  .patients-table thead { display: none !important; }
  .patients-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 14px 16px !important;
    border-top: 1px solid var(--slate-100) !important;
    gap: 6px !important;
    position: relative !important;
  }
  .patients-table tbody td {
    padding: 0 !important;
    border: none !important;
  }
  .patients-table tbody td.pat-name {
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--slate-900) !important;
  }
  .patients-table tbody td.pat-phone {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    color: var(--slate-500) !important;
    flex: 1 !important;
  }
  .patients-table tbody td.pat-actions {
    display: flex !important;
    gap: 6px !important;
  }

  /* ─── APPOINTMENTS TABLE → CARD LIST ────────────────────── */
  .appt-table thead { display: none !important; }
  .appt-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px !important;
    border-top: 1px solid var(--slate-100) !important;
    gap: 6px !important;
  }
  .appt-table tbody tr:first-child { border-top: none !important; }
  .appt-table tbody td {
    padding: 0 !important;
    border: none !important;
  }
  .appt-table tbody td.appt-patient {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--slate-900) !important;
  }
  .appt-table tbody td.appt-time {
    font-size: 11px !important;
    color: var(--slate-400) !important;
    font-family: var(--font-mono) !important;
  }
  .appt-table tbody td.appt-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .appt-table tbody td.appt-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  /* ─── SEARCH BAR ─────────────────────────────────────────── */
  .search-wrap { width: 100% !important; }
  .search-wrap input { width: 100% !important; }
  .search-wrap input:focus { width: 100% !important; }

  /* ─── CARD HEADER ────────────────────────────────────────── */
  .card-header { flex-wrap: wrap; gap: 10px; }

  /* ─── MODALS ─────────────────────────────────────────────── */
  .modal { border-radius: 16px !important; }
  .modal-body { padding: 18px !important; gap: 14px !important; }
  .modal-head { padding: 16px 18px 12px !important; }
  .modal-foot { padding: 14px 18px !important; flex-direction: column !important; }
  .modal-foot .btn { width: 100% !important; justify-content: center !important; }

  /* ─── SETTINGS ───────────────────────────────────────────── */
  .settings-wrap { max-width: 100% !important; }
  .credit-meta { text-align: left !important; }

  /* ─── FORM GRID ──────────────────────────────────────────── */
  .form-grid { grid-template-columns: 1fr !important; }

  /* ─── PWA MOBILE ADJUSTMENTS ──────────────────────────────── */
  .pwa-offline-banner {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .pwa-install-item {
    margin-top: 10px !important;
    padding: 10px 14px !important;
  }
  .ios-install-prompt {
    width: 92% !important;
    max-width: 330px !important;
    bottom: 20px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .ios-prompt-desc {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  .ios-prompt-steps {
    font-size: 12px !important;
    padding-left: 16px !important;
  }
}