/* ==========================================================================
   Stayva Desk / Partner Portal — Executive UI Theme
   Modern, Clean, High-Contrast Dashboard Design
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
    --fi-font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

body, .fi-body {
    background-color: #f8fafc !important;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
.fi-sidebar {
    background-color: #0b132b !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 18px 20px;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar .fi-logo {
    font-family: "Outfit", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-size: 1.35rem !important;
    color: #ffffff !important;
}

.fi-sidebar-nav {
    background: transparent !important;
    padding: 16px 12px;
}

.fi-sidebar-group-label {
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    padding: 10px 14px 6px !important;
}

.fi-sidebar-item-btn {
    border-radius: 12px !important;
    padding: 10px 14px !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.35) 0%, rgba(20, 184, 166, 0.2) 100%) !important;
    color: #5eead4 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
    border-left: 3px solid #14b8a6 !important;
}

.fi-sidebar-item-btn svg {
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   TOPBAR
   -------------------------------------------------------------------------- */
.fi-topbar {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
}

.fi-main {
    background-color: #f8fafc !important;
}

/* --------------------------------------------------------------------------
   HEADINGS & TYPOGRAPHY
   -------------------------------------------------------------------------- */
.fi-header-heading,
.fi-ta-header-heading,
.fi-section-header-heading {
    font-family: "Outfit", var(--fi-font-family) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   STAT WIDGETS
   -------------------------------------------------------------------------- */
.fi-wi-stats-overview-stat {
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
    padding: 22px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.fi-wi-stats-overview-stat-value {
    font-family: "Outfit", sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.1rem !important;
    letter-spacing: -0.03em !important;
    color: #0f766e !important;
    margin-top: 6px !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* --------------------------------------------------------------------------
   TABLES & CONTAINERS
   -------------------------------------------------------------------------- */
.fi-ta-ctn,
.fi-section {
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
    overflow: hidden !important;
}

.fi-ta-header {
    padding: 18px 22px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.fi-ta-table thead tr th {
    background-color: #f8fafc !important;
    font-weight: 700 !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.fi-ta-table tbody tr {
    transition: background-color 0.15s ease !important;
}

.fi-ta-table tbody tr:hover {
    background-color: #f8fafc !important;
}

.fi-ta-table tbody td {
    padding: 14px 18px !important;
    font-size: 0.92rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* --------------------------------------------------------------------------
   BUTTONS & FORM INPUTS
   -------------------------------------------------------------------------- */
.fi-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    padding: 9px 18px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-btn-primary {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28) !important;
}

.fi-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.38) !important;
    filter: brightness(1.05);
}

.fi-input-wrp {
    border-radius: 12px !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.fi-input-wrp:focus-within {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

/* --------------------------------------------------------------------------
   BADGES & STATUSES
   -------------------------------------------------------------------------- */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 3px 10px !important;
    letter-spacing: 0.02em !important;
}

@media (max-width: 768px) {
    .fi-wi-stats-overview-stat-value {
        font-size: 1.6rem !important;
    }
}