/* Celular com cara de app (2026-10-22). Vale só abaixo de 981px; o computador não muda.
   Tabelas viram cartões (rótulos vindos de ux-mobile.js), calendários viram lista por dia,
   toques com pelo menos 44px e campos com 16px (o iPhone dá zoom em campo menor). */
@media (max-width: 980px) {
  /* ---------- Tabelas em cartões ---------- */
  .admin-active :is(.table-wrap, .module-table-wrap):has(> table.ux-card-table) {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .admin-active table.ux-card-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    background: transparent;
  }

  .admin-active table.ux-card-table thead,
  .admin-active table.ux-card-table :is(tr, td):is(.hide, [hidden]) {
    display: none !important;
  }

  .admin-active table.ux-card-table tbody {
    display: grid;
    gap: 10px;
  }

  .admin-active table.ux-card-table tbody > tr {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface-raised);
  }

  .admin-active table.ux-card-table tbody > tr > td {
    display: grid;
    grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 5px 0 !important;
    position: static !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .admin-active table.ux-card-table tbody > tr > td::before {
    content: attr(data-label);
    color: var(--ui-text-dim);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .admin-active table.ux-card-table tbody > tr > td:is([data-label=""], :not([data-label])) {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-active table.ux-card-table tbody > tr > td:is([data-label=""], :not([data-label]))::before {
    display: none;
  }

  .admin-active table.ux-card-table tbody > tr > td:is(:empty, .ux-card-blank) {
    display: none;
  }

  /* A primeira informação da linha é o título do cartão. */
  .admin-active table.ux-card-table tbody > tr:not(.ux-card-note) > td:first-child:not(:has(input[type="checkbox"])) {
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 700;
  }

  .admin-active table.ux-card-table td.cell-money {
    font-weight: 700;
  }

  /* Caixa de seleção da linha (Lançamentos): no canto do cartão; a coluna seguinte vira o título. */
  .admin-active table.ux-card-table tbody > tr:has(> td:first-child > input[type="checkbox"]) {
    position: relative;
  }

  .admin-active table.ux-card-table tbody > tr > td:first-child:has(> input[type="checkbox"]) {
    position: absolute !important;
    top: 10px;
    right: 12px;
    padding: 0 !important;
  }

  .admin-active table.ux-card-table tbody > tr > td:first-child:has(> input[type="checkbox"]) + td {
    padding-right: 40px !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 700;
  }

  .admin-active table.ux-card-table tbody > tr > td:first-child:has(> input[type="checkbox"])::before {
    display: none;
  }

  /* Ações: botões grandes no pé do cartão. */
  .admin-active table.ux-card-table tbody > tr > td:is(.cell-actions, :last-child:has(button, .btn, a.btn)) {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 6px;
    padding-top: 10px !important;
    border-top: 1px solid var(--ui-border) !important;
  }

  .admin-active table.ux-card-table tbody > tr > td:is(.cell-actions, :last-child:has(button, .btn, a.btn))::before {
    display: none;
  }

  .admin-active table.ux-card-table tbody > tr > td:is(.cell-actions, :last-child:has(button, .btn, a.btn)) > *:only-child:is(div, span) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0 !important;
    width: auto !important;
  }

  .admin-active table.ux-card-table tbody > tr > td:is(.cell-actions, :last-child:has(button, .btn, a.btn)):has(> :is(button, .btn) + :is(button, .btn)) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-active table.ux-card-table td :is(button, .btn, a.btn):not(.th-sort-btn) {
    flex: 1 1 auto;
    min-height: 44px;
    width: auto;
    white-space: nowrap;
  }

  .admin-active table.ux-card-table td :is(select, input:not([type="checkbox"]):not([type="radio"])) {
    width: 100%;
    min-width: 0;
  }

  /* "Nenhum registro..." ocupa o cartão inteiro, sem título. */
  .admin-active table.ux-card-table tbody > tr.ux-card-note {
    padding: 18px 14px;
    border-style: dashed;
    background: transparent;
  }

  .admin-active table.ux-card-table tbody > tr.ux-card-note > td {
    display: block;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ui-text-soft);
    font-size: inherit;
    font-weight: 500;
    text-align: center !important;
  }

  .admin-active table.ux-card-table tbody > tr.ux-card-note > td::before {
    display: none;
  }

  .admin-active .report-card {
    min-width: 0;
  }

  /* ---------- Calendários em lista por dia ---------- */
  .admin-active :is(.events-calendar-card, .school-calendar-view, .volunteers-calendar-card) {
    overflow-x: visible;
  }

  .admin-active :is(.events-calendar-grid, .volunteers-calendar-grid),
  .admin-active #schoolCalendarView .events-calendar-grid {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    border: 0;
  }

  .admin-active :is(.events-calendar-weekday, .volunteers-calendar-weekday),
  .admin-active .volunteers-calendar-day.is-empty,
  .admin-active .events-calendar-day.is-other-month,
  .admin-active .events-calendar-day:not(:has(.events-calendar-items)):not(.is-today),
  .admin-active .volunteers-calendar-day:not(.has-events):not(.is-today),
  .admin-active .events-calendar-empty {
    display: none !important;
  }

  .admin-active :is(.events-calendar-day, .volunteers-calendar-day),
  .admin-active #schoolCalendarView .events-calendar-day {
    min-height: 0;
    padding: 12px;
    gap: 8px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: var(--ui-surface);
  }

  .admin-active :is(.events-calendar-day, .volunteers-calendar-day).is-today {
    border-color: var(--ui-accent);
  }

  .admin-active :is(.events-calendar-day-number, .volunteers-calendar-day-head > span) {
    color: var(--ui-text);
    font-size: 0.95rem;
    font-weight: 800;
  }

  .admin-active :is(.events-calendar-day-number, .volunteers-calendar-day-head > span)[data-weekday]::before {
    content: attr(data-weekday) ", ";
  }

  .admin-active :is(.events-calendar-day, .volunteers-calendar-day).is-today :is(.events-calendar-day-number, .volunteers-calendar-day-head > span)::after {
    content: " · hoje";
    color: var(--ui-accent-strong);
  }

  .admin-active .events-calendar-day-count {
    font-size: 0.8rem;
  }

  .admin-active .events-calendar-item {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.92rem;
  }

  .admin-active .volunteers-calendar-day-head {
    min-height: 44px;
  }

  .admin-active .volunteers-calendar-add {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.3rem;
    opacity: 1;
  }

  .admin-active .volunteers-calendar-event {
    min-height: 44px;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .admin-active .volunteers-calendar-event strong {
    font-size: 0.95rem;
    white-space: normal;
  }

  .admin-active .volunteers-calendar-event small {
    font-size: 0.8rem;
    white-space: normal;
  }

  .admin-active .volunteers-calendar-people {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
  }

  .admin-active .volunteers-calendar-people li {
    font-size: 0.82rem;
    white-space: normal;
  }

  .admin-active .volunteers-calendar-grid:not(:has(.has-events))::after,
  .admin-active .events-calendar-grid:not(:has(.events-calendar-items))::after {
    content: "Nada marcado neste mês.";
    padding: 18px 14px;
    border: 1px dashed var(--ui-border);
    border-radius: 14px;
    color: var(--ui-text-soft);
    text-align: center;
  }

  /* ---------- Toques e campos ---------- */
  .admin-active :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
    font-size: 16px;
  }

  .admin-active input:is([type="checkbox"], [type="radio"]) {
    width: 24px;
    height: 24px;
    flex: none;
  }

  .admin-active .mobile-bottom-nav-item span {
    font-size: 0.7rem;
  }

  .admin-active .sidebar-title {
    font-size: 0.75rem;
  }

  .admin-active .church-kpi-card small,
  .admin-active .church-worship-average span {
    font-size: 0.75rem;
  }

  .admin-active .volunteers-calendar-event strong,
  .admin-active .volunteers-calendar-event small {
    overflow: visible;
  }

  #kidsPublicPageLink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Faixa da demonstração: botões com 44px no espaço de 70px que o celular já reserva. */
  .demo-banner {
    row-gap: 3px;
    padding-top: calc(3px + var(--safe-top, 0px));
    padding-bottom: 3px;
    line-height: 1.2;
  }

  .demo-banner-tour,
  .demo-banner-cta {
    min-height: 44px;
  }

  body.is-demo {
    --demo-banner-h: calc(72px + var(--safe-top, 0px));
  }
}

