/* Shared base styles + theme tokens — Igreja Viva design system.
   Warm-stone neutrals, a marine-blue accent, soft rounded surfaces.

   ONE design language at every width: the soft look the phone app shell
   introduced (rounded cards with a soft shadow instead of hairline boxes,
   12px buttons in the brand colours, segmented pill tabs, a light
   translucent top bar, gentle motion) is the look of the desktop too. Only
   what a finger needs lives in the "App shell" block below lg: the tab bar,
   the floating button, 48px controls, 16px fields, bottom sheets.
   Shapes, by role:
     surface (card, tile, board column)   --app-radius     18px
     control (button, field, menu)        --bs-border-radius 12px (sm 10px)
     choice  (tab, chip, badge, pill)     999px
   Every page loads this before its own stylesheet. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --cg-body-bg: #efe9df;
    --cg-surface: #f9f6ef;
    --cg-surface-muted: #f3eee5;
    --cg-text: #1c1916;
    --cg-text-heading: #1c1916;
    --cg-text-muted: #57524b;
    --cg-border: #e4ded2;
    --cg-border-strong: #d4cdbe;
    --primary-accent: #1f6391;
    --danger-color: #be3a32;
    --cg-accent-muted: rgba(31, 99, 145, 0.10);
    --cg-accent-focus: rgba(31, 99, 145, 0.25);
    --cg-shadow-1: 0 1px 2px rgba(28, 25, 22, 0.06);
    --cg-shadow-2: 0 4px 14px rgba(28, 25, 22, 0.10);

    /* data-viz roles (single-series charts use --series-1 only) */
    --series-1: #2a78d6;
    --viz-grid: rgba(28, 25, 22, 0.08);

    --cg-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cg-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* map Bootstrap 5.3 onto the system (light) */
    --bs-body-bg: var(--cg-body-bg);
    --bs-body-color: var(--cg-text);
    --bs-body-font-family: var(--cg-font-sans);
    --bs-font-sans-serif: var(--cg-font-sans);
    --bs-body-font-size: 0.875rem;
    --bs-emphasis-color: var(--cg-text-heading);
    --bs-heading-color: var(--cg-text-heading);
    --bs-secondary-color: var(--cg-text-muted);
    --bs-secondary-bg: var(--cg-surface);
    --bs-tertiary-bg: var(--cg-surface-muted);
    --bs-border-color: var(--cg-border);
    --bs-border-color-translucent: rgba(28, 25, 22, 0.10);
    --bs-card-bg: var(--cg-surface);
    --bs-card-border-color: var(--cg-border);
    --bs-light: var(--cg-surface-muted);
    --bs-light-rgb: 243, 238, 229;

    --bs-primary: #1f6391;          --bs-primary-rgb: 31, 99, 145;
    --bs-link-color: #1f6391;       --bs-link-color-rgb: 31, 99, 145;
    --bs-link-hover-color: #184c70;
    --bs-success: #2f7d4f;          --bs-success-rgb: 47, 125, 79;
    --bs-warning: #b06a08;          --bs-warning-rgb: 176, 106, 8;
    --bs-danger: #be3a32;           --bs-danger-rgb: 190, 58, 50;
    --bs-info: #2563a8;             --bs-info-rgb: 37, 99, 168;
    --bs-focus-ring-color: rgba(31, 99, 145, 0.25);

    --bs-border-width: 1px;
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 20px;
    --bs-border-radius-pill: 999px;

    /* the soft system (shared by desktop and the phone shell) */
    --app-radius: 18px;
    --app-radius-sm: 12px;
    --app-tabbar-h: 64px;
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --app-shadow-soft: 0 1px 2px rgba(28, 25, 22, 0.04), 0 6px 20px rgba(28, 25, 22, 0.06);
    --app-shadow-lift: 0 2px 4px rgba(28, 25, 22, 0.05), 0 12px 28px rgba(28, 25, 22, 0.10);
    --app-bar-bg: rgba(249, 246, 239, 0.86);
    --cg-accent-hover: #184c70;
    --cg-accent-ink: #fff;
}

/* Touch: kill the browser's double-tap-to-zoom. Members tap options fast on
   a phone; a second tap within ~300ms would otherwise zoom the page. */
html, body { touch-action: manipulation; }
a, button, input, select, textarea, label, [role="button"], .btn, .nav-link, .dropdown-item {
    touch-action: manipulation;
}

body { font-family: var(--cg-font-sans); }
/* The top bar is sticky at every width: anchor jumps and scrollIntoView
   land below it, not under it (auth-nav.js measures --app-topbar-h). */
html { scroll-padding-top: calc(var(--app-topbar-h, 64px) + 12px); }
.stat-value, .kpi-value { font-family: var(--cg-font-mono); font-feature-settings: "tnum" 1; }

[data-bs-theme="dark"] {
    color-scheme: dark;
    --cg-body-bg: #14110e;
    --cg-surface: #1c1916;
    --cg-surface-muted: #232019;
    --cg-text: #ece7e1;
    --cg-text-heading: #f6f3ef;
    --cg-text-muted: #a8a29a;
    --cg-border: #34302a;
    --cg-border-strong: #463f37;
    --primary-accent: #5aa6d6;
    --cg-accent-muted: rgba(90, 166, 214, 0.14);
    --cg-accent-focus: rgba(90, 166, 214, 0.30);
    --cg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cg-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.5);
    --series-1: #3987e5;
    --viz-grid: rgba(255, 255, 255, 0.10);

    --bs-body-bg: var(--cg-body-bg);
    --bs-body-color: var(--cg-text);
    --bs-emphasis-color: var(--cg-text-heading);
    --bs-heading-color: var(--cg-text-heading);
    --bs-secondary-color: var(--cg-text-muted);
    --bs-secondary-bg: var(--cg-surface);
    --bs-tertiary-bg: var(--cg-surface-muted);
    --bs-border-color: var(--cg-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);
    --bs-card-bg: var(--cg-surface);
    --bs-card-border-color: var(--cg-border);
    --bs-light: var(--cg-surface-muted);
    --bs-light-rgb: 35, 32, 25;
    --bs-primary: #5aa6d6;          --bs-primary-rgb: 90, 166, 214;
    --bs-link-color: #5aa6d6;       --bs-link-color-rgb: 90, 166, 214;
    --bs-link-hover-color: #86c0e4;

    --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --app-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.45);
    --app-bar-bg: rgba(28, 25, 22, 0.86);
    --cg-accent-hover: #86c0e4;
    --cg-accent-ink: #0e1a22;
}
[data-bs-theme="dark"] .bg-light { background-color: var(--cg-body-bg) !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--cg-surface-muted);
    color: var(--cg-text);
    border-color: var(--cg-border);
}
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--cg-text); }
[data-bs-theme="dark"] .modal-content { background-color: var(--cg-surface); color: var(--cg-text); }
[data-bs-theme="dark"] .dropdown-menu { background-color: var(--cg-surface); border-color: var(--cg-border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--cg-text); }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: var(--cg-surface-muted); }

