/*
 * TMS Fuel Admin — Modern UI overlay v2
 * Brand: electric blue (#0c00e7) → indigo (#5b48ff) gradient
 *
 * Injected via renderHook('panels::head.end') in AdminPanelProvider.
 * Pure CSS — no JS, no Tailwind build needed.
 */

:root {
    --tms-bg:          #f4f6fb;
    --tms-surface:     #ffffff;
    --tms-sidebar:     #ffffff;
    --tms-text:        #0f172a;
    --tms-muted:       #64748b;
    --tms-border:      #e6e9f2;
    --tms-accent-1:    #0c00e7;   /* primary electric blue */
    --tms-accent-2:    #5b48ff;   /* secondary indigo for gradient */
    --tms-accent-soft: #e0e7ff;   /* light indigo for backgrounds */
    --tms-accent-rgb:  12, 0, 231;
    --tms-radius-lg:   16px;
    --tms-radius-md:   12px;
    --tms-shadow-sm:   0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03);
    --tms-shadow-md:   0 6px 22px -8px rgba(var(--tms-accent-rgb), .15), 0 2px 6px rgba(15, 23, 42, .04);
    --tms-shadow-lg:   0 16px 44px -18px rgba(var(--tms-accent-rgb), .35), 0 4px 12px rgba(15, 23, 42, .05);
    --tms-grad:        linear-gradient(135deg, var(--tms-accent-1) 0%, var(--tms-accent-2) 100%);
}

/* ── Base ────────────────────────────────────────────────────────── */
body.fi-body, .fi-layout {
    background:
        radial-gradient(60% 40% at 0% 0%,   rgba(var(--tms-accent-rgb), .04), transparent 70%),
        radial-gradient(40% 30% at 100% 0%, rgba(91, 72, 255, .03),           transparent 70%),
        var(--tms-bg) !important;
    background-attachment: fixed;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: var(--tms-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── HERO welcome banner ────────────────────────────────────────── */
.tms-hero {
    position: relative;
    background: linear-gradient(120deg, #0c00e7 0%, #2a1ce5 50%, #5b48ff 100%);
    border-radius: 20px;
    padding: 28px 32px;
    margin: 12px 0 28px;            /* breathing room above the banner */
    overflow: hidden;
    color: #fff;
    box-shadow: 0 16px 40px -18px rgba(var(--tms-accent-rgb), .55),
                0 4px 12px rgba(15, 23, 42, .06);
    animation: tmsCardIn .45s ease-out both;
}
.tms-hero-blob {
    position: absolute; border-radius: 50%; filter: blur(50px);
    opacity: .35; pointer-events: none;
    animation: tmsHeroFloat 14s ease-in-out infinite;
}
.tms-hero-blob.b1 { width: 260px; height: 260px; background: #38bdf8; top: -80px; right: -40px; }
.tms-hero-blob.b2 { width: 180px; height: 180px; background: #a5b4fc; bottom: -60px; left: 30%; animation-delay: -7s; }
@keyframes tmsHeroFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-15px) scale(1.06); }
}
.tms-hero-inner {
    position: relative; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
}
.tms-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    border: 1px solid rgba(255, 255, 255, .2);
    margin-bottom: 14px;
}
.tms-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .8);
    animation: tmsPulse 2s ease-in-out infinite;
}
@keyframes tmsPulse {
    0%   { box-shadow: 0 0 0 0    rgba(74, 222, 128, .8); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);   }
    100% { box-shadow: 0 0 0 0    rgba(74, 222, 128, 0);   }
}
.tms-hero-greeting {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px !important;
    line-height: 1.1 !important;
    margin: 0 0 10px !important;
    color: #fff !important;
}
.tms-hero-sub {
    font-size: 15px;
    opacity: .9;
    margin: 0 0 20px;
    max-width: 540px;
    line-height: 1.5;
}
.tms-hero-meta {
    display: flex; gap: 22px; flex-wrap: wrap;
    font-size: 13px;
}
.tms-hero-meta-item {
    display: inline-flex; align-items: center; gap: 7px;
    opacity: .85;
}
.tms-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .2s ease;
    white-space: nowrap;
}
.tms-hero-cta:hover {
    background: rgba(255, 255, 255, .28);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .2);
}
@media (max-width: 768px) {
    .tms-hero { padding: 22px; }
    .tms-hero-greeting { font-size: 24px !important; }
    .tms-hero-sub { font-size: 14px; }
    .tms-hero-cta { width: 100%; justify-content: center; }
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.fi-sidebar {
    background: var(--tms-sidebar) !important;
    border-right: 1px solid var(--tms-border) !important;
    box-shadow: 4px 0 28px -16px rgba(var(--tms-accent-rgb), .10);
}

/* Brand block at the top of sidebar */
.fi-sidebar-header {
    padding: 22px 22px 18px !important;
    border-bottom: 1px solid var(--tms-border);
    background:
        radial-gradient(120% 80% at 0% 0%,   rgba(var(--tms-accent-rgb), .08), transparent 60%),
        radial-gradient(120% 80% at 100% 0%, rgba(91, 72, 255, .06),           transparent 60%);
    position: relative;
}
.fi-sidebar-header .fi-logo {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px;
    color: var(--tms-text) !important;
    display: flex !important; align-items: center; gap: 12px;
}
/* Add a gradient brand square BEFORE the existing Filament text (no
   text injection / no duplicate names). */
.fi-sidebar-header .fi-logo::before {
    content: "";
    width: 36px; height: 36px;
    border-radius: 11px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16M3 21h11M7 9h3M7 13h3M15 9l3 3v6a2 2 0 0 0 4 0v-9l-3-3'/></svg>") center / 22px 22px no-repeat,
        var(--tms-grad);
    box-shadow: 0 8px 18px -6px rgba(var(--tms-accent-rgb), .55);
    flex-shrink: 0;
}

/* Group headings */
.fi-sidebar-group-label {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--tms-muted) !important;
    padding: 18px 14px 8px !important;
}

