/* CRM V86 mobile emergency layout
   Desktop and laptop rules remain unchanged. */

@media (max-width: 1023px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body, #main, #content, #content > .page {
    box-sizing: border-box !important;
  }

  #main,
  body.sidebar-collapsed #main {
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #sidebar,
  body.sidebar-collapsed #sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(320px, 88vw) !important;
    min-width: 0 !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    z-index: 500 !important;
    overflow: hidden !important;
  }

  #sidebar.mobile-open,
  body.sidebar-collapsed #sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  #sidebar-overlay {
    z-index: 490 !important;
    background: rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(2px) !important;
  }

  #sidebar .sidebar-logo {
    min-height: 74px !important;
    padding: 10px 16px !important;
  }

  #sidebar .sidebar-logo-img {
    width: 150px !important;
    max-width: 150px !important;
    max-height: 54px !important;
  }

  #sidebar .sidebar-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 12px 20px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #sidebar .nav-section {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
  }

  #sidebar .nav-label {
    display: block !important;
    padding: 0 8px 7px !important;
    font-size: 9px !important;
  }

  #sidebar .nav-item {
    width: 100% !important;
    min-height: 46px !important;
    margin: 2px 0 !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #sidebar .nav-item .nav-icon {
    width: 26px !important;
    min-width: 26px !important;
    margin-right: 10px !important;
  }

  #sidebar .sidebar-footer {
    padding: 12px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  #content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #content > .page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #content .tbl-wrap,
  #content .table-wrap,
  #content [class*="table-wrap"],
  #content [class*="list-wrap"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }

  #content table {
    max-width: none !important;
  }

  #detail-panel,
  .detail-panel {
    left: 8px !important;
    right: 8px !important;
    top: 72px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --crm-mobile-gap: 10px;
    --crm-mobile-radius: 14px;
    --crm-mobile-touch: 44px;
  }

  body {
    background: #f5f7fb !important;
    min-height: 100dvh !important;
  }

  #main {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Compact mobile command bar with search on its own row */
  #topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 180 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 104px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px 42px !important;
    grid-template-rows: 42px 42px !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(14px) !important;
  }

  #hamburger-btn {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  #topbar .page-title {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #topbar .hub-quick-add {
    display: inline-flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
  }

  #topbar .topbar-actions {
    display: contents !important;
  }

  #topbar .topbar-utility-icons,
  #topbar .hub-assistant-chip,
  #topbar .hub-inline-btn {
    display: none !important;
  }

  #topbar .notif-btn,
  #topbar .hub-notif-btn {
    display: inline-flex !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  #topbar .hub-account-chip {
    display: inline-flex !important;
    grid-column: 5 !important;
    grid-row: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }

  #topbar .hub-account-name,
  #topbar .hub-account-caret {
    display: none !important;
  }

  #topbar .hub-account-avatar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }

  #topbar .search-wrap,
  #topbar .hubspot-search {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
  }

  #topbar .search-wrap input,
  #topbar .hubspot-search input {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding-left: 40px !important;
    padding-right: 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  #topbar .search-icon {
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #topbar .search-results {
    top: calc(100% + 6px) !important;
    max-height: min(52vh, 360px) !important;
    border-radius: 14px !important;
  }

  #content {
    padding: 10px 10px calc(78px + env(safe-area-inset-bottom)) !important;
    overflow-y: visible !important;
  }

  #mobile-bottom-nav {
    display: block !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    z-index: 450 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -8px 28px rgba(15,23,42,.10) !important;
  }

  #mobile-bottom-nav .mbn-item {
    min-width: 0 !important;
    font-size: 9px !important;
    padding: 5px 2px !important;
  }

  #mobile-bottom-nav .mbn-icon {
    font-size: 19px !important;
  }

  #mobile-more-sheet {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    max-height: 68dvh !important;
    padding: 14px !important;
    overflow-y: auto !important;
    border: 1px solid #e1e8f0 !important;
    border-radius: 18px !important;
    z-index: 460 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #mobile-more-sheet button {
    min-height: 78px !important;
    padding: 10px 5px !important;
    border-radius: 12px !important;
  }

  /* Common page layout */
  #content .page > .section-header,
  #content .page > .crm-unified-command-header,
  #page-allappointments .crm-appt-command-header {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-radius: var(--crm-mobile-radius) !important;
  }

  #content .section-title,
  #content .crm-unified-command-header .section-title,
  #page-allappointments .section-title {
    font-size: 20px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
  }

  #content .section-sub {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  #content .section-header > div:last-child,
  #content .crm-unified-command-actions,
  #content .crm-appt-command-actions,
  #content .card-header > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #content .section-header > button,
  #content .section-header > div:last-child > button,
  #content .section-header > div:last-child > .btn,
  #content .crm-unified-command-actions .btn,
  #content .crm-appt-command-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--crm-mobile-touch) !important;
    height: var(--crm-mobile-touch) !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }

  #content .card,
  #content .clinic-card,
  #content .settings-section,
  #content .crm-inline-filter-panel,
  #content .crm-patient-filter-panel,
  #content .billing-filter-panel,
  #content .crm-unified-filter-panel,
  #content .cal-sync-section {
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: var(--crm-mobile-radius) !important;
  }

  #content .card-header {
    align-items: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  #content .card-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #content .grid4,
  #content .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #content .grid2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #content .metric-card,
  #content .stat-block {
    min-width: 0 !important;
    min-height: 88px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  #content .metric-val,
  #content .stat-block-val {
    font-size: 21px !important;
  }

  #content .metric-label,
  #content .stat-block-label {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  /* Forms and filters */
  #content .form-row,
  #content .crm-inline-filter-grid,
  #content .billing-filter-grid,
  #content .all-appt-filter-grid,
  #content .crm-unified-filter-grid,
  #content .therapy-filter-grid,
  #content #page-labtests .filter-bar,
  #content .therapy-booking-grid,
  #content .therapy-date-time-row,
  #content .med-shopify-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  #content .form-group,
  #content .crm-filter-field,
  #content .crm-unified-filter-field,
  #content .billing-filter-grid > div,
  #content .all-appt-filter-grid > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  #content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #content select,
  #content textarea,
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .modal select,
  .modal textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  #content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #content select,
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .modal select {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }

  #content textarea,
  .modal textarea {
    min-height: 96px !important;
    border-radius: 12px !important;
  }

  #content label,
  #content .crm-filter-label,
  #content .crm-unified-filter-label {
    line-height: 1.25 !important;
  }

  #content .filter-bar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #content .filter-bar > *,
  #content .filter-select,
  #content .filter-bar .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  #content .crm-u-sort-wrap,
  #content .crm-patient-sort-wrap,
  #content .all-appt-sort-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  #content .crm-u-sort-btn,
  #content .crm-patient-sort-btn,
  #content .all-appt-sort-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 11px !important;
  }

  #content .crm-u-sort-menu,
  #content .crm-patient-sort-menu,
  #content .all-appt-sort-menu {
    left: 0 !important;
    right: auto !important;
    width: min(100%, 300px) !important;
    max-width: calc(100vw - 40px) !important;
  }

  /* All Appointments */
  #page-allappointments .crm-appt-command-center {
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
  }

  #page-allappointments .crm-appt-tabs,
  #page-allappointments .crm-appt-view-tabs,
  #page-allappointments .crm-cal-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 0 8px !important;
  }

  #page-allappointments .crm-appt-tab,
  #page-allappointments .crm-appt-view-btn,
  #page-allappointments .crm-cal-tab {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
  }

  #page-allappointments .crm-appt-header-stats,
  #page-allappointments .crm-appt-mini-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #page-allappointments .crm-appt-stat-chip,
  #page-allappointments .crm-appt-mini-chip {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
  }

  #page-allappointments .tbl-wrap,
  #page-allappointments .all-appt-table {
    display: none !important;
  }

  #page-allappointments #all-appt-mobile-list,
  #page-allappointments:not(.crm-appointments-cards-mode) #all-appt-mobile-list,
  #page-allappointments.crm-appointments-cards-mode #all-appt-mobile-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  #page-allappointments .all-appt-card,
  #page-allappointments .crm-hubspot-appt-card,
  #page-allappointments .all-appt-card-pro {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }

  #page-allappointments .all-appt-card-grid-pro,
  #page-allappointments .crm-hubspot-appt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Patients and Reception */
  #page-patients .section-header > div:last-child,
  #page-receptionist .section-header > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-patients #patient-search {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #page-patients .tbl-wrap,
  #page-receptionist table,
  #page-billing table {
    display: none !important;
  }

  #patients-mobile-list,
  #recept-mobile-list,
  #billing-mobile-list,
  .crm-mobile-card-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .crm-mobile-card {
    min-width: 0 !important;
    padding: 13px !important;
    border-radius: 14px !important;
  }

  .crm-mobile-card-grid,
  #page-patients .crm-patient-v57-mobile-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .crm-mobile-card-cell {
    min-width: 0 !important;
  }

  .crm-mobile-card-cell strong,
  .crm-mobile-card-sub,
  .crm-mobile-card-quickline {
    overflow-wrap: anywhere !important;
  }

  .crm-mobile-card-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .crm-mobile-card-actions .btn,
  .crm-mobile-card-actions .wa-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
  }

  /* Dashboard */
  #page-dashboard .grid2,
  #page-dashboard .grid4 {
    margin-top: 10px !important;
  }

  #page-dashboard .donut-wrap {
    flex-direction: column !important;
    align-items: center !important;
  }

  #page-dashboard .bar-chart {
    overflow-x: auto !important;
    min-height: 150px !important;
  }

  /* Calendar */
  #page-calendar .section-header > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-calendar .cal-view-tabs {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  #page-calendar .card {
    padding: 8px !important;
  }

  #page-calendar .cal-header,
  #page-calendar .therapy-calendar-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  #page-calendar .cal-header > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }

  #page-calendar .cal-grid {
    min-width: 0 !important;
    gap: 3px !important;
  }

  #page-calendar .cal-cell {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 4px 3px !important;
    border-radius: 9px !important;
  }

  #page-calendar .cal-day-header {
    padding: 5px 1px !important;
    font-size: 8px !important;
  }

  #page-calendar .appt-chip {
    max-width: 100% !important;
    padding: 2px 3px !important;
    font-size: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #page-calendar #cal-week-view,
  #page-calendar .week-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #page-calendar .week-grid {
    min-width: 720px !important;
  }

  /* Pipeline and follow-ups */
  #page-pipeline .pipeline {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  #page-pipeline .pipeline-col {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
  }

  #page-followups .grid2 {
    gap: 10px !important;
  }

  #page-followups .task-item {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Medications, labs, therapy, products */
  #page-medications .crm-unified-command-center,
  #page-therapy .crm-unified-command-center,
  #page-labtests .crm-unified-command-center {
    width: 100% !important;
    overflow: visible !important;
  }

  #page-medications .crm-unified-view-tabs,
  #page-therapy .crm-therapy-view-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
  }

  #page-medications .crm-unified-header-stats,
  #page-therapy .crm-unified-header-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  #page-medications .crm-med-list-table,
  #page-therapy .crm-v69-therapy-table,
  #page-labtests table {
    display: none !important;
  }

  #page-medications .crm-med-mobile-list,
  #page-therapy .crm-v69-therapy-mobile-list,
  #page-therapy .therapy-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #page-medications .crm-med-patient-card,
  #page-medications .crm-med-mobile-item,
  #page-therapy .therapy-session-card,
  #page-therapy .therapy-request-card {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    padding: 13px !important;
    border-radius: 14px !important;
  }

  #page-medications .crm-med-actions,
  #page-therapy .therapy-actions,
  #page-labtests .lab-flow-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  #page-medications .crm-med-actions button,
  #page-therapy .therapy-actions button,
  #page-labtests .lab-flow-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
  }

  #page-therapy .therapy-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #page-therapy .therapy-tabs .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  #page-therapy .therapy-calendar-grid {
    display: block !important;
  }

  #page-therapy .therapy-calendar-dayname {
    display: none !important;
  }

  #page-therapy .therapy-calendar-cell {
    min-height: 80px !important;
    margin-bottom: 8px !important;
  }

  #page-products .section-header > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-products #shopify-product-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-products [style*="grid-template-columns"],
  #page-medications #rx-products-grid > div {
    grid-template-columns: 1fr !important;
  }

  /* Billing, reports, resources and settings */
  #page-billing .billing-filter-grid,
  #page-reports .section-header > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-reports .section-header > div:last-child select,
  #page-reports .section-header > div:last-child button {
    width: 100% !important;
  }

  #page-resources .rm-layout,
  #page-resources [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  #page-settings .settings-tab-bar {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }

  #page-settings .settings-tab {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }

  #page-settings .settings-row,
  #page-settings .user-card,
  #page-settings .tpl-card-header {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #page-settings .settings-row {
    flex-direction: column !important;
  }

  #page-settings .settings-row > :last-child {
    align-self: stretch !important;
  }

  #page-settings .user-card {
    flex-wrap: wrap !important;
  }

  #page-settings .user-card-actions {
    width: 100% !important;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Patient file */
  #detail-panel,
  .detail-panel {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 700 !important;
  }

  #detail-panel .dp-header {
    min-height: 70px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  #detail-panel .dp-avatar {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  #detail-panel .dp-name {
    font-size: 17px !important;
  }

  #detail-panel .dp-close {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  #detail-panel .dp-tabs {
    width: 100% !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #detail-panel .dp-tab {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 11px !important;
  }

  #detail-panel .dp-body {
    padding: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Modals */
  .modal-overlay,
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-overlay .modal,
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94dvh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
  }

  .modal .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    padding: 14px !important;
  }

  .modal .modal-body {
    padding: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .modal .modal-footer .btn,
  .modal .modal-footer button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  /* Floating panels and feedback */
  #notif-panel,
  .notif-panel,
  .notification-panel,
  .crm-admin-menu {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 112px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 62dvh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    z-index: 650 !important;
  }

  .crm-ai-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  .crm-ai-compose {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .crm-ai-fab {
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    min-width: 52px !important;
    height: 46px !important;
    padding: 0 12px !important;
    z-index: 440 !important;
  }

  .toast {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 11px 13px !important;
    font-size: 12px !important;
  }

  #api-error {
    left: 10px !important;
    right: 10px !important;
    top: 112px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 420px) {
  #topbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px 40px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    gap: 4px !important;
  }

  #hamburger-btn,
  #topbar .hub-quick-add,
  #topbar .notif-btn,
  #topbar .hub-notif-btn,
  #topbar .hub-account-chip {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  #content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #content .grid4,
  #content .grid3 {
    gap: 7px !important;
  }

  #content .metric-card,
  #content .stat-block {
    padding: 10px !important;
  }

  .crm-mobile-card-grid,
  #page-patients .crm-patient-v57-mobile-grid {
    grid-template-columns: 1fr !important;
  }

  #mobile-more-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  /* Keep title blocks intact when a header also has direct action buttons. */
  #content .section-header > div:first-child,
  #content .crm-unified-command-title,
  #content .crm-appt-command-title {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }
}

