/* apps/backend/public/css/reviewku-filament.css */

/*
|--------------------------------------------------------------------------
| Reviewku Filament Custom Style
|--------------------------------------------------------------------------
| Sinkronisasi brand admin Filament dengan frontend reviewku.my.id.
| Style direction: Friendly Clean Editorial Review.
*/

:root {
    --reviewku-primary: #0357fb;
    --reviewku-primary-hover: #0247d9;
    --reviewku-secondary: #02103e;
    --reviewku-accent: #fc8009;
    --reviewku-accent-hover: #e86f00;

    --reviewku-background: #f8fafc;
    --reviewku-surface: #ffffff;
    --reviewku-surface-soft: #eff6ff;
    --reviewku-border: #e2e8f0;
    --reviewku-border-hover: #bfdbfe;

    --reviewku-heading: #02103e;
    --reviewku-body: #334155;
    --reviewku-muted: #64748b;
}

/*
|--------------------------------------------------------------------------
| Filament Color Tokens
|--------------------------------------------------------------------------
| Override warna primary Filament agar tombol, active navigation,
| badge, dan focus ring mengikuti brand blue reviewku.
*/

.fi-panel {
    --primary-50: 239 246 255;
    --primary-100: 219 234 254;
    --primary-200: 191 219 254;
    --primary-300: 147 197 253;
    --primary-400: 96 165 250;
    --primary-500: 3 87 251;
    --primary-600: 3 87 251;
    --primary-700: 2 71 217;
    --primary-800: 2 16 62;
    --primary-900: 2 16 62;
    --primary-950: 2 16 62;
}

/*
|--------------------------------------------------------------------------
| Global Admin Surface
|--------------------------------------------------------------------------
*/

.fi-body {
    background: var(--reviewku-background);
    color: var(--reviewku-body);
}

.fi-sidebar {
    background: var(--reviewku-surface);
    border-right: 1px solid var(--reviewku-border);
}

.fi-topbar nav {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--reviewku-border);
    backdrop-filter: blur(12px);
}

.fi-main {
    background: var(--reviewku-background);
}

/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

.fi-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-modal-heading {
    color: var(--reviewku-heading);
    font-weight: 800;
}

.fi-section-header-description,
.fi-ta-header-description,
.fi-modal-description {
    color: var(--reviewku-muted);
}

/*
|--------------------------------------------------------------------------
| Sidebar Navigation
|--------------------------------------------------------------------------
*/

.fi-sidebar-item a {
    border-radius: 14px;
}

.fi-sidebar-item-active a,
.fi-sidebar-item a:hover {
    background: var(--reviewku-surface-soft);
    color: var(--reviewku-primary);
}

.fi-sidebar-item-active svg,
.fi-sidebar-item a:hover svg {
    color: var(--reviewku-primary);
}

.fi-sidebar-group-label {
    color: var(--reviewku-muted);
    font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Buttons & Actions
|--------------------------------------------------------------------------
*/

.fi-btn {
    border-radius: 14px;
    font-weight: 700;
}

.fi-btn-color-primary {
    background: var(--reviewku-primary);
}

.fi-btn-color-primary:hover {
    background: var(--reviewku-primary-hover);
}

.fi-btn-color-danger {
    border-radius: 14px;
}

/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
*/

.fi-ta {
    border: 1px solid var(--reviewku-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--reviewku-surface);
}

.fi-ta-header {
    background: var(--reviewku-surface);
}

.fi-ta-row:hover {
    background: var(--reviewku-surface-soft);
}

/* Layout footer table Filament:
   kiri = "Showing x result"
   kanan = "Per page 10" + pagination lainnya */
.fi-ta-pagination {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

/* Kiri: Showing x result */
.fi-ta-pagination> :first-child {
    flex: 1 1 auto !important;
    margin-right: auto !important;
    text-align: left !important;
}

/* Kanan: Per page + pagination */
.fi-ta-pagination> :last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Wrapper pagination internal Filament */
.fi-ta-pagination .fi-pagination {
    display: flex !important;
    width: auto !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Select "Per page" */
.fi-ta-pagination .fi-pagination-records-per-page-select,
.fi-ta-pagination [class*="records-per-page"] {
    margin-left: auto !important;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .fi-ta-pagination {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    .fi-ta-pagination> :first-child {
        width: 100% !important;
        flex-basis: 100% !important;
        margin-right: 0 !important;
    }

    .fi-ta-pagination> :last-child,
    .fi-ta-pagination .fi-pagination {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }

    .fi-ta-pagination .fi-pagination-records-per-page-select,
    .fi-ta-pagination [class*="records-per-page"] {
        margin-left: 0 !important;
    }
}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

.fi-section {
    border-radius: 20px;
    border-color: var(--reviewku-border);
    background: var(--reviewku-surface);
}

.fi-input-wrp,
.fi-fo-select,
.fi-fo-textarea {
    border-radius: 14px;
}

.fi-input-wrp:focus-within {
    border-color: var(--reviewku-primary);
    box-shadow: 0 0 0 1px var(--reviewku-primary);
}

/*
|--------------------------------------------------------------------------
| Badges
|--------------------------------------------------------------------------
*/

.fi-badge {
    border-radius: 999px;
    font-weight: 700;
}