/* ==============================================================================
   Taskly Claymorphic & Modern Pastel Theme (Inspired by Pinterest Dribbble UI)
   ============================================================================== */

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

:root:where(:not(.dark)) {
    --taskly-bg: #F4F5FB;
    --taskly-sidebar-bg: #FAF9FE;
    --taskly-card-bg: #FFFFFF;
    --taskly-card-radius: 22px;
    --taskly-card-shadow: 0 10px 30px -5px rgba(112, 110, 160, 0.08), 0 4px 12px -2px rgba(112, 110, 160, 0.04);
    --taskly-primary: #6C5DD3;
    --taskly-primary-light: #EBE8FD;
}

/* Base Body & Layout */
:where(html:not(.dark)) body,
:where(html:not(.dark)) .fi-layout {
    background-color: var(--taskly-bg) !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    color: #1E1E2F;
}

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

/* Sidebar Styling */
:where(html:not(.dark)) .fi-sidebar {
    background-color: var(--taskly-sidebar-bg) !important;
    border-right: 1px solid rgba(226, 224, 245, 0.7) !important;
}

:where(html:not(.dark)) .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(108, 93, 211, 0.15) !important;
    color: var(--taskly-primary) !important;
    font-weight: 700 !important;
}

:where(html:not(.dark)) .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--taskly-primary) !important;
}

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

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

