/* ============================================================
   shared.css — Design primitives shared across all pages/components
   ============================================================ */

/* ── Spinner ───────────────────────────────────────────────── */

.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Login variant — larger, white on dark bg */
.spinner-small.spinner-light {
    width: 18px;
    height: 18px;
    border-color: #ffffff;
    border-top-color: transparent;
}

/* ── Form Controls ─────────────────────────────────────────── */

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    background-color: #f8f9fa;
    transition: border-color 0.15s ease-in-out;
}

.form-control:focus {
    border-color: #212529;
    outline: none;
    background-color: #ffffff;
}

.form-hint {
    font-weight: 400;
    color: #9ca3af;
}

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* All action buttons keep a solid fill and a border so the dimmed (disabled)
   state stays clearly visible instead of fading to transparent during saves.
   The `.btn.btn-*` compound (0,2,0 specificity) predates T-28, when it had to
   win over the vendored Bootstrap's `.btn:disabled`; Bootstrap is gone, but
   the compound stays — it is harmless and future-proofs these fills. */
.btn.btn-save {
    background-color: #212529;
    color: #ffffff;
    border: 1px solid #212529;
}

.btn.btn-save:focus {
    background-color: #212529;
    color: #ffffff;
    outline: none;
}

.btn.btn-cancel {
    background-color: #f1f3f5;
    color: #495057;
    border: 1px solid #ced4da;
}

.btn.btn-cancel:focus {
    background-color: #f1f3f5;
    color: #495057;
    outline: none;
}

.btn.btn-delete-day {
    background: none;
    border: 1px solid #f1aeb5;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
}

.btn-delete-day:hover {
    background-color: #fee2e2;
}

.btn-delete-day:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Panel Actions (button container for sheets/panels) ──── */

.panel-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.panel-actions-buttons {
    display: flex;
    gap: 12px;
}

.panel-actions-secondary {
    display: flex;
    justify-content: center;
}

/* ── Keyframe Animations ───────────────────────────────────── */

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Error Banner ──────────────────────────────────────────── */

/* T-28: local replacement for the only Bootstrap classes the markup used
   (Home's API-error fallback screen). */
.alert {
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.error-banner {
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* ── Page Layout ───────────────────────────────────────────── */

.page-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 16px;
    font-family: system-ui, -apple-system, sans-serif;
}

/* On mobile the fixed 62px bottom nav (NavMenu) overlays the viewport: EVERY
   page must reserve that space or its last elements end up half-hidden
   (F-16 QA finding). Global here so no page ever forgets. */
@media (max-width: 640px) {
    .page-container {
        padding-bottom: calc(62px + 24px + env(safe-area-inset-bottom, 0px));
    }
}

.page-title {
    font-size: 22px;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

/* ── F-18: Legal pages (Privacy / Terms) — shared by both pages ── */
.legal-page {
    color: #374151;
    line-height: 1.6;
}

.legal-back {
    display: inline-block;
    background: none;
    border: none;
    padding: 12px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
}

.legal-back:hover {
    text-decoration: underline;
}

.legal-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 8px 0 4px;
}

.legal-meta {
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 16px;
}

.legal-draft-note {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

.legal-draft-note code {
    background: #fef3c7;
    padding: 0 4px;
    border-radius: 4px;
}

.legal-body h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 22px 0 8px;
}

.legal-body p {
    margin: 0 0 12px;
    font-size: 14px;
}

.legal-body ul {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 14px;
}

.legal-body li {
    margin-bottom: 6px;
}

.legal-body a {
    color: #4f46e5;
    font-weight: 600;
}

.legal-related {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

/* ── F-18: legal links (login / register / profile footers) ── */
.legal-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-top: 12px;
    color: #94a3b8;
}

.legal-links a {
    color: #6c757d;
    text-decoration: none;
    font-weight: 600;
}

.legal-links a:hover {
    text-decoration: underline;
}

.page-subtitle {
    margin: 4px 0 20px 0;
    font-size: 14px;
    color: #6c757d;
}

/* ── Toggle Tabs (segmented pill control) ──────────────────── */

.toggle-tabs {
    display: flex;
    gap: 4px;
    background: #f1f3f5;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.toggle-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.toggle-tab.active {
    background: #ffffff;
    color: #212529;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.today-status-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 12px 4px;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    overflow: visible;
    background: linear-gradient(135deg, #4b5563, #1f2937);
    color: white;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    font-family: system-ui, -apple-system, sans-serif;
    flex-shrink: 0;
}

/* Slot 1 — Blue */
/* S-11 QA: slot 0 — inactive/departed member accent (gray). */
.today-status-card.role-0-active {
    background: linear-gradient(135deg, #868e96, #495057);
    box-shadow: 0 4px 14px rgba(73, 80, 87, 0.35);
}

.today-status-card.role-1-active {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.40);
}

/* Slot 2 — Pink */
.today-status-card.role-2-active {
    background: linear-gradient(135deg, #e11d48, #9f1239);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.38);
}

/* Slot 3 — Teal */
.today-status-card.role-3-active {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.40);
}

/* Slot 4 — Orange (matches role-4-day) */
.today-status-card.role-4-active {
    background: linear-gradient(135deg, #ea580c, #9a3412);
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.40);
}

.card-unassigned-icon {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

.card-unassigned-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.card-unassigned-title {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.95;
}

.card-unassigned-hint {
    font-size: 11px;
    opacity: 0.8;
    line-height: 1.4;
}

/* F-31: invite prompt occupying the card's bottom half while the family is solo.
   Sits inside .card-bottom-row (white text on the user's accent colour). */
.card-invite-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.card-invite-title {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.97;
}
.card-invite-hint {
    font-size: 11px;
    opacity: 0.82;
    line-height: 1.4;
}
.card-invite-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease, transform 0.1s ease;
}
.card-invite-btn:hover { background: #ffffff; }
.card-invite-btn:active { transform: scale(0.97); }

.today-status-card.card-navigable {
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}

.today-status-card.card-navigable:hover {
    filter: brightness(1.08);
}

.today-status-card.card-navigable:active {
    transform: scale(0.985);
}

.card-return-hint {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.card-return-hint span {
    font-size: 10px;
    font-weight: 700;
    background: var(--theme-gradient-from, #667eea);
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    display: block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    animation: pulse-hint 2s ease-in-out infinite;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 8px;
    flex-wrap: nowrap;
    padding-bottom: 4px;
}

.card-greeting {
    font-size: clamp(12px, 3.5vw, 14px);
    opacity: 0.95;
    flex: 1;
    min-width: 0;
}

.card-greeting strong {
    font-weight: 700;
}

.card-date {
    font-size: 11px;
    opacity: 0.72;
    white-space: nowrap;
    text-transform: capitalize;
    flex-shrink: 0;
}

.card-bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -14px -10px;
    padding: 8px 14px 10px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-bottom-row.role-0-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(108, 117, 125, 0.30)),
                linear-gradient(135deg, rgba(134, 142, 150, 0.82), rgba(73, 80, 87, 0.82));
}

.card-bottom-row.role-1-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(29, 78, 216, 0.30)),
                linear-gradient(135deg, rgba(29, 78, 216, 0.82), rgba(30, 58, 138, 0.82));
}

.card-bottom-row.role-2-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(225, 29, 72, 0.30)),
                linear-gradient(135deg, rgba(225, 29, 72, 0.82), rgba(159, 18, 57, 0.82));
}