/* ---- the top bar: light, sticky, translucent — at every width ----
   The navbar markup keeps Bootstrap's navbar-dark/bg-dark classes (every
   page shares it); the colours here turn it into the same light bar the
   phone shows, so a pastor who uses both sees one app. */
.navbar.bg-dark {
    --bs-navbar-color: var(--cg-text-muted);
    --bs-navbar-hover-color: var(--cg-text-heading);
    --bs-navbar-active-color: var(--primary-accent);
    --bs-navbar-brand-color: var(--cg-text-heading);
    --bs-navbar-brand-hover-color: var(--cg-text-heading);
    position: sticky; top: 0; z-index: 1030;
    min-height: 64px; padding-top: 10px; padding-bottom: 10px;
    background: var(--app-bar-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--cg-border);
    view-transition-name: cg-topbar;
}
.navbar .navbar-brand { display: inline-flex; align-items: center; color: var(--cg-text-heading); }
.navbar .brand-logo { color: var(--primary-accent); margin-right: 10px; display: inline-flex; vertical-align: middle; }
/* The app icon is the favicon itself: the church on the brand tile. */
.brand-icon { display: block; width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.navbar .brand-logo .brand-icon { width: 34px; height: 34px; border-radius: 10px; box-shadow: var(--cg-shadow-1); }
.navbar .brand-name { font-weight: 700; letter-spacing: -0.01em; font-size: 1.1rem; }
/* The right side: the menu (rendered by shared/auth-nav.js), the theme
   toggle and the user menu, on one row; the bell is appended after it. */
.navbar .navbar-right { display: flex; align-items: center; margin-left: auto; gap: 4px; }
.navbar .nav-link {
    padding: 7px 14px; border-radius: 999px; font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.navbar .nav-link:hover, .navbar .nav-link:focus-visible, .navbar .show > .nav-link {
    color: var(--cg-text-heading); background: var(--cg-surface-muted);
}
.navbar .nav-link.active { color: var(--primary-accent); background: var(--cg-accent-muted); font-weight: 600; }
.theme-toggle {
    width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
    color: var(--cg-text-muted);
}
.theme-toggle:hover { color: var(--cg-text-heading); }
.navbar .user-menu-toggle {
    color: var(--cg-text); background: var(--cg-surface); border: 1px solid var(--cg-border);
    padding: 6px 14px; margin-left: 2px;
}
.navbar .user-menu-toggle:hover, .navbar .user-menu-toggle[aria-expanded="true"] { color: var(--cg-text-heading); background: var(--cg-surface-muted); }
.navbar .user-menu-toggle i { color: var(--primary-accent); }

/* ---- "Entrar como": the impersonation banner (shared/auth-nav.js) ----
   While a root works as somebody else, one strong amber bar sits on top of
   every staff page, at every width — never dismissible. It is sticky at
   the very top and PUSHES the sticky top bar down (body.is-impersonating:
   the bar's `top` is the banner's height, which auth-nav.js measures into
   --imp-banner-h and adds to --app-topbar-h for everything sticky below). */
.imp-banner {
    --imp-bg: #f5c95c; --imp-ink: #2b1a00; --imp-edge: #b06a08;
    --imp-btn-bg: #7a4806; --imp-btn-ink: #fff; --imp-btn-hover: #5e3704;
    position: sticky; top: 0; z-index: 1031;
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 6px 16px;
    background: var(--imp-bg); color: var(--imp-ink);
    border-bottom: 2px solid var(--imp-edge);
    font-size: 0.875rem; line-height: 1.3;
}
[data-bs-theme="dark"] .imp-banner {
    --imp-bg: #5c3a06; --imp-ink: #ffe7b0; --imp-edge: #f5c95c;
    --imp-btn-bg: #f5c95c; --imp-btn-ink: #2b1a00; --imp-btn-hover: #ffdb85;
}
.imp-banner .imp-ico { font-size: 1.05rem; flex: 0 0 auto; }
.imp-banner .imp-text { flex: 1 1 auto; min-width: 0; }
.imp-banner .imp-lead-short { display: none; }
.imp-banner .imp-left { white-space: nowrap; }
.imp-banner .imp-back {
    flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-weight: 600;
    background: var(--imp-btn-bg); color: var(--imp-btn-ink); border: 0;
}
.imp-banner .imp-back:hover, .imp-banner .imp-back:focus-visible { background: var(--imp-btn-hover); color: var(--imp-btn-ink); }
.imp-banner .imp-back:focus-visible { outline: 2px solid var(--imp-ink); outline-offset: 2px; }
.imp-banner .imp-back-short { display: none; }
body.is-impersonating .navbar.bg-dark { top: var(--imp-banner-h, 44px); }
/* The target's password is not the root's to change (the API refuses it). */
body.is-impersonating [data-bs-target="#changePasswordModal"],
body.is-impersonating #appSheetPassword { display: none !important; }
@media (max-width: 575.98px) {
    .imp-banner { gap: 8px; padding-left: 12px; padding-right: 12px; font-size: 0.82rem; }
    .imp-banner .imp-lead { display: none; }
    .imp-banner .imp-lead-short { display: inline; }
    .imp-banner .imp-back-long { display: none; }
    .imp-banner .imp-back-short { display: inline; }
}

/* ---- the menu: groups of deep links (shared/auth-nav.js → NAV_MODEL) ----
   A top-level entry is a page (Painel, Ajuda) or a GROUP that opens a
   dropdown of the tools of one area — Pastoral, Escola Sabatina, Pessoas —
   each item with an icon and a one-line hint. docs/navigation.md. */
.navbar .main-nav { flex-direction: row; align-items: center; gap: 2px; margin-right: 6px; }
.navbar .main-nav .nav-link { white-space: nowrap; }
.navbar .main-nav .dropdown-toggle::after { opacity: 0.55; margin-left: 5px; vertical-align: 0.12em; transition: transform 0.25s var(--app-ease); }
.navbar .main-nav .show > .dropdown-toggle::after { transform: rotate(180deg); }
.navbar .main-nav .nav-group.active > .nav-link { color: var(--primary-accent); background: var(--cg-accent-muted); }
.nav-group-menu { min-width: 300px; padding: 8px; margin-top: 8px !important; }
.nav-group-menu .dropdown-header {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cg-text-muted); padding: 8px 10px 4px;
}
.nav-group-menu .dropdown-divider { margin: 6px 4px; border-color: var(--cg-border); }
.nav-group-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: var(--app-radius-sm);
    color: var(--cg-text); white-space: normal;
}
.nav-group-item:hover, .nav-group-item:focus { background: var(--cg-surface-muted); color: var(--cg-text-heading); }
.nav-group-item.active { background: var(--cg-accent-muted); color: var(--primary-accent); }
.nav-group-item .ngi-ico {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center;
    border-radius: 11px;
    background: var(--cg-accent-muted); color: var(--primary-accent); font-size: 0.85rem;
    transition: transform 0.2s var(--app-ease), background-color 0.2s ease;
}
.nav-group-item:hover .ngi-ico { transform: scale(1.06); }
.nav-group-item.active .ngi-ico { background: var(--primary-accent); color: var(--cg-accent-ink); }
.nav-group-item .ngi-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nav-group-item .ngi-label { font-size: 0.88rem; font-weight: 600; }
.nav-group-item .ngi-hint { font-size: 0.74rem; color: var(--cg-text-muted); margin-top: 1px; }
.nav-group-item.active .ngi-hint { color: inherit; opacity: 0.8; }

