body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Header Container */
.header-container {
    padding: 1px 1px 0 1px;
    margin: 0;
    padding: 1px 14px;
}

/* Flex row */
.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    flex-wrap: wrap;
    width: 99%;
    box-sizing: border-box;
    padding: 1px 1px 0 2px;
}

/* Logo Column */
.logo-column {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-column img {
    width: auto;
    height: clamp(40px, 7vw, 120px); /* Tinggi logo fleksibel */
}

/* Company Info Column */
.company-column {
    flex: 1;
    text-align: center;
}

/* Judul Perusahaan */
.company-info h1 {
    background-color: #4a90e2;
    color: black;
    font-size: clamp(1rem, 5vw, 2rem);
    margin: 0;
    padding: 4px 10px;
    font-weight: bold;
}

/* Tagline */
.tagline {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    margin: 5px 0;
    margin-bottom: 4px; /* atau 2px jika mau lebih rapat */
}

/* Alamat */
.address {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    margin-bottom: -7px;
}

/* Garis bawah */
.header-line {
    border: none;
    border-top: 1px solid #000;
    margin: 5px 0 0 0;
}

/* Tables */
/* Table Styling */
.tableReference {
    width: 100%;
    border-collapse: collapse;
    background-color: #f8f9fa; /* Warna background yang lebih profesional */
    border-radius: 8px;
    overflow: hidden;
}

/* Header */
.tableReference th {
    background-color: #343a40;
    color: white;
    padding: 10px;
    font-size: 1em;
    border: 1px solid black;
    text-align: center;
}

/* Border dan shadow tambahan */
.tableContainer {
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.tableContainer .description {
    text-align: left;
}
.tableContainer .qty, .tableContainer .no {
    text-align: center;
}
.tableContainer .unit-price {
    display: flex;
    justify-content: space-between;
}
.tableContainer .unit-price .symbol {
    text-align: left;
    min-width: 40px;
}
.tableContainer .unit-price .value {
    text-align: right;
    flex-grow: 1;
}

/* Footer */
.footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
}
.footer .conditions {
    width: 60%;
}
.footer .signature {
    width: 35%;
    text-align: center;
}
.signature img {
    width: 210px;
    height: auto;
    max-width: 100%;
}

/* Bottom Text */
.bottom-text {
    margin-top: 20px;
    width: 100%;
    background: white;
    padding: 10px;
    border-top: 1px solid black;
    text-align: center;
    font-weight: bold;
    font-family: 'Calibri Light', sans-serif;
}

/* Print-specific Styles */
@media print {
    body {
        margin: 0;
        padding: 0;
    }
    @page {
        size: A4;
        margin: 0mm 1mm 3mm 0mm;
        page-break-before: always;
    }
    .header-container, .form-title {
        page-break-before: always;
    }
    .bottom-text {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        padding: 10px;
        border-top: 1px solid black;
        font-weight: bold;
        text-align: center;
    }
}

/* Small Adjustments */
td {
    padding: 5px;
}
td:nth-child(4), td:nth-child(5) {
    text-align: right;
}

/* Additional Adjustments */
.tableContainer p {
    font-size: 13px;
}
#priceTable th, #priceTable td {
    text-align: center;
    padding: 3px;
}

#priceTable td.units {
    width: 50px; /* This ensures the column is wide enough for 5 characters */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
/* Add basic styling for table and popup */
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: 8px;
    text-align: left;
    border: 1px solid #ccc;
}
/* Set the column widths */
th:nth-child(2), td:nth-child(2) { /* Description Column */
    width: 40%; /* Set width for Description column */
}
th:nth-child(3), td:nth-child(3) { /* Qty Column */
    width: 10%; /* Set width for Qty column */
}
th:nth-child(4), td:nth-child(4) { /* Units Column */
    width: 10%; /* Set width for Units column */
}
th:nth-child(5), td:nth-child(5) { /* Unit Price Column */
    width: 20%; /* Set width for Unit Price column */
    text-align: left; /* Align "Rp." to the left */
}
th:nth-child(6), td:nth-child(6) { /* Amount Column */
    width: 20%; /* Set width for Amount column */
    text-align: left; /* Align "Rp." to the left */
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 8px;
    z-index: 1000;
    width: 400px;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  }
.popup-content {
    padding: 20px;
  }
  
  .close-btn {
    float: right;
    font-size: 22px;
    font-weight: bold;
  }
.qty-input {
    width: 60px; /* Set width to accommodate 4 digits (0000) */
    text-align: right; /* Align text to the right */
}
/* Align the value to the right, keeping the "Rp." aligned to the left */
/* Ensure correct alignment */
.currency-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns content to the right */
    width: 100%;
}

/* Ensures "Rp." stays fixed */
.currency {
    flex-shrink: 0;
    font-weight: bold;
    margin-right: 5px;
}

/* Ensures numbers are right-aligned */
.currency-value {
    text-align: right;
    min-width: 120px; /* Match width for consistency */
    display: inline-block;
}

