/* ============================================================================
   BARK HARBOR PET GROOMING — "Bubbles & Bows" identity.
   Loaded only for the petgrooming pack; re-skins the shared UI kit into a warm,
   friendly grooming-spa product without touching the other packs. Language: warm
   cream/blush field with a faint soft-bubble motif, cozy ESPRESSO control rail,
   playful CORAL action color, soft teal pop, rounded Fredoka signage type, generous
   14px rounding. Deliberately unlike the daycare pack (sage/clay + Fraunces serif):
   warmer, coral vs sage, rounded-geometric Fredoka vs humanist serif.
   ============================================================================ */
:root {
    --accent: #ef6e5b;            /* coral */
    --accent-2: #34b3c4;          /* soft teal pop */
    --accent-soft: #fdeae4;       /* blush */
    --accent-deep: #d44f3d;       /* deep coral */
    --bg: #fbf4ef;                /* warm cream */
    --panel: #ffffff;
    --ink: #3c2e2a;               /* warm espresso ink */
    --ink-soft: #877570;
    --line: #efe1d9;
    --side: #382924;              /* cozy espresso rail */
    --side-ink: #c9b4ab;
    --side-ink-bright: #ffffff;
    --pos: #3e9d6b;
    --neg: #d44f3d;
    --display-font: "Fredoka", "Inter", sans-serif;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(60,46,42,.05), 0 14px 34px -22px rgba(60,46,42,.4);
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    /* faint soft-bubble / suds motif */
    background-image:
        radial-gradient(circle at 14% 18%, rgba(239,110,91,.06) 0 8px, transparent 9px),
        radial-gradient(circle at 84% 12%, rgba(52,179,196,.06) 0 11px, transparent 12px),
        radial-gradient(circle at 70% 82%, rgba(239,110,91,.05) 0 7px, transparent 8px),
        radial-gradient(900px 520px at 100% -10%, rgba(239,110,91,.07), transparent 60%);
    background-attachment: fixed;
}

/* ---------------- Sidebar: cozy espresso rail ---------------- */
.side { background: linear-gradient(180deg, #41312b, #2c201c); border-right: 1px solid #1c1310; }
.brand { border-bottom: 1px solid rgba(255,255,255,.08); margin: -2px -6px 14px; padding: 6px 14px 16px; }
.brand-mark {
    background: var(--accent); border-radius: 12px; box-shadow: 0 0 0 3px rgba(239,110,91,.22);
    font-family: var(--display-font); font-weight: 700; color: #fff;
}
.brand-name { font-family: var(--display-font); font-weight: 600; letter-spacing: .2px; }
.brand-pack { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; color: var(--accent-2); opacity: .95; }
.nav-link {
    border-radius: 10px; font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
    color: #cbb6ad; border-left: 3px solid transparent; padding-left: 9px;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(239,110,91,.26), rgba(239,110,91,.05));
    color: #fff; border-left-color: var(--accent);
}
.nav-link.active .nav-ico { color: #ff9482; opacity: 1; }
.side-foot { text-transform: uppercase; letter-spacing: .14em; font-size: 9.5px; }

/* ---------------- Topbar ---------------- */
.topbar { background: var(--panel); border-bottom: 2px solid var(--accent-soft); }
.client-id strong { font-family: var(--display-font); font-weight: 600; letter-spacing: .2px; }
.client-id .dot { border-radius: 50%; }

/* ---------------- Page header ---------------- */
.page-head { position: relative; margin-bottom: 22px; padding-left: 16px; }
.page-head::before {
    content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 5px;
    background: var(--accent); border-radius: 999px;
}
.page-head h1 { font-family: var(--display-font); font-weight: 600; letter-spacing: -.1px; }
.page-head .sub { color: var(--ink-soft); }

/* headings + numerals use the rounded face */
.rpanel .panel-h h3, .kpi-num, .kpi-val { font-family: var(--display-font); }

/* rounded buttons */
.btn-primary { background: var(--accent); border-color: var(--accent); border-radius: 10px; }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------------- Status badge palette ---------------- */
/* booking / scheduled */
.badge-booked, .badge-confirmed, .badge-requested, .badge-text, .badge-email,
.badge-online, .badge-pending { background: #e4eefb; color: #2a5599; }
/* in-the-salon / working */
.badge-checked-in, .badge-in-progress, .badge-sent, .badge-partial, .badge-paused { background: #fff0d9; color: #a9701a; }
/* READY — the coral highlight (come get your pup!) */
.badge-ready { background: #fde3dd; color: #c1402c; }
/* done / paid / healthy */
.badge-completed, .badge-picked-up, .badge-paid, .badge-active, .badge-booked-status,
.badge-published, .badge-replied, .badge-dog { background: #e3f4ea; color: #1f7a4d; }
/* alerts / cancelled / overdue / handling */
.badge-no-show, .badge-cancelled, .badge-overdue, .badge-reactive, .badge-muzzle-required,
.badge-dismissed, .badge-inactive { background: #fbe3df; color: #c0392b; }
/* temperament / size info chips */
.badge-anxious, .badge-senior, .badge-puppy, .badge-vaccine-expiring, .badge-toy,
.badge-x-large, .badge-cat { background: #fdf3d6; color: #927012; }
.badge-friendly, .badge-easygoing, .badge-small, .badge-medium, .badge-large,
.badge-rebook, .badge-call { background: #eef0f3; color: #59636e; }

.pg-pos { color: var(--pos); } .pg-neg { color: var(--neg); }
.pg-money { font-variant-numeric: tabular-nums; }