/* ==========================================================
   PANVIYO Smart Pantry
   Version : 3.0 Stable
   Build   : 040
   File    : css/style.css

   Shopping Page Redesign
   Light + Dark Mode
========================================================== */


/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

    /* Brand */
    --primary: #2E7D32;
    --primary-dark: #1B5E20;
    --primary-light: #66BB6A;
    --primary-soft: #E8F5E9;

    /* Status */
    --success: #2E7D32;
    --success-light: #E8F5E9;

    --warning: #F9A825;
    --warning-light: #FFF8E1;

    --danger: #C62828;
    --danger-light: #FFEBEE;

    --info: #1565C0;
    --info-light: #E3F2FD;

    /* Light mode */
    --background: #F5F7F5;
    --surface: #FFFFFF;
    --surface-alt: #F8FAF8;

    --text-primary: #1F2933;
    --text-secondary: #607080;
    --text-muted: #8A969F;

    --border: #DDE4DE;
    --border-strong: #C8D2C9;

    --shadow: rgba(27, 45, 30, 0.08);
    --shadow-strong: rgba(27, 45, 30, 0.16);

    /* Inputs */
    --input-background: #FFFFFF;
    --input-border: #CBD5CE;
    --input-focus: #2E7D32;

    /* Navigation */
    --nav-background: #FFFFFF;
    --nav-border: #E0E6E1;

    /* Modal */
    --modal-overlay: rgba(0, 0, 0, 0.55);

    /* Shopping */
    --shopping-card: #FFFFFF;
    --shopping-bought: #F1F8F2;
    --shopping-bought-border: #A5D6A7;

    --budget-background: #E5E7EB;
    --budget-progress: #2E7D32;

    /* Radius */
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-xl: 20px;

    /* Typography */
    --font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    /* Layout */
    --max-width: 1100px;

}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode {

    --background: #101512;

    --surface: #18201B;
    --surface-alt: #1D2720;

    --text-primary: #F1F5F2;
    --text-secondary: #B6C2BA;
    --text-muted: #84928A;

    --border: #2E3A31;
    --border-strong: #3D4A40;

    --shadow:
        rgba(0, 0, 0, 0.28);

    --shadow-strong:
        rgba(0, 0, 0, 0.45);

    --primary-soft:
        #18351D;

    --success-light:
        #18351D;

    --warning-light:
        #3B3216;

    --danger-light:
        #3A1B1B;

    --info-light:
        #172B40;

    --input-background:
        #141B17;

    --input-border:
        #39473E;

    --nav-background:
        #18201B;

    --nav-border:
        #2E3A31;

    --shopping-card:
        #1A231D;

    --shopping-bought:
        #182B1C;

    --shopping-bought-border:
        #356B3A;

    --budget-background:
        #303933;

    --budget-progress:
        #66BB6A;

    --modal-overlay:
        rgba(0, 0, 0, 0.72);

}


/* ==========================================================
   GLOBAL RESET
========================================================== */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background:
        var(--background);

    color:
        var(--text-primary);

    font-family:
        var(--font-family);

    font-size: 16px;

    line-height: 1.5;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;

}


button,
input,
select,
textarea {

    font-family:
        inherit;

}


button {

    cursor: pointer;

}


img {

    max-width: 100%;

}


ul {

    list-style: none;

}


/* ==========================================================
   APP CONTAINER
========================================================== */

#app {

    min-height: 100vh;

}


.app-container {

    width: 100%;

    max-width:
        var(--max-width);

    margin:
        0 auto;

    padding:
        24px 20px 110px;

}


/* ==========================================================
   HEADER
========================================================== */

.logo-area {

    padding:
        24px 0 28px;

}


.logo-area h1 {

    color:
        var(--primary);

    font-size:
        clamp(28px, 5vw, 38px);

    font-weight:
        800;

    letter-spacing:
        -0.5px;

}


.tagline {

    color:
        var(--text-secondary);

    margin-top:
        4px;

    font-size:
        15px;

}


/* ==========================================================
   PAGE
========================================================== */

.page {

    display: none;

    animation:
        fadeIn 0.2s ease;

}


.page.active {

    display: block;

}


@keyframes fadeIn {

    from {

        opacity: 0;

        transform:
            translateY(4px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   PAGE HEADER
========================================================== */

.page-header {

    margin-bottom:
        24px;

}


.page-header h2 {

    color:
        var(--text-primary);

    font-size:
        clamp(24px, 5vw, 32px);

    font-weight:
        750;

}


.page-header p {

    color:
        var(--text-secondary);

    margin-top:
        5px;

}


/* ==========================================================
   HEADINGS
========================================================== */

h1,
h2,
h3,
h4 {

    color:
        var(--text-primary);

}


h3 {

    font-size:
        18px;

}


/* ==========================================================
   DASHBOARD GRID
========================================================== */

.dashboard-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

    margin-bottom:
        20px;

}


.dashboard-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        20px;

    box-shadow:
        0 5px 18px var(--shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.25s ease;

}


.dashboard-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 24px var(--shadow-strong);

}


.dashboard-card h1,
.dashboard-card h2 {

    margin-top:
        6px;

}


.card-icon {

    display:
        block;

    font-size:
        28px;

    margin-bottom:
        8px;

}


/* Status cards */

.dashboard-card.warning {

    border-left:
        4px solid var(--warning);

}


.dashboard-card.danger {

    border-left:
        4px solid var(--danger);

}


.dashboard-card.success {

    border-left:
        4px solid var(--success);

}


/* ==========================================================
   INFO CARDS
========================================================== */

.info-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        20px;

    margin-bottom:
        18px;

    box-shadow:
        0 4px 16px var(--shadow);

}


.info-card h3 {

    margin-bottom:
        8px;

}


.info-card p,
.info-card li {

    color:
        var(--text-secondary);

}


/* ==========================================================
   DASHBOARD DETAILS
========================================================== */

.dashboard-details {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

    margin-bottom:
        24px;

}


/* ==========================================================
   SECTION
========================================================== */

section {

    margin-bottom:
        24px;

}


.section-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        16px;

}


.section-header p {

    color:
        var(--text-secondary);

    font-size:
        14px;

}


/* ==========================================================
   FORM CARDS
========================================================== */

.form-card,
.search-card,
.settings-card,
.scanner-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        22px;

    margin-bottom:
        18px;

    box-shadow:
        0 5px 18px var(--shadow);

}


.form-card h3,
.settings-card h3 {

    margin-bottom:
        18px;

}


/* ==========================================================
   INPUTS
========================================================== */

input,
select,
textarea {

    width:
        100%;

    background:
        var(--input-background);

    color:
        var(--text-primary);

    border:
        1px solid var(--input-border);

    border-radius:
        var(--radius-medium);

    padding:
        12px 14px;

    font-size:
        15px;

    outline:
        none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.25s ease;

}


input::placeholder,
textarea::placeholder {

    color:
        var(--text-muted);

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--input-focus);

    box-shadow:
        0 0 0 3px
        rgba(46, 125, 50, 0.12);

}


textarea {

    resize:
        vertical;

}


label {

    display:
        block;

    color:
        var(--text-secondary);

    font-size:
        14px;

    font-weight:
        600;

    margin:
        14px 0 6px;

}


/* ==========================================================
   TWO COLUMNS
========================================================== */

.two-columns {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

}


/* ==========================================================
   BUTTONS
========================================================== */

.button-group {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        18px;

}


.primary-button,
.secondary-button,
.danger-button,
.success-button {

    border:
        none;

    border-radius:
        var(--radius-medium);

    padding:
        11px 16px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease,
        box-shadow 0.15s ease;

}


.primary-button {

    background:
        var(--primary);

    color:
        #FFFFFF;

}


.primary-button:hover {

    background:
        var(--primary-dark);

}


.secondary-button {

    background:
        var(--surface-alt);

    color:
        var(--text-primary);

    border:
        1px solid var(--border);

}


.danger-button {

    background:
        var(--danger);

    color:
        #FFFFFF;

}


.success-button {

    background:
        var(--success);

    color:
        #FFFFFF;

}


