/* =========================
FORM PEMBUKUAN
========================= */
.smitacs-pos-form {
    background: #fff;
    padding: 15px;
    border: 1px solid #ccd0d4;
    margin-bottom: 20px;
}

/* =========================
FORM ROW (VERSI FLEX + RESPONSIVE)
========================= */
.smitacs-pos-form-row {
    display: flex;
    flex-wrap: wrap; /* 🔥 penting */
    align-items: center;
    margin-bottom: 10px;
    gap: 15px;
}

/* label horizontal */
.smitacs-pos-form-row label {
    width: 120px;
    font-weight: 600;
}

/* input fleksibel */
.smitacs-pos-form-row input {
    flex: 1;
    padding: 5px;
}

/* =========================
FORM BOX (KOTAK VERSI VERTICAL)
========================= */
.smitacs-pos-form-box {
    width: 500px;
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    padding: 15px;
}

/* versi column (override aman) */
.smitacs-pos-form-box .smitacs-pos-form-row {
    flex-direction: column;
    align-items: flex-start;
}

.smitacs-pos-form-box .smitacs-pos-form-row label {
    width: 100%;
    margin-bottom: 3px;
}

.smitacs-pos-form-box .smitacs-pos-form-row input {
    width: 100%;
}

/* =========================
CONTAINER
========================= */
.smitacs-pos-container {
    display: flex;
    justify-content: flex-start;
}

/* =========================
INFO BOX
========================= */
.smitacs-pos-info {
    background: #f6f7f7;
    padding: 10px;
    border-left: 4px solid #2271b1;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* =========================
TAB PEMBUKUAN (CONTAINER)
========================= */
.smitacs-pos-tabs {
    flex: 0 0 100%; /* 🔥 WAJIB */
    width: 100%;
    display: block;
}

/* =========================
TAB BUTTON WRAPPER
========================= */
.smitacs-pos-tab-buttons {
    display: flex;
    flex-wrap: wrap; /* 🔥 WAJIB */
    gap: 0;
    border-bottom: 2px solid #ccd0d4;
}

/* =========================
TAB BUTTON
========================= */
.smitacs-pos-tab-buttons button {
    background: #f1f1f1;
    border: 1px solid #ccd0d4;
    border-bottom: none;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

/* hover */
.smitacs-pos-tab-buttons button:hover {
    background: #e2e2e2;
}

/* ACTIVE TAB */
.smitacs-pos-tab-buttons button.active {
    background: #fff;
    border-top: 2px solid #2271b1;
    border-left: 1px solid #ccd0d4;
    border-right: 1px solid #ccd0d4;
    border-bottom: 2px solid #fff;
    color: #2271b1;
    font-weight: 600;
}

/* =========================
TAB CONTENT
========================= */
.smitacs-pos-tab-content {
    display: none; /* tetap dipakai JS */
    border: 1px solid #ccd0d4;
    padding: 15px;
    background: #fff;
}

.wrap .smitacs-pos-tabs {
    display: block !important;
    width: 100% !important;
}

/* fallback kalau JS tidak jalan */
.smitacs-pos-tab-content.active {
    display: block;
}

/* =========================
TABLE
========================= */
.smitacs-pos-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.smitacs-pos-table th,
.smitacs-pos-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.smitacs-pos-table th {
    background: #f1f1f1;
    text-align: left;
}

/* =========================
CHART BOX
========================= */
.smitacs-pos-chart {
    width: 100%;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccd0d4;
}