/*
 * Wedding Budget
 * Copyright (c) 2026 Amar Micro Inc.
 * Author: Jacques Amar
 *
 * All rights reserved. Proprietary software — see LICENSE for terms.
 *
 * Version: 1.0.0
 *
 * Project-specific styles and CSS custom properties.
 */

/* Fonts (Cormorant Garamond + Lato) are loaded via <link rel="preconnect">
 * and a stylesheet <link> in lib/components/header.php — NOT a CSS @import,
 * which would serialize behind app.css and block first paint. Keep them there. */

/* ── Color Palette ───────────────────────────────────── */
:root {
    /* App is light-themed; tell the UA so native controls/scrollbars match. */
    color-scheme: light;

    /* Logo watermark opacity — shared by the branded empty state, the dashboard
       logo panel, and the breakdown empty state. Change once, applies everywhere. */
    --logo-watermark-opacity: 0.38;

    /* Navigation */
    --nav-bg: #1c1612;
    --nav-text: #c8bdb0;
    --nav-brand-color: #f0e8dc;
    --nav-link-color: #9a8878;
    --nav-link-hover-bg: rgba(184, 150, 90, 0.18);
    --nav-link-hover-color: #f0e8dc;
    --nav-link-active-bg: rgba(184, 150, 90, 0.28);
    --nav-link-active-color: #d4a853;
    --nav-dropdown-border: rgba(212, 168, 83, 0.2);
    --nav-dropdown-bg: #231e18;
    --nav-filter-bg: rgba(255, 255, 255, 0.07);
    --nav-filter-color: #c8bdb0;

    /* Page */
    --page-bg: #f7f4ef;
    --content-bg: #ffffff;
    --text-primary: #1e1a16;
    --text-secondary: #6b5f52;
    --text-muted: #a08c7a;

    /* Accents */
    --primary: #b8965a;
    --primary-hover: #9a7a44;
    --success: #5a8a6a;
    --danger: #c97d7d;
    --warning: #c9a055;
    --info: #6a8aaa;

    /* Environment framing (dev/QA experiment — see site_env() / .env-bar).
       Scheme keys mirror the admin env palette; live shows nothing. */
    --env-green:  #3aaa6a;
    --env-blue:   #4a90d9;
    --env-amber:  #e0a030;
    --env-red:    #e05555;
    --env-purple: #9b59b6;
    --env-slate:  #64748b;

    /* Default/secondary action buttons — soft-gold tint of --primary with a
       gold keyline and deep-brown text. Saturated enough that an action never
       blends into --page-bg (#f7f4ef) or --content-bg (#fff), one clear step
       below the filled gold .btn-primary. */
    --btn-neutral-bg: #ddbf85;
    --btn-neutral-bg-hover: #d0ad69;
    --btn-neutral-color: #463618;
    --btn-neutral-border: #b8965a;

    /* Budget action button — steel-blue, distinct from gold (primary) and
       green (success/pay), so "+ Budget" always reads as a budget action. */
    --btn-budget-bg: #5a7fa0;
    --btn-budget-bg-hover: #4a6f8e;
    --btn-budget-color: #ffffff;
    --btn-budget-border: #4a6f8e;

    /* Borders & Shadows */
    --border-color: #e0d8cc;
    --shadow-sm: 0 1px 3px rgba(30, 20, 10, 0.07);
    --shadow-md: 0 3px 10px rgba(30, 20, 10, 0.11);
    --btn-radius: 0.25rem;           /* button corners — matches --field-radius  */

    /* Table */
    --table-header-bg: #f2ece2;
    --table-row-hover: #fdf8f2;
    --table-stripe-bg: #faf6f0;

    /* Variance */
    --variance-positive: #5a8a6a;
    --variance-negative: #c97d7d;

    /* Active row */
    --row-active-bg: #fdf3e0;

    /* Input */
    --input-bg: #fff;

    /* Form fields — reusable form-field component (see base/forms.css).
     * All field sizing/colour flows through these; never hardcode in a rule. */
    --field-gap: 0.85rem;            /* vertical space between fields            */
    --field-padding-y: 0.5rem;
    --field-padding-x: 0.6rem;
    --field-radius: 0.25rem;
    --field-font-size: 0.9rem;       /* control text                            */
    --field-label-size: 0.72rem;     /* floated / top label                     */
    --field-help-size: 0.72rem;      /* helper & error text                     */
    --field-bg: var(--input-bg);
    --field-text: var(--text-primary);
    --field-border: var(--border-color);
    --field-border-focus: var(--primary);
    --field-focus-ring: rgba(184, 150, 90, 0.22);   /* tint of --primary        */
    --field-label-color: var(--text-secondary);
    --field-placeholder-color: var(--text-muted);
    --field-invalid: var(--danger);
    --field-invalid-ring: rgba(201, 125, 125, 0.22); /* tint of --danger         */
    --field-accent: var(--primary);  /* accent-color for checkbox / radio       */

    /* Modal */
    --modal-bg: #fff;
    --modal-overlay-bg: rgba(20, 14, 8, 0.55);
    --modal-shadow: 0 8px 32px rgba(20, 14, 8, 0.22);

    /* Fonts */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans:  'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Responsive table breakpoints — documentation mirror of the @container
     * rules below. Columns drop ONE tier at a time as the table wrapper
     * narrows (P4 first, then P3, then P2; P1 never), so the table degrades
     * gradually instead of in big jumps. @container conditions can't read CSS
     * vars, so these literals are hand-kept in sync; nothing reads the tokens
     * at runtime.                                                             */
    --bp-p4: 68rem;   /* col-priority-4 hidden below this width  (drops first) */
    --bp-p3: 56rem;   /* col-priority-3 hidden below this width                */
    --bp-p2: 40rem;   /* col-priority-2 hidden below this width  (drops last)  */
}