.primary-button:hover,
.secondary-button:hover,
.danger-button:hover,
.success-button:hover {

    transform:
        translateY(-1px);

}


.primary-button:active,
.secondary-button:active,
.danger-button:active,
.success-button:active {

    transform:
        translateY(0);

}


/* ==========================================================
   SHOPPING PAGE
========================================================== */

#shoppingPage {

    padding-bottom:
        30px;

}


/* ==========================================================
   CURRENT SHOPPING TRIP
========================================================== */

.shopping-trip-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-xl);

    padding:
        22px;

    box-shadow:
        0 6px 22px var(--shadow);

    margin-bottom:
        18px;

}


.shopping-trip-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        16px;

    padding-bottom:
        16px;

    margin-bottom:
        6px;

    border-bottom:
        1px solid var(--border);

}


.shopping-trip-header h3 {

    font-size:
        20px;

}


.shopping-trip-header p {

    color:
        var(--text-secondary);

    font-size:
        14px;

    margin-top:
        3px;

}


/* ==========================================================
   SHOPPING ITEM
========================================================== */

.shopping-item {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        18px;

    padding:
        18px 4px;

    border-bottom:
        1px solid var(--border);

}


.shopping-item:last-child {

    border-bottom:
        none;

}


.shopping-item-info {

    min-width:
        0;

}


.shopping-item-name {

    color:
        var(--text-primary);

    font-size:
        18px;

    font-weight:
        750;

    margin-bottom:
        5px;

}


.shopping-item-details {

    color:
        var(--text-secondary);

    font-size:
        14px;

}


.shopping-item-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    min-width:
        100px;

    font-size:
        17px;

    font-weight:
        800;

    color:
        var(--text-primary);

}


.shopping-item-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        12px;

}


.shopping-item-actions button {

    padding:
        8px 11px;

    border-radius:
        9px;

    border:
        1px solid var(--border);

    background:
        var(--surface-alt);

    color:
        var(--text-primary);

    font-size:
        13px;

    font-weight:
        650;

}


.shopping-item-actions button:hover {

    border-color:
        var(--primary);

    color:
        var(--primary);

}


.shopping-item-actions .bought-button {

    color:
        var(--success);

}


.shopping-item-actions .delete-button {

    color:
        var(--danger);

}


/* ==========================================================
   BOUGHT SHOPPING ITEM
========================================================== */

.shopping-item.bought {

    background:
        var(--shopping-bought);

    border:
        1px solid var(--shopping-bought-border);

    border-radius:
        var(--radius-medium);

    margin:
        8px 0;

    padding:
        16px;

}


.shopping-item.bought .shopping-item-name {

    color:
        var(--text-secondary);

    text-decoration:
        line-through;

}


.shopping-item-bought-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        8px;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        var(--success-light);

    color:
        var(--success);

    font-size:
        12px;

    font-weight:
        800;

}


/* ==========================================================
   SHOPPING ADD ITEM CARD
========================================================== */

.shopping-add-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        22px;

    margin-bottom:
        18px;

    box-shadow:
        0 5px 18px var(--shadow);

}


.shopping-add-card h3 {

    margin-bottom:
        16px;

}


/* ==========================================================
   SHOPPING TRIP CALCULATOR BUTTON
========================================================== */

.shopping-trip-calculator-button {

    display:
        flex;

    justify-content:
        center;

    margin:
        18px 0;

}


.shopping-trip-calculator-button button {

    width:
        100%;

    max-width:
        500px;

    padding:
        15px 20px;

    font-size:
        16px;

    border-radius:
        var(--radius-medium);

}


/* ==========================================================
   SHOPPING SUMMARY
========================================================== */

.shopping-summary {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        12px;

    margin-bottom:
        24px;

}


.shopping-summary-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    padding:
        16px;

    box-shadow:
        0 4px 14px var(--shadow);

}


.shopping-summary-label {

    display:
        block;

    color:
        var(--text-secondary);

    font-size:
        13px;

    margin-bottom:
        5px;

}


.shopping-summary-value {

    display:
        block;

    color:
        var(--text-primary);

    font-size:
        18px;

    font-weight:
        800;

}


/* ==========================================================
   SHOPPING BUDGET
========================================================== */

.shopping-budget-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        20px;

    margin-bottom:
        18px;

}


.shopping-budget-card h3 {

    margin-bottom:
        6px;

}


.shopping-budget-card p {

    color:
        var(--text-secondary);

    font-size:
        14px;

    margin-bottom:
        12px;

}


/* ==========================================================
   BUDGET PROGRESS
========================================================== */

.budget-progress-container {

    margin-top:
        14px;

}


.budget-progress-bar {

    width:
        100%;

    height:
        12px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--budget-background);

}


.budget-progress-fill {

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--budget-progress);

    transition:
        width 0.3s ease;

}


.budget-progress-text {

    margin-top:
        8px;

    color:
        var(--text-secondary);

    font-size:
        13px;

}


/* ==========================================================
   SHOPPING SEARCH
========================================================== */

.shopping-search-card {

    margin-bottom:
        18px;

}


.shopping-search-card input {

    width:
        100%;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state {

    padding:
        35px 20px;

    text-align:
        center;

    color:
        var(--text-secondary);

}


.empty-state .emoji {

    font-size:
        40px;

    margin-bottom:
        10px;

}


.empty-state h3 {

    margin-bottom:
        6px;

}


.empty-state p {

    color:
        var(--text-secondary);

    font-size:
        14px;

}


/* ==========================================================
   SHOPPING EDIT MODAL
========================================================== */

.shopping-edit-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        var(--modal-overlay);

    backdrop-filter:
        blur(4px);

}


.shopping-edit-modal.active {

    display:
        flex;

}


.shopping-edit-modal-content {

    width:
        100%;

    max-width:
        480px;

    max-height:
        calc(100vh - 40px);

    overflow-y:
        auto;

    background:
        var(--surface);

    color:
        var(--text-primary);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.3);

    animation:
        modalIn 0.2s ease;

}


@keyframes modalIn {

    from {

        opacity:
            0;

        transform:
            translateY(15px)
            scale(0.98);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


.shopping-edit-modal-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        18px 20px;

    border-bottom:
        1px solid var(--border);

}


.shopping-edit-modal-header h3 {

    font-size:
        19px;

}


.shopping-edit-close {

    width:
        36px;

    height:
        36px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--surface-alt);

    color:
        var(--text-primary);

    font-size:
        18px;

}


.shopping-edit-modal-body {

    padding:
        20px;

}


.shopping-edit-item-name {

    margin-bottom:
        20px;

    font-size:
        20px;

    font-weight:
        800;

}


.shopping-edit-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin:
        18px 0;

    padding:
        15px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    background:
        var(--surface-alt);

}


.shopping-edit-total span {

    color:
        var(--text-secondary);

}


.shopping-edit-total strong {

    color:
        var(--primary);

    font-size:
        20px;

}


.shopping-edit-modal-footer {

    display:
        flex;

    gap:
        10px;

    padding:
        18px 20px;

    border-top:
        1px solid var(--border);

}


.shopping-edit-modal-footer button {

    flex:
        1;

}


/* ==========================================================
   TRIP CALCULATOR MODAL
========================================================== */

.shopping-trip-calculator-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        1900;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        var(--modal-overlay);

    backdrop-filter:
        blur(4px);

}


.shopping-trip-calculator-modal.active {

    display:
        flex;

}


.shopping-trip-calculator-content {

    width:
        100%;

    max-width:
        520px;

    max-height:
        calc(100vh - 40px);

    overflow-y:
        auto;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.3);

}


.shopping-trip-calculator-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        18px 20px;

    border-bottom:
        1px solid var(--border);

}


.shopping-trip-calculator-body {

    padding:
        20px;

}


.trip-calculator-total {

    margin-top:
        18px;

    padding:
        20px;

    border-radius:
        var(--radius-large);

    background:
        var(--primary-soft);

    text-align:
        center;

}


.trip-calculator-total span {

    display:
        block;

    color:
        var(--text-secondary);

    font-size:
        13px;

}


.trip-calculator-total strong {

    display:
        block;

    color:
        var(--primary);

    font-size:
        30px;

    margin-top:
        4px;

}


