/* WPM CRM responsive usability layer — loaded last. */
html, body { max-width: 100%; overflow-x: hidden; }
.app-layout, .main-content, #main-content { min-width: 0; max-width: 100%; }
.table-mobile-scroll, .table-scroll-wrapper, .overflow-x-auto { max-width: 100%; }
.table-mobile-scroll, .table-scroll-wrapper, .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
/* Muted operational text must remain readable on the near-black workspace. */
#main-content .text-gray-500, #main-content .text-gray-600 { color: #9ca3af !important; }

/* Customer detail modal's tab bar — components.css sets the shared .tab-bar
 * to `gap: 0` with no spacing between a trigger's own icon and its label
 * either, so with 6 tabs (Overview/Payments/Projects/Devices/Confirmations/
 * Activity) on a narrow screen everything runs together with no visual
 * separation at all. Scoped to .customer-detail-tabs (the only place this
 * markup is used) rather than touching the shared .tab-bar/.tab-trigger. */
.customer-detail-tabs { gap: .35rem; }
.customer-detail-tabs .tab-trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  scroll-snap-align: start;
  /* Flex items shrink below their content's natural width by default
   * (min-width:auto only protects unshrinkable content, and text isn't
   * that) — with 6 tabs, that let every label collapse well below what
   * "Confirmations" etc. actually need, so it visually spilled over into
   * the next tab uncontained instead of the bar just scrolling. */
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .app-layout, .main-content, #main-content { width: 100%; overflow-x: hidden; }
  #main-content > .p-6 { width: 100%; max-width: 100%; padding: 1rem !important; }

  /* Page titles and actions must stack instead of pushing controls off-screen. */
  .responsive-page-header {
    width: 100%;
    min-width: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.875rem !important;
  }
  .responsive-page-header > h1,
  .responsive-page-header > div:first-child { min-width: 0; }
  .responsive-actions {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    flex: 0 1 auto !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }
  .responsive-actions > .input,
  .responsive-actions > input.input {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }
  .responsive-actions > select.input {
    flex: 1 1 12rem;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
  }
  .responsive-actions > button { flex: 0 0 auto; }
  .responsive-stats { flex-wrap: wrap; gap: 0.5rem 1rem !important; line-height: 1.35; }

  /* Date range becomes a compact, reachable two-column form. */
  .schedule-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
    align-items: center;
  }
  .schedule-actions .input { width: 100% !important; min-width: 0; }
  .schedule-actions button { grid-column: 1 / -1; width: 100%; }

  /* Human-sized tap targets and iOS-safe form text (prevents focus zoom). */
  #main-content button,
  .mobile-topbar button,
  .sidebar button { min-height: 44px; }
  #main-content button[class*="px-2"],
  #main-content button[title]:not(.btn-primary):not(.btn-secondary) { min-width: 44px; }
  #main-content input:not([type="checkbox"]):not([type="radio"]),
  #main-content select,
  #main-content textarea,
  .modal-mobile-full input:not([type="checkbox"]):not([type="radio"]),
  .modal-mobile-full select,
  .modal-mobile-full textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
  #main-content input[type="checkbox"],
  #main-content input[type="radio"] { width: 24px !important; height: 24px !important; }

  /* Mobile dialogs use the dynamic viewport and keep every action reachable. */
  .modal-mobile-full {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .fixed.inset-0 > .card,
  .fixed.inset-0 > .modal-panel {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    overflow-y: auto;
  }
  .toast-stack { left: 0.5rem; right: 0.5rem; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .toast { min-width: 0; max-width: 100%; width: 100%; }
}


/* Mobile modal viewport and touch-target guard */
@media (max-width: 640px) {
  .fixed.inset-0.z-50 {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .fixed.inset-0.z-50 button,
  .fixed.inset-0.z-50 input:not([type="checkbox"]):not([type="radio"]),
  .fixed.inset-0.z-50 select,
  .fixed.inset-0.z-50 textarea {
    min-height: 44px;
  }
  .fixed.inset-0.z-50 button {
    min-width: 44px;
  }
}


/* Mobile persistent-modal touch-target guard */
@media (max-width: 640px) {
  #quotations-modal-container button,
  #quotations-modal-container input:not([type="checkbox"]):not([type="radio"]),
  #quotations-modal-container select,
  #quotations-modal-container textarea,
  #project-add-modal-container button,
  #project-add-modal-container input:not([type="checkbox"]):not([type="radio"]),
  #project-add-modal-container select,
  #project-add-modal-container textarea,
  #project-modal-container button,
  #project-modal-container input:not([type="checkbox"]):not([type="radio"]),
  #project-modal-container select,
  #project-modal-container textarea,
  #showroom-modal-container button,
  #showroom-modal-container input:not([type="checkbox"]):not([type="radio"]),
  #showroom-modal-container select,
  #showroom-modal-container textarea {
    min-height: 44px;
  }
  #quotations-modal-container button,
  #project-add-modal-container button,
  #project-modal-container button,
  #showroom-modal-container button {
    min-width: 44px;
  }
}


/* Mobile product-modal touch-target guard */
@media (max-width: 640px) {
  #main-content .fixed.top-0.left-0.right-0.bottom-0 button {
    min-width: 44px;
    min-height: 44px;
  }
}


