/* styles.css */
:root {
    --excel-border: #d4d4d4;
    --excel-header-bg: #f3f2f1;
    --excel-alt-bg: #faf9f8;
    --primary-color: #217346; /* Excel Green */
}

body {
    font-family: 'Calibri', 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #ffffff;
    color: #333;
}

.header-container {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
}

h1 {
    font-size: 20px;
    margin: 0 0 15px 0;
    color: #2c3e50;
    text-transform: uppercase;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

select {
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid var(--excel-border);
    border-radius: 4px;
    outline: none;
}

.btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s;
}

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

.refresh-status {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
}

/* Excel-like Table Wrapper */
.table-wrapper {
    overflow: auto;
    max-height: calc(100vh - 180px);
    border: 1px solid var(--excel-border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 1400px; /* Ensure wide tables scroll instead of shrink */
    font-size: 13px;
}

th, td {
    border: 1px solid var(--excel-border);
    padding: 4px 6px; /*before 6px 8px;*/
    text-align: right; /* Default numeric align */
    white-space: nowrap;
}

th {
    background-color: var(--excel-header-bg);
    font-weight: bold;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Second header row must stick right below the first */
thead tr:nth-child(2) th {
    top: 33px; /* Adjust according to row height */
}

/* Sticky Column styling for row headers */
.sticky-col {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 11;
    text-align: left;
}

.second-col {
    left: 120px; /* Adjust based on Negeri column width */
    text-align: center;
}

th.sticky-col {
    z-index: 12;
    background-color: var(--excel-header-bg);
}

/* Data formatting overrides */
td:nth-child(1) { text-align: left; background-color: #fff; position: sticky; left: 0; z-index: 5; font-weight: bold; }
td:nth-child(2) { text-align: center; background-color: #fff; position: sticky; left: 120px; z-index: 5;}

/* Zebra striping to mimic subtle row lines */
tbody tr:hover {
    background-color: #e5f1ec;
}

/* Footer (Jumlah Row) Styling */
tfoot td {
    font-weight: bold;
    background-color: var(--excel-header-bg) !important;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

tfoot td:nth-child(1), tfoot td:nth-child(2) {
    z-index: 12;
}

.header-group {
  color: #000;
  font-weight: bold;
  border-bottom: 2px solid var(--excel-border);
}

/* Section header colors to match Excel template */
.header-group:nth-child(2) { background-color: #c9daf8; }   /* Keperluan 2026 – light blue */
.header-group:nth-child(3) { background-color: #d9ead3; }   /* Pengeluaran Cetakan Keseluruhan – light green */
.header-group:nth-child(4) { background-color: #d9ead3; }   /* % Siap – light green */
.header-group:nth-child(5) { background-color: #f4cccc; }   /* Baki Cetak – light pink */
.header-group:nth-child(6) { background-color: #f4cccc; }   /* % Belum Siap – same pink tone */

/* Keperluan – light blue */
thead tr:first-child th:nth-child(2),
thead tr:nth-child(2) th:nth-child(1),
thead tr:nth-child(2) th:nth-child(2),
thead tr:nth-child(2) th:nth-child(3),
thead tr:nth-child(2) th:nth-child(4),
tfoot td:nth-child(2),
tfoot td:nth-child(3),
tfoot td:nth-child(4),
tfoot td:nth-child(5) {
  background-color: #c9daf8 !important;
}

/* Pengeluaran + % Siap – light green */
thead tr:first-child th:nth-child(3),
thead tr:first-child th:nth-child(4),
thead tr:nth-child(2) th:nth-child(5),
thead tr:nth-child(2) th:nth-child(6),
thead tr:nth-child(2) th:nth-child(7),
thead tr:nth-child(2) th:nth-child(8),
thead tr:nth-child(2) th:nth-child(9),
thead tr:nth-child(2) th:nth-child(10),
thead tr:nth-child(2) th:nth-child(11),
thead tr:nth-child(2) th:nth-child(12),
thead tr:nth-child(2) th:nth-child(13),
tfoot td:nth-child(6),
tfoot td:nth-child(7),
tfoot td:nth-child(8),
tfoot td:nth-child(9),
tfoot td:nth-child(10),
tfoot td:nth-child(11),
tfoot td:nth-child(12),
tfoot td:nth-child(13),
tfoot td:nth-child(14) {
  background-color: #d9ead3 !important;
}

/* Baki Cetak + % Belum Siap – light pink */
thead tr:first-child th:nth-child(5),
thead tr:first-child th:nth-child(6),
thead tr:nth-child(2) th:nth-child(13),   /* This fixes "Cetakan" */
thead tr:nth-child(2) th:nth-child(14),   /* This fixes "Naskhah" */
thead tr:nth-child(2) th:nth-child(15),   /* This fixes "% Belum Siap" */
tfoot td:nth-child(15),
tfoot td:nth-child(16),
tfoot td:nth-child(17) {
  background-color: #f4cccc !important;
}

thead tr:first-child th {
    height: 28px; /* keeps top header compact */
    line-height: 28px;
}

thead tr:nth-child(2) th {
    height: 28px;
    line-height: 28px;
    top: 28px; /* aligns second header row directly below the first */
}