/* Eclessio UX layer: consistent desktop, tablet and app-like mobile behavior. */
:root {
  --ux-radius-sm: 10px;
  --ux-radius: 16px;
  --ux-radius-lg: 22px;
  --ux-touch: 44px;
  --ux-content: 1600px;
  --ux-shadow: 0 14px 38px rgba(0, 0, 0, .18);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, .btn, a.btn { touch-action: manipulation; }
:is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary, #a8ca4a) 38%, transparent);
  outline-offset: 2px;
}

/* Login */
.login-screen { min-height: 100svh; }
.login-shell { width: min(1080px, calc(100% - 32px)); overflow: hidden; }
.login-card { display: flex; flex-direction: column; justify-content: center; }
.login-card :is(input, button) { min-height: var(--ux-touch); }
.google-signin-button .btn-165 { width: min(100%, 280px); }

/* Public experience */
.tenant-app-shell,
.public-catalog-shell,
.public-event-registration-page { overflow-x: clip; }
.tenant-app-tile,
.tenant-app-icon-btn,
.tenant-copy-btn { min-height: var(--ux-touch); }
.tenant-app-tile { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tenant-app-tile:hover { transform: translateY(-2px); box-shadow: var(--ux-shadow); }
.tenant-landing-details { width: min(var(--ux-content), 100%); margin-inline: auto; }

/* Authenticated shell */
.admin-active .app-shell { width: 100%; min-width: 0; }
.admin-active .topbar {
  position: sticky;
  top: 0;
  z-index: 110;
  border-radius: 0 0 var(--ux-radius-lg) var(--ux-radius-lg);
}
.admin-active :is(.app-grid, .module-panel) { width: min(var(--ux-content), 100%); margin-inline: auto; }
.admin-active :is(.content-stack, .cells-content-stack, .school-content-stack, .events-content-stack, .users-content-stack, .volunteers-content-stack) { min-width: 0; }
.admin-active :is(.panel, .dashboard-card, .report-card) { border-radius: var(--ux-radius); }
.admin-active :is(.module-page-header, .finance-reports-header) { gap: 16px; }
.admin-active :is(.module-page-header, .finance-reports-header) h1,
.admin-active :is(.module-page-header, .finance-reports-header) h2 { text-wrap: balance; }
.admin-active :is(.btn, button, select, input[type="date"], input[type="time"]) { min-height: var(--ux-touch); }
.admin-active :is(input, select, textarea) { max-width: 100%; border-radius: var(--ux-radius-sm); }
.admin-active textarea { resize: vertical; }
.admin-active label { min-width: 0; }

/* Side navigation */
.admin-active :is(.sidebar, .cells-sidebar, .school-sidebar, .events-sidebar, .users-sidebar, .volunteers-sidebar) {
  align-self: start;
  top: 92px;
  border-radius: var(--ux-radius);
}
.admin-active :is(.sidebar, .cells-sidebar, .school-sidebar, .events-sidebar, .users-sidebar, .volunteers-sidebar) button {
  min-height: var(--ux-touch);
}

/* Filters, forms and actions */
.admin-active :is(.dash-filters, .tx-filters, .events-form-panel, .settings-overview-panel) { border-radius: var(--ux-radius); }
.admin-active :is(.dash-filters-grid, .tx-filters-grid, .users-filters-grid, .grid-form) > * { min-width: 0; }
.admin-active :is(.module-actions, .module-page-actions, .modal-actions, .tx-filter-actions, .finance-dashboard-actions) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-active .message:not(:empty) { padding: 10px 12px; border-radius: var(--ux-radius-sm); }

/* Tables retain every action without crushing columns. */
.admin-active :is(.table-wrap, .module-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.admin-active :is(table, .table, .module-table) { width: 100%; }
.admin-active :is(table, .table, .module-table) th { white-space: nowrap; }
.admin-active :is(table, .table, .module-table) td { vertical-align: middle; }

/* Dialogs */
.admin-active .modal-overlay { padding: 20px; overscroll-behavior: contain; }
.admin-active .modal-card {
  width: min(760px, 100%);
  max-height: min(88svh, 920px);
  overflow: auto;
  border-radius: var(--ux-radius-lg);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}
.admin-active .modal-header { position: sticky; top: 0; z-index: 2; }
.admin-active .sticky-form-actions { bottom: 0; z-index: 2; }
.admin-active .cells-people-add-modal-card { width: min(560px, 100%); }
.admin-active #cellsPeopleAddForm { grid-template-columns: 1fr; }
.admin-active .cells-people-add-message { grid-column: 1 / -1; margin: 0; min-height: 20px; }
.admin-active .cells-people-add-message:empty { display: none; }
.admin-active .cells-people-add-message.error { color: #ef6b62; }
.admin-active #cellsPeopleAddForm .modal-actions { grid-column: 1 / -1; }

/* Fast attendance: large checkbox targets on desktop and phone. */
.admin-active .attendance-check-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ux-touch);
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}
.admin-active .attendance-check-control:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary, #a8ca4a) 64%, transparent);
  background: color-mix(in srgb, var(--primary, #a8ca4a) 13%, transparent);
}
.admin-active .attendance-check-control:has(input:disabled) { cursor: default; opacity: .68; }
.admin-active .attendance-check-control input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--primary, #a8ca4a);
}
.admin-active .attendance-check-label { font-weight: 700; white-space: nowrap; }
.admin-active .attendance-check-all { min-height: 36px; padding-block: 4px; }
.admin-active .attendance-check-hint { margin: 8px 0 12px; color: var(--muted, #84909b); font-size: .88rem; }
.admin-active .attendance-check-table td[data-label="Observações"] input { width: 100%; min-width: 160px; }

/* Tablet */
@media (max-width: 980px) {
  .login-shell { width: min(680px, calc(100% - 24px)); grid-template-columns: 1fr; }
  .login-hero { min-height: auto; }
  .admin-active :is(.app-grid, .cells-module-grid, .school-module-grid, .events-module-grid, .users-module-grid, .volunteers-module-grid) { grid-template-columns: 1fr; }
  .admin-active :is(.sidebar, .cells-sidebar, .school-sidebar, .events-sidebar, .users-sidebar, .volunteers-sidebar) { position: static; top: auto; }
  .tenant-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* App-like phone layout */
@media (max-width: 720px) {
  :root { --ux-radius: 14px; --ux-radius-lg: 20px; }
  body { overflow-x: hidden; }
  body.admin-active { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

  .login-screen { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .login-shell { width: 100%; min-height: calc(100svh - 24px); border-radius: 24px; }
  .login-hero { display: none; }
  .login-card { min-height: calc(100svh - 24px); padding: 28px 22px; }
  .login-card h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .login-card .btn[type="submit"], .google-signin-button .btn-165 { width: 100%; }

  .tenant-app-topbar { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 30; }
  .tenant-app-content { padding-inline: 14px; }
  .tenant-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tenant-app-tile { min-width: 0; padding: 16px 12px; border-radius: 18px; }
  .tenant-app-tile strong, .tenant-app-tile small { overflow-wrap: anywhere; }
  .tenant-landing-details { padding-inline: 12px; }
  .tenant-landing-section, .tenant-landing-showcase { border-radius: 20px; }
  .tenant-landing-giving-grid, .tenant-landing-services-grid, .public-catalog-grid { grid-template-columns: 1fr; }
  .tenant-app-modal { align-items: end; padding: 0; }
  .tenant-app-modal-card { width: 100%; max-height: 92svh; border-radius: 24px 24px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }

  .admin-active :is(.app-grid, .module-panel) { padding-inline: 10px; }
  .admin-active :is(.content-stack, .cells-content-stack, .school-content-stack, .events-content-stack, .users-content-stack, .volunteers-content-stack) { gap: 10px; }
  .admin-active :is(.panel, .dashboard-card, .report-card) { padding: 15px; border-radius: 16px; }
  .admin-active :is(.module-page-header, .finance-reports-header) { align-items: stretch; flex-direction: column; }
  .admin-active :is(.module-page-header, .finance-reports-header) h1 { font-size: clamp(1.45rem, 7vw, 2rem); }
  .admin-active :is(.module-actions, .module-page-actions, .modal-actions, .tx-filter-actions, .finance-dashboard-actions) { align-items: stretch; display: grid; grid-template-columns: 1fr; }
  .admin-active :is(.module-actions, .module-page-actions, .modal-actions, .tx-filter-actions, .finance-dashboard-actions) > :is(button, .btn, a) { width: 100%; }
  .admin-active :is(.dash-filters-grid, .tx-filters-grid, .users-filters-grid, .grid-form, .events-form-row, .subscription-checkout-grid) { grid-template-columns: 1fr !important; }
  .admin-active :is(.kpis, .finance-kpi-grid, .compact-kpi-grid, .stats-grid, .volunteers-stats-grid, .events-analytics-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .admin-active :is(.kpi, .stat-card) { min-width: 0; padding: 13px; }
  .admin-active :is(.kpi, .stat-card) strong { font-size: clamp(1.15rem, 6vw, 1.7rem); }

  .admin-active :is(.table-wrap, .module-table-wrap) { margin-inline: -15px; padding-inline: 15px; }
  .admin-active :is(table, .table, .module-table) { min-width: 680px; }
  .admin-active :is(table, .table, .module-table) th,
  .admin-active :is(table, .table, .module-table) td { padding: 11px 10px; }

  .admin-active .attendance-check-table { display: block; min-width: 0 !important; }
  .admin-active .attendance-check-table thead,
  .admin-active .attendance-check-table thead tr,
  .admin-active .attendance-check-table tbody { display: block; width: 100%; }
  .admin-active .attendance-check-table thead th { display: none; }
  .admin-active .attendance-check-table thead .attendance-check-all-cell {
    display: flex;
    justify-content: flex-end;
    padding-inline: 0;
  }
  .admin-active .attendance-check-table .attendance-person-row {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 14px;
  }
  .admin-active .attendance-check-table .attendance-person-row td {
    display: grid;
    grid-template-columns: minmax(88px, .55fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border: 0;
  }
  .admin-active .attendance-check-table .attendance-person-row td::before {
    content: attr(data-label);
    color: var(--muted, #84909b);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .admin-active .attendance-check-table td[data-label="Observações"] input { min-width: 0; }
  .admin-active .attendance-check-table tbody > tr:not(.attendance-person-row) { display: block; }
  .admin-active .attendance-check-table tbody > tr:not(.attendance-person-row) td { display: block; width: 100%; }

  .admin-active .modal-overlay { align-items: end; padding: 0; }
  .admin-active .modal-card {
    width: 100%;
    max-width: none;
    max-height: 94svh;
    margin: 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .admin-active .modal-card::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 22%, transparent);
  }
  .admin-active .modal-header { padding-top: 10px; }
  .admin-active .subscription-banner { width: calc(100vw - 28px); }

  .admin-active :is(.events-calendar-card, .school-calendar-view, .volunteers-calendar-card) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-active :is(.events-calendar-grid, .volunteers-calendar-grid) { min-width: 680px; }
}

@media (max-width: 420px) {
  .tenant-app-grid { grid-template-columns: 1fr 1fr; }
  .admin-active :is(.kpis, .finance-kpi-grid, .compact-kpi-grid, .stats-grid, .volunteers-stats-grid, .events-analytics-grid) { grid-template-columns: 1fr; }
  .admin-active #sessionUser { max-width: 54vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}