/**
 * Arshad Sweet POS Custom Theme CSS
 * Deep Chocolate, Warm Cream, Royal Gold Palette
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --brand-primary: #3B1E08;      /* Deep Chocolate */
    --brand-primary-dark: #271305;
    --brand-primary-light: #522B0C;
    --brand-gold: #C59B27;         /* Royal Gold */
    --brand-gold-light: #DFB748;
    --brand-gold-bg: #FDF9EE;
    --brand-cream: #FAF6EF;        /* Warm Cream */
    --brand-cream-dark: #F0E8DA;
    --brand-success: #0D8253;      /* Emerald Green */
    --brand-danger: #D32F2F;       /* Crimson Red */
    --brand-surface: #FFFFFF;
    --brand-text-dark: #1E1711;
    --brand-text-muted: #736357;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #F8F5EE;
    color: var(--brand-text-dark);
    -webkit-font-smoothing: antialiased;
}

.font-serif-heading {
    font-family: 'Playfair Display', Georgia, serif;
}

.font-mono-numbers {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: "tnum";
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F0EADF;
}
::-webkit-scrollbar-thumb {
    background: #D1C5B4;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #A89883;
}

/* POS Specific Layout Styles */
.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.875rem;
}

.pos-card {
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.pos-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(59, 30, 8, 0.12);
}

.pos-card:active {
    transform: scale(0.98);
}

/* Keyboard Shortcut Badges */
.kbd-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #522B0C;
    background-color: #F4EDE0;
    border: 1px solid #D6C7B2;
    border-radius: 0.25rem;
    box-shadow: 0 1px 0 0 #BBA78C;
}

/* Receipt Styling for Printing */
@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }
    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body > *:not(#modal-receipt),
    header,
    .no-print,
    .modal-backdrop:not(#modal-receipt) {
        display: none !important;
    }
    #modal-receipt {
        position: static !important;
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    #modal-receipt .modal-content {
        box-shadow: none !important;
        border: none !important;
        width: 78mm !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: none !important;
    }
    #printable-receipt {
        padding: 4mm 2mm !important;
        width: 100% !important;
        overflow: visible !important;
    }
    #printable-receipt-content {
        width: 100% !important;
        color: #000000 !important;
        font-family: 'Courier New', Courier, monospace !important;
    }
}

/* Custom Table Row Hover */
.table-pos tbody tr {
    transition: background-color 0.15s ease;
}
.table-pos tbody tr:hover {
    background-color: #FBF8F2;
}

/* Modal Animation */
.modal-backdrop {
    background-color: rgba(39, 19, 5, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

.modal-content {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(0.96);
    opacity: 0;
}

.modal-content.show {
    transform: scale(1);
    opacity: 1;
}

/* Sweet Box Badge Glow */
.gold-glow {
    box-shadow: 0 0 15px rgba(197, 155, 39, 0.25);
}