/* Force Welcome Banner & KPI Overview to take full 12-column width */
:where(html:not(.dark)) .fi-wi-user-welcome,
:where(html:not(.dark)) .fi-wi-kpi-overview {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Card Containers (Sections, Charts) */
:where(html:not(.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:not(.dark)) .fi-wi-chart > .fi-section,
:where(html:not(.dark)) .fi-section {
    background-color: var(--taskly-card-bg) !important;
    border-radius: var(--taskly-card-radius) !important;
    border: 1px solid rgba(230, 228, 248, 0.85) !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);
}

:where(html:not(.dark)) .fi-wi-chart > .fi-section:hover,
:where(html:not(.dark)) .fi-section:hover {
    box-shadow: 0 16px 36px -4px rgba(112, 110, 160, 0.12) !important;
    transform: translateY(-2px);
}

:where(html:not(.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;
}

/* ==============================================================================
   Taskly Topbar & Navigation Bar Styling
   ============================================================================== */
:where(html:not(.dark)) .fi-topbar-ctn {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
}

:where(html:not(.dark)) .fi-topbar {
    background-color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border-bottom: 1px solid rgba(226, 224, 245, 0.75) !important;
    box-shadow: 0 4px 20px -2px rgba(112, 110, 160, 0.04) !important;
    padding: 0 24px !important;
    min-height: 68px !important;
}

/* Sidebar Toggle Buttons */
:where(html:not(.dark)) .fi-topbar-open-sidebar-btn,
:where(html:not(.dark)) .fi-topbar-close-sidebar-btn,
:where(html:not(.dark)) .fi-topbar-open-collapse-sidebar-btn,
:where(html:not(.dark)) .fi-topbar-close-collapse-sidebar-btn {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 224, 245, 0.85) !important;
    border-radius: 12px !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4B4B63 !important;
    box-shadow: 0 2px 8px rgba(112, 110, 160, 0.05) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

:where(html:not(.dark)) .fi-topbar-open-sidebar-btn:hover,
:where(html:not(.dark)) .fi-topbar-close-sidebar-btn:hover,
:where(html:not(.dark)) .fi-topbar-open-collapse-sidebar-btn:hover,
:where(html:not(.dark)) .fi-topbar-close-collapse-sidebar-btn:hover {
    color: var(--taskly-primary) !important;
    border-color: rgba(108, 93, 211, 0.3) !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(108, 93, 211, 0.15) !important;
}

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

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

:where(html:not(.dark)) .fi-global-search-field .fi-input-wrp:hover {
    background-color: #FFFFFF !important;
    border-color: rgba(108, 93, 211, 0.25) !important;
}

:where(html:not(.dark)) .fi-global-search-field .fi-input-wrp:focus-within {
    background-color: #FFFFFF !important;
    border-color: var(--taskly-primary) !important;
    box-shadow: 0 0 0 3px rgba(108, 93, 211, 0.12) !important;
}

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

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

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

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

:where(html:not(.dark)) .taskly-badge-pulse {
    background-color: #EBFBF3;
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #065F46;
}

:where(html:not(.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:not(.dark)) .taskly-badge-date {
    background-color: #F4F1FE;
    border: 1px solid rgba(108, 93, 211, 0.15);
    color: #4C4872;
}

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

:where(html:not(.dark)) .taskly-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 12px;
    background: #FFFFFF;
    border: 1px solid rgba(226, 224, 245, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(112, 110, 160, 0.04);
    white-space: nowrap;
}

:where(html:not(.dark)) .taskly-user-chip-name {
    font-size: 12px;
    font-weight: 700;
    color: #1E1E2F;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not(.dark)) .taskly-user-chip-role {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background-color: #F4F1FE;
    color: var(--taskly-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

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

:where(html:not(.dark)) .fi-user-menu-trigger:hover {
    box-shadow: 0 0 0 3px rgba(108, 93, 211, 0.2) !important;
}

:where(html:not(.dark)) .fi-user-menu-trigger .fi-avatar {
    border-radius: 12px !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(108, 93, 211, 0.2) !important;
}

/* ==============================================================================
   Taskly Claymorphic KPI Cards Component
   ============================================================================== */
:where(html:not(.dark)) .taskly-kpi-container {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

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

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

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

:where(html:not(.dark)) .taskly-kpi-card {
    border-radius: 20px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px -4px rgba(112, 110, 160, 0.06);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

:where(html:not(.dark)) .taskly-kpi-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 28px -4px rgba(112, 110, 160, 0.12);
}

/* 3D Squircle Icon Button */
:where(html:not(.dark)) .taskly-icon-3d {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: transform 0.2s ease;
}

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

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

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

:where(html:not(.dark)) .taskly-kpi-label {
    font-size: 11px;
    font-weight: 700;
    color: #7B7B93;
    text-transform: capitalize;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

/* 6 Distinct Pastel Themes matching the Taskly Dribbble Design */
/* 1. Total Prospek - Royal Lavender */
:where(html:not(.dark)) .taskly-theme-purple {
    background-color: #F4F1FE;
}
:where(html:not(.dark)) .taskly-theme-purple .taskly-icon-3d {
    background: linear-gradient(135deg, #7868E6, #6C5DD3);
    box-shadow: 0 8px 18px -2px rgba(108, 93, 211, 0.45), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}
:where(html:not(.dark)) .taskly-theme-purple .taskly-kpi-badge {
    background-color: rgba(108, 93, 211, 0.12);
    color: #6C5DD3;
}

/* 2. Prospek 1 - Sky Blue */
:where(html:not(.dark)) .taskly-theme-blue {
    background-color: #EAF5FF;
}
:where(html:not(.dark)) .taskly-theme-blue .taskly-icon-3d {
    background: linear-gradient(135deg, #4FA8FF, #2B82F6);
    box-shadow: 0 8px 18px -2px rgba(43, 130, 246, 0.45), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}
:where(html:not(.dark)) .taskly-theme-blue .taskly-kpi-badge {
    background-color: rgba(43, 130, 246, 0.12);
    color: #1D6AE5;
}

/* 3. Prospek 2 - Warm Amber Sand */
:where(html:not(.dark)) .taskly-theme-amber {
    background-color: #FFF7EB;
}
:where(html:not(.dark)) .taskly-theme-amber .taskly-icon-3d {
    background: linear-gradient(135deg, #FDB528, #F59E0B);
    box-shadow: 0 8px 18px -2px rgba(245, 158, 11, 0.45), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}
:where(html:not(.dark)) .taskly-theme-amber .taskly-kpi-badge {
    background-color: rgba(245, 158, 11, 0.12);
    color: #B45309;
}

/* 4. Prospek 3 - Lilac Purple */
:where(html:not(.dark)) .taskly-theme-lilac {
    background-color: #FAF2FF;
}
:where(html:not(.dark)) .taskly-theme-lilac .taskly-icon-3d {
    background: linear-gradient(135deg, #BA68C8, #9C27B0);
    box-shadow: 0 8px 18px -2px rgba(156, 39, 176, 0.45), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}
:where(html:not(.dark)) .taskly-theme-lilac .taskly-kpi-badge {
    background-color: rgba(156, 39, 176, 0.12);
    color: #8E24AA;
}

/* 5. Hot Prospek - Coral Rose / Pink */
:where(html:not(.dark)) .taskly-theme-pink {
    background-color: #FFF0F3;
}
:where(html:not(.dark)) .taskly-theme-pink .taskly-icon-3d {
    background: linear-gradient(135deg, #FF6B8B, #FF456A);
    box-shadow: 0 8px 18px -2px rgba(255, 69, 106, 0.45), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}
:where(html:not(.dark)) .taskly-theme-pink .taskly-kpi-badge {
    background-color: rgba(255, 69, 106, 0.12);
    color: #E11D48;
}

/* 6. Closing Projection - Mint Green */
:where(html:not(.dark)) .taskly-theme-mint {
    background-color: #EBFBF3;
}
:where(html:not(.dark)) .taskly-theme-mint .taskly-icon-3d {
    background: linear-gradient(135deg, #4EBA86, #2E9E67);
    box-shadow: 0 8px 18px -2px rgba(46, 158, 103, 0.45), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}
:where(html:not(.dark)) .taskly-theme-mint .taskly-kpi-badge {
    background-color: rgba(46, 158, 103, 0.12);
    color: #059669;
}

/* ==============================================================================
   Taskly Welcome Hero Card Component
   ============================================================================== */
:where(html:not(.dark)) .taskly-hero-banner {
    background: #FFFFFF;
    border-radius: var(--taskly-card-radius);
    padding: 24px 28px;
    border: 1px solid rgba(230, 228, 248, 0.85);
    box-shadow: var(--taskly-card-shadow);
    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:not(.dark)) .taskly-hero-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
}

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

:where(html:not(.dark)) .taskly-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #7868E6, #6C5DD3);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -2px rgba(108, 93, 211, 0.35);
    flex-shrink: 0;
}

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

:where(html:not(.dark)) .taskly-hero-subtitle {
    font-size: 13px;
    color: #7B7B93;
    margin-top: 3px;
    font-weight: 500;
}

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

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

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

:where(html:not(.dark)) .taskly-meta-box {
    background: #FAF9FE;
    border: 1px solid rgba(226, 224, 245, 0.85);
    border-radius: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html:not(.dark)) .taskly-meta-box:hover {
    background: #FFFFFF;
    border-color: rgba(108, 93, 211, 0.3);
    box-shadow: 0 4px 12px rgba(112, 110, 160, 0.06);
    transform: translateY(-1px);
}

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

:where(html:not(.dark)) .taskly-meta-purple {
    background: #F4F1FE;
    color: #6C5DD3;
}

:where(html:not(.dark)) .taskly-meta-blue {
    background: #EAF5FF;
    color: #2B82F6;
}

:where(html:not(.dark)) .taskly-meta-amber {
    background: #FFF7EB;
    color: #F59E0B;
}

:where(html:not(.dark)) .taskly-meta-green {
    background: #EBFBF3;
    color: #10B981;
}

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

:where(html:not(.dark)) .taskly-meta-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #8C8CA1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.1;
}

:where(html:not(.dark)) .taskly-meta-value {
    font-size: 12px;
    font-weight: 800;
    color: #1E1E2F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

:where(html:not(.dark)) .taskly-btn-action {
    background: linear-gradient(135deg, #7868E6, #6C5DD3);
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px -2px rgba(108, 93, 211, 0.4);
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

:where(html:not(.dark)) .taskly-btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -2px rgba(108, 93, 211, 0.5);
    color: #FFFFFF !important;
}

/* ==============================================================================
   Dashboard Date Filters Form Bar
   ============================================================================== */
:where(html:not(.dark)) .fi-page-header-ctn {
    margin-bottom: 24px !important;
}

:where(html:not(.dark)) .fi-page-sub-header {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    padding: 16px 20px !important;
    border: 1px solid rgba(230, 228, 248, 0.85) !important;
    box-shadow: 0 6px 20px -2px rgba(112, 110, 160, 0.05) !important;
    margin-bottom: 24px !important;
}

:where(html:not(.dark)) .fi-input-wrp {
    border-radius: 12px !important;
    border-color: rgba(226, 224, 245, 0.85) !important;
    transition: all 0.2s ease !important;
}

:where(html:not(.dark)) .fi-input-wrp:focus-within {
    border-color: var(--taskly-primary) !important;
    box-shadow: 0 0 0 3px rgba(108, 93, 211, 0.15) !important;
}

/* ==============================================================================
   Page Header (.fi-header)
   ============================================================================== */
:where(html:not(.dark)) .fi-header {
    margin-bottom: 24px !important;
    padding: 6px 0 !important;
}

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

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

/* Dashboard Filter Bar Styling */
:where(html:not(.dark)) .fi-page-content > form,
:where(html:not(.dark)) .fi-page-content > .fi-sc:first-child,
:where(html:not(.dark)) .fi-page-sub-header {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 16px 22px !important;
    border: 1px solid rgba(230, 228, 248, 0.85) !important;
    box-shadow: 0 4px 16px -2px rgba(112, 110, 160, 0.04) !important;
    margin-bottom: 24px !important;
}

/* ==============================================================================
   User Resource Overview Widgets & Modern Table Styling
   ============================================================================== */
:where(html:not(.dark)) .fi-wi-user-overview,
:where(html:not(.dark)) .fi-wi-report-overview,
:where(html:not(.dark)) .fi-wi-report-detail-overview {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}

/* Filament Table Main Card */
:where(html:not(.dark)) .fi-ta {
    background: #FFFFFF !important;
    border-radius: var(--taskly-card-radius) !important;
    border: 1px solid rgba(230, 228, 248, 0.85) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    overflow: hidden !important;
}

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

/* Table Toolbar (Search, Filter, Actions) */
:where(html:not(.dark)) .fi-ta-header-toolbar {
    padding: 18px 24px !important;
    gap: 16px !important;
}

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

:where(html:not(.dark)) .fi-ta-search-field .fi-input-wrp:hover {
    background-color: #FFFFFF !important;
    border-color: rgba(108, 93, 211, 0.3) !important;
}

:where(html:not(.dark)) .fi-ta-search-field .fi-input-wrp:focus-within {
    background-color: #FFFFFF !important;
    border-color: var(--taskly-primary) !important;
    box-shadow: 0 0 0 3px rgba(108, 93, 211, 0.12) !important;
}

/* Table Header Row */
:where(html:not(.dark)) .fi-ta-table thead tr {
    background-color: #FAF9FE !important;
    border-bottom: 1px solid rgba(230, 228, 248, 0.85) !important;
}

:where(html:not(.dark)) .fi-ta-header-cell {
    padding: 14px 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #7B7B93 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Table Rows & Cells */
:where(html:not(.dark)) .fi-ta-table tbody tr {
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid rgba(240, 238, 252, 0.7) !important;
}

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

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

/* Primary Name + Email styling */
:where(html:not(.dark)) .fi-ta-text .fi-ta-text-item-label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1E1E2F !important;
}

:where(html:not(.dark)) .fi-ta-text .fi-ta-text-item-description {
    font-size: 11.5px !important;
    color: #7B7B93 !important;
    margin-top: 2px !important;
}

/* Badges inside table */
:where(html:not(.dark)) .fi-badge {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 9px !important;
    box-shadow: 0 2px 6px rgba(112, 110, 160, 0.04) !important;
}

/* Table Pagination */
:where(html:not(.dark)) .fi-ta-pagination {
    padding: 16px 24px !important;
    border-top: 1px solid rgba(230, 228, 248, 0.75) !important;
    background-color: #FAF9FE !important;
}

/* Action button in page header (Create User) */
:where(html:not(.dark)) .fi-page-header-actions .fi-btn-color-primary,
:where(html:not(.dark)) .fi-ac-btn-action {
    background: linear-gradient(135deg, #7868E6, #6C5DD3) !important;
    border-radius: 14px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px -2px rgba(108, 93, 211, 0.35) !important;
    transition: all 0.2s ease !important;
    color: #FFFFFF !important;
}

:where(html:not(.dark)) .fi-page-header-actions .fi-btn-color-primary:hover,
:where(html:not(.dark)) .fi-ac-btn-action:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -2px rgba(108, 93, 211, 0.45) !important;
}

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

:where(html:not(.dark)) .taskly-kpi-page .fi-header-heading {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1E1E2F !important;
    letter-spacing: -0.4px !important;
}

:where(html:not(.dark)) .taskly-kpi-filter-box {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 228, 248, 0.85) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    padding: 16px 20px !important;
    transition: box-shadow 0.25s ease !important;
}

:where(html:not(.dark)) .taskly-kpi-filter-box:hover {
    box-shadow: 0 14px 30px -4px rgba(112, 110, 160, 0.08) !important;
}

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

:where(html:not(.dark)) .taskly-btn-process-action {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    width: 100% !important;
    background: linear-gradient(135deg, #7868E6, #6C5DD3) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.3px !important;
    border-radius: 12px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px -1px rgba(108, 93, 211, 0.42) !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:not(.dark)) .taskly-btn-process-action:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px -1px rgba(108, 93, 211, 0.55) !important;
    background: linear-gradient(135deg, #8574F2, #7162DF) !important;
    color: #FFFFFF !important;
}

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

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

/* Svg icon inside the button */
:where(html:not(.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: #FFFFFF !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Ensure text inside the button is pure white, centered, without inherited margins */
:where(html:not(.dark)) .taskly-kpi-filter-box .taskly-btn-process-action,
:where(html:not(.dark)) .taskly-kpi-filter-box .taskly-btn-process-action span,
:where(html:not(.dark)) .taskly-process-field-wrp .taskly-btn-process-action span,
:where(html:not(.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: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

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

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

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

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

:where(html:not(.dark)) .taskly-kpi-page .taskly-kpi-label {
    font-size: 11px !important;
    font-weight: 600 !important;
}

:where(html:not(.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:not(.dark)) .taskly-kpi-table-box {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 228, 248, 0.85) !important;
    box-shadow: var(--taskly-card-shadow) !important;
    overflow: hidden !important;
    margin-top: 16px !important;
}

:where(html:not(.dark)) .taskly-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(230, 228, 248, 0.75);
    background: #FAF9FE;
}

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

/* Export Excel Button (Light / Pastel Theme) */
:where(html:not(.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, #27843f 0%, #1e9e50 100%) !important;
    color: #FFFFFF !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 3px 12px -1px rgba(30, 158, 80, 0.4) !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:not(.dark)) .taskly-btn-export-excel:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #2e9b4a 0%, #24b55c 100%) !important;
    box-shadow: 0 6px 18px -1px rgba(30, 158, 80, 0.5) !important;
}

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

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

:where(html:not(.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:not(.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:not(.dark)) .taskly-btn-export-excel span,
:where(html:not(.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;
}





/* ==============================================================================
   Single Topbar Logo & Hidden Sidebar Logo (Consistent Architecture)
   ============================================================================== */
:where(html:not(.dark)) .fi-sidebar-header-ctn,
:where(html:not(.dark)) .fi-sidebar-header,
:where(html:not(.dark)) .fi-sidebar-header-logo-ctn,
:where(html:not(.dark)) .fi-sidebar-header .fi-logo,
:where(html:not(.dark)) .fi-sidebar-header a img,
:where(html:not(.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;
}

:where(html:not(.dark)) .fi-topbar-start {
    display: flex !important;
    align-items: center !important;
    margin-right: 18px !important;
}

:where(html:not(.dark)) .fi-topbar-start .fi-logo,
:where(html:not(.dark)) .fi-topbar-start a img,
:where(html:not(.dark)) .fi-topbar-start img,
:where(html:not(.dark)) .fi-topbar .fi-logo,
:where(html:not(.dark)) .fi-topbar a img,
:where(html:not(.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(112, 110, 160, 0.25));
    transition: transform 0.2s ease;
}

/* Quick Theme Toggle Button in Topbar */
:where(html:not(.dark)) .taskly-badge-theme {
    background-color: #F4F1FE !important;
    border: 1px solid rgba(108, 93, 211, 0.35) !important;
    color: #6C5DD3 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
}

:where(html:not(.dark)) .taskly-badge-theme:hover {
    background-color: #EBE8FD !important;
    border-color: rgba(108, 93, 211, 0.55) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(108, 93, 211, 0.15) !important;
}

/* Date Filter Field Labels & Inputs in Light Mode */
:where(html:not(.dark)) .fi-fo-field-label,
:where(html:not(.dark)) .fi-fo-field-label-content,
:where(html:not(.dark)) .fi-fo-field-label-ctn,
:where(html:not(.dark)) .fi-fo-field-label-col,
:where(html:not(.dark)) .taskly-date-filter label,
:where(html:not(.dark)) .taskly-date-filter span {
    color: #1E1E2F !important;
    -webkit-text-fill-color: #1E1E2F !important;
    font-weight: 700 !important;
}

:where(html:not(.dark)) .taskly-date-input,
:where(html:not(.dark)) .fi-fo-date-time-picker-display-text-input {
    color: #1E1E2F !important;
    -webkit-text-fill-color: #1E1E2F !important;
    font-weight: 600 !important;
}


/* Hide Theme Switcher in User Profile Dropdown (Sun/Moon/Desktop icons) */
:where(html:not(.dark)) .fi-theme-switcher,
:where(html:not(.dark)) .fi-user-menu .fi-theme-switcher,
:where(html:not(.dark)) .fi-dropdown-panel .fi-theme-switcher,
:where(html:not(.dark)) .fi-dropdown-list:has(.fi-theme-switcher),
:where(html:not(.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 (Light / Pastel Theme)
   ============================================================================== */
:where(html:not(.dark)) .taskly-loader-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(245, 246, 250, 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:not(.dark)) .taskly-loader-overlay.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

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

:where(html:not(.dark)) .taskly-spinner-ring {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 3.5px solid rgba(108, 93, 211, 0.18) !important;
    border-top-color: #6C5DD3 !important;
    border-right-color: #8574F2 !important;
    animation: taskly-spin 0.75s linear infinite !important;
    box-shadow: 0 0 20px rgba(108, 93, 211, 0.3) !important;
}

:where(html:not(.dark)) .taskly-loader-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #6C5DD3 !important;
    text-shadow: none !important;
    font-family: inherit !important;
}

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



/* Keep the active label and icon readable with Filament 5 markup. */
:where(html:not(.dark)) .fi-sidebar-item.fi-active .fi-sidebar-item-label,
:where(html:not(.dark)) .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--taskly-primary) !important;
}