@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;900&display=swap');

/* ============================================
   GLOBAL FONT SYSTEM - ROBOTO
   ============================================ */
* {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', system-ui, sans-serif !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* ============================================
   SIDEBAR - COMPACT & MODERN
   ============================================ */
.fi-sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08) !important;
}

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

.fi-sidebar-nav-item {
    transition: all 0.2s ease !important;
    border-radius: 8px !important;
    margin: 4px 0 !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #e2e8f0 !important;
}

.fi-sidebar-nav-item:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    transform: translateX(2px);
    color: #ffffff !important;
}

.fi-sidebar-nav-item-active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* Sidebar icons spacing */
.fi-sidebar-item-icon {
    margin-right: 12px !important;
    width: 20px !important;
    height: 20px !important;
}

.fi-sidebar-header {
    padding: 24px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fi-sidebar-brand {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Sidebar navigation group labels */
.fi-sidebar-group-label {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px 8px !important;
}

/* ============================================
   TOPBAR/HEADER - REDESIGNED
   ============================================ */
.fi-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    padding: 0 28px !important;
}

.fi-topbar-start {
    gap: 20px !important;
}

.fi-topbar-end {
    gap: 16px !important;
}

/* User menu button */
.fi-user-menu-button {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: all 0.2s ease !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

.fi-user-menu-button:hover {
    background: #f3f4f6 !important;
}

/* Breadcrumbs in topbar */
.fi-breadcrumbs-item {
    color: #6b7280 !important;
    font-size: 14px !important;
}

.fi-breadcrumbs-item-active {
    color: #111827 !important;
    font-weight: 500 !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.fi-main {
    background: #f8f9fa !important;
    padding: 16px 20px !important;
}

.fi-main-ctn {
    max-width: 100% !important;
}

/* ============================================
   GLOBAL BORDER RADIUS SYSTEM
   ============================================ */
.fi-section,
.fi-section-content-ctn,
.fi-card {
    border-radius: 8px !important;
}

.fi-modal-window {
    border-radius: 10px !important;
}

.fi-btn {
    border-radius: 6px !important;
}

.fi-input-wrp,
.fi-input,
.fi-select {
    border-radius: 6px !important;
}

.fi-badge {
    border-radius: 4px !important;
}

/* ============================================
   CARD SPACING SYSTEM
   ============================================ */
.fi-section {
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.fi-section-content {
    padding: 16px !important;
}

.fi-section-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.fi-section-header-heading {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.fi-section-description {
    color: #6b7280 !important;
    font-size: 13px !important;
    margin-top: 2px !important;
}

.fi-fo-field-wrp {
    margin-bottom: 20px !important;
}

/* Form section with background */
.fi-fo-section {
    background: #ffffff !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
}

/* ============================================
   WIDGET CARDS - UPDATED SPACING
   ============================================ */
.fi-wi-stats-overview {
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.fi-wi-stats-overview-stat {
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: #d1d5db !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 4px !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #6b7280 !important;
    margin-bottom: 8px !important;
}

.fi-wi-stats-overview-stat-description {
    color: #6b7280 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

.fi-wi-stats-overview-stat-icon {
    color: #9ca3af !important;
    margin-bottom: 6px !important;
}

/* Chart Widget */
.fi-wi-chart {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 12px !important;
}

.fi-wi-chart:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: #d1d5db !important;
}

.fi-wi-heading {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: #111827 !important;
}

/* ============================================
   BUTTONS - REFINED
   ============================================ */
.fi-btn {
    font-weight: 500 !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.fi-btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: none !important;
}

.fi-btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.fi-btn-secondary {
    border: 1px solid #d1d5db !important;
}

.fi-btn-secondary:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
.fi-input {
    font-size: 14px !important;
    padding: 10px 14px !important;
    border: 1px solid #d1d5db !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    color: #111827 !important;
}

.fi-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    outline: none !important;
}

.fi-input::placeholder {
    color: #9ca3af !important;
}

.fi-fo-field-wrp-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #374151 !important;
}

.fi-fo-field-wrp-hint {
    color: #6b7280 !important;
    font-size: 13px !important;
}

.fi-fo-field-wrp-error-message {
    color: #dc2626 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

/* Select inputs */
.fi-select {
    color: #111827 !important;
}

/* Textarea */
.fi-textarea {
    padding: 10px 14px !important;
    color: #111827 !important;
}

/* ============================================
   TABLES - IMPROVED SPACING
   ============================================ */
.fi-ta {
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.fi-ta-header-cell {
    padding: 10px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.fi-ta-cell {
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: #111827 !important;
}

.fi-ta-row {
    transition: all 0.15s ease !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.fi-ta-row:hover {
    background: #f9fafb !important;
}

/* Table text content */
.fi-ta-text {
    color: #111827 !important;
}

/* Table badges */
.fi-ta .fi-badge {
    font-weight: 500 !important;
}

/* Table widget container */
.fi-ta-ctn {
    margin-bottom: 12px !important;
}

/* Widget wrapper */
.fi-wi {
    margin-bottom: 12px !important;
}

/* ============================================
   DASHBOARD SPECIFIC
   ============================================ */
.fi-page-heading {
    font-size: 28px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    color: #111827 !important;
}

.fi-header {
    margin-bottom: 20px !important;
}

.fi-header-heading {
    color: #111827 !important;
}

/* Dashboard widgets grid */
.fi-dashboard-widgets {
    gap: 12px !important;
}

/* Resource header actions */
.fi-header-actions {
    gap: 12px !important;
}

/* Page actions */
.fi-page-actions {
    gap: 12px !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.fi-breadcrumbs {
    margin-bottom: 20px !important;
}

.fi-breadcrumbs-item {
    font-size: 14px !important;
    color: #6b7280 !important;
}

.fi-breadcrumbs-item-separator {
    color: #9ca3af !important;
}

/* ============================================
   NOTIFICATIONS
   ============================================ */
.fi-no {
    border-radius: 8px !important;
    padding: 16px 18px !important;
}

.fi-no-title {
    font-weight: 600 !important;
    color: #111827 !important;
}

.fi-no-body {
    color: #374151 !important;
}

/* ============================================
   BADGES
   ============================================ */
.fi-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
}

.fi-badge-primary {
    background: #eff6ff !important;
    color: #1e40af !important;
}

.fi-badge-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.fi-badge-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.fi-badge-warning {
    background: #fefce8 !important;
    color: #854d0e !important;
}

/* ============================================
   MODALS
   ============================================ */
.fi-modal-heading {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.fi-modal-description {
    color: #6b7280 !important;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.fi-ta-empty-state-heading {
    color: #374151 !important;
    font-weight: 600 !important;
}

.fi-ta-empty-state-description {
    color: #6b7280 !important;
}

/* ============================================
   GENERAL TEXT IMPROVEMENTS
   ============================================ */
/* Ensure all main text is readable */
body {
    color: #111827 !important;
}

/* Links */
a {
    color: #6366f1 !important;
}

a:hover {
    color: #4f46e5 !important;
}

/* Helper text */
.fi-helper-text {
    color: #6b7280 !important;
    font-size: 13px !important;
}

/* Description text */
.fi-description {
    color: #6b7280 !important;
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .fi-main {
        padding: 16px !important;
    }

    .fi-section-content {
        padding: 16px !important;
    }
}