/* =====================================================================
   The Hub's layout - shared by every theme package
   Hoke Designs Managed Hosting

   The structure the HD Support admin settled on, brought to every page of
   the Hub: a hero at the top of the dashboard, status strips of tone cards,
   section headings that carry a colored icon chip, range switches as one
   pill bar, stat tiles with a colored edge, and a save bar that stays in
   reach at the foot of every form.

   This sheet decides shape, spacing and which tone a thing is. Colors come
   from --hh-* tokens that each theme package defines
   (public/css/themes/*.css), which is what lets Night Drive keep its neon on
   exactly the same layout.

   Loaded by filament.themes.head for every theme, before the theme sheet.
   ===================================================================== */

/* 1. Tokens ---------------------------------------------------------- */

:root {
    --hh-radius: 1rem;
    --hh-radius-sm: .75rem;
    --hh-gap: 1.25rem;
}

/* Tones. A component sets class="hh-tone-violet" (or any of these) and reads
   --hh-tone for the bright stroke and --hh-tone-ink for text on a tinted chip. */
.hh-tone-teal    { --hh-tone: #14b8a0; --hh-tone-ink: #0b7f72; }
.hh-tone-blue    { --hh-tone: #2f6fd1; --hh-tone-ink: #1e4fa0; }
.hh-tone-sky     { --hh-tone: #0ea5e9; --hh-tone-ink: #0369a1; }
.hh-tone-violet  { --hh-tone: #8b5cf6; --hh-tone-ink: #6d28d9; }
.hh-tone-amber   { --hh-tone: #f59e0b; --hh-tone-ink: #b45309; }
.hh-tone-emerald { --hh-tone: #10b981; --hh-tone-ink: #047857; }
.hh-tone-coral   { --hh-tone: #ff6b4a; --hh-tone-ink: #c2410c; }
.hh-tone-rose    { --hh-tone: #e5484d; --hh-tone-ink: #b91c1c; }
.hh-tone-slate   { --hh-tone: #64748b; --hh-tone-ink: #475569; }
.dark .hh-tone-teal    { --hh-tone-ink: #5eead4; }
.dark .hh-tone-blue    { --hh-tone-ink: #93c5fd; }
.dark .hh-tone-sky     { --hh-tone-ink: #7dd3fc; }
.dark .hh-tone-violet  { --hh-tone-ink: #c4b5fd; }
.dark .hh-tone-amber   { --hh-tone-ink: #fcd34d; }
.dark .hh-tone-emerald { --hh-tone-ink: #6ee7b7; }
.dark .hh-tone-coral   { --hh-tone-ink: #ffb3a1; }
.dark .hh-tone-rose    { --hh-tone-ink: #fca5a5; }
.dark .hh-tone-slate   { --hh-tone-ink: #cbd5e1; }

/* 2. Section headings: a tinted chip behind the icon ------------------
   Every <x-filament::section icon=... icon-color=...> and schema
   Section::make()->icon()->iconColor(). The chip takes its tint from the
   icon's own color, so one rule serves every tone. */

.fi-section-header > .fi-icon {
    box-sizing: content-box;
    width: 1.25rem;
    height: 1.25rem;
    padding: .55rem;
    border-radius: var(--hh-radius-sm);
    background: color-mix(in oklab, currentColor 13%, transparent);
    flex-shrink: 0;
}
.fi-section-header-heading { letter-spacing: -0.01em; }
.fi-section-header-description { line-height: 1.5; }

/* 3. The save bar ------------------------------------------------------
   Filament's sticky form actions, shaped like HD Support's: a frosted bar
   across the foot of the form with the buttons in it. */

.fi-sc-actions.fi-sticky .fi-ac {
    border-radius: var(--hh-radius);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* The same bar for pages that build their own form. */
.hh-savebar {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem;
    margin-top: 1rem; padding: .75rem 1rem;
    border-radius: var(--hh-radius);
    border: 1px solid var(--hh-line, rgba(128, 128, 128, .2));
    background: var(--hh-glass, rgba(255, 255, 255, .9));
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 10px 30px -18px rgba(11, 31, 58, .45);
}
.hh-savebar > span { margin-inline-end: auto; font-size: .75rem; color: var(--hh-muted, #64748b); }

/* 4. Dashboard hero ---------------------------------------------------- */

.hh-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem;
    border-radius: 1.25rem; padding: 1.75rem 1.75rem 1.6rem;
    color: var(--hh-hero-ink, #fff);
    background: var(--hh-hero-bg, linear-gradient(135deg, #001b44, #0a2a5c));
    box-shadow: var(--hh-hero-shadow, 0 24px 48px -28px rgba(0, 27, 68, .7));
}
/* The hero says what page this is; the plain heading above it would repeat it. */
.fi-page:has(.hh-hero) .fi-header { display: none; }
.hh-hero-text { position: relative; z-index: 2; min-width: 0; }
.hh-kicker { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-hero-kicker, #3ecfb2); }
.hh-hero h1 { margin: .3rem 0 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.15; }
.hh-hero-sub { margin: .6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; color: var(--hh-hero-sub, #c9d5e6); font-size: .92rem; }
.hh-hero-sub > span { display: inline-flex; align-items: center; gap: .45rem; }
.hh-hero-sub a { color: var(--hh-hero-ink, #fff); text-decoration: underline; text-underline-offset: 3px; }
.hh-dot { width: .6rem; height: .6rem; border-radius: 999px; display: inline-block; flex: none; background: var(--hh-tone, #3ecfb2); box-shadow: 0 0 0 4px color-mix(in oklab, var(--hh-tone, #3ecfb2) 28%, transparent); }
.hh-hero-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .6rem; }
.hh-hero-art { position: absolute; right: 0; bottom: 0; width: min(440px, 62%); height: 100%; pointer-events: none; z-index: 1; }
.hh-hero-art.hh-hero-sun { display: none; }
.hh-hero-peaks path { fill: rgba(255, 255, 255, .06); }
.hh-hero-peaks .hh-peaks-front { fill: rgba(62, 207, 178, .13); }
.hh-hbtn {
    display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .6rem 1.1rem;
    font-weight: 600; font-size: .9rem; white-space: nowrap;
    transition: transform .15s, box-shadow .2s, background .2s;
}
.hh-hbtn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.hh-hbtn-solid { background: var(--hh-hero-cta, #3ecfb2); color: var(--hh-hero-cta-ink, #001b44); }
.hh-hbtn-solid:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -10px var(--hh-hero-cta, #3ecfb2); }
.hh-hbtn-ghost { color: var(--hh-hero-ink, #fff); border: 1px solid rgba(255, 255, 255, .28); }
.hh-hbtn-ghost:hover { background: rgba(255, 255, 255, .09); }
.hh-hbtn .hh-count { min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: .72rem; line-height: 1.35rem; text-align: center; }
@media (max-width: 640px) { .hh-hero { padding: 1.25rem; } .hh-hero-art { opacity: .5; } }

/* 5. Status strip: the row of tone cards above a page ------------------ */

.hh-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .75rem; }
.hh-strip-card {
    display: flex; align-items: flex-start; gap: .75rem; min-width: 0;
    padding: 1rem; border-radius: var(--hh-radius-sm);
    background: var(--hh-surface, #fff);
    border: 1px solid color-mix(in oklab, var(--hh-tone, #64748b) 30%, transparent);
    box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
    color: inherit;
    transition: transform .15s, box-shadow .2s, border-color .2s;
}
a.hh-strip-card:hover { transform: translateY(-2px); border-color: var(--hh-tone); box-shadow: 0 14px 30px -20px var(--hh-tone); }
.hh-chip {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: .6rem;
    background: color-mix(in oklab, var(--hh-tone, #64748b) 15%, transparent);
    color: var(--hh-tone-ink, #475569);
}
.hh-chip svg { width: 1.25rem; height: 1.25rem; }
.hh-strip-text { min-width: 0; flex: 1; }
.hh-strip-label { margin: 0; font-size: .75rem; font-weight: 500; color: var(--hh-muted, #64748b); }
.hh-strip-value { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hh-ink, inherit); }
.hh-strip-detail { margin: .15rem 0 0; font-size: .75rem; color: var(--hh-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-strip-bar { margin-top: .4rem; height: .375rem; border-radius: 999px; overflow: hidden; background: color-mix(in oklab, var(--hh-muted, #64748b) 18%, transparent); }
.hh-strip-bar i { display: block; height: 100%; border-radius: 999px; background: var(--hh-tone, #14b8a0); }

/* 6. Stat tiles: a colored edge down the left ---------------------------
   The fleet dashboards' KPI tiles (.bk-kpi) and the dashboard's health
   cards (.hh-fh-card). The edge cycles through three tones so a row reads
   as separate figures. */

.bk-kpi, .hh-fh-card { position: relative; overflow: hidden; }
.bk-kpi::before, .hh-fh-card::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--hh-tone, var(--hh-edge-1, #2f6fd1));
}
.bk-kpis > .bk-kpi:nth-child(3n + 2), .hh-fh > .hh-fh-card:nth-child(3n + 2) { --hh-tone: var(--hh-edge-2, #3ecfb2); }
.bk-kpis > .bk-kpi:nth-child(3n + 3), .hh-fh > .hh-fh-card:nth-child(3n + 3) { --hh-tone: var(--hh-edge-3, #8b5cf6); }
.bk-kpi { padding-left: 1.2rem !important; }
.hh-fh-card { padding-left: 1.3rem !important; }

/* 7. Pill switch: range tabs and view switches -------------------------- */

.tr-tabs, .hh-switch {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .2rem !important;
    border-radius: 999px !important; border: 0 !important;
    background: var(--hh-switch-bg, rgba(128, 128, 128, .08)) !important;
    box-shadow: inset 0 0 0 1px var(--hh-line, rgba(128, 128, 128, .22));
}
.tr-tabs a, .hh-switch a, .hh-switch button {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .32rem .85rem !important; border-radius: 999px !important;
    font-size: .8rem; font-weight: 600; white-space: nowrap; opacity: 1 !important;
    color: var(--hh-muted, inherit);
    transition: background .15s, color .15s;
}
.tr-tabs a:hover, .hh-switch a:hover, .hh-switch button:hover { color: var(--hh-ink, inherit); background: var(--hh-tint, rgba(128, 128, 128, .1)); }
.tr-tabs a.on, .tr-tabs a.on:hover, .hh-switch .on, .hh-switch .on:hover {
    background: var(--hh-switch-on, #3ecfb2) !important; color: var(--hh-switch-on-ink, #001b44) !important; box-shadow: none !important;
}

/* Filament's own tabs: pills, as on Support settings. */
.fi-tabs .fi-tabs-item, .fi-tabs .fi-tabs-item .fi-badge { border-radius: 999px; }

/* 8. Cards and surfaces ------------------------------------------------- */

.fi-section:not(.fi-section-not-contained), .fi-ta-ctn { border-radius: var(--hh-radius); }
.bk-card, .bk-kpi, .hh-fh-card, .bk-warn-row, .bk-clear { border-radius: var(--hh-radius-sm) !important; }
.fi-header-heading { letter-spacing: -0.015em; }

@media (prefers-reduced-motion: reduce) {
    .hh-hbtn, .hh-strip-card { transition: none; }
    .hh-hbtn:hover, a.hh-strip-card:hover { transform: none; }
}

/* Brand lockup ------------------------------------------------------- */

/* The Hoke Designs Hosting lockup (public/brand) scales as a whole, never
   squeezed. In the phone drawer's header the drawer gets a little wider so
   the raised HOSTING stays legible, and the logo fills the room it has. */
.fi-logo { object-fit: contain; }
@media (max-width: 1023px) {
    html.fi { --sidebar-width: min(22.5rem, 92vw); }
}
.fi-sidebar-header .fi-logo { margin-inline-start: 0; height: auto !important; width: min(100%, 365px); }