/* ==============================================================================
   Iwacs KPI - Luxury Obsidian Black & Metallic Gold Theme
   Inspired by Vezaro Studio Luxury Dark UI (Pinterest 42713896465920319)
   High-Contrast Ultra-Crisp Typography, Gold Menu Blocks, White Date Filters,
   and Zero-Dark Table Cells
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root:where(.dark) {
    /* Obsidian Black Palette */
    --taskly-bg: #0C0D12;
    --taskly-sidebar-bg: #101116;
    --taskly-card-bg: #14151B;
    --taskly-card-elevated: #181922;
    --taskly-card-radius: 20px;
    --taskly-card-border: rgba(255, 255, 255, 0.08);
    --taskly-card-hover-border: rgba(197, 160, 89, 0.4);
    --taskly-card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.35);

    /* Metallic Champagne Gold Tokens */
    --taskly-primary: #C5A059;
    --taskly-gold-bright: #ECC880;
    --taskly-gold-primary: #C5A059;
    --taskly-gold-dark: #9E7D3B;
    --taskly-gold-gradient: linear-gradient(135deg, #ECC880 0%, #C5A059 50%, #9E7D3B 100%);
    --taskly-gold-gradient-hover: linear-gradient(135deg, #F5D794 0%, #D4AF37 50%, #B8860B 100%);
    --taskly-gold-subtle: rgba(197, 160, 89, 0.16);
    --taskly-gold-border: rgba(197, 160, 89, 0.38);

    /* Ultra-Crisp High-Contrast Text Tokens */
    --taskly-text-heading: #FFFFFF;
    --taskly-text-body: #FFFFFF;
    --taskly-text-muted: #E2E8F0;
    --taskly-text-dim: #CBD5E1;

    color-scheme: dark;
}

/* ==============================================================================
   1. Base Body & Overall Layout Overrides
   ============================================================================== */
html:where(.dark),
:where(html.dark) body,
:where(html.dark) .fi-layout {
    background-color: var(--taskly-bg) !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    color: #FFFFFF !important;
    letter-spacing: -0.01em;
    color-scheme: dark !important;
}

:where(html.dark) .fi-main {
    background-color: var(--taskly-bg) !important;
    padding-top: 18px !important;
    padding-bottom: 48px !important;
}

/* Global scrollbar styling for dark luxury feel */
:where(html.dark) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
:where(html.dark) ::-webkit-scrollbar-track {
    background: #0C0D12;
}
:where(html.dark) ::-webkit-scrollbar-thumb {
    background: #232530;
    border-radius: 4px;
}
:where(html.dark) ::-webkit-scrollbar-thumb:hover {
    background: var(--taskly-gold-dark);
}

/* ==============================================================================
   2. Sidebar Navigation (Compact Header Logo & Gold Menu Blocks)
   ============================================================================== */
:where(html.dark) .fi-sidebar {
    background-color: var(--taskly-sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

/* Sidebar Header: Completely Remove/Hide Logo Above Menu (User Request: 1 logo in header only) */
:where(html.dark) .fi-sidebar-header-ctn,
:where(html.dark) .fi-sidebar-header,
:where(html.dark) .fi-sidebar-header-logo-ctn,
:where(html.dark) .fi-sidebar-header .fi-logo,
:where(html.dark) .fi-sidebar-header a img,
:where(html.dark) .fi-sidebar-header img {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Header Topbar: Single Sleek Logo in Topbar Header */
:where(html.dark) .fi-topbar-start {
    display: flex !important;
    align-items: center !important;
    margin-right: 18px !important;
}

:where(html.dark) .fi-topbar-start .fi-logo,
:where(html.dark) .fi-topbar-start a img,
:where(html.dark) .fi-topbar-start img,
:where(html.dark) .fi-topbar .fi-logo,
:where(html.dark) .fi-topbar a img,
:where(html.dark) .fi-topbar img {
    display: inline-flex !important;
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}

:where(html.dark) .fi-topbar-start a:hover img,
:where(html.dark) .fi-topbar a:hover img {
    transform: scale(1.03);
}

/* Group Headers inside Sidebar */
:where(html.dark) .fi-sidebar-group-label {
    color: var(--taskly-gold-bright) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding-top: 14px !important;
    padding-bottom: 4px !important;
}

/* Sidebar Menu Items - Inactive: Crisp White Text, Transparent Block */
:where(html.dark) .fi-sidebar-item-btn {
    background: transparent !important;
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #FFFFFF !important;
    border: 1px solid transparent !important;
}

:where(html.dark) .fi-sidebar-item-btn span,
:where(html.dark) .fi-sidebar-item-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
}

:where(html.dark) .fi-sidebar-item-icon {
    color: #E2E8F0 !important;
    transition: color 0.2s ease !important;
}

/* Sidebar Menu Item - Hover: Subtle Gold Block (Bukan Putih!) */
:where(html.dark) .fi-sidebar-item-btn:hover {
    background: #1D1F26 !important;
    border: 1px solid #363943 !important;
    color: #F8FAFC !important;
}

:where(html.dark) .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
:where(html.dark) .fi-sidebar-item-btn:hover span {
    color: #F8FAFC !important;
}

:where(html.dark) .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #E2E8F0 !important;
}

/* Sidebar Menu Item - Active: Solid Luxury Gold Block (Bukan Putih!) */
:where(html.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: #24262E !important;
    border: 1px solid #363943 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #F8FAFC !important;
    font-weight: 700 !important;
}

:where(html.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label,
:where(html.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-btn span {
    color: #F8FAFC !important;
    font-weight: 700 !important;
}

:where(html.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #E2E8F0 !important;
}

/* ==============================================================================
   3. Topbar Navigation & Sticky Header (Obsidian Frosted Glass)
   ============================================================================== */
:where(html.dark) .fi-topbar-ctn {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
}

:where(html.dark) .fi-topbar {
    background-color: rgba(16, 17, 22, 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
    padding: 0 24px !important;
    min-height: 68px !important;
}

/* Sidebar Toggle Buttons in Topbar */
:where(html.dark) .fi-topbar-open-sidebar-btn,
:where(html.dark) .fi-topbar-close-sidebar-btn,
:where(html.dark) .fi-topbar-open-collapse-sidebar-btn,
:where(html.dark) .fi-topbar-close-collapse-sidebar-btn {
    background: #181922 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

:where(html.dark) .fi-topbar-open-sidebar-btn:hover,
:where(html.dark) .fi-topbar-close-sidebar-btn:hover,
:where(html.dark) .fi-topbar-open-collapse-sidebar-btn:hover,
:where(html.dark) .fi-topbar-close-collapse-sidebar-btn:hover {
    color: var(--taskly-gold-bright) !important;
    border-color: rgba(197, 160, 89, 0.45) !important;
    background: #20222D !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.2) !important;
}

/* Global Search Input Field */
:where(html.dark) .fi-global-search-ctn {
    margin-right: 14px !important;
}

:where(html.dark) .fi-global-search-field .fi-input-wrp {
    background-color: #101116 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

:where(html.dark) .fi-global-search-field .fi-input-wrp:hover {
    background-color: #161720 !important;
    border-color: rgba(197, 160, 89, 0.35) !important;
}

:where(html.dark) .fi-global-search-field .fi-input-wrp:focus-within {
    background-color: #161720 !important;
    border-color: var(--taskly-gold-primary) !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2) !important;
}

:where(html.dark) .fi-global-search-field .fi-input-wrp-prefix svg {
    color: var(--taskly-gold-bright) !important;
}

:where(html.dark) .fi-global-search-field input {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Topbar Header Badges & User Chip */
:where(html.dark) .taskly-topbar-widgets {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 14px;
}

@media (max-width: 900px) {
    :where(html.dark) .taskly-topbar-widgets {
        display: none !important;
    }
}

:where(html.dark) .taskly-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 700;
    transition: all 0.2s ease;
    cursor: default;
    white-space: nowrap;
}

:where(html.dark) .taskly-badge-pulse {
    background-color: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34D399;
}

:where(html.dark) .taskly-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: tasklyPulse 2s infinite;
}

@keyframes tasklyPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

:where(html.dark) .taskly-badge-date {
    background-color: rgba(197, 160, 89, 0.15);
    border: 1px solid rgba(197, 160, 89, 0.35);
    color: var(--taskly-gold-bright);
}

:where(html.dark) .taskly-badge-theme {
    background-color: rgba(197, 160, 89, 0.16) !important;
    border: 1px solid rgba(197, 160, 89, 0.38) !important;
    color: var(--taskly-gold-bright) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
}

:where(html.dark) .taskly-badge-theme:hover {
    background-color: rgba(197, 160, 89, 0.28) !important;
    border-color: rgba(197, 160, 89, 0.55) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2) !important;
}

:where(html.dark) .taskly-badge-text {
    font-size: 11.5px;
    font-weight: 700;
}

:where(html.dark) .taskly-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 14px;
    background: #181922;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

:where(html.dark) .taskly-user-chip-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html.dark) .taskly-user-chip-role {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: rgba(197, 160, 89, 0.2);
    color: var(--taskly-gold-bright);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(197, 160, 89, 0.35);
}

/* User Menu Trigger */
:where(html.dark) .fi-user-menu-trigger {
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
    padding: 2px !important;
}

:where(html.dark) .fi-user-menu-trigger:hover {
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.3) !important;
}

:where(html.dark) .fi-user-menu-trigger .fi-avatar {
    border-radius: 12px !important;
    border: 2px solid rgba(197, 160, 89, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ==============================================================================
   4. Dashboard Grid Structure & Section Containers
   ============================================================================== */
:where(html.dark) .fi-wi,
:where(html.dark) .fi-grid {
    gap: 24px !important;
    width: 100% !important;
}

:where(html.dark) .fi-wi-widget {
    width: 100% !important;
    min-width: 0 !important;
}

:where(html.dark) .fi-wi-user-welcome,
:where(html.dark) .fi-wi-kpi-overview {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Chart Widget Containers */
:where(html.dark) .fi-wi-chart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

:where(html.dark) .fi-wi-chart > .fi-section,
:where(html.dark) .fi-section {
    background-color: var(--taskly-card-bg) !important;
    border-radius: var(--taskly-card-radius) !important;
    border: 1px solid var(--taskly-card-border) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    overflow: hidden;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

:where(html.dark) .fi-wi-chart > .fi-section:hover,
:where(html.dark) .fi-section:hover {
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.65), 0 0 20px -4px rgba(197, 160, 89, 0.15) !important;
    border-color: var(--taskly-card-hover-border) !important;
    transform: translateY(-2px);
}

:where(html.dark) .fi-wi-chart .fi-section-content-ctn {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 16px 24px 24px 24px !important;
}

:where(html.dark) .fi-section-header-heading {
    color: #FFFFFF !important;
    font-size: 16.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}

:where(html.dark) .fi-section-header-description {
    color: #E2E8F0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* ==============================================================================
   5. The 6-Card KPI Grid (3 on Top, 3 on Bottom) with Dark Jewel-Toned Accents
   ============================================================================== */
:where(html.dark) .taskly-kpi-container {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

:where(html.dark) .taskly-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

@media (max-width: 960px) {
    :where(html.dark) .taskly-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 580px) {
    :where(html.dark) .taskly-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

:where(html.dark) .taskly-kpi-card {
    border-radius: var(--taskly-card-radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--taskly-card-border);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    background-color: var(--taskly-card-bg);
}

:where(html.dark) .taskly-kpi-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: var(--taskly-card-hover-border);
    box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.65), 0 0 20px -4px rgba(197, 160, 89, 0.18);
}

/* Glowing Metallic Squircle Icon Button */
:where(html.dark) .taskly-icon-3d {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html.dark) .taskly-kpi-card:hover .taskly-icon-3d {
    transform: scale(1.1) rotate(-2deg);
}

:where(html.dark) .taskly-icon-3d svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}

/* Meta Data Inside KPI Card - High Contrast White & Silver */
:where(html.dark) .taskly-kpi-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

:where(html.dark) .taskly-kpi-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #E2E8F0 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(html.dark) .taskly-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: #FFFFFF !important;
    line-height: 1.15;
    margin-top: 2px;
    letter-spacing: -0.5px;
}

:where(html.dark) .taskly-kpi-badge {
    font-size: 10.5px;
    font-weight: 700;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 8px;
    width: fit-content;
}

/* 6 Distinct Jewel Gradients */
:where(html.dark) .taskly-theme-purple {
    background: linear-gradient(145deg, #181924 0%, #12131A 100%) !important;
}
:where(html.dark) .taskly-theme-purple .taskly-icon-3d {
    background: linear-gradient(135deg, rgba(236, 200, 128, 0.25) 0%, rgba(197, 160, 89, 0.1) 100%) !important;
    border: 1px solid rgba(236, 200, 128, 0.35) !important;
    box-shadow: 0 8px 20px -2px rgba(197, 160, 89, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
:where(html.dark) .taskly-theme-purple .taskly-icon-3d svg {
    color: var(--taskly-gold-bright) !important;
    stroke: var(--taskly-gold-bright) !important;
}
:where(html.dark) .taskly-theme-purple .taskly-kpi-badge {
    background-color: rgba(197, 160, 89, 0.15) !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    color: var(--taskly-gold-bright) !important;
}

:where(html.dark) .taskly-theme-blue {
    background: linear-gradient(145deg, #131726 0%, #10121D 100%) !important;
}
:where(html.dark) .taskly-theme-blue .taskly-icon-3d {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(30, 64, 175, 0.12) 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    box-shadow: 0 8px 20px -2px rgba(59, 130, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
:where(html.dark) .taskly-theme-blue .taskly-icon-3d svg {
    color: #60A5FA !important;
    stroke: #60A5FA !important;
}
:where(html.dark) .taskly-theme-blue .taskly-kpi-badge {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #60A5FA !important;
}

:where(html.dark) .taskly-theme-amber {
    background: linear-gradient(145deg, #1B1713 0%, #141210 100%) !important;
}
:where(html.dark) .taskly-theme-amber .taskly-icon-3d {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(180, 83, 9, 0.12) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    box-shadow: 0 8px 20px -2px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
:where(html.dark) .taskly-theme-amber .taskly-icon-3d svg {
    color: #FBBF24 !important;
    stroke: #FBBF24 !important;
}
:where(html.dark) .taskly-theme-amber .taskly-kpi-badge {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #FBBF24 !important;
}

:where(html.dark) .taskly-theme-lilac {
    background: linear-gradient(145deg, #191424 0%, #12101B 100%) !important;
}
:where(html.dark) .taskly-theme-lilac .taskly-icon-3d {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(126, 34, 206, 0.12) 100%) !important;
    border: 1px solid rgba(192, 132, 252, 0.35) !important;
    box-shadow: 0 8px 20px -2px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
:where(html.dark) .taskly-theme-lilac .taskly-icon-3d svg {
    color: #C084FC !important;
    stroke: #C084FC !important;
}
:where(html.dark) .taskly-theme-lilac .taskly-kpi-badge {
    background-color: rgba(168, 85, 247, 0.15) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    color: #C084FC !important;
}

:where(html.dark) .taskly-theme-pink {
    background: linear-gradient(145deg, #1C1318 0%, #141014 100%) !important;
}
:where(html.dark) .taskly-theme-pink .taskly-icon-3d {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.25) 0%, rgba(190, 18, 60, 0.12) 100%) !important;
    border: 1px solid rgba(251, 113, 133, 0.35) !important;
    box-shadow: 0 8px 20px -2px rgba(244, 63, 94, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
:where(html.dark) .taskly-theme-pink .taskly-icon-3d svg {
    color: #FB7185 !important;
    stroke: #FB7185 !important;
}
:where(html.dark) .taskly-theme-pink .taskly-kpi-badge {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
    color: #FB7185 !important;
}

:where(html.dark) .taskly-theme-mint {
    background: linear-gradient(145deg, #111A16 0%, #0E1412 100%) !important;
}
:where(html.dark) .taskly-theme-mint .taskly-icon-3d {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(4, 120, 87, 0.12) 100%) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    box-shadow: 0 8px 20px -2px rgba(16, 185, 129, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}
:where(html.dark) .taskly-theme-mint .taskly-icon-3d svg {
    color: #34D399 !important;
    stroke: #34D399 !important;
}
:where(html.dark) .taskly-theme-mint .taskly-kpi-badge {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34D399 !important;
}

/* ==============================================================================
   6. Hero Welcome Banner (Luxury Obsidian & Gold Card)
   ============================================================================== */
:where(html.dark) .taskly-hero-banner {
    background: linear-gradient(135deg, #181922 0%, #13141B 50%, #161510 100%) !important;
    border-radius: var(--taskly-card-radius);
    padding: 24px 28px;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    box-shadow: 0 14px 36px -6px rgba(0, 0, 0, 0.55), 0 0 20px -6px rgba(197, 160, 89, 0.1) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    :where(html.dark) .taskly-hero-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
}

:where(html.dark) .taskly-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

:where(html.dark) .taskly-hero-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ECC880 0%, #C5A059 50%, #9E7D3B 100%) !important;
    color: #0C0D11 !important;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px -2px rgba(197, 160, 89, 0.45) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0;
}

:where(html.dark) .taskly-hero-title {
    font-size: 24px;
    font-weight: 800;
    color: #FFFFFF !important;
    letter-spacing: -0.4px;
    margin: 0 !important;
    line-height: 1.25;
}

:where(html.dark) .taskly-hero-subtitle {
    font-size: 13px;
    color: #E2E8F0 !important;
    margin-top: 4px;
    font-weight: 500;
}

/* Hero Meta Grid (4 Equal Uniform Boxes for Role, Team, Atasan, SSO) */
:where(html.dark) .taskly-hero-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
    width: 100% !important;
}

@media (max-width: 1024px) {
    :where(html.dark) .taskly-hero-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    :where(html.dark) .taskly-hero-meta-grid {
        grid-template-columns: 1fr !important;
    }
}

:where(html.dark) .taskly-meta-box {
    background: #181922 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 54px !important;
    height: 54px !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

:where(html.dark) .taskly-meta-box:hover {
    background: #20222E !important;
    border-color: rgba(197, 160, 89, 0.35) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-1px) !important;
}

:where(html.dark) .taskly-meta-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

:where(html.dark) .taskly-meta-purple {
    background: rgba(197, 160, 89, 0.16) !important;
    color: var(--taskly-gold-bright) !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
}

:where(html.dark) .taskly-meta-blue {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #60A5FA !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

:where(html.dark) .taskly-meta-amber {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

:where(html.dark) .taskly-meta-green {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

:where(html.dark) .taskly-meta-content {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
}

:where(html.dark) .taskly-meta-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #E2E8F0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1.1 !important;
}

:where(html.dark) .taskly-meta-value {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
}

/* ==============================================================================
   7. Buttons (Metallic Gold Luxury CTAs with Obsidian Text)
   ============================================================================== */
:where(html.dark) .taskly-btn-action {
    background: var(--taskly-gold-gradient) !important;
    color: #0C0D11 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 12px 22px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px -2px rgba(197, 160, 89, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

:where(html.dark) .taskly-btn-action svg {
    color: #0C0D11 !important;
    stroke: #0C0D11 !important;
}

:where(html.dark) .taskly-btn-action:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 12px 28px -2px rgba(197, 160, 89, 0.5) !important;
    color: #000000 !important;
    background: var(--taskly-gold-gradient-hover) !important;
}

/* Filament Primary Action Buttons */
:where(html.dark) .fi-page-header-actions .fi-btn-color-primary,
:where(html.dark) .fi-ac-btn-action,
:where(html.dark) .fi-btn-color-primary {
    background: var(--taskly-gold-gradient) !important;
    border-radius: 14px !important;
    padding: 10px 20px !important;
    font-weight: 800 !important;
    color: #0C0D11 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 6px 18px -2px rgba(197, 160, 89, 0.35) !important;
    transition: all 0.2s ease !important;
}

:where(html.dark) .fi-page-header-actions .fi-btn-color-primary:hover,
:where(html.dark) .fi-ac-btn-action:hover,
:where(html.dark) .fi-btn-color-primary:hover {
    background: var(--taskly-gold-gradient-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -2px rgba(197, 160, 89, 0.5) !important;
    color: #000000 !important;
}

:where(html.dark) .fi-btn-color-primary span,
:where(html.dark) .fi-btn-color-primary svg {
    color: #0C0D11 !important;
}

/* ==============================================================================
   8. Dashboard Filter Bar: "Dari Tanggal" & "Sampai Tanggal" Pure White & Clear
   ============================================================================== */
:where(html.dark) .fi-page-header-ctn {
    margin-bottom: 24px !important;
}

:where(html.dark) .fi-header {
    margin-bottom: 24px !important;
    padding: 6px 0 !important;
}

:where(html.dark) .fi-header-heading {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.6px !important;
    line-height: 1.2 !important;
}

:where(html.dark) .fi-header-subheading {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #E2E8F0 !important;
    margin-top: 5px !important;
}

:where(html.dark) .fi-page-content > form,
:where(html.dark) .fi-page-content > .fi-sc:first-child,
:where(html.dark) .fi-page-sub-header {
    background: var(--taskly-card-bg) !important;
    border-radius: 20px !important;
    padding: 20px 26px !important;
    border: 1px solid var(--taskly-card-border) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    margin-bottom: 24px !important;
}

/* Filter Field Labels ("Dari Tanggal", "Sampai Tanggal", dll.) - PURE CRISP WHITE */
:where(html.dark) .fi-fo-field-label,
:where(html.dark) .fi-fo-field-label-content,
:where(html.dark) .fi-fo-field-label-ctn,
:where(html.dark) .fi-fo-field-label-col,
:where(html.dark) .fi-fo-field-wrp-label,
:where(html.dark) label.fi-fo-field-label,
:where(html.dark) span.fi-fo-field-label-content,
:where(html.dark) .fi-fo-field label,
:where(html.dark) .fi-fo-field span,
:where(html.dark) .fi-fo-field-label *,
:where(html.dark) .fi-fo-field-wrp-label *,
:where(html.dark) [data-field-wrapper] label,
:where(html.dark) [data-field-wrapper] span,
:where(html.dark) [data-field-wrapper] .fi-fo-field-label-content,
:where(html.dark) .taskly-date-filter,
:where(html.dark) .taskly-date-filter label,
:where(html.dark) .taskly-date-filter span,
:where(html.dark) .taskly-date-filter .fi-fo-field-label-content,
:where(html.dark) .taskly-filter-white,
:where(html.dark) .taskly-filter-white label,
:where(html.dark) .taskly-filter-white span,
:where(html.dark) .taskly-filter-white .fi-fo-field-label-content,
:where(html.dark) .fi-page-sub-header label,
:where(html.dark) .fi-page-sub-header span,
:where(html.dark) .fi-page-sub-header .fi-fo-field-label-content,
:where(html.dark) .fi-page-content form label,
:where(html.dark) .fi-page-content form label span,
:where(html.dark) .fi-page-content form .fi-fo-field-label-content {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: -0.2px !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
    opacity: 1 !important;
}

/* Input Wrappers */
:where(html.dark) .fi-input-wrp {
    background-color: #101116 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    transition: all 0.2s ease !important;
    color-scheme: dark !important;
}

:where(html.dark) .fi-input-wrp:hover {
    border-color: rgba(197, 160, 89, 0.5) !important;
}

:where(html.dark) .fi-input-wrp:focus-within {
    border-color: var(--taskly-gold-primary) !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25) !important;
    background-color: #151620 !important;
}

/* Date Pickers & Text Inputs (Semua Tulisan Nilai Tanggal & Placeholder Jelas Putih) */
:where(html.dark) .fi-fo-date-time-picker,
:where(html.dark) .fi-fo-date-time-picker input,
:where(html.dark) .fi-fo-date-time-picker-display-text-input,
:where(html.dark) .fi-fo-date-time-picker-trigger,
:where(html.dark) .fi-fo-date-time-picker-trigger input,
:where(html.dark) input.fi-fo-date-time-picker-display-text-input,
:where(html.dark) .fi-fo-date-time-picker button,
:where(html.dark) .fi-fo-date-time-picker span,
:where(html.dark) .fi-input-wrp input,
:where(html.dark) .fi-input-wrp select,
:where(html.dark) .fi-select-input,
:where(html.dark) .fi-input,
:where(html.dark) input[type="date"],
:where(html.dark) input[type="datetime-local"] {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color-scheme: dark !important;
    opacity: 1 !important;
}

:where(html.dark) .fi-input-wrp input::placeholder,
:where(html.dark) .fi-fo-date-time-picker input::placeholder,
:where(html.dark) .fi-fo-date-time-picker-display-text-input::placeholder,
:where(html.dark) input.fi-fo-date-time-picker-display-text-input::placeholder,
:where(html.dark) .fi-select-input::placeholder {
    color: #E2E8F0 !important;
    -webkit-text-fill-color: #E2E8F0 !important;
    opacity: 0.9 !important;
}

/* Date / Calendar Icons & Dropdown Chevrons - Champagne Gold Accent */
:where(html.dark) .fi-input-wrp-prefix,
:where(html.dark) .fi-input-wrp-suffix {
    color: var(--taskly-gold-bright) !important;
}

:where(html.dark) .fi-input-wrp-prefix svg,
:where(html.dark) .fi-input-wrp-suffix svg {
    color: var(--taskly-gold-bright) !important;
    stroke: var(--taskly-gold-bright) !important;
}

/* Native Calendar Picker Icon */
:where(html.dark) ::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2) hue-rotate(15deg) !important;
    cursor: pointer !important;
    opacity: 0.9 !important;
}

/* Flatpickr / Filament Datepicker Popover */
:where(html.dark) .flatpickr-calendar,
:where(html.dark) .fi-fo-date-time-picker-panel {
    background: #14151B !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8) !important;
    border-radius: 16px !important;
    color: #FFFFFF !important;
}

:where(html.dark) .flatpickr-months,
:where(html.dark) .flatpickr-current-month,
:where(html.dark) .flatpickr-monthDropdown-months {
    background: #101116 !important;
    color: #FFFFFF !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

:where(html.dark) .flatpickr-weekday {
    color: var(--taskly-gold-bright) !important;
    font-weight: 700 !important;
}

:where(html.dark) .flatpickr-day {
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

:where(html.dark) .flatpickr-day:hover {
    background: rgba(197, 160, 89, 0.25) !important;
    color: var(--taskly-gold-bright) !important;
}

:where(html.dark) .flatpickr-day.selected {
    background: var(--taskly-gold-gradient) !important;
    color: #0C0D11 !important;
    font-weight: 800 !important;
    border: none !important;
}

/* ==============================================================================
   9. Filament Tables: ZERO DARK / BLACK TEXT! Semua Tulisan Terang & Terbaca
   ============================================================================== */
:where(html.dark) .fi-wi-user-overview,
:where(html.dark) .fi-wi-report-overview,
:where(html.dark) .fi-wi-report-detail-overview {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}

:where(html.dark) .fi-ta {
    background: var(--taskly-card-bg) !important;
    border-radius: var(--taskly-card-radius) !important;
    border: 1px solid var(--taskly-card-border) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    overflow: hidden !important;
}

:where(html.dark) .fi-ta-ctn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

:where(html.dark) .fi-ta-header-toolbar {
    padding: 18px 24px !important;
    gap: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:where(html.dark) .fi-ta-search-field .fi-input-wrp {
    background-color: #101116 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

:where(html.dark) .fi-ta-search-field .fi-input-wrp:hover {
    border-color: rgba(197, 160, 89, 0.45) !important;
}

:where(html.dark) .fi-ta-search-field .fi-input-wrp:focus-within {
    border-color: var(--taskly-gold-primary) !important;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2) !important;
}

:where(html.dark) .fi-ta-search-field input {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Universal Table Text Override: Zero Black Text */
:where(html.dark) .fi-ta-table,
:where(html.dark) .fi-ta-table * {
    color: #FFFFFF;
}

:where(html.dark) .fi-ta-table thead tr {
    background-color: #101116 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

:where(html.dark) .fi-ta-header-cell,
:where(html.dark) .fi-ta-header-cell button,
:where(html.dark) .fi-ta-header-cell span {
    padding: 14px 20px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

:where(html.dark) .fi-ta-header-cell svg {
    color: var(--taskly-gold-bright) !important;
}

:where(html.dark) .fi-ta-table tbody tr {
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background-color: var(--taskly-card-bg) !important;
}

:where(html.dark) .fi-ta-table tbody tr:hover {
    background-color: #1A1C25 !important;
}

:where(html.dark) .fi-ta-cell,
:where(html.dark) .fi-ta-cell * {
    color: #FFFFFF !important;
}

:where(html.dark) .fi-ta-cell {
    padding: 16px 20px !important;
    vertical-align: middle !important;
}

/* Table Text Columns */
:where(html.dark) .fi-ta-text .fi-ta-text-item-label,
:where(html.dark) .fi-ta-text .fi-ta-text-item-label * {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(html.dark) .fi-ta-text .fi-ta-text-item-description,
:where(html.dark) .fi-ta-text .fi-ta-text-item-description * {
    font-size: 11.5px !important;
    color: #E2E8F0 !important;
    -webkit-text-fill-color: #E2E8F0 !important;
    margin-top: 2px !important;
    font-weight: 500 !important;
}

:where(html.dark) .fi-ta-placeholder {
    color: #CBD5E1 !important;
}

/* Group Headers in Tables (Grouping Bulan, Created By, dll.) */
:where(html.dark) .fi-ta-group-header {
    background: #181922 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 12px 20px !important;
}

:where(html.dark) .fi-ta-group-header,
:where(html.dark) .fi-ta-group-header * {
    color: #ECC880 !important;
    font-weight: 800 !important;
}

:where(html.dark) .fi-ta-group-header-description {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Table Badges (Seluruh Status & Tag: ZERO BLACK TEXT) */
:where(html.dark) .fi-badge {
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

:where(html.dark) .fi-badge,
:where(html.dark) .fi-badge * {
    font-weight: 800 !important;
}

/* Gray / Default Badge (e.g. Nama AFP, Tim) */
:where(html.dark) .fi-badge-color-gray,
:where(html.dark) .fi-badge[class*="gray"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}
:where(html.dark) .fi-badge-color-gray *,
:where(html.dark) .fi-badge[class*="gray"] * {
    color: #FFFFFF !important;
}

/* Primary Badge (Total Nasabah) */
:where(html.dark) .fi-badge-color-primary,
:where(html.dark) .fi-badge[class*="primary"] {
    background-color: rgba(197, 160, 89, 0.25) !important;
    border: 1px solid rgba(197, 160, 89, 0.45) !important;
    color: #ECC880 !important;
}
:where(html.dark) .fi-badge-color-primary *,
:where(html.dark) .fi-badge[class*="primary"] * {
    color: #ECC880 !important;
}

/* Info Badge (Data Baru, Prospek 1, Prospek 3) */
:where(html.dark) .fi-badge-color-info,
:where(html.dark) .fi-badge[class*="info"] {
    background-color: rgba(59, 130, 246, 0.25) !important;
    border: 1px solid rgba(59, 130, 246, 0.45) !important;
    color: #93C5FD !important;
}
:where(html.dark) .fi-badge-color-info *,
:where(html.dark) .fi-badge[class*="info"] * {
    color: #93C5FD !important;
}

/* Success Badge (Projection) */
:where(html.dark) .fi-badge-color-success,
:where(html.dark) .fi-badge[class*="success"] {
    background-color: rgba(16, 185, 129, 0.25) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #6EE7B7 !important;
}
:where(html.dark) .fi-badge-color-success *,
:where(html.dark) .fi-badge[class*="success"] * {
    color: #6EE7B7 !important;
}

/* Warning Badge (Prospek 2) */
:where(html.dark) .fi-badge-color-warning,
:where(html.dark) .fi-badge[class*="warning"] {
    background-color: rgba(245, 158, 11, 0.25) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    color: #FCD34D !important;
}
:where(html.dark) .fi-badge-color-warning *,
:where(html.dark) .fi-badge[class*="warning"] * {
    color: #FCD34D !important;
}

/* Danger Badge (Hot Prospek, Prioritas Closing) */
:where(html.dark) .fi-badge-color-danger,
:where(html.dark) .fi-badge[class*="danger"] {
    background-color: rgba(244, 63, 94, 0.25) !important;
    border: 1px solid rgba(244, 63, 94, 0.45) !important;
    color: #FDA4AF !important;
}
:where(html.dark) .fi-badge-color-danger *,
:where(html.dark) .fi-badge[class*="danger"] * {
    color: #FDA4AF !important;
}

/* Action Icons & Links inside Table */
:where(html.dark) .fi-ta-actions a,
:where(html.dark) .fi-ta-actions button,
:where(html.dark) .fi-ta-actions svg {
    color: var(--taskly-gold-bright) !important;
    font-weight: 700 !important;
}

:where(html.dark) .fi-ta-actions a:hover,
:where(html.dark) .fi-ta-actions button:hover {
    color: #FFFFFF !important;
}

/* Table Pagination Controls */
:where(html.dark) .fi-ta-pagination {
    padding: 16px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: #101116 !important;
    color: #FFFFFF !important;
}

:where(html.dark) .fi-ta-pagination span,
:where(html.dark) .fi-ta-pagination button,
:where(html.dark) .fi-ta-pagination select {
    color: #FFFFFF !important;
}

/* ==============================================================================
   10. Nilai KPI Page (KPIReport) Custom Styling
   ============================================================================== */
:where(html.dark) .taskly-kpi-page .fi-header {
    margin-bottom: 16px !important;
}

:where(html.dark) .taskly-kpi-page .fi-header-heading {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.4px !important;
}

:where(html.dark) .taskly-kpi-filter-box {
    background: var(--taskly-card-bg) !important;
    border-radius: 20px !important;
    border: 1px solid var(--taskly-card-border) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    padding: 20px 26px !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

:where(html.dark) .taskly-kpi-filter-box:hover {
    border-color: var(--taskly-card-hover-border) !important;
    box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.65) !important;
}

:where(html.dark) .taskly-kpi-filter-box label,
:where(html.dark) .taskly-kpi-filter-box .fi-fo-field-label-content {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

/* KPI Process Button (Obsidian Gold) */
:where(html.dark) .taskly-process-field-wrp {
    margin: 0 !important;
}

:where(html.dark) .taskly-btn-process-action {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    width: 100% !important;
    background: var(--taskly-gold-gradient) !important;
    color: #0C0D11 !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.3px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px -1px rgba(197, 160, 89, 0.38) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    padding: 0 16px !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    user-select: none !important;
}

:where(html.dark) .taskly-btn-process-action:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px -1px rgba(197, 160, 89, 0.55) !important;
    background: var(--taskly-gold-gradient-hover) !important;
    color: #000000 !important;
}

:where(html.dark) .taskly-btn-process-action:active {
    transform: translateY(0) scale(0.99) !important;
}

:where(html.dark) .taskly-btn-process-action[disabled] {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Svg icon inside the button */
:where(html.dark) .taskly-btn-process-action svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    color: #0C0D11 !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Ensure text inside the button is deep obsidian black, centered, without inherited margins */
:where(html.dark) .taskly-kpi-filter-box .taskly-btn-process-action,
:where(html.dark) .taskly-kpi-filter-box .taskly-btn-process-action span,
:where(html.dark) .taskly-process-field-wrp .taskly-btn-process-action span,
:where(html.dark) .taskly-btn-process-action span {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0C0D11 !important;
    -webkit-text-fill-color: #0C0D11 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Compact Proportional Metric Cards for Nilai KPI */
:where(html.dark) .taskly-kpi-page .taskly-kpi-card {
    padding: 16px 18px !important;
    border-radius: 18px !important;
}

:where(html.dark) .taskly-kpi-page .taskly-icon-3d {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
}

:where(html.dark) .taskly-kpi-page .taskly-icon-3d svg {
    width: 20px !important;
    height: 20px !important;
}

:where(html.dark) .taskly-kpi-page .taskly-kpi-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    margin-top: 1px !important;
}

:where(html.dark) .taskly-kpi-page .taskly-kpi-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #E2E8F0 !important;
}

:where(html.dark) .taskly-kpi-page .taskly-kpi-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
    margin-top: 3px !important;
}

/* Nilai KPI Table Box */
:where(html.dark) .taskly-kpi-table-box {
    background: var(--taskly-card-bg) !important;
    border-radius: 20px !important;
    border: 1px solid var(--taskly-card-border) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    overflow: hidden !important;
    margin-top: 16px !important;
}

:where(html.dark) .taskly-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #101116;
}

:where(html.dark) .taskly-table-content {
    padding: 8px 12px;
}

/* Export Excel Button (Dark / Obsidian Gold Theme) */
:where(html.dark) .taskly-btn-export-excel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, #1e6b3a 0%, #27843f 100%) !important;
    color: #FFFFFF !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 3px 12px -1px rgba(39, 132, 63, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-shadow: none !important;
    margin: 0 !important;
}

:where(html.dark) .taskly-btn-export-excel:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #22794a 0%, #2e9b4a 100%) !important;
    box-shadow: 0 6px 18px -1px rgba(39, 132, 63, 0.6) !important;
}

:where(html.dark) .taskly-btn-export-excel:active {
    transform: translateY(0) !important;
}

:where(html.dark) .taskly-btn-export-excel[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

:where(html.dark) .taskly-btn-export-inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

:where(html.dark) .taskly-btn-export-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    color: #FFFFFF !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

:where(html.dark) .taskly-btn-export-excel span,
:where(html.dark) .taskly-btn-export-text {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* ==============================================================================
   11. Dropdown Menus, Popovers, & Modals
   ============================================================================== */
:where(html.dark) .fi-dropdown-panel {
    background: #161720 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65) !important;
    border-radius: 14px !important;
}

:where(html.dark) .fi-dropdown-list-item {
    transition: background-color 0.15s ease !important;
}

:where(html.dark) .fi-dropdown-list-item:hover {
    background-color: rgba(197, 160, 89, 0.16) !important;
}

:where(html.dark) .fi-dropdown-list-item-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

:where(html.dark) .fi-dropdown-list-item:hover .fi-dropdown-list-item-label {
    color: var(--taskly-gold-bright) !important;
}

:where(html.dark) .fi-dropdown-list-item:hover svg {
    color: var(--taskly-gold-bright) !important;
}



/* Hide Theme Switcher in User Profile Dropdown (Sun/Moon/Desktop icons) */
:where(html.dark) .fi-theme-switcher,
:where(html.dark) .fi-user-menu .fi-theme-switcher,
:where(html.dark) .fi-dropdown-panel .fi-theme-switcher,
:where(html.dark) .fi-dropdown-list:has(.fi-theme-switcher),
:where(html.dark) .fi-theme-switcher-btn {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* ==============================================================================
   12. Page Transition Circular Spinner Loader (Obsidian Gold)
   ============================================================================== */
:where(html.dark) .taskly-loader-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(12, 13, 17, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

:where(html.dark) .taskly-loader-overlay.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

:where(html.dark) .taskly-loader-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
}

:where(html.dark) .taskly-spinner-ring {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 3.5px solid rgba(197, 160, 89, 0.18) !important;
    border-top-color: #C5A059 !important;
    border-right-color: #ECC880 !important;
    animation: taskly-spin 0.75s linear infinite !important;
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.3) !important;
}

:where(html.dark) .taskly-loader-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #ECC880 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    font-family: inherit !important;
}

@keyframes taskly-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}