/* ==========================================================
   CALCULATOR RECEIPTS
========================================================== */

.shopping-calculator-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        20px;

}


.shopping-calculator-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        18px;

}


.calculator-close-button {

    width:
        36px;

    height:
        36px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--surface-alt);

    color:
        var(--text-primary);

}


.calculator-selected-product {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding:
        14px;

    margin-bottom:
        15px;

    border-radius:
        var(--radius-medium);

    background:
        var(--surface-alt);

}


.calculator-product-label {

    color:
        var(--text-secondary);

    font-size:
        12px;

}


.calculator-product-name {

    color:
        var(--primary);

    font-size:
        18px;

}


.calculator-results {

    margin-top:
        18px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    overflow:
        hidden;

}


.calculator-result-row,
.calculator-result-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px 14px;

    border-bottom:
        1px solid var(--border);

}


.calculator-result-row span {

    color:
        var(--text-secondary);

}


.calculator-result-total {

    border-bottom:
        none;

    background:
        var(--primary-soft);

}


.calculator-result-total span {

    font-weight:
        800;

}


.calculator-result-total strong {

    color:
        var(--primary);

    font-size:
        19px;

}


/* ==========================================================
   PRODUCT LIST
========================================================== */

.product-list-section {

    margin-top:
        24px;

}


.product-list-section > h3 {

    margin-bottom:
        14px;

}


#productList {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


/* Product cards generated by JS */

.product-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        16px;

    box-shadow:
        0 4px 14px var(--shadow);

}


.product-card h3 {

    margin-bottom:
        5px;

}


.product-card p {

    color:
        var(--text-secondary);

    font-size:
        14px;

}


/* ==========================================================
   SEARCH / FILTERS
========================================================== */

.search-card {

    padding:
        14px;

}


.filter-bar {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-bottom:
        20px;

}


/* ==========================================================
   IMAGE PREVIEW
========================================================== */

.image-preview {

    display:
        block;

    max-width:
        180px;

    max-height:
        180px;

    margin:
        12px 0;

    border-radius:
        var(--radius-medium);

    border:
        1px solid var(--border);

    object-fit:
        cover;

}


/* ==========================================================
   CATEGORY LIST
========================================================== */

#categorySummary {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        8px;

}


#categorySummary li {

    padding:
        10px 12px;

    background:
        var(--surface-alt);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    color:
        var(--text-secondary);

}


/* ==========================================================
   REPORTS
========================================================== */

#reportsPage .info-card ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


#reportsPage .info-card li {

    padding:
        10px 12px;

    background:
        var(--surface-alt);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

}


/* ==========================================================
   RECEIPT CARDS
========================================================== */

.calculator-receipt-card,
.calculator-receipt {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        18px;

    margin-bottom:
        12px;

    box-shadow:
        0 4px 14px var(--shadow);

}


.calculator-receipt-header {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        12px;

}


.calculator-receipt-header small {

    color:
        var(--text-muted);

}


.calculator-receipt-details {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        10px;

}


.calculator-receipt-details div {

    padding:
        10px;

    border-radius:
        var(--radius-small);

    background:
        var(--surface-alt);

}


.calculator-receipt-details span {

    display:
        block;

    color:
        var(--text-secondary);

    font-size:
        12px;

}


.calculator-receipt-details strong {

    display:
        block;

    margin-top:
        3px;

}


/* ==========================================================
   COMPLETED SHOPPING
========================================================== */

.completed-shopping-card {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    padding:
        18px;

    margin-bottom:
        14px;

    box-shadow:
        0 4px 14px var(--shadow);

}


.completed-shopping-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        9px 0;

    border-bottom:
        1px solid var(--border);

}


.completed-shopping-item:last-child {

    border-bottom:
        none;

}


.calculator-receipt-total {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        14px;

    padding-top:
        14px;

    border-top:
        1px solid var(--border);

}


/* ==========================================================
   SCANNER
========================================================== */

#scanner {

    min-height:
        250px;

    border:
        1px dashed var(--border-strong);

    border-radius:
        var(--radius-large);

    overflow:
        hidden;

    background:
        var(--surface-alt);

    margin-bottom:
        18px;

}


#scanner video {

    width:
        100%;

}


#scanner canvas {

    max-width:
        100%;

}


/* ==========================================================
   SETTINGS
========================================================== */

.setting-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        15px 0;

    border-bottom:
        1px solid var(--border);

}


.setting-row:last-child {

    border-bottom:
        none;

}


.setting-row label {

    margin:
        0;

    color:
        var(--text-primary);

}


.setting-row small {

    display:
        block;

    color:
        var(--text-muted);

    margin-top:
        4px;

}


.settings-option {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        15px 0;

}


.settings-option input[type="checkbox"] {

    width:
        20px;

    height:
        20px;

    accent-color:
        var(--primary);

}


/* ==========================================================
   FILE INPUT
========================================================== */

input[type="file"] {

    padding:
        9px;

}


input[type="file"]::file-selector-button {

    margin-right:
        10px;

    padding:
        7px 10px;

    border:
        none;

    border-radius:
        7px;

    background:
        var(--primary);

    color:
        white;

    cursor:
        pointer;

}


/* ==========================================================
   BOTTOM NAVIGATION
========================================================== */

.bottom-nav {

    position:
        fixed;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        1000;

    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    background:
        var(--nav-background);

    border-top:
        1px solid var(--nav-border);

    box-shadow:
        0 -5px 20px var(--shadow);

    padding:
        7px 8px;

    transition:
        background-color 0.25s ease;

}


.bottom-nav button {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        2px;

    min-height:
        58px;

    border:
        none;

    background:
        transparent;

    color:
        var(--text-muted);

    border-radius:
        10px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;

}


.bottom-nav button:hover {

    background:
        var(--surface-alt);

}


.bottom-nav button.active {

    color:
        var(--primary);

    background:
        var(--primary-soft);

}


.nav-icon {

    font-size:
        20px;

}


.nav-text {

    font-size:
        11px;

    font-weight:
        650;

}


/* ==========================================================
   TOAST
========================================================== */

.toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        90px;

    z-index:
        3000;

    transform:
        translateX(-50%);

    max-width:
        calc(100vw - 40px);

    padding:
        12px 18px;

    border-radius:
        999px;

    background:
        #26332A;

    color:
        #FFFFFF;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.25);

    font-size:
        14px;

    font-weight:
        600;

    animation:
        toastIn 0.2s ease;

}


@keyframes toastIn {

    from {

        opacity:
            0;

        transform:
            translate(-50%, 10px);

    }

    to {

        opacity:
            1;

        transform:
            translate(-50%, 0);

    }

}


/* ==========================================================
   DARK MODE SELECT / OPTION FIX
========================================================== */

body.dark-mode select option {

    background:
        #18201B;

    color:
        #F1F5F2;

}


/* ==========================================================
   DARK MODE DATE / NUMBER CONTROLS
========================================================== */

body.dark-mode input[type="date"],
body.dark-mode input[type="number"] {

    color-scheme:
        dark;

}


