/* ==========================================================================
   Admin panel — premium dark-mode redesign
   Loaded after Filament's own compiled CSS via Panel::assets(), so every
   rule here is an override targeting Filament's existing class names.
   No Tailwind build exists for this app — this file is hand-written plain
   CSS, not utility classes.
   ========================================================================== */

:root {
    /* Design tokens — sophisticated dark surfaces, not pure black */
    --cms-bg: #0a0a0b;
    --cms-sidebar-bg: #0f1012;
    --cms-topbar-bg: #0f1012;
    --cms-card-bg: #151619;
    --cms-elevated-bg: #1a1b1f;
    --cms-border: rgba(255, 255, 255, 0.08);
    --cms-border-strong: rgba(255, 255, 255, 0.14);
    --cms-text-primary: #f5f5f6;
    --cms-text-secondary: #9a9ba1;
    --cms-text-muted: #6b6c72;
    --cms-accent: #f59e0b;
    --cms-accent-soft: rgba(245, 158, 11, 0.12);
    --cms-accent-border: rgba(245, 158, 11, 0.35);
    --cms-radius-sm: 6px;
    --cms-radius-md: 8px;
    --cms-radius-lg: 12px;
    --cms-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Premium easing for sidebar collapse/expand motion specifically —
       distinct from --cms-ease (used for quick micro-interactions
       elsewhere) because a wider, slower gesture like a 260px sidebar
       reading its full width reads as "premium" with a curve that
       decelerates harder at the end; --cms-ease looks clipped at that size. */
    --cms-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

    /* Typography scale */
    --cms-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --cms-text-page-title: 1.75rem;
    --cms-text-section-title: 1.125rem;
    --cms-text-body: 0.875rem;
    --cms-text-nav: 0.8125rem;
    --cms-text-meta: 0.75rem;
}

/* ---- Global surfaces & typography -------------------------------------- */

.fi-body {
    background-color: var(--cms-bg) !important;
    font-family: var(--cms-font-sans);
}

.fi-main-ctn,
.fi-main {
    background-color: var(--cms-bg) !important;
}

.fi-page-content,
.fi-page {
    max-width: 1760px;
    margin-inline: auto;
}

.cms-admin-max-w {
    max-width: 1760px !important;
    margin-inline: auto !important;
}

.fi-header-heading {
    font-size: var(--cms-text-page-title) !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em;
    color: var(--cms-text-primary) !important;
}

.fi-header-subheading {
    font-size: var(--cms-text-body) !important;
    color: var(--cms-text-secondary) !important;
}

.fi-section {
    background-color: var(--cms-card-bg) !important;
    border: 1px solid var(--cms-border) !important;
    border-radius: var(--cms-radius-lg) !important;
    box-shadow: none !important;
}

/* ---- Sidebar ------------------------------------------------------------ */

.fi-sidebar {
    background-color: var(--cms-sidebar-bg) !important;
    border-inline-end: 1px solid var(--cms-border) !important;
}

/* Filament ships no width rule at all for the desktop "collapsed" state
   when only ->sidebarCollapsibleOnDesktop() (not the "Fully" variant) is
   used — its own CSS only ever sets width on the OPEN state, so without
   this the collapse toggle changes nothing visually. This is what actually
   makes it an icon rail, and what the width transition below animates. */
@media (min-width: 1024px) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar {
        width: var(--sidebar-width);
        transition: width 280ms var(--cms-ease-premium) !important;
    }

    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar,
    .fi-sidebar-nav,
    .fi-sidebar-item-label,
    .fi-sidebar-group-label,
    .fi-sidebar-item-btn,
    .fi-sidebar-item-icon,
    .fi-active > .fi-sidebar-item-btn::before,
    .cms-sidebar-tooltip,
    .fi-topbar-open-collapse-sidebar-btn,
    .fi-topbar-close-collapse-sidebar-btn {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--cms-border);
    padding-block: 1.1rem;
}

.fi-sidebar-nav {
    padding-inline: 0.75rem;
    padding-block: 0.75rem;
    gap: 0.25rem;
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 1.25rem;
}

.fi-sidebar-group-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase;
    color: var(--cms-text-muted) !important;
    padding-inline: 0.625rem;
    margin-bottom: 0.375rem;
    transition: opacity 140ms ease !important;
}

