/* pesan.css - Compact Version */
:root { --primary: #667EEA; --secondary: #764BA2; --bg-light: #f3f4f6; --border: #d1d5db; --text: #1f2937; --success: #10b981; --danger: #ef4444; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: #EEF2F5; color: var(--text); font-size: 13px; }
/* Font lebih kecil utk compact */
#app { max-width: 100%; padding: 0px 10px 10px; }
/* UTILS */
.hidden { display: none; }
.flex { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.mb-2 { margin-bottom: -6px; }
.p-1 { padding: 4px; }
.bold { font-weight: 600; display: ; }
.text-right { text-align: right; font-size: ; }
div.flex.gap-2 { }
.text-center { text-align: center; }
/* CARD & CONTAINER */
.card { background: white; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 5px 10px 0px; margin-bottom: -5px; }
/* HEADER AREA */
.header-bar { background: white; padding: 0px 12px; border-bottom: 2px solid var(--primary); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.header-title h1 { font-size: 1.2rem; color: var(--primary); margin: 0; }
.header-subtitle { font-size: 0.8rem; color: #666; }
/* CONTROLS (Date Picker & Buttons) */
.control-bar { display: flex; gap: 5px; align-items: center; background: #F8FAFC; padding: 5px; border-radius: 4px; border: 1px solid var(--border); }
input[type="date"] { border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; font-size: 0.9rem; }
button { padding: 5px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #000000; transition: opacity 0.2s; background-color: #79FDBF; width: 100%; padding: 15px; font-size: 1.1rem; }
button:hover { opacity: 0.9; }
button:disabled { background: #CCC !important; cursor: not-allowed; }
.btn-primary { background: var(--primary); }
.btn-success { background: var(--success); }
.btn-danger { background: var(--danger); }
.btn-back { background: #EDBFC1; }
/* TABLE STYLES (Compact) */
.table-container { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { background: #E5E7EB; padding: 6px; text-align: left; font-weight: 700; border-bottom: 1px solid var(--border); }
td { padding: 5px 6px; border-bottom: 1px solid #EEE; }
tr:hover { background-color: #A8D8FE; cursor: pointer; }
tr.selected { background-color: #DBEAFE; }
/* DETAIL ITEM CARD (2 Rows Layout) */
.item-card { border: 1px solid #5F7AB0; margin-bottom: 5px; background: #FAFFE6; padding: 0; /* No padding container, padding in rows */ }
/* Row 1: Info Barang */
.item-row-1 { background: ; padding: 5px 10px 0px; border-bottom: 1px solid #EEE; font-weight: 600; display: flex; justify-content: space-between; }
/* Row 2: Inputs (Grid 3 Columns) */
.item-row-2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; /* Gap handled by borders */ }
.loc-input-group { display: flex; align-items: center; padding: 0px 8px 4px; border-right: 1px solid #EEE; background: ; font-size: 12px; }
.loc-input-group:last-child { border-right: none; }
.loc-label { font-weight: bold; color: #444; margin-right: 5px; width: 15px; /* Fixed width for alignment */ }
.loc-stock { color: #000000; margin-right: 5px; font-size: 14px; width: 33px; font-weight: bold; }
.loc-input { flex: 1; width: 100%; border: 1px solid #D1D5DB; padding: 0px 4px 4px; text-align: center; border-radius: 3px; font-weight: bold; height: 26px; color: #DE0808; }
.loc-input:focus { border-color: var(--primary); outline: none; background: #EFF6FF; }
/* FULL SCREEN OVERLAY */
.fullscreen-view { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 100; display: flex; flex-direction: column; padding: 0; }
.fullscreen-header { background: linear-gradient(to right, #667EEA, #764BA2); color: white; padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.header-info { display: block; gap: 20px; font-size: 13px; }
.info-block span { display: flex; font-size: 10px; opacity: 0.8; }
.info-block div { font-weight: bold; font-size: 14px; }
.info-block { display: flex; }
.fullscreen-body { flex: 1; overflow-y: auto; padding: 10px; background: #F3F4F6; }
/* STATUS BAR */
.status-bar { padding: 8px; text-align: center; font-weight: bold; margin-bottom: 10px; border-radius: 4px; font-size: 12px; }
.status-loading { background: #FFFBEB; color: #B45309; }
.status-success { background: #ECFDF5; color: #047857; }
.status-error { background: #FEF2F2; color: #B91C1C; }
.big-input { font-size: 1.5rem; padding: 10px; text-align: center; font-weight: bold; width: 100%; border: 2px solid #CCC; border-radius: 8px; transition: all 0.3s; }
.big-input:focus { background-color: #FEF9C3; border-color: #EAB308; outline: none; box-shadow: 0 0 10px rgba(234, 179, 8, 0.3); }
.info-box { background: #F0F9FF; border: 1px solid #BAE6FD; padding: 7px 15px 4px; border-radius: 8px; }
.stok-display { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; text-align: center; }
.stok-card { background: white; padding: 4px 10px 0px; border-radius: 6px; border: 1px solid #DDD; }
.stok-label { font-size: 0.8rem; color: #666; }
.stok-val { font-size: 1.2rem; font-weight: bold; }
.selisih-plus { color: green; }
.selisih-min { color: red; }
.selisih-zero { color: #666; }
.history-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
.history-table th { background: #EEE; padding: 8px; text-align: left; border-bottom: 2px solid #DDD; }
.info-box p { font-size: 12px; padding-top: 0px; padding-bottom: 0px; }
.history-table td { padding: 0px 8px; border-bottom: 1px solid #EEE; }
.row-stripe:nth-child(even) { background-color: #F9F9F9; }
.btn-sm-danger { background-color: #EF4444; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; width: 34px; }
.btn-sm-danger:hover { background-color: #DC2626; }