/* Nav items */
.fi-sidebar-item-button {
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 2px 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    transition: all .18s ease !important;
}
.fi-sidebar-item-button:hover {
    background: var(--tms-accent-soft) !important;
    color: var(--tms-accent-1) !important;
    transform: translateX(2px);
}
.fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #94a3b8 !important;
    transition: color .18s ease;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--tms-accent-1) !important;
}

/* Active item — gradient pill in NEW blue */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
    background: var(--tms-grad) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(var(--tms-accent-rgb), .55) !important;
    font-weight: 600 !important;
}
/* Force ALL descendants of the active item to render in pure white so the
   label text is fully visible against the gradient. */
.fi-sidebar-item.fi-active .fi-sidebar-item-button *,
.fi-sidebar-item-button[aria-current="page"] *,
.fi-sidebar-item.fi-active .fi-sidebar-item-button span,
.fi-sidebar-item-button[aria-current="page"] span,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label {
    color: #fff !important;
    opacity: 1 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon svg,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* Nav badges (e.g. Devices "4") */
.fi-sidebar-item-badge,
.fi-sidebar-item .fi-badge {
    background: var(--tms-accent-soft) !important;
    color: var(--tms-accent-1) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-badge,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-badge {
    background: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.fi-topbar {
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tms-border) !important;
}
.fi-topbar-item button:hover { background: var(--tms-accent-soft) !important; }

/* User avatar (KF) */
.fi-avatar, .fi-user-menu-trigger .fi-avatar {
    background: var(--tms-grad) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px -4px rgba(var(--tms-accent-rgb), .5) !important;
}

/* ── Page header ─────────────────────────────────────────────────── */
.fi-page, .fi-main { background: transparent !important; }
.fi-header-heading {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    color: var(--tms-text) !important;
    position: relative;
    padding-left: 16px;
}
.fi-header-heading::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 5px; border-radius: 4px;
    background: var(--tms-grad);
}
.fi-header-subheading { color: var(--tms-muted) !important; padding-left: 16px; }

/* ── Surfaces (sections, widgets) ────────────────────────────────── */
.fi-section,
.fi-fo-component-ctn .fi-section,
.fi-wi-chart {
    background: var(--tms-surface) !important;
    border: 1px solid var(--tms-border) !important;
    border-radius: var(--tms-radius-lg) !important;
    box-shadow: var(--tms-shadow-sm) !important;
    transition: box-shadow .25s ease, transform .25s ease;
}
.fi-section:hover { box-shadow: var(--tms-shadow-md) !important; }
.fi-section-content-ctn, .fi-section-content { padding: 22px 24px !important; }
.fi-section-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--tms-border) !important;
}
.fi-section-header-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--tms-text) !important;
}

