/* =============================================================================
   Molonovo — legacy + component overrides (Osteria Notturna, dark)
   The main theme lives in molonovo_modern.css (tokens, global Bootstrap rules,
   landing + app shell). This file only handles:
     1. dcc.Dropdown internals (not a plain Bootstrap control — needs its own
        selectors rewritten from dash-core-components' Select CSS).
     2. Small responsive / table rules that cross the scoped wrappers.
   Design tokens come from :root in molonovo_modern.css.
   ============================================================================= */


/* Product cards — subtle lift on hover (the heavy styling is in
   molonovo_modern.css, scoped under #mol-app) */
#mol-app .product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* Toast positioning fix for mobile */
@media (max-width: 576px) {
    .toast {
        right: 5px !important;
        left: 5px !important;
        max-width: calc(100vw - 10px) !important;
    }
}

/* Cart / order table on mobile */
@media (max-width: 768px) {
    .table td, .table th {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}


/* =============================================================================
   dcc.Dropdown — nocturnal theme
   dash-core-components ships its own .Select-* markup that sits outside
   Bootstrap; these rules retheme it to match the squid-ink palette.
   Tokens duplicated as literals — react-select is rendered by Dash JS and
   can't read CSS custom properties reliably inside its inline styles.
   ============================================================================= */

/* Control (closed state) */
.Select-control,
.Select.is-open > .Select-control,
.Select.is-focused:not(.is-open) > .Select-control,
.Select--single > .Select-control,
.Select--multi > .Select-control,
.Select-control:hover,
div[class*="Select"] .Select-control {
    background-color: #15171a !important;
    border: 1px solid #3a3e43 !important;
    color: #f5ede1 !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
}

/* Focused control */
.Select.is-focused > .Select-control {
    background-color: #1b1e22 !important;
    border-color: #ff5a3a !important;
    box-shadow: 0 0 0 3px rgba(255, 90, 58, 0.18) !important;
}

/* Selected value / label */
.Select--single > .Select-control .Select-value,
.Select-value,
.Select-value-label {
    color: #f5ede1 !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
}

.Select-placeholder {
    color: #70695e !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
}

/* Input inside the control */
.Select-input > input,
.Select--multi .Select-input > input {
    background-color: transparent !important;
    color: #f5ede1 !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
}

/* Dropdown arrow */
.Select-arrow {
    border-color: #a8a298 transparent transparent !important;
}
.Select-control:hover .Select-arrow {
    border-color: #f5ede1 transparent transparent !important;
}

/* Option menu */
.Select-menu-outer,
.Select.is-open .Select-menu-outer {
    background-color: #15171a !important;
    border: 1px solid #3a3e43 !important;
    margin-top: 4px;
    border-radius: 8px !important;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(0, 0, 0, 0.3) !important;
}

.Select-option {
    background-color: #15171a !important;
    color: #f5ede1 !important;
    padding: 0.6rem 0.9rem;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
}

.Select-option.is-focused:not(.is-selected) {
    background-color: #1b1e22 !important;
    color: #f5ede1 !important;
}

.Select-option.is-selected {
    background-color: #ff5a3a !important;
    color: #ffffff !important;
}

/* Disabled state */
.Select.is-disabled > .Select-control {
    background-color: #1b1e22 !important;
    opacity: 0.55;
}

/* Multi-select chips */
.Select--multi .Select-value {
    background-color: #1b1e22 !important;
    border-color: #3a3e43 !important;
    color: #f5ede1 !important;
}

/* Clear "×" icon */
.Select-clear-zone,
.Select-clear {
    color: #a8a298 !important;
}
.Select-clear-zone:hover,
.Select-clear:hover {
    color: #ff5a3a !important;
}

/* Prevent bg bleed-through from parents */
.Select-control * {
    background-color: transparent !important;
}

/* "No results" label */
.Select-noresults {
    color: #a8a298 !important;
    background-color: #15171a !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
}

/* Mobile: avoid iOS zoom on focus */
@media (max-width: 768px) {
    .dash-dropdown-container .Select-input input {
        font-size: 16px !important;
    }
}