/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width: 900px) {

    .dashboard-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .dashboard-details {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .shopping-summary {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 650px) {

    .app-container {

        padding:
            16px 14px 105px;

    }


    .logo-area {

        padding:
            16px 0 22px;

    }


    .dashboard-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;

    }


    .dashboard-card {

        padding:
            15px;

    }


    .dashboard-card h3 {

        font-size:
            14px;

    }


    .dashboard-card h1,
    .dashboard-card h2 {

        font-size:
            24px;

    }


    .dashboard-details {

        grid-template-columns:
            1fr;

    }


    .two-columns {

        grid-template-columns:
            1fr;

    }


    .filter-bar {

        grid-template-columns:
            1fr;

    }


    .shopping-trip-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .shopping-trip-header .primary-button {

        width:
            100%;

    }


    .shopping-item {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .shopping-item-total {

        justify-content:
            flex-start;

        min-width:
            auto;

    }


    .shopping-item-actions {

        width:
            100%;

    }


    .shopping-item-actions button {

        flex:
            1;

        min-width:
            85px;

    }


    .shopping-summary {

        grid-template-columns:
            1fr 1fr;

    }


    .shopping-summary-card {

        padding:
            14px;

    }


    .calculator-receipt-details {

        grid-template-columns:
            1fr;

    }


    .section-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .section-header button {

        width:
            100%;

    }


    .bottom-nav {

        padding:
            5px 4px;

    }


    .bottom-nav button {

        min-height:
            55px;

    }


    .nav-icon {

        font-size:
            18px;

    }


    .nav-text {

        font-size:
            9px;

    }

}


/* ==========================================================
   VERY SMALL DEVICES
========================================================== */

@media (max-width: 400px) {

    .dashboard-grid {

        grid-template-columns:
            1fr;

    }


    .shopping-summary {

        grid-template-columns:
            1fr;

    }


    .button-group {

        flex-direction:
            column;

    }


    .button-group button {

        width:
            100%;

    }


    .shopping-edit-modal-footer {

        flex-direction:
            column;

    }


    .bottom-nav {

        grid-template-columns:
            repeat(6, 1fr);

    }


    .nav-text {

        display:
            none;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        3px solid
        rgba(102, 187, 106, 0.45);

    outline-offset:
        2px;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    * {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}

/* ==========================================================
   PANVIYO Smart Pantry
   EXPIRY ALERT UI
   Light Mode + Dark Mode
========================================================== */


/* ==========================================================
   EXPIRY ALERTS CONTAINER
========================================================== */

#expiryAlerts {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 16px;

}


/* ==========================================================
   BASE EXPIRY ALERT
========================================================== */

.expiry-alert {

    display: block;

    width: 100%;

    padding: 18px 20px;

    border-radius: 16px;

    border-left: 6px solid;

    box-shadow:
        0 3px 10px var(--shadow);

    font-family:
        var(--font-family);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.25s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.expiry-alert:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 18px var(--shadow-strong);

}


/* ==========================================================
   ALERT TITLE
========================================================== */

.expiry-alert strong {

    display: block;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 6px;

}


/* ==========================================================
   ALERT MESSAGE
========================================================== */

.expiry-alert p {

    margin: 0;

    font-size: 15px;

    line-height: 1.5;

}


/* ==========================================================
   EXPIRY REMINDER
   LIGHT MODE
========================================================== */

.expiry-alert.warning {

    background-color:
        #FFF8E7;

    border-left-color:
        #FF9800;

}


.expiry-alert.warning strong {

    color:
        #E65100;

}


.expiry-alert.warning p {

    color:
        #8D6E63;

}


/* ==========================================================
   EXPIRED PRODUCT
   LIGHT MODE
========================================================== */

.expiry-alert.danger {

    background-color:
        #FDECEF;

    border-left-color:
        #F44336;

}


.expiry-alert.danger strong {

    color:
        #D32F2F;

}


.expiry-alert.danger p {

    color:
        #B71C1C;

}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode .expiry-alert {

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.40);

}


body.dark-mode .expiry-alert:hover {

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.55);

}


/* ==========================================================
   EXPIRY REMINDER
   DARK MODE
========================================================== */

body.dark-mode .expiry-alert.warning {

    background-color:
        #3B3216;

    border-left-color:
        #FF9800;

}


body.dark-mode .expiry-alert.warning strong {

    color:
        #FFB74D;

}


body.dark-mode .expiry-alert.warning p {

    color:
        #D6B66B;

}


/* ==========================================================
   EXPIRED PRODUCT
   DARK MODE
========================================================== */

body.dark-mode .expiry-alert.danger {

    background-color:
        #3A1E22;

    border-left-color:
        #F44336;

}


body.dark-mode .expiry-alert.danger strong {

    color:
        #EF9A9A;

}


body.dark-mode .expiry-alert.danger p {

    color:
        #E0A2A6;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    #expiryAlerts {

        gap: 12px;

    }


    .expiry-alert {

        padding:
            16px 16px;

        border-left-width:
            5px;

        border-radius:
            14px;

    }


    .expiry-alert strong {

        font-size:
            17px;

    }


    .expiry-alert p {

        font-size:
            14px;

    }

}

/* ==========================================================
   PANVIYO PRODUCT CARD
   STATUS + ACTION BUTTONS
   Light Mode + Dark Mode
========================================================== */


/* ==========================================================
   PRODUCT STATUS BADGE
========================================================== */

.product-card .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    padding: 6px 12px;

    margin-top: 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    border: 1px solid transparent;

}


/* ==========================================================
   FRESH
   GREEN
========================================================== */

.product-card .badge.fresh {

    background-color: #E8F5E9;

    color: #2E7D32;

    border-color: #A5D6A7;

}


/* ==========================================================
   EXPIRING SOON
   ORANGE
========================================================== */

.product-card .badge.warning {

    background-color: #FFF3E0;

    color: #E65100;

    border-color: #FFCC80;

}


/* ==========================================================
   EXPIRED
   RED
========================================================== */

.product-card .badge.expired,
.product-card .badge.danger {

    background-color: #FFEBEE;

    color: #C62828;

    border-color: #EF9A9A;

}


/* ==========================================================
   PRODUCT ACTIONS
========================================================== */

.product-card .actions {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;

}


/* ==========================================================
   ALL ACTION BUTTONS
========================================================== */

.product-card .actions button {

    border: 1px solid transparent;

    border-radius: 10px;

    padding: 8px 12px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;

}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.product-card .actions button:hover {

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px var(--shadow);

}


/* ==========================================================
   EDIT BUTTON
   BLUE
========================================================== */

.product-card .actions button:first-child {

    background-color: #E3F2FD;

    color: #1565C0;

    border-color: #90CAF9;

}


/* ==========================================================
   EDIT HOVER
========================================================== */

.product-card .actions button:first-child:hover {

    background-color: #BBDEFB;

    color: #0D47A1;

}


/* ==========================================================
   REMOVE IMAGE BUTTON
   PURPLE
========================================================== */

.product-card .actions button:nth-child(3) {

    background-color: #F3E5F5;

    color: #7B1FA2;

    border-color: #CE93D8;

}


/* ==========================================================
   REMOVE IMAGE HOVER
========================================================== */

.product-card .actions button:nth-child(3):hover {

    background-color: #E1BEE7;

    color: #6A1B9A;

}


/* ==========================================================
   DELETE BUTTON
   RED
========================================================== */

.product-card .actions button:last-child {

    background-color: #FFEBEE;

    color: #C62828;

    border-color: #EF9A9A;

}


/* ==========================================================
   DELETE HOVER
========================================================== */

.product-card .actions button:last-child:hover {

    background-color: #FFCDD2;

    color: #B71C1C;

}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode .product-card .badge.fresh {

    background-color: #183A21;

    color: #81C784;

    border-color: #388E3C;

}


body.dark-mode .product-card .badge.warning {

    background-color: #3B2B16;

    color: #FFB74D;

    border-color: #EF6C00;

}


body.dark-mode .product-card .badge.expired,
body.dark-mode .product-card .badge.danger {

    background-color: #3A1E22;

    color: #EF9A9A;

    border-color: #C62828;

}


/* ==========================================================
   DARK MODE - EDIT
========================================================== */

body.dark-mode .product-card .actions button:first-child {

    background-color: #172B3D;

    color: #90CAF9;

    border-color: #1976D2;

}


body.dark-mode .product-card .actions button:first-child:hover {

    background-color: #1E3A52;

    color: #BBDEFB;

}


/* ==========================================================
   DARK MODE - REMOVE IMAGE
========================================================== */

body.dark-mode .product-card .actions button:nth-child(3) {

    background-color: #302039;

    color: #CE93D8;

    border-color: #8E24AA;

}


body.dark-mode .product-card .actions button:nth-child(3):hover {

    background-color: #432A50;

    color: #E1BEE7;

}


/* ==========================================================
   DARK MODE - DELETE
========================================================== */

body.dark-mode .product-card .actions button:last-child {

    background-color: #3A1E22;

    color: #EF9A9A;

    border-color: #C62828;

}


