body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f8fafc;
}
.theme-color { color: #40E0D0; }
.theme-bg { background-color: #40E0D0; }
.theme-border { border-color: #40E0D0; }
.theme-bg-light { background-color: rgba(64, 224, 208, 0.08); }

/* Custom UI Scrollbar */
::-webkit-scrollbar { 
    width: 5px; 
    height: 5px; 
}
::-webkit-scrollbar-thumb { 
    background: #40E0D0; 
    border-radius: 10px; 
}
/* ===================================================
   ATURAN CETAK KHUSUS PRINTER TERMAL KECIL (58mm Mini)
   =================================================== */
@media print {
    /* 1. Sembunyikan semua elemen halaman web tanpa kecuali */
    body *, html * {
        visibility: hidden !important;
    }

    /* 2. Munculkan hanya area struk teks */
    #receiptModal, 
    #receiptModal *,
    #print-area, 
    #print-area * {
        visibility: visible !important;
    }

    /* 3. Paksa ukuran area cetak pas masuk kertas termal 58mm */
    #print-area {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 58mm !important; /* Standar lebar kertas printer bluetooth kecil */
        max-width: 58mm !important;
        margin: 0 !important;
        padding: 2mm !important; /* Spasi tepi minimal */
        border: none !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    /* 4. Sembunyikan tombol-tombol aksi modal agar tidak ikut tercetak */
    #receiptModal button, 
    #receiptModal .grid,
    #receiptModal .w-full.py-2\.5 {
        display: none !important;
        visibility: hidden !important;
    }

    /* 5. Hilangkan margin kertas bawaan browser & potong sisa tinggi layar */
    @page {
        size: 58mm auto; /* Setel ukuran kertas cetak ke 58mm */
        margin: 0mm !important;
    }

    html, body {
        height: auto !important; /* Mencegah halaman melar ke bawah */
        overflow: hidden !important; /* Memangkas tumpukan bar navigasi HP (Lingkaran Oren) */
        background: #fff !important;
    }

    /* 6. Optimasi Font & Spasi Kasir Ukuran Mikro (Anti-Potong) */
    #print-area {
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 9px !important; /* Ukuran teks diperkecil agar muat di 58mm */
        line-height: 1.1 !important;
        color: #000 !important;
    }

    #print-area * {
        color: #000 !important;
        font-size: 9px !important;
    }

    /* Atur khusus Judul Nama Laundry agar sedikit lebih menonjol */
    #print-area h4 {
        font-size: 11px !important;
        font-weight: bold !important;
    }

    /* Buat QR Code mengecil secara proporsional agar tidak meluber keluar kertas */
    #qrcode img, #qrcode svg {
        display: block !important;
        margin: 0 auto !important;
        width: 90px !important; /* Menjaga ukuran gambar QR Code asli tetap pas */
        height: 90px !important;
    }
}

/* ===================================================
   HILANGKAN KOTAK KOSONG BERGARIS DI BAWAH QR CODE
   =================================================== */
#qrcode canvas {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Ogipos Firebase Multi-Tenant additions */
button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

#bootstrap-screen,
#register-screen,
#tenant-not-found-screen,
#login-screen {
    min-height: 100vh;
}

input[readonly] {
    cursor: default;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

#checkout-sheet {
    will-change: transform;
}

.sidebar-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    color: rgb(100 116 139);
    font-size: 12px;
    font-weight: 800;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.sidebar-nav-btn.hidden,
[data-roles].hidden {
    display: none !important;
}

.sidebar-nav-btn:hover {
    background: rgb(248 250 252);
    color: rgb(30 41 59);
}

.sidebar-nav-btn.theme-color {
    background: rgba(64, 224, 208, .12);
    color: #18bdb0;
}

.sidebar-nav-btn i {
    width: 1rem;
    text-align: center;
}

#barcode-reader video {
    border-radius: 1rem;
}

.service-card-v3,
.cart-item-card-v3 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 0%, rgba(255,255,255,.26) 0 18%, transparent 19%),
        linear-gradient(135deg, #0f766e 0%, #14b8a6 54%, #40E0D0 100%);
    color: #fff;
    box-shadow: 0 12px 24px -18px rgba(15, 118, 110, .7);
}

.service-card-v3::before,
.cart-item-card-v3::before {
    content: "";
    position: absolute;
    width: 5rem;
    height: 5rem;
    right: -2.4rem;
    bottom: -2.4rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
}

.service-card-v3::after,
.cart-item-card-v3::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 44%);
    pointer-events: none;
}

.service-card-v3.is-selected {
    box-shadow: 0 0 0 3px rgba(64,224,208,.22), 0 18px 36px -22px rgba(15,118,110,.85);
    transform: translateY(-1px);
}

.service-card-v3 button,
.cart-item-card-v3 button {
    backdrop-filter: blur(6px);
}

.cart-qty-input-v3 {
    caret-color: #0f766e;
}

@media (max-width: 640px) {
    #liveAlert {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        width: auto;
    }
}

/* OGIPOS V3.1 integrated owner/cashier UI */
.owner-metric-card {
    background: #fff;
    border: 1px solid rgb(241 245 249);
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    min-height: 108px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.owner-metric-card > span { font-size: 9px; text-transform: uppercase; letter-spacing:.08em; font-weight:800; color:rgb(148 163 184); }
.owner-metric-card > strong { display:block; margin-top:.35rem; font-size:1rem; font-weight:800; color:rgb(30 41 59); }
.owner-metric-card > small { display:block; margin-top:.2rem; font-size:9px; color:rgb(148 163 184); }
.owner-mini-card { background:#fff; border:1px solid rgb(241 245 249); border-radius:1rem; padding:.9rem; display:flex; align-items:center; gap:.75rem; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.owner-mini-card i { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgb(248 250 252); }
.owner-mini-card span { font-size:9px; font-weight:700; color:rgb(148 163 184); display:block; }
.owner-mini-card b { font-size:11px; color:rgb(51 65 85); display:block; margin-top:2px; }
.owner-chart { width:100%; overflow:hidden; }
@media (min-width: 1024px) {
  #view-dashboard { padding-bottom: 12px; }
}