/* Fera Admin — Modern "Smart" SaaS Design (Inspired by Resturant/MainLayout) */
/* Developer: Fevzi Tarhan */

:root {
    --brand-50: #f0f7ff;
    --brand-100: #e0f0fe;
    --brand-200: #bae0fd;
    --brand-500: #0ea5e9;
    --brand-600: #0284c7;
    --brand-700: #0369a1;
    --brand-text: #0f172a;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-800: #1e293b;
}

body {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--slate-50) !important;
    color: var(--slate-800) !important;
}

/* ── Custom Scrollbar (Resturant Style) ───────────────────────── */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--slate-200);
    border-radius: 10px;
}

/* ── Sidebar: Clean SaaS Style ────────────────────────────────── */
.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--slate-200) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

.fi-sidebar-header {
    padding: 1.5rem !important;
    border-bottom: 1px solid var(--brand-50) !important;
}

.fi-sidebar-header .fi-brand-name {
    font-weight: 850 !important;
    font-size: 1.25rem !important;
    background: linear-gradient(to right, var(--brand-600), var(--brand-400)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: -0.04em !important;
}

/* Sidebar Navigation Items */
.fi-sidebar-nav {
    padding: 1rem 0.75rem !important;
}

.fi-sidebar-item-button {
    border-radius: 0.75rem !important;
    margin-bottom: 4px !important;
    padding: 0.625rem 0.75rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--slate-500) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.fi-sidebar-item-button:hover {
    background: var(--slate-100) !important;
    color: var(--slate-800) !important;
    transform: translateX(2px) !important;
}

.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current] {
    background: var(--brand-50) !important;
    color: var(--brand-700) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px var(--brand-100) !important;
}

.fi-sidebar-item-icon {
    width: 1.1rem !important;
    height: 1.1rem !important;
    margin-right: 0.75rem !important;
    color: var(--slate-400) !important;
}

.fi-active .fi-sidebar-item-icon,
[aria-current] .fi-sidebar-item-icon {
    color: var(--brand-600) !important;
}

/* Nav Groups */
.fi-sidebar-group-label {
    padding: 1.5rem 0.75rem 0.5rem !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--slate-400) !important;
}

/* ── Topbar: Sticky Glass ─────────────────────────────────────── */
.fi-topbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--slate-200) !important;
    position: sticky !important;
}

/* ── Global Search (Spotlight Style) ──────────────────────────── */
.fi-global-search-field {
    background: var(--slate-100) !important;
    border-radius: 0.75rem !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

.fi-global-search-field:focus-within {
    background: #ffffff !important;
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 4px var(--brand-50) !important;
}

/* ── Main Content Area ────────────────────────────────────────── */
.fi-main {
    padding: 2.5rem !important;
}

.fi-header-heading {
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    color: var(--slate-800) !important;
    letter-spacing: -0.03em !important;
}

/* ── Modern Cards & Widgets (Resturant Style) ─────────────────── */
.fi-section, .fi-wi {
    border-radius: 1.25rem !important;
    background: #ffffff !important;
    border: 1px solid var(--slate-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-section:hover, .fi-wi:hover {
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.08) !important;
}

/* Stats Overview */
.fi-wi-stats-overview-stat {
    border-radius: 1.25rem !important;
    padding: 1.75rem !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.75rem !important;
    font-weight: 850 !important;
}

/* ── Smart Tables ─────────────────────────────────────────────── */
.fi-ta-content {
    border-radius: 1.25rem !important;
    border: 1px solid var(--slate-200) !important;
}

.fi-ta-header-cell {
    background: var(--slate-50) !important;
    padding: 1.25rem 1rem !important;
    font-weight: 800 !important;
}

.fi-ta-row:hover td {
    background: var(--brand-50) !important;
}

/* ── Notifications / Badges ───────────────────────────────────── */
.fi-badge {
    border-radius: 0.625rem !important;
    padding: 0.15rem 0.5rem !important;
    font-weight: 700 !important;
}

.fi-topbar-notifications-btn {
    border-radius: 0.75rem !important;
    background: var(--slate-100) !important;
}

/* ── Login Page (Resturant Vibe) ─────────────────────────────── */
.fi-simple-layout {
    border-radius: 2rem !important;
    box-shadow: 0 40px 100px -20px rgba(15, 23, 42, 0.2) !important;
}

.fi-simple-main input {
    height: 3.5rem !important;
    border-radius: 1rem !important;
}

/* ── Action Buttons ───────────────────────────────────────────── */
.fi-btn-primary {
    background: linear-gradient(to bottom right, var(--brand-500), var(--brand-600)) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2) !important;
}

.fi-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3) !important;
}