body.dark-mode .product-card .actions button:last-child:hover {

    background-color: #4A252A;

    color: #FFCDD2;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .product-card .actions {

        gap: 7px;

    }


    .product-card .actions button {

        padding: 8px 10px;

        font-size: 12px;

    }


    .product-card .badge {

        font-size: 12px;

        padding: 6px 10px;

    }

}
/* ==========================================================
   PRODUCT CARD STATUS + ACTION BUTTONS
   PANVIYO Smart Pantry
========================================================== */


/* ==========================================================
   PRODUCT CARD BASE
========================================================== */

.product-card {

    position: relative;

    border-left: 6px solid transparent;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;

}


/* ==========================================================
   PRODUCT CARD HOVER
========================================================== */

.product-card:hover {

    transform: translateY(-2px);

}


/* ==========================================================
   FRESH PRODUCT
   Green
========================================================== */

.product-card:has(.badge.fresh) {

    border-left-color: #2E7D32;

}


/* ==========================================================
   EXPIRING PRODUCT
   Orange
========================================================== */

.product-card:has(.badge.warning),
.product-card:has(.badge.expiring),
.product-card:has(.badge.expiring-soon) {

    border-left-color: #FF9800;

}


/* ==========================================================
   EXPIRED PRODUCT
   Red
========================================================== */

.product-card:has(.badge.expired),
.product-card:has(.badge.danger) {

    border-left-color: #F44336;

}


/* ==========================================================
   STATUS BADGES
========================================================== */


/* Fresh */

.product-card .badge.fresh {

    background-color: #E8F5E9;

    color: #2E7D32;

    border: 1px solid #A5D6A7;

}


/* Expiring */

.product-card .badge.warning,
.product-card .badge.expiring,
.product-card .badge.expiring-soon {

    background-color: #FFF3E0;

    color: #E65100;

    border: 1px solid #FFCC80;

}


/* Expired */

.product-card .badge.expired,
.product-card .badge.danger {

    background-color: #FFEBEE;

    color: #C62828;

    border: 1px solid #EF9A9A;

}


/* ==========================================================
   PRODUCT ACTION BUTTONS
========================================================== */

.product-card .actions {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;

}


/* Base action button */

.product-card .actions button {

    border: none;

    border-radius: 10px;

    padding: 9px 13px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;

}


/* Button press */

.product-card .actions button:active {

    transform: scale(0.97);

}


/* ==========================================================
   EDIT BUTTON
   Blue
========================================================== */

.product-card .actions button:nth-child(1) {

    background-color: #E3F2FD;

    color: #1565C0;

    border: 1px solid #90CAF9;

}


.product-card .actions button:nth-child(1):hover {

    background-color: #BBDEFB;

    color: #0D47A1;

}


/* ==========================================================
   ADD TO SHOPPING
   Green
========================================================== */

.product-card .actions button:nth-child(2) {

    background-color: #E8F5E9;

    color: #2E7D32;

    border: 1px solid #A5D6A7;

}


.product-card .actions button:nth-child(2):hover {

    background-color: #C8E6C9;

    color: #1B5E20;

}


/* ==========================================================
   REMOVE IMAGE
   Purple
========================================================== */

.product-card .actions button:nth-child(3) {

    background-color: #F3E5F5;

    color: #7B1FA2;

    border: 1px solid #CE93D8;

}


.product-card .actions button:nth-child(3):hover {

    background-color: #E1BEE7;

    color: #6A1B9A;

}


/* ==========================================================
   DELETE
   Red
========================================================== */

.product-card .actions button:last-child {

    background-color: #FFEBEE;

    color: #C62828;

    border: 1px solid #EF9A9A;

}


.product-card .actions button:last-child:hover {

    background-color: #FFCDD2;

    color: #B71C1C;

}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode .product-card {

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.35);

}


/* ==========================================================
   DARK MODE — STATUS BADGES
========================================================== */


/* Fresh */

body.dark-mode .product-card .badge.fresh {

    background-color: #1B3A22;

    color: #81C784;

    border-color: #388E3C;

}


/* Expiring */

body.dark-mode .product-card .badge.warning,
body.dark-mode .product-card .badge.expiring,
body.dark-mode .product-card .badge.expiring-soon {

    background-color: #3B2B14;

    color: #FFB74D;

    border-color: #F57C00;

}


/* Expired */

body.dark-mode .product-card .badge.expired,
body.dark-mode .product-card .badge.danger {

    background-color: #3A1E22;

    color: #EF9A9A;

    border-color: #D32F2F;

}


/* ==========================================================
   DARK MODE — EDIT
========================================================== */

body.dark-mode .product-card .actions button:nth-child(1) {

    background-color: #162D40;

    color: #64B5F6;

    border-color: #1976D2;

}


body.dark-mode .product-card .actions button:nth-child(1):hover {

    background-color: #1E3A52;

}


/* ==========================================================
   DARK MODE — ADD TO SHOPPING
========================================================== */

body.dark-mode .product-card .actions button:nth-child(2) {

    background-color: #193522;

    color: #81C784;

    border-color: #388E3C;

}


body.dark-mode .product-card .actions button:nth-child(2):hover {

    background-color: #21462B;

}


/* ==========================================================
   DARK MODE — REMOVE IMAGE
========================================================== */

body.dark-mode .product-card .actions button:nth-child(3) {

    background-color: #302039;

    color: #CE93D8;

    border-color: #8E24AA;

}


body.dark-mode .product-card .actions button:nth-child(3):hover {

    background-color: #3E2949;

}


/* ==========================================================
   DARK MODE — DELETE
========================================================== */

body.dark-mode .product-card .actions button:last-child {

    background-color: #3A1E22;

    color: #EF9A9A;

    border-color: #D32F2F;

}


body.dark-mode .product-card .actions button:last-child:hover {

    background-color: #4A252A;

}


/* ==========================================================
   MOBILE PRODUCT ACTIONS
========================================================== */

@media (max-width: 600px) {

    .product-card .actions {

        gap: 6px;

    }


    .product-card .actions button {

        flex: 1 1 auto;

        min-width: 120px;

        padding: 9px 10px;

        font-size: 12px;

    }

}

/* ==========================================================
   PANVIYO PRODUCT EXPIRY BADGES
   Works with existing createProductCard()
   No JavaScript changes required
========================================================== */


/* ==========================================================
   BASE BADGE
========================================================== */

.product-card .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-top: 12px;
    padding: 7px 14px;

    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.2px;

    border: 1px solid transparent;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


/* ==========================================================
   FRESH
   Green
========================================================== */

.product-card .badge.fresh {

    background: #DCFCE7;

    color: #166534;

    border-color: #86EFAC;
}


/* ==========================================================
   EXPIRING SOON / WARNING
   Orange
========================================================== */

.product-card .badge.warning {

    background: #FEF3C7;

    color: #B45309;

    border-color: #F59E0B;
}


/* ==========================================================
   EXPIRED
   Red
========================================================== */

.product-card .badge.expired {

    background: #FEE2E2;

    color: #B91C1C;

    border-color: #FCA5A5;
}


/* ==========================================================
   DARK MODE
========================================================== */

body.dark-mode .product-card .badge.fresh {

    background: #14532D;

    color: #BBF7D0;

    border-color: #22C55E;
}


body.dark-mode .product-card .badge.warning {

    background: #78350F;

    color: #FDE68A;

    border-color: #F59E0B;
}


body.dark-mode .product-card .badge.expired {

    background: #7F1D1D;

    color: #FECACA;

    border-color: #EF4444;
}


/* ==========================================================
   ALTERNATIVE DARK-MODE SELECTOR
   Supports applications using data-theme="dark"
========================================================== */

[data-theme="dark"] .product-card .badge.fresh {

    background: #14532D;

    color: #BBF7D0;

    border-color: #22C55E;
}


[data-theme="dark"] .product-card .badge.warning {

    background: #78350F;

    color: #FDE68A;

    border-color: #F59E0B;
}


[data-theme="dark"] .product-card .badge.expired {

    background: #7F1D1D;

    color: #FECACA;

    border-color: #EF4444;
}


/* ==========================================================
   HOVER EFFECT
========================================================== */

.product-card .badge:hover {

    transform: translateY(-1px);

}