/* V87 Billing follow-up mobile fix */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  #page-billing .tbl-wrap,
  #page-billing .card > .tbl-wrap,
  #page-billing table,
  #page-billing .crm-v85-row-followup:not(.crm-mobile-followup-action) {
    display: none !important;
  }

  #page-billing #billing-mobile-list {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  #page-billing .crm-mobile-billing-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  #page-billing .crm-mobile-billing-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  #page-billing .crm-mobile-billing-actions > button,
  #page-billing .crm-mobile-billing-actions > .btn,
  #page-billing .crm-mobile-billing-actions > .wa-btn,
  #page-billing .crm-mobile-billing-actions > .crm-v85-followup-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  #page-billing .crm-mobile-billing-actions .crm-mobile-followup-action {
    grid-column: 1 / -1 !important;
    background: #fff7f3 !important;
    border-color: #ffb8a5 !important;
    color: #d94825 !important;
  }

  #page-billing .crm-mobile-billing-actions .crm-mobile-followup-action:hover,
  #page-billing .crm-mobile-billing-actions .crm-mobile-followup-action:active {
    background: #ff5c35 !important;
    border-color: #ff5c35 !important;
    color: #fff !important;
  }

  .toast {
    top: calc(72px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    z-index: 2147483550 !important;
  }
}