/* /css/theme.css 
Application Header          : .main-header-hmy
Application Main title      : .app-title-hmy 
Application Sec title       : .app-sec-title-hmy
Date bar                    : .date-bar-hmy
Date text                   : date-text-hmy
Back button                 : .left-arrow-hmy
Body background color       : bg-body
Group box                   : .groupbox-hmy
Text Field title            : .field-title-hmy
Text Field                  : .form-control (dng properties custom)
Date Selection              : .flatpickr (dng properties custom)
Check Box & Radio box       : .form-check-input (dng properties custom)
button                      : .btn-hmy
*/

:root {
    --bg-full-black: #000000;
    --bg-body: #262626;
    --bg-group-box: #303030;
    --accent-border: #3a0d0d;
    --accent-border-hover: #5a1515;
    --accent-glow: #8b1a1a;

    /* Tipografi */
    --text-main-color: beige;
    --text-sec-color: #FFA500;
    --text-muted-color: #888888;
    --text-field-title-color: orange;
    --text-field-text-color: beige;
    --text-field-border-color: orange;
    --text-field-txsize: 13px;
    --text-field-place-holder-color: #777;
    --text-field-bg-color: #212121;

    /* Tombol */
    --btn-bg-top: #141414;
    --btn-bg-bottom: #0000;
    --btn-border: #000000;
    --btn-text: #ffffff;
    --radius-input: 4px;

    /* Radius & Shadow */
    --radius-card: 16px;
    --radius-input: 8px;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 10px var(--accent-glow);

    /* Menu selection */
    --menu-hmy: orange;

    /* Komponen Dropdown */
    --bg-dropdown: #212121;
    --border-dropdown: #333333;
    --radius-dropdown: 8px;
    --dropdown-hover-start: orange;
    --dropdown-hover-end: #000000;
    --dropdown-hover-text: #ffffff;
}

/* Reset Global & Set Tema Dasar */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Main Header dan left arrow color */
.app-title-hmy {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main-color) !important;
    line-height: 1.3;
}

.app-sec-title-hmy {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sec-color) !important;
    line-height: 1.3;
}

.main-header-hmy {
    background: var(--bg-full-black);
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.date-bar-hmy {
    background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 100%);
    padding: 6px 12px;
    text-align: right;
}

.date-text-hmy {
    color: #ffffff;
    font-style: italic;
    font-size: 15px;
}

.left-arrow-hmy {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    margin-right: 10px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.left-arrow-hmy:hover {
    color: var(--color-accent);
}

.left-arrow-hmy::before {
    content: "\F12C";
    font-family: "bootstrap-icons";
}

.header-icon-hmy {
    cursor: pointer;
    margin-right: 12px;
    font-size: 28px;
    color: white;
}

.header-icon-hmy::before {
    content: "\F302";
    font-family: "bootstrap-icons";
}

.groupbox-hmy {
    background: var(--bg-group-box);
    border: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 16px;
    margin: 12px;
}

/* Text Field */
.field-title-hmy {
    color: var(--text-field-border-color);
    font-size: 15px;
    font-weight: 300;
    margin-bottom: 5px;
}

.form-control {
    background: var(--text-field-bg-color);
    border-radius: 4px;
    color: var(--text-field-text-color);
    border: 1px solid transparent;
}

.form-control:focus {
    border-color: var(--text-field-border-color);
    border-width: 1px;
    box-shadow: none;
}

.form-control.login {
    padding: 8px 16px 8px 36px;
    margin: 0;
}

.form-control::placeholder {
    color: var(--text-field-place-holder-color);
    font-size: var(--text-field-txsize);
}

.text-field-icon-left-hmy {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-field-place-holder-color);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* Date */
.date-btn-hmy {
    background: var(--text-field-bg-color);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    color: var(--text-field-text-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    flex: 1;
}

.date-btn-hmy:hover {
    background: #333;
}

.date-sd-label-hmy {
    color: var(--text-field-text-color);
    font-size: 15px;
    padding: 0 8px;
    align-self: center;
}

.flatpickr-calendar {
    background: rgba(0, 0, 0, 0.25) !important;
    background: var(--text-field-bg-color) !important;

    /* Efek buram (glassmorphism) agar teks di belakang kalender tidak mengganggu */
    backdrop-filter: blur(8px);

    /* Menghilangkan garis tepi/shadow bawaan jika ada */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.flatpickr-day.today {
    border-color: #ff9800 !important;
    /* Warna garis tepi oranye */
    color: #ff9800 !important;
    /* Warna teks tanggal oranye */
}

.flatpickr-day.today:hover {
    background: #ff9800 !important;
    color: #ffffff !important;
}

/* Check Box */
.form-check-input {
    border-color: orange !important;
    background-color: transparent !important;
    cursor: pointer;
}

.form-check-input:focus {
    border-color: orange !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.25) !important;
}

/* --- Checkbox Checked State (Centang Orange) --- */
.form-check-input[type="checkbox"]:checked {
    background-color: transparent !important;
    border-color: orange !important;
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='orange' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; */
}

/* --- Radio Box Checked State (Titik Bulat Orange) --- */
.form-check-input[type="radio"]:checked {
    background-color: transparent !important;
    border-color: orange !important;
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.5' fill='orange'/%3e%3c/svg%3e") !important; */
}


/* 1. Style untuk kotak background dropdown-nya */
.form-select {
    background: #1a1a1a;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    color: beige;
    border-radius: 8px;
}

.form-select:focus {
    background-color: #2a2a2a;
    border-color: rgba(180, 0, 0, 0.7);
    color: #ffffff;
    color: beige;
    box-shadow: none;
}

.dropdown-menu-custom {
    background-color: var(--bg-dropdown) !important;
    border-radius: var(--radius-dropdown) !important;
    border: 1px solid var(--border-dropdown) !important;
}

/* 2. Style khusus untuk item saat di-hover/focus DI DALAM kotak custom tersebut */
.dropdown-menu-custom .dropdown-item:hover,
.dropdown-menu-custom .dropdown-item:focus {
    /* background: linear-gradient(135deg, var(--dropdown-hover-start), var(--dropdown-hover-end)) !important; */
    background: var(--menu-hmy);
    color: var(--dropdown-hover-text) !important;
}

/* BUTTONS: Efek 3D Outset */
.btn-hmy {
    background: linear-gradient(to bottom, var(--btn-bg-top), var(--btn-bg-bottom));
    color: var(--btn-text);
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.1s;
    cursor: pointer;
}

/* Hover State */
.btn-hmy:hover:not(:disabled),
.btn-hmy:hover {
    /* background: linear-gradient(to bottom, #5a5a5a 0%, #404040 100%); */
    background: linear-gradient(to bottom, #141414 0%, #0000 100%);
    color: var(--btn-text);
}

/* Active/Click State */
.btn-hmy:active:not(:disabled),
.btn-hmy:active {
    /* background: #2b2b2b; */
    background: #141414;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
    border-bottom-color: #151515;
    transform: translateY(1px);
}

/* Disabled State */
.btn-hmy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border: none;
}

.no-shadow {
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    border-bottom: 0.25px solid rgba(0, 0, 0, 0.50) !important;
}

/* ============================================================
   LAPORAN (report pages) - layout dasar dipakai bersama oleh
   semua lapXxx.html (lappenjualan, lappenjualanbermasalah, dst).
   Cukup tambahkan <body class="report-page"> dan
   <div class="report-container">...</div> di HTML masing2 laporan.
   ============================================================ */

/* Body laporan: flex column penuh layar, header apa adanya,
   sisanya diberikan ke .report-container (tanpa perlu tebak angka px) */
body.report-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    /* dvh: ikut menyesuaikan saat browser chrome/toolbar hp muncul-hilang */
    overflow: hidden;
}

/* Container tabel: bisa discroll ke segala arah, mengisi SISA tinggi layar */
.report-container {
    margin: 12px;
    border-radius: 10px;
    overflow: auto;
    flex: 1;
    min-height: 0;
    /* wajib, supaya flex child boleh mengecil & scroll internal jalan */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #141414;
}

table.report-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    color: var(--text-field-text-color);
    font-size: 13px;
}

