/* ==========================================================================
   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);

    /* 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;
    transition: width 200ms var(--cms-ease) !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;
}

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

.fi-sidebar-item-btn {
    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 150ms var(--cms-ease), color 150ms 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 150ms var(--cms-ease) !important;
}

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

.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;
}

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

/* ---- 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,
.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;
}

.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);
}