/* Fix for Amount Column */
.amount {
    text-align: right; /* Ensure everything is aligned */
    padding-right: 10px; /* Add spacing for readability */
    white-space: nowrap; /* Prevents wrapping */
}

/* Optional: Adjust other column styles if needed */
.sTotal, .valuta, .gTotal {
    text-align: left;
}

/* Style for "Sub Total, VAT (11%), and Grand Total" */
/* Existing styles for Unit Price & Amount (DO NOT CHANGE) */
.currency-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.currency {
    flex-shrink: 0;
    font-weight: bold;
    margin-right: 5px;
}

.currency-value {
    text-align: right;
    min-width: 120px;
    display: inline-block;
}

.amount {
    text-align: right;
    padding-right: 10px;
    white-space: nowrap;
}

/* New styles for Sub Total, VAT (11%), and Grand Total */
.total-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Aligns "Rp." left and value right */
    width: 100%;
}

.total-currency {
    flex-shrink: 0;
    font-weight: bold;
    margin-right: auto; /* Ensures "Rp." stays on the left */
}

.total-value {
    text-align: right;
    min-width: 120px;
    display: inline-block;
    font-weight: bold;
}
@media print {
    thead {
        display: table-header-group;
    }

    tbody tr {
        page-break-inside: avoid; /* Hindari memotong baris di tengah */
    }

    .new-page {
        page-break-before: always; /* Mulai halaman baru */
        margin-top: 150px; /* Sesuaikan agar mulai setelah header */
    }
    .new-page:not(:first-of-type) {
        page-break-before: always;
        margin-top: 150px;
    }
}


@media print {
    @page {
        size: A4;
        margin: 0.2cm;
    }

    .header-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        background: white;
        padding: 10px;
    }
    tr { 
        page-break-inside: avoid; 
    }
    
    .page-break {
        page-break-before: always;
    }

    .table-container {
        page-break-after: always;
        margin-bottom: 40px; /* Beri ruang untuk footer */
    }
    @media print {
        .bottom-text {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: white;
            padding: 10px;
            border-top: 1px solid black;
            font-weight: bold;
            text-align: center;
        }
    }    
    /* Hindari duplikasi header di halaman pertama */
    body::before {
        content: "";
        display: block;
        height: 150px; /* Sesuaikan dengan tinggi header */
    }

    /* Hindari duplikasi footer di halaman terakhir */
    body::after {
        content: "";
        display: block;
        height: 100px; /* Sesuaikan dengan tinggi footer */
    }
}