/* ==========================================================
   OPTIONAL STATUS DOT
   Adds a small visual indicator before the text
========================================================== */

.product-card .badge.fresh::before {

    content: "●";

    margin-right: 6px;

    font-size: 0.65rem;
}


.product-card .badge.warning::before {

    content: "●";

    margin-right: 6px;

    font-size: 0.65rem;
}


.product-card .badge.expired::before {

    content: "●";

    margin-right: 6px;

    font-size: 0.65rem;
}
/* ==========================================================
   PRODUCT CARD - EXPIRING SOON
   Existing JS classes:
   .badge.soon
   .badge.today
========================================================== */


/* ==========================================================
   EXPIRING SOON - ORANGE
========================================================== */

.product-card:has(.badge.soon) {

    border: 2px solid #F59E0B;

    background: #FFFBEB;

    box-shadow:
        0 4px 12px rgba(245, 158, 11, 0.12);

}


/* ==========================================================
   EXPIRING TODAY - ORANGE / STRONGER WARNING
========================================================== */

.product-card:has(.badge.today) {

    border: 2px solid #F97316;

    background: #FFF7ED;

    box-shadow:
        0 4px 12px rgba(249, 115, 22, 0.15);

}


/* ==========================================================
   SOON BADGE
========================================================== */

.product-card .badge.soon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    margin-top: 12px;

    padding: 7px 14px;

    border-radius: 999px;

    background: #FEF3C7;

    color: #B45309;

    border: 1px solid #F59E0B;

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.2px;

}


/* ==========================================================
   TODAY BADGE
========================================================== */

.product-card .badge.today {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    margin-top: 12px;

    padding: 7px 14px;

    border-radius: 999px;

    background: #FFEDD5;

    color: #C2410C;

    border: 1px solid #F97316;

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.2px;

}


/* ==========================================================
   STATUS DOT
========================================================== */

.product-card .badge.soon::before {

    content: "●";

    margin-right: 6px;

    font-size: 0.65rem;

}


.product-card .badge.today::before {

    content: "●";

    margin-right: 6px;

    font-size: 0.65rem;

}


/* ==========================================================
   DARK MODE - EXPIRING SOON
========================================================== */

body.dark-mode .product-card:has(.badge.soon) {

    background: #422006;

    border-color: #F59E0B;

    box-shadow:
        0 4px 12px rgba(245, 158, 11, 0.18);

}


body.dark-mode .product-card .badge.soon {

    background: #78350F;

    color: #FDE68A;

    border-color: #F59E0B;

}


/* ==========================================================
   DARK MODE - EXPIRING TODAY
========================================================== */

body.dark-mode .product-card:has(.badge.today) {

    background: #431407;

    border-color: #F97316;

    box-shadow:
        0 4px 12px rgba(249, 115, 22, 0.2);

}


body.dark-mode .product-card .badge.today {

    background: #7C2D12;

    color: #FED7AA;

    border-color: #F97316;

}


/* ==========================================================
   ALTERNATIVE DARK MODE
   For themes using data-theme="dark"
========================================================== */

[data-theme="dark"] .product-card:has(.badge.soon) {

    background: #422006;

    border-color: #F59E0B;

}


[data-theme="dark"] .product-card .badge.soon {

    background: #78350F;

    color: #FDE68A;

    border-color: #F59E0B;

}


[data-theme="dark"] .product-card:has(.badge.today) {

    background: #431407;

    border-color: #F97316;

}


[data-theme="dark"] .product-card .badge.today {

    background: #7C2D12;

    color: #FED7AA;

    border-color: #F97316;

}

/* ==========================================================
   PRODUCT CARD - EXPIRING SOON
   Existing JS classes:
   .badge.soon
   .badge.today
========================================================== */


/* ==========================================================
   EXPIRING SOON - ORANGE
========================================================== */

.product-card:has(.badge.soon) {

    border: 2px solid #F59E0B;

    background: #FFFBEB;

    box-shadow:
        0 4px 12px rgba(245, 158, 11, 0.12);

}


/* ==========================================================
   EXPIRING TODAY - ORANGE / STRONGER WARNING
========================================================== */

.product-card:has(.badge.today) {

    border: 2px solid #F97316;

    background: #FFF7ED;

    box-shadow:
        0 4px 12px rgba(249, 115, 22, 0.15);

}


/* ==========================================================
   SOON BADGE
========================================================== */

.product-card .badge.soon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    margin-top: 12px;

    padding: 7px 14px;

    border-radius: 999px;

    background: #FEF3C7;

    color: #B45309;

    border: 1px solid #F59E0B;

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.2px;

}


/* ==========================================================
   TODAY BADGE
========================================================== */

.product-card .badge.today {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    margin-top: 12px;

    padding: 7px 14px;

    border-radius: 999px;

    background: #FFEDD5;

    color: #C2410C;

    border: 1px solid #F97316;

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.2px;

}


/* ==========================================================
   STATUS DOT
========================================================== */

.product-card .badge.soon::before {

    content: "●";

    margin-right: 6px;

    font-size: 0.65rem;

}


.product-card .badge.today::before {

    content: "●";

    margin-right: 6px;

    font-size: 0.65rem;

}


/* ==========================================================
   DARK MODE - EXPIRING SOON
========================================================== */

body.dark-mode .product-card:has(.badge.soon) {

    background: #422006;

    border-color: #F59E0B;

    box-shadow:
        0 4px 12px rgba(245, 158, 11, 0.18);

}


body.dark-mode .product-card .badge.soon {

    background: #78350F;

    color: #FDE68A;

    border-color: #F59E0B;

}


/* ==========================================================
   DARK MODE - EXPIRING TODAY
========================================================== */

body.dark-mode .product-card:has(.badge.today) {

    background: #431407;

    border-color: #F97316;

    box-shadow:
        0 4px 12px rgba(249, 115, 22, 0.2);

}


body.dark-mode .product-card .badge.today {

    background: #7C2D12;

    color: #FED7AA;

    border-color: #F97316;

}


/* ==========================================================
   ALTERNATIVE DARK MODE
   For themes using data-theme="dark"
========================================================== */

[data-theme="dark"] .product-card:has(.badge.soon) {

    background: #422006;

    border-color: #F59E0B;

}


[data-theme="dark"] .product-card .badge.soon {

    background: #78350F;

    color: #FDE68A;

    border-color: #F59E0B;

}


[data-theme="dark"] .product-card:has(.badge.today) {

    background: #431407;

    border-color: #F97316;

}


[data-theme="dark"] .product-card .badge.today {

    background: #7C2D12;

    color: #FED7AA;

    border-color: #F97316;

}

/* ==========================================================
   SHOPPING MODALS
========================================================== */

.shopping-modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.shopping-modal.active {
    display: flex;
}

.shopping-edit-card {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 18px;
    box-sizing: border-box;
    padding: 24px;
    position: relative;
}

.shopping-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.shopping-edit-header h2 {
    margin: 0 0 5px 0;
}

.shopping-edit-header p {
    margin: 0;
}

.shopping-modal-close {
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.shopping-edit-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shopping-edit-item-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.shopping-edit-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    background: #f3f4f6;
    margin-top: 10px;
}

.shopping-edit-total-box strong {
    font-size: 22px;
}

.shopping-trip-details-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-top: 20px;
}

.shopping-trip-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shopping-current-trip-display {
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 12px;
    background: #f3f4f6;
    font-size: 15px;
}

.shopping-trip-total-store {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

@media (max-width: 700px) {

    .shopping-trip-details-form {
        grid-template-columns: 1fr;
    }

    .shopping-edit-card {
        max-width: 100%;
        padding: 18px;
    }

}
/* ==========================================================
   SHOPPING DASHBOARD
========================================================== */

.shopping-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.shopping-dashboard-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 18px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}

.shopping-dashboard-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 24px;
    background: #f3f4f6;
}

