/* =====================================================================
   SHARED STYLES
   ---------------------------------------------------------------------
   Reusable looks for things that appear many times (form fields,
   buttons, pop-up windows, tabs, progress bars). Changing a style here
   changes it everywhere it's used.

   Colors like rgb(var(--accent-600)) come from the chosen palette
   (see js/themes.js), so they change when the palette changes.
   ===================================================================== */

/* ---------- Page background (soft color from the palette) ---------- */
body { background-color: var(--page-bg, #f8fafc); }

/* ---------- Who sees what (Admin / Family / Public views) ----------
   "admin-only"  = add/edit buttons; hidden for Family and Public
   "family-only" = private details; completely hidden for Public      */
body:not(.view-admin) .admin-only { display: none !important; }
body.view-public .family-only { display: none !important; }

/* Only people whose real role is Admin get the view-preview buttons */
body:not(.is-real-admin) .admin-preview-only { display: none !important; }
/* Welcome-screen note for people who can't add profiles */
body.view-admin .viewer-only-note { display: none; }

/* ---------- "Saving… / All changes saved" message in the header ---------- */
.save-status { font-size: 11px; font-weight: 600; color: #94a3b8; }
.save-status.save-saved { color: #86efac; }
.save-status.save-error { color: #fca5a5; }

/* ---------- Admin / Family / Public buttons in the header ---------- */
.view-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    border-radius: 10px;
    transition: background 0.15s;
}
.view-btn:hover { background: #334155; }
.view-btn.is-active {
    background: #fff;
    color: #0f172a;
}

/* ---------- Section headings ---------- */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}
.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: #0f172a;
}
.section-sub { font-size: 12px; color: #64748b; margin-top: 2px; }

/* TEXT SIZE STANDARDS (used throughout the page)
     Section heading (under a tab) ....... .section-title  22px serif
     Item heading (an email, a part) ..... .item-title     18px serif
     Name in a small card ................ 14px bold
     Body text ........................... 14px (12px inside small cards)
     Small uppercase labels .............. 11px bold
     Dates and captions .................. 12px                          */
.item-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    color: #0f172a;
}
.detail-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--accent-700));
}

/* ---------- Hide scrollbars on sideways-scrolling tab rows ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Room for the phone's notch when installed as an app ---------- */
.safe-top { padding-top: env(safe-area-inset-top); }

