:root{
    --left-col: 360px;
    --bg-900: #030616;
    --bg-800: #061228;
    --card: #071627;
    --muted: #9fb0c6;
    --accent1: #00f3ff;
    --accent2: #8a5cff;
    --teal: #0ea5a0;
    --white: #e6eef8;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0,0,0,0.6);
    --danger: #ff4d4f;
    --outline-border: rgba(255,255,255,0.06);
    --danger-outline: rgba(255,77,79,0.28);
    
    /* VARIABEL BARU UNTUK STATUS */
    --status-active: #10b981; /* green */
    --status-expired: #f43f5e; /* red */
    --status-warning: #facc15; /* yellow */
    
    /* CHART COLORS */
    --chart-sales: #00f3ff;
    --chart-modal: #8a5cff;
    --chart-profit: #10b981;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;background:linear-gradient(180deg,var(--bg-900) 0%, var(--bg-800) 100%);color:var(--white);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* HILANGKAN SPINNER (Tombol panah) pada input type="number" */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Container */
.wrap{max-width:1200px;margin:18px auto;padding:18px}
.header{
    display:flex;
    justify-content:space-between; 
    align-items:flex-start;
    margin-bottom:6px;
    gap:12px;
    flex-wrap: wrap;
}

/* NAVIGASI PAGE BARU */
.page-nav {
    display: flex;
    gap: 8px;
    padding-top: 4px;
    margin-left: auto; 
}
.page-nav button.primary.active {
    box-shadow: 0 0 0 2px var(--accent1) inset;
    background: linear-gradient(90deg,var(--accent1),var(--accent2));
    color: #031014;
    font-weight: 700;
}
.page-nav button.primary:not(.active) {
    background: var(--bg-800);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white);
    box-shadow: none;
}
/* Memastikan page containers tersembunyi */
.page {
    width: 100%; 
    margin-top: 0;
}
#pageTwo {
    padding-top: 20px;
    padding-bottom: 20px;
    display: none; 
}
#pageTwo.active {
    display: block !important;
}


/* Grid (left column + right) - KRITIS */
#pageOne.grid {
    display:grid; 
    grid-template-columns:var(--left-col) 1fr; 
    gap:18px;
    align-items:start; 
}
.grid > .grid-col-2 {
    grid-column: 2; 
}

/* KPI row */
.kpi-row{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:12px;
    margin: 10px 0 12px 0;
    align-items:stretch;
    grid-column: 1 / -1; 
}
.kpi{
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.03);
    box-shadow:var(--shadow);
    background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
    min-height:86px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
}
.kpi-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.kpi-value{font-size:20px;font-weight:800;color:var(--white);display:flex;align-items:baseline;gap:6px}
.kpi-sub{font-size:12px;color:rgba(159,176,198,0.75);margin-top:6px}

/* Card */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:14px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.02);box-shadow:var(--shadow);overflow:visible}
.card h2{margin:0 0 10px 0;font-size:16px}

/* Form basics */
.fields{
    display:flex;
    flex-direction:column;
    gap: 16px; 
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.controls input{
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.04);
    background:linear-gradient(180deg,rgba(10,16,22,0.28),rgba(6,10,14,0.18));
    color:var(--white);outline:none;
    font-size:14px;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    height: 44px; 
    line-height: 20px; 
}
.field input::placeholder,.controls input::placeholder{color:rgba(230,238,248,0.25)}

/* Durasi Wrapper untuk custom input */
.durasi-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; 
}
.durasi-wrapper input {
    height: 44px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg,rgba(10,16,22,0.28),rgba(6,10,14,0.18));
}


/* WA Input (Ikon terintegrasi) */
.input-icon-group .input-icon-wrap{
    position: relative;
    display: flex; 
    align-items: center;
}
.input-icon-group .input-icon-wrap input{
    padding-left: 40px; 
}
.input-icon-group .input-icon-wrap svg{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%); 
    width: 18px;
    height: 18px;
    opacity: 0.9;
    color: var(--muted); 
    pointer-events: none; 
}

/* Currency Input (Prefix Rp) */
.field.currency-input {
    position: relative;
}
.field.currency-input .currency-prefix {
    position: absolute;
    left: 14px; 
    top: 50%;
    transform: translateY(-50%); 
    color: var(--muted);
    font-size: 14px; 
    opacity: 0.9;
}
.field.currency-input .currency-prefix + input {
    padding-left: 50px; 
}