/* Barra do topo no celular (2026-10-23). O ux-system.css (carregado depois do styles.css) deixava a
   barra "sticky" no topo 0: sobrava um vão no alto e, ao rolar, ela subia para baixo da hora do iPhone.
   Agora fica presa ao topo e se estende por trás da hora (--safe-top), como a barra de um app. */
@media (max-width: 720px) {
  .admin-active .topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    min-height: calc(64px + var(--safe-top, 0px));
    padding-top: calc(0.6rem + var(--safe-top, 0px));
    border-width: 0 0 1px;
    border-radius: 0 0 18px 18px;
  }

  .admin-active .topbar.mobile-menu-open {
    max-height: 100svh;
  }

  /* Na demonstração a faixa de cima já cobre a hora; a barra fica logo abaixo dela. */
  body.is-demo.admin-active .topbar {
    min-height: 64px;
    padding-top: 0.6rem;
  }

  body.is-demo.admin-active .app-shell {
    padding-top: calc(var(--demo-banner-h) + 72px);
  }

  body.is-demo.admin-active .topbar.mobile-menu-open {
    max-height: calc(100svh - var(--demo-banner-h));
  }

  /* Menu aberto: nome na linha de cima, Tema e Sair lado a lado com a mesma largura. */
  .admin-active .topbar.mobile-menu-open .session-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .admin-active .topbar.mobile-menu-open #sessionUser {
    grid-column: 1 / -1;
    padding: 0.2rem 0.15rem;
    color: var(--ui-text-soft);
  }

  .admin-active .topbar.mobile-menu-open .session-box :is(.theme-switcher, .theme-switcher-btn, #logoutBtn) {
    width: 100%;
    min-height: 44px;
    margin: 0;
    justify-content: center;
    justify-self: stretch;
  }
}

