/* ================= RESET & ANDROID NATIVE UI ================= */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f4f6f9; color: #333; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }

/* Layer Aktivasi & Login (Sleek Mobile Style) */
#activation-screen, #login-screen { position: fixed; inset: 0; background: #121212; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 20px; }
#login-screen { background: rgba(18, 18, 18, 0.95); display: none; }

.mobile-card-box { background: white; padding: 25px; border-radius: 16px; width: 100%; max-width: 360px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); text-align: center; }
.mobile-card-box h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.mobile-card-box p { font-size: 13px; margin-bottom: 20px; }

.hwid-display { background: #fff5f5; padding: 14px; border-radius: 10px; font-family: 'Roboto Mono', monospace; font-size: 13px; margin: 15px 0; font-weight: bold; border: 1px dashed #ee2d24; color: #ee2d24; word-break: break-all; }

.mobile-card-box input { width: 100%; padding: 12px 16px; margin-bottom: 12px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 14px; background: #fafafa; outline: none; transition: 0.2s; }
.mobile-card-box input:focus { border-color: #ee2d24; background: white; }
.mobile-card-box button { width: 100%; padding: 14px; background: #ee2d24; color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; letter-spacing: 0.5px; }
.mobile-card-box button:active { opacity: 0.85; transform: scale(0.98); }

/* Main App Layout */
#app-container { display: none; flex-direction: column; width: 100%; min-height: 100vh; padding-bottom: 75px; }

/* Android App Bar */
.app-bar { background: #ee2d24; color: white; padding: 15px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 900; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.app-bar h3 { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }

/* Tab Content Container */
.tab-content { display: none; padding: 16px; width: 100%; animation: fadeIn 0.2s ease-in-out; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Android Form & UI Cards */
.ui-card { background: white; border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); border: 1px solid #eaeaea; }
.ui-card-title { font-size: 12px; font-weight: 700; color: #ee2d24; text-transform: uppercase; margin-bottom: 14px; letter-spacing: 0.5px; border-left: 3px solid #ee2d24; padding-left: 8px; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px; color: #666; text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #dcdcdc; border-radius: 8px; font-size: 14px; background: #fff; outline: none; transition: 0.2s; color: #333; font-family: inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #ee2d24; box-shadow: 0 0 0 3px rgba(238,45,36,0.1); }
.form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { background: #f0f0f0; cursor: not-allowed; opacity: 0.7; }

/* Grid Input untuk Efisiensi Ruang Mobile */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* Desain Tab Menu Model */
.tab-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.tab-menu button { padding: 10px 6px; font-size: 10px; cursor: pointer; border: 1px solid #e0e0e0; background: #f9f9f9; font-weight: 700; border-radius: 8px; text-align: center; transition: 0.2s; color: #555; }
.tab-menu button.active { background: #ee2d24; color: white; border-color: #ee2d24; box-shadow: 0 2px 5px rgba(238,45,36,0.2); }

.align-btns { display: flex; gap: 6px; }
.align-btns button { flex: 1; padding: 10px; font-size: 11px; cursor: pointer; border: 1px solid #ddd; background: #fff; border-radius: 8px; font-weight: 600; }
.align-btns button.active { background: #333; color: #fff; border-color: #333; }

/* Range Slider Android Custom style */
input[type="range"] { -webkit-appearance: none; width: 100%; height: 6px; background: #ddd; border-radius: 5px; outline: none; margin: 10px 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #ee2d24; cursor: pointer; transition: 0.1s; }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); }

/* Area Tombol Aksi Utama */
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-md { padding: 12px; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 13px; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; color: white; }
.btn-md:active { opacity: 0.85; transform: scale(0.97); }

.bg-blue { background: #2196f3; }
.bg-green { background: #4caf50; }
.bg-orange { background: #ff9800; }
.bg-gray { background: #607d8b; }
.bg-dark { background: #2c3e50; }
.btn-full { grid-column: span 2; padding: 15px; font-size: 15px; }

/* Preview Area */
.preview-container { background: #444; padding: 20px 10px; border-radius: 14px; min-height: 400px; display: flex; justify-content: center; align-items: flex-start; overflow-x: auto; }

/* Edit Mode CSS */
#editable-wrapper { width: 100%; transition: 0.2s; }
#editable-wrapper[contenteditable="true"] { outline: 2px dashed #ff9800; background: #fffdf2; cursor: text; padding: 5px; border-radius: 6px; }

/* Android Native Bottom Sheets / Modals */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 15000; align-items: flex-end; justify-content: center; }
.modal-box { background: white; padding: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; width: 100%; max-width: 500px; max-height: 80vh; overflow-y: auto; box-shadow: 0 -5px 25px rgba(0,0,0,0.2); animation: slideUp 0.25s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-box h3 { font-size: 16px; margin-bottom: 15px; border-bottom: 2px solid #ee2d24; padding-bottom: 8px; color: #222; display: flex; align-items: center; gap: 6px; }
.crud-table { width: 100%; text-align: left; border-collapse: collapse; font-size: 13px; margin-bottom: 15px; }
.crud-table th, .crud-table td { padding: 12px 8px; border-bottom: 1px solid #eee; }
.crud-table th { background: #f7f7f7; font-weight: 700; color: #666; }
.btn-sm { padding: 6px 12px; font-size: 11px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; color: white; margin-right: 4px; }
.search-box { width: 100%; padding: 12px; border: 2px solid #ee2d24; border-radius: 10px; font-size: 14px; margin-bottom: 15px; outline: none; }

/* Android Bottom Navigation Bar */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: white; display: flex; border-top: 1px solid #e0e0e0; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: none; background: transparent; color: #757575; cursor: pointer; transition: 0.15s; font-family: inherit; }
.nav-item .nav-icon { font-size: 20px; margin-bottom: 2px; transition: 0.15s; }
.nav-item .nav-label { font-size: 11px; font-weight: 600; }
.nav-item.active { color: #ee2d24; }
.nav-item.active .nav-icon { transform: translateY(-2px); }

/* RECEIPT STYLES (Tetap Terjaga Akurat untuk Printer Thermal) */
#receipt { width: 58mm; background: white; padding: 12px 10px; color: black; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-family: 'Courier Prime', monospace; font-size: 12px; line-height: 1.1; margin: 0 auto; box-sizing: border-box; }
.r-center { text-align: center; }
.r-ink-effect { text-shadow: 0px 0px 0.1px rgba(0,0,0,0.5); -webkit-font-smoothing: antialiased; }
.r-left { text-align: left; }
.r-right { text-align: right; }
.r-bold { font-weight: bold; }
.r-line { border-bottom: 1px dashed black; margin: 5px 0; width: 100%; }
.r-line-solid { border-bottom: 1px solid black; margin: 5px 0; width: 100%; }
.r-line-dashed { border-bottom: 1px dashed black; margin: 5px 0; width: 100%; }
.logo-wrap { display: block; width: 100%; text-align: center; line-height: 0; }
#logo-img { display: inline-block; filter: grayscale(100%) contrast(1.4); }
.r-info { display: flex; justify-content: space-between; font-size: 0.95em; margin-bottom: 1px; }
.r-table { width: 100%; border-collapse: collapse; margin: 2px 0; font-size: 1em; }
.r-table td { vertical-align: top; padding: 1px 0; }
.col-label { width: 38%; }
.col-sep { width: 5%; text-align: center; }
.col-val { width: 57%; text-align: left; }
.m3-amount { font-size: 1.4em; font-weight: bold; }
.m3-row, .m4-row { display: flex; justify-content: space-between; margin: 3px 0; }

/* PRINT SETTING UTAMA */
@media print {
    body * { visibility: hidden; }
    #receipt, #receipt * { visibility: visible; }
    #receipt { position: absolute; left: 0; top: 0; box-shadow: none; width: 58mm; padding: 0; margin: 0; }
    #editable-wrapper[contenteditable="true"] { outline: none; background: transparent; padding: 0; }
    @page { size: 58mm auto; margin: 0; }
}