.fi-sidebar-item {
    margin-block: 1px;
}

.fi-sidebar-item-btn {
    position: relative;
    border-radius: var(--cms-radius-md) !important;
    font-size: var(--cms-text-nav) !important;
    font-weight: 500 !important;
    color: var(--cms-text-secondary) !important;
    padding-block: 0.5rem !important;
    transition: background-color 140ms var(--cms-ease), color 140ms var(--cms-ease) !important;
}

.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--cms-text-primary) !important;
}

.fi-sidebar-item-icon {
    color: var(--cms-text-muted) !important;
    transition: color 140ms var(--cms-ease), transform 140ms var(--cms-ease) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: var(--cms-text-secondary) !important;
    transform: translateX(1px);
}

.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active {
    background-color: var(--cms-accent-soft) !important;
    color: var(--cms-accent) !important;
}

.fi-active .fi-sidebar-item-icon {
    color: var(--cms-accent) !important;
}

/* Animated active-item indicator (a 3px accent bar) instead of only a
   background swap. It's a per-item entrance animation rather than one
   shared element sliding between items — settings/resource navigation
   here is a real Livewire page navigation (a new DOM node per page), not
   a client-side tab switch, so there's no single persistent element to
   morph between two positions; this still reads as purposeful motion
   rather than an instant, static highlight. */
.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 999px;
    background: var(--cms-accent);
    animation: cms-active-indicator-in 220ms var(--cms-ease-premium);
}

@keyframes cms-active-indicator-in {
    from {
        opacity: 0;
        transform: scaleY(0.4);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.fi-sidebar-footer {
    border-top: 1px solid var(--cms-border);
}

/* ---- Sidebar collapse: labels fade out, icons stay, tooltip on hover --- */

@media (min-width: 1024px) {
    .fi-sidebar-item-label {
        transition: opacity 140ms ease, transform 140ms ease;
        transition-delay: 90ms;
    }

    .fi-icon-btn-badge-ctn {
        transition: opacity 140ms ease;
        transition-delay: 90ms;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label,
    .fi-sidebar:not(.fi-sidebar-open) .fi-icon-btn-badge-ctn {
        opacity: 0;
        transform: translateX(-6px);
        width: 0;
        margin: 0 !important;
        pointer-events: none;
        transition-delay: 0ms;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label {
        opacity: 0;
        pointer-events: none;
    }
}

/* ---- Sidebar scroll: minimal scrollbar + edge fade ---------------------
   Replaces the panel-wide 8px scrollbar (see sidebar-motion partial /
   block-picker-styles.blade.php) with a slimmer one scoped to the sidebar
   specifically, plus a top/bottom mask-image fade toggled by JS
   (cms-fade-top / cms-fade-bottom classes — see sidebar-motion.blade.php)
   so it only shows in the direction there's actually more to scroll. */
.fi-sidebar-nav {
    scrollbar-width: none;
    transition: mask-image 200ms ease, -webkit-mask-image 200ms ease;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    transition: background-color 260ms ease;
}

.fi-sidebar-nav.cms-scrolling {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}

.fi-sidebar-nav.cms-scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.32);
}

.fi-sidebar-nav.cms-fade-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 24px);
    mask-image: linear-gradient(to bottom, transparent, black 24px);
}

.fi-sidebar-nav.cms-fade-bottom {
    -webkit-mask-image: linear-gradient(to top, transparent, black 24px);
    mask-image: linear-gradient(to top, transparent, black 24px);
}

.fi-sidebar-nav.cms-fade-top.cms-fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 24px, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, transparent, black 24px, black calc(100% - 24px), transparent);
}

/* ---- Collapsed-sidebar tooltip (JS-positioned, see sidebar-motion.blade.php)
   Lives in document.body via JS rather than as a child of .fi-sidebar-nav,
   because that nav is a scroll container (overflow-y: auto) — CSS clips ANY
   descendant that overflows an ancestor's non-visible axis, even one
   positioned absolute, so a tooltip nested inside it can never escape
   rightward past the collapsed rail no matter how it's positioned. */