/* ── Responsive table column priorities ─────────────────────────────────────
 * Assign col-priority-1 through col-priority-4 to every <th> and its <td>s.
 * Priority 1 is always visible. Never hide one without the other.
 * Each tier hides at its OWN breakpoint (--bp-p4/p3/p2) so columns leave one
 * step at a time. Rank columns by importance to the page's core question.
 *
 * Uses @container so columns respond to .data-table-wrap's actual rendered
 * width, not the viewport — correct when the wrapper has overflow:auto.
 *
 * Sibling modifiers (added alongside col-priority-N instead of hiding):
 *   .col-wrap     — keep the column but let it wrap (shrinks with content)
 *   .col-truncate — keep the column on one line, overflow hidden with ellipsis
 */
@container (max-width: 68rem) { /* --bp-p4 — first to drop */
    .col-priority-4:not(.col-wrap):not(.col-truncate) { display: none; }
    .col-priority-4.col-wrap { white-space: normal; overflow-wrap: break-word; }
    .col-priority-4.col-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container (max-width: 56rem) { /* --bp-p3 */
    .col-priority-3:not(.col-wrap):not(.col-truncate) { display: none; }
    .col-priority-3.col-wrap { white-space: normal; overflow-wrap: break-word; }
    .col-priority-3.col-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container (max-width: 40rem) { /* --bp-p2 — last to drop */
    .col-priority-2:not(.col-wrap):not(.col-truncate) { display: none; }
    .col-priority-2.col-wrap { white-space: normal; overflow-wrap: break-word; }
    .col-priority-2.col-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Dense tables (≳13 columns, e.g. Events) start dropping tiers at WIDER widths
 * so the pinned columns never get squished waiting for the default breakpoints.
 * Add `data-table-wrap--dense` to the wrapper to opt in. These rules are
 * additive — they hide the same tiers earlier; the default rules above still
 * apply (harmlessly) at the narrower widths. Tune the values per real layout. */
@container (max-width: 90rem) { /* dense P4 */
    .data-table-wrap--dense .col-priority-4:not(.col-wrap):not(.col-truncate):not(.sub-table *) { display: none; }
    .data-table-wrap--dense .col-priority-4.col-wrap { white-space: normal; overflow-wrap: break-word; }
    .data-table-wrap--dense .col-priority-4.col-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container (max-width: 74rem) { /* dense P3 */
    .data-table-wrap--dense .col-priority-3:not(.col-wrap):not(.col-truncate):not(.sub-table *) { display: none; }
    .data-table-wrap--dense .col-priority-3.col-wrap { white-space: normal; overflow-wrap: break-word; }
    .data-table-wrap--dense .col-priority-3.col-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container (max-width: 54rem) { /* dense P2 */
    .data-table-wrap--dense .col-priority-2:not(.col-wrap):not(.col-truncate):not(.sub-table *) { display: none; }
    .data-table-wrap--dense .col-priority-2.col-wrap { white-space: normal; overflow-wrap: break-word; }
    .data-table-wrap--dense .col-priority-2.col-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Wedding Typography ──────────────────────────────── */
.page-title,
.section-title,
.modal-title,
h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    margin: 0;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color);
    margin: 0 0 0.5rem;
}

.modal-title {
    font-size: 1.15rem;
}

/* Compact confirmation dialogs (delete prompts): balanced type so the title
   no longer dwarfs the message, a roomier centered body, and centered actions. */
.modal.modal-confirm {
    max-width: 24rem;
}

.modal-confirm .modal-title {
    font-size: 1.05rem;
}

.modal-confirm .modal-body {
    padding: 1rem 1.25rem 1.15rem;
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: center;
}

.modal-confirm .modal-footer {
    justify-content: center;
}

/* ── Impersonation banner ─────────────────────────────────────────────────── */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    background: #5c2a00;
    color: #ffe8c0;
    font-size: 0.82rem;
    border-bottom: 2px solid var(--primary);
    font-family: var(--font-sans);
}

.impersonation-icon { font-size: 1rem; flex-shrink: 0; }
.impersonation-text { flex: 1; }

.impersonation-end-link {
    flex-shrink: 0;
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
.impersonation-end-link:hover { color: #f0e8dc; }

/* ── Reset & Base ────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--page-bg);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Nav gold accent line ────────────────────────────── */
.main-nav {
    border-bottom: 1px solid rgba(184, 150, 90, 0.35);
}

/* ── Page Layout ─────────────────────────────────────── */
.page-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1.25rem;
    flex: 1;
    overflow-y: auto;
}

/* ── Toolbar ─────────────────────────────────────────── */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    container-type: inline-size;
}

.page-title-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.page-title-group .page-title {
    margin: 0;
    line-height: 1;
}


.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}



.limit-reason-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
}

.limit-reason-icon:focus {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

/* ── Footer ──────────────────────────────────────────── */
.page-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.3rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    z-index: 200;
    background: var(--page-bg);
    font-family: var(--font-sans);
}

.page-footer-left,
.page-footer-right {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.page-footer-legal-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.page-footer-legal-links a {
    color: var(--text-secondary);
    text-decoration: none;
}

.page-footer-legal-links a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.page-footer-right img {
    height: 1rem;
    width: auto;
    vertical-align: middle;
}

.footer-app-logo {
    height: 1.15rem;
    width: auto;
}

.footer-copyright-logo {
    height: 1rem;
    width: auto;
}


/* ── Buttons ─────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    line-height: 1.3;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(0.35);
    pointer-events: none;
}

/* Default and .btn-secondary buttons (no color modifier). Without an explicit
   background they fall back to the UA grey button face (#e9e9ed-ish), which
   disappears on white modals and the ivory page — actions must read as
   actions. Filled (.btn-primary/-success/-danger), icon-chip and link-style
   buttons keep their own treatment. */
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-budget):not(.btn-icon):not(.btn-link) {
    background: var(--btn-neutral-bg);
    color: var(--btn-neutral-color);
    box-shadow: inset 0 0 0 1px var(--btn-neutral-border);
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-budget):not(.btn-icon):not(.btn-link):hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--btn-neutral-bg-hover);
}

