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

/* Base Styles */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.glass-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: env(safe-area-inset-top);
}

.dark .glass-header {
    background: rgba(15, 23, 42, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Gradients */
.card-gradient {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
}

.dark .card-gradient {
    background: linear-gradient(145deg, #1e293b, #0f172a);
}

.bg-pattern {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 0% 0%, hsla(210, 80%, 95%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(220, 80%, 95%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(210, 80%, 95%, 1) 0, transparent 50%);
    background-size: 100% 100%;
}

.dark .bg-pattern {
    background-color: #0f172a;
    background-image:
        radial-gradient(at 0% 0%, hsla(220, 20%, 15%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(230, 20%, 15%, 1) 0, transparent 50%);
}

/* Animations */
@keyframes gradient-anim {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pop {
    animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-pulse-slow {
    animation: pulse 3s infinite;
}

.animate-marquee {
    animation: marquee 12s linear infinite;
}

.animate-marquee-pause {
    animation: marqueePause 8s linear infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes marqueePause {
    0% {
        transform: translateX(0%);
    }

    30% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Print Styles (Request: Bagus/High Quality) */
@media print {
    @page {
        margin: 1cm;
        size: A4 portrait;
    }

    html {
        color-scheme: light !important;
    }

    /* Reset & Visibility */
    #app,
    #modal-layer,
    #calculator-container,
    .no-print,
    .bg-pattern,
    .fixed.z-0 {
        display: none !important;
    }

    body {
        background-color: white !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #printable-area {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background-color: white !important;
        color: #0f172a !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        z-index: 9999 !important;
    }

    /* Container */
    .print-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }

    /* Letterhead Header */
    .print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 40px;
        padding-bottom: 20px;
        border-bottom: 3px solid #0f172a;
        position: relative;
    }

    .print-header::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 100%;
        height: 1px;
        background: #94a3b8;
    }

    .print-logo {
        font-size: 28px;
        font-weight: 800;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 12px;
        letter-spacing: -0.03em;
    }

    .print-logo i {
        font-size: 32px;
        color: #2563eb !important;
    }

    .print-meta {
        text-align: right;
        font-size: 11px;
        color: #475569;
        line-height: 1.5;
    }

    .print-meta strong {
        color: #0f172a;
        font-weight: 700;
    }

    /* Summary Cards */
    .print-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    .print-card {
        border: 1px solid #cbd5e1;
        border-radius: 16px;
        padding: 20px;
        background: #fff;
        page-break-inside: avoid;
        box-shadow: none;
    }

    .print-card.highlight {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .print-card-label {
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 8px;
        letter-spacing: 0.05em;
    }

    .print-card-value {
        font-size: 24px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.02em;
    }

    .print-card-value.green {
        color: #059669 !important;
    }

    .print-card-value.red {
        color: #e11d48 !important;
    }

    /* Section Titles */
    .print-section-title {
        font-size: 16px;
        font-weight: 800;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 10px;
        margin-bottom: 20px;
        margin-top: 40px;
        color: #0f172a;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Professional Data Table */
    .print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        table-layout: fixed;
    }

    .print-table th {
        background-color: #f8fafc !important;
        padding: 12px;
        text-align: left;
        font-weight: 700;
        color: #334155;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.05em;
        border-top: 1px solid #e2e8f0;
        border-bottom: 2px solid #cbd5e1;
    }

    .print-table td {
        padding: 12px;
        border-bottom: 1px solid #e2e8f0;
        color: #334155;
        vertical-align: top;
    }

    .print-table tr:nth-child(even) td {
        background-color: #fcfcfc !important;
    }

    .print-table-amount {
        text-align: right;
        font-weight: 700;
        font-family: monospace;
        font-size: 13px;
        letter-spacing: -0.02em;
    }

    /* Chart */
    .print-chart-container {
        margin: 30px 0;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 24px;
        page-break-inside: avoid;
        background: #fff;
        text-align: center;
    }

    /* Footer */
    .print-footer {
        margin-top: 60px;
        padding-top: 20px;
        border-top: 1px solid #e2e8f0;
        text-align: center;
        font-size: 10px;
        color: #94a3b8;
        display: flex;
        justify-content: space-between;
    }
}