:root {
    /* Palette matched to the congregation's own schedule document: navy
       header, cream page background, teal for table headers/accents. */
    --bg: #f3eee1;
    --card-bg: #ffffff;
    --ink: #24272e;
    --muted: #6b6659;
    --accent: #1b2c4d;
    --accent-ink: #ffffff;
    --teal: #3d6e6e;
    --teal-ink: #ffffff;
    --border: #e3ddc9;
    --ok-bg: #e2ede8;
    --ok-ink: #2f5f52;
    --warn-bg: #fbeee0;
    --warn-ink: #9c5b1f;
    /* "Nothing filled in yet" is informational, not a warning — the old
       mustard/orange badge-warn color clashed badly against the cream
       background here, so empty-status gets its own quieter, neutral tone
       instead of borrowing the warning color. */
    --neutral-bg: #e9e2ce;
    --neutral-ink: #6b6659;
    /* Reserved for the one genuinely irreversible action (deleting an
       account) — a muted maroon rather than a jarring bright red, to stay
       in the same restrained palette as everything else. */
    --danger-ink: #93362c;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Without this, `button, .button { display: inline-block }` below silently
   wins over the browser's own `[hidden] { display: none }` rule — any
   author stylesheet rule beats a user-agent one for the same property,
   specificity aside, so a `<button hidden>` (see account_profile.html's
   push notification toggle) would stay visible despite the attribute. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

.topbar {
    background: var(--accent);
    color: var(--accent-ink);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--accent-ink);
    text-decoration: none;
    font-weight: 600;
    min-width: 0;
}

.brand-logo {
    /* The logo itself is navy — same as the header background — so it
       needs a light backdrop to actually show up here, not blend in. */
    height: 34px;
    width: auto;
    display: block;
    background: #ffffff;
    border-radius: 6px;
    padding: 3px;
}

.user-greeting {
    color: var(--accent-ink);
    font-weight: 600;
    /* Pushed to the far right of the header, whatever else is in the row. */
    margin-left: auto;
}

.topbar-login-btn {
    /* Same "pushed to the far right" slot as .user-greeting, since the two
       never appear together. White-on-navy so it reads as a button, not
       just another nav link, on a page that otherwise has none. */
    margin-left: auto;
    background: var(--accent-ink);
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    padding: 0.4rem 1rem;
    border-radius: 999px;
}
.topbar-login-btn:hover { opacity: 0.9; }

.lang-switch a { opacity: 0.75; }
.lang-switch a.active { opacity: 1; font-weight: 700; text-decoration: underline; }

/* Single hamburger menu, pinned top-left (first element in .topbar-inner)
   — holds every nav link (dashboard/accounts/schedule/profile/language/
   logout) behind one plain <details>, same no-JS toggle pattern already
   used elsewhere (the account-edit row on /accounts): click opens, click
   again closes. Replaces a row of links that used to sit flush against
   the screen edge and collide with the phone's own swipe-from-edge
   "go back" gesture. */
.nav-menu { position: relative; }

.hamburger-btn {
    cursor: pointer;
    color: var(--accent-ink);
    list-style: none;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}
.hamburger-btn::-webkit-details-marker { display: none; }
.hamburger-btn:hover,
.nav-menu[open] .hamburger-btn { background: rgba(255, 255, 255, 0.12); }

.nav-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 170px;
    z-index: 200;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.nav-menu-panel a { color: var(--accent); text-decoration: none; opacity: 1; }
.nav-menu-panel a:hover { text-decoration: underline; }
.nav-menu-panel .lang-switch a { color: var(--accent); }
.nav-menu-panel .lang-switch a.active { color: var(--accent); }

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

h1 { margin-top: 0; }

.muted { color: var(--muted); }

.login-links { margin-top: 0.75rem; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.card.narrow { max-width: 360px; margin: 3rem auto; }

.google-button {
    width: 100%;
    text-align: center;
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--border);
}
.google-button:hover { opacity: 0.85; }

