/* ── Pentagon admin UI overrides ───────────────────────────────────────────
   Injected via a render hook rather than the Vite theme, because the server
   has no node_modules and the compiled theme can't be rebuilt here.
   ------------------------------------------------------------------------ */

/* Sidebar + its header: dark in BOTH light and dark mode. */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav {
    background-color: #14181a !important;
    --tw-ring-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Nav labels, group headings and icons read white on the dark rail. */
.fi-sidebar-nav .fi-sidebar-item-label,
.fi-sidebar-nav .fi-sidebar-group-label,
.fi-sidebar-nav .fi-sidebar-item-icon,
.fi-sidebar-nav .fi-sidebar-group-collapse-button {
    color: #ffffff !important;
}

.fi-sidebar-nav .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.55) !important;
}

.fi-sidebar-nav .fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Hover + active states, kept distinct from each other. */
.fi-sidebar-nav .fi-sidebar-item:not(.fi-active):hover,
.fi-sidebar-nav .fi-sidebar-item:not(.fi-active):focus-within {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-radius: 0.5rem;
}

.fi-sidebar-nav .fi-sidebar-item.fi-active > a,
.fi-sidebar-nav .fi-sidebar-item-active > a {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

.fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-nav .fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-nav .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: rgb(var(--primary-400)) !important;
}

/* Sidebar scrollbar shouldn't glare against the dark rail. */
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ── Stat cards ───────────────────────────────────────────────────────────
   The value was rendering at ~2.25rem, so an 12-digit figure such as
   100,587,099,994 overflowed its card. Smaller, tabular figures, and it
   scales down further on narrow viewports.                                */
.fi-wi-stats-overview-stat-value {
    font-size: 1.5rem !important;      /* 36px -> 24px */
    line-height: 1.15 !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

@media (min-width: 1536px) {
    .fi-wi-stats-overview-stat-value {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 1280px) {
    .fi-wi-stats-overview-stat-value {
        font-size: 1.25rem !important;
    }
}

/* ── Rich editor: keep the formatting toolbar in reach ─────────────────
   Long posts push the toolbar off the top of the screen, so it sticks
   just below the panel topbar while you scroll through the body.        */

/* Filament ships overflow-x:auto on this wrapper, which makes it a scroll
   container — a sticky child would then anchor to the wrapper instead of
   the page and never move. Clip keeps wide content contained without
   creating a scrollport. */
.fi-fo-rich-editor {
    overflow-x: clip !important;
}

.fi-fo-rich-editor-toolbar {
    position: sticky;
    /* height of the sticky topbar, so the two never overlap */
    top: 4rem;
    z-index: 10;
    background-color: rgb(255 255 255);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.dark .fi-fo-rich-editor-toolbar {
    /* matches the section background plus the input's white/5 overlay */
    background-color: rgb(23 30 45);
}

/* On phones the topbar is not sticky, so the toolbar can sit at the top. */
@media (max-width: 1024px) {
    .fi-fo-rich-editor-toolbar {
        top: 0;
    }
}