/* ==========================================================================
   GAYA KHUSUS HALAMAN MANAJEMEN KELOLA STOK (ANTI-MENDELEP)
   ========================================================================== */


#konten-stok {
    display: flex;           /* Mengaktifkan sistem grid/flex */
    flex-direction: row;     /* Menyusun ke samping (kiri-kanan) */
    align-items: flex-start; /* PENTING: Membuat posisi atas panel sejajar dengan atas tabel */
    gap: 20px;
    padding: 20px;
  width: 95%;
}
/* Container Utama untuk layout Master-Detail */
/* 1. Kontainer Utama - Kunci layout */
.stok-page-container {
    display: flex;
    flex-direction: row;        /* Sejajarkan ke samping */
    align-items: flex-start;    /* INI KUNCI: Membuat panel sejajar dengan atas tabel */
    gap: 20px;
    padding: 20px;
    width: 100%;                /* Pastikan lebar penuh */
    box-sizing: border-box;     /* Menghindari overflow */
    overflow-x: hidden;         /* Mencegah scroll ke kanan */
}

/* 2. Sisi Kiri (Tabel) */
.tabel-area {
    flex: 3;                    /* Tabel dapat porsi lebih besar */
    min-width: 0;               /* WAJIB: Mencegah tabel mendorong layar ke samping */
}

/* 3. Sisi Kanan (Panel Detail) */
.panel-detail-varian {
    flex: 1;
    min-width: 300px;           /* Ukuran minimal agar panel tidak gepeng */
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    position: sticky;           /* Panel tetap di layar saat scroll tabel */
    top: 90px;                  /* Jarak dari atas layar */
}

/* 4. Mencegah konten di dalam tabel membuat halaman scroll */
.tabel-wadah-stok {
    width: 100%;
    overflow-x: auto;           /* Scroll hanya ada di dalam tabel saja */
}

/* Styling baris tabel agar terlihat bisa diklik */
.tr-item-stok { 
    cursor: pointer; 
    transition: background 0.2s; 
}
.tr-item-stok:hover { 
    background-color: #f1f5f9; 
}

/* ==========================================================================
   STRUKTUR GRID FORM INPUT BARU (RESPONSIF RESO 720p - FULL HD)
   ========================================================================== */
.form-grid-stok {
    display: grid;
    /* Default HP / Tablet Kecil: 1 kolom penuh */
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
}

/* ==========================================================================
   WADAH TOMBOL NAVIGASI STOK (VARIAN, TOPPING, PRODUK)
   ========================================================================== */
.grup-tombol-stok {
    display: flex;
    gap: 10px; /* Jarak spasi antar tombol */
    align-items: center;
}

/* Modifikasi warna spesifik tanpa merusak class .btn-tambah bawaanmu */
.btn-tambah.btn-varian {
    background-color: #8b5cf6 !important; /* Warna Ungu */
}
.btn-tambah.btn-varian:hover {
    background-color: #7c3aed !important;
}

.btn-tambah.btn-topping {
    background-color: #f59e0b !important; /* Warna Oranye */
}
.btn-tambah.btn-topping:hover {
    background-color: #d97706 !important;
}

/* Styling Tombol Aksi Tabel */
.btn-aksi-tabel {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #d1d5db;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
}

.btn-edit {
    background-color: #f3f4f6;
    color: #374151;
}

.btn-edit:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

.btn-hapus {
    background-color: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-hapus:hover {
    background-color: #fecaca;
    color: #b91c1c;
}

.btn-varian {
    background-color: #f3f4f6; /* Warna abu-abu terang netral */
    color: #374151; /* Warna teks gelap */
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #d1d5db; /* Garis tepi halus */
    transition: all 0.2s ease;
}

/* Efek Hover Tombol Varian */
.btn-varian:hover {
    background-color: #e5e7eb;
    color: #111827;
    border-color: #9ca3af;
}

/* Komponen Elemen Input di dalam Form */
.grup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.grup-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
}

