/*
 * Mobile shell consistency v2
 *
 * Dashboard is the visual contract for authenticated page chrome:
 * - safe area is owned by .app-shell only;
 * - 16px horizontal gutter / 12px vertical header padding;
 * - 40x40 hamburger;
 * - page icon hidden on mobile;
 * - 14px title / 12px subtitle;
 * - page actions remain in the same header row.
 *
 * This layer is intentionally narrow. It normalizes legacy authenticated
 * headers without touching workspace content or business logic.
 */

@media (max-width: 767px) {
  /* Legacy /index and /equipe headers: same physical box as Dashboard. */
  .app-shell > main > div:first-child:has(.lume-page-title) {
    padding-top: 0 !important;
    flex: 0 0 auto !important;
  }

  .app-shell > main > div:first-child:has(.lume-page-title) > div:first-child {
    padding: 12px 16px !important;
  }

  .app-shell > main > div:first-child:has(.lume-page-title) > div:first-child > div:first-child {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .app-shell > main > div:first-child:has(.lume-page-title) > div:first-child > div:first-child > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* The row containing hamburger + page identity uses Dashboard's 12px gap. */
  .app-shell > main > div:first-child:has(.lume-page-title)
    div:has(> button[aria-label='Abrir menu']):has(.lume-page-title) {
    min-width: 0 !important;
    gap: 12px !important;
  }

  .app-shell > main > div:first-child:has(.lume-page-title) button[aria-label='Abrir menu'] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
  }

  /* Legacy page icon is desktop chrome. Dashboard already hides it on mobile. */
  .app-shell > main > div:first-child:has(.lume-page-title)
    div:has(+ div > .lume-page-title) {
    display: none !important;
  }

  .app-shell > main > div:first-child:has(.lume-page-title) .lume-page-title {
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ui-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: -0.012em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app-shell > main > div:first-child:has(.lume-page-title) .lume-page-subtitle,
  .app-shell [data-central-leads-header='true'] .lume-page-subtitle {
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--ui-text-tertiary) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* The disabled Inbox details affordance was occupying an action slot even
     when there was no selected conversation. Dashboard has no empty action. */
  .app-shell > main > div:first-child:has(.lume-page-title)
    button[aria-label='Mostrar dados operacionais']:disabled {
    display: none !important;
  }

  /* Central de Leads still registers its actions from the workspace. Normalize
     their physical dimensions so the title row is identical to Dashboard. */
  .app-shell [data-central-leads-header-actions='true'] {
    margin-left: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .app-shell [data-central-leads-header-actions='true'] button {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
  }

  .app-shell [data-central-leads-header-actions='true'] button:first-child,
  .app-shell [data-central-leads-header-actions='true'] button:last-child {
    width: 40px !important;
    min-width: 40px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Equipe used a status pill in the global chrome, which could wrap the
     header onto a second row. Status belongs to the workspace on mobile. */
  .app-shell > main > div:first-child:has(.lume-page-title)
    > div:first-child > div:first-child > span {
    display: none !important;
  }

  /* Standalone legacy <header> routes such as Integrações: hide the page icon
     after the hamburger, matching Dashboard and ProductPageHeader. */
  .app-shell > main > header
    button[aria-label='Abrir menu'] + div {
    display: none !important;
  }

  .app-shell > main > header button[aria-label='Abrir menu'] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
  }

  /* Canonical ProductPageHeader routes already match Dashboard. Keep the same
     title metrics explicitly so future utility changes cannot drift them. */
  [data-product-page-header='true'] {
    padding: 12px 16px !important;
  }

  [data-product-page-header='true'] p:first-of-type {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  [data-product-page-header='true'] p + p {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  /* Campaigns: make each campaign read as an operational object rather than a
     generic rounded list row. Scoped by the unique mobile search affordance so
     these rules cannot leak into other product screens. */
  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article:has(button[aria-label^='Ações de ']) {
    min-height: 168px !important;
    overflow: visible !important;
    border-width: 1px !important;
    border-radius: 9px !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.055) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article:has(button[aria-label^='Ações de ']) > button:first-child {
    min-height: 168px !important;
    padding: 20px 20px 21px !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article:has(span[style*='--ui-accent']) {
    border-color: color-mix(in srgb, var(--ui-accent) 72%, transparent) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article:has(span[style*='--ui-success']) {
    border-color: color-mix(in srgb, var(--ui-success) 65%, transparent) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article:has(span[style*='--ui-danger']) {
    border-color: color-mix(in srgb, var(--ui-danger) 60%, transparent) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article h3 {
    margin-top: 16px !important;
    font-size: 19px !important;
    line-height: 24px !important;
    letter-spacing: -0.018em !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article h3 + p {
    margin-top: 5px !important;
    font-size: 14px !important;
    line-height: 21px !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article [aria-label^='Ações de '] {
    border-radius: 8px !important;
  }

  /* Running status feels alive without adding decorative motion elsewhere. */
  .app-shell div:has(> header button[aria-label='Buscar campanhas']) article span[style*='--ui-accent'] {
    width: 8px !important;
    height: 8px !important;
    animation: campaign-live-pulse 1.55s ease-in-out infinite !important;
  }

  /* All primary blue campaign actions must keep white foreground, independent
     of theme token drift. This also fixes the + action on the campaign screen. */
  .app-shell div:has(> header button[aria-label='Buscar campanhas']) [class*='bg-[var(--ui-accent)]'] {
    color: #fff !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) [class*='bg-[var(--ui-accent)]'] svg {
    color: #fff !important;
    stroke: currentColor !important;
  }
}

@keyframes campaign-live-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-accent) 34%, transparent);
  }
  50% {
    opacity: .68;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-accent) 0%, transparent);
  }
}

/* Campaigns desktop: carry the mobile operational-card hierarchy into the
   wide layout instead of falling back to a dense table-like history list. */
@media (min-width: 768px) {
  .app-shell div:has(> header button[aria-label='Buscar campanhas']) [class*='bg-[var(--ui-accent)]'] {
    color: #fff !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas']) [class*='bg-[var(--ui-accent)]'] svg {
    color: #fff !important;
    stroke: currentColor !important;
  }

  /* The campaign collection becomes a breathable card grid. The mobile-only
     siblings remain display:none from the component's responsive utilities. */
  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de ']) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) {
    position: relative !important;
    min-height: 168px !important;
    overflow: visible !important;
    border: 1px solid var(--ui-separator) !important;
    border-radius: 12px !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.045) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']):hover {
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.07) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div > span > span[style*='--ui-accent']) {
    border-color: color-mix(in srgb, var(--ui-accent) 58%, var(--ui-separator)) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div > span > span[style*='--ui-success']) {
    border-color: color-mix(in srgb, var(--ui-success) 52%, var(--ui-separator)) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div > span > span[style*='--ui-danger']) {
    border-color: color-mix(in srgb, var(--ui-danger) 52%, var(--ui-separator)) !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child {
    position: relative !important;
    min-height: 168px !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 20px !important;
  }

  /* Main hit area: status and time occupy the first line; campaign title and
     operational summary sit below with the same hierarchy as the mobile card. */
  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > button:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 128px !important;
    padding: 42px 42px 14px 0 !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > button:first-child > svg:first-child {
    display: none !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > button:first-child > div {
    width: 100% !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > button:first-child > div > p:first-child {
    overflow: visible !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 25px !important;
    letter-spacing: -0.018em !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > button:first-child > div > p:nth-child(2) {
    margin-top: 6px !important;
    overflow: visible !important;
    font-size: 14px !important;
    line-height: 21px !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > span:has(> span[style]) {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    font-size: 12px !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > span:has(> span[style*='--ui-accent']) > span {
    width: 8px !important;
    height: 8px !important;
    animation: campaign-live-pulse 1.55s ease-in-out infinite !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > span:not(:has(> span)) {
    position: absolute !important;
    top: 21px !important;
    right: 54px !important;
    z-index: 2 !important;
    display: block !important;
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > div:last-child {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 4 !important;
  }

  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:first-child > div:last-child > button[aria-label^='Ações de '] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
  }

  /* Expanded executions stay inside the same operational card, separated by a
     single hairline instead of turning the screen back into a table. */
  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de '])
    > div:has(> div button[aria-label^='Ações de ']) > div:nth-child(2) {
    overflow: hidden !important;
    border-top: 1px solid var(--ui-separator) !important;
    border-radius: 0 0 11px 11px !important;
    background: color-mix(in srgb, var(--ui-surface-secondary) 46%, var(--ui-surface)) !important;
  }
}

@media (min-width: 1280px) {
  .app-shell div:has(> header button[aria-label='Buscar campanhas'])
    main > div:has(> div button[aria-label^='Ações de ']) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}