/* Add catalog row */
.add-catalog{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom: 12px; 
    margin-top: -6px; 
}
.add-catalog input{
    flex:1 1 auto;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.04);
    background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.00));
    color:var(--white);
    height: 40px; 
}
.add-catalog .btn.small{
    height:40px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(90deg,var(--accent1),var(--accent2));
    color:#031014;
    font-weight: 600;
    border-radius: 10px; 
    font-size: 14px; 
    cursor: pointer; 
}

/* Buttons (Ukuran default 44px, ukuran small 40px) */
.form-actions{display:flex;gap:10px;margin-top:6px;align-items:center}
.btn{
    padding:10px 18px; 
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-weight:700;
    background:linear-gradient(90deg,var(--accent1),var(--accent2));
    color:#031014;
    position:relative;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(138,92,255,0.06);
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:44px; 
    transition: all .15s ease;
    font-size: 14px; 
    justify-content: center; 
}
.btn.small{
    padding:8px 12px; 
    font-size:13px; 
    border-radius:10px;
    height:40px; 
    line-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#031014}
.btn.secondary{background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:var(--white)}
.btn.outline{background:transparent;border:1px solid var(--outline-border);color:var(--white);box-shadow:none}
.btn.teal{background:linear-gradient(90deg,var(--teal),#06b6d4);color:#052726}
.btn[disabled]{opacity:0.6;cursor:not-allowed}

/* --- VALIDASI & ERROR MESSAGE --- */
.field .error {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
    display: none; 
}
.field.invalid input,
.field.invalid select,
.field.invalid .custom-select,
.field.invalid .input-icon-wrap input { 
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important; 
}
.field.invalid .error {
    display: block; 
}
/* --- END VALIDASI --- */

/* --- STATUS TABEL (New Feature) --- */
.status-active {
    color: var(--status-active);
    font-weight: 600;
}
.status-expired {
    color: var(--status-expired);
    font-weight: 600;
}
.status-warning {
    color: var(--status-warning);
    font-weight: 600;
}
/* --- END STATUS TABEL --- */

/* --- METRICS VIEW STYLING (NEW SECTION) --- */
.metrics-view {
    padding: 16px;
    margin-top: 18px; 
    margin-bottom: 30px;
}
.metrics-view h2 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--accent1);
    font-family: Poppins, sans-serif;
}
.metrics-view h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 12px;
}

.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dua kolom utama untuk chart */
    gap: 16px;
    margin-bottom: 20px;
}
.metric-chart-wide {
    grid-column: 1 / -1; /* Chart Sales Bulanan mengambil full width di dalam metric-grid */
}
.metric-chart-narrow {
    height: 320px; 
}
.top-buyers-table {
    margin-top: 20px;
}
.chart-container {
    height: 100%;
}

@media (max-width: 900px) {
    .metric-grid {
        grid-template-columns: 1fr; 
    }
    .metric-chart-narrow {
        height: 280px;
    }
}
/* --- END METRICS VIEW STYLING --- */