.btn-budget {
    background: var(--btn-budget-bg);
    color: var(--btn-budget-color);
    box-shadow: 0 1px 3px rgba(74, 111, 142, 0.3);
}

.btn-budget:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--btn-budget-bg-hover);
    box-shadow: 0 2px 6px rgba(74, 111, 142, 0.4);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(184, 150, 90, 0.3);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--primary-hover);
    box-shadow: 0 2px 6px rgba(184, 150, 90, 0.4);
}

.btn-success {
    background: var(--success);
    color: #fff;
}

.btn-success:hover:not(:disabled) {
    background: #4a7a5a;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover:not(:disabled) {
    background: #b06060;
}

.btn-sm {
    padding: 0.18rem 0.45rem;
    font-size: 0.7rem;
}

/* Icon-only row actions (Edit = gold pen, Delete = red trash).
   Transparent chip; the SVG inherits its color via currentColor. */
.btn-icon {
    background: transparent;
    box-shadow: none;
    padding: 0.2rem;
    border-radius: var(--btn-radius);
    line-height: 0;
}

.btn-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

/* Icon injected alongside a text label (e.g. confirm-Delete in dialogs)
   tracks the button's text size rather than the larger standalone glyph. */
.btn:not(.btn-icon) .btn-icon-svg {
    width: 1em;
    height: 1em;
}