/* Cartões e campos que passavam da largura da tela (relato do Jorge em 2026-10-24, Escalas › Disponibilidade). */
@media (max-width: 980px) {
  /* No Safari do iPhone, data, mês e hora têm largura mínima própria e saem do cartão. */
  .admin-active :is(input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"], input[type="week"]) {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .admin-active :is(input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"], input[type="week"])::-webkit-date-and-time-value {
    text-align: left;
  }

  .admin-active :is(label, .dash-filters-grid > *, .volunteers-auto-grid > *) {
    min-width: 0;
  }

  /* Kids › Operação: no cartão o botão "Mais" fica à esquerda; alinhado pela direita, o menu saía da tela. */
  .admin-active .kids-live-more-menu {
    right: auto;
    left: 0;
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 640px) {
  /* A "coluna 2" dos botões só existe nos cartões de equipe e de escala (avatar/data na coluna 1);
     nos outros cartões ela criava uma coluna a mais e espremia o conteúdo. */
  .admin-active :not(.volunteers-team-card, .volunteers-schedule-card) > .volunteers-card-actions {
    grid-column: auto;
    justify-content: flex-start;
  }

  .admin-active .volunteers-card .section-title {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .admin-active .volunteers-card .section-title > :is(h3, h4) {
    min-width: 0;
    flex: 1 1 100%;
  }

  .admin-active .volunteers-chip {
    white-space: nowrap;
  }
}