/* Glassmorphism & Custom Overrides */
:root {
    --primary: #d97706;
    /* Amber 600 */
    --primary-hover: #b45309;
    --bg-dark: #0f172a;
    /* Slate 900 */
    --card-bg: rgba(30, 41, 59, 0.7);
    /* Slate 800 with opacity */
    --text-light: #f8fafc;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Inter', sans-serif;
    /* Background Image like the Node.js version */
    background-image: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

.overlay {
    background-color: rgba(15, 23, 42, 0.85);
    /* Dark overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.num-pad-btn {
    height: 4rem;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 0.75rem;
    background-color: rgba(51, 65, 85, 0.5);
    /* Slate 700/50 */
    color: white;
    transition: all 0.1s;
}

.num-pad-btn:active {
    transform: scale(0.95);
}

.num-pad-btn:hover {
    background-color: var(--primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }

    #statement-modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: white !important;
        visibility: visible;
        display: block !important;
        overflow: visible;
        z-index: 9999;
    }

    #statement-modal .bg-slate-900 {
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    #statement-modal * {
        visibility: visible;
        color: black !important;
    }

    #statement-modal button,
    .no-print {
        display: none !important;
    }

    /* Improve table visibility */
    #statement-modal table {
        width: 100%;
        border-collapse: collapse;
    }

    #statement-modal th,
    #statement-modal td {
        border-bottom: 1px solid #ddd;
    }

    /* Custom colors for profit/loss can keep basic hue if printer supports it, 
       but ensure readability */
    .text-green-400,
    .text-green-600 {
        color: #15803d !important;
    }

    .text-red-400,
    .text-red-500,
    .text-red-600 {
        color: #b91c1c !important;
    }

    /* Hide scrollbars */
    ::-webkit-scrollbar {
        display: none;
    }
}