.btn-icon-edit {
    color: var(--primary);
}

.btn-icon-delete {
    color: var(--danger);
}

.btn-icon:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--table-stripe-bg);
    box-shadow: none;
}

.btn-icon-edit:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--primary-hover);
}

/* ── Accessibility ───────────────────────────────────────
 * Keyboard focus ring: a consistent, brand-colored outline shown only on
 * keyboard navigation (:focus-visible). Scoped to interactive elements that
 * lack a custom focus style — form controls, the emoji picker, the nav filter
 * and the range slider keep their own (intentional) focus treatment. */
.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
.expand-btn:focus-visible,
.modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--btn-radius);
}

/* Respect users who prefer less motion: neutralize transitions/animations
   across the authenticated app (legal/landing pages have their own blocks). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Tables ──────────────────────────────────────────── */
.data-table-wrap {
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
    overflow: auto;
    container-type: inline-size;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    /* Fluid: stays 0.8rem on normal/wide tables, eases down to 0.7rem only as
     * the table wrapper gets very narrow. `cqi` = 1% of the container's inline
     * size (resolves against .data-table-wrap, which is a container). */
    font-size: clamp(0.7rem, 0.55rem + 0.45cqi, 0.8rem);
}

.data-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table th {
    background: var(--table-header-bg);
    padding: 0.4rem 0.65rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--primary);
    white-space: nowrap;
    font-family: var(--font-sans);
}

.data-table th.amount {
    text-align: right;
}

/* Sortable column headers */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    color: var(--primary);
    background: #ede5d8;
}

.data-table th.sortable::after {
    content: ' \2195';
    opacity: 0.3;
    font-size: 0.8em;
    font-weight: 400;
}

.data-table th.sort-asc::after {
    content: ' \2191';
    opacity: 0.7;
}

.data-table th.sort-desc::after {
    content: ' \2193';
    opacity: 0.7;
}

.data-table td {
    padding: 0.32rem 0.65rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

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

.data-table tbody tr:hover {
    background: var(--table-row-hover);
}

.data-table tbody tr:nth-child(even) {
    background: var(--table-stripe-bg);
}

.data-table tbody tr:nth-child(even):hover {
    background: var(--table-row-hover);
}

/* Reclaim horizontal space at the narrow floor by tightening cell side-padding
 * (no text shrink). Pairs with the fluid font on .data-table above. */
@container (max-width: 46rem) {
    .data-table th,
    .data-table td { padding-inline: 0.35rem; }
}

/* ── Variance Colors ─────────────────────────────────── */
.variance-positive {
    color: var(--variance-positive);
    font-weight: 700;
}

.variance-negative {
    color: var(--variance-negative);
    font-weight: 700;
}

/* ── Amount Formatting ───────────────────────────────── */
.amount {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Color Swatch ────────────────────────────────────── */
.color-swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    vertical-align: middle;
}

/* ── Milestone Badge ──────────────────────────────────── */
.milestone-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--table-header-bg);
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    border: 1px solid var(--border-color);
}

.milestone-row {
    opacity: 0.72;
}

