/*==============================
=== PC/LAPTOP STYLE/WIDE VIEW ==
===============================*/

h2, h3 {
    font-size: 16px;
}
.rab-no {
    text-align: right;
}
/* Header scroll horizontal (judul-ahsp) */
header.judul-ahsp {
    overflow-x: auto;
    white-space: nowrap;
}
.judul-ahsp {
    margin-top: 80px;
}
.judul-ahsp > h1 {
    font: bold 2rem calibri, arial, sans-serif;
}

#input-ahsp {
	width: 100%;
}
/* JUDUL AHSP - Tetap 2 kolom + scroll jika overflow */
.judul-ahsp .row {
    flex-wrap: nowrap;         /* cegah turun ke 1 kolom */
    overflow-x: auto;          /* scroll horizontal */
    overflow-y: hidden;
    white-space: nowrap;
    gap: 1rem;
    padding-bottom: 0.5rem;
    width: 99%;
}

/* Elemen dalam row: pastikan minimal 2 kolom */


/* Scroll bar halus (elegan) */
.judul-ahsp .row::-webkit-scrollbar {
    height: 6px;
}

.judul-ahsp .row::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.judul-ahsp .row::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 10px;
}

/* === TABLE dynamic-ahsp === */

/* Desktop: 100%, tidak scroll */
.table-dynamic {
    width: 100%;
}

/* Mobile table scroll */
@media (max-width: 576px) {
    .table-dynamic-wrapper {
        overflow-x: auto;
        width: 100%;
    }
    .table-dynamic {
        min-width: 750px;  /* ukuran minimum agar tetap proporsional */
    }
}
/* Pengaturan lebar kolom judul ahsp */
.nama-pekerjaan {
    flex: 0 0 15%;
    max-width: 28%;
}

.t-nama-pekerjaan {
    flex: 0 0 82%;
    max-width: 82%;
}
.t-nama-pekerjaan > p > input {
	width: 98%;
}

/* Pastikan tetap 2 kolom */
.judul-ahsp .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 1rem;
    padding-bottom: 0.3rem;
}

/* Scroll elegan */
.judul-ahsp .row::-webkit-scrollbar {
    height: 6px;
}

.judul-ahsp .row::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 10px;
}

.judul-ahsp .row::-webkit-scrollbar-track {
    background: #e5e5e5;
}

/* Area item-rab full width desktop */
#item-rab {
    width: 100%;
}
table td, th{
    padding: 0;
}
input {
    padding: 0;
    margin: 0;
}

/* Table SUMMARY responsive */
#summary {
    width: 100%;
    overflow-x: auto;
}

#simpulan {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;      /* agar tetap scroll saat mobile */
}

.th-summary,
.td-summary {
    text-align: left;
    border: 1px solid #dee2e6;
}

.th-summary {
    background: #0d6efd;
    color: white;
    font-weight: 600;
}

.td-desc {
    width: 40%;
}
.td-sat {
    text-align: center;
}
.judul-tabel-ahsp th {
    text-align: center;
}
.no-sub-ahsp {
    text-align: center;
}
.t-kode {
    width: 5%;
}
.t-uraian {
    width: 30%;
    text-align: left;
}
.t-koef {
    width: 4%;
    text-align: right;
}
.t-koef th {
    text-align: center;
}
.t-harga {
    width: 5%;
    text-align: right;
}
.t-harga th {
    text-align: center;
}
.jumlah-harga {
    text-align: right;
    padding-right: 20px;
}
.t-jum-harga {
    width: 5%;
    text-align: right;
}
.t-jum-harga th {
    text-align: center;
}
.t-satuan {
    width: 5%;
    text-align: center;
}

.table-dynamic {
    table-layout: fixed;
    width: 100%;
}

/* --- INPUT DALAM TABEL --- */
.table-dynamic td input {
    width: 100%;
    border: none;
    padding: 0px 2px;
    background-color: transparent;
}
.table-dynamic td, tr {
    padding: 0 2px;
}
.table>:not(caption)>*>* {
    padding: 0 .5rem;
}

.table-dynamic td,
.table-dynamic th {
    white-space: nowrap;
}


@media(max-width: 768px) {
    .table-dynamic-wrapper {
        overflow-x: auto;
        width: 100%;
    }

    .table-dynamic {
        min-width: 900px;
    }
}

//*==============================
======== PERLU PERBAIKAN =======
===============================*/

/* Highlight muncul ketika item-ahsp ditampilkan */
.ahsp-highlight {
    animation: fadeFlash 0.8s ease-in-out;
}

@keyframes fadeFlash {
    0%   { background-color: #fff4a8; }
    100% { background-color: transparent; }
}

/* Tambah ikon ▼ / ▲ ke item-rab */
.item-rab {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}

.item-rab::after {
    content: "▼";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

.item-rab.rab-open::after {
    content: "▲";
}


/* =============================
   TABEL PROFESIONAL ESTIMATOR
   ============================= */

/* GENERAL RESET */
#summary table,
#dynamic-ahsp {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

/* STICKY HEADER */
#summary th,
#dynamic-ahsp th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--th-bg, #f8f9fa);
    backdrop-filter: blur(6px);
}

/* HEADER STYLING */
#summary th,
#dynamic-ahsp th {
    font-weight: 600;
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid rgba(0,0,0,0.15);
}

/* BODY CELL */
#summary td,
#dynamic-ahsp td {
    padding: 0px 10px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* STRIPED ROW */
#dynamic-ahsp tr:nth-child(even),
#summary tr:nth-child(even) {
    background: rgba(0,0,0,0.03);
}

/* HOVER */
#dynamic-ahsp tr:hover,
#summary tr:hover {
    background: #D4F7D4;
}

/* RIGHT ALIGN FOR NUMBERS */
#summary-harsat,
#summary-total {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* WRAP Uraian Secara Rapi */
.t-uraian,
.td-desc {
    white-space: normal !important;
    line-height: 1.3;
}

/* RESPONSIVE SCROLL – MOBILE */
.table-responsive,
.table-responsive-md {
    overflow-x: auto;
    scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar,
.table-responsive-md::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb,
.table-responsive-md::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

/* BORDER MINIMALIS */
#summary td, #dynamic-ahsp td {
    border-left: 0;
    border-right: 0;
}

/* BORDER RING */
.box-area-input {
    border: 1px solid rgba(0,0,0,0.15) !important;
}

/* HIGHLIGHT ROW KETIKA item-rab DIKLIK */
.item-rab {
    transition: background 0.3s ease;
    cursor: pointer;
}

.item-rab:active,
.item-rab.rab-open {
    background: rgba(0, 132, 255, 0.15) !important;
}

/* MODE GELAP OTOMATIS */
body.dark-mode #summary th,
body.dark-mode #dynamic-ahsp th {
    background: #2b2b2b !important;
    color: #f1f1f1 !important;
    border-color: #444;
}

body.dark-mode #summary td,
body.dark-mode #dynamic-ahsp td {
    color: #ddd;
    border-color: #444;
}

body.dark-mode .box-area-input {
    border-color: #555 !important;
}
#summary,
#dynamic-ahsp-wrapper {
    margin-top: 10px;
}


//*==============================
======== SMARTPHONE VIEW =======
===============================*/

@media (max-width: 576px)  {
    #main-content {
        width: 100% !important;
        overflow: hidden;
        overflow-x: scroll;
    }
    .box-are-input {
        padding: 0px;
    }
    #item-rab {
        margin: 0px;
        padding: 0px;
    }
    .p-3{
        padding: 0px;
    }

}