.cms-sidebar-tooltip {
    --cms-tip-x: -4px;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(var(--cms-tip-x), -50%);
    background: var(--cms-elevated-bg);
    color: var(--cms-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.625rem;
    border-radius: var(--cms-radius-md);
    border: 1px solid var(--cms-border);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 150ms ease, transform 150ms ease;
}

.cms-sidebar-tooltip.cms-visible {
    opacity: 1;
    transform: translate(0, -50%);
}

/* ---- Topbar -------------------------------------------------------------- */

.fi-topbar {
    background-color: var(--cms-topbar-bg) !important;
    border-bottom: 1px solid var(--cms-border) !important;
    backdrop-filter: none !important;
}

.fi-topbar-ctn {
    height: 3.5rem;
}

/* ---- Buttons & interactive elements --------------------------------------- */

.fi-btn {
    transition: background-color 120ms var(--cms-ease), border-color 120ms var(--cms-ease), color 120ms var(--cms-ease), transform 120ms var(--cms-ease) !important;
}

.fi-dropdown-panel {
    animation: cms-fade-in 120ms var(--cms-ease);
}

@keyframes cms-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Focus states (accessibility) ---------------------------------------- */

.fi-sidebar-item-btn:focus-visible,
.fi-btn:focus-visible,
.fi-topbar-open-collapse-sidebar-btn:focus-visible,
.fi-topbar-close-collapse-sidebar-btn:focus-visible,
.cms-focusable:focus-visible {
    outline: 2px solid var(--cms-accent) !important;
    outline-offset: 2px;
}

/* ---- Dashboard widget overlay (title label + remove button) -------------
   App\Filament\Pages\Dashboard wraps each widget in a schema Group along
   with a title <p> and a "remove" Action, so Filament auto-lays them out as
   3 separate stacked grid rows with gaps between them — which left the
   overlay elements floating above the widget's actual card instead of
   pinned to its corners. Pulling the two overlay rows out of grid flow here
   collapses the grid back down to just the widget's own height, and their
   `inset: 0` makes them exactly overlay that single remaining row, so the
   inline `position:absolute; top/left/right` on the title/button (set in
   Dashboard.php) now resolves against the widget's card, not the old
   3-row block. ------------------------------------------------------------ */

.fi-grid:has(> .fi-wi-widget) {
    position: relative;
}

/* CSS Grid's default align-items:stretch was forcing every widget in a row
   to match its row's tallest neighbor (e.g. the one-line "Account" widget
   stretched to match a tall chart next to it), leaving a large dead-air gap
   inside the shorter card. Each widget should size to its own content. */
.fi-dashboard .fi-grid {
    align-items: start;
}

.fi-grid:has(> .fi-wi-widget) > .fi-grid-col:not(.fi-wi-widget),
.fi-grid:has(> .fi-wi-widget) > .fi-sc-action {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fi-grid:has(> .fi-wi-widget) > .fi-grid-col:not(.fi-wi-widget) button,
.fi-grid:has(> .fi-wi-widget) > .fi-sc-action button {
    pointer-events: auto;
}

/* Each widget already gets our small uppercase label overlaid top-left (see
   above), so the widget's own built-in heading — much bigger, bold, white —
   is now a redundant duplicate. Hide it rather than editing every individual
   widget class. */
.fi-wi-widget .fi-section-header-heading,
.fi-wi-widget .fi-ta-header-heading,
.fi-wi-widget [class$="-widget-heading"] {
    display: none;
}

/* The "×" remove-button: understated by default, only steps forward on
   hover of its own widget card — matches the rest of the panel's restrained,
   no-clutter style rather than a permanently-visible gray blob. */
.cms-widget-remove {
    position: absolute !important;
    top: 0.7rem;
    right: 0.7rem;
    inset-inline-start: auto;
    inset-block-end: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: transparent;
    color: var(--cms-text-muted);
    opacity: 0.55;
    z-index: 5;
    transition: opacity 120ms var(--cms-ease), background-color 120ms var(--cms-ease), color 120ms var(--cms-ease);
}

.cms-widget-remove svg {
    width: 0.8rem;
    height: 0.8rem;
}

.fi-wi-widget:hover ~ .fi-grid-col .cms-widget-remove,
.fi-grid:has(> .fi-wi-widget:hover) .cms-widget-remove {
    opacity: 1;
}

.cms-widget-remove:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cms-text-primary);
}

