/*
 * Custom visual layer for the admin panel: navy-blue "education" branding,
 * gradients, and subtle motion — layered on top of Filament's own stylesheet
 * via the FilamentAsset system (see AdminPanelProvider::boot()). Plain CSS
 * targeting Filament's stable `fi-*` component classes, no Tailwind build
 * step required.
 */

:root {
    --edu-navy-900: #0a1325;
    --edu-navy-800: #0b2545;
    --edu-navy-700: #123a6b;
    --edu-gold: #c9a84c;
    --edu-blue-accent: #2563eb;
}

@keyframes fi-fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fi-sidebar-shimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ---------- Page entrance ---------- */
.fi-main {
    animation: fi-fade-slide-up 0.35s ease-out;
}

/*
 * ---------- Admin panel background photo ----------
 * public/bg.jpeg behind the whole panel, with a dark scrim layered on top so
 * cards/tables/sidebar (which all keep their own opaque backgrounds) stay
 * fully readable — the photo only shows through the page's empty gutters.
 */
body.fi-body {
    background-image:
        linear-gradient(180deg, rgba(249, 250, 251, 0.93), rgba(249, 250, 251, 0.93)),
        url('/bg.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

.dark body.fi-body {
    background-image:
        linear-gradient(180deg, rgba(3, 7, 18, 0.88), rgba(3, 7, 18, 0.88)),
        url('/bg.jpeg') !important;
}

/* ---------- Sidebar: rich navy gradient with a slow animated shimmer ---------- */
.fi-sidebar {
    background: linear-gradient(195deg, var(--edu-navy-700) 0%, var(--edu-navy-800) 45%, var(--edu-navy-900) 100%);
    background-size: 200% 200%;
    animation: fi-sidebar-shimmer 18s ease infinite;
    box-shadow: 4px 0 24px rgba(10, 19, 37, 0.25);
    position: relative;
}

.fi-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(201, 168, 76, 0.14), transparent 35%),
        radial-gradient(circle at 90% 80%, rgba(37, 99, 235, 0.16), transparent 40%);
    pointer-events: none;
}

.fi-sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.fi-sidebar-group-label {
    color: rgba(201, 168, 76, 0.85) !important;
    letter-spacing: 0.06em;
    font-weight: 700 !important;
}

.fi-sidebar-item-button {
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    border-radius: 0.65rem;
    position: relative;
}

.fi-sidebar-item-button:hover {
    transform: translateX(3px);
    background-color: rgba(255, 255, 255, 0.07) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.22), rgba(201, 168, 76, 0.04)) !important;
    box-shadow: inset 3px 0 0 0 var(--edu-gold);
}

.fi-sidebar-item-icon {
    transition: transform 0.18s ease;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    transform: scale(1.12);
}

/* ---------- Sidebar text: white on the navy background ---------- */
.fi-sidebar-item-label,
.fi-sidebar-item-icon,
.fi-sidebar-group-button,
.fi-sidebar-group-icon {
    color: rgb(255 255 255) !important;
}

/* ---------- Topbar ---------- */
.fi-topbar {
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.dark .fi-topbar {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ---------- Buttons: a bit of life on hover ---------- */
.fi-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.fi-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.fi-btn:active {
    transform: translateY(0);
}

/* ---------- Badges ---------- */
.fi-badge {
    transition: transform 0.15s ease;
}

.fi-badge:hover {
    transform: scale(1.06);
}

/* ---------- Login / simple layout: bg.jpeg behind a navy scrim + soft glow ---------- */
.fi-simple-layout {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(201, 168, 76, 0.18), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(37, 99, 235, 0.18), transparent 32%),
        linear-gradient(160deg, rgba(10, 19, 37, 0.88), rgba(11, 37, 69, 0.88) 55%, rgba(18, 58, 107, 0.88)),
        url('/bg.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.fi-simple-main {
    animation: fi-fade-slide-up 0.4s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 60px rgba(10, 19, 37, 0.35) !important;
}

/* ---------- Sections / cards: soft lift on hover ---------- */
.fi-section {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .fi-main,
    .fi-simple-main,
    .fi-sidebar,
    .fi-sidebar-item-button,
    .fi-sidebar-item-icon,
    .fi-btn,
    .fi-badge {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Sidebar nav search ---------- */
.erp-sidebar-search {
    padding: 0 0.5rem 1rem;
}

.erp-sidebar-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.erp-sidebar-search-icon {
    position: absolute;
    left: 0.625rem;
    width: 1rem;
    height: 1rem;
    color: rgb(148 163 184);
    pointer-events: none;
}

.erp-sidebar-search-input {
    width: 100%;
    padding: 0.5rem 1.75rem 0.5rem 2rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: rgb(30 41 59);
    background-color: rgb(255 255 255 / 0.9);
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.erp-sidebar-search-input:focus {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
}

.dark .erp-sidebar-search-input {
    color: rgb(226 232 240);
    background-color: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.1);
}

.dark .erp-sidebar-search-icon {
    color: rgb(100 116 139);
}

.erp-sidebar-search-clear {
    position: absolute;
    right: 0.5rem;
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1;
    font-size: 0.875rem;
    color: rgb(148 163 184);
    background: transparent;
    border: none;
    cursor: pointer;
}

.erp-sidebar-search-clear:hover {
    color: rgb(71 85 105);
}

.erp-sidebar-search-empty {
    margin: 0.5rem 0.125rem 0;
    font-size: 0.75rem;
    color: rgb(148 163 184);
}

/* ---------- Registration hub ---------- */
.reg-hub-grid > * {
    animation: fi-fade-slide-up 0.45s ease-out both;
}

.reg-hub-grid > *:nth-child(1) { animation-delay: 0s; }
.reg-hub-grid > *:nth-child(2) { animation-delay: 0.06s; }
.reg-hub-grid > *:nth-child(3) { animation-delay: 0.12s; }
.reg-hub-grid > *:nth-child(4) { animation-delay: 0.18s; }
.reg-hub-grid > *:nth-child(5) { animation-delay: 0.24s; }

.reg-hub-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgb(11 37 69 / 0.08);
    color: rgb(11 37 69);
}

.dark .reg-hub-count {
    background: rgb(255 255 255 / 0.08);
    color: rgb(226 232 240);
}

.reg-hub-links {
    display: grid;
    gap: 0.125rem;
}

.reg-hub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(51 65 85);
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.reg-hub-link:hover {
    background-color: rgb(11 37 69 / 0.06);
    color: rgb(11 37 69);
    transform: translateX(3px);
}

.dark .reg-hub-link {
    color: rgb(203 213 225);
}

.dark .reg-hub-link:hover {
    background-color: rgb(255 255 255 / 0.06);
    color: #fff;
}

.reg-hub-link-arrow {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.reg-hub-link:hover .reg-hub-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

.reg-hub-empty {
    font-size: 0.8125rem;
    color: rgb(148 163 184);
}