/* ============================================
   GPiku.id — Complete Theme (Light + Dark)
   Zinc-based Midnight Onyx for dark mode
   ============================================ */

/* === GLOBAL === */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* === LIGHT MODE === */
.fi-main { background-color: #f8fafc !important; }
.fi-sidebar { background-color: #ffffff !important; border-right: 1px solid #f1f5f9 !important; }
.fi-topbar { background-color: rgba(255,255,255,0.85) !important; border-bottom: 1px solid #f1f5f9 !important; }
.fi-content { background-color: transparent !important; }

/* All card/section/table surfaces */
.fi-section, .fi-card, .fi-table, .fi-wi,
.fi-fo-section, .fi-wi-stats-overview,
.fi-widget, [class*="fi-widget"],
.fi-dropdown-panel, .fi-modal-window {
    background-color: #ffffff !important;
}

/* Borders & Radius */
.fi-section, .fi-card, .fi-table, .fi-fo-section, .fi-widget, [class*="fi-widget"] {
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 15px -3px rgba(0,0,0,0.04), 0 2px 6px -2px rgba(0,0,0,0.02) !important;
    transition: all 0.25s ease;
}

/* Input fields */
.fi-input, .fi-select-input, .fi-textarea {
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
}
.fi-input-wrp {
    border-radius: 0.75rem !important;
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
.fi-input-wrp:focus-within {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12) !important;
}
.fi-form-field-label { font-weight: 600 !important; font-size: 0.8rem !important; color: #1e293b !important; }
.fi-form-field-description, .fi-hint { color: #64748b !important; }

/* Table */
.fi-table-header { border-bottom: 1px solid #f1f5f9 !important; }
.fi-table th { background-color: #f8fafc !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #64748b !important; }
.fi-table td { border-bottom: 1px solid #f1f5f9 !important; color: #1e293b !important; }
.fi-table tr:hover td { background-color: rgba(245,158,11,0.03) !important; }

/* Badge */
.fi-badge { border-radius: 9999px !important; font-weight: 600 !important; font-size: 0.7rem !important; }

/* Button */
.fi-btn { border-radius: 0.75rem !important; transition: all 0.2s ease !important; }
.fi-btn:hover { transform: translateY(-1px); }

/* Tabs */
.fi-tabs-navigation { border-bottom: 2px solid #f1f5f9 !important; }
.fi-tabs-navigation-item { border-radius: 0.5rem 0.5rem 0 0 !important; font-weight: 600 !important; color: #64748b !important; }
.fi-tabs-navigation-item:hover { color: #1e293b !important; background: #f8fafc !important; }
.fi-tabs-navigation-item-active { color: #f59e0b !important; border-bottom: 2px solid #f59e0b !important; margin-bottom: -2px !important; }

/* Pagination */
.fi-pagination-item { border-radius: 0.5rem !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important; }
.fi-pagination-item:hover { background: #f8fafc !important; }
.fi-pagination-item-active { background: #f59e0b !important; border-color: #f59e0b !important; color: #ffffff !important; }

/* Header */
.fi-header-heading { font-weight: 800 !important; font-size: 1.5rem !important; color: #1e293b !important; letter-spacing: -0.02em !important; }

/* Sidebar */
.fi-sidebar-nav-item { border-radius: 0.5rem !important; margin: 2px 8px !important; transition: all 0.2s ease !important; }
.fi-sidebar-nav-item:hover { background: rgba(245,158,11,0.06) !important; }
.fi-sidebar-nav-item-active { background: linear-gradient(90deg, rgba(245,158,11,0.1), transparent) !important; border-left: 3px solid #f59e0b !important; border-radius: 0 0.5rem 0.5rem 0 !important; }
.fi-sidebar-nav-item-active .fi-sidebar-nav-item-label { color: #d97706 !important; font-weight: 600 !important; }
.fi-sidebar-nav-group-label { font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #94a3b8 !important; }

/* Modal */
.fi-modal, .fi-dialog, .fi-modal-window, .fi-dropdown-panel { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 1rem !important; }
.fi-modal-header, .fi-dialog-header { border-bottom: 1px solid #f1f5f9 !important; }
.fi-modal-header-heading { font-weight: 700 !important; color: #1e293b !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Text */
.fi-main p, .fi-main h1, .fi-main h2, .fi-main h3, .fi-main h4, .fi-main h5, .fi-main h6, .fi-main span, .fi-main label, .fi-text { color: #1e293b; }
::placeholder { color: #94a3b8 !important; }

/* === DARK MODE (Zinc Midnight Onyx) === */
.dark .fi-main { background-color: #09090b !important; }
.dark .fi-sidebar { background-color: #18181b !important; border-right: 1px solid #27272a !important; }
.dark .fi-topbar { background-color: rgba(9,9,11,0.85) !important; border-bottom: 1px solid #27272a !important; }
.dark .fi-content { background-color: transparent !important; }

/* All surfaces in dark */
.dark .fi-section, .dark .fi-card, .dark .fi-table, .dark .fi-wi,
.dark .fi-fo-section, .dark .fi-wi-stats-overview,
.dark .fi-widget, .dark [class*="fi-widget"],
.dark .fi-dropdown-panel, .dark .fi-modal-window,
.dark .fi-modal, .dark .fi-dialog {
    background-color: #18181b !important;
    border: 1px solid #27272a !important;
    box-shadow: 0 4px 15px -3px rgba(0,0,0,0.4), 0 2px 6px -2px rgba(0,0,0,0.3) !important;
}

.dark .fi-card:hover, .dark .fi-section:hover {
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5), 0 4px 10px -4px rgba(0,0,0,0.4) !important;
}

/* Dark inputs */
.dark .fi-input, .dark .fi-select-input, .dark .fi-textarea {
    background-color: #09090b !important;
    border-color: #27272a !important;
    color: #f4f4f5 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;
}
.dark .fi-input-wrp { background-color: #09090b !important; border-color: #27272a !important; }
.dark .fi-input-wrp:focus-within { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important; }
.dark .fi-form-field-label { color: #f4f4f5 !important; }
.dark .fi-form-field-description, .dark .fi-hint { color: #a1a1aa !important; }

/* Dark table */
.dark .fi-table-header { border-bottom: 1px solid #27272a !important; }
.dark .fi-table th { background-color: #09090b !important; color: #a1a1aa !important; border-bottom: 1px solid #27272a !important; }
.dark .fi-table td { border-bottom: 1px solid #27272a !important; color: #f4f4f5 !important; background-color: transparent !important; }
.dark .fi-table tr { background-color: transparent !important; }
.dark .fi-table tr:hover td { background-color: rgba(245,158,11,0.04) !important; }

/* Dark pagination */
.dark .fi-pagination-item { background-color: #18181b !important; border-color: #27272a !important; color: #a1a1aa !important; }
.dark .fi-pagination-item:hover { background-color: #27272a !important; }
.dark .fi-pagination-item-active { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #09090b !important; }

/* Dark header */
.dark .fi-header-heading { color: #f4f4f5 !important; }

/* Dark sidebar */
.dark .fi-sidebar-nav-item:hover { background: rgba(245,158,11,0.08) !important; }
.dark .fi-sidebar-nav-item-active { background: linear-gradient(90deg, rgba(245,158,11,0.12), transparent) !important; }
.dark .fi-sidebar-nav-item-active .fi-sidebar-nav-item-label { color: #fbbf24 !important; }
.dark .fi-sidebar-nav-group-label { color: #52525b !important; }

/* Dark tabs */
.dark .fi-tabs-navigation { border-bottom-color: #27272a !important; }
.dark .fi-tabs-navigation-item { color: #a1a1aa !important; }
.dark .fi-tabs-navigation-item:hover { color: #f4f4f5 !important; background: rgba(255,255,255,0.03) !important; }
.dark .fi-tabs-navigation-item-active { color: #f59e0b !important; border-bottom-color: #f59e0b !important; }

/* Dark modal */
.dark .fi-modal-header, .dark .fi-dialog-header { border-bottom-color: #27272a !important; }
.dark .fi-modal-header-heading { color: #f4f4f5 !important; }
.dark .fi-modal-content, .dark .fi-dialog-content { color: #f4f4f5 !important; }

/* Dark scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #3f3f46; }
.dark ::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* Dark text */
.dark .fi-main p, .dark .fi-main h1, .dark .fi-main h2, .dark .fi-main h3, .dark .fi-main h4, .dark .fi-main h5, .dark .fi-main h6, .dark .fi-main span, .dark .fi-main label, .dark .fi-text { color: #f4f4f5 !important; }
.dark ::placeholder { color: #52525b !important; }
.dark .text-gray-400, .dark .text-gray-500, .dark .text-gray-600 { color: #a1a1aa !important; }

/* === CUSTOM WIDGET CLASSES === */

/* Welcome Card — always dark hero */
.gpiku-welcome-card {
    background: linear-gradient(135deg, #09090b 0%, #18181b 100%) !important;
    border: 1px solid #27272a !important;
    border-radius: 1.25rem !important;
    padding: 2rem !important;
    color: #f4f4f5 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3) !important;
}
.gpiku-welcome-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(245,158,11,0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* Stat Card */
.gpiku-stat-card {
    background: #ffffff !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    box-shadow: 0 4px 15px -3px rgba(0,0,0,0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    border: 1px solid #f1f5f9 !important;
}
.gpiku-stat-card:hover { transform: translateY(-3px) !important; box-shadow: 0 15px 30px -5px rgba(0,0,0,0.08) !important; }
.dark .gpiku-stat-card {
    background: #18181b !important;
    border: 1px solid #27272a !important;
    box-shadow: 0 4px 15px -3px rgba(0,0,0,0.4) !important;
}
.dark .gpiku-stat-card:hover { box-shadow: 0 15px 30px -5px rgba(0,0,0,0.5) !important; }

/* Stat Card internal text */
.gpiku-stat-card .stat-value { color: #1e293b !important; }
.dark .gpiku-stat-card .stat-value { color: #f4f4f5 !important; }
.gpiku-stat-card .stat-label { color: #94a3b8 !important; }
.dark .gpiku-stat-card .stat-label { color: #a1a1aa !important; }

/* Stat description badges */
.gpiku-stat-card .stat-desc {
    background: #f1f5f9 !important;
    color: #64748b !important;
}
.dark .gpiku-stat-card .stat-desc {
    background: rgba(255,255,255,0.05) !important;
    color: #a1a1aa !important;
}

/* Stat icon backgrounds */
.gpiku-stat-icon-success { background: #ecfdf5 !important; color: #10b981 !important; }
.gpiku-stat-icon-primary { background: #fffbeb !important; color: #f59e0b !important; }
.gpiku-stat-icon-warning { background: #fefce8 !important; color: #eab308 !important; }
.gpiku-stat-icon-danger  { background: #fef2f2 !important; color: #ef4444 !important; }
.gpiku-stat-icon-info    { background: #ecfeff !important; color: #06b6d4 !important; }
.gpiku-stat-icon-gray    { background: #f8fafc !important; color: #64748b !important; }

.dark .gpiku-stat-icon-success { background: rgba(16,185,129,0.1) !important; color: #34d399 !important; }
.dark .gpiku-stat-icon-primary { background: rgba(245,158,11,0.1) !important; color: #fbbf24 !important; }
.dark .gpiku-stat-icon-warning { background: rgba(234,179,8,0.1) !important; color: #facc15 !important; }
.dark .gpiku-stat-icon-danger  { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; }
.dark .gpiku-stat-icon-info    { background: rgba(6,182,212,0.1) !important; color: #22d3ee !important; }
.dark .gpiku-stat-icon-gray    { background: rgba(161,161,170,0.1) !important; color: #a1a1aa !important; }

/* Accent lines */
.gpiku-accent-success { background: linear-gradient(90deg, #10b981, #34d399); }
.gpiku-accent-primary { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.gpiku-accent-warning { background: linear-gradient(90deg, #eab308, #facc15); }
.gpiku-accent-danger  { background: linear-gradient(90deg, #ef4444, #f87171); }
.gpiku-accent-info    { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.gpiku-accent-gray    { background: linear-gradient(90deg, #64748b, #94a3b8); }

/* Quick action cards (dashboard) */
.gpiku-quick-action {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
}
.gpiku-quick-action:hover { border-color: #fde68a !important; box-shadow: 0 4px 12px rgba(245,158,11,0.1) !important; }
.dark .gpiku-quick-action {
    background: #18181b !important;
    border: 1px solid #27272a !important;
}
.dark .gpiku-quick-action:hover { border-color: #92400e !important; box-shadow: 0 4px 12px rgba(245,158,11,0.05) !important; }

/* Quick action text */
.quick-action-label { color: #1e293b; }
.quick-action-sub { color: #94a3b8; }
.dark .quick-action-label { color: #f4f4f5 !important; }
.dark .quick-action-sub { color: #52525b !important; }

/* Animation */
@keyframes slideInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fi-content > * { animation: slideInUp 0.3s ease-out; }

/* Responsive */
@media (max-width: 1024px) { .fi-content { padding: 16px !important; } }