/* LoomDesk Custom Executive Styling */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --brand-primary: #0F172A;
    --brand-accent: #E2B357;
    --brand-accent-hover: #CCA048;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #F8FAFC;
    color: #0F172A;
}

.font-mono-num {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: "tnum" 1;
}

.font-display {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Tactile micro-interactions */
.btn-press {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-press:active {
    transform: scale(0.98);
}

.card-hover {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

/* Navigation Active State */
.nav-link.active {
    background-color: #1E293B;
    color: #FFFFFF;
    font-weight: 600;
}
.nav-link.active:not(:has(.nav-icon-badge)) i {
    color: #F59E0B;
}

/* Badge styles */
.badge-vip {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
}
.badge-regular {
    background-color: #E0E7FF;
    color: #3730A3;
}
.badge-new {
    background-color: #DCFCE7;
    color: #166534;
}
.badge-at-risk {
    background-color: #FEF9C3;
    color: #854D0E;
}
.badge-churned {
    background-color: #FEE2E2;
    color: #991B1B;
}

/* Status dots */
.dot-pulse {
    position: relative;
}
.dot-pulse::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: inherit;
    animation: dot-pulse-anim 2s infinite ease-out;
}
@keyframes dot-pulse-anim {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Print Invoice Styling */
@media print {
    body * {
        visibility: hidden;
    }
    #invoice-print-area, #invoice-print-area * {
        visibility: visible;
    }
}

/* ========================================================= */
/* PLAYFUL PASTEL THEME (INTELLY BENCHMARK - DRIBBLE STYLE)  */
/* ========================================================= */
body.theme-playful {
    background-color: #FAF4E8 !important;
    color: #18181B !important;
}

body.theme-playful aside {
    background-color: #18181B !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35) !important;
}

@media (min-width: 768px) {
    body.theme-playful aside {
        margin: 0.85rem 0 0.85rem 0.85rem !important;
        border-radius: 28px !important;
    }
}

@media (max-width: 767px) {
    body.theme-playful aside {
        margin: 0 !important;
        border-radius: 0 24px 24px 0 !important;
        height: 100vh !important;
    }
}

body.theme-playful aside .nav-link {
    border-radius: 0.85rem !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
}

body.theme-playful aside .nav-link:hover {
    background-color: #27272A !important;
    color: #FFFFFF !important;
    transform: translateX(3px);
}

body.theme-playful aside .nav-link:active {
    transform: scale(0.96) translateX(1px) !important;
}

body.theme-playful aside .nav-link.active {
    background: rgba(244, 63, 94, 0.16) !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px -3px rgba(244, 63, 94, 0.3) !important;
}

body.theme-playful aside .nav-link.active:not(:has(.nav-icon-badge)) i {
    color: #FB7185 !important;
}

body.theme-playful aside .nav-link .nav-icon-badge i {
    color: inherit !important;
}

/* Cute active indicator pill on right edge */
body.theme-playful aside .nav-link.active::after {
    content: '';
    position: absolute;
    right: 8px;
    width: 4px;
    height: 14px;
    border-radius: 9999px;
    background: #FB7185;
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.9);
    animation: activeIndicatorSlide 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes activeIndicatorSlide {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}

body.theme-playful main {
    background-color: #FAF4E8 !important;
}

body.theme-playful header {
    background-color: #FAF4E8 !important;
    border-color: rgba(231, 222, 206, 0.85) !important;
}

/* Playful Bento Pastel Cards */
.bento-card-playful {
    border-radius: 28px;
    padding: 1.25rem 1.35rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card-playful:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.08);
}

/* Card 1: Canary / Mustard Pastel */
.bento-yellow {
    background-color: #FEF08A;
    border: 1.5px solid #FDE047;
    color: #1C1917;
}

/* Card 2: Soft Rose / Strawberry Milk Pink Pastel */
.bento-pink {
    background-color: #FCE7F3;
    border: 1.5px solid #FBCFE8;
    color: #1C1917;
}

/* Card 3: Soft Sage Green Pastel */
.bento-sage {
    background-color: #DCFCE7;
    border: 1.5px solid #BBF7D0;
    color: #1C1917;
}

/* Card 4: Soft Powder Blue Pastel */
.bento-blue {
    background-color: #DBEAFE;
    border: 1.5px solid #BFDBFE;
    color: #1C1917;
}

/* Watermark geometric background decorations */
.bento-watermark {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    pointer-events: none;
    opacity: 0.18;
    z-index: 1;
}

/* Playful Order Pastel Pills */
.playful-order-pill {
    border-radius: 22px;
    padding: 0.85rem 1rem;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 1.5px solid transparent;
}

.playful-order-pill:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 20px -4px rgba(0, 0, 0, 0.08);
}

