/*
 * Paw Pampers shared UI tokens + components.
 * Tokens sit on top of the tenant theme (--primary, --text, --card ...) so every theme keeps its colours;
 * the --pp-* fallbacks are the Paw Pampers default palette. Mirrored in Flutter by PawTokens (pp_owner / pp_link).
 */

:root {
    --pp-coral: #e8664a;
    --pp-coral-strong: #c94f35;
    --pp-teal: #0f9d8f;
    --pp-teal-strong: #0b7a70;
    --pp-ink: #1f2933;
    --pp-ink-muted: #52606d;
    --pp-surface: #ffffff;
    --pp-surface-soft: #fbf7f4;
    --pp-line: rgba(31, 41, 51, 0.1);

    --pp-accent-grooming: #8b5cf6;
    --pp-accent-daycare: #0ea5e9;
    --pp-accent-nc: #22a35a;

    --pp-ok: #15803d;
    --pp-ok-bg: #dcfce7;
    --pp-warn: #b45309;
    --pp-warn-bg: #fef3c7;
    --pp-info: #0369a1;
    --pp-info-bg: #e0f2fe;
    --pp-bad: #b91c1c;
    --pp-bad-bg: #fee2e2;
    --pp-neutral: #475569;
    --pp-neutral-bg: #f1f5f9;

    --pp-primary: var(--primary, var(--pp-coral));
    --pp-primary-strong: var(--primary-dark, var(--pp-coral-strong));
    --pp-text: var(--text, var(--pp-ink));
    --pp-text-muted: var(--text-muted, var(--pp-ink-muted));
    --pp-card: var(--card, var(--pp-surface));
    --pp-card-border: var(--card-border, var(--pp-line));

    --pp-radius-sm: 10px;
    --pp-radius: 14px;
    --pp-radius-lg: 20px;
    --pp-space-1: 0.25rem;
    --pp-space-2: 0.5rem;
    --pp-space-3: 0.75rem;
    --pp-space-4: 1rem;
    --pp-space-5: 1.5rem;
    --pp-space-6: 2rem;
    --pp-shadow: 0 10px 30px rgba(31, 41, 51, 0.08), 0 1px 2px rgba(31, 41, 51, 0.06);
    --pp-tap: 44px;
    --pp-line-accent: var(--pp-primary);
}

body.paw-line-grooming { --pp-line-accent: var(--pp-accent-grooming); }
body.paw-line-daycare { --pp-line-accent: var(--pp-accent-daycare); }
body.paw-line-nc { --pp-line-accent: var(--pp-accent-nc); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Layout */
.pp-page { max-width: 1040px; margin: 0 auto; }
.pp-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pp-space-3); margin-bottom: var(--pp-space-5); }
.pp-page-head h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.01em; }
.pp-page-head p { margin: var(--pp-space-1) 0 0; color: var(--pp-text-muted); }
.pp-stack { display: grid; gap: var(--pp-space-3); }
.pp-grid { display: grid; gap: var(--pp-space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Card */
.pp-card {
    background: var(--pp-card);
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    padding: var(--pp-space-4) var(--pp-space-5);
    position: relative;
}
.pp-card--accent { border-left: 4px solid var(--pp-line-accent); }
.pp-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pp-space-3); }
.pp-card__title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.pp-card__meta { margin: var(--pp-space-1) 0 0; color: var(--pp-text-muted); font-size: 0.92rem; }
.pp-card__notes { margin: var(--pp-space-3) 0 0; padding: var(--pp-space-3); border-radius: var(--pp-radius-sm); background: var(--pp-surface-soft); white-space: pre-line; font-size: 0.92rem; }
.pp-card__actions { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); margin-top: var(--pp-space-4); align-items: center; }

/* Buttons */
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pp-space-2);
    min-height: var(--pp-tap); padding: 0 1.1rem; border-radius: 999px;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent; transition: transform 0.08s ease, background-color 0.15s ease;
}
.pp-btn:active { transform: translateY(1px); }
.pp-btn:focus-visible { outline: 3px solid var(--focus, var(--pp-primary)); outline-offset: 2px; }
.pp-btn--primary { background: var(--pp-primary); color: #fff; }
.pp-btn--primary:hover { background: var(--pp-primary-strong); }
.pp-btn--ghost { background: transparent; color: var(--pp-text); border-color: var(--pp-card-border); }
.pp-btn--ghost:hover { background: var(--pp-surface-soft); }
.pp-btn--danger { background: transparent; color: var(--pp-bad); border-color: rgba(185, 28, 28, 0.35); }
.pp-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Status chips */
.pp-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
    background: var(--pp-neutral-bg); color: var(--pp-neutral);
}
.pp-chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.pp-chip--pending_host, .pp-chip--warn { background: var(--pp-warn-bg); color: var(--pp-warn); }
.pp-chip--awaiting_payment, .pp-chip--info { background: var(--pp-info-bg); color: var(--pp-info); }
.pp-chip--confirmed, .pp-chip--ok, .pp-chip--completed { background: var(--pp-ok-bg); color: var(--pp-ok); }
.pp-chip--cancelled, .pp-chip--expired, .pp-chip--host_cancelled_held, .pp-chip--bad { background: var(--pp-bad-bg); color: var(--pp-bad); }

