/* BizEasePOS Modern Dark Theme & Printing Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg-base: #0B0F19;
    --bg-surface: #111827;
    --bg-card: #161F30;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(99, 102, 241, 0.5);
    --accent-emerald: #10B981;
    --accent-indigo: #6366F1;
    --accent-cyan: #06B6D4;
    --accent-amber: #F59E0B;
    --accent-rose: #EF4444;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-base);
    color: #F3F4F6;
    overflow-x: hidden;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Glassmorphic cards */
.glass-card {
    background: rgba(22, 31, 48, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

.glass-nav {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0B0F19;
}
::-webkit-scrollbar-thumb {
    background: #25334D;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #374151;
}

/* Glowing accent effects */
.glow-emerald {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
}
.glow-indigo {
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.25);
}

/* Active tab indicators */
.nav-tab-active {
    background: rgba(99, 102, 241, 0.15);
    color: #818CF8;
    border-bottom: 2px solid #6366F1;
}

/* Thermal POS Receipt Layout (Screen Preview & Print) */
.thermal-receipt {
    width: 80mm;
    max-width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
    color: #000000;
    font-family: 'JetBrains Mono', Courier, monospace;
    font-size: 11px;
    line-height: 1.35;
    padding: 12px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.thermal-receipt.size-58mm {
    width: 58mm;
    font-size: 10px;
    padding: 8px 6px;
}

.thermal-receipt hr {
    border: none;
    border-top: 1px dashed #000000;
    margin: 6px 0;
}

/* Print Rules for Thermal POS & A4 Invoices */
@media print {
    /* Hide dashboard and screen-only controls */
    #app-root, .no-print, nav, header {
        display: none !important;
    }

    body {
        background: #FFFFFF !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Modal Backdrop becomes transparent, unclipped print container */
    #modal-backdrop {
        position: static !important;
        display: block !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        width: 100% !important;
        height: auto !important;
        inset: auto !important;
    }

    #modal-content {
        position: static !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .print-area {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        background: #FFFFFF !important;
        color: #000000 !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .print-area * {
        color: #000000 !important;
    }

    .thermal-receipt {
        box-shadow: none !important;
        border: none !important;
        margin: 0 auto !important;
        padding: 2px 0 !important;
        width: 80mm !important;
        max-width: 80mm !important;
        background: #FFFFFF !important;
        color: #000000 !important;
        page-break-inside: avoid;
    }

    .thermal-receipt.size-58mm {
        width: 58mm !important;
        max-width: 58mm !important;
    }

    .thermal-receipt hr {
        border: none !important;
        border-top: 1px dashed #000000 !important;
        margin: 4px 0 !important;
    }

    @page {
        margin: 4mm;
        size: auto;
    }
}