/* ============================================================
   MKT SYSTEM - Common Styles (Shared Desktop & Mobile)
   ============================================================ */

* { box-sizing: border-box; font-family: 'Inter', sans-serif; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    transition: opacity 0.3s, transform 0.3s;
}
.toast.hide { opacity: 0; pointer-events: none; transform: translateY(20px); }

/* Spin animations */
.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Pulse badge */
@keyframes pulse-light {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .7; transform: scale(1.03); }
}
.pulse-badge { animation: pulse-light 2s infinite ease-in-out; }

/* Desktop nav buttons (shared hover/active) */
.desk-nav-btn:hover { background: #f0fdf4; }
.desk-nav-btn:hover i, .desk-nav-btn:hover span { color: #059669; }
.desk-nav-btn.active { background: #d1fae5; }
.desk-nav-btn.active i, .desk-nav-btn.active span { color: #059669 !important; font-weight: 700; }

/* Floating nav hide by default */
#desktop-float-nav, #dnav-settings-float { display: none !important; }
#desktop-float-nav.nav-visible { display: flex !important; }
#dnav-settings-float.nav-visible { display: flex !important; }

/* Dropdown animation (no transform to avoid conflict with Tailwind translate) */
.dropdown-animate {
    animation: ddFadeIn 0.15s ease;
}
@keyframes ddFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Calendar day box */
.cal-day-box { min-height: 80px; }

/* Form focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Visit calendar dropdown — primary-light themed */
#visit-cal-month-select,
#visit-cal-year-select {
    background-image: none; /* arrow dihandle oleh icon FA */
}
#visit-cal-month-select option,
#visit-cal-year-select option {
    background: #fff;
    color: #1f2937;
    font-weight: 600;
}