/* Storefront MVP — mobile-first styles */

/* AI-generated: Blink33 black/gold brand palette with light/dark theme support (Amazon Q Developer) */
:root,
[data-mantine-color-scheme="dark"] {
    --color-bg:          #0A0A0A;
    --color-bg-card:     #1A1A1A;
    --color-border:      #2a2a2a;
    --color-gold:        #C9A227;
    --color-gold-soft:   #E8D48B;
    --color-text:        #FFFFFF;
    --color-gray-mid:    #6B6B6B;
    --color-success:     #2ECC71;
    --color-nav-bg:      #0A0A0A;
    --color-nav-border:  #2a2a2a;
    --color-sticky-bg:   #0A0A0A;
}

[data-mantine-color-scheme="light"] {
    --color-bg:          #F5F0E8;
    --color-bg-card:     #FFFFFF;
    --color-border:      #E8D48B;
    --color-gold:        #C9A227;
    --color-gold-soft:   #E8D48B;
    --color-text:        #0A0A0A;
    --color-gray-mid:    #6B6B6B;
    --color-success:     #2ECC71;
    --color-nav-bg:      #FFFFFF;
    --color-nav-border:  #E8D48B;
    --color-sticky-bg:   #FFFFFF;
}

/* Base */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-text-size-adjust: 100%;
}

/* Touch-friendly tap targets */
button, a, .mantine-Button-root, .mantine-ActionIcon-root {
    min-height: 44px;
    min-width: 44px;
}

/* Offer cards */
.offer-card {
    border-left: 4px solid var(--color-gold);
    background: var(--color-bg-card) !important;
    color: var(--color-text);
}

/* Save button heart animation */
.bi-heart-fill {
    color: var(--color-gold);
}

/* Store page hero */
.store-hero {
    border-radius: 12px;
    overflow: hidden;
}
.store-hero img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Charts: prevent overflow on mobile */
.js-plotly-plot, .plotly {
    width: 100% !important;
}
.js-plotly-plot .plotly .main-svg {
    width: 100% !important;
}

/* AG Grid: horizontal scroll on mobile */
.ag-root-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* QR code centered on mobile */
.qr-container {
    text-align: center;
}
.qr-container img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

/* Navbar */
nav {
    background: var(--color-nav-bg) !important;
    border-bottom-color: var(--color-nav-border) !important;
}

/* Sticky bottom bar */
.sticky-bar {
    background: var(--color-sticky-bg) !important;
    border-top-color: var(--color-nav-border) !important;
}

/* Mantine Alert — force themed text */
.mantine-Alert-message,
.mantine-Alert-title {
    color: var(--color-text) !important;
}

/* Mantine Select/Autocomplete dropdowns — themed */
.mantine-Select-dropdown,
.mantine-Autocomplete-dropdown {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
}
.mantine-Select-option,
.mantine-Autocomplete-option {
    color: var(--color-text) !important;
}
.mantine-Select-option:hover,
.mantine-Select-option[data-combobox-selected],
.mantine-Autocomplete-option:hover {
    background: var(--color-border) !important;
}
.mantine-Select-input,
.mantine-Autocomplete-input,
.mantine-TextInput-input,
.mantine-Textarea-input,
.mantine-NumberInput-input {
    background: var(--color-bg-card) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
@media (max-width: 768px) {
    .mantine-Container-root {
        padding-left: 12px;
        padding-right: 12px;
    }
    .mantine-Card-root {
        padding: 12px !important;
    }
    .mantine-AppShell-main {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Responsive navbar visibility utilities.
   These are referenced by the navbar in app.py. Without them, both the
   desktop and mobile nav render simultaneously, causing overflow/wrapping
   that can cover the top of the page. */
.hide-mobile {
    display: block;
}
.hide-desktop {
    display: none;
}
@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
    .hide-desktop {
        display: block;
    }
}