/* DYNAMIC STICKY HEADER & OUTSIDER BAR ZERO-OVERLAP ENGINE */
#taptalk-top-header-stack {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  z-index: 10000 !important;
  background: #090d16 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

#taptalk-sticky-sentence-header {
  position: relative !important;
  z-index: 1001 !important;
}

#taptalk-outsider-controls-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  position: relative !important;
  z-index: 1000 !important;
}

#tt-universal-menu-slot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (max-width: 768px) {
  #taptalk-outsider-controls-bar {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  #taptalk-outsider-controls-bar .dropdown button,
  #taptalk-outsider-controls-bar button,
  #taptalk-outsider-controls-bar a {
    font-size: 0.74rem !important;
    padding: 5px 8px !important;
  }
  #taptalk-board-grid-container {
    padding: 190px 8px 90px 8px !important;
    gap: 8px !important;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
  }
}

/* ==========================================================================
   TAPTALK AAC — UNIVERSAL BULLETPROOF MOBILE RESPONSIVE ENGINE v5.0
   ========================================================================== */

html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(56, 189, 248, 0.2);
  touch-action: manipulation;
  margin: 0;
  padding: 0;
}

button, a, input, select, textarea, .btn, .dropdown-item {
  min-height: 38px;
  touch-action: manipulation;
}

/* TABLETS & PHONES (<= 992px) */
@media (max-width: 992px) {
  .crm-container, .table-container, .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* PHONES (<= 768px) */
@media (max-width: 768px) {
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  body {
    padding-bottom: 70px !important;
  }

  .container-fluid, .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100vw !important;
  }

  .card, .glass-card, .modal-dialog, .modal-content {
    max-width: 100% !important;
    width: auto !important;
    border-radius: 16px !important;
  }

  /* Fixed Desktop Width Overrides */
  [style*="width: 700px"], [style*="width: 800px"], [style*="width: 900px"],
  [style*="width: 1100px"], [style*="width: 1140px"], [style*="width: 1400px"],
  [style*="width: 2750px"], [style*="max-width: 1400px"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 3-Pane Webmail into 1-Pane Stack */
  .mail-container {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }
  .mail-sidebar, .mail-list-pane, .mail-view-pane {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #1e293b !important;
  }

  /* Navigation Bars */
  header, nav, .navbar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  /* Communicator Grid on Mobile */
  #taptalk-board-grid-container {
    padding: 190px 8px 90px 8px !important;
    gap: 8px !important;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
  }

  #taptalk-board-grid-container > button, 
  .tt-glossy-tile, 
  .tt-glossy-folder {
    min-height: 110px !important;
    height: 110px !important;
    max-height: 110px !important;
    border-radius: 14px !important;
    padding: 6px 3px !important;
  }

  #taptalk-board-grid-container button strong, 
  .tt-tile-text {
    font-size: 0.8rem !important;
  }

  #taptalk-board-grid-container button span {
    font-size: 1.7rem !important;
  }

  /* Sticky Header Sentence Output */
  #taptalk-sentence-words {
    min-height: 40px !important;
    padding: 4px 6px !important;
    font-size: 0.82rem !important;
  }

  /* Bottom Sticky Buttons Positioning */
  .tt-sticky-bottom-left-human {
    bottom: 12px !important;
    left: 8px !important;
    gap: 4px !important;
    z-index: 9999999 !important;
  }

  .tt-human-whatsapp-single-btn {
    padding: 7px 12px !important;
    font-size: 0.76rem !important;
    border-radius: 999px !important;
  }

  .tt-sticky-chat-btn {
    bottom: 12px !important;
    right: 8px !important;
    padding: 6px 11px !important;
    font-size: 0.74rem !important;
    z-index: 9999999 !important;
  }
}

/* SMALL PHONES (<= 400px) */
@media (max-width: 400px) {
  .tt-human-btn-text {
    display: none !important;
  }
  .tt-human-call-btn::after {
    content: " 085 108 0900" !important;
    font-size: 0.70rem !important;
  }
  .tt-human-whatsapp-btn::after {
    content: " WA" !important;
    font-size: 0.70rem !important;
  }
}

/* ==========================================================================
   GLOBAL STRICT HIGH-CONTRAST LEGIBILITY ENGINE (ZERO LIGHT-ON-LIGHT TEXT)
   ========================================================================== */
.invoice-paper, .invoice-paper * {
  color: #0f172a !important;
}
.invoice-paper h1, .invoice-paper h2, .invoice-paper h3, .invoice-paper h4, .invoice-paper h5, .invoice-paper h6 {
  color: #0284c7 !important;
}
.invoice-paper .text-muted {
  color: #475569 !important;
  font-weight: 600 !important;
}
.invoice-paper .text-secondary {
  color: #334155 !important;
  font-weight: 600 !important;
}
.invoice-paper .text-dark {
  color: #0f172a !important;
  font-weight: 800 !important;
}
.invoice-paper .table {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
.invoice-paper .table th, .invoice-paper .table td {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.invoice-paper .table-light, .invoice-paper .table-light th, .invoice-paper .table-light td {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}
.invoice-paper .table-active, .invoice-paper .table-active td {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  font-weight: 800 !important;
}
.invoice-paper .bg-light, .bg-light-paper {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}
.invoice-paper .bg-light *, .bg-light-paper * {
  color: #1e293b !important;
}
.invoice-paper .badge.bg-primary {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
.invoice-paper .badge.bg-success {
  background-color: #059669 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Modals & Dialogs High-Contrast Header Rules */
.modal-content {
  background-color: #090d16 !important;
  color: #f8fafc !important;
}
.modal-header {
  background-color: #0b1120 !important;
  color: #ffffff !important;
  border-bottom: 1.5px solid #1e293b !important;
}
.modal-header .modal-title, .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6 {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}