/* ===================================================================
   Account area — warm foundation.

   Loaded after warm-theme.css (which supplies the --h-* tokens and the
   scoped .btn-primary / .form-control repaints) on the signed-in customer
   pages that were still on the legacy sage theme. Everything is scoped
   under .tt-warm so the vendor (green) and admin (dark) portals keep
   their own look, and it overrides the sage styling that the global
   tailstap.css paints onto shared Bootstrap chrome (cards, modals,
   tables, headers).

   Matches the already-warm account pages (dashboard, My Bookings,
   My Pets, profile).
   =================================================================== */

/* Remap the legacy sage brand vars to warm INSIDE the account pages. This
   single override recolours the many var(--primary-color) usages that
   tailstap.css and the per-page styles rely on — step circles, calendar
   days, time slots, timeline connectors, service/pet card borders,
   text-primary — without touching each rule. */
.tt-warm {
    --primary-color: var(--h-orange);
    --secondary-color: var(--h-orange-dark);
    --brand-tint-light: var(--h-orange-tint);
}

.tt-warm .text-primary { color: var(--h-orange) !important; }

/* --- Cards ----------------------------------------------------------- */
.tt-warm .card {
    border: 1px solid var(--h-border);
    border-radius: 16px;
}
/* tailstap.css paints .card-header with a sage gradient; flatten it. */
.tt-warm .card-header {
    background: transparent;
    border-bottom: 1px solid var(--h-border);
    color: var(--h-ink);
}

/* --- Modals (tailstap paints .modal-header sage) --------------------- */
.tt-warm .modal-header {
    background: var(--h-cream-2);
    color: var(--h-ink);
    border-bottom: 1px solid var(--h-border);
    border-radius: 16px 16px 0 0;
}
.tt-warm .modal-header .modal-title { color: var(--h-ink); }
.tt-warm .modal-header .btn-close { filter: none; }

/* --- Tables ---------------------------------------------------------- */
.tt-warm .table thead th,
.tt-warm .table th {
    color: #78716c;
    font-weight: 600;
    border-bottom-color: var(--h-border);
}
.tt-warm .table-light,
.tt-warm .table-light th,
.tt-warm thead.table-light th { background: var(--h-cream-2); }
.tt-warm .table-hover tbody tr:hover { background: #fbf6ee; }

/* --- Tabs (Bootstrap .nav-tabs) -------------------------------------- */
.tt-warm .nav-tabs { border-bottom-color: var(--h-border); }
.tt-warm .nav-tabs .nav-link {
    color: var(--h-body);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tt-warm .nav-tabs .nav-link:hover { color: var(--h-ink); border-bottom-color: var(--h-border); }
.tt-warm .nav-tabs .nav-link.active {
    color: var(--h-orange);
    background: transparent;
    border-bottom-color: var(--h-orange);
}

/* --- Accordion (Bootstrap) — used by the directory FAQ --------------- */
.tt-warm .accordion-item { border-color: var(--h-border); }
.tt-warm .accordion-button { color: var(--h-ink); }
.tt-warm .accordion-button:not(.collapsed) {
    color: var(--h-orange-dark);
    background: var(--h-orange-tint);
    box-shadow: none;
}
.tt-warm .accordion-button:focus {
    border-color: var(--h-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* --- Pagination ------------------------------------------------------ */
.tt-warm .page-link { color: var(--h-orange-dark); border-color: var(--h-border); }
.tt-warm .page-item.active .page-link {
    background: var(--h-orange);
    border-color: var(--h-orange);
    color: #fff;
}

/* --- Warm header band (replaces the per-page sage gradient heroes) ---- */
.tt-warm .acct-hero {
    background: var(--h-cream-2);
    padding: 1.75rem 0 2rem;
    margin-bottom: 2rem;
}
.tt-warm .acct-wrap { max-width: 1040px; }
.tt-warm .dash-sub { color: var(--h-body); font-size: 0.95rem; }
.tt-warm .acct-hero .btn-light {
    background: #fff;
    border: 1px solid var(--h-border);
    color: var(--h-ink);
}
.tt-warm .acct-hero .btn-light:hover {
    border-color: var(--h-orange);
    color: var(--h-orange-dark);
}

/* --- Compact header (back-link + title) for narrow sub-detail pages --- */
.tt-warm .acct-head { margin-bottom: 1.5rem; }
.tt-warm .acct-back {
    font-family: var(--h-sans);
    font-size: 0.9rem;
    color: #78716c;
    text-decoration: none;
}
.tt-warm .acct-back:hover { color: var(--h-orange-dark); }
.tt-warm .acct-title {
    font-family: var(--h-serif);
    font-weight: 600;
    color: var(--h-ink);
}

/* --- Semantic status/payment badges (shared across detail pages) ------
   These carry meaning, so they keep their green/amber/red/blue hues —
   only the neutral chrome around them goes warm. */
.tt-warm .status-badge {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.tt-warm .status-pending { background: #fef3c7; color: #92400e; }
.tt-warm .status-confirmed { background: #dbeafe; color: #1e40af; }
.tt-warm .status-in_progress { background: #e0e7ff; color: #3730a3; }
.tt-warm .status-completed { background: #d1fae5; color: #065f46; }
.tt-warm .status-cancelled { background: #fee2e2; color: #991b1b; }
.tt-warm .status-no_show { background: #f3f4f6; color: #374151; }
.tt-warm .status-requested { background: #fff3cd; color: #856404; }
.tt-warm .status-declined { background: #f8d7da; color: #721c24; }
.tt-warm .status-expired { background: #e2e3e5; color: #6c757d; }
.tt-warm .payment-pending { background: #fef3c7; color: #92400e; }
.tt-warm .payment-paid { background: #d1fae5; color: #065f46; }
.tt-warm .payment-failed { background: #fee2e2; color: #991b1b; }
.tt-warm .payment-refunded { background: #f3e8ff; color: #6b21a8; }
.tt-warm .payment-processing { background: #e0e7ff; color: #3730a3; }