/* Shared reflow rules. Tables keep their columns and scroll independently. */
:root { --shell-header-height: 4rem; }
html { scroll-padding-top: calc(var(--shell-header-height) + 1rem); }
html.navigation-open { overflow: hidden; }
body { margin: 0; }
.app-shell { min-height: 100dvh; }
.app-shell-main, .app-content, .app-content :where(.grid, .flex) > * { min-width: 0; }
.app-content :where(h1, h2, h3, p, dd, label) { overflow-wrap: anywhere; }
.app-content :where(input, select, textarea) { min-width: 0; max-width: 100%; }
.app-content :where(img, video, audio, iframe) { max-width: 100%; }
.app-content pre { max-width: 100%; overflow-x: auto; }
.responsive-table-scroll { max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.responsive-table-scroll table { min-width: 44rem; }
.app-content [aria-label="Visoes de leads"] > button { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
.app-content [aria-label="Visoes de leads"] { scrollbar-width: thin; padding-bottom: .375rem; }
.app-content [aria-label="Visoes de leads"]::-webkit-scrollbar { display: block; height: 4px; }
.app-content [aria-label="Visoes de leads"]::-webkit-scrollbar-thumb { background: #bfc9c4; border-radius: 1rem; }
:where(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid #00629e; outline-offset: 3px; }
:where(button, a, summary, input, select, textarea) { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 98, 158, .12); }
.skip-content { position: fixed; left: 1rem; top: -6rem; z-index: 100; padding: .75rem 1rem; background: white; color: #00342b; }
.skip-content:focus { top: 1rem; }
.app-header { gap: 1rem; min-height: 4rem; height: auto; }
.app-shell .app-header { z-index: 40; } /* Above table tools (30), below dialogs (50). */
.app-heading { flex: 1; }
.app-header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation-trigger { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #bfc9c4; background: white; color: #00342b; }
.navigation-drawer { margin: 0; padding: 0; width: min(21rem, calc(100vw - 2rem)); max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh; border: 0; background: #f2f4f5; color: #191c1d; overscroll-behavior: contain; }
.navigation-drawer::backdrop { background: rgba(0, 20, 15, .5); }
.navigation-drawer[open] { display: flex; flex-direction: column; }
.navigation-drawer header { display: flex; justify-content: space-between; align-items: center; padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem; border-bottom: 1px solid #bfc9c4; }
.navigation-drawer nav { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem .75rem; }
.navigation-drawer nav a { min-height: 44px; }
.navigation-drawer footer { padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid #bfc9c4; }
.navigation-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.navigation-area-link { display: flex; align-items: center; gap: .5rem; padding: .75rem; font-size: .875rem; font-weight: 600; }
.app-content { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
[role="dialog"] { max-height: calc(100dvh - 2rem); overscroll-behavior: contain; }
.campaign-composer { scroll-padding-block: 9rem 2rem; }
.campaign-toolbar { position: relative; z-index: 30; display: flex; flex-wrap: wrap; }
[data-recipient-columns] > div { z-index: 40; max-height: min(60dvh, 28rem); overflow-y: auto; overscroll-behavior: contain; }
.campaign-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-chat-feed] { overscroll-behavior: contain; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .campaign-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .navigation-trigger { display: inline-flex; }
  .app-header { flex-wrap: wrap; padding-block: .5rem; }
  .app-header-kicker { max-width: 50vw; font-size: 10px; letter-spacing: .08em; }
  .app-header-extras, .app-desktop-user { display: none !important; }
  .app-header-controls { display: flex; margin-left: auto; }
}
@media (max-width: 767px) {
  .app-content { padding-inline: .75rem; }
  .app-content .responsive-table-scroll { border-radius: 0; }
  .app-content :where(section, article, aside)[class~="p-6"] { padding: 1rem; }
  .app-content :where(header, footer)[class~="px-6"] { padding-inline: 1rem; }
  [role="dialog"] { max-width: 100%; overflow-y: auto; }
  .fixed:has(> [role="dialog"]) { padding: .5rem; }
  [data-delivery-scroll] :is(th, td).sticky { position: static; }
  [data-delivery-scroll] { max-height: 65dvh; }
  .campaign-toolbar { flex-direction: column; align-items: stretch; }
  .campaign-toolbar > div:last-child { justify-content: flex-start; }
  [data-recipient-columns] > div { left: 0; right: auto; max-width: calc(100vw - 3rem); }
  #attendance-panel > header, #attendance-form, [data-chat-feed] { padding: 1rem; }
  #attendance-panel > header > div { max-width: 100%; }
  #attendance-panel > header > div:last-child { width: 100%; }
  #attendance-panel > header button { flex: 1; }
  [data-chat-feed] { height: clamp(16rem, 48dvh, 32rem); min-height: 0; }
  #attendance-form [name="kind"] { margin-left: 0; display: block; width: 100%; margin-top: .375rem; }
  #attendance-form [data-chat-attachment] { max-width: 100%; }
  #attendance-form input[type="file"] { display: block; margin: .5rem 0 0; width: 100%; }
}
@media (max-width: 1023px) {
  .app-content section:has(> #lead-search-form) { position: static; }
}
@media (max-width: 639px) {
  :root { --shell-header-height: 8rem; }
  .app-header { padding: max(.5rem, env(safe-area-inset-top)) .75rem .5rem; gap: .5rem; }
  .app-heading { flex-basis: calc(100% - 3.5rem); }
  .app-header-title { font-size: 1rem; }
  .app-header-kicker { max-width: calc(100vw - 5rem); }
  .app-header-controls { flex-basis: 100%; width: 100%; }
  .app-profile-control { width: 100%; }
  #commercial-profile-switcher { flex: 1; width: 100%; max-width: none; height: 44px; }
  [data-commercial-profile-action] { min-width: 44px; min-height: 44px; }
  #app :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
  #app :where(button, summary) { min-height: 44px; }
  #app button { height: auto; padding-block: .625rem; white-space: normal; }
  #app [aria-label="Visoes de leads"] > button { white-space: nowrap; }
  #app button :where(.material-symbols-outlined) { flex-shrink: 0; }
  #app :where(input[type="checkbox"], input[type="radio"]) { min-width: 20px; min-height: 20px; flex-shrink: 0; }
  #campaigns-panel section > header { padding: 1rem; }
  #campaigns-panel header > div > div.inline-flex { max-width: 100%; overflow-wrap: anywhere; align-items: flex-start; }
  #campaigns-panel [data-campaign-action^="toggle-"] { width: 100%; text-align: left; }
  .campaign-toolbar { padding: 1rem; }
  .campaign-toolbar > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
  .campaign-toolbar [data-hide-recipient-phones] { grid-column: 1 / -1; }
  .campaign-toolbar details { min-width: 0; }
  .campaign-toolbar summary { display: flex; align-items: center; }
  [data-composer-backdrop] { padding: 0 !important; }
  .campaign-composer[role="dialog"] { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .campaign-composer > header { position: relative; flex-wrap: wrap; gap: .75rem; padding: max(1rem, env(safe-area-inset-top)) .75rem .75rem; }
  .campaign-composer > header > div:first-child { padding-right: 2.75rem; }
  .campaign-composer > header > div:last-child { width: 100%; flex-wrap: wrap; }
  .campaign-composer [data-campaign-action="close-composer"][title="Fechar"] { position: absolute; top: max(.75rem, env(safe-area-inset-top)); right: .75rem; width: 44px; }
  #campaign-create-form { padding: .75rem .75rem max(1rem, env(safe-area-inset-bottom)); }
  #campaign-create-form > nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  #campaign-create-form [data-composer-tab] { flex-direction: column; align-items: flex-start; gap: .375rem; font-size: 11px; }
  #campaign-create-form [data-composer-tab] .truncate { white-space: normal; }
  #campaign-create-form > footer { flex-direction: column-reverse; }
  #campaign-create-form > footer > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #campaign-create-form > footer > div > :only-child { grid-column: 1 / -1; }
  #campaign-create-form > footer > button { width: 100%; }
  #campaign-create-form :where(section, aside)[class~="p-4"] { padding: .75rem; }
  #campaign-create-form label:has(> [data-content-library-name]),
  #campaign-create-form label:has(> [data-saved-contact]) { flex-basis: 100%; }
  #campaign-create-form [data-save-content], #campaign-create-form [data-save-contact] { width: 100%; }
  #attendance-form [type="submit"] { width: 100%; justify-content: center; }
  #logs-filter { grid-template-columns: minmax(0, 1fr); }
  #logs-results article { padding: .875rem; }
  #toast-root { top: max(.75rem, env(safe-area-inset-top)); right: .75rem; max-width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}