/* Custom Soft & Clean Super Premium Theme for Filament Admin */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* Global Font & Smoothness */
body, .fi-body {
    font-family: var(--font-family) !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

/* Header & Topbar Soft Glassmorphism */
.fi-topbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    z-index: 30 !important;
}

.fi-dropdown-panel {
    z-index: 9999 !important;
}

.dark .fi-topbar {
    background: rgba(15, 23, 42, 0.85) !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
}

/* Sidebar Styling */
.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 2px 0 15px -3px rgba(0, 0, 0, 0.02) !important;
}

.dark .fi-sidebar {
    background: #0f172a !important;
    border-right: 1px solid rgba(30, 41, 59, 0.8) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid rgba(241, 245, 249, 0.8) !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.fi-sidebar-item-button {
    border-radius: 0.75rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(241, 245, 249, 0.9) !important;
    transform: translateX(3px);
}

.dark .fi-sidebar-item-button:hover {
    background: rgba(30, 41, 59, 0.6) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.05)) !important;
    color: #059669 !important;
    font-weight: 600 !important;
}

.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1)) !important;
    color: #34d399 !important;
}

/* Soft Cards & Widgets */
.fi-section, .fi-wi-widget, .fi-ta-content {
    border-radius: 1.25rem !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03), 0 4px 12px -2px rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.dark .fi-section, .dark .fi-wi-widget, .dark .fi-ta-content {
    background: #1e293b !important;
    border: 1px solid rgba(51, 65, 85, 0.6) !important;
}

/* Stats Overview Cards - Distinct Vibrant Soft Pastel Gradients */
.fi-wi-stats-overview-stat {
    border-radius: 1.25rem !important;
    padding: 1.35rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-5px) !important;
}

/* Card 1: Soft Pastel Peach Orange (.stat-card-pengrajin) */
.stat-card-pengrajin,
.stat-card-pengrajin *,
.fi-wi-stats-overview-stat:nth-child(1),
.fi-wi-stats-overview-stat:nth-child(1) * {
    background-color: transparent;
}

.stat-card-pengrajin,
.fi-wi-stats-overview-stat:nth-child(1) {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border: 1px solid #fed7aa !important;
    box-shadow: 0 10px 25px -5px rgba(251, 146, 60, 0.12) !important;
}

.stat-card-pengrajin .fi-wi-stats-overview-stat-label,
.stat-card-pengrajin .fi-wi-stats-overview-stat-description,
.stat-card-pengrajin span,
.stat-card-pengrajin p,
.stat-card-pengrajin svg,
.fi-wi-stats-overview-stat:nth-child(1) .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat:nth-child(1) .fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat:nth-child(1) span,
.fi-wi-stats-overview-stat:nth-child(1) p,
.fi-wi-stats-overview-stat:nth-child(1) svg {
    color: #9a3412 !important;
}

.stat-card-pengrajin .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat:nth-child(1) .fi-wi-stats-overview-stat-value {
    color: #ea580c !important;
    font-weight: 800 !important;
    font-size: 2.25rem !important;
}

/* Card 2: Soft Pastel Lavender Purple (.stat-card-produk) */
.stat-card-produk,
.stat-card-produk *,
.fi-wi-stats-overview-stat:nth-child(2),
.fi-wi-stats-overview-stat:nth-child(2) * {
    background-color: transparent;
}

.stat-card-produk,
.fi-wi-stats-overview-stat:nth-child(2) {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
    border: 1px solid #e9d5ff !important;
    box-shadow: 0 10px 25px -5px rgba(192, 132, 252, 0.12) !important;
}

.stat-card-produk .fi-wi-stats-overview-stat-label,
.stat-card-produk .fi-wi-stats-overview-stat-description,
.stat-card-produk span,
.stat-card-produk p,
.stat-card-produk svg,
.fi-wi-stats-overview-stat:nth-child(2) .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat:nth-child(2) .fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat:nth-child(2) span,
.fi-wi-stats-overview-stat:nth-child(2) p,
.fi-wi-stats-overview-stat:nth-child(2) svg {
    color: #6b21a8 !important;
}

.stat-card-produk .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat:nth-child(2) .fi-wi-stats-overview-stat-value {
    color: #9333ea !important;
    font-weight: 800 !important;
    font-size: 2.25rem !important;
}

/* Card 3: Soft Pastel Mint Emerald Green (.stat-card-omzet) */
.stat-card-omzet,
.stat-card-omzet *,
.fi-wi-stats-overview-stat:nth-child(3),
.fi-wi-stats-overview-stat:nth-child(3) * {
    background-color: transparent;
}

.stat-card-omzet,
.fi-wi-stats-overview-stat:nth-child(3) {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 1px solid #bbf7d0 !important;
    box-shadow: 0 10px 25px -5px rgba(52, 211, 153, 0.12) !important;
}

.stat-card-omzet .fi-wi-stats-overview-stat-label,
.stat-card-omzet .fi-wi-stats-overview-stat-description,
.stat-card-omzet span,
.stat-card-omzet p,
.stat-card-omzet svg,
.fi-wi-stats-overview-stat:nth-child(3) .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat:nth-child(3) .fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat:nth-child(3) span,
.fi-wi-stats-overview-stat:nth-child(3) p,
.fi-wi-stats-overview-stat:nth-child(3) svg {
    color: #166534 !important;
}