/* Branding (judul perusahaan) harus berada di tengah */
.branding {
    flex-grow: 1;
    text-align: center;
}
/* Pastikan hamburger tetap di posisi semula */
/* Hamburger button positioning and style */
.hamburger {
    cursor: pointer;
    position: fixed;
    top: 18px;
    right: 36px;
    width: 50px;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 6px 8px rgba(241, 7, 7, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Styling for the toggler icon (hamburger bars) */
.toggler-icon {
    width: 30px;
    height: 4px;
    background: linear-gradient(263deg, rgba(252, 74, 74, 1) 0%, rgba(0, 212, 255, 1) 100%);
    position: absolute;
    transition: all 0.3s ease-in-out;
}

/* Top, middle, and bottom bars in hamburger */
.top-bar {
    transform: translateY(-10px);
}

.middle-bar {
    opacity: 1;
}

.bottom-bar {
    transform: translateY(10px);
}

/* Transform hamburger icon into a cross when active */
.hamburger.active .top-bar {
    transform: rotate(45deg);
    background-color: red;
}

.hamburger.active .middle-bar {
    opacity: 0;
}

.hamburger.active .bottom-bar {
    transform: rotate(-45deg);
    background-color: red;
}

/* Style for the hamburger menu */
.hamburger-menu {
    display: none; /* Initially hidden */
    position: absolute;
    top: 1px;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 22px;
    box-shadow: 0px 6px 8px rgba(241, 7, 7, 0.1);
    width: 130px;
    padding: 1px;
    z-index: 999;
}

/* Show the menu when active */
.hamburger-menu.show {
    display: block; /* Display menu when active */
}

/* Styling for each menu item */
.hamburger-menu ul li {
    list-style-type: none;
    padding: 12px 0;
}

/* Style for the links in the menu */
.hamburger-menu ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

/* Change color of menu items on hover */
.hamburger-menu ul li a:hover {
    color: #3498db;
}

/* Media query for responsiveness */
@media (max-width: 768px) {
    .hamburger {
        right: 15px;
        top: 10px;
    }

    .hamburger-menu {
        width: 100%; /* Make menu take up full width on smaller screens */
    }

    .hamburger-menu ul {
        padding: 0;
    }

    .hamburger-menu ul li {
        text-align: center; /* Center menu items */
    }

    .hamburger-menu ul li a {
        padding: 12px;
        font-size: 16px; /* Adjust font size for mobile */
    }
}

/* For small screens like iPhone */
@media (max-width: 480px) {
    .hamburger {
        width: 45px;
        height: 35px; /* Smaller hamburger button for tiny screens */
    }

    .hamburger-menu {
        top: 50px; /* Adjust menu position */
    }

    .hamburger-menu ul li a {
        padding: 10px; /* Adjust padding */
        font-size: 14px; /* Slightly smaller font size */
    }
}

/* For screens up to 480px (Mobile Phones) */
@media (max-width: 480px) {
    .company-info h1 {
        font-size: 1.8em;
    }

    .tagline {
        font-size: 1em;
    }

    .address {
        font-size: 0.8em;
    }

    .hamburger {
        width: 25px;
        height: 20px;
    }

    .hamburger-menu a {
        font-size: 1em;
    }
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .header-container {
        flex-direction: row;
        align-items: center;
    }

    .branding h1 {
        font-size: 1.2em;
    }

}
/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .header-container {
        flex-direction: row; /* Pastikan tetap horizontal */
        align-items: center;
    }

    .branding h1 {
        font-size: 1.2em;
    }

}

/* Container tombol */
.button-container {
    display: flex;
    justify-content: center; /* Pusatkan tombol */
    gap: 10px; /* Jarak antar tombol */
    width: 50%;
    max-width: 50%; /* Pastikan container tidak terlalu kecil */
    margin: 15px auto; /* Pusatkan di dalam form */
}

/* Kolom tombol */
.button-column {
    flex: 1; /* Bagi rata setiap kolom */
    text-align: center; /* Pusatkan tombol di dalam kolom */
}

/* Tombol */
.button-container .btn {
    width: 100%; /* Pastikan tombol mengikuti ukuran kolom */
    max-width: 60px; /* Batasi lebar tombol agar tidak terlalu besar */
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background 0.3s ease;
}

/* Warna tombol */
.insert { background-color: #28a745; color: white; }
.update { background-color: #ffc107; color: black; }
.search { background-color: #007bff; color: white; }
.delete { background-color: #dc3545; color: white; }

/* Efek hover */
.insert:hover { background-color: #218838; }
.update:hover { background-color: #e0a800; }
.search:hover { background-color: #0056b3; }
.delete:hover { background-color: #c82333; }

/* Container Form */
.form-container {
    max-width: 100%;
    overflow-x: auto; /* Supaya bisa scroll horizontal di layar kecil */
    padding: 10px;
    box-sizing: border-box;
}

/* Container untuk scrolling */
.form-container {
    max-width: 100%;
    overflow-x: auto; /* Aktifkan scrolling di layar kecil */
    padding: 10px;
    box-sizing: border-box;
}

/* Tabel */
.tableReference {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Pastikan tabel tetap proporsional */
}

/* Header & Sel Tabel */
.tableReference th,
.tableReference td {
    border: 1px solid black;
    padding: 8px;
    font-size: 1em;
    text-align: center;
}

/* Ukuran Kolom untuk Desktop */
.tableReference .quoteDate,
.tableReference .quoteD { width: 15%; }

.tableReference .dueDate,
.tableReference .dueD { width: 15%; }

.tableReference .quoteCode,
.tableReference .quoteC { width: 30%; }

.tableReference .projectRemark,
.tableReference .projectR { width: 30%; }

.tableReference .projectType,
.tableReference .projectT { width: 20%; }

/* Ukuran textbox untuk Desktop */
.tableReference #quote_date { width: 50%; }

.tableReference #due_date { width: 50%; }

.tableReference #quote_code { width: 80%; }

.tableReference #project_remark { width: 90%; }

.tableReference #type { width: 80%; }

/* Responsif untuk Layar Kecil (HP & Tablet) */
@media (max-width: 768px) {
    .form-container {
        overflow-x: auto; /* Scroll horizontal jika layar kecil */
    }

    .tableReference {
        display: block;
        white-space: nowrap;
        overflow-x: auto;
    }

    .tableReference th,
    .tableReference td {
        font-size: 0.9em;
        padding: 6px;
    }

    .tableReference input {
        width: 100%;
        padding: 6px;
        font-size: 0.9em;
    }
}

/* Responsif untuk HP (Lebar < 480px) */
@media (max-width: 480px) {
    .tableReference {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .tableReference th,
    .tableReference td {
        font-size: 0.8em;
        padding: 5px;
    }

    .tableReference input {
        font-size: 0.8em;
        padding: 4px;
    }
}
/* Search Icon   */
.form-container.input-container {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .form-container.input-container input {
    padding-right: 30px; /* ruang untuk ikon */
  }
  
  .form-container.search-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: #666;
  }
  .input-wrapper {
    display: flex;
    align-items: center;
  }
  
  .input-wrapper input {
    flex: 1;
    padding-right: 30px; /* Jaga jarak dengan ikon */
  }
  
  .search-icon {
    margin-left: 5px;
    cursor: pointer;
    color: #666;
  }