.profile-card { text-align: center; }

.profile-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.profile-card form { text-align: left; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.dept-card h2 { margin-top: 0; font-size: 1.1rem; }

/* Departments overview as a plain list of rows, not a grid of boxed cards
   — one department per line: name + status + what's coming up, with
   "Open" on the right. */
.dept-list {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.dept-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.dept-list > .dept-row:last-child { border-bottom: none; }

.dept-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.dept-row-name { font-weight: 700; }

.dept-row-next { margin: 0; flex-basis: 100%; font-size: 0.85rem; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-ink); }

.button, button, input[type="submit"] {
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.button:hover, button:hover { opacity: 0.9; }

.link-button {
    background: none;
    color: var(--accent);
    padding: 0;
    text-decoration: underline;
    font-size: 0.85rem;
}

.danger-link { color: var(--danger-ink); }

form label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: var(--muted);
}

form.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

form.inline-form label {
    margin-bottom: 0;
    flex: 1 1 160px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* An account can belong to more than one department now — a plain
   checkbox per department instead of a single <select>. */
.dept-checklist {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    /* Its own full-width row, not squeezed into whatever narrow column is
       left over next to the other fields — cramming 8 department
       checkboxes into ~220px stacks them into one tall column instead of
       flowing across the width available, which then threw off the
       shorter fields' vertical alignment too (.inline-form bottom-aligns
       everything in a row). */
    flex: 1 1 100%;
    min-width: 0;
}

.dept-checklist legend {
    padding: 0 0.4rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.dept-checklist .checkbox-label {
    flex-direction: row;
    justify-content: flex-start;
    font-size: 0.9rem;
    color: var(--ink);
}

input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    margin-top: 0.2rem;
}

textarea {
    font-family: inherit;
    resize: vertical;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.table th, .table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.table th { background: var(--teal); color: var(--teal-ink); }

.row-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.table-scroll { overflow-x: auto; }

/* The Богослужение edit form: role name fixed to the left column, input
   box fixed to the right — table-layout: fixed keeps that two-column
   split on any screen width instead of the label falling above the
   input on a narrow phone. */
.role-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.role-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-size: 0.95rem;
}

.role-table tr:last-child td { border-bottom: none; }

.role-table td:first-child { width: 38%; padding-right: 0.75rem; }

.role-table input {
    width: 100%;
    margin-top: 0;
}

/* Account dropdown stacked above its manual-text fallback — the dropdown
   wins when both are filled in (see resolve_role_assignment() in app.py),
   so the two are grouped tightly to read as one control, not two. */
.role-value-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.role-value-cell select {
    width: 100%;
    margin-top: 0;
    font-size: 0.85rem;
}

/* The "hide this role from this Saturday's public schedule" checkbox —
   narrow fixed column so it doesn't eat into the name-input's width. */
.role-hide-cell {
    width: 92px;
    white-space: nowrap;
    font-size: 0.8rem;
}

/* Up/down reorder buttons — two tiny separate forms sitting side by side
   in their own narrow column, each an immediate action independent of
   the big "Save all" form (see move_service_role() in app.py). */
.role-move-cell {
    width: 64px;
    white-space: nowrap;
    text-align: right;
}

.move-form { display: inline-block; }

.move-form .link-button {
    font-size: 1rem;
    padding: 0 0.15rem;
}

.move-form .link-button:disabled {
    color: var(--muted);
    cursor: default;
    opacity: 0.4;
}

.birthdays-line { margin-top: 0.75rem; margin-bottom: 0; }

.week-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.week-nav a { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.week-nav a:hover { text-decoration: underline; }

/* The public/congregation schedule reads as a document (a banner with the
   date, then a plain line-by-line list), not a spreadsheet — this is the
   one thing on the site meant to be read start to finish, not scanned. */
.schedule-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Shortcut for whoever can edit the Богослужение template (owner,
   presbyter, IT) straight from the public schedule they're already
   looking at — see public_schedule(): can_edit in app.py. */
.schedule-edit-button {
    white-space: nowrap;
}

/* A one-off notice for a specific Saturday ("no service this week", a
   guest, anything congregants should see immediately) — set by owner/IT
   from the Богослужение template page, shown here above the usual role
   list, independent of hiding individual roles. Warm/attention colors
   (same tokens as flash messages) so it reads as "read me first" without
   looking like an error. */
.announcement-banner {
    background: var(--warn-bg);
    color: var(--warn-ink);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-weight: 600;
    white-space: pre-line;
}

.date-picker-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-picker-bar input[type="date"] { width: auto; margin-top: 0; }

.date-nav {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.1rem 0.4rem;
}
.date-nav:hover { text-decoration: underline; }

/* Public schedule — a modern agenda view, not a facsimile of the printed
   document anymore: service times as small pills, each half of the
   service as its own card with a teal header (matching .table th
   elsewhere), rows as label/value pairs instead of a bulleted list, and
   "Дежурные" called out as its own banner since it's operationally the
   one line people actually need to spot fast. */
.time-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.time-pill {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    color: var(--ink);
    font-weight: 600;
}

.agenda-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.agenda-card-title {
    background: var(--teal);
    color: var(--teal-ink);
    margin: 0;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
}

.agenda-subhead {
    margin: 0.9rem 1.25rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.agenda-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.agenda-card > .agenda-row:last-child { border-bottom: none; }

.agenda-role { color: var(--ink); }

.agenda-person { font-weight: 700; color: var(--accent); text-align: right; }

.agenda-empty { color: var(--muted); }

/* Groups the value (or dash) with the ↑/↓ reorder buttons on the right
   side of a row, so .agenda-row's space-between still splits into just
   two visual halves — role on the left, everything else together on the
   right — instead of spreading three items across the full width. */
.agenda-right {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.agenda-move { display: inline-flex; gap: 0.1rem; }

.agenda-move .move-form { display: inline-block; }

.agenda-move .link-button {
    font-size: 1rem;
    padding: 0 0.15rem;
    color: var(--muted);
}

.agenda-move .link-button:hover { color: var(--accent); opacity: 1; }

.agenda-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--neutral-bg);
    color: var(--neutral-ink);
    font-weight: 400;
    font-size: 0.78rem;
    vertical-align: middle;
}

.agenda-duty {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 10px;
    padding: 0.9rem 1.25rem;
    font-weight: 700;
}

.agenda-duty .agenda-person { color: var(--accent-ink); }

.agenda-duty .agenda-move .link-button { color: var(--accent-ink); opacity: 0.75; }
.agenda-duty .agenda-move .link-button:hover { opacity: 1; }

.role-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-size: 0.95rem;
}

.role-row:last-child { border-bottom: none; }

.role-row input {
    flex: 1 1 220px;
    width: auto;
    margin-top: 0;
}

.flash-list { margin-bottom: 1rem; }

.flash {
    background: var(--warn-bg);
    color: var(--warn-ink);
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

details summary { cursor: pointer; color: var(--accent); }

/* ---------- public landing page ("/" for a logged-out visitor) ---------- */

.landing-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}

.landing-hero-logo {
    /* Logo itself is navy — same treatment as the header brand mark, a
       light backdrop so it doesn't disappear against the cream page. */
    width: 96px;
    height: 96px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.6rem;
    margin-bottom: 1rem;
}

.landing-hero h1 {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
}

.landing-tagline {
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
}

.landing-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-cta-row .button-outline {
    background: none;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.landing-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.landing-card h2 {
    margin-top: 0;
    font-size: 1.05rem;
    color: var(--teal);
}

.landing-join {
    background: var(--accent);
    color: var(--accent-ink);
    text-align: center;
}

.landing-join h2 { color: var(--accent-ink); margin-top: 0; }

.landing-join .landing-cta-row { margin-top: 1rem; }

.landing-join .button-outline {
    background: none;
    color: var(--accent-ink);
    border: 1px solid var(--accent-ink);
}