/* ── Empty State ─────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    font-family: var(--font-serif);
}

/* ── Page Section (account / party pages) ───────────── */
.page-section {
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.form-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 0.2rem;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Badge / active row highlight (party list) */
.badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 2px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.badge-active {
    background: var(--primary);
    color: #fff;
}

.badge-over-budget {
    background: #c0392b;
    color: #fff;
}

.pay-warning-msg {
    display: none;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    background: #fff3cd;
    color: #7a5800;
    font-size: 0.85rem;
    border-left: 3px solid #f5a623;
}

.party-shared-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    color: var(--text-muted, #666);
    vertical-align: middle;
    cursor: help;
}

.party-shared-icon svg {
    display: block;
}

.party-inviter {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin-left: 0.4rem;
    white-space: normal;
}

tr.is-active-row td {
    background: var(--row-active-bg);
    font-weight: 600;
}

tr.is-active-row td:first-child {
    border-left: 3px solid var(--primary);
}

tr.is-guest-row td {
    background: rgba(0, 0, 0, 0.02);
}

tr.is-guest-row td:first-child {
    border-left: 3px solid var(--text-muted, #999);
}

tr.is-active-row.is-guest-row td:first-child {
    border-left: 3px solid var(--primary);
}

.members-invite {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}



.page-message {
    margin: 0.5rem 0;
    padding: 0.45rem 0.75rem;
    border-radius: 2px;
    font-size: 0.82rem;
    display: none;
    max-width: 40rem;
    border-left: 3px solid transparent;
}

.page-message[data-kind="success"] {
    display: block;
    background: #edf7f1;
    color: #2d6b47;
    border-left-color: var(--success);
}

.page-message[data-kind="error"] {
    display: block;
    background: #fdf0f0;
    color: #8b3333;
    border-left-color: var(--danger);
}

.page-message[data-kind="info"] {
    display: block;
    background: #f0f4f9;
    color: #2d4a6b;
    border-left-color: var(--info);
}

/* ── Branded empty state: a faint app logo above the "no data yet" message.
   Opt-in via the .empty-state--branded modifier (not on loading / no-results /
   sub-table empties). Logo comes from --app-logo-url, set per-language in
   header.php; if it's unset, no image is painted. ── */
.empty-state--branded {
    text-align: center;
    padding-block: 1.5rem;
}
/* Logo only when one actually resolved (html.has-app-logo, set in header.php) —
   otherwise the branded empty state is just centered text, no reserved gap. */
.has-app-logo .empty-state--branded::before {
    content: "";
    display: block;
    width: clamp(6rem, 20vw, 12rem);
    aspect-ratio: 1;
    margin: 0.5rem auto 0.85rem;
    background: var(--app-logo-url) center / contain no-repeat;
    opacity: var(--logo-watermark-opacity);
}

/* ── Reusable toolbar search box (client-side list filter) ── */
.toolbar-search {
    max-width: 16rem;
    flex: 0 1 16rem;
}

/* Search-match highlight (App.highlight) — yellow, inherits surrounding text. */
mark {
    background: #ffe680;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ── Budget modal plan lines: Paid column only in edit mode ── */
#bm-plans-table[data-mode="add"] .bm-col-paid { display: none; }
#bm-plans-table .bm-col-actions { width: 6rem; }
#bm-plans-table .bm-line-actions { white-space: nowrap; text-align: right; }

/* ── Transient toast (UI.toast) ──────────────────────── */
.ui-toast-region {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.ui-toast {
    background: var(--content-bg);
    color: var(--text-primary);
    border-left: 3px solid var(--info);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-md);
    padding: 0.55rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    max-width: 90vw;
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ui-toast--show {
    opacity: 1;
    transform: translateY(0);
}

.ui-toast--success { border-left-color: var(--success); }
.ui-toast--error   { border-left-color: var(--danger); }
.ui-toast--info    { border-left-color: var(--info); }

/* ── Text Utilities ──────────────────────────────────── */
.text-muted {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.8rem;
}

/* ── Required Star ───────────────────────────────────── */
.required-star {
    color: var(--danger);
    font-weight: 700;
}

/* ── Quick-Add Sub-Modal Layer ───────────────────────── */
.qa-overlay {
    z-index: 1100;
}

/* ── Toggle Group (generic) ─────────────────────────── */
.toggle-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.toggle-group .toggle-btn {
    flex: 1;
    padding: 0.3rem 0.7rem;
    border: none;
    background: var(--content-bg);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-sans);
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.toggle-group .toggle-btn + .toggle-btn {
    border-left: 1px solid var(--border-color);
}

.toggle-group .toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

.toggle-group .toggle-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ── Plan Info Box ──────────────────────────────────── */
.plan-info-box {
    background: var(--table-stripe-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: 2px;
    padding: 0.45rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.text-warning {
    color: var(--warning);
}

.text-success {
    color: var(--success);
}

/* ── Dashboard section wrapper — used by timeline_chart.php component ── */
.dashboard-section {
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: clamp(0.45rem, 1.6vw, 0.85rem);
    margin-bottom: 0.6rem;
    box-shadow: var(--shadow-sm);
}

/* ── Page Title / Event Filter — lib/components/page_title_event.php ── */
.page-title-meta {
    font-size: 0.74rem;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.05;
    color: var(--text-secondary);
    white-space: nowrap;
}

.page-title-event-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-inline-start: auto;
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.page-event-filter-wrap {
    display: flex;
    align-items: center;
}

.page-event-filter-select {
    padding: 0.08rem 0.28rem;
    font-size: 0.72rem;
    line-height: 1.1;
    height: 1.35rem;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--input-bg);
    color: var(--text-primary);
    min-width: 7.5rem;
    max-width: 12rem;
}

.page-title-countdown {
    font-size: 0.72rem;
    line-height: 1.05;
    color: var(--text-secondary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 14rem;
}

/* ── Chart Containers — lib/components/timeline_chart.php ── */
.chart-container {
    position: relative;
    height: 15rem;
}

.chart-container-wide {
    height: 20rem;
}

.chart-container-timeline {
    height: 28rem;
}

/* ── Timeline Navigation ─────────────────────────────── */
.timeline-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.timeline-nav .btn-sm {
    padding: 0.18rem 0.55rem;
    font-size: 0.75rem;
    min-width: 2rem;
    text-align: center;
}

.timeline-nav .input-sm {
    padding: 0.18rem 0.4rem;
    font-size: 0.78rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--content-bg);
    color: var(--text-primary);
}

.timeline-range-sep {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.timeline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: 0.25rem;
}

/* ── Range Slider (dual-handle zoom) ─────────────────── */
.range-slider {
    padding: 0.4rem 0.25rem 0.2rem;
    user-select: none;
    -webkit-user-select: none;
}

.range-slider-track {
    position: relative;
    height: 0.3rem;
    background: var(--table-header-bg);
    border-radius: 0.2rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.range-slider-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(184, 150, 90, 0.2);
    border-radius: 0.2rem;
    cursor: grab;
}

.range-slider-fill:active {
    cursor: grabbing;
}

.range-slider-handle {
    position: absolute;
    top: 50%;
    width: 0.75rem;
    height: 1.1rem;
    margin-top: -0.55rem;
    margin-left: -0.375rem;
    background: var(--primary);
    border: 2px solid var(--content-bg);
    border-radius: 2px;
    cursor: ew-resize;
    box-shadow: var(--shadow-sm);
    z-index: 2;
    transition: background 0.15s;
}

.range-slider-handle:hover,
.range-slider-handle:focus {
    background: var(--primary-hover);
    outline: none;
}

/* ── Budget Page — Expandable Rows ───────────────────── */
.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0.1rem 0.25rem;
    line-height: 1;
}

.expand-btn:hover {
    color: var(--primary);
}

.budget-row {
    cursor: default;
}

/* ── Expanded accordion section: the parent row and its detail sub-row read as
   one block — soft tint + a gold left accent stripe with thin top/bottom caps. */
.data-table tbody tr.is-expanded > td {
    background: var(--row-active-bg);
    border-top: 1px solid var(--primary);
    border-bottom: none;                        /* merge into the sub-row below */
}
.data-table tbody tr.is-expanded:hover > td {
    background: var(--row-active-bg);           /* keep the section tint stable on hover */
}
.data-table tbody tr.is-expanded > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);   /* left accent stripe */
}

.sub-row > td {
    padding: 0 0.6rem 0.5rem;
    background: var(--row-active-bg);
    border-bottom: 2px solid var(--primary);    /* cap the bottom of the block */
    box-shadow: inset 3px 0 0 var(--primary);   /* continue the left stripe */
}

.sub-table-wrap {
    margin-top: 0.25rem;
}

.sub-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
}

.sub-table {
    width: 100%;
    font-size: 0.76rem;
}

.sub-table th {
    font-size: 0.66rem;
    padding: 0.28rem 0.5rem;
}

.sub-table td {
    padding: 0.22rem 0.5rem;
}

/* ── Compact Data Table (for inline plan editors) ────── */
.data-table-compact th {
    padding: 0.28rem 0.5rem;
    font-size: 0.66rem;
}

.data-table-compact td {
    padding: 0.22rem 0.5rem;
}

.data-table-compact .form-control-sm {
    padding: 0.18rem 0.35rem;
    font-size: 0.78rem;
}

/* ── Wider Modal for Budget ──────────────────────────── */
.modal-wide {
    max-width: 40rem;
}

/* ── Clone / template wizard event list ──────────────── */
.clone-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.clone-event-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: 0.4rem;
    background: var(--surface-soft, #fafafa);
}
.clone-event-row:has(input[type="checkbox"]:not(:checked)) {
    opacity: 0.55;
}
.clone-event-name {
    font-weight: 500;
}
.clone-event-date {
    min-width: 9rem;
}

/* ── Language Selector ──────────────────────────────── */
.nav-lang-selector {
    margin-left: 0.3rem;
}

/* stylized name */
.wm-logo {
    display: inline-flex;
    align-items: baseline;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1;
}

.wm-logo .wm-word {
    font-style: normal;
    letter-spacing: 0.03em;
}

.wm-logo .wm-dot {
    font-size: 0.9em;
    opacity: 0.45;
}

.wm-logo .wm-money {
    font-style: italic;
    font-size: 1em;
    color: #d4a5a5;
}


/* Budget modal — total of scheduled payments footer */
#bm-plans-table tfoot .bm-total-row {
    border-top: 2px solid var(--border, #cbd5e0);
    background: var(--surface-alt, #f7fafc);
}
#bm-plans-table tfoot .bm-total-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
#bm-plans-table tfoot .bm-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}



.support-form-wrap {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

/* ── Toolbar: event-meta drops below title+actions on narrow containers ── */

@container (max-width: 40rem) {
    .page-title-event-meta {
        flex: 1 1 100%;
        margin-inline-start: 0;
        order: 3;
    }
}

/* ── Paid-feature locks (Phase 1: trial → upgrade) ─────────────────────── */
/* Anchored popover shown when a locked (paid-only) control is clicked. */
.paid-lock-popover {
    position: fixed;
    z-index: 1000;
    max-width: min(20rem, 92vw);
    padding: 0.85rem 1rem;
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-md);
    font-family: var(--font-sans);
}
.paid-lock-popover-msg {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--field-label-color);
}
.paid-lock-popover-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Full-page lock panel (e.g. payments page on a non-paid party). */
.paid-lock-panel {
    text-align: center;
    max-width: 32rem;
    margin: 2rem auto;
    padding: 2.5rem 1.5rem;
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
}
.paid-lock-panel-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.paid-lock-panel h2 {
    font-family: var(--font-serif);
    margin: 0 0 0.75rem;
}
.paid-lock-panel p {
    font-family: var(--font-sans);
    color: var(--field-label-color);
    margin: 0 0 1.5rem;
}

/* A control that is present but paid-locked (still clickable → popover). */
.btn.is-locked { opacity: 0.9; }
.nav-user-item.is-locked { cursor: pointer; }

/* ── Environment framing bars (dev/QA experiment) ──────────────────────────
   Rendered only when environment.use_on_site is on for this environment
   (site_env()); one bar below the header, one above the footer, in the
   environment color scheme. Live/production and admin show nothing. */
.env-scheme-green  { --env-accent: var(--env-green); }
.env-scheme-blue   { --env-accent: var(--env-blue); }
.env-scheme-amber  { --env-accent: var(--env-amber); }
.env-scheme-red    { --env-accent: var(--env-red); }
.env-scheme-purple { --env-accent: var(--env-purple); }
.env-scheme-slate  { --env-accent: var(--env-slate); }

.env-bar {
    height: 4px;
    background: var(--env-accent, transparent);
}

/* Small environment tag next to the footer version (label = environment.name
   from System_Config, e.g. DEV), colored by the environment scheme. */
.env-tag {
    display: inline-block;
    background: var(--env-accent, transparent);
    color: var(--text-primary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    vertical-align: middle;
}