@font-face {
    font-family: 'PoppinsLocal';
    src: url('assets/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'PoppinsLocal';
    src: url('assets/fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
}

:root {
    --bg-color : #F4F7F6;
    --side-color : 79, 111, 82;
    --btn-color : #4F6F52;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PoppinsLocal', sans-serif;
}

/* sidebar */
.sidebar { 
    width: 120px;
    height: calc(100vh - 40px); /* Mengurangi tinggi layar dengan total margin atas & bawah */
    margin: 20px; /* Melepas sidebar dari semua tepi layar (atas, bawah, kiri, kanan) */
    background: rgba(var(--side-color)); 
    border-radius: 20px; /* Melengkungkan semua sudut agar terlihat seperti "kartu" */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Memberikan bayangan agar terlihat melayang */
    display: flex; 
    flex-direction: column; 
    padding: 20px 0; 
    align-items: center;
    z-index: 10; /* Memastikan sidebar selalu berada di atas background utama */
}
/* logo dan title */
.brand { 
    font-family: 'poppins', cursive;
    font-style: italic;
    font-size: 20px; 
    font-weight: 700; 
    color: #ffffff; 
    margin-bottom: 50px; 
    text-align: center;
    line-height: 1;
}
/* menu sidebar */
.nav-menu { 
    list-style: none; 
    width: 100%;
    flex: 1; 
}
.nav-menu li { 
    margin-bottom: 25px; 
}
.nav-menu a { 
    text-decoration: none; 
    color: #ffffff; 
    display: flex; 
    flex-direction: column; /* Ikon di atas, teks di bawah */
    align-items: center; 
    justify-content: center;
    transition: 0.3s;
    font-size: 12px; /* Ukuran teks lebih kecil */
}
.nav-menu a i { 
    font-size: 24px; 
    margin-bottom: 5px;
}
.nav-menu a:hover, .nav-menu a.active, .nav-menu a.active i{ 
    color: #e2f4ca; 
    font-weight: bold; 
}
.logout-section {
    margin-top: auto;
    padding-bottom: 20px;
}
.logout-btn { 
    color: white;
    text-decoration: none; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    font-size: 12px;
    font-weight: 600;
}
.logout-btn i {
    font-size: 24px;
    margin-bottom: 5px;
}
.logout-btn:hover {
    color: #b11414;
}
/* Warna default (saat tidak aktif) */
/* .nav-menu a {
    text-decoration: none;
    color: #000; 
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
} */
/* Warna saat menu AKTIF */

/*BODY & MAIN LAYOUT*/
body {
    margin: 0;
    padding: 0;
    height: 100vh; /* Pas setinggi layar */
    display: flex;
    overflow: hidden; /* Mencegah scroll di tingkat window */
    background-color: var(--bg-color);
}
.main-content {
    flex: 1;
    height: 100vh;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}
/* HEADER */
.header {
    background:var(--bg-color);
    padding: 20px 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid #EEE;
    position: sticky;
    top: 0;
    z-index: 100;
}
.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.user-profile i {
    font-size: 20px;
}

/* title*/
.page-title-area {
    padding: 30px 40px 10px 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}
.page-title-area h2 {
    font-size: 32px;
    margin: 0;
}

/* filter section (dashboard)*/
.filter-section {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-input {
    padding: 8px;
    border: 1px solid #DDD;
    border-radius: 6px;
    font-size: 14px;
}
.btn-filter {
    background: var(--btn-color);;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
}

/* CONTENT BODY & GRID */
.content-body {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.grid-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ===== CARD STYLES ===== */
.card, .card-stats-row {
    background: #FFF;
    padding: 25px;
    border-radius: 15px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.card-stats-row {
    min-height: 100px !important;
    padding: 15px 20px;
}

/* SIDE CARDS CONTAINER */
.side-cards-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.mini-card {
    flex: 1;
    background: #FFF;
    padding: 15px 20px;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mini-label {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 14px;
    color: #000;
}

.card-label {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    font-family: 'Poppins', sans-serif;
}

.card-value {
    font-size: 26px;
    font-weight: bold;
    color: #000;
}

/* STAT LABELS & VALUES */
.stat-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
}

/*  BOTTOM SECTION  */
.section-box {
    background: #FFF;
    padding: 25px;
    border-radius: 15px;
    height: 260px;
    border: 1px solid #EEE;
}
.section-box:nth-child(3) {
    grid-column: span 2;
}
.section-box h3 {
    font-size: 16px;
    margin-bottom: 15px;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 10px;
}
.table-container-scroll {
    max-height: 160px;    /* Tentukan tinggi maksimal box */
    overflow-y: auto;     /* Munculkan scrollbar jika data melebihi max-height */
    overflow-x: hidden;   /* Sembunyikan scroll kesamping jika tidak perlu */
}
.stok-table thead th {
    position: sticky;
    top: 0;
    background-color: #fff; /* Sesuaikan dengan warna background box kamu */
    z-index: 1;
    border-bottom: 2px solid #ffffff;
}

/* TABLE STYLES  */
.stok-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.stok-table td {
    padding: 6px 5px;
    border-bottom: 1px solid #F9F9F9;
}

.badge-danger {
    background: #FFEBEE;
    color: #C62828;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
}
/* ACTION BUTTON */
.action-buttons {
    display: flex;
    gap: 15px;
}
.btn-action {
    background-color: var(--btn-color);;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'poppins';
    font-size: 14px;
    color: #FFF;
    cursor: pointer;
    transition: 0.3s;
    margin-top: auto;
}

.btn-action:hover {
    background-color: #1A4D2E;
}

/* tambah promo */
.row-nonaktif { background-color: #f8f9fa; opacity: 0.7; }
.badge { padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; }
.badge-aktif { background: #27ae60; color: white; }
.badge-nonaktif { background: #e74c3c; color: white; }
.btn-switch { background: #3498db; color: white; border: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.btn-delete { background: none;color: rgb(194, 50, 50); border: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; }


/* Opsional: membuat gambar produk nonaktif menjadi hitam putih */
.row-nonaktif img {
    filter: grayscale(100%);
    opacity: 0.6;
}

.btn{
    background: transparent;
    border: none;
    cursor: pointer;
    margin: 5px;
}


/* CONTENT CONTAINER */
.content-container {
    background-color:  rgba(255, 255, 255, 0.5); 
    margin: 10px 40px 10px 40px;
    padding: 20px 30px;
    border-radius: 25px;
    min-height: 550px;
}
/* TABLE */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.table-header h3 {
    font-size: 18px;
}
/* FILTER SEARCH */
.filter-search {
    display: flex;
    gap: 15px;
}
.filter-select {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #CCC;
    font-size: 12px;
}
.search-box {
    position: relative;
}
.search-box input {
    padding: 5px 10px 5px 30px;
    border-radius: 5px;
    border: 1px solid #CCC;
    font-size: 12px;
    width: 200px;
}
.search-box i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 12px;
}

/* MAIN TABLE */
.main-table {
    width: 100%;
    border-collapse: collapse;
    /* background: transparent; */
}

.main-table thead th {
    background-color:  #E8DFCA;
    color: #4E342E;
    font-weight: bold;
    padding: 12px;
    font-size: 13px;
    text-align: center;
}

.main-table thead th:first-child { border-radius: 5px 0 0 5px; }
.main-table thead th:last-child { border-radius: 0 5px 5px 0; }

.main-table tbody td {
    padding: 10px 15px;
    text-align: center;
    border-bottom: 1px solid #E0E0E0;
    font-size: 14px;
}

.add {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);
}
.add-content {
    background-color: #fff; margin: 5% auto; padding: 25px;
    border-radius: 15px; width: 450px; font-family: 'Poppins', sans-serif;
}
.add-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.form-group { margin-bottom: 15px; display: flex; flex-direction: column; }
.form-group label { font-size: 13px; margin-bottom: 5px; color: #666; }
.form-group input, .form-group select { padding: 10px; border: 1px solid #ddd; border-radius: 8px; }
.row-input { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.btn-save { 
    width: 100%; padding: 12px; background: var(--btn-color); color: white; 
    border: none; border-radius: 8px; cursor: pointer; font-weight: bold;
}

.alert {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background-color: #D4EDDA;
    color: #155724;
    border: 1px solid #C3E6CB;
}

.alert-danger {
    background-color: #F8D7DA;
    color: #721C24;
    border: 1px solid #F5C6CB;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}
.alert i {
    font-size: 18px;
}

.stat-card {
    flex: 1;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    height: 80px;
}

.stat-header {
    padding: 8px;
    text-align: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.stat-body {
    padding: 15px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.stat-body-list {
    padding: 10px;
    font-size: 11px;
}
.stat-body-main {
    display: flex; 
    justify-content: space-between; 
    font-size: 13px; 
    padding: 0 15px;
}
/* Warna Header Card */
.blue .stat-header { background-color: #8EBAE3; }
.green .stat-header { background-color: #B2C18D; }
.red .stat-header { background-color: #D97E7E; }
.orange .stat-header { background-color: #D9A47E; }
.gray .stat-header { background-color: #BDB7B7; }

.footer{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
.footer-total {
    margin: 0px 40px; 
    padding: 15px; 
    background: #F5EFE6; 
    border-radius: 50px; 
    width: fit-content; 
    min-width: 300px"
}

/* KASIR */
.kasir-main { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    padding: 20px 40px;
}
/* Filter & Search */
.search-container { display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 30px; 
}
.kasir-search { 
    background: #ffffff; 
    border-radius: 4px; 
    padding: 8px 15px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: 100%; 
}
.kasir-search input { 
    background: transparent; 
    border: none; 
    outline: none; 
    font-size: 13px; 
    width: 100%; 
}
.kasir-categories { 
    display: flex; 
    gap: 10px; 
}
.kasir-categories a { 
    text-decoration: none; 
    color: #40654f; 
    display: inline-block; 
}
.kasir-category-btn { 
    padding: 6px 15px; 
    border-radius: 4px; 
    border: 1px solid #40654f; 
    background: #ffffff; 
    cursor: pointer; 
    font-size: 12px; 
}
.kasir-category-btn.active { 
    background: #40654f;
    color: white; 
    font-weight: bold; 
}
/* Grid Produk */
.section-title { 
    font-family: 'Georgia', serif; 
    font-size: 18px; 
    margin: 25px 0 15px 0; 
    color: #333; 
    scroll-margin-top: 20px; 
}
.product-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 20px; }
.product-card { 
    display:flex;
    flex-direction: column;
    height: 100;
    justify-content: space-between;
    background: #fff; 
    border: 1px solid #E0E0E0; 
    border-radius: 8px; 
    padding: 12px; 
    transition: 0.2s; 
}
.product-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}
.product-image { 
    width: 100%; 
    height: 120px; 
    background: #D9D9D9; 
    border-radius: 4px; 
    margin-bottom: 10px; 
}
.product-name { 
    font-weight: bold; 
    font-size: 13px; 
    margin-bottom: 5px; 
    color: #222; 
}
.product-price { 
    font-size: 12px; 
    color: #000; 
    font-weight: bold; 
}
.product-stock { 
    font-size: 10px; 
    color: #999; 
    margin-top: 5px; 
}

/* Keranjang Kanan */
.kasir-right { 
    width: 380px; 
    background: #F5EFE6;
    display: flex; 
    flex-direction: column; 
    color: #fff; 
    flex-shrink: 0; 
}
.cart-header { 
    padding: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
}
.cart-items { 
    flex: 1; 
    padding: 20px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.cart-item { 
    background: #ffffff; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border-radius: 6px; 
    padding: 12px; 
    display: flex; 
    gap: 12px; 
    position: relative; 
    color: #333; }
.cart-item-img { 
    width: 45px; 
    height: 45px; 
    background: #D9D9D9; 
    border-radius: 4px; 
}
.cart-item-detail { flex: 1; }
.cart-item-name { 
    font-weight: bold; 
    font-size: 13px; 
    margin-bottom: 2px; 
}
.cart-item-price { 
    font-size: 11px; 
    opacity: 0.8; 
}
.cart-item-total { 
    font-weight: bold; 
    font-size: 12px; 
    margin-top: 5px; 
}

.quantity-control { 
    position: absolute; 
    right: 12px; 
    bottom: 12px; 
    display: flex; 
    align-items: center; 
    background: #fff; 
    border-radius: 4px; 
    padding: 3px 8px; 
    gap: 12px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}
.quantity-control button { border: none; background: transparent; cursor: pointer; font-weight: bold; color: var(--btn-color);; padding: 0 5px; }

/* Checkout Section */
.summary-line { padding: 10px 20px; color: black; border-top: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; }
.summary-line.total { font-weight: bold; font-size: 20px;}
.payment-section { padding: 15px 25px;}
.payment-label { font-size: 11px; margin-bottom: 12px; opacity: 0.9; letter-spacing: 1px; color:black }
.payment-options { display: flex; gap: 10px; margin-bottom: 20px; }
.pay-option { flex: 1; background: #ffffff; border: 2px solid transparent; padding: 20px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 16px; color: var(--btn-color); transition: 0.2s; }
.pay-option.active { border-color: none; background: #4F6F52; color: white; }
.btn-checkout { width: 100%; background: #292e25; color: #fff; border: none; padding: 18px; border-radius: 50px; font-weight: bold; cursor: pointer; font-size: 14px; letter-spacing: 1px; }
.btn-checkout:hover { background: #343e36; }

.btn-aksi{
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    /* berikan jarah antar button aksi */
}

/* Warna Status */
.status-selesai { color: #27ae60; font-weight: bold; }   /* Hijau */
.status-dibatalkan { color: #e74c3c; font-weight: bold; } /* Merah */
.status-waste { color: #e67e22; font-weight: bold; }     /* Oranye */
.status-menunggu { color: #f1c40f; font-weight: bold; }    /* Kuning */
/* pagination */
.pagination {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.btn-page {
    padding: 4px 8px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
}
.btn-page:hover {
    background-color: #f1f1f1;
}
.btn-page.active {
    background-color: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}
.btn{
    background: transparent;
    border: none;
    cursor: pointer;
    margin: 5px;
}


/* Gaya Tombol Kriteria Sesuai Gambar */
.btn-kriteria {
    background: rgb(79, 111, 82, 0.8);
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: #ffffff;
    transition: 0.3s;
}
.btn-kriteria.active {
    background: #1A4D2E;
    font-weight: bold;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Perbaikan tampilan Select2 agar menyatu dengan tema */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #ccc;
    border-radius: 8px;
    min-height: 38px;
}

/* rekomendasi produk */
.promo-scroll-container::-webkit-scrollbar { height: 8px; }
.promo-scroll-container::-webkit-scrollbar-thumb { background: #e74c3c; border-radius: 4px; }
.promo-scroll-container::-webkit-scrollbar-track { background: #f1f1f1; }

/* ===== STYLE INPUT HARGA DENGAN PREFIX RP ===== */
.input-harga-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-harga-prefix {
    position: absolute;
    left: 12px;
    font-weight: bold;
    color: #2c3e50;
    font-size: 14px;
    pointer-events: none;
    user-select: none;
}

.input-harga {
    padding-left: 45px !important;
    text-align: right;
}