/* ══════════════════════════════════════════════════════════
   HUMPUSS CRM — Custom Theme v4 LIGHT
   Sidebar: PUTIH BERSIH | Brand: #CC1F1A
══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

body, .fi-body, [class*="fi-"] {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* SIDEBAR — Putih bersih */
.fi-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #f0f0f0 !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04) !important;
}
.fi-sidebar-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 1rem !important;
}
.fi-sidebar-footer {
    background-color: #fafafa !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 0.5rem !important;
}
.fi-sidebar-nav { padding: 0.5rem 0.375rem !important; }
.fi-sidebar-group-label {
    color: #9ca3af !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0.25rem 0.75rem !important;
    margin-top: 0.75rem !important;
}
.fi-sidebar-item-button {
    color: #4b5563 !important;
    border-radius: 0.5rem !important;
    margin: 0.0625rem 0.25rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    transition: background-color 0.15s, color 0.15s !important;
}
.fi-sidebar-item-button:hover {
    background-color: #fff1f1 !important;
    color: #CC1F1A !important;
}
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current="page"] {
    background-color: #fff1f1 !important;
    color: #CC1F1A !important;
    font-weight: 600 !important;
    border-left: 3px solid #CC1F1A !important;
    padding-left: calc(0.75rem - 3px) !important;
}
.fi-sidebar-item-icon { color: #9ca3af !important; }
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon { color: #CC1F1A !important; }
.fi-user-avatar-button { color: #6b7280 !important; }
.fi-user-avatar-button:hover { background-color: #f9fafb !important; }
.fi-sidebar::-webkit-scrollbar { width: 3px; }
.fi-sidebar::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

/* TOPBAR */
.fi-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* MAIN */
.fi-main, .fi-main-ctn, .fi-page-header { background-color: #f8f9fa !important; }

/* STAT CARDS */
.fi-wi-stats-overview-stat {
    background-color: #ffffff !important;
    border-radius: 0.875rem !important;
    border: 1px solid #f3f4f6 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}
.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.09) !important;
    transform: translateY(-2px) !important;
}
.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important; font-weight: 600 !important;
    letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #9ca3af !important;
}
.fi-wi-stats-overview-stat-value {
    font-size: 1.625rem !important; font-weight: 700 !important;
    line-height: 1.2 !important; color: #111827 !important;
}

/* CHART */
.fi-wi-chart {
    background-color: #ffffff !important; border-radius: 0.875rem !important;
    border: 1px solid #f3f4f6 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* TABLE */
.fi-ta-ctn {
    border-radius: 0.875rem !important; overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; border: 1px solid #f3f4f6 !important;
}
.fi-ta-header-toolbar { background-color: #ffffff !important; padding: 0.875rem 1rem !important; }
.fi-ta-row:hover td { background-color: #fff8f8 !important; }
.fi-ta-header-cell {
    font-size: 0.72rem !important; font-weight: 600 !important;
    letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #9ca3af !important;
}

/* BUTTONS */
.fi-btn-color-primary {
    background-color: #CC1F1A !important; border-color: #CC1F1A !important;
    color: #ffffff !important; font-weight: 600 !important;
}
.fi-btn-color-primary:hover { background-color: #a8180e !important; border-color: #a8180e !important; }

/* SECTIONS */
.fi-section {
    background-color: #ffffff !important; border-radius: 0.875rem !important;
    border: 1px solid #f3f4f6 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.fi-section-header { border-bottom: 1px solid #f9fafb !important; padding: 1rem 1.25rem !important; }
.fi-section-header-heading { font-size: 0.875rem !important; font-weight: 600 !important; color: #111827 !important; }

/* DROPDOWN & MODAL */
.fi-dropdown-panel {
    border-radius: 0.75rem !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    border: 1px solid #f3f4f6 !important;
}
.fi-modal-window { border-radius: 1rem !important; box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important; }

/* LOGIN */
.fi-simple-main { background-color: #f5f5f5 !important; min-height: 100vh !important; }
.fi-simple-layout { background-color: transparent !important; }
.fi-simple-main .fi-card {
    background: #ffffff !important; border: none !important;
    border-top: 4px solid #CC1F1A !important; border-radius: 1rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
}
.fi-simple-main label, .fi-simple-main .fi-fo-field-wrp-label { color: #374151 !important; font-weight: 500 !important; }
.fi-simple-main h1 { color: #111827 !important; font-weight: 700 !important; }
.fi-simple-main p  { color: #6b7280 !important; }
.fi-simple-main input[type="email"],
.fi-simple-main input[type="password"],
.fi-simple-main input[type="text"] {
    background: #ffffff !important; border-color: #d1d5db !important; color: #111827 !important;
}
.fi-simple-main input:focus {
    border-color: #CC1F1A !important; box-shadow: 0 0 0 2px rgba(204,31,26,0.15) !important;
}
.fi-simple-main .fi-btn-color-primary { background: #CC1F1A !important; border: none !important; font-weight: 700 !important; }
.fi-simple-main .fi-btn-color-primary:hover {
    background: #a8180e !important; transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(204,31,26,0.35) !important;
}

/* PAGINATION & BADGE */
.fi-pagination-item-btn-active { background-color: #CC1F1A !important; color: white !important; border-radius: 0.375rem !important; }
.fi-badge { font-weight: 600 !important; font-size: 0.7rem !important; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .fi-wi-stats-overview-stat-value { font-size: 1.375rem !important; }
    .fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat { border-radius: 0.625rem !important; }
}