/* =========================================
   1. GLOBAL FONT & BODY
   ========================================= */
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
}

/* =========================================
   2. GHOST GLASS SCROLLBAR (ULTRA TRANSPARAN)
   ========================================= */

/* Hapus background default scrollbar */
::-webkit-scrollbar {
    width: 6px;  /* Sangat tipis */
    height: 6px;
    background-color: transparent; /* Wajib transparent */
}

/* Track (Jalur) - Hilangkan warna abu-abu */
::-webkit-scrollbar-track {
    background-color: transparent; /* Jalur benar-benar bolong */
    margin: 4px;
    border-radius: 10px;
}

/* Thumb (Batang) - LIGHT MODE */
::-webkit-scrollbar-thumb {
    /* Hanya 3% opacity (Nyaris tidak terlihat) */
    background-color: rgba(0, 0, 0, 0.03); 
    border-radius: 50px;
    
    /* Trik border transparent agar terlihat melayang */
    border: 1px solid transparent;
    background-clip: content-box;

    transition: background-color 0.4s ease;
}

/* Hover State - Baru terlihat jelas saat mouse di atasnya */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25); /* Muncul saat di-hover */
}

/* Thumb (Batang) - DARK MODE */
.dark ::-webkit-scrollbar-thumb {
    /* Hanya 5% putih (Sangat samar di background hitam) */
    background-color: rgba(255, 255, 255, 0.05);
}

/* Hover State - Dark Mode */
.dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Firefox Support */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.03) transparent;
}
.dark * {
    scrollbar-color: rgba(255, 255, 255, 0.05) transparent;
}


/* =========================================
   3. GLASSMORPHISM STYLES
   ========================================= */
.glass-panel {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.dark .glass-panel {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.glass-input {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

.dark .glass-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================
   4. UTILITIES
   ========================================= */
.cursor-crosshair {
    cursor: crosshair;
}

/* =========================================
   5. PRINT STYLES
   ========================================= */
@media print {
    body { background: white !important; color: black !important; }
    .no-print, .export-btn, #adminSidebar, #adminHeader, #clientHeader, .blob { display: none !important; }
    .glass-panel { background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }
    #contentArea { padding: 0 !important; }
    .print-only { display: block !important; }
}

.print-only { display: none; }