/* The church the caller is working in: a fixed badge for an admin or a
   teacher, a switcher for the root (who works in one church at a time). */
.church-badge, .church-switcher {
    color: var(--cg-text); background: var(--cg-surface-muted);
    border: 1px solid var(--cg-border); border-radius: 999px;
    padding: 6px 14px; font-size: 0.82rem; font-weight: 600;
    max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.church-badge { margin-left: 8px; }
.church-switcher > i { color: var(--primary-accent); }
#churchSwitcher { margin-left: 8px; }
.church-switcher:hover, .church-switcher:focus, .church-switcher[aria-expanded="true"] { color: var(--cg-text-heading); background: var(--cg-border); border-color: var(--cg-border); }
#churchSwitcherMenu .dropdown-item.active { background: var(--cg-accent-muted); color: var(--cg-text); font-weight: 600; }

/* Root with no church chosen — the one thing a scoped page can show. */
.empty-church-state { max-width: 32rem; margin: 2rem auto; }

/* ---- surfaces: soft rounded cards, no hairline boxes ---- */
.card {
    --bs-card-border-radius: var(--app-radius); --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
    border: 1px solid transparent; border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-soft); background: var(--cg-surface);
}
[data-bs-theme="dark"] .card { border-color: var(--cg-border); }
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid var(--cg-border);
}
.card-head h2, .card-head h3 { font-size: 1.02rem; font-weight: 700; margin: 0; letter-spacing: -0.005em; }
.card-head .cg-hint { color: var(--cg-text-muted); font-size: 0.8rem; white-space: normal; }
.card-body { padding: 18px; }
.card-header, .card-footer { background: transparent; border-color: var(--cg-border); }

