/*!
 * CloudSnap Admin — UI polish layer
 * -------------------------------------------------------------------------
 * Loaded via PanelsRenderHook::STYLES_AFTER (see AdminPanelProvider), so it is
 * injected *after* Filament's own <style>/<link> tags, with NO cascade layer.
 * Filament v5 ships every .fi-* rule inside `@layer components`; unlayered CSS
 * always beats layered CSS, so the overrides below win cleanly WITHOUT
 * !important or specificity hacks.
 *
 * Two sections:
 *   1. Global polish  — borders + subtle shadows + consistent radius/alignment
 *                       on Filament's native .fi-* components (panel-wide).
 *   2. Custom pages   — .cs-* components used by the hand-built Blade pages
 *                       (Providers / Provider servers / Gcore hosting /
 *                       Provider tabs / Curation / Provider edit / etc.),
 *                       which previously relied on Tailwind utilities that
 *                       Filament v5 no longer compiles for non-Filament views.
 *
 * No build step: plain CSS served straight from /public by the web server.
 * Colours reuse Filament's own CSS variables (theme-accurate, dark-aware) with
 * hard fallbacks, so nothing breaks if a variable name shifts.
 * ========================================================================= */

/* ===================== 1. DESIGN TOKENS ===================== */
:root {
    /* Hairline borders — neutral (accent-agnostic), never tinted amber. */
    --cs-border:        color-mix(in oklab, var(--color-gray-950, #0a0a0a)  9%, transparent);
    --cs-border-strong: color-mix(in oklab, var(--color-gray-950, #0a0a0a) 15%, transparent);
    --cs-divide:        color-mix(in oklab, var(--color-gray-950, #0a0a0a)  7%, transparent);

    /* Surfaces */
    --cs-surface:       var(--color-white, #ffffff);
    --cs-surface-muted: color-mix(in oklab, var(--color-gray-950, #0a0a0a) 3%, transparent);

    /* Text */
    --cs-text:          var(--color-gray-950, #0a0a0a);
    --cs-text-muted:    var(--color-gray-500, #6b7280);

    /* Elevation scale — deliberately subtle. */
    --cs-shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-gray-950, #0a0a0a) 5%, transparent);
    --cs-shadow-sm: 0 1px 2px 0 color-mix(in oklab, var(--color-gray-950, #0a0a0a) 5%, transparent),
                    0 1px 3px 0 color-mix(in oklab, var(--color-gray-950, #0a0a0a) 7%, transparent);
    --cs-shadow-md: 0 4px 6px -2px color-mix(in oklab, var(--color-gray-950, #0a0a0a) 6%, transparent),
                    0 2px 4px -2px color-mix(in oklab, var(--color-gray-950, #0a0a0a) 6%, transparent);
    --cs-shadow-lg: 0 12px 28px -8px color-mix(in oklab, var(--color-gray-950, #0a0a0a) 18%, transparent),
                    0 6px 12px -6px color-mix(in oklab, var(--color-gray-950, #0a0a0a) 10%, transparent);

    /* Radii — track Filament's own scale. */
    --cs-radius:    var(--radius-xl, 0.75rem);
    --cs-radius-sm: var(--radius-lg, 0.5rem);

    /* Focus ring (accent). Amber primary → visible on light + dark. */
    --cs-focus: var(--color-primary-400, #f59e0b);

    /* Danger surface for alerts (matches Filament's red-based danger). */
    --cs-danger-surface: #fef2f2;
    --cs-danger-text:    #b91c1c;
    --cs-danger-border:  color-mix(in oklab, #dc2626 22%, transparent);

    --cs-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
    --cs-border:        color-mix(in oklab, var(--color-white, #ffffff) 10%, transparent);
    --cs-border-strong: color-mix(in oklab, var(--color-white, #ffffff) 16%, transparent);
    --cs-divide:        color-mix(in oklab, var(--color-white, #ffffff)  8%, transparent);

    --cs-surface:       var(--color-gray-900, #111827);
    --cs-surface-muted: color-mix(in oklab, var(--color-white, #ffffff) 4%, transparent);

    --cs-text:          var(--color-white, #ffffff);
    --cs-text-muted:    var(--color-gray-400, #9ca3af);

    --cs-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --cs-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 1px 3px 0 rgba(0, 0, 0, 0.35);
    --cs-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
    --cs-shadow-lg: 0 16px 36px -10px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.50);

    --cs-danger-surface: color-mix(in oklab, #f87171 12%, transparent);
    --cs-danger-text:    #f87171;
    --cs-danger-border:  color-mix(in oklab, #f87171 24%, transparent);
}

/* ===================== 2. GLOBAL POLISH (.fi-*) ===================== */

/* Smooth the elevation/border changes on the surfaces we touch. */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-btn,
.fi-badge,
.fi-dropdown-panel,
.fi-avatar {
    transition: box-shadow var(--cs-transition), border-color var(--cs-transition);
}

/* ---- Content sections / cards ---- */
.fi-section {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-sm);
    background-color: var(--cs-surface);
}

/* ---- Data tables: outer card ---- */
.fi-ta-ctn {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-sm);
    background-color: var(--cs-surface);
}

/* Table internals: consistent vertical rhythm + true middle alignment. */
.fi-ta-cell,
.fi-ta-header-cell {
    vertical-align: middle;
}

/* ---- KPI / stat cards ---- */
.fi-wi-stats-overview-stat {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-sm);
    background-color: var(--cs-surface);
}
.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--cs-shadow-md);
}

/* ---- Buttons ---- */
/* A hairline edge (black-alpha reads as a natural bevel on any button colour)
   plus a whisper of elevation. Focus visibility is re-guaranteed below. */
.fi-btn {
    border: 1px solid color-mix(in oklab, #000000 8%, transparent);
    box-shadow: var(--cs-shadow-xs);
}
.fi-btn:hover {
    box-shadow: var(--cs-shadow-sm);
}
/* Because our unlayered box-shadow would otherwise clobber Filament's layered
   focus ring, we supply an explicit, always-visible focus outline. */
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible {
    outline: 2px solid var(--cs-focus);
    outline-offset: 2px;
}

/* Icon buttons: give them the same tactile edge, minus the heavy border. */
.fi-icon-btn {
    box-shadow: var(--cs-shadow-xs);
}

/* ---- Badges ---- */
/* currentColor-tinted border keeps the outline in the badge's own hue. */
.fi-badge {
    border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
    box-shadow: var(--cs-shadow-xs);
}

/* ---- Form controls ---- */
/* Filament already renders bordered inputs with proper focus rings, so we only
   normalise the corner radius for consistency and leave the ring/focus intact
   (drop-shadows on inputs would fight the focus ring and aren't idiomatic). */
.fi-input-wrp,
.fi-input,
.fi-select-input,
.fi-fieldset {
    border-radius: var(--cs-radius-sm);
}

/* ---- Floating surfaces ---- */
.fi-dropdown-panel {
    border: 1px solid var(--cs-border-strong);
    border-radius: var(--cs-radius-sm);
    box-shadow: var(--cs-shadow-lg);
}
.fi-modal-window {
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow-lg);
}

/* ---- Notifications ---- */
.fi-no-notification {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-md);
}

/* ---- Avatars ---- */
.fi-avatar {
    box-shadow: 0 0 0 1px var(--cs-border);
}

/* ---- App chrome: sidebar + topbar define their regions ---- */
.fi-sidebar {
    border-right: 1px solid var(--cs-border);
}
.fi-topbar {
    border-bottom: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow-xs);
}
/* Softer corners on nav items for a tidier rail. */
.fi-sidebar-item > a,
.fi-sidebar-item > button {
    border-radius: var(--cs-radius-sm);
}

/* ---- Pagination ---- */
.fi-pagination-item {
    border-radius: var(--cs-radius-sm);
}

/* ===================== 3. CUSTOM PAGES (.cs-*) ===================== */
/* These reuse the exact tokens above, so the hand-built provider pages match
   Filament's native components pixel-for-pixel. */

/* Tight vertical grouping for the provider-tabs header (toolbar + tab strip).
   Page-level spacing between blocks is handled by Filament's .fi-page-main gap,
   so this is only for grouping a header's two rows (replaces space-y-4 = 1rem). */
.cs-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Muted intro / helper paragraph (replaces text-sm text-gray-500…). */
.cs-note {
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--cs-text-muted);
}
.cs-note strong {
    font-weight: 600;
    color: var(--cs-text);
}

/* Inline code (IDs, keys, .env references). */
.cs-code {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
}
.cs-code--primary {
    color: var(--color-primary-600, #d97706);
}
.dark .cs-code--primary {
    color: var(--color-primary-400, #fbbf24);
}

/* Danger / error banner (replaces bg-danger-50 ring-danger-600/20…). */
.cs-alert {
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    border-radius: var(--cs-radius);
    border: 1px solid transparent;
}
.cs-alert--danger {
    background-color: var(--cs-danger-surface);
    color: var(--cs-danger-text);
    border-color: var(--cs-danger-border);
}

/* Card wrapper for the static tables (replaces the rounded/ring/shadow soup). */
.cs-panel {
    background-color: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-sm);
    overflow-x: auto;            /* wide tables scroll horizontally */
}

/* Static data table matched to Filament's .fi-ta-table proportions. */
.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: start;
    color: var(--cs-text);
}
.cs-table thead th {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
    color: var(--cs-text-muted);
    border-bottom: 1px solid var(--cs-border);
}
.cs-table tbody td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid var(--cs-divide);
}
.cs-table tbody tr:first-child td {
    border-top: 0;
}
.cs-table__muted {
    color: var(--cs-text-muted);
}
.cs-table__nowrap {
    white-space: nowrap;
}
.cs-table__empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: var(--cs-text-muted);
}

/* Rows that navigate: hover affordance + whole-row click target.
   The primary link is stretched over the row via ::after — pure CSS, so
   Livewire's wire:navigate SPA transition is preserved (no JS, no full reload). */
.cs-table tbody tr.cs-row-link {
    position: relative;
    cursor: pointer;
    transition: background-color var(--cs-transition);
}
.cs-table tbody tr.cs-row-link:hover {
    background-color: var(--cs-surface-muted);
}
.cs-row-link__target::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Keep any real link in another cell clickable above the stretched overlay.
   (Non-interactive cells — badges, text — intentionally let the row handle the
   click, so the whole row remains a single navigation target.) */
.cs-row-link > td > a:not(.cs-row-link__target) {
    position: relative;
    z-index: 2;
}
.cs-link {
    font-weight: 500;
    color: var(--color-primary-600, #d97706);
}
.dark .cs-link {
    color: var(--color-primary-400, #fbbf24);
}

/* Per-provider page header: title block on the left, actions on the right. */
.cs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.cs-toolbar__title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--cs-text);
}
.cs-toolbar__subtitle {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--cs-text-muted);
}
.cs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Underline tab strip (replaces the border-b / -mb-px utility set). */
.cs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-bottom: 1px solid var(--cs-border);
}
.cs-tab {
    padding: 0.75rem 0.25rem;
    margin-bottom: -1px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    color: var(--cs-text-muted);
    transition: color var(--cs-transition), border-color var(--cs-transition);
}
.cs-tab:hover {
    color: var(--cs-text);
    border-bottom-color: var(--cs-border-strong);
}
.cs-tab--active {
    color: var(--color-primary-600, #d97706);
    border-bottom-color: var(--color-primary-500, #f59e0b);
}
.dark .cs-tab--active {
    color: var(--color-primary-400, #fbbf24);
}
.cs-tab:focus-visible {
    outline: 2px solid var(--cs-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Submit-button row under a form (replaces the un-compiled mt-6 wrapper). */
.cs-form-actions {
    margin-top: 1.5rem;
}

/* ===================== 3. CAMPAIGN ANALYTICS ===================== */
/* Categorical hues for the campaign splits. Both sets were checked with the
   dataviz palette validator (lightness band, chroma floor, CVD separation,
   contrast) against the light and dark chart surfaces — the dark set is its own
   selection, not a flip of the light one. Re-run the validator before editing. */
:root {
    --cs-cat-1: #4f7cf7;
    --cs-cat-2: #16a34a;
    --cs-cat-3: #a855f7;
    --cs-cat-4: #d97706;

    --cs-plot:      var(--cs-cat-1);
    --cs-plot-soft: color-mix(in oklab, var(--cs-cat-1) 12%, transparent);
}

.dark {
    --cs-cat-1: #5286e8;
    --cs-cat-2: #189a6e;
    --cs-cat-3: #9a5fdd;
    --cs-cat-4: #c08217;

    --cs-plot-soft: color-mix(in oklab, var(--cs-cat-1) 22%, transparent);
}

.cs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.cs-card {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: var(--cs-text);
    background-color: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-sm);
    transition: box-shadow var(--cs-transition), border-color var(--cs-transition);
}
.cs-card:hover {
    border-color: var(--cs-border-strong);
    box-shadow: var(--cs-shadow-md);
}
.cs-card__title {
    font-weight: 600;
    overflow-wrap: anywhere;
}
.cs-card__value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.cs-card__foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
    border-top: 1px solid var(--cs-divide);
}
.cs-card__foot strong {
    color: var(--cs-text);
}

.cs-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 64rem) {
    .cs-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.cs-kpi {
    padding: 0.875rem 1rem;
    background-color: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-xs);
}
.cs-kpi--accent {
    background-color: var(--cs-plot-soft);
    border-color: color-mix(in oklab, var(--cs-plot) 30%, transparent);
}
.cs-kpi__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cs-text-muted);
}
.cs-kpi__value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.cs-kpi__note {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.1rem;
    color: var(--cs-text-muted);
}

.cs-block {
    overflow: hidden;
}
.cs-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cs-border);
}
.cs-block__title {
    font-size: 0.9375rem;
    font-weight: 600;
}
.cs-block__body {
    padding: 1rem;
}

.cs-splits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* Bars are 2px apart so neighbours never fuse, and 4px-rounded at the data end
   only — the baseline stays flat, which is what makes the zero line readable. */
.cs-chart {
    padding: 1rem;
}
.cs-chart__plot {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 8.5rem;
}
.cs-chart__col {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    border-bottom: 1px solid var(--cs-border);
}
.cs-chart__bar {
    width: 100%;
    max-width: 1.75rem;
    background-color: var(--cs-plot);
    border-radius: 4px 4px 0 0;
}
.cs-chart__peak {
    position: absolute;
    bottom: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cs-text-muted);
    font-variant-numeric: tabular-nums;
}
.cs-chart__axis {
    display: flex;
    gap: 2px;
    margin-top: 0.375rem;
}
.cs-chart__tick {
    flex: 1 1 0;
    overflow: visible;
    font-size: 0.6875rem;
    white-space: nowrap;
    color: var(--cs-text-muted);
}

.cs-meter {
    display: inline-block;
    width: 100%;
    max-width: 12rem;
    height: 0.5rem;
    overflow: hidden;
    vertical-align: middle;
    background-color: var(--cs-surface-muted);
    border-radius: 999px;
}
.cs-meter--slim {
    display: block;
    width: 4rem;
    height: 0.25rem;
    margin-top: 0.3125rem;
}
.cs-meter__fill {
    display: block;
    height: 100%;
    background-color: var(--cs-plot);
    border-radius: 999px;
}
.cs-meter__label {
    margin-inline-start: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cs-split {
    display: flex;
    gap: 2px;
    height: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
}
.cs-split__seg {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.cs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
}
.cs-legend li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.cs-legend strong {
    color: var(--cs-text);
    font-variant-numeric: tabular-nums;
}
.cs-legend__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
}

.cs-badge {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    margin-inline-start: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--cs-border-strong);
    color: var(--cs-text-muted);
}
.cs-badge--live {
    color: #15803d;
    background-color: color-mix(in oklab, #16a34a 12%, transparent);
    border-color: color-mix(in oklab, #16a34a 26%, transparent);
}
.cs-badge--new,
.cs-badge--best {
    color: var(--cs-cat-1);
    background-color: color-mix(in oklab, var(--cs-cat-1) 12%, transparent);
    border-color: color-mix(in oklab, var(--cs-cat-1) 30%, transparent);
}
.cs-badge--expired,
.cs-badge--used-up {
    color: var(--cs-text-muted);
    background-color: var(--cs-surface-muted);
}
.cs-badge--paused {
    color: var(--cs-danger-text);
    background-color: var(--cs-danger-surface);
    border-color: var(--cs-danger-border);
}
.dark .cs-badge--live {
    color: #4ade80;
}