/* =============================================
   NGABAR BISTRO POS — GLOBAL CSS
   ============================================= */

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

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =============================================
   SIDEBAR NAVIGATION
   ============================================= */
.sidebar-main {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .sidebar-main {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
        z-index: 50;
    }
    .sidebar-main.open {
        transform: translateX(0);
    }
}

.nav-link {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.nav-active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

/* =============================================
   TOAST NOTIFICATION
   ============================================= */
.toast-notif {
    transform: translateX(-50%) translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-notif.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* =============================================
   POS PRODUCT CARD
   ============================================= */
.pos-card {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pos-card:active {
    transform: scale(0.96);
}

/* =============================================
   PRICE PILL FILTER
   ============================================= */
.price-pill {
    transition: all 0.2s ease;
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin { animation: spin 0.8s linear infinite; }

.fade-in-up { animation: fadeInUp 0.3s ease forwards; }

/* =============================================
   MODAL BACKDROP
   ============================================= */
#payment-modal:not(.hidden),
#struk-modal:not(.hidden),
#modal-cabang:not(.hidden),
#modal-user:not(.hidden) {
    animation: fadeInUp 0.25s ease forwards;
}

/* =============================================
   FORM FOCUS RING
   ============================================= */
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    .sidebar-main,
    header,
    #toast,
    button,
    .no-print {
        display: none !important;
    }

    .flex { display: block !important; }
    main { margin: 0 !important; padding: 0 !important; }
}

/* =============================================
   CUSTOM SELECT ARROW
   ============================================= */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 40px !important;
}

/* =============================================
   TABLE HOVER
   ============================================= */
tbody tr {
    transition: background-color 0.15s ease;
}

/* =============================================
   BUTTON TRANSITIONS
   ============================================= */
button {
    transition: all 0.2s ease;
}

button:active:not(:disabled) {
    transform: scale(0.97);
}

/* =============================================
   STAT CARD HOVER
   ============================================= */
.stat-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}