/* WhatsApp Inbox — phone-first chat workspace */
.wa-inbox-shell, .wa-inbox-workspace, .wa-inbox-workspace > * { min-width: 0; }
.wa-chat-contact-actions { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.wa-phone-action { display: inline-flex; align-items: center; gap: .375rem; min-height: 36px; padding: .35rem .6rem; border-radius: 9999px; background: rgb(20 83 45); color: #ecfdf5; font-size: .75rem; white-space: nowrap; }
.wa-phone-action:hover { background: rgb(22 101 52); color: #fff; }

@media (max-width: 639px) {
  .wa-inbox-shell { padding-inline: .5rem; padding-bottom: .5rem; height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - 1rem) !important; }
  .wa-inbox-titlebar { align-items: flex-start; }
  /* Single scrollable row instead of wrapping — wrapping pushed the actual
     conversation list/chat pane down by 2-3 extra lines' worth of pills
     (Connected/Lead Bot/Sign Out), leaving too little screen for messages. */
  #wa-status-bar { width: 100%; display: flex; flex-wrap: nowrap; gap: .375rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #wa-status-bar::-webkit-scrollbar { display: none; }
  #wa-status-bar > * { margin-left: 0 !important; flex-shrink: 0; white-space: nowrap; }
  .wa-inbox-filters { overflow-x: hidden; }
  .wa-inbox-filter-search { min-width: 0; flex-wrap: wrap; }
  .wa-inbox-filter-search .input { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  .wa-inbox-filter-search button { min-height: 44px; }
  .wa-inbox-filters .min-w-max { min-width: 0; }
  .wa-inbox-filters input[type="text"] { min-width: 0; font-size: 16px; }
  .wa-inbox-workspace { gap: 0; min-width: 0; }
  #wa-conv-list, #wa-chat-pane { width: 100%; max-width: 100%; min-width: 0; }
  #wa-chat-pane { height: 100%; }
  .wa-chat-header { align-items: flex-start; padding: .5rem; }
  .wa-chat-back, .wa-chat-header-action { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .wa-chat-contact-actions { width: 100%; flex-wrap: wrap; gap: .375rem; }
  .wa-phone-action { flex: 1 1 10rem; min-height: 44px; justify-content: center; font-size: .875rem; }
  #wa-msgs { padding: .5rem; scroll-padding-bottom: 1rem; }
  .wa-chat-composer { padding: .5rem; background: rgb(17 24 39); }
  .wa-chat-composer input { min-width: 0; min-height: 48px; font-size: 16px; }
  .wa-chat-composer .wa-send-button { min-width: 48px; min-height: 48px; }
}


/* iPhone: let the conversation picker use the full available workspace height. */
@media (max-width: 639px) {
  #wa-conv-list { align-self: stretch; height: 100%; max-height: none; display: flex; flex-direction: column; }
  .wa-conv-list-end { margin-top: auto; }
  .wa-filter-toggle { min-height: 44px; }
}


/* WhatsApp Inbox media: previews stay readable and contained on phone-sized chat bubbles. */
#wa-msgs .wa-media-image { display:block; width:min(100%, 300px); margin:0 0 .5rem; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:.75rem; background:#111827; }
#wa-msgs .wa-media-image img { display:block; width:100%; max-height:340px; object-fit:cover; }
#wa-msgs .wa-media-video { width:min(100%, 320px); margin:0 0 .5rem; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:.75rem; background:#111827; }
#wa-msgs .wa-media-video video { display:block; width:100%; max-height:360px; background:#000; }
#wa-msgs .wa-media-audio { display:flex; align-items:center; gap:.5rem; width:min(100%, 320px); margin:0 0 .5rem; padding:.55rem .65rem; border:1px solid rgba(255,255,255,.16); border-radius:.75rem; background:rgba(17,24,39,.6); }
#wa-msgs .wa-media-audio audio { min-width:0; flex:1; max-width:100%; height:32px; }
#wa-msgs .wa-media-open { display:inline-flex; align-items:center; gap:.35rem; margin:.45rem .6rem .55rem; color:#93c5fd; font-size:.75rem; text-decoration:underline; }
#wa-msgs .wa-media-audio .wa-media-open { margin:0; white-space:nowrap; }
#wa-msgs .wa-media-file { display:flex; align-items:center; gap:.65rem; width:min(100%, 320px); margin:0 0 .5rem; padding:.7rem; color:inherit; border:1px solid rgba(255,255,255,.16); border-radius:.75rem; background:rgba(17,24,39,.6); text-decoration:none; }
#wa-msgs .wa-media-file:hover { background:rgba(31,41,55,.92); }
#wa-msgs .wa-media-file > .fa-file-pdf { color:#f87171; }
#wa-msgs .wa-media-file > .fa-file-excel { color:#4ade80; }
#wa-msgs .wa-media-file > .fa-file-word { color:#60a5fa; }
#wa-msgs .wa-media-file-text { min-width:0; flex:1; display:flex; flex-direction:column; }
#wa-msgs .wa-media-file-text strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8125rem; }
#wa-msgs .wa-media-file-text small { margin-top:.1rem; opacity:.68; font-size:.6875rem; }
#wa-msgs .wa-media-download { opacity:.72; }
@media (max-width:639px) { #wa-msgs .wa-media-image, #wa-msgs .wa-media-video, #wa-msgs .wa-media-audio, #wa-msgs .wa-media-file { width:100%; max-width:300px; } #wa-msgs .wa-media-image img { max-height:300px; } }