.shopping-dashboard-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shopping-dashboard-info span {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.shopping-dashboard-info strong {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
}

.shopping-dashboard-items .shopping-dashboard-icon {
    background: #e0f2fe;
}

.shopping-dashboard-estimated .shopping-dashboard-icon {
    background: #dcfce7;
}

.shopping-dashboard-bought .shopping-dashboard-icon {
    background: #dbeafe;
}

.shopping-dashboard-purchased .shopping-dashboard-icon {
    background: #ede9fe;
}

.shopping-dashboard-budget .shopping-dashboard-icon {
    background: #fef3c7;
}

.shopping-dashboard-remaining .shopping-dashboard-icon {
    background: #d1fae5;
}


/* ==========================================================
   TRIP DETAILS
========================================================== */

.shopping-trip-details-card {
    margin-bottom: 20px;
}

.shopping-trip-details-status {
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: 12px;
    background: #f0fdf4;
    color: #166534;
    font-size: 14px;
}

.shopping-current-trip-display {
    margin: 12px 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
}

.shopping-current-trip-display strong {
    color: #111827;
}


/* ==========================================================
   EDIT MODAL
========================================================== */

.shopping-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
}

.shopping-modal.active {
    display: flex;
}

.shopping-edit-card {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.shopping-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border-bottom: 1px solid #e5e7eb;
}

.shopping-edit-header h2 {
    margin: 0;
}

.shopping-edit-header p {
    margin: 6px 0 0;
    color: #6b7280;
}

.shopping-modal-close {
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
}

.shopping-edit-body {
    padding: 22px;
}

.shopping-edit-item-name {
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    font-weight: 700;
}

.shopping-edit-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0;
    padding: 16px;
    border-radius: 12px;
    background: #f0fdf4;
}

.shopping-edit-total-box strong {
    font-size: 22px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .shopping-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 480px) {

    .shopping-dashboard {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   AUTHENTICATION
========================================================== */

body.auth-locked {
    min-height: 100vh;
}

body.auth-locked .app-header,
body.auth-locked #app,
body.auth-locked .bottom-nav,
body.auth-locked #floatingAddButton {
    display: none !important;
}

.auth-page {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background: var(--background);
}

/* Build 053: neutral session-restoration screen; never flash the login form. */
body.auth-checking .auth-card {
    display: none !important;
}

body.auth-checking .auth-page::after {
    content: "Checking your session…";
    display: block;
    padding: 22px 28px;
    color: var(--text);
    font-size: 1rem;
    text-align: center;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 24px 70px var(--shadow-strong);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.auth-brand-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--primary-soft);
    font-size: 25px;
}

.auth-brand strong,
.auth-brand span {
    display: block;
}

.auth-brand strong {
    color: var(--text-primary);
    font-size: 20px;
}

.auth-brand span {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 13px;
}

.auth-heading h2 {
    margin: 0 0 8px;
    color: var(--text-primary);
}

.auth-heading p {
    margin: 0 0 22px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.auth-field {
    margin-bottom: 16px;
}

.auth-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-primary);
    font-weight: 700;
}

.auth-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-background);
    color: var(--text-primary);
    font: inherit;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.auth-link {
    border: 0;
    padding: 3px 6px;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-message {
    min-height: 22px;
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.auth-message.error {
    color: var(--danger);
}

.auth-message.success {
    color: var(--success);
}

.auth-message.info {
    color: var(--text-secondary);
}

.auth-security-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.auth-account-card p {
    word-break: break-word;
}

@media (max-width: 480px) {

    .auth-page {
        padding: 14px;
    }

    .auth-card {
        padding: 22px;
        border-radius: 18px;
    }

}
/* ==========================================================
   PANVIYO MODAL DARK MODE CONSISTENCY
   ----------------------------------------------------------
   Applies the same theme to all current and runtime modals.
========================================================== */

/* Shared theme aliases */
:root {
    --card-bg: var(--surface);
    --border-color: var(--border);
}

/* ----------------------------------------------------------
   MODAL OVERLAYS
---------------------------------------------------------- */

.shopping-modal,
.shopping-edit-modal,
.shopping-trip-calculator-modal {
    background: var(--modal-overlay) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ----------------------------------------------------------
   MODAL CONTENT
---------------------------------------------------------- */

.shopping-modal-content,
.shopping-add-modal-content,
.shopping-edit-card,
.shopping-edit-modal-content,
.shopping-trip-calculator-content {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 20px 60px var(--shadow-strong) !important;
}


/* ----------------------------------------------------------
   MODAL HEADINGS
---------------------------------------------------------- */

.shopping-modal h1,
.shopping-modal h2,
.shopping-modal h3,
.shopping-modal h4,

.shopping-modal-content h1,
.shopping-modal-content h2,
.shopping-modal-content h3,
.shopping-modal-content h4,

.shopping-edit-card h1,
.shopping-edit-card h2,
.shopping-edit-card h3,
.shopping-edit-card h4,

.shopping-edit-modal-content h1,
.shopping-edit-modal-content h2,
.shopping-edit-modal-content h3,
.shopping-edit-modal-content h4,

.shopping-trip-calculator-content h1,
.shopping-trip-calculator-content h2,
.shopping-trip-calculator-content h3,
.shopping-trip-calculator-content h4 {
    color: var(--text-primary) !important;
}


/* ----------------------------------------------------------
   MODAL SECONDARY TEXT
---------------------------------------------------------- */

.shopping-modal p,
.shopping-modal-content p,
.shopping-edit-card p,
.shopping-edit-modal-content p,
.shopping-trip-calculator-content p {
    color: var(--text-secondary) !important;
}


/* ----------------------------------------------------------
   MODAL LABELS
---------------------------------------------------------- */

.shopping-modal label,
.shopping-edit-card label,
.shopping-edit-modal-content label,
.shopping-trip-calculator-content label {
    color: var(--text-secondary) !important;
}


/* ----------------------------------------------------------
   MODAL INPUTS
---------------------------------------------------------- */

.shopping-modal input,
.shopping-modal select,
.shopping-modal textarea,

.shopping-modal-content input,
.shopping-modal-content select,
.shopping-modal-content textarea,

.shopping-edit-card input,
.shopping-edit-card select,
.shopping-edit-card textarea,

.shopping-edit-modal-content input,
.shopping-edit-modal-content select,
.shopping-edit-modal-content textarea,

.shopping-trip-calculator-content input,
.shopping-trip-calculator-content select,
.shopping-trip-calculator-content textarea {
    background: var(--input-background) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}


/* Placeholder text */

.shopping-modal input::placeholder,
.shopping-modal textarea::placeholder,
.shopping-modal-content input::placeholder,
.shopping-modal-content textarea::placeholder,
.shopping-edit-card input::placeholder,
.shopping-edit-card textarea::placeholder,
.shopping-edit-modal-content input::placeholder,
.shopping-edit-modal-content textarea::placeholder,
.shopping-trip-calculator-content input::placeholder,
.shopping-trip-calculator-content textarea::placeholder {
    color: var(--text-muted) !important;
}


/* ----------------------------------------------------------
   CLOSE BUTTONS
---------------------------------------------------------- */

.shopping-modal-close,
.shopping-edit-close {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.shopping-modal-close:hover,
.shopping-edit-close:hover {
    background: var(--surface-alt) !important;
}


/* ----------------------------------------------------------
   MODAL TOTAL / SUMMARY BOXES
---------------------------------------------------------- */

.shopping-modal-total,
.shopping-edit-total,
.shopping-edit-total-box,
.shopping-current-trip-display,
.shopping-trip-details-status {
    background: var(--surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}


/* ----------------------------------------------------------
   TRIP TOTAL ROWS
---------------------------------------------------------- */

.shopping-trip-total-store {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}


/* ==========================================================
   RUNTIME-GENERATED SHOPPING MODALS
   ----------------------------------------------------------
   These are created by shopping.js with inline styles.
========================================================== */

#shoppingAddModal,
#shoppingBudgetModal,
#shoppingEditModalRuntime {
    background: var(--modal-overlay) !important;
}


/* Runtime modal card */

#shoppingAddModal > div,
#shoppingBudgetModal > div,
#shoppingEditModalRuntime > div {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 20px 60px var(--shadow-strong) !important;
}


/* Runtime modal text */

#shoppingAddModal p,
#shoppingBudgetModal p,
#shoppingEditModalRuntime p {
    color: var(--text-secondary) !important;
}


/* Runtime inputs */

#shoppingAddModal input,
#shoppingAddModal select,
#shoppingAddModal textarea,

#shoppingBudgetModal input,
#shoppingBudgetModal select,
#shoppingBudgetModal textarea,

#shoppingEditModalRuntime input,
#shoppingEditModalRuntime select,
#shoppingEditModalRuntime textarea {
    background: var(--input-background) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}


/* Runtime calculated totals */

#shoppingAddModal [id$="Total"],
#shoppingEditModalRuntime [id$="TotalRuntime"] {
    background: var(--surface-alt) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}