/* ---- stat tiles (data-viz "stat tile" contract) ---- */
.stat-tile {
    background: var(--cg-surface); border: 1px solid transparent; border-radius: var(--app-radius);
    padding: 16px 18px; box-shadow: var(--app-shadow-soft); height: 100%;
}
[data-bs-theme="dark"] .stat-tile { border-color: var(--cg-border); }
.stat-tile .stat-label { color: var(--cg-text-muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-tile .stat-value { font-size: 1.85rem; font-weight: 600; color: var(--cg-text-heading); line-height: 1.2; margin-top: 2px; }
.stat-tile .stat-sub { color: var(--cg-text-muted); font-size: 0.8rem; }

/* Anything you can open lifts a little under the pointer — the cue that
   it is a door, not a label. Touch screens skip it (no hover there). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.card, a.stat-tile, button.stat-tile, .card.is-link, .stat-tile.is-link {
        transition: transform 0.25s var(--app-ease), box-shadow 0.25s var(--app-ease);
    }
    a.card:hover, a.stat-tile:hover, button.stat-tile:hover, .card.is-link:hover, .stat-tile.is-link:hover {
        transform: translateY(-2px); box-shadow: var(--app-shadow-lift);
    }
}

/* ---- controls: one shape, the brand colours (every width) ----
   Bootstrap's own bright blue never shows: every button variant the
   pages use is mapped onto the palette above. */
.btn {
    --bs-btn-font-weight: 600;
    transition: transform 0.12s var(--app-ease), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.3rem; }
.btn-link { --bs-btn-font-weight: 500; }
.btn-primary {
    --bs-btn-color: var(--cg-accent-ink); --bs-btn-bg: var(--primary-accent); --bs-btn-border-color: var(--primary-accent);
    --bs-btn-hover-color: var(--cg-accent-ink); --bs-btn-hover-bg: var(--cg-accent-hover); --bs-btn-hover-border-color: var(--cg-accent-hover);
    --bs-btn-active-color: var(--cg-accent-ink); --bs-btn-active-bg: var(--cg-accent-hover); --bs-btn-active-border-color: var(--cg-accent-hover);
    --bs-btn-disabled-color: var(--cg-accent-ink); --bs-btn-disabled-bg: var(--primary-accent); --bs-btn-disabled-border-color: var(--primary-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    box-shadow: 0 1px 2px rgba(31, 99, 145, 0.18), 0 4px 12px rgba(31, 99, 145, 0.16);
}
.btn-primary:hover { box-shadow: 0 2px 4px rgba(31, 99, 145, 0.2), 0 8px 18px rgba(31, 99, 145, 0.22); }
[data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn-primary:hover { box-shadow: none; }
.btn-outline-primary {
    --bs-btn-color: var(--primary-accent); --bs-btn-bg: var(--cg-surface); --bs-btn-border-color: var(--primary-accent);
    --bs-btn-hover-color: var(--cg-accent-ink); --bs-btn-hover-bg: var(--primary-accent); --bs-btn-hover-border-color: var(--primary-accent);
    --bs-btn-active-color: var(--cg-accent-ink); --bs-btn-active-bg: var(--primary-accent); --bs-btn-active-border-color: var(--primary-accent);
    --bs-btn-disabled-color: var(--primary-accent); --bs-btn-disabled-border-color: var(--primary-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
/* The neutral button: a soft raised surface, not a grey outline. */
.btn-outline-secondary {
    --bs-btn-color: var(--cg-text); --bs-btn-bg: var(--cg-surface); --bs-btn-border-color: var(--cg-border-strong);
    --bs-btn-hover-color: var(--cg-text-heading); --bs-btn-hover-bg: var(--cg-surface-muted); --bs-btn-hover-border-color: var(--cg-border-strong);
    --bs-btn-active-color: var(--cg-text-heading); --bs-btn-active-bg: var(--cg-border); --bs-btn-active-border-color: var(--cg-border-strong);
    --bs-btn-disabled-color: var(--cg-text-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--cg-border);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    box-shadow: var(--cg-shadow-1);
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #256640; --bs-btn-hover-border-color: #256640;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #256640; --bs-btn-active-border-color: #256640;
    --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-outline-success {
    --bs-btn-color: var(--bs-success); --bs-btn-bg: var(--cg-surface); --bs-btn-border-color: rgba(47, 125, 79, 0.5);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #9e2f28; --bs-btn-hover-border-color: #9e2f28;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #9e2f28; --bs-btn-active-border-color: #9e2f28;
    --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn-outline-danger {
    --bs-btn-color: var(--bs-danger); --bs-btn-bg: var(--cg-surface); --bs-btn-border-color: rgba(190, 58, 50, 0.45);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn-outline-warning {
    --bs-btn-color: var(--bs-warning); --bs-btn-bg: var(--cg-surface); --bs-btn-border-color: rgba(176, 106, 8, 0.45);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning);
}
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #6fcf97; --bs-btn-border-color: rgba(111, 207, 151, 0.45); }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ef8a84; --bs-btn-border-color: rgba(239, 138, 132, 0.45); }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #e5a94d; --bs-btn-border-color: rgba(229, 169, 77, 0.45); }
/* A checked toggle button (weekday pickers, "Única / Recorrente") reads as chosen. */
.btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary {
    color: var(--cg-accent-ink); background: var(--primary-accent); border-color: var(--primary-accent);
}
/* A group of buttons is a segmented control: one soft track. */
.btn-group:not(.btn-group-vertical) > .btn-outline-secondary { box-shadow: none; }

.form-control, .form-select {
    background-color: var(--cg-surface); border-color: var(--cg-border-strong);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.form-control:focus, .form-select:focus {
    background-color: var(--cg-surface); border-color: var(--primary-accent); box-shadow: 0 0 0 4px var(--cg-accent-focus);
}
.form-check-input:checked { background-color: var(--primary-accent); border-color: var(--primary-accent); }
.form-check-input:focus { border-color: var(--primary-accent); box-shadow: 0 0 0 4px var(--cg-accent-focus); }
.input-group-text { background: var(--cg-surface-muted); border-color: var(--cg-border-strong); color: var(--cg-text-muted); }
.badge { border-radius: 999px; font-weight: 600; padding: 0.38em 0.68em; }
.alert { border: 0; border-radius: var(--app-radius-sm); }
/* Alerts in the palette's own tints, not Bootstrap's cyan and yellow. */
.alert-info, .alert-primary { --bs-alert-bg: var(--cg-accent-muted); --bs-alert-color: var(--cg-text); --bs-alert-link-color: var(--primary-accent); }
.alert-info > .fas, .alert-info > i:first-child, .alert-primary > i:first-child { color: var(--primary-accent); }
.alert-warning { --bs-alert-bg: rgba(176, 106, 8, 0.12); --bs-alert-color: var(--cg-text); --bs-alert-link-color: #8a5306; }
.alert-warning > i:first-child { color: var(--bs-warning); }
.alert-success { --bs-alert-bg: rgba(47, 125, 79, 0.12); --bs-alert-color: var(--cg-text); --bs-alert-link-color: #256640; }
.alert-danger { --bs-alert-bg: rgba(190, 58, 50, 0.10); --bs-alert-color: var(--cg-text); --bs-alert-link-color: #9e2f28; }
.alert-secondary, .alert-light { --bs-alert-bg: var(--cg-surface-muted); --bs-alert-color: var(--cg-text); }
.progress { border-radius: 999px; background: var(--cg-surface-muted); }
.list-group {
    --bs-list-group-border-radius: var(--app-radius-sm); --bs-list-group-bg: var(--cg-surface);
    --bs-list-group-border-color: var(--cg-border); --bs-list-group-color: var(--cg-text);
    --bs-list-group-action-hover-bg: var(--cg-surface-muted); --bs-list-group-action-active-bg: var(--cg-border);
}
.card .list-group { --bs-list-group-bg: transparent; }
.list-group-item-action { transition: background-color 0.15s ease; }

/* Menus, sheets and dialogs float on the same soft surface. */
.dropdown-menu {
    --bs-dropdown-border-radius: 14px; --bs-dropdown-inner-border-radius: 13px;
    --bs-dropdown-link-active-bg: var(--cg-accent-muted); --bs-dropdown-link-active-color: var(--primary-accent);
    padding: 6px; border: 1px solid var(--cg-border); background: var(--cg-surface); box-shadow: var(--app-shadow-lift);
}
.dropdown-item { border-radius: 9px; padding: 7px 12px; transition: background-color 0.15s ease; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cg-surface-muted); color: var(--cg-text-heading); }
.dropdown-menu .dropdown-divider { margin: 5px 4px; border-color: var(--cg-border); }
.modal-content {
    --bs-modal-border-radius: 22px; --bs-modal-inner-border-radius: 21px;
    border: 0; border-radius: 22px; background: var(--cg-surface); box-shadow: 0 24px 64px rgba(28, 25, 22, 0.22);
}
.modal-header { border-bottom: 0; padding: 20px 24px 6px; }
.modal-title { font-weight: 700; letter-spacing: -0.01em; }
.modal-body { padding: 12px 24px; }
.modal-footer { border-top: 0; padding: 8px 24px 20px; gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: 0.35; }
.offcanvas { border-color: var(--cg-border) !important; background: var(--cg-surface); }
.offcanvas-end { border-radius: 22px 0 0 22px; }
.offcanvas-start { border-radius: 0 22px 22px 0; }
.toast { border-radius: 14px; box-shadow: var(--app-shadow-lift); }
.tooltip { --bs-tooltip-border-radius: 8px; }
.popover { --bs-popover-border-radius: 14px; }

/* ---- tables: quiet header, a soft row hover ---- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--cg-surface-muted); }
.table > :not(caption) > * > * { padding: 0.7rem 0.85rem; border-bottom-color: var(--cg-border); }
.table thead th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cg-text-muted); font-weight: 600;
    background: var(--cg-surface-muted);
}
.table > tbody > tr { transition: background-color 0.15s ease; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
@media (hover: hover) { main .card .table > tbody > tr:hover > * { background: var(--cg-surface-muted); } }
.card > .table-responsive:first-child .table > thead > tr:first-child > :first-child,
.card > .table:first-child > thead > tr:first-child > :first-child { border-top-left-radius: var(--app-radius); }
.card > .table-responsive:first-child .table > thead > tr:first-child > :last-child,
.card > .table:first-child > thead > tr:first-child > :last-child { border-top-right-radius: var(--app-radius); }
.card > .table-responsive:last-child .table > tbody > tr:last-child > :first-child,
.card > .table:last-child > tbody > tr:last-child > :first-child { border-bottom-left-radius: var(--app-radius); }
.card > .table-responsive:last-child .table > tbody > tr:last-child > :last-child,
.card > .table:last-child > tbody > tr:last-child > :last-child { border-bottom-right-radius: var(--app-radius); }

/* ---- tabs → one segmented pill bar, at every width ----
   The pages' tab strips (.nav-tabs), the agenda's views, the board's column
   switch and the Encontros list/calendar toggle are ONE control: a soft
   track, the chosen option a filled accent pill. auth-nav.js adds a
   sliding thumb (.seg-thumb) so the choice glides instead of jumping. */
main .nav-tabs, .agenda-tabs, .board-switch, .cal-views {
    position: relative; display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 100%;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    padding: 4px; border: 1px solid var(--cg-border); border-radius: 999px; background: var(--cg-surface-muted);
}
main .nav-tabs::-webkit-scrollbar, .agenda-tabs::-webkit-scrollbar, .board-switch::-webkit-scrollbar { display: none; }
main .nav-tabs .nav-link, .agenda-tabs .nav-link, .board-switch > button, .cal-views > .btn {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 36px; padding: 0 16px; margin: 0;
    border: 0 !important; border-radius: 999px !important; background: transparent;
    color: var(--cg-text-muted); font-weight: 600; white-space: nowrap; scroll-snap-align: start;
    box-shadow: none !important; transform: none !important;
    transition: color 0.25s ease, background-color 0.25s var(--app-ease);
}
main .nav-tabs .nav-link:hover, .agenda-tabs .nav-link:hover, .board-switch > button:hover, .cal-views > .btn:hover { color: var(--cg-text-heading); background: transparent; }
main .nav-tabs .nav-link.active, .agenda-tabs .nav-link.active, .board-switch > button.active, .cal-views > .btn.active {
    color: var(--cg-accent-ink); background: var(--primary-accent);
    box-shadow: 0 1px 2px rgba(31, 99, 145, 0.2), 0 4px 10px rgba(31, 99, 145, 0.18) !important;
}
/* With the thumb in place the pill itself goes clear: the thumb IS the fill. */
.has-seg-thumb > .nav-item > .nav-link.active, .has-seg-thumb > .nav-link.active,
.has-seg-thumb > button.active, .has-seg-thumb > .btn.active { background: transparent; box-shadow: none !important; }
.cal-views > .btn { margin: 0 !important; }
.seg-thumb {
    position: absolute; z-index: 0; top: 0; left: 0; height: 0; width: 0; pointer-events: none; list-style: none;
    border-radius: 999px; background: var(--primary-accent);
    box-shadow: 0 1px 2px rgba(31, 99, 145, 0.2), 0 4px 10px rgba(31, 99, 145, 0.18);
}
.seg-thumb.is-ready { transition: transform 0.38s var(--app-ease), width 0.38s var(--app-ease), height 0.2s ease; }
[data-bs-theme="dark"] .seg-thumb { box-shadow: none; }
main .nav-tabs .nav-link .badge, .agenda-tabs .nav-link .badge {
    background: var(--cg-accent-muted) !important; color: var(--primary-accent) !important; transition: background-color 0.25s ease, color 0.25s ease;
}
main .nav-tabs .nav-link.active .badge, .agenda-tabs .nav-link.active .badge {
    background: rgba(255, 255, 255, 0.22) !important; color: var(--cg-accent-ink) !important;
}
.tab-content > .tab-pane.active { animation: app-rise 0.35s var(--app-ease) both; }

/* ---- misc ---- */
.page-title { font-size: 1.6rem; font-weight: 700; margin: 0; letter-spacing: -0.015em; line-height: 1.2; }
.page-subtitle { color: var(--cg-text-muted); margin: 4px 0 0; max-width: 74ch; line-height: 1.5; }
.badge-status { font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.68rem; }
.badge-status.draft { background: var(--cg-surface-muted); color: var(--cg-text-muted); border: 1px solid var(--cg-border-strong); }
.badge-status.active, .badge-status.open { background: rgba(47, 125, 79, 0.14); color: #2f7d4f; }
[data-bs-theme="dark"] .badge-status.active, [data-bs-theme="dark"] .badge-status.open { color: #6fcf97; }
.badge-status.archived, .badge-status.closed { background: rgba(190, 58, 50, 0.12); color: #be3a32; }
[data-bs-theme="dark"] .badge-status.archived, [data-bs-theme="dark"] .badge-status.closed { color: #ef8a84; }
.badge-status.scheduled, .badge-status.inactive { background: rgba(176, 106, 8, 0.14); color: #b06a08; }
[data-bs-theme="dark"] .badge-status.inactive { color: #e5a94d; }
.badge-group { background: var(--cg-accent-muted); color: var(--primary-accent); font-weight: 500; }
.weekday-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.weekday-picker .btn { min-width: 46px; border-radius: 999px; }
[data-bs-theme="dark"] .badge-status.scheduled { color: #e5a94d; }
.empty-state { color: var(--cg-text-muted); text-align: center; padding: 36px 16px; }
.empty-state i { font-size: 1.8rem; display: block; margin-bottom: 10px; opacity: 0.5; }
.mono { font-family: var(--cg-font-mono); }
.toast-container { z-index: 1090; }
::selection { background: var(--cg-accent-focus); }
:focus-visible { outline-color: var(--primary-accent); }

/* ---- motion: the page settles in, cards follow (every width) ---- */
@keyframes app-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes app-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* individual translate/scale, never `transform`: Popper positions menus with it */
@keyframes app-menu-in { from { opacity: 0; translate: 0 -6px; scale: 0.98; } }
main { animation: app-fade 0.3s ease both; }
main > .row > [class*="col"], main > .card, main > .d-flex, main > .alert:not(.d-none) {
    animation: app-rise 0.5s var(--app-ease) both;
}
main > :nth-child(2) { animation-delay: 0.04s; }
main > :nth-child(3), main > .row > :nth-child(2) { animation-delay: 0.08s; }
main > :nth-child(4), main > .row > :nth-child(3) { animation-delay: 0.12s; }
main > :nth-child(5), main > .row > :nth-child(4) { animation-delay: 0.16s; }
main > :nth-child(n+6) { animation-delay: 0.2s; }
.dropdown-menu.show { animation: app-menu-in 0.2s var(--app-ease) backwards; transform-origin: top; }
@media (min-width: 576px) {
    .modal.fade .modal-dialog { transform: translateY(14px) scale(0.98); transition: transform 0.32s var(--app-ease), opacity 0.2s ease; }
    .modal.show .modal-dialog { transform: none; }
}

/* Page to page: the content cross-fades under a still top bar instead of
   blinking white (cross-document View Transitions; browsers without it
   just navigate as before). */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 0.18s ease both app-vt-out; }
    ::view-transition-new(root) { animation: 0.3s var(--app-ease) both app-vt-in; }
    ::view-transition-group(cg-topbar), ::view-transition-group(cg-tabbar) { animation-duration: 0s; }
}
@keyframes app-vt-out { to { opacity: 0; } }
@keyframes app-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Phones and tablets: the top bar keeps the brand, the church and the bell
   (the menu lives in the tab bar and "Mais" — the app shell below). */
@media (max-width: 991.98px) {
    .navbar .church-badge, .navbar .church-switcher { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* A phone: logo, church and bell must share ONE row, so the brand keeps
   only its icon and the church name gives way with an ellipsis. */
@media (max-width: 575.98px) {
    .navbar .brand-name { display: none; }
    .navbar .navbar-brand { margin-right: 8px; font-size: 1.35rem; }
    .navbar .church-badge, .navbar .church-switcher { max-width: calc(100vw - 150px); font-size: 0.8rem; }
    .navbar #churchSwitcher { min-width: 0; }
}

/* A teacher's name (professor(a)) — the class list and the class hub. */
.teacher-chip {
    display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 2px 10px; border-radius: 999px;
    border: 1px solid var(--cg-border-strong); background: var(--cg-accent-muted); color: var(--cg-text);
}
.teacher-chip.is-me { border-color: var(--primary-accent); color: var(--primary-accent); }

/* =====================================================================
   App shell — phones and tablets (< lg).
   Below 992px the staff pages behave like an installed app: the light top
   bar loses the menu, a bottom tab bar (built by auth-nav.js) replaces it,
   the main "create" button floats, controls grow to finger size (44–48px,
   16px fields so iOS never zooms), modals become bottom sheets and tables
   turn into one card per row. The LOOK — soft surfaces, brand buttons,
   segmented tabs, motion — is the desktop's too (above); only sizes and
   placement change here.
   ===================================================================== */

/* Built by auth-nav.js on every staff page; hidden on desktop. */
.app-tabbar, .app-fab { display: none; }

@media (max-width: 991.98px) {
    body { padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 24px); -webkit-tap-highlight-color: transparent; }
    body.bg-light, [data-bs-theme="dark"] body.bg-light { background-color: var(--cg-body-bg) !important; }

    /* ---- top app bar: brand, church, bell — the menu moves down ---- */
    .navbar.bg-dark {
        min-height: 0;
        padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px;
        margin-bottom: 12px !important;
    }
    .navbar #navRight, .navbar #mainNav { display: none !important; }
    /* "Entrar como": the banner is the topmost bar now, so it takes the
       notch's inset and the top bar drops it. */
    .imp-banner { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
    body.is-impersonating .navbar.bg-dark { padding-top: 6px; }
    .navbar .brand-logo {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; margin-right: 8px;
    }
    .navbar .brand-logo .brand-icon { width: 36px; height: 36px; border-radius: 11px; }
    .navbar .church-badge, .navbar .church-switcher { padding: 6px 14px; font-size: 0.85rem; margin-left: 0; }

    /* ---- bottom tab bar ---- */
    .app-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        height: calc(var(--app-tabbar-h) + var(--app-safe-bottom));
        padding: 6px 6px var(--app-safe-bottom);
        background: var(--app-bar-bg);
        -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--cg-border);
        animation: app-fade 0.3s ease both;
        view-transition-name: cg-tabbar;
    }
    .app-tab {
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border: 0; background: transparent; color: var(--cg-text-muted); text-decoration: none;
        font-size: 0.68rem; font-weight: 600; letter-spacing: 0; border-radius: 14px; padding: 0 2px; white-space: nowrap;
        transition: color 0.2s ease, transform 0.15s var(--app-ease);
    }
    /* Six slots (five places + "Mais") on a 360px phone: the pill shrinks
       with its slot instead of overflowing into the next one. */
    .app-tab i {
        font-size: 1.15rem; width: 100%; max-width: 56px; height: 30px; display: flex; align-items: center; justify-content: center;
        border-radius: 999px; transition: background-color 0.25s var(--app-ease), color 0.2s ease;
    }
    .app-tab:active { transform: scale(0.92); }
    .app-tab.active { color: var(--primary-accent); }
    .app-tab.active i { background: var(--cg-accent-muted); animation: app-pop 0.35s var(--app-ease); }
    .app-tab:focus-visible { outline: 2px solid var(--primary-accent); outline-offset: -2px; }

    /* ---- floating "create" button (cloned from the page's [data-fab]) ---- */
    [data-fab] { display: none !important; }
    .app-fab {
        display: inline-flex; align-items: center; gap: 10px; position: fixed; z-index: 1034;
        right: 16px; bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom) + 16px);
        height: 56px; padding: 0 22px; border: 0; border-radius: 18px;
        background: var(--primary-accent); color: var(--cg-accent-ink); font-weight: 600; font-size: 0.95rem;
        box-shadow: 0 8px 24px rgba(31, 99, 145, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
        animation: app-rise 0.45s var(--app-ease) 0.15s both;
        transition: transform 0.15s var(--app-ease), box-shadow 0.2s ease;
    }
    .app-fab.d-none { display: none !important; }
    .app-fab:active { transform: scale(0.95); box-shadow: 0 4px 12px rgba(31, 99, 145, 0.3); }
    .app-fab i { font-size: 1.05rem; }

    /* ---- "Mais" bottom sheet ---- */
    .app-sheet.offcanvas-bottom {
        height: auto; max-height: 88dvh; border: 0 !important; overflow: hidden;
        border-radius: 24px 24px 0 0; background: var(--cg-surface); color: var(--cg-text);
        transition: transform 0.35s var(--app-ease);
    }
    .app-sheet .app-sheet-body {
        min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        padding-bottom: calc(12px + var(--app-safe-bottom));
    }
    /* The whole menu as groups of tiles — the same groups as the desktop
       menu (Pastoral · Escola Sabatina · Pessoas), each tile with its hint. */
    .app-sheet-groups { padding: 0 12px; }
    .app-sheet-group { margin-bottom: 14px; }
    .app-sheet-group-title {
        display: flex; align-items: center; gap: 8px; margin: 0 4px 8px;
        font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cg-text-muted);
    }
    .app-sheet-group-title i { color: var(--primary-accent); }
    .app-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .app-sheet-tile {
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
        min-height: 96px; padding: 10px 6px; border: 0; border-radius: 16px;
        background: var(--cg-surface-muted); color: var(--cg-text); text-decoration: none; text-align: center;
        font-size: 0.76rem; font-weight: 600; line-height: 1.15;
        transition: transform 0.15s var(--app-ease), background-color 0.15s ease;
    }
    .app-sheet-tile:active { background: var(--cg-border); transform: scale(0.96); }
    .app-sheet-tile.active { background: var(--cg-accent-muted); color: var(--primary-accent); }
    .app-sheet-tile-ico {
        width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
        background: var(--cg-surface); color: var(--primary-accent); font-size: 1rem; box-shadow: var(--cg-shadow-1);
    }
    .app-sheet-tile.active .app-sheet-tile-ico { background: var(--primary-accent); color: var(--cg-accent-ink); }
    .app-sheet-tile-hint {
        font-size: 0.62rem; font-weight: 400; line-height: 1.2; color: var(--cg-text-muted);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .app-sheet-tile.active .app-sheet-tile-hint { color: inherit; opacity: 0.8; }
    .app-sheet .app-sheet-grip { width: 40px; height: 5px; border-radius: 999px; background: var(--cg-border-strong); margin: 10px auto 4px; }
    .app-sheet .app-sheet-user { display: flex; align-items: center; gap: 12px; padding: 12px 20px 16px; }
    .app-avatar {
        width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; font-weight: 700;
        background: var(--cg-accent-muted); color: var(--primary-accent);
    }
    .app-sheet .app-sheet-name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
    .app-sheet .app-sheet-role { color: var(--cg-text-muted); font-size: 0.82rem; }
    .app-sheet-list { margin: 0 12px; border-radius: 16px; overflow: hidden; background: var(--cg-surface-muted); }
    .app-sheet-item {
        display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 0 16px;
        border: 0; border-bottom: 1px solid var(--cg-border); background: transparent; color: var(--cg-text);
        font-size: 1rem; text-align: left; text-decoration: none;
    }
    .app-sheet-item:last-child { border-bottom: 0; }
    .app-sheet-item:active { background: var(--cg-border); }
    .app-sheet-item > i:first-child { width: 22px; text-align: center; color: var(--primary-accent); }
    .app-sheet-item .app-chevron { margin-left: auto; color: var(--cg-text-muted); font-size: 0.8rem; }
    .app-sheet-item.danger, .app-sheet-item.danger > i:first-child { color: var(--danger-color); }
    .app-sheet-list.imp-back-list { margin-bottom: 18px; }
    .app-sheet-item.imp-back-item { font-weight: 600; }
    .app-sheet-item.imp-back-item > i:first-child { color: var(--bs-warning); }
    .app-sheet-list + .app-sheet-list { margin-top: 12px; }
    .offcanvas-backdrop.show { opacity: 0.4; }
    .offcanvas-end, .offcanvas-start { border-radius: 0; }

    /* ---- page header: big title, no essay underneath ---- */
    .page-title { font-size: 1.75rem; line-height: 1.15; }
    main > .d-flex > div > .page-subtitle, main > div > .page-subtitle { display: none; }
    .card-head .cg-hint { display: none; }

    /* ---- surfaces breathe a little more on a phone ---- */
    main .card, main .stat-tile { overflow: hidden; }
    main .card { margin-bottom: 16px; }
    .card-head { padding: 16px 18px; }
    .card-head h2, .card-head h3 { font-size: 1.05rem; }
    .stat-tile { padding: 16px; }
    .stat-tile .stat-value { font-size: 1.9rem; }
    .list-group-item { padding: 14px 18px; }

    /* ---- controls: finger-sized, iOS never zooms (16px) ---- */
    main .btn, .modal .btn, .offcanvas .btn {
        min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    }
    main .btn-sm, .modal .btn-sm, .offcanvas .btn-sm { min-height: 40px; padding: 0.35rem 0.9rem; font-size: 0.9rem; }
    main .btn-link, .modal .btn-link { min-height: 0; }
    .form-control, .form-select, .input-group-text {
        min-height: 48px; font-size: 16px;
    }
    .form-control-sm, .form-select-sm { min-height: 44px; font-size: 16px; }
    textarea.form-control { min-height: 96px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
    .form-switch .form-check-input { width: 2.4em; height: 1.35em; }
    .badge { padding: 0.4em 0.7em; }

    /* ---- the segmented tabs span the width and scroll sideways ---- */
    main .nav-tabs, .agenda-tabs { display: flex; border-radius: 16px; }
    main .nav-tabs .nav-link, .agenda-tabs .nav-link { min-height: 42px; padding: 0 14px; }
    main .nav-tabs .nav-link, .agenda-tabs .nav-link, .seg-thumb { border-radius: 12px !important; }

    /* ---- toasts float above the tab bar, full width ---- */
    .toast-container.position-fixed {
        left: 0; right: 0; bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)) !important;
        display: flex; flex-direction: column; align-items: center;
    }
    .toast { width: min(100%, 420px); animation: app-rise 0.35s var(--app-ease) both; }
}

/* Phones: modals become bottom sheets that slide up from the tab bar. */
@media (max-width: 575.98px) {
    .modal-dialog:not([class*="modal-fullscreen"]) {
        margin: 0; min-height: 100%; max-width: none; display: flex; align-items: flex-end;
    }
    .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content {
        border: 0; border-radius: 24px 24px 0 0; max-height: 92dvh; background: var(--cg-surface);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content::before {
        content: ''; display: block; width: 40px; height: 5px; border-radius: 999px;
        background: var(--cg-border-strong); margin: 10px auto 0; flex: 0 0 auto;
    }
    .modal-dialog:not([class*="modal-fullscreen"]) .modal-body { overflow-y: auto; }
    .modal-header { border-bottom: 0; padding: 10px 20px 4px; }
    .modal-title { font-weight: 700; font-size: 1.2rem; }
    .modal-body { padding: 12px 20px; }
    .modal-footer { border-top: 0; padding: 8px 20px 16px; flex-wrap: nowrap; gap: 10px; }
    .modal-footer > .btn, .modal-footer > div:not(.d-none) { flex: 1 1 0; min-height: 50px; margin: 0; }
    .modal-footer > div { display: flex; gap: 10px; }
    .modal-footer > div > .btn { flex: 1 1 0; min-height: 50px; margin: 0; }
    .modal-footer > .btn.d-none + div, .modal-footer > div:only-child { flex: 1 1 100%; }
    .modal.fade .modal-dialog:not([class*="modal-fullscreen"]) { transform: translateY(100%); transition: transform 0.38s var(--app-ease); }
    .modal.show .modal-dialog:not([class*="modal-fullscreen"]) { transform: none; }
    .modal-dialog-centered { min-height: 100% !important; }
    .offcanvas-end, .offcanvas-start { width: 100% !important; }
}

/* Phones: a wide table becomes one card per row (labels copied from the
   header by auth-nav.js → data-label). Header cells marked data-m="hide"
   are the columns a phone can do without. */
@media (max-width: 767.98px) {
    .table-responsive:has(> .table-stack) { overflow: visible; }
    .table-stack, .table-stack > tbody, .table-stack > tfoot { display: block; width: 100%; }
    .table-stack > thead { display: none; }
    .table-stack > tbody > tr, .table-stack > tfoot > tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
        padding: 16px 18px; border-bottom: 1px solid var(--cg-border);
        transition: background-color 0.15s ease;
    }
    .table-stack > tbody > tr:last-child { border-bottom: 0; }
    .table-stack > tbody > tr:active { background: var(--cg-surface-muted); }
    .table-stack > tfoot > tr { background: var(--cg-surface-muted); }
    .table-stack td, .table-stack th {
        display: block; padding: 0 !important; border: 0 !important; text-align: left !important;
        box-shadow: none !important; background: transparent; min-width: 0; overflow-wrap: break-word;
    }
    .table-stack td[data-label]:not(.m-title)::before, .table-stack th[data-label]:not(.m-title)::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cg-text-muted);
    }
    .table-stack > tbody > tr { position: relative; }
    .table-stack .m-title { grid-column: 1 / -1; font-size: 1.02rem; }
    .table-stack tr:has(> .m-actions:not(:empty)) > .m-title { padding-right: 88px !important; }
    .table-stack .m-title a { font-weight: 700; text-decoration: none !important; }
    /* the row's title link covers the whole card: tap anywhere to open */
    .table-stack > tbody > tr > .m-title a:first-of-type::after { content: ''; position: absolute; inset: 0; z-index: 1; }
    .table-stack td:not(.m-title) a, .table-stack .m-actions { position: relative; z-index: 2; }
    .table-stack .m-actions { position: absolute; top: 12px; right: 14px; display: flex; gap: 6px; }
    .table-stack .m-actions:empty { display: none; }
    .table-stack .m-actions .btn { min-height: 40px; min-width: 40px; border-radius: 999px; padding: 0 14px; }
    .table-stack .member-sub, .table-stack td .small {
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    main .card .list-group-item { background: transparent; }
    /* the feed is a glance on a phone: the last five, no event codes */
    #activityList > li:nth-child(n+6) { display: none; }
    #activityList .activity-type { display: none; }
    .table-stack .m-hide { display: none !important; }
    .table-stack td[colspan] { grid-column: 1 / -1; }
    .table-stack td.empty-state { padding: 24px 0 !important; text-align: center !important; }
}

@media print {
    .app-tabbar, .app-fab, .app-sheet { display: none !important; }
    body { padding-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Contextual help (shared/help-link.js → the Central de Ajuda, /wiki).
   .help-doc-link — the "Ler a documentação" button after a page subtitle;
   .help-dot      — the small "?" a [data-help] element gains.
   ============================================================ */
.help-doc-link {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 11px;
    border: 0; border-radius: 999px; background: var(--cg-accent-muted);
    color: var(--primary-accent); font-size: 0.76rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    vertical-align: baseline; transition: background-color 0.18s ease, color 0.18s ease;
}
.help-doc-link:hover { background: var(--primary-accent); color: var(--cg-accent-ink); text-decoration: none; }
[data-help-header] .help-doc-link { margin: 8px 0 0; }
.help-dot {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle;
    color: var(--cg-text-muted); font-size: 0.82rem; font-weight: 500; text-decoration: none; opacity: 0.85;
    text-transform: none; letter-spacing: 0;
}
.help-dot:hover { color: var(--primary-accent); opacity: 1; text-decoration: none; }
.help-dot span { font-size: 0.75rem; }
@media (max-width: 575.98px) {
    .help-doc-link { margin: 6px 0 0; }
}

/* ============================================================
   The bell (shared/auth-nav.js → buildBell): the inbox of the week's
   review (docs/pastor.md). Sits in the navbar after the menu, so a
   phone's top bar carries it too.
   ============================================================ */
.notif-wrap { margin-left: auto; margin-right: 8px; position: relative; }
@media (min-width: 992px) { .notif-wrap { margin-left: 4px; margin-right: 0; } }
.notif-btn {
    position: relative; width: 40px; height: 40px; padding: 0;
    color: var(--cg-text-heading); background: var(--cg-surface-muted); border: 1px solid var(--cg-border);
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    box-shadow: none !important;
}
.notif-btn:hover, .notif-btn:focus, .notif-btn[aria-expanded="true"] { color: var(--cg-text-heading); background: var(--cg-border); border-color: var(--cg-border); }
.notif-btn:hover i { animation: app-ring 0.6s var(--app-ease); }
@keyframes app-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } }
.notif-count {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--danger-color); color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 18px; text-align: center;
    animation: app-pop 0.4s var(--app-ease);
}
.notif-menu { width: min(92vw, 380px); padding: 0; overflow: hidden; border-radius: 18px; }
.notif-head, .notif-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 0.82rem; }
.notif-head { border-bottom: 1px solid var(--cg-border); }
.notif-foot { border-top: 1px solid var(--cg-border); background: var(--cg-surface-muted); }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--cg-border); color: var(--cg-text); text-decoration: none; transition: background-color 0.15s ease; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--cg-surface-muted); color: var(--cg-text); }
.notif-item.is-unread { background: var(--cg-accent-muted); }
.notif-item.is-unread .notif-title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-accent); margin-right: 6px; vertical-align: middle; }
.notif-title { font-weight: 600; font-size: 0.85rem; color: var(--cg-text-heading); }
.notif-body { font-size: 0.8rem; color: var(--cg-text); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: 0.72rem; color: var(--cg-text-muted); margin-top: 3px; }
.notif-empty { padding: 22px 16px; text-align: center; color: var(--cg-text-muted); font-size: 0.82rem; }
.notif-empty i { display: block; font-size: 1.4rem; margin-bottom: 6px; opacity: 0.5; }
@media (max-width: 991.98px) {
    .notif-menu { position: fixed !important; left: 8px !important; right: 8px !important; top: calc(var(--app-topbar-h, 56px) + 4px) !important; width: auto; transform: none !important; }
}