/* ===========================
   Shopping Lists - Modern UI
=========================== */

:root{

    --primary:#3b82f6;
    --primary-hover:#2563eb;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --background:#f4f6fb;
    --surface:#ffffff;

    --border:#e5e7eb;

    --text:#1f2937;
    --muted:#6b7280;

    --shadow:0 8px 24px rgba(15,23,42,.08);

    --radius:16px;

}

body{

    background:var(--background);

    color:var(--text);

    transition:
        background .25s,
        color .25s;

}

.pointer{cursor:pointer;}

.section-title{
    font-weight:600;
    font-size:1.15rem;
    margin:24px 0 12px;
}

.item-done{
    text-decoration:line-through;
    opacity:.60;
}

/* Navbar */
.navbar{
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

/* Card liste */
.shopping-card{
    border:none;
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow);
    transition:.2s;
    overflow:visible;
    position:relative;
    z-index:1;
}
.shopping-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(0,0,0,.12);
    z-index:5;
}
.shopping-card-title{
    color:var(--text);
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:.45rem;
}
.shopping-card-subtitle{
    color:var(--muted);
    font-size:.95rem;
}
.shopping-card-link{color:inherit;}
.shopping-card-link:hover{color:inherit;}

.dropdown{position:relative;}
.dropdown-menu{
    border:none;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    z-index:3000;
}
.icon-btn{

    background:transparent;

    color:var(--text);

    border:none;

    border-radius:12px;

    transition:.20s;

}

.icon-btn:hover{

    background:color-mix(in srgb,var(--primary) 12%,var(--surface));

    color:var(--primary);

}

.icon-btn i{

    font-size:1.2rem;

}

/* Card */
.card{

    background:var(--surface);

    color:var(--text);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.25s;

}

/* Liste */
.list-group-item{

    background:var(--surface);

    color:var(--text);

    cursor:grab;

    border:none!important;

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

    padding:.85rem;

}
.list-group-item:last-child{
    border-bottom:none!important;
}
.list-group-item:active{cursor:grabbing;}

/* Pulsanti quantità */
.quantityButton{
    width:34px;
    height:34px;
    border:none;
    border-radius:10px;
    background:color-mix(in srgb,var(--primary) 12%,var(--surface));
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s;
}
.quantityButton:hover{
    background:var(--primary);
    color:#fff;
}
.quantityValue{
    min-width:42px;
    text-align:center;
    font-weight:600;
}

/* Elimina */
.deleteButton{
    border:none;
    background:none;
    color:#9ca3af;
    transition:.15s;
}
.deleteButton:hover{
    color:var(--danger);
    transform:scale(1.15);
}

/* Tabelle */
.table{

    background:var(--surface);

    color:var(--text);

}

/* Form */
.form-control,.form-select{
    border-radius:12px;
}
.btn{
    border-radius:12px;
}
.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
}
.btn-primary:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
}

/* Toast */
.toast{
    border-radius:14px;
    box-shadow:var(--shadow);
}

/* Bootstrap icons */
.bi{
    vertical-align:-0.125em;
}

@media (max-width:991px){
    .shopping-card{
        overflow:visible;
        background:var(--surface);

        color:var(--text);

        border:1px solid var(--border);
    }
    .dropdown-menu{
        position:absolute!important;
        z-index:99999!important;
    }
}

.frequent-chip{

    transition:.15s;

}

.frequent-chip:hover{

    transform:translateY(-2px);

}

/* ===========================
   Acquisti frequenti
=========================== */

.frequent-chip{

    display:inline-flex;
    align-items:center;
    gap:.55rem;

    border:none;

    padding:.55rem .95rem;

    border-radius:999px;

    background:color-mix(in srgb,var(--primary) 12%,var(--surface));

    color:var(--primary);

    font-size:.92rem;

    font-weight:600;

    transition:.18s;

    cursor:pointer;

}

.frequent-chip:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-2px);

}

.frequent-chip i{

    font-size:.95rem;

}

.frequent-chip-count{

    background:rgba(255,255,255,.35);

    padding:.15rem .50rem;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

}

.dragHandle{
    cursor:grab;
    color:var(--muted);
    padding:0 .5rem;
    font-size:1.1rem;
    user-select:none;
}

.dragHandle:hover{
    color:var(--primary);
}

.dragHandle:active{
    cursor:grabbing;
}

[data-bs-theme="dark"]{

    --primary:#60a5fa;
    --primary-hover:#3b82f6;

    --success:#34d399;
    --warning:#fbbf24;
    --danger:#f87171;

    --background:#121212;

    --surface:#1d1f22;

    --border:#32353b;

    --text:#f5f5f5;

    --muted:#a1a1aa;

    --shadow:0 10px 30px rgba(0,0,0,.45);

}

.navbar{

    transition:background .25s;

}

.form-control,
.form-select{

    background:var(--surface);

    color:var(--text);

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

}

.form-control:focus,
.form-select:focus{

    background:var(--surface);

    color:var(--text);

}

.form-control::placeholder{

    color:var(--muted);

}

.itemNameButton{

    color:var(--text)!important;

}

.itemNameButton:hover{

    color:var(--primary)!important;

}

/* ======================================
   Header colonne
====================================== */

.shopping-header{

    border:none!important;

    font-weight:700;

    letter-spacing:.2px;

    padding:.9rem 1rem;

    color:white;

}

.shopping-header i{

    opacity:.9;

}

.shopping-header-pending{

    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );

}

.shopping-header-cart{

    background:linear-gradient(
        135deg,
        #f59e0b,
        #d97706
    );

}

.shopping-header-done{

    background:linear-gradient(
        135deg,
        #10b981,
        #059669
    );

}

[data-bs-theme="dark"] .shopping-header-pending{

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

}

[data-bs-theme="dark"] .shopping-header-cart{

    background:linear-gradient(
        135deg,
        #b45309,
        #92400e
    );

}

[data-bs-theme="dark"] .shopping-header-done{

    background:linear-gradient(
        135deg,
        #047857,
        #065f46
    );

}

/* ===========================
   Animazioni
=========================== */

@keyframes itemAppear{

    from{

        opacity:0;
        transform:translateY(-12px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.item-appear{

    animation:itemAppear .25s ease-out;

}

@keyframes itemDelete{

    to{

        opacity:0;
        transform:translateX(40px);
        height:0;
        margin:0;
        padding-top:0;
        padding-bottom:0;

    }

}

.item-delete{

    animation:itemDelete .25s forwards ease-in;

    overflow:hidden;

}

.category-divider{

    position:sticky;

    top:0;

    z-index:2;

    background:#eef4ff !important;

    color:#3559b5 !important;

    font-size:.90rem;

    letter-spacing:.3px;

}