/* Runtime close buttons */

#shoppingAddModal button[aria-label="Close"],
#shoppingBudgetModal button[aria-label="Close"],
#shoppingEditModalRuntime button[aria-label="Close"] {
    color: var(--text-primary) !important;
}


/* ==========================================================
   LEGACY SHOPPING MODAL ELEMENTS
========================================================== */

body.dark-mode .shopping-edit-card,
body.dark-mode .shopping-edit-modal-content {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}


body.dark-mode .shopping-edit-item-name,
body.dark-mode .shopping-edit-total-box,
body.dark-mode .shopping-current-trip-display {
    background: var(--surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}


body.dark-mode .shopping-edit-header,
body.dark-mode .shopping-edit-modal-header {
    border-color: var(--border) !important;
}


body.dark-mode .shopping-edit-header p,
body.dark-mode .shopping-edit-modal-header p {
    color: var(--text-secondary) !important;
}


/* ==========================================================
   DARK MODE RUNTIME FALLBACK
   ----------------------------------------------------------
   Protects against inline #fff backgrounds.
========================================================== */

body.dark-mode #shoppingAddModal > div,
body.dark-mode #shoppingBudgetModal > div,
body.dark-mode #shoppingEditModalRuntime > div {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}


body.dark-mode #shoppingAddModal input,
body.dark-mode #shoppingAddModal select,
body.dark-mode #shoppingAddModal textarea,
body.dark-mode #shoppingBudgetModal input,
body.dark-mode #shoppingBudgetModal select,
body.dark-mode #shoppingBudgetModal textarea,
body.dark-mode #shoppingEditModalRuntime input,
body.dark-mode #shoppingEditModalRuntime select,
body.dark-mode #shoppingEditModalRuntime textarea {
    background: var(--input-background) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

/* ==========================================================
   AUTHENTICATION THEME CONSISTENCY
   ----------------------------------------------------------
   The authentication gate is displayed before user-scoped
   settings are loaded. These rules explicitly bind its
   typography and surfaces to the PANVIYO theme tokens.
========================================================== */

.auth-page,
.auth-card,
.auth-card input,
.auth-card button {
    font-family: var(--font-family);
}

.auth-page {
    background-color: var(--background);
    color: var(--text-primary);
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.auth-card {
    background-color: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}

.auth-card input {
    background-color: var(--input-background);
    color: var(--text-primary);
    border-color: var(--input-border);
    color-scheme: light;
}

body.dark-mode .auth-card input {
    color-scheme: dark;
}

.auth-card input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

body.dark-mode .auth-card input::placeholder {
    color: var(--text-muted);
}

body.dark-mode .auth-card,
body.dark-mode .auth-page {
    color: var(--text-primary);
}

body.dark-mode .auth-brand strong,
body.dark-mode .auth-heading h2,
body.dark-mode .auth-field label {
    color: var(--text-primary);
}

body.dark-mode .auth-brand span,
body.dark-mode .auth-heading p,
body.dark-mode .auth-message.info {
    color: var(--text-secondary);
}

body.dark-mode .auth-security-note {
    color: var(--text-muted);
    border-color: var(--border);
}

body.dark-mode .auth-link {
    color: var(--primary-light);
}

body.dark-mode .auth-message.success {
    color: var(--primary-light);
}

body.dark-mode .auth-message.error {
    color: #FF8A80;
}

/* ==========================================================
   BUILD 047 — CONSISTENT PAGE GUTTERS + PRODUCT FORM MODAL
========================================================== */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* Give every application page a safe gutter instead of letting
   page cards and borders touch the viewport edge. */
#app {
    width: 100%;
    min-width: 0;
    padding-inline: clamp(12px, 2.4vw, 30px);
    box-sizing: border-box;
}

#app > .page {
    width: 100%;
    min-width: 0;
    max-width: 1500px;
    margin-inline: auto;
}

#app .page,
#app .page * {
    min-width: 0;
}

#app input,
#app select,
#app textarea,
#app table,
#app .card,
#app .form-card,
#app .search-card,
#app .section-card {
    max-width: 100%;
}

#app input,
#app select,
#app textarea {
    box-sizing: border-box;
}

@media (max-width: 650px) {
    #app {
        padding-inline: 12px;
        padding-bottom: 112px;
    }
}

@media (max-width: 380px) {
    #app {
        padding-inline: 9px;
    }
}

/* Add Product dialog */
.product-add-trigger {
    margin-top: 12px;
}

.product-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 3vw, 28px);
    background: var(--modal-overlay, rgba(0, 0, 0, .62));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.product-modal.active {
    display: flex;
}

.product-modal-content {
    width: min(100%, 720px);
    max-height: min(92dvh, 900px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface, #fff);
    color: var(--text-primary, #1f2933);
    border: 1px solid var(--border, #dce4dd);
    border-radius: var(--radius-large, 16px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
    padding: clamp(14px, 2.5vw, 24px);
    animation: productModalIn .18s ease-out;
}

@keyframes productModalIn {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.product-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.product-modal-header h3 {
    margin: 0;
    font-size: clamp(19px, 3vw, 24px);
    line-height: 1.3;
}

.product-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border, #dce4dd);
    border-radius: 10px;
    color: var(--text-primary, #1f2933);
    background: var(--surface-alt, #f8faf8);
    font-size: 18px;
}

.product-modal-form {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.product-modal-form > input,
.product-modal-form > select,
.product-modal-form > textarea,
.product-modal-form .two-columns > input,
.product-modal-form .two-columns > select {
    width: 100%;
    min-height: 44px;
}

.product-modal-form label {
    display: block;
    margin: 3px 0 -7px;
    font-weight: 600;
}

.product-modal-form .image-preview {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.product-modal-form .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

body.product-modal-open {
    overflow: hidden;
}

@media (max-width: 520px) {
    .product-modal {
        align-items: flex-end;
        padding: 8px;
    }

    .product-modal-content {
        width: 100%;
        max-height: 94dvh;
        border-radius: 16px 16px 10px 10px;
        padding: 15px;
    }

    .product-modal-form .button-group {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-modal-form .button-group button {
        width: 100%;
        min-height: 44px;
    }
}


/* ==========================================================
   BUILD 048 — HEADER BRAND GUTTERS
   Keep the PANVIYO title and tagline inside the same safe
   responsive page margins as the rest of the application.
========================================================== */
.app-header {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: clamp(12px, 2.4vw, 30px);
    box-sizing: border-box;
}

.app-header .logo-area {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {
    .app-header {
        padding-inline: 12px;
    }
}

@media (max-width: 380px) {
    .app-header {
        padding-inline: 9px;
    }
}

/* ==========================================================
   BUILD 054 — KEEP PAGE CONTENT CLEAR OF FIXED NAVIGATION
   The bottom navigation is fixed to the viewport. Reserve
   space for it on every screen size so the last card/buttons
   never sit underneath the menu bar.
========================================================== */
#app {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

#app > .page {
    padding-bottom: 12px;
}

@media (max-width: 650px) {
    #app {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
}


/* ==========================================================
   SETTINGS DATA MANAGEMENT ACTIONS
   Keep the export/import/delete controls aligned on mobile.
========================================================== */
.settings-data-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.settings-data-actions > button {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .settings-data-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .settings-data-actions > button {
        width: 100%;
        min-height: 54px;
        padding: 12px 10px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .settings-data-actions > button:last-of-type {
        grid-column: 1 / -1;
    }
}

@media (max-width: 360px) {
    .settings-data-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-data-actions > button:last-of-type {
        grid-column: auto;
    }
}