/* ===== Kasir HT — style shared semua cabang ===== */
body { font-family: Arial, sans-serif; background-color: #f0f2f5; margin: 0; padding: 15px; }
.container { max-width: 100%; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-top: 5px solid #28a745; }
h2 { text-align: center; color: #333; margin-top: 0; margin-bottom: 5px; font-size: 22px; }
.subtitle { text-align: center; font-size: 13px; color: #28a745; font-weight: bold; margin-bottom: 15px; }
.status-box { padding: 8px; text-align: center; border-radius: 5px; font-weight: bold; margin-bottom: 15px; background-color: #e9ecef; color: #495057; font-size: 14px; }
.grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.grid-full-width { grid-column: 1 / -1; }
.control-group { border: 1px solid #ddd; padding: 12px; border-radius: 8px; background: #fafafa; display: flex; flex-direction: column; justify-content: center; }
.mb-0 { margin-bottom: 0 !important; }
label { font-weight: bold; display: block; margin-bottom: 5px; color: #555; font-size: 13px; }
p { font-size: 11px; color: #666; margin-top: 0; margin-bottom: 8px; line-height: 1.3; }
input[type="text"], select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-family: inherit; font-size: 14px; }
input[type="range"] { margin-bottom: 5px; }
button { width: 100%; padding: 12px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; color: white; transition: 0.3s; font-size: 15px; }
.btn-kasir { background-color: #28a745; height: 100%; min-height: 60px; font-size: 16px !important; }
.btn-kasir:hover { background-color: #218838; }
.btn-download { background-color: #6c757d; margin-top: 5px; padding: 8px; font-size: 13px; }
@keyframes pulse-red { 0% { background-color: #dc3545; color: white; } 50% { background-color: #f8d7da; color: #721c24; } 100% { background-color: #dc3545; color: white; } }
.alert-pulse { animation: pulse-red 1.5s infinite; border: 2px solid #dc3545; }
audio { width: 100%; margin-top: 10px; border-radius: 5px; outline: none; display: none; }
.audio-visible { display: block; background: #e3f2fd; padding: 5px; border-radius: 8px; border: 2px solid #2196F3; }
.debug-container { margin-top: 15px; border-top: 2px dashed #ccc; padding-top: 10px; }
textarea { width: 100%; height: 140px; background: #1e1e1e; color: #00ff00; font-family: monospace; font-size: 11px; padding: 8px; border-radius: 5px; box-sizing: border-box; resize: vertical; }
.speaker-box { background: #fff3cd; border-left: 5px solid #ffc107; }
.disable-box { background: #f8d7da; border-left: 5px solid #dc3545; }
.dsp-box { background: #e2e3e5; border-left: 5px solid #17a2b8; }
@media (max-width: 768px) { .grid-layout { grid-template-columns: 1fr; } }