/* Tabs */
.pp-tabs { display: flex; gap: var(--pp-space-2); flex-wrap: wrap; margin-bottom: var(--pp-space-4); }
.pp-tab {
    display: inline-flex; align-items: center; gap: var(--pp-space-2); min-height: 40px; padding: 0 1rem;
    border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--pp-text);
    border: 1.5px solid var(--pp-card-border); background: var(--pp-card);
}
.pp-tab[aria-current="page"] { background: var(--pp-line-accent); border-color: var(--pp-line-accent); color: #fff; }
.pp-tab__count { min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: rgba(0, 0, 0, 0.08); font-size: 0.78rem; text-align: center; }

/* Steps + sticky summary (booking wizard) */
.pp-steps { display: flex; gap: var(--pp-space-2); list-style: none; padding: 0; margin: 0 0 var(--pp-space-4); counter-reset: ppstep; }
.pp-steps li { flex: 1; counter-increment: ppstep; font-size: 0.82rem; font-weight: 700; color: var(--pp-text-muted); padding-top: var(--pp-space-2); border-top: 4px solid var(--pp-card-border); }
.pp-steps li::before { content: counter(ppstep) ". "; }
.pp-steps li[aria-current="step"], .pp-steps li.is-active, .pp-steps li.is-done { color: var(--pp-text); border-top-color: var(--pp-line-accent); }
.pp-summary { position: sticky; bottom: var(--pp-space-3); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--pp-space-3); }

/* Empty + skeleton */
.pp-empty { text-align: center; padding: var(--pp-space-6) var(--pp-space-4); color: var(--pp-text-muted); }
.pp-empty__icon { font-size: 2.4rem; line-height: 1; margin-bottom: var(--pp-space-3); }
.pp-empty h2 { margin: 0 0 var(--pp-space-2); color: var(--pp-text); font-size: 1.2rem; }
.pp-skeleton { border-radius: var(--pp-radius-sm); background: linear-gradient(90deg, var(--pp-neutral-bg) 25%, #e2e8f0 37%, var(--pp-neutral-bg) 63%); background-size: 400% 100%; animation: pp-shimmer 1.4s ease infinite; min-height: 1rem; }
@keyframes pp-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .pp-skeleton { animation: none; } }

/* Forms inside cards */
.pp-inline-form { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); align-items: center; }
.pp-inline-form select, .pp-inline-form input[type="text"] { min-height: var(--pp-tap); margin: 0; width: auto; flex: 1 1 12rem; border-radius: var(--pp-radius-sm); }
.pp-details > summary { cursor: pointer; list-style: none; }
.pp-details > summary::-webkit-details-marker { display: none; }
.pp-details[open] > summary { margin-bottom: var(--pp-space-3); }
.pp-hint { font-size: 0.82rem; color: var(--pp-text-muted); margin: var(--pp-space-1) 0 0; }
.pp-countdown { font-size: 0.82rem; font-weight: 700; color: var(--pp-warn); }

/* Nav badge */
.nav-badge { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; margin-left: 0.25rem; border-radius: 999px; background: var(--pp-primary); color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 1.3rem; text-align: center; }

/* Host cards (public costs + search) */
.pp-host { display: grid; grid-template-columns: 72px 1fr; gap: var(--pp-space-3); align-items: start; }
.pp-host__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--pp-neutral-bg); display: grid; place-items: center; font-size: 1.8rem; }
.pp-host__name { margin: 0; font-weight: 800; }
.pp-host__bio { margin: var(--pp-space-1) 0 0; color: var(--pp-text-muted); font-size: 0.92rem; }
.pp-badges { display: flex; flex-wrap: wrap; gap: var(--pp-space-1); margin-top: var(--pp-space-2); }

@media (max-width: 640px) {
    .pp-card { padding: var(--pp-space-4); }
    .pp-card__actions .pp-btn { flex: 1 1 auto; }
}