/* ==========================================================================
   Themes page — custom components (cms- prefixed, bespoke to this page)
   ========================================================================== */

.cms-themes-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.cms-themes-title {
    font-size: var(--cms-text-page-title);
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--cms-text-primary);
    margin: 0;
}

.cms-themes-subtitle {
    margin-top: 0.375rem;
    font-size: var(--cms-text-body);
    color: var(--cms-text-secondary);
    max-width: 46rem;
    line-height: 1.5;
}

.cms-themes-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.cms-themes-count {
    font-size: var(--cms-text-meta);
    color: var(--cms-text-muted);
    white-space: nowrap;
    padding-inline: 0.25rem;
}

.cms-search {
    position: relative;
    display: flex;
    align-items: center;
}

.cms-search svg {
    position: absolute;
    left: 0.7rem;
    width: 15px;
    height: 15px;
    color: var(--cms-text-muted);
    pointer-events: none;
}

.cms-search input {
    width: 15rem;
    max-width: 100%;
    background-color: var(--cms-elevated-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-md);
    padding: 0.5rem 0.75rem 0.5rem 2.1rem;
    font-size: var(--cms-text-body);
    color: var(--cms-text-primary);
    outline: none;
    transition: border-color 150ms var(--cms-ease);
}

.cms-search input::placeholder {
    color: var(--cms-text-muted);
}

.cms-search input:focus {
    border-color: var(--cms-accent-border);
}

.cms-select {
    background-color: var(--cms-elevated-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-md);
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: var(--cms-text-body);
    color: var(--cms-text-primary);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c72' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 14px;
    cursor: pointer;
    transition: border-color 150ms var(--cms-ease);
}

.cms-select:focus {
    border-color: var(--cms-accent-border);
}

.cms-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

@media (min-width: 1440px) {
    .cms-theme-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .cms-theme-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .cms-theme-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .cms-theme-grid {
        grid-template-columns: 1fr;
    }
}

.cms-theme-card {
    display: flex;
    flex-direction: column;
    background-color: var(--cms-card-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    overflow: hidden;
    transition: transform 150ms var(--cms-ease), border-color 150ms var(--cms-ease);
}

.cms-theme-card:hover {
    transform: translateY(-2px);
    border-color: var(--cms-border-strong);
}

.cms-theme-card.cms-theme-card-active {
    border-color: var(--cms-accent-border);
}

.cms-theme-preview {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    transition: transform 200ms var(--cms-ease);
}

.cms-theme-card:hover .cms-theme-preview {
    transform: scale(1.015);
}

.cms-theme-preview-chrome {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
}

.cms-theme-preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.cms-theme-badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(10, 10, 11, 0.75);
    border: 1px solid var(--cms-accent-border);
    color: var(--cms-accent);
    font-size: var(--cms-text-meta);
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.cms-theme-body {
    padding: 1.1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.cms-theme-name {
    font-size: var(--cms-text-section-title);
    font-weight: 600;
    color: var(--cms-text-primary);
    margin: 0;
}

.cms-theme-desc {
    font-size: var(--cms-text-meta);
    line-height: 1.5;
    color: var(--cms-text-secondary);
    margin: 0;
    min-height: 2.25rem;
}

.cms-theme-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.cms-theme-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cms-theme-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.cms-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: var(--cms-text-nav);
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: var(--cms-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 120ms var(--cms-ease), border-color 120ms var(--cms-ease), color 120ms var(--cms-ease);
    text-decoration: none;
}

.cms-btn-secondary {
    background-color: var(--cms-elevated-bg);
    border-color: var(--cms-border);
    color: var(--cms-text-secondary);
}

.cms-btn-secondary:hover {
    color: var(--cms-text-primary);
    border-color: var(--cms-border-strong);
}

.cms-btn-primary {
    background-color: var(--cms-accent);
    color: #1a1002;
}

.cms-btn-primary:hover {
    background-color: #fbbf4e;
}

.cms-btn-active {
    background-color: transparent;
    border-color: var(--cms-accent-border);
    color: var(--cms-accent);
    cursor: default;
}

.cms-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 4rem 0;
    text-align: center;
    color: var(--cms-text-muted);
    font-size: var(--cms-text-body);
}