.input-stok-field {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

.input-stok-field:focus {
    border-color: #2563eb;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.select-stok-field {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    background-color: white;
    cursor: pointer;
}

.select-stok-field:focus {
    border-color: #2563eb;
}

/* ==========================================================================
   PANEL TABEL DATA INVENTARIS
   ========================================================================== */
.kartu-tabel-stok {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    flex-grow: 1;
}

.header-tabel-kontrol {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

 /* 1. Perbaiki Lebar Tabel agar rapi */
.tabel-wadah-stok {
    background: white;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow-x: auto;

}

.gambar-tabel-mini {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    background-color: #e5e7eb;
}

.text-sku {
    color: #9ca3af;
    font-size: 0.75rem;
}

.label.bahaya {
    background-color: #fee2e2;
    color: #ef4444;
}

/* 2. Tombol Aksi (Edit & Hapus) */
.btn-aksi-tabel {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #d1d5db;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
    margin-right: 5px; /* Memberi jarak antar tombol */
    text-decoration: none;
}

/* Tombol Edit */
.btn-edit {
    background-color: #f3f4f6;
    color: #374151;
}
.btn-edit:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

/* Tombol Hapus */
.btn-hapus {
    background-color: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}
.btn-hapus:hover {
    background-color: #fecaca;
    color: #b91c1c;
}

/* Tombol Tambah Produk */
.btn-tambah {
    background-color: #22c55e;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2);
}

.btn-tambah:hover {
    background-color: #16a34a;
}

.btn-tambah:active {
    transform: scale(0.98);
}

/* ==========================================================================
   DESAIN ELEMEN DI DALAM PANEL DETAIL VARIAN
   ========================================================================== */
.judul-detail-panel {
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 2px solid #eff6ff;
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Wadah untuk menampung baris-baris varian */
.detail-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mengatur baris varian agar sejajar horizontal */
.detail-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.detail-item-label {
    color: #475569;
    font-weight: 600;
    font-size: 0.85rem;
}

.detail-item-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

/* Warna hijau khusus untuk harga makanan */
.detail-item-value.makanan {
    color: #16a34a;
    font-size: 1rem;
}

/* Kotak informasi tambahan untuk produk makanan */
.detail-info-text {
    color: #64748b;
    margin-top: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    background-color: #fcfcfc;
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed #e2e8f0;
    margin-bottom: 0;
}


@media (max-width: 850px) {

    .stok-page-container {
        flex-direction: column !important; /* Mengubah susunan ke bawah (tabel di atas, detail di bawah) */
        padding: 12px !important;          /* Mengurangi padding luar agar menghemat ruang layar HP */
        gap: 15px !important;              /* Merapatkan jarak antara tabel dan panel detail */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Sisi Kiri (Tabel) */
    .tabel-area {
        width: 100% !important;            /* Tabel mengambil lebar penuh layar */
        flex: none !important;
    }

    /* 3. Sisi Kanan (Panel Detail Varian) */
    .panel-detail-varian {
        width: 100% !important;            /* Panel menyesuaikan lebar penuh layar */
        min-width: 0 !important;           /* Menghapus batas minimal 300px agar tidak meluap di HP kecil */
        position: static !important;       /* Menonaktifkan efek sticky agar mengalir normal ke bawah */
        box-sizing: border-box !important;
        padding: 15px !important;          /* Menyesuaikan padding dalam panel agar lebih rapi */
    }
   

      .header-tabel-kontrol {
        display: flex !important;
        flex-direction: column !important; /* Membuat judul di atas dan tombol di bawah */
        align-items: flex-start !important; /* Judul tetap rapat di kiri */
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .header-tabel-kontrol h2 {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

     .grup-tombol-stok {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important; /* INI KUNCI: Menggeser tombol ke kanan */
        gap: 8px !important;
        width: 100% !important;             /* Menggunakan lebar penuh agar bisa rata kanan */
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }


    /* 3. Menyesuaikan Tombol di dalam grup stok */
     .grup-tombol-stok .btn-tambah {
        flex: 0 1 auto !important;          /* Tombol akan menyesuaikan lebar teks, tidak melebar penuh */
        font-size: 0.8rem !important;
        padding: 8px 12px !important;       /* Sedikit penyesuaian padding agar lebih pas */
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

     .tabel-transaksi {
        font-size: 0.8rem !important;      /* Sedikit memperkecil font agar lebih banyak data terlihat */
    }

    .tabel-transaksi th {
        padding: 10px 8px !important;      /* Mengurangi padding agar pas di layar HP */
        font-size: 0.78rem !important;
    }

    .tabel-transaksi td {
        padding: 10px 8px !important;      /* Jarak baris yang pas untuk ketukan jari di HP */
    }

    /* Menjaga agar kolom penting tidak terlipat menjadi satu huruf ke bawah */
    .tabel-transaksi th:nth-child(4), /* Kolom Harga Jual */
    .tabel-transaksi td:nth-child(4),
    .tabel-transaksi th:nth-child(5), /* Kolom Sisa Stok */
    .tabel-transaksi td:nth-child(5),
    .tabel-transaksi th:nth-child(6), /* Kolom Status */
    .tabel-transaksi td:nth-child(6),
    .tabel-transaksi th:nth-child(7), /* Kolom Aksi */
    .tabel-transaksi td:nth-child(7) {
        white-space: nowrap !important;
    }

    /* Ukuran gambar mini pada tabel di HP */
    .gambar-tabel-mini {
        width: 38px !important;
        height: 38px !important;
        border-radius: 4px !important;
    }

    /* Mengatur jarak tombol aksi di dalam tabel agar tidak terlalu menempel di HP */
    .btn-aksi-tabel {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;    /* Memberi sedikit celah jika tombol melipat */
    }
}