/* ── KPI stat cards (Online / Stale / Offline) — premium look ───── */
.fi-wi-stats-overview-stats-ctn {
    gap: 20px !important;
}
.fi-wi-stats-overview-stat {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(var(--tms-accent-rgb), .04), transparent 60%),
        var(--tms-surface) !important;
    border: 1px solid var(--tms-border) !important;
    border-radius: 18px !important;
    padding: 28px 26px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .3s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(var(--tms-accent-rgb), .35),
                0 4px 12px rgba(15, 23, 42, .06) !important;
}
/* Top accent strip — gradient, thicker */
.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 4px;
    background: var(--tms-grad);
    border-radius: 18px 18px 0 0;
}
/* Decorative ring bottom-right */
.fi-wi-stats-overview-stat::after {
    content: "";
    position: absolute;
    right: -60px; bottom: -60px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--tms-grad);
    opacity: .05;
    pointer-events: none;
}
.fi-wi-stats-overview-stat-value {
    font-size: 38px !important;
    font-weight: 800 !important;
    letter-spacing: -1.2px !important;
    color: var(--tms-text) !important;
    line-height: 1 !important;
    margin: 6px 0 !important;
}
.fi-wi-stats-overview-stat-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--tms-muted) !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.fi-wi-stats-overview-stat-description {
    font-size: 12px !important;
    color: var(--tms-muted) !important;
    margin-top: 8px !important;
}
.fi-wi-stats-overview-stat-description-icon {
    width: 14px !important; height: 14px !important;
}

/* Stat icon (the one at top-right of a Filament stat) — make it pop */
.fi-wi-stats-overview-stat-icon {
    width: 40px !important; height: 40px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: var(--tms-accent-soft) !important;
    color: var(--tms-accent-1) !important;
    box-shadow: 0 4px 12px -4px rgba(var(--tms-accent-rgb), .25);
}