.playful-order-pill.is-active {
    box-shadow: 0 0 0 2px #E11D48, 0 10px 22px -4px rgba(225, 29, 72, 0.2);
}

/* Mini Bar Chart in Yellow Bento */
.playful-bar-item {
    width: 14px;
    background-color: #18181B;
    border-radius: 9999px;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mini Calendar Widget */
.cal-day-cell {
    width: 100%;
    max-width: 30px;
    height: 32px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    user-select: none;
}

.cal-day-cell:hover {
    background-color: #F1F5F9;
}

.cal-day-cell.is-selected {
    background-color: #FCE7F3;
    color: #831843;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.25);
}

.cal-day-cell.has-agenda {
    font-weight: 700;
}

.cal-dots-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 4px;
    margin-top: 1px;
}

.cal-dot {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Safe-bottom for modern mobile devices */
.safe-bottom {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0.5rem));
}

/* Print Isolation Engine */
@media print {
    header, aside, nav, #mobile-bottom-dock, #mobile-menu-drawer, #toast-container, .btn-press, #sidebar-backdrop {
        display: none !important;
    }

    body, main {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
}
/* ========================================================= */
/* PLAYFUL CUTE SIDEBAR ICONS & SMART ANIMATE MICRO-PHYSICS  */
/* ========================================================= */
.nav-icon-badge {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.2s ease, filter 0.2s ease !important;
    position: relative;
    overflow: hidden;
}

.nav-icon-badge i {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Playful Wiggle Micro-Animation on Nav Hover */
@keyframes cuteSquiggle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.18) rotate(-8deg); }
    50% { transform: scale(1.12) rotate(6deg); }
    75% { transform: scale(1.15) rotate(-3deg); }
}

.nav-link:hover .nav-icon-badge {
    animation: cuteSquiggle 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.nav-link.active .nav-icon-badge {
    transform: scale(1.08) !important;
    box-shadow: 0 0 12px currentColor;
    filter: brightness(1.18);
}

/* ========================================================= */
/* BUTTERY SMOOTH VIEW SWITCH TRANSITION (SMART ANIMATE)     */
/* ========================================================= */
.view-section {
    will-change: transform, opacity;
}

.view-section.animate-view-switch {
    animation: viewSmoothSwitch 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes viewSmoothSwitch {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.992);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ========================================================= */
/* PLAYFUL SPARKLING MOUSE CURSOR TRAIL                     */
/* (Active strictly only in theme-playful mode)              */
/* ========================================================= */
.sparkle-mouse-particle {
    position: fixed;
    pointer-events: none;
    user-select: none;
    z-index: 999999;
    will-change: transform, opacity;
    line-height: 1;
    transform: translate(-50%, -50%);
    animation: sparkleFade 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes sparkleFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        filter: drop-shadow(0 0 4px currentColor);
    }
    40% {
        opacity: 0.95;
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px) - 8px)) scale(1.15) rotate(var(--rot, 35deg));
        filter: drop-shadow(0 0 6px currentColor);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx, 0px) * 1.5), calc(-50% + var(--dy, 0px) - 22px)) scale(0.2) rotate(calc(var(--rot, 35deg) * 2));
        filter: drop-shadow(0 0 1px currentColor);
    }
}