.card-bottom-row.role-3-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(13, 148, 136, 0.30)),
                linear-gradient(135deg, rgba(13, 148, 136, 0.82), rgba(15, 118, 110, 0.82));
}

.card-bottom-row.role-4-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(234, 88, 12, 0.30)),
                linear-gradient(135deg, rgba(234, 88, 12, 0.82), rgba(154, 52, 18, 0.82));
}

.card-bottom-row.card-bottom-row-unified {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.18);
}

.today-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
    align-self: center;
}

.card-responsible {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.card-responsible-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.card-responsible-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.card-responsible-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.8;
    flex-shrink: 0;
}

.card-badges-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.card-responsible-name {
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.today-role-tag {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.82;
    background: rgba(255, 255, 255, 0.16);
    padding: 2px 8px;
    border-radius: 8px;
    flex-shrink: 0;
}

.swap-badge {
    font-size: 11px;
    font-weight: 600;
    background: #ffc107;
    color: #212529;
    padding: 2px 8px;
    border-radius: 8px;
    flex-shrink: 0;
}

.card-swap-time {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 7px;
    border-radius: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.today-handoff {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    margin-left: auto;
}

.handoff-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.8;
}

.handoff-date {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.handoff-days {
    font-size: 10px;
    opacity: 0.85;
    line-height: 1.2;
}

.today-handoff.handoff-urgent {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4);
    animation: pulse-urgent 2s ease-in-out infinite;
}

.today-handoff.handoff-soon {
    background: rgba(245, 158, 11, 0.22);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}

.today-handoff.handoff-near {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@media (min-width: 641px) {
    .today-status-card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ========== SCHEDULE WIZARD ========== */

.wizard-sheet {
    max-height: 90dvh;
}

.wizard-subtitle {
    margin: 0 0 16px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.wizard-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0 12px;
    font-size: 13px;
}

.wizard-preview-label {
    font-weight: 600;
    color: #0369a1;
    flex-shrink: 0;
}

.wizard-preview-value {
    color: #0c4a6e;
}

.wizard-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    text-align: center;
}

.wizard-success-icon {
    font-size: 40px;
}

.wizard-success p {
    margin: 0;
    font-size: 15px;
    color: #065f46;
    font-weight: 500;
    line-height: 1.4;
}

/* Wizard block builder */

.wizard-blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.wizard-block-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wizard-block-num {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

.wizard-block-parent {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
}

.wizard-block-x {
    font-size: 13px;
    color: #9ca3af;
    flex-shrink: 0;
}

.wizard-block-days {
    width: 56px;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
    flex-shrink: 0;
}

.wizard-block-unit {
    font-size: 12px;
    color: #6b7280;
    flex-shrink: 0;
}

.wizard-block-remove {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    flex-shrink: 0;
}

.wizard-block-remove:hover {
    opacity: 1;
}

.wizard-add-block {
    background: none;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s, color 0.15s;
}

.wizard-add-block:hover {
    border-color: #9ca3af;
    color: #374151;
}

/* S-11: destructive actions (leave family, delete family). */
.btn.btn-danger {
    background-color: #c92a2a;
    color: #ffffff;
    border: 1px solid #c92a2a;
}

.btn.btn-danger:focus {
    background-color: #c92a2a;
    color: #ffffff;
    outline: none;
}

/* ── U-23: guided-tour spotlight ────────────────────────────────────────────
   Global, not component-isolated, on purpose: the classes are applied by
   `js/tour.js` to elements that belong to OTHER components (the today card, the
   calendar legend, the wizard button, the notifications tab in the nav). An
   isolated rule would never match them.

   The layer is 9001/9002 — above the nav (300) and the sheets (100), below the
   toasts (9999), which must stay readable if one fires mid-tour. */

.tour-spotlight {
    position: relative;
    z-index: 9002;
    border-radius: 10px;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35);
}

/* A positioned ancestor that creates its own stacking context has to come up
   with the target, or the highlight is drawn inside a layer the overlay covers. */
.tour-spotlight-lift {
    z-index: 9001 !important;
}