/*
  Responsividade desktop da tabela de contatos.
  Restringe overflow ao card/tabela e mantem a coluna Acoes acessivel.
*/

@media (min-width: 769px) {
  html:has(body nav.sidebar-navigation a[href="/contatos"].auto-active),
  html:has(body nav.sidebar-navigation a[href="/contatos"][aria-current="page"]),
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  html.auto-premium-menu-expanded body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content,
  html.auto-premium-menu-expanded body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content {
    width: calc(100vw - var(--auto-sidebar-open, 280px)) !important;
    max-width: calc(100vw - var(--auto-sidebar-open, 280px)) !important;
  }

  html.auto-premium-menu-collapsed body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content,
  html.auto-premium-menu-collapsed body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content {
    width: calc(100vw - var(--auto-sidebar-closed, 76px)) !important;
    max-width: calc(100vw - var(--auto-sidebar-closed, 76px)) !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content {
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header.bg-white.border-b.border-gray-200,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header.bg-white.border-b.border-gray-200,
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content > div.p-6.space-y-6,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content > div.p-6.space-y-6 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header.bg-white.border-b.border-gray-200 > div,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header.bg-white.border-b.border-gray-200 > div {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content > div.p-6.space-y-6 > div.bg-white.rounded-xl.shadow-sm.border.border-gray-100,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content > div.p-6.space-y-6 > div.bg-white.rounded-xl.shadow-sm.border.border-gray-100 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content .overflow-x-auto,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content .overflow-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 118, 110, .30) rgba(15, 118, 110, .06) !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content .overflow-x-auto::-webkit-scrollbar,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content .overflow-x-auto::-webkit-scrollbar {
    height: 9px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content .overflow-x-auto::-webkit-scrollbar-track,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content .overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(15, 118, 110, .06) !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content .overflow-x-auto::-webkit-scrollbar-thumb,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content .overflow-x-auto::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(15, 118, 110, .30) !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table.min-w-full.bg-white.border.border-gray-200,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table.min-w-full.bg-white.border.border-gray-200 {
    width: 100% !important;
    min-width: 900px !important;
    table-layout: fixed !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th,
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td {
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th:nth-child(1),
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td:nth-child(1),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th:nth-child(1),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td:nth-child(1) {
    width: 23% !important;
    min-width: 190px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th:nth-child(2),
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td:nth-child(2),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th:nth-child(2),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td:nth-child(2) {
    width: 16% !important;
    min-width: 140px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th:nth-child(3),
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td:nth-child(3),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th:nth-child(3),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td:nth-child(3) {
    width: 22% !important;
    min-width: 175px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th:nth-child(4),
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td:nth-child(4),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th:nth-child(4),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td:nth-child(4) {
    width: 14% !important;
    min-width: 120px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th:nth-child(5),
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td:nth-child(5),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th:nth-child(5),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td:nth-child(5) {
    width: 16% !important;
    min-width: 145px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th:last-child,
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td:last-child,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th:last-child,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td:last-child {
    position: sticky !important;
    right: 0 !important;
    z-index: 3 !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    text-align: right !important;
    background: #ffffff !important;
    box-shadow: -14px 0 22px -20px rgba(15, 23, 42, .48) !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th:last-child,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th:last-child {
    z-index: 4 !important;
    background: #f8fcfb !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table tbody tr:hover td:last-child,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table tbody tr:hover td:last-child {
    background: #f8fcfb !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td:last-child > div.flex.gap-2,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td:last-child > div.flex.gap-2 {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header.bg-white.border-b.border-gray-200,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header.bg-white.border-b.border-gray-200 {
    padding: 18px 20px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header.bg-white.border-b.border-gray-200 > div,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header.bg-white.border-b.border-gray-200 > div {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header.bg-white.border-b.border-gray-200 > div > div:first-child,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header.bg-white.border-b.border-gray-200 > div > div:first-child {
    min-width: 260px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header.bg-white.border-b.border-gray-200 > div > div:last-child,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header.bg-white.border-b.border-gray-200 > div > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header div:has(> button.bg-purple-600):has(> button.bg-green-600):has(> button.btn-primary),
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header div:has(> button.bg-purple-600):has(> button.bg-green-600):has(> button.btn-primary) {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header button.bg-purple-600,
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header button.bg-green-600,
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) header button.btn-primary,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header button.bg-purple-600,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header button.bg-green-600,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) header button.btn-primary {
    min-width: 0 !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content > div.p-6.space-y-6,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content > div.p-6.space-y-6 {
    padding: 24px 20px 32px !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table.min-w-full.bg-white.border.border-gray-200,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table.min-w-full.bg-white.border.border-gray-200 {
    min-width: 840px !important;
  }

  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table th,
  body:has(nav.sidebar-navigation a[href="/contatos"].auto-active) main.main-content table td,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table th,
  body:has(nav.sidebar-navigation a[href="/contatos"][aria-current="page"]) main.main-content table td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}