.stat-card-omzet .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat:nth-child(3) .fi-wi-stats-overview-stat-value {
    color: #16a34a !important;
    font-weight: 800 !important;
    font-size: 2.25rem !important;
}

/* Dark mode adjustments */
.dark .stat-card-pengrajin {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.8) 0%, rgba(4, 120, 87, 0.6) 100%) !important;
    border: 2px solid rgba(52, 211, 153, 0.8) !important;
}
.dark .stat-card-pengrajin * {
    color: #dcfce7 !important;
}

.dark .stat-card-produk {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.8) 0%, rgba(107, 33, 168, 0.6) 100%) !important;
    border: 2px solid rgba(192, 132, 252, 0.8) !important;
}
.dark .stat-card-produk * {
    color: #f3e8ff !important;
}

.dark .stat-card-omzet {
    background: linear-gradient(135deg, rgba(124, 45, 18, 0.8) 0%, rgba(154, 52, 18, 0.6) 100%) !important;
    border: 2px solid rgba(251, 146, 60, 0.8) !important;
}
.dark .stat-card-omzet * {
    color: #ffedd5 !important;
}

/* Tables & Badges */
.fi-ta-table {
    border-radius: 1.25rem !important;
}

.fi-badge {
    border-radius: 9999px !important;
    padding: 0.3rem 0.8rem !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

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

/* ==========================================================================
   Super Premium Luxury Login Page Styling (Sulaman Kapalo Samek)
   ========================================================================== */

/* Full Layout Background with Ambient Glowing Orbs & Soft Gradients */
.fi-simple-layout {
    position: relative !important;
    background: radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
                radial-gradient(circle at 85% 85%, rgba(217, 119, 6, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(245, 243, 250, 1) 0%, rgba(238, 242, 246, 1) 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.dark .fi-simple-layout {
    background: radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.15) 0%, transparent 45%),
                radial-gradient(circle at 85% 85%, rgba(217, 119, 6, 0.12) 0%, transparent 50%),
                linear-gradient(135deg, #0f172a 0%, #020617 100%) !important;
}

/* Ambient glow orb pseudo-elements */
.fi-simple-layout::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 20%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.fi-simple-layout::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: 20%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Login Main Card Container */
.fi-simple-main {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 28rem !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 1.75rem !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset,
                0 10px 20px -5px rgba(16, 185, 129, 0.05) !important;
    padding: 2.25rem 2rem !important;
    transition: all 0.3s ease !important;
}

.dark .fi-simple-main {
    background: rgba(15, 23, 42, 0.82) !important;
    border: 1px solid rgba(51, 65, 85, 0.8) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
}

/* Card Header Accent Bar */
.fi-simple-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(90deg, #10b981 0%, #d97706 50%, #10b981 100%);
    border-radius: 0 0 4px 4px;
}

/* Logo Styling */
.fi-logo, 
.fi-simple-header img,
.fi-logo img {
    display: block !important;
    margin: 0 auto 0.75rem auto !important;
    height: 7.5rem !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: multiply !important;
    filter: drop-shadow(0 8px 16px rgba(16, 185, 129, 0.12)) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dark .fi-simple-header img,
.dark .fi-logo img {
    mix-blend-mode: normal !important;
}

.fi-logo:hover,
.fi-simple-header img:hover,
.fi-logo img:hover {
    transform: scale(1.04) rotate(-1deg) !important;
}

/* Brand / Subtitle Text */
.fi-simple-header h1,
.fi-simple-header .fi-header-heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
}

.dark .fi-simple-header h1,
.dark .fi-simple-header .fi-header-heading {
    color: #f8fafc !important;
}

.fi-simple-header p,
.fi-simple-header .fi-header-subheading {
    font-size: 0.875rem !important;
    color: #64748b !important;
    text-align: center !important;
    margin-top: 0.25rem !important;
    font-weight: 500 !important;
}

/* Form Fields */
.fi-simple-main .fi-input-wrapper {
    border-radius: 0.875rem !important;
    border: 1px solid #cbd5e1 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) inset !important;
}

.fi-simple-main .fi-input-wrapper:focus-within {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
}

.dark .fi-simple-main .fi-input-wrapper {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: #475569 !important;
}

.dark .fi-simple-main .fi-input-wrapper:focus-within {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2) !important;
}

.fi-simple-main input[type="email"],
.fi-simple-main input[type="password"],
.fi-simple-main input[type="text"] {
    font-size: 0.9375rem !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 0.875rem !important;
}

/* Labels */
.fi-simple-main label {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
}

.dark .fi-simple-main label {
    color: #cbd5e1 !important;
}

/* Primary Action Button (Sign In) */
.fi-simple-main button[type="submit"],
.fi-simple-main .fi-btn-primary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
    border-radius: 0.875rem !important;
    padding: 0.75rem 1.25rem !important;
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4), 0 4px 6px -2px rgba(16, 185, 129, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

.fi-simple-main button[type="submit"]:hover,
.fi-simple-main .fi-btn-primary:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 25px -4px rgba(16, 185, 129, 0.5), 0 6px 8px -2px rgba(16, 185, 129, 0.25) !important;
}

.fi-simple-main button[type="submit"]:active,
.fi-simple-main .fi-btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 6px 12px -3px rgba(16, 185, 129, 0.4) !important;
}