/* Controls, Table, Modal, Footer: Tetap sama */
.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.header-left{min-width:0;display:flex;flex-direction:column;justify-content:center}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;min-width:0}
.controls select,.controls .custom-select-wrapper,#searchInput{flex:0 0 auto;min-width:0}
.controls .custom-select-wrapper{flex-basis:260px;flex-shrink:0}
#searchInput{flex-basis:260px;flex-shrink:0}
.controls .export-btn{flex:0 0 auto;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:8px;background:transparent;border:1px solid rgba(14,165,160,0.12);color:var(--teal);box-shadow:none;transition:transform .12s,border-color .12s,background .12s}
.controls .export-btn svg{width:18px;height:18px;stroke:var(--teal)}
.controls .export-btn:hover{transform:translateY(-2px);border-color:rgba(14,165,160,0.28);background:rgba(14,165,160,0.03)}
#searchInput{background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.04);color:var(--white);padding:8px 10px;border-radius:10px;font-size:13px;outline:none;height:42px}
.table-wrap{overflow:auto;max-height:58vh;border-radius:8px;padding:6px 0}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:800px}
thead th{position:sticky;top:0;background:linear-gradient(180deg,rgba(8,14,18,0.9),rgba(11,19,27,0.9));padding:12px;text-align:left;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.03);z-index:2}
tbody td{padding:12px;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--white);vertical-align:middle}
tbody tr:nth-child(even){background:linear-gradient(90deg,rgba(255,255,255,0.01),rgba(255,255,255,0.0))}
tbody tr:hover{background:linear-gradient(90deg,rgba(0,243,255,0.02),rgba(138,92,255,0.01))}
.empty-state{padding:18px;text-align:center;color:var(--muted)}
table td,table th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
thead th:nth-child(1),tbody td:nth-child(1){width:18%;min-width:140px}
thead th:nth-child(2),tbody td:nth-child(2){width:18%;min-width:140px}
thead th:nth-child(3),tbody td:nth-child(3){width:10%;min-width:90px}
thead th:nth-child(4),tbody td:nth-child(4){width:8%;min-width:80px}
thead th:nth-child(5),tbody td:nth-child(5){width:9%;min-width:80px;text-align:right}
thead th:nth-child(6),tbody td:nth-child(6){width:9%;min-width:80px;text-align:right}
thead th:nth-child(7),tbody td:nth-child(7){width:9%;min-width:80px;text-align:right}
thead th:nth-child(8),tbody td:nth-child(8){width:7%;min-width:70px;text-align:center}
thead th:nth-child(9),tbody td:nth-child(9){width:6%;min-width:70px;text-align:right}
.action-btn{background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--white);padding:6px 8px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;margin-right:6px}
.action-btn:hover{transform:translateY(-2px);border-color:rgba(0,243,255,0.2)}
.modal{display:none;position:fixed;inset:0;z-index:1200;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.75);backdrop-filter:blur(2px)}
.modal-card{position:relative;background:linear-gradient(180deg,rgba(11,19,27,0.98),rgba(6,10,14,0.98));border-radius:12px;padding:16px;width:min(780px,95%);max-height:86vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,0.6);transform:translateY(6px);opacity:0;transition:transform .18s ease,opacity .18s ease}
.modal.open .modal-card{transform:translateY(0);opacity:1}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.modal-actions{display:flex;gap:8px;align-items:center}
.invoice-body{background:transparent;color:var(--white);padding:8px;border-radius:8px;outline:none}
.invoice-pre{white-space:pre-wrap;font-family:monospace;font-size:14px;color:var(--white)}
.toast{position:fixed;right:20px;bottom:20px;background:#071022;padding:12px 16px;border-radius:10px;color:var(--white);box-shadow:0 8px 22px rgba(0,0,0,0.6);display:none;z-index:9999}
:focus{outline:2px solid rgba(0,243,255,0.12);outline-offset:2px}
.field.invalid input{border-color:var(--danger);box-shadow:0 6px 20px rgba(255,77,79,0.06) inset}
.field .error{color:var(--danger);font-size:12px;margin-top:6px;display:block}
.custom-select-wrapper{position:relative;width:100%}
.custom-select{background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.04);color:var(--white);padding:10px 14px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;height:42px;box-sizing:border-box}
.custom-select .label{flex:1;text-align:left;font-size:14px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-select .caret{
    transition: transform .15s ease; 
    line-height: 0;
}
.custom-select.open .caret{
    transform: rotate(180deg); 
}
.custom-options{position:absolute;left:0;right:0;top:calc(100% + 8px);background:linear-gradient(180deg,var(--card),rgba(11,19,27,0.98));border:1px solid rgba(255,255,255,0.03);border-radius:10px;max-height:260px;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,0.6);z-index:1200;box-sizing:border-box}
.custom-option{padding:10px 12px;color:var(--white);cursor:pointer;font-size:14px;border-bottom:1px solid rgba(255,255,255,0.01)}
.custom-option:hover,.custom-option.active{background:linear-gradient(90deg,rgba(0,243,255,0.03),rgba(138,92,255,0.03));color:var(--white)}
.custom-option:last-child{border-bottom:none}
.custom-select-hidden{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;pointer-events:none !important;touch-action:none !important}
.footer.text-center {
    text-align: center;
    padding-top: 20px;
    font-size: 13px;
    color: var(--muted);
}
@media (max-width:1100px){
    .kpi-row{grid-template-columns:repeat(2,1fr)}
    .grid{grid-template-columns:1fr}
}
@media (max-width:680px){
    .table-header .controls{flex-direction:column;align-items:stretch}
    .table-header .controls>select,
    .table-header .controls>.custom-select-wrapper,
    #searchInput {
        flex: none;
        width: 100%;
        flex-basis: auto;
        flex-shrink: 1; 
    }
    .table-header .controls .export-btn{width:100%;align-self:flex-end}
}
@media (max-width:520px){
    .row{flex-direction:column}
    .form-actions{flex-direction:column;align-items:stretch}
    .btn{width:100%}
    .kpi-row{gap:8px;grid-template-columns:1fr}
}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}