/* Google Fonts diload di header.php dengan teknik non-blocking (media=print) */

/* 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 */
/* blur dikurangi agar ringan di HP kentang */
.glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
}

.glass-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    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.97);
    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 6s 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;
    }
}

/* --- Driver.js Custom Theme --- */
.driver-popover {
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #334155;
    max-width: 320px;
}

.dark .driver-popover {
    background-color: #1e293b;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

/* Glass Theme - Stronger Overrides */
.driver-glass-theme.driver-popover {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow:
        0 20px 60px -10px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.5) !important;
    border-radius: 24px !important;
    padding: 24px !important;
}

.dark .driver-glass-theme.driver-popover {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    box-shadow:
        0 20px 60px -10px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* Hide Arrow / Apitan (Requested) */
.driver-popover-arrow,
.driver-popover-arrow-side-left,
.driver-popover-arrow-side-bottom,
.driver-popover-arrow-side-top,
.driver-popover-arrow-side-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    border: none !important;
}

/* Typography */
.driver-popover-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    color: #1e293b !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.dark .driver-popover-title {
    color: #ffffff !important;
}

.driver-popover-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-bottom: 28px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.dark .driver-popover-description {
    color: #cbd5e1 !important;
}

/* Footer & Buttons */
.driver-popover-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 0 !important;
    gap: 12px !important;
}

.driver-popover-progress-text {
    margin-right: auto !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

.dark .driver-popover-progress-text {
    color: #94a3b8 !important;
}

.driver-popover-navigation-btns {
    display: flex !important;
    gap: 10px !important;
}

/* Button Base Styles */
.driver-popover-btn {
    border-radius: 99px !important;
    /* Full pill */
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: capitalize !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
    filter: none !important;
    /* Remove filters that might cause shadowing */
    /* Remove any text shadows */
    box-sizing: border-box !important;
    line-height: normal !important;
}

/* Previous/Back Button */
.driver-popover-prev-btn {
    background: transparent !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
}

.dark .driver-popover-prev-btn {
    border: 1px solid #475569 !important;
    color: #cbd5e1 !important;
}

.driver-popover-prev-btn:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #94a3b8 !important;
}

.dark .driver-popover-prev-btn:hover {
    background: #334155 !important;
    color: white !important;
    border-color: #64748b !important;
}

/* Next/Done Button */
.driver-popover-next-btn,
.driver-popover-done-btn {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    border: 1px solid transparent !important;
    /* Prevent double border look */
}

.driver-popover-next-btn:hover,
.driver-popover-done-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}

.driver-popover-next-btn:active,
.driver-popover-done-btn:active {
    transform: translateY(0) !important;
}

/* Close Button - Perfect Center */
.driver-popover-close-btn {
    position: absolute;
    top: 14px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05) !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    /* Reset line-height for flex centering */
    font-size: 18px !important;
}

.dark .driver-popover-close-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

.driver-popover-close-btn:hover {
    background: #ef4444 !important;
    color: white !important;
    transform: rotate(90deg) !important;
}

.dark .driver-popover-close-btn:hover {
    background: #ef4444 !important;
    color: white !important;
}

/* Prevent Double Text on Buttons (Driver.js Fix) */
/* Prevent Double Text on Buttons (Driver.js Fix - High Specificity) */
.driver-popover .driver-popover-footer button,
.driver-popover .driver-popover-footer .driver-popover-btn,
.driver-popover .driver-popover-prev-btn,
.driver-popover .driver-popover-next-btn {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Re-add box shadow specific to next/done only where needed */
.driver-popover-next-btn,
.driver-popover-done-btn {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.driver-popover button::after,
.driver-popover button::before,
.driver-popover .driver-popover-btn::after,
.driver-popover .driver-popover-btn::before,
.driver-popover-next-btn::after,
.driver-popover-next-btn::before,
.driver-popover-prev-btn::after,
.driver-popover-prev-btn::before {
    content: none !important;
    display: none !important;
}

/* Fix Stage Clipping for Add Button (Visual fix) */
/* This helps ensure the SVG mask doesn't cut off hard defined round elements */
.driver-active-element {
    border-radius: 999px !important;
    /* Attempt to force rounded highlight if supported by browser painting */
}

/* Responive Mobile (Keep this) */
@media (max-width: 640px) {
    .driver-popover {
        max-width: 90vw !important;
        /* Use viewport width */
        width: auto !important;
        margin: 0 auto !important;
        left: 5vw !important;
        /* Attempt to center */
        box-sizing: border-box;
    }

    /* If driver.js uses transform for positioning, left/right might fight with it.
       Sometimes it's better to target specific popover containment if supported. 
       But forcing width helps readability on small screens. */
}

/* ======================================================
   OPTIMASI PERFORMA: Perangkat low-end & hemat baterai
   ====================================================== */

/* Nonaktifkan efek berat jika user aktifkan "reduce motion" di settings HP */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-pulse-slow,
    .animate-marquee,
    .animate-marquee-pause,
    .animate-fade-in,
    .animate-slide-up,
    .animate-pop {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Nonaktifkan backdrop-filter di perangkat yang tidak support atau sangat lambat */
@supports not (backdrop-filter: blur(1px)) {

    .glass,
    .glass-card,
    .glass-header {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .dark .glass,
    .dark .glass-card,
    .dark .glass-header {
        background: rgba(15, 23, 42, 0.99) !important;
    }
}

/* Optimasi rendering: paksa GPU layer hanya pada elemen yang benar-benar perlu */
.glass-header {
    will-change: auto;
    /* Jangan paksa will-change di semua tempat */
}

/* Kurangi shadow complexity untuk performa */
@media (max-width: 480px) {
    .glass-card {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .dark .glass-card {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }
}

/* Animasi shake untuk input gagal */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-6px);
    }

    30% {
        transform: translateX(6px);
    }

    45% {
        transform: translateX(-4px);
    }

    60% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(2px);
    }
}

.animate-shake {
    animation: shake 0.45s cubic-bezier(.36, .07, .19, .97) both;
}