:root {
    --primary: #2563eb;       /* Modern Blue */
    --primary-dark: #1e40af;
    --secondary: #64748b;     /* Slate Gray */
    --accent: #0ea5e9;        /* Sky Blue */
    --success: #10b981;       /* Emerald */
    --danger: #ef4444;        /* Red */
    --warning: #f59e0b;       /* Amber */
    --bg-body: #f1f5f9;       /* Very Light Gray */
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius: 8px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.5;
    padding-top: 60px; /* Space untuk navbar fixed */
}

/* --- NAVBAR STYLES --- */
.navbar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.3s ease-in-out;
}

.navbar.navbar-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Agar brand tidak terhimpit saat menu di tengah */
    z-index: 2; 
}

.brand-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-hide-btn {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: var(--primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.nav-hide-btn:hover { background: var(--primary); color: white; }

.hamburger {
    display: none; 
}

/* --- CENTER MENU --- */
.nav-menu {
    display: flex;
    flex: 1;
    justify-content: center; 
    align-items: center;
    position: relative; 
}

/* LIST MENU ICON */
.nav-menu ul {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0; /* Margin auto dihapus karena sudah justify-content: center */
}

.nav-menu a {
    text-decoration: none;
    color: var(--text-muted);
    width: 42px; 
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-weight: 500;
    transition: all 0.2s;
    position: relative; 
}

.nav-menu a i {
    font-size: 22px; 
}

.nav-menu a:hover, .nav-menu a.active {
    background-color: #eff6ff;
    color: var(--primary);
    transform: translateY(-2px);
}

/* TOOLTIP */
.nav-menu a .nav-label {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e293b;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    margin-top: -10px;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.nav-menu a .nav-label::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #1e293b transparent;
}

.nav-menu a:hover .nav-label {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

/* --- NAV PROFILE (DI KANAN) --- */
.nav-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* FLOATING BUTTON */
.floating-menu-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    font-size: 24px;
    cursor: pointer;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.floating-menu-btn.show { display: flex; animation: popIn 0.3s; }
.floating-menu-btn:hover { transform: scale(1.1); background: var(--primary-dark); }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- RESPONSIVE MOBILE (Reset CSS Desktop) --- */
@media (max-width: 1024px) {
    .nav-brand {
        width: 100%;
        justify-content: space-between;
    }

    .hamburger {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--text-main);
        order: 2; 
    }
    
    .brand-logo { order: 1; }
    .nav-hide-btn { order: 0; margin-right: 10px; }

    .nav-menu {
        display: none; 
        flex-direction: column;
        position: fixed;
        top: 60px; left: 0; right: 0;
        background: white;
        border-bottom: 1px solid var(--border);
        padding: 15px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        max-height: 85vh;
        overflow-y: auto;
        
        /* RESET LOGIKA CENTER DESKTOP */
        justify-content: flex-start; 
        align-items: stretch;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu ul {
        flex-direction: column;
        width: 100%;
        margin: 0;
        gap: 5px;
    }

    .nav-menu a {
        display: flex;
        width: 100%;
        height: auto;
        padding: 12px;
        border-bottom: 1px solid #f1f5f9;
        justify-content: flex-start; /* Reset center */
        gap: 15px;
    }

    .nav-menu a .nav-label {
        position: static;
        transform: none;
        background: none;
        color: inherit;
        padding: 0;
        opacity: 1;
        visibility: visible;
        margin: 0;
        box-shadow: none;
        font-size: inherit;
        pointer-events: auto;
    }
    
    .nav-menu a .nav-label::after { display: none; }

    .nav-profile {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 2px dashed #f1f5f9;
        
        /* RESET POSITION ABSOLUTE */
        position: static;
        transform: none;
    }
}

/* --- LAYOUT UMUM --- */
.content { padding: 20px; max-width: 1200px; margin: 0 auto; }
.card-stat, .panel, .login-container { background: var(--bg-card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.header-action { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 10px; }
.header-action h2 { margin: 0; font-size: 20px; color: var(--text-main); }

button { cursor: pointer; transition: 0.2s; font-family: inherit; font-weight: 500; }
.btn-primary { background: var(--primary); color: white; border: none; padding: 10px 16px; border-radius: var(--radius); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #e2e8f0; color: #334155; border: none; padding: 10px 16px; border-radius: var(--radius); }
.btn-warning { background: var(--warning); color: white; border: none; padding: 6px 12px; border-radius: var(--radius); }
.btn-danger { background: var(--danger); color: white; border: none; padding: 6px 12px; border-radius: var(--radius); }
.btn-sm { font-size: 12px; padding: 6px 10px; }
.btn-logout { background: none; border: 1px solid var(--danger); color: var(--danger); padding: 6px 12px; border-radius: var(--radius); }
.btn-logout:hover { background: var(--danger); color: white; }

input, select, textarea { 
    padding: 10px; 
    border: 1px solid var(--border); 
    border-radius: var(--radius); 
    font-family: inherit; 
    font-size: 14px; 
    box-sizing: border-box; 
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* TABLE STYLES */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 15px; border: 1px solid var(--border); border-radius: var(--radius); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 800px; }
.table th { background: #f8fafc; color: var(--text-muted); font-weight: 600; padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); background: white; white-space: nowrap; }
.table tr:last-child td { border-bottom: none; }
.table-fit { min-width: 0 !important; width: 100%; table-layout: fixed; }
.table-fit th, .table-fit td { white-space: normal !important; word-wrap: break-word; padding: 8px 5px !important; font-size: 12px; vertical-align: middle; }

/* MODAL & TOAST */
.modal, .custom-modal { display: none; position: fixed; z-index: 1200; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(2px); }
.modal-content, .custom-modal-content { background-color: white; margin: 5vh auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 600px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); animation: slideIn 0.3s ease-out; position: relative; max-height: 90vh; overflow-y: auto; }
@keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.close-btn { position: absolute; right: 20px; top: 15px; font-size: 28px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.close-btn:hover { color: var(--danger); }
.trx-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 20px; }
@media (max-width: 480px) { .trx-info-grid { grid-template-columns: 1fr; gap: 10px; } }
#toastContainer { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast { background: white; padding: 15px 20px; border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); border-left: 4px solid var(--primary); display: flex; align-items: center; gap: 10px; animation: slideInRight 0.3s; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* POS STYLES */
.pos-container { flex-direction: column; height: auto !important; }
@media(min-width: 1024px) { .pos-container { flex-direction: row; height: calc(100vh - 100px) !important; } }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; padding: 10px; align-content: start; }
.pos-product-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 160px; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: relative; }
.pos-product-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 5; }
.pos-card-name { font-size: 14px; font-weight: 600; color: var(--text-main); margin-bottom: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.pos-card-footer { border-top: 1px dashed #e2e8f0; padding-top: 12px; margin-top: auto; }
.pos-card-price { font-size: 16px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.pos-card-stock { font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
.stock-badge { padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 10px; }
.stock-safe { background: #dcfce7; color: #166534; }
.stock-low { background: #fee2e2; color: #991b1b; }

/* PRINT STYLES */
#receipt-area, #label-print-area { display: none; }
@media print {
    @page { margin: 0; size: auto; }
    #main-layout, .navbar, #floatingShowBtn, #login-slot, .modal, .custom-modal, #toastContainer, .header-action, .btn-primary, .btn-secondary, .btn-danger, .btn-warning, input, select, textarea { display: none !important; }
    body, html { margin: 0 !important; padding: 0 !important; background: white !important; height: 100%; width: 100%; overflow: visible !important; }
    #receipt-area { display: block !important; visibility: visible !important; position: absolute !important; top: 0; left: 0; width: 100% !important; padding: 10px 15px !important; font-family: 'Consolas', monospace !important; font-size: 12px !important; color: black !important; background: white; z-index: 9999; }
    .receipt-header { text-align: center; margin-bottom: 10px; border-bottom: 1px dashed black; padding-bottom: 5px; }
    .receipt-item { display: flex; justify-content: space-between; margin-bottom: 2px; }
    .receipt-divider { border-top: 1px dashed black !important; margin: 5px 0; display: block; }
    .receipt-total { display: flex; justify-content: space-between; font-weight: 800; margin-top: 5px; }
    .receipt-footer { text-align: center; margin-top: 15px; border-top: 1px dashed black; padding-top: 5px; }
    #label-print-area:not(:empty) { display: block !important; position: absolute; top: 0; left: 0; width: 100%; background: white; z-index: 9999; }
    .print-page-sheet { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(7, 1fr); gap: 10px; width: 100%; height: 297mm; padding: 10mm; box-sizing: border-box; page-break-after: always; }
    .print-page-sheet:last-child { page-break-after: auto; }
    .label-card { height: 100%; border: 2px solid #000; padding: 5px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; }
    .label-name { font-size: 14px; margin-bottom: 2px; border-bottom: 1px solid #000; text-align: center; width: 100%; }
    .label-category { font-size: 10px; text-transform: uppercase; font-weight: bold; }
    .label-code { font-size: 12px; padding: 1px 2px; border: 1px solid black; }
    .label-price { font-size: 16px; font-weight: bold; }
}