/* ---------- Form fields ---------- */
.field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.field-input {
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 14px;
    color: #1e293b;
}
.field-input:focus {
    outline: none;
    border-color: rgb(var(--accent-500));
    box-shadow: 0 0 0 3px rgb(var(--accent-200));
}
.field-help {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
}
.form-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--accent-700));
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 4px;
    padding-top: 6px;
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: rgb(var(--accent-700));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: background 0.15s;
}
.btn-primary:hover { background: rgb(var(--accent-800)); }
.btn-cancel {
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 12px;
    background: #fff;
}
.btn-cancel:hover { background: #f1f5f9; }

/* ---------- P-Day bar labels ("P-Day This Week:", "Transfer Days:") ----------
   Second palette color, so they differ from the progress bars below */
.pday-label {
    color: rgb(var(--accent2-700));
    font-weight: 800;
}

/* ---------- Small badges ---------- */
.privacy-badge {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}
/* Percent badges on the progress meters use the palette's third color,
   like the bars, so they don't repeat the tab colors below them */
.pct-badge {
    background: #f8fafc;
    color: rgb(var(--accent3-800));
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
}
.tag-accent3 {
    display: inline-block;
    background: rgb(var(--accent3-100));
    color: rgb(var(--accent3-900));
    border: 1px solid rgb(var(--accent3-200));
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
}
.tag-accent2 {
    display: inline-block;
    background: rgb(var(--accent2-100));
    color: rgb(var(--accent2-900));
    border: 1px solid rgb(var(--accent2-200));
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
}

/* ---------- Tabs ---------- */
.top-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
    color: #475569;
    transition: background 0.15s;
}
.top-tab:hover { background: #f1f5f9; }
.top-tab.is-active {
    background: rgb(var(--accent-700));
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* The row holding a group of tabs, plus the fold-up arrow on the right.
   Both tab groups look the same; the lower group uses the palette's
   second color so the two are easy to tell apart. */
.tab-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
/* The tabs inside a row: side by side on computers; on phones they
   form a two-column grid so every tab is visible (no hidden scrolling) */
.tab-list {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}
.tab-list .top-tab {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}
@media (min-width: 640px) {
    .tab-list { display: flex; }
    .tab-list .top-tab { white-space: nowrap; }
}
.tab-bar-2 .top-tab.is-active { background: rgb(var(--accent2-700)); }
.tab-bar-3 .top-tab.is-active { background: rgb(var(--accent3-700)); }
.collapse-btn {
    flex-shrink: 0;
    padding: 8px;
    border-radius: 10px;
    color: #64748b;
    transition: transform 0.2s, background 0.15s;
}
.collapse-btn:hover { background: #f1f5f9; }
.collapse-btn.is-collapsed { transform: rotate(180deg); }
/* When a group is folded up, its tabs stay visible but look quieter */
.tab-bar.is-collapsed .top-tab.is-active { background: rgb(var(--accent-100)); color: rgb(var(--accent-900)); box-shadow: none; }
.tab-bar-2.is-collapsed .top-tab.is-active { background: rgb(var(--accent2-100)); color: rgb(var(--accent2-900)); }
.tab-bar-3.is-collapsed .top-tab.is-active { background: rgb(var(--accent3-100)); color: rgb(var(--accent3-900)); }


/* ---------- Progress bars (no spinning or animation stripes) ---------- */
.meter-track {
    width: 100%;
    height: 18px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 2px;
    overflow: hidden;
}
.meter-fill {
    height: 100%;
    min-width: 6px;
    border-radius: 999px;
    background: rgb(var(--accent3-500)); /* third color: different from the tabs below */
    transition: width 0.5s ease;
}

/* ---------- Recent-photos slideshow ---------- */
.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.slide-arrow:hover { background: #fff; }
.slide-dot { width: 6px; height: 6px; border-radius: 999px; background: #cbd5e1; }
.slide-dot.is-active { background: rgb(var(--accent-600)); }

/* ---------- Countdown boxes ---------- */
.countdown-box {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 14px 6px;
}
.countdown-number {
    display: block;
    font-weight: 800;
    font-size: clamp(24px, 6vw, 44px);
    color: rgb(var(--accent-300));
    font-variant-numeric: tabular-nums;
}
/* Each countdown box uses a different palette color */
.countdown-box:nth-child(2) .countdown-number { color: rgb(var(--accent3-300)); }
.countdown-box:nth-child(3) .countdown-number { color: rgb(var(--accent2-300)); }
.countdown-box:nth-child(4) .countdown-number { color: rgb(var(--accent-200)); }
.countdown-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #cbd5e1;
}

/* ---------- Pop-up windows ---------- */
/* Header and footer always stay visible; only the middle scrolls,
   so the X and Save button can always be reached on any screen. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.modal-backdrop:not(.hidden) { display: flex; }
.modal-box {
    background: #fff;
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}
.modal-header {
    background: #0f172a;
    color: #fff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    color: rgb(var(--accent-200));
    line-height: 1.2;
}
.modal-x { color: #94a3b8; padding: 4px; border-radius: 8px; }
.modal-x:hover { color: #fff; }
.modal-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}
.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.modal-footer {
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ---------- Clickable cards (tap to edit — Admin view only) ---------- */
body.view-admin .card-clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
body.view-admin .card-clickable:hover { border-color: rgb(var(--accent-300)); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* ---------- Palette picker in the profile ---------- */
.palette-choice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
}
.palette-choice:hover { border-color: #cbd5e1; }
.palette-choice.is-selected { border-color: #0f172a; }
.palette-swatches { display: flex; height: 22px; border-radius: 8px; overflow: hidden; }
.palette-swatches span { flex: 1; }

/* ---------- Photo list editor (inside the Farewell / Setting Apart / Coming Home pop-up) ---------- */
.photo-edit-row {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px;
}
.photo-edit-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #e2e8f0; }

/* ---------- Printing ---------- */
.print-only { display: none; }
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    body { background: white !important; color: black !important; }
    .page-break { break-after: page; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}