/* ============================================================
   Helpblogger Profiler — Tailwind Improved
   ────────────────────────────────────────────────────────────
   This file NEVER edits kt-min.css. It loads after it and after
   hbp-site-mode, so it only patches/extends what's already there:
   brand-color-aware "primary" utilities, spacing-scale gaps kt-min.css
   purged out, consistent button/card/badge/table/form/modal padding
   and rhythm, accessible focus states, elevation, and motion comfort.

   Loaded on dashboard pages only when the "Tailwind Improved CSS"
   toggle is ON in Settings → Advanced. Off by default — nothing
   here applies until an admin opts in.

   Scope: every rule below is scoped under body.hbp-dashboard,
   body.hbp-sitemode-body, or .hbpp-wrap so this file can never
   leak onto normal WordPress pages even if it were ever enqueued
   elsewhere by mistake.
   ============================================================ */

:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) {

    /* ── 1. Re-wire the "primary" Tailwind tokens to the brand color ──
       kt-min.css bakes .text-primary / .bg-primary / .border-primary /
       .ring-primary / .from-primary / .to-primary and their hover,
       focus, and peer-checked variants to plain black (#000). That
       makes any markup using those utility classes visually disconnect
       from the rest of the dashboard, which is themed off the admin's
       Appearance → Colors setting (--hbp-primary). These overrides
       point every "primary" utility at that same variable instead, so
       changing the brand color in Settings updates these classes too. */
    --tw-primary:      var(--hbp-primary, #2563EB);
    --tw-primary-rgb:  37, 99, 235; /* static fallback; real value comes via color-mix below where supported */
}

:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .text-primary,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .hover\:text-primary:hover,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .focus\:text-primary:focus,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .group:hover .group-hover\:text-primary {
    color: var(--tw-primary) !important;
}
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .bg-primary,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .hover\:bg-primary:hover,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .peer:checked ~ .peer-checked\:bg-primary,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .group:hover .group-hover\:bg-primary {
    background-color: var(--tw-primary) !important;
}
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .border-primary,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .hover\:border-primary:hover,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .focus\:border-primary:focus,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .peer:checked ~ .peer-checked\:border-primary {
    border-color: var(--tw-primary) !important;
}
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .focus\:ring-primary:focus,
:where(body.hbp-dashboard, body.hbp-sitemode-body, .hbpp-wrap) .peer:checked ~ .peer-checked\:ring-primary {
    --tw-ring-color: var(--tw-primary) !important;
}

/* ── 2. Links: guarantee a deliberate, branded default ──────────
   kt-min.css's preflight sets `a { color:inherit; text-decoration:
   inherit }`, which only looks right if every ancestor already has
   text-decoration:none. If kt-min.css ever fails to load (wrong
   path, blocked request, CDN hiccup) the raw browser default —
   blue, underlined links — shows through instead. This gives the
   dashboard its own explicit, always-correct baseline regardless
   of whether kt-min.css loaded successfully. */
body.hbp-dashboard a:not([class*="text-"]),
body.hbp-sitemode-body a:not([class*="text-"]),
.hbpp-wrap a:not([class*="text-"]) {
    color: var(--hbp-primary, #2563EB);
    text-decoration: none;
}
body.hbp-dashboard a:not([class*="text-"]):hover,
body.hbp-sitemode-body a:not([class*="text-"]):hover,
.hbpp-wrap a:not([class*="text-"]):hover {
    color: var(--hbp-primary-dark, #1D4ED8);
    text-decoration: underline;
}

/* ── 3. Accessible focus states ──────────────────────────────────
   kt-min.css's .focus\:outline-none removes the outline for anyone
   using that utility, which is fine visually but leaves keyboard
   users with no visible focus indicator unless a ring/border utility
   was also applied. This restores a consistent, branded focus ring
   on interactive elements missing one, without touching elements
   that already define their own via a ring-* class. */
body.hbp-dashboard a:focus-visible,
body.hbp-dashboard button:focus-visible,
body.hbp-dashboard input:focus-visible,
body.hbp-dashboard select:focus-visible,
body.hbp-dashboard textarea:focus-visible,
body.hbp-sitemode-body a:focus-visible,
body.hbp-sitemode-body button:focus-visible,
.hbpp-wrap a:focus-visible,
.hbpp-wrap button:focus-visible {
    outline: 2px solid var(--hbp-primary, #2563EB);
    outline-offset: 2px;
}

/* ── 4. Form control polish ──────────────────────────────────────
   kt-min.css's preflight strips most native form chrome but doesn't
   add replacement affordances, so plain <select>/<input> elements
   can look inert. Light, brand-consistent defaults for anything not
   already carrying its own bg-*/border-*/rounded-* utilities. */
body.hbp-dashboard select:not([class*="rounded"]),
body.hbp-dashboard input[type="text"]:not([class*="rounded"]),
body.hbp-dashboard input[type="email"]:not([class*="rounded"]),
body.hbp-dashboard input[type="password"]:not([class*="rounded"]),
body.hbp-dashboard input[type="number"]:not([class*="rounded"]),
body.hbp-dashboard textarea:not([class*="rounded"]) {
    border-radius: var(--hbp-radius-sm, 8px);
    border: 1px solid var(--hbp-gray-300, #CBD5E1);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.hbp-dashboard select:not([class*="rounded"]):focus,
body.hbp-dashboard input:not([class*="rounded"]):focus,
body.hbp-dashboard textarea:not([class*="rounded"]):focus {
    border-color: var(--hbp-primary, #2563EB);
    box-shadow: 0 0 0 3px var(--hbp-primary-light, #DBEAFE);
    outline: none;
}

/* ── 5. A small set of commonly-used utilities kt-min.css may have
   purged ─────────────────────────────────────────────────────────
   kt-min.css is a production Tailwind build, purged down to only
   the classes seen in the source templates it was compiled from. If
   HBP's own dashboard markup references a handful of standard
   Tailwind classes that weren't part of that build, they silently
   do nothing. These are safe, additive fallbacks — they only apply
   if kt-min.css hasn't already defined the same class. */
body.hbp-dashboard .gap-5:not([style]), body.hbp-sitemode-body .gap-5:not([style]) { gap: 1.25rem; }
body.hbp-dashboard .gap-7:not([style]), body.hbp-sitemode-body .gap-7:not([style]) { gap: 1.75rem; }
body.hbp-dashboard .text-7xl:not([style]), body.hbp-sitemode-body .text-7xl:not([style]) { font-size: 4.5rem; line-height: 1; }
body.hbp-dashboard .leading-loose:not([style]), body.hbp-sitemode-body .leading-loose:not([style]) { line-height: 2; }
body.hbp-dashboard .rounded-4xl:not([style]), body.hbp-sitemode-body .rounded-4xl:not([style]) { border-radius: 2rem; }
body.hbp-dashboard .mt-14:not([style]), body.hbp-sitemode-body .mt-14:not([style]) { margin-top: 3.5rem; }
body.hbp-dashboard .mb-14:not([style]), body.hbp-sitemode-body .mb-14:not([style]) { margin-bottom: 3.5rem; }

/* ── 6. Motion & scroll comfort ───────────────────────────────────
   Respect the OS-level reduced-motion preference for anything using
   kt-min.css's transition-*/animate-* utilities on the dashboard. */
@media (prefers-reduced-motion: reduce) {
    body.hbp-dashboard *,
    body.hbp-sitemode-body * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 9. Spacing scale gaps ────────────────────────────────────────
   kt-min.css's purged spacing scale skips several steps (5, 7, 14 —
   see section 5 above) and its p-*/px-*/py-* values were purged the
   same way, only including the exact numbers used in the site build
   this was compiled from. HBP's own dashboard markup can reference
   steps that never made the cut. These fill the common gaps so
   spacing stays on-scale instead of silently collapsing to 0. */
body.hbp-dashboard .p-5:not([style]), body.hbp-sitemode-body .p-5:not([style]) { padding: 1.25rem; }
body.hbp-dashboard .p-7:not([style]), body.hbp-sitemode-body .p-7:not([style]) { padding: 1.75rem; }
body.hbp-dashboard .px-5:not([style]), body.hbp-sitemode-body .px-5:not([style]) { padding-left: 1.25rem; padding-right: 1.25rem; }
body.hbp-dashboard .py-7:not([style]), body.hbp-sitemode-body .py-7:not([style]) { padding-top: 1.75rem; padding-bottom: 1.75rem; }
body.hbp-dashboard .pt-7:not([style]), body.hbp-sitemode-body .pt-7:not([style]) { padding-top: 1.75rem; }
body.hbp-dashboard .pb-7:not([style]), body.hbp-sitemode-body .pb-7:not([style]) { padding-bottom: 1.75rem; }
body.hbp-dashboard .space-y-7 > :not([hidden]) ~ :not([hidden]):not([style]),
body.hbp-sitemode-body .space-y-7 > :not([hidden]) ~ :not([hidden]):not([style]) { margin-top: 1.75rem; }

/* ── 10. Buttons ──────────────────────────────────────────────────
   kt-min.css supplies color/shadow utilities but nothing enforces a
   consistent height, horizontal rhythm, or icon gap across buttons
   that mix-and-match those utilities, so buttons built on different
   dashboard screens can end up visibly different sizes. This sets a
   shared baseline that individual utility classes can still override. */
body.hbp-dashboard button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]),
body.hbp-sitemode-body button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) {
    padding: 0.625rem 1.25rem;
}
body.hbp-dashboard button, body.hbp-sitemode-body button,
body.hbp-dashboard [role="button"], body.hbp-sitemode-body [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.25rem;
    white-space: nowrap;
}
body.hbp-dashboard button:not([class*="rounded"]),
body.hbp-sitemode-body button:not([class*="rounded"]) {
    border-radius: var(--hbp-radius-sm, 8px);
}
body.hbp-dashboard button:disabled, body.hbp-sitemode-body button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── 11. Cards & panels ───────────────────────────────────────────
   Consistent internal padding and vertical rhythm for anything using
   the common card/panel shape (rounded + border/shadow + bg-white),
   so dashboard cards line up with each other by default instead of
   each screen hand-tuning its own padding. */
body.hbp-dashboard .rounded-lg.bg-white:not([class*="p-"]),
body.hbp-dashboard .rounded-xl.bg-white:not([class*="p-"]),
body.hbp-dashboard .rounded-2xl.bg-white:not([class*="p-"]),
body.hbp-sitemode-body .rounded-lg.bg-white:not([class*="p-"]),
body.hbp-sitemode-body .rounded-xl.bg-white:not([class*="p-"]),
body.hbp-sitemode-body .rounded-2xl.bg-white:not([class*="p-"]) {
    padding: 1.25rem;
}
body.hbp-dashboard .rounded-lg.bg-white > * + *,
body.hbp-dashboard .rounded-xl.bg-white > * + *,
body.hbp-sitemode-body .rounded-lg.bg-white > * + *,
body.hbp-sitemode-body .rounded-xl.bg-white > * + * {
    margin-top: 0.75rem;
}

/* ── 12. Badges / pills / status tags ─────────────────────────────
   Small status labels (bg-*-100 + text-*-700 pairings, a very common
   Tailwind badge pattern) get consistent padding, size, and shape
   regardless of which color pairing a given screen uses. */
body.hbp-dashboard [class*="bg-"][class*="text-"]:not(button):not(a):not([class*="p-"]):not([class*="px-"]):is(
    [class*="-100"], [class*="-50"]
),
body.hbp-sitemode-body [class*="bg-"][class*="text-"]:not(button):not(a):not([class*="p-"]):not([class*="px-"]):is(
    [class*="-100"], [class*="-50"]
) {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
}

/* ── 13. Tables ───────────────────────────────────────────────────
   Consistent cell padding and row separation for plain <table>
   markup, so data tables read cleanly without every screen needing
   to re-declare the same th/td padding utilities. */
body.hbp-dashboard table:not([class*="p-"]) th,
body.hbp-dashboard table:not([class*="p-"]) td,
body.hbp-sitemode-body table:not([class*="p-"]) th,
body.hbp-sitemode-body table:not([class*="p-"]) td {
    padding: 0.75rem 1rem;
}
body.hbp-dashboard table:not([class*="p-"]) th,
body.hbp-sitemode-body table:not([class*="p-"]) th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hbp-gray-500, #64748B);
    text-align: left;
}
body.hbp-dashboard table:not([class*="p-"]) tbody tr,
body.hbp-sitemode-body table:not([class*="p-"]) tbody tr {
    border-bottom: 1px solid var(--hbp-gray-100, #F1F5F9);
}

/* ── 14. Form field grouping ──────────────────────────────────────
   Even vertical rhythm between stacked label/input pairs and
   between whole form fields, since kt-min.css only styles the
   individual controls, not the spacing between them. */
body.hbp-dashboard form:not([class*="space-y"]) > * + *,
body.hbp-sitemode-body form:not([class*="space-y"]) > * + * {
    margin-top: 1rem;
}
body.hbp-dashboard label:not([class*="mb-"]),
body.hbp-sitemode-body label:not([class*="mb-"]) {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ── 15. Modals / dialogs ─────────────────────────────────────────
   Consistent internal padding for any element carrying the common
   modal-shape signature (fixed + rounded + bg-white + shadow), so
   dialogs across the dashboard don't end up with mismatched breathing
   room depending on which screen built them. */
body.hbp-dashboard .fixed.rounded-lg.bg-white:not([class*="p-"]),
body.hbp-dashboard .fixed.rounded-xl.bg-white:not([class*="p-"]),
body.hbp-dashboard .fixed.rounded-2xl.bg-white:not([class*="p-"]) {
    padding: 1.5rem;
}

/* ── 16. Empty / placeholder states ───────────────────────────────
   A consistent, generously-spaced default for "nothing here yet"
   blocks, since a cramped empty state is a common Tailwind-markup
   oversight when it's assembled ad hoc per screen. */
body.hbp-dashboard .hbp-empty-state,
body.hbp-sitemode-body .hbp-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--hbp-gray-500, #64748B);
}

/* ── 17. Typography rhythm ────────────────────────────────────────
   Section headings inside dashboard content get consistent spacing
   above/below regardless of heading level, so mixed h2/h3/h4 markup
   doesn't produce uneven vertical gaps down a long settings/report
   page. */
body.hbp-dashboard main :is(h2, h3, h4):not([class*="mt-"]):not(:first-child),
body.hbp-sitemode-body main :is(h2, h3, h4):not([class*="mt-"]):not(:first-child) {
    margin-top: 1.75rem;
}
body.hbp-dashboard main :is(h2, h3, h4):not([class*="mb-"]),
body.hbp-sitemode-body main :is(h2, h3, h4):not([class*="mb-"]) {
    margin-bottom: 0.5rem;
}

/* ── 18. Elevation consistency ────────────────────────────────────
   Softer, more consistent shadow depth on hover for interactive
   cards/rows, replacing kt-min.css's generic .shadow-lg hover jump
   (built for a different site's design) with something that matches
   HBP's own --hbp-shadow tokens used elsewhere in the dashboard. */
body.hbp-dashboard .hover\:shadow-lg:hover,
body.hbp-dashboard .hover\:shadow-md:hover,
body.hbp-sitemode-body .hover\:shadow-lg:hover,
body.hbp-sitemode-body .hover\:shadow-md:hover {
    box-shadow: var(--hbp-shadow, 0 4px 16px rgba(0,0,0,.08)) !important;
}

/* ── 7. Text selection & scrollbar — small branded touches ───────── */
body.hbp-dashboard ::selection,
body.hbp-sitemode-body ::selection {
    background: var(--hbp-primary-light, #DBEAFE);
    color: var(--hbp-primary-dark, #1D4ED8);
}
body.hbp-dashboard { scrollbar-color: var(--hbp-gray-300, #CBD5E1) transparent; }
body.hbp-dashboard ::-webkit-scrollbar { width: 8px; height: 8px; }
body.hbp-dashboard ::-webkit-scrollbar-thumb { background: var(--hbp-gray-300, #CBD5E1); border-radius: 8px; }
body.hbp-dashboard ::-webkit-scrollbar-track { background: transparent; }

/* ── 8. Print ──────────────────────────────────────────────────────
   Dashboard pages are noindex/nofollow already, but users do
   sometimes print a report or invoice-style page from here. */
@media print {
    body.hbp-dashboard .no-print,
    body.hbp-dashboard nav,
    body.hbp-dashboard aside {
        display: none !important;
    }
}