table.report-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, var(--text-sec-color) 0%, #1a1a1a 100%);
    color: #000000;
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    z-index: 2;
}

table.report-table tbody td {
    padding: 9px 14px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

table.report-table tbody tr:nth-child(odd) {
    background: #171717;
}

table.report-table tbody tr:nth-child(even) {
    background: #1e1e1e;
}

table.report-table tfoot td {
    position: sticky;
    bottom: 0;
    padding: 10px 14px;
    font-weight: 700;
    color: var(--menu-hmy);
    background: #0d0d0d;
    border-top: 2px solid var(--menu-hmy);
    white-space: nowrap;
}

table.report-table thead th.text-end-num {
    text-align: right;
}

.text-end-num {
    text-align: right;
}

.empty-state {
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 24px;
    font-size: 14px;
}

/* Bar no bon dan tanggal */
/* Bar No Bon (kiri) & Tanggal (kanan) */
.info-bar-hmy {
    background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 100%);
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.no-bon-text-hmy {
    color: #ffffff;
    font-style: italic;
    font-size: 15px;
}

/* Teks Nama Barang di samping label Barcode (sama seperti penjualan) */
.barcode-item-name {
    color: var(--text-sec-color, #FFA500);
    font-weight: 700;
    font-size: 14px;
    margin-left: 10px;
    letter-spacing: 0.3px;
    display: inline-block;
    text-align: right;
}

.label-right {
    text-align: right;
    display: block;
    width: 100%;
}


/* Grid */
.barang-list {
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.barang-item-row {
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Baris Genap (2, 4, 6...) dibuat sedikit lebih gelap */
.barang-item-row:nth-child(even) {
    background: rgba(0, 0, 0, 0.35);
    /* latar belakang gelap/hitam transparan */
}

/* Baris Ganjil (1, 3, 5...) dibuat agak terang */
.barang-item-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.06);
    /* latar belakang putih transparan tipis */
}

.barang-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.barang-item-id {
    color: var(--text-sec-color);
    font-weight: 700;
    font-size: 16px;
}

.barang-item-qty {
    font-size: 15px;
    font-weight: 700;
}

.barang-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.barang-item-nama {
    color: var(--text-field-text-color);
    font-size: 14px;
}

.barang-item-del {
    background: transparent;
    border: none;
    color: #c0392b;
    font-size: 16px;
    padding: 2px 6px;
    cursor: pointer;
}

.empty-list-hmy {
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 20px;
    font-size: 14px;
}