/* Color-code stat top strips + decorative ring by data-color */
.fi-wi-stats-overview-stat:has(.fi-color-success)::before {
    background: linear-gradient(90deg, #10b981 0%, #22c55e 100%);
}
.fi-wi-stats-overview-stat:has(.fi-color-success)::after { background: linear-gradient(135deg, #10b981, #22c55e); }
.fi-wi-stats-overview-stat:has(.fi-color-success) .fi-wi-stats-overview-stat-icon {
    background: #dcfce7 !important; color: #15803d !important;
    box-shadow: 0 4px 12px -4px rgba(34, 197, 94, .3) !important;
}

.fi-wi-stats-overview-stat:has(.fi-color-warning)::before {
    background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}
.fi-wi-stats-overview-stat:has(.fi-color-warning)::after { background: linear-gradient(135deg, #f59e0b, #f97316); }
.fi-wi-stats-overview-stat:has(.fi-color-warning) .fi-wi-stats-overview-stat-icon {
    background: #fef3c7 !important; color: #b45309 !important;
    box-shadow: 0 4px 12px -4px rgba(245, 158, 11, .3) !important;
}

.fi-wi-stats-overview-stat:has(.fi-color-danger)::before {
    background: linear-gradient(90deg, #ef4444 0%, #e11d48 100%);
}
.fi-wi-stats-overview-stat:has(.fi-color-danger)::after { background: linear-gradient(135deg, #ef4444, #e11d48); }
.fi-wi-stats-overview-stat:has(.fi-color-danger) .fi-wi-stats-overview-stat-icon {
    background: #fee2e2 !important; color: #b91c1c !important;
    box-shadow: 0 4px 12px -4px rgba(239, 68, 68, .3) !important;
}

/* Section title (e.g. "Tank Inventory") — make it stand out */
.fi-page h2,
.fi-page h3:not(.fi-section-header-heading) {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tms-text) !important;
    letter-spacing: -.2px !important;
    margin: 8px 0 14px !important;
}

/* ── Filter form card surface ────────────────────────────────────
   Filament's dashboard filter form renders bare on the page bg with
   no enclosing card. Wrap it in a soft card with a top "FILTERS"
   eyebrow positioned OUT of the grid flow so the form fields can
   keep their natural 3-per-row layout. */
.fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) {
    background: var(--tms-surface);
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-lg);
    box-shadow: var(--tms-shadow-sm);
    padding: 54px 24px 22px !important;  /* top padding leaves room for the absolute eyebrow */
    margin-bottom: 24px;
    position: relative;
}
/* FILTERS eyebrow — absolutely positioned, doesn't consume a grid cell */
.fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp)::before {
    content: "FILTERS";
    position: absolute;
    top: 18px;
    left: 24px;
    right: 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--tms-accent-1);
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--tms-border);
}

/* Force the form grid INSIDE the filter card to 3 columns desktop,
   2 columns tablet, 1 column mobile. Targets every common Filament
   grid structure. */
.fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) > .grid,
.fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) > div[class*="grid"],
.fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) > .fi-fo-component-ctn,
.fi-page form:has(> .fi-fo-component-ctn .fi-fo-field-wrp) .fi-fo-component-ctn > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}
@media (max-width: 1024px) {
    .fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) > .grid,
    .fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) > div[class*="grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) > .grid,
    .fi-page .fi-fo-component-ctn:has(.fi-fo-field-wrp) > div[class*="grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* Don't apply this wrapper to forms already inside a Filament section
   (resource pages, edit forms, etc.) */
.fi-section .fi-fo-component-ctn,
.fi-section .fi-fo-component-ctn::before {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    content: none !important;
    border-bottom: 0 !important;
    position: static !important;
}

/* ── Form inputs (filters: From Date, MPD, Product) ──────────────── */
.fi-input, .fi-input-wrp, .fi-select-input {
    border-radius: var(--tms-radius-md) !important;
    border: 1.5px solid var(--tms-border) !important;
    background: #fff !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
}
.fi-input:focus-within, .fi-input-wrp:focus-within {
    border-color: var(--tms-accent-1) !important;
    box-shadow: 0 0 0 4px rgba(var(--tms-accent-rgb), .12) !important;
}
.fi-input input, .fi-input input::placeholder, .fi-select-input {
    color: var(--tms-text) !important;
}
.fi-fo-field-wrp-label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.fi-btn-color-primary,
.fi-btn[data-color="primary"] {
    background: var(--tms-grad) !important;
    border: 0 !important;
    border-radius: var(--tms-radius-md) !important;
    box-shadow: 0 6px 18px -8px rgba(var(--tms-accent-rgb), .55) !important;
    font-weight: 600 !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    color: #fff !important;
}
.fi-btn-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -12px rgba(var(--tms-accent-rgb), .6) !important;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.fi-ta {
    border-radius: var(--tms-radius-lg) !important;
    overflow: hidden;
    border: 1px solid var(--tms-border) !important;
    box-shadow: var(--tms-shadow-sm) !important;
}
.fi-ta-header-cell {
    background: #fafbff !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: .8px !important;
    color: var(--tms-muted) !important;
    font-weight: 700 !important;
}
.fi-ta-row:hover .fi-ta-cell { background: #f6f7ff !important; }

/* ── Badges ──────────────────────────────────────────────────────── */
.fi-badge {
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
}
.fi-color-success { background: #dcfce7 !important; color: #15803d !important; }
.fi-color-warning { background: #fef3c7 !important; color: #b45309 !important; }
.fi-color-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.fi-color-info    { background: var(--tms-accent-soft) !important; color: var(--tms-accent-1) !important; }

/* ── Tank Inventory section heading ──────────────────────────────── */
.fi-page > div[wire\:id] h2,
.fi-page h2[class*="title"] {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--tms-text) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

/* ── Scrollbars ──────────────────────────────────────────────────── */
.fi-sidebar-nav::-webkit-scrollbar,
.fi-main::-webkit-scrollbar { width: 8px; }
.fi-sidebar-nav::-webkit-scrollbar-thumb,
.fi-main::-webkit-scrollbar-thumb {
    background: #d6d9e6; border-radius: 999px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover,
.fi-main::-webkit-scrollbar-thumb:hover {
    background: var(--tms-accent-1);
}

/* ── Page-load animations ────────────────────────────────────────── */
@keyframes tmsCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fi-page > .fi-section,
.fi-page > .fi-wi-stats-overview,
.fi-page > .fi-wi-chart {
    animation: tmsCardIn .4s ease-out both;
}
.fi-page > *:nth-child(1) { animation-delay: .02s; }
.fi-page > *:nth-child(2) { animation-delay: .06s; }
.fi-page > *:nth-child(3) { animation-delay: .10s; }
.fi-page > *:nth-child(4) { animation-delay: .14s; }
.fi-page > *:nth-child(5) { animation-delay: .18s; }
.fi-page > *:nth-child(6) { animation-delay: .22s; }