/* ============================================
   LISTA SPESA v3 - Layout Rivisto
   ============================================ */

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

:root {
    --cream:      #F5F0E8;
    --cream-dark: #EDE6D6;
    --ink:        #1A1612;
    --ink-soft:   #4A4035;
    --ink-muted:  #8C7F70;
    --green:      #3D6B4F;
    --green-light:#5A8F6B;
    --green-pale: #D4E8DA;
    --red-soft:   #C0392B;
    --red-pale:   #FAEAE8;
    --amber:      #D4A843;
    --amber-pale: #FDF3DC;
    --blue:       #2C5F8A;
    --blue-pale:  #DCE9F5;
    --white:      #FDFCFA;
    --shadow-sm:  0 1px 3px rgba(26,22,18,.08);
    --shadow-md:  0 4px 16px rgba(26,22,18,.12);
    --shadow-lg:  0 8px 32px rgba(26,22,18,.18);
    --radius:     12px;
    --radius-sm:  8px;
    --transition: 180ms cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--ink); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cream-dark); border-radius: 3px; }

/* ── AUTH ── */
#auth-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: var(--cream);
    background-image: radial-gradient(ellipse at 15% 15%, rgba(61,107,79,.1) 0%, transparent 55%),
                      radial-gradient(ellipse at 85% 85%, rgba(212,168,67,.08) 0%, transparent 55%);
}
.auth-card { background: var(--white); border-radius: 20px; padding: 48px 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); border: 1px solid rgba(26,22,18,.06); }
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo .logo-icon { width: 52px; height: 52px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: var(--green-pale); border-radius: 14px; }
.auth-logo h1 { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.auth-logo p { color: var(--ink-muted); font-size: .875rem; margin-top: 4px; }
.auth-tabs { display: flex; gap: 4px; background: var(--cream-dark); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 28px; }
.auth-tab { flex: 1; padding: 8px; border: none; border-radius: calc(var(--radius-sm) - 2px); background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .875rem; font-weight: 500; color: var(--ink-muted); transition: var(--transition); }
.auth-tab.active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.forgot-link { display: block; text-align: right; font-size: .8rem; color: var(--ink-muted); margin-top: -12px; margin-bottom: 20px; cursor: pointer; }
.forgot-link:hover { color: var(--green); }

/* ── FORMS ── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.form-group input, .form-group select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--cream-dark); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--ink); background: var(--white); transition: var(--transition); outline: none; }
.form-group input:focus, .form-group select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,107,79,.1); }
.form-group input::placeholder { color: var(--ink-muted); }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 22px; border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 500; cursor: pointer; transition: var(--transition); text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--green); color: var(--white); width: 100%; padding: 13px; font-size: .95rem; }
.btn-primary:hover { background: var(--green-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: none; }
.btn-ghost { background: transparent; color: var(--ink-soft); padding: 8px 12px; }
.btn-ghost:hover { background: var(--cream-dark); }
.btn-sm { padding: 7px 14px; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── ALERTS ── */
.alert { padding: 11px 15px; border-radius: var(--radius-sm); font-size: .875rem; margin-bottom: 16px; display: none; }
.alert.error   { background: var(--red-pale);  color: var(--red-soft); border: 1px solid rgba(192,57,43,.2); }
.alert.success { background: var(--green-pale); color: var(--green);   border: 1px solid rgba(61,107,79,.2); }
.alert.warning { background: var(--amber-pale); color: #7a5500;        border: 1px solid rgba(212,168,67,.3); }
.alert.show { display: block; }

/* ── APP LAYOUT ── */
#app-screen { display: none; min-height: 100vh; }
.app-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }

/* ── SIDEBAR ── */
.sidebar { background: var(--white); border-right: 1px solid rgba(26,22,18,.07); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sidebar-header { padding: 18px 14px 14px; border-bottom: 1px solid rgba(26,22,18,.06); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.sidebar-brand { display: flex; align-items: center; gap: 9px; }
.sidebar-brand .brand-icon { width: 30px; height: 30px; background: var(--green-pale); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-brand-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.sidebar-user-name { font-size: .7rem; color: var(--ink-muted); }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 0; }
.btn-new-list { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin-bottom: 12px; background: var(--green-pale); color: var(--green); border: 1.5px dashed rgba(61,107,79,.4); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .84rem; font-weight: 500; cursor: pointer; transition: var(--transition); }
.btn-new-list:hover { border-style: solid; }
.sidebar-section-label { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); padding: 0 4px; margin-bottom: 3px; margin-top: 4px; }

/* ── LIST ITEM WITH CONTEXT MENU ── */
.list-item { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 6px 8px 10px; border-radius: var(--radius-sm); margin-bottom: 1px; transition: var(--transition); }
.list-item:hover { background: var(--cream); }
.list-item.active { background: var(--green-pale); }
.list-item-body { flex: 1; min-width: 0; cursor: pointer; }
.list-item-name { font-weight: 500; font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item-meta { font-size: .71rem; color: var(--ink-muted); display: flex; align-items: center; gap: 5px; margin-top: 1px; flex-wrap: wrap; }
.list-badge { background: var(--green); color: white; border-radius: 20px; padding: 1px 7px; font-size: .67rem; font-weight: 600; flex-shrink: 0; }
.list-shared-tag { background: var(--blue-pale); color: var(--blue); border-radius: 20px; padding: 1px 6px; font-size: .64rem; font-weight: 500; }

/* Context menu trigger */
.list-menu-btn { opacity: 0; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); transition: var(--transition); }
.list-item:hover .list-menu-btn,
.list-item.active .list-menu-btn,
.list-item.menu-open .list-menu-btn { opacity: 1; }
.list-menu-btn:hover { background: rgba(26,22,18,.08); color: var(--ink); }

/* Dropdown context */
.list-context-menu { position: absolute; right: 6px; top: calc(100% + 2px); background: var(--white); border: 1px solid rgba(26,22,18,.1); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 200; min-width: 158px; overflow: hidden; display: none; }
.list-context-menu.open { display: block; animation: fadeUp .14s ease; }
.ctx-item { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: .85rem; cursor: pointer; transition: var(--transition); color: var(--ink); border: none; background: none; width: 100%; text-align: left; font-family: 'DM Sans', sans-serif; }
.ctx-item:hover { background: var(--cream); }
.ctx-item.danger { color: var(--red-soft); }
.ctx-item.danger:hover { background: var(--red-pale); }

.sidebar-footer { padding: 10px; border-top: 1px solid rgba(26,22,18,.06); flex-shrink: 0; }
.btn-logout { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); font-family: 'DM Sans', sans-serif; font-size: .84rem; cursor: pointer; transition: var(--transition); }
.btn-logout:hover { background: var(--cream-dark); color: var(--ink); }

/* ── MAIN CONTENT ── */
.main-content { display: flex; flex-direction: column; min-height: 100vh; background: var(--cream); }

/* ── MAIN HEADER ── */
.main-header { background: var(--white); border-bottom: 1px solid rgba(26,22,18,.07); padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 10; flex-shrink: 0; }
.main-header-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.main-header-title.empty { color: var(--ink-muted); font-style: italic; font-size: .95rem; font-family: 'DM Sans', sans-serif; font-weight: 400; }
.main-header-meta { font-size: .75rem; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.main-header-left { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.main-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── ICON BUTTON ── */
.icon-btn { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; color: var(--ink-soft); transition: var(--transition); position: relative; }
.icon-btn:hover { background: var(--cream-dark); color: var(--ink); }

/* Notification badge */
.notif-badge { position: absolute; top: 2px; right: 2px; background: var(--red-soft); color: white; border-radius: 50%; width: 16px; height: 16px; font-size: .58rem; font-weight: 700; display: none; align-items: center; justify-content: center; border: 2px solid var(--white); }
.notif-badge.show { display: flex; }

/* ── NOTIF DROPDOWN ── */
.notif-wrap { position: relative; }
.notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 310px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid rgba(26,22,18,.08); z-index: 200; display: none; overflow: hidden; }
.notif-dropdown.show { display: block; animation: fadeUp .15s ease; }
.notif-dropdown-header { padding: 12px 15px; border-bottom: 1px solid rgba(26,22,18,.06); display: flex; align-items: center; justify-content: space-between; }
.notif-dropdown-title { font-size: .84rem; font-weight: 600; }
.notif-mark-all { font-size: .74rem; color: var(--green); cursor: pointer; background: none; border: none; font-family: 'DM Sans', sans-serif; }
.notif-list { max-height: 280px; overflow-y: auto; }
.notif-item { padding: 10px 15px; border-bottom: 1px solid rgba(26,22,18,.04); display: flex; gap: 9px; cursor: pointer; transition: var(--transition); }
.notif-item:hover { background: var(--cream); }
.notif-item.unread { background: rgba(61,107,79,.04); }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: 7px; }
.notif-item.read .notif-dot { background: var(--cream-dark); }
.notif-msg { font-size: .82rem; line-height: 1.45; }
.notif-time { font-size: .69rem; color: var(--ink-muted); margin-top: 2px; }
.notif-empty { padding: 22px; text-align: center; color: var(--ink-muted); font-size: .84rem; }

/* ── MAIN BODY ── */
.main-body { flex: 1; padding: 22px 24px; max-width: 760px; width: 100%; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 64px 24px; color: var(--ink-muted); }
.empty-state .es-icon { margin: 0 auto 14px; opacity: .3; }
.empty-state h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 6px; }
.empty-state p { font-size: .88rem; }

/* ── INVITI ── */
.inviti-card { background: var(--amber-pale); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; border: 1px solid rgba(212,168,67,.3); }
.inviti-title { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #7a5500; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.invito-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(212,168,67,.2); flex-wrap: wrap; }
.invito-item:last-child { border-bottom: none; padding-bottom: 0; }
.invito-lista { font-weight: 600; font-size: .88rem; }
.invito-meta { font-size: .76rem; color: var(--ink-muted); }
.invito-actions { display: flex; gap: 6px; }
.btn-accept  { background: var(--green); color: white; border: none; border-radius: 7px; padding: 6px 13px; font-size: .81rem; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: var(--transition); }
.btn-accept:hover { background: var(--green-light); }
.btn-decline { background: transparent; color: var(--red-soft); border: 1px solid rgba(192,57,43,.3); border-radius: 7px; padding: 6px 13px; font-size: .81rem; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: var(--transition); }
.btn-decline:hover { background: var(--red-pale); }

/* ── PROGRESS ── */
.progress-container { margin-bottom: 14px; }
.progress-info { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-muted); margin-bottom: 5px; }
.progress-bar { height: 4px; background: var(--cream-dark); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width .4s ease; }

/* ── COST ── */
.cost-summary { display: flex; gap: 20px; flex-wrap: wrap; background: var(--white); border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm); border: 1px solid rgba(26,22,18,.05); }
.cost-item { display: flex; flex-direction: column; }
.cost-label { font-size: .67rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.cost-value { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.cost-value.green { color: var(--green); }

/* ── ADD ARTICLE ── */
.add-card { background: var(--white); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; box-shadow: var(--shadow-sm); border: 1px solid rgba(26,22,18,.05); }
.add-card-label { font-size: .67rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.add-row { display: flex; gap: 8px; align-items: center; }
.add-input-wrap { flex: 1; position: relative; }
.add-input { width: 100%; padding: 10px 13px; border: 1.5px solid var(--cream-dark); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .92rem; color: var(--ink); background: var(--white); outline: none; transition: var(--transition); }
.add-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,107,79,.1); }
.add-input::placeholder { color: var(--ink-muted); }
.btn-add { display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--green); color: white; border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .86rem; font-weight: 500; cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0; }
.btn-add:hover { background: var(--green-light); }

/* ── AUTOCOMPLETE ── */
.autocomplete-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--white); border: 1.5px solid var(--cream-dark); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 100; overflow: hidden; display: none; }
.autocomplete-list.show { display: block; }
.ac-item { padding: 9px 13px; cursor: pointer; font-size: .87rem; display: flex; align-items: center; gap: 8px; transition: var(--transition); color: var(--ink); }
.ac-item:hover { background: var(--cream); }
.ac-item.ac-new { color: var(--green); font-weight: 500; border-top: 1px solid var(--cream-dark); }

/* ── SECTION ── */
.section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.section-label { font-size: .67rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.section-count { background: var(--cream-dark); color: var(--ink-muted); border-radius: 20px; padding: 1px 7px; font-size: .67rem; }

/* ── ARTICLE ITEM ── */
.articles-list { list-style: none; margin-bottom: 22px; }
.article-item { background: var(--white); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow-sm); border: 1px solid rgba(26,22,18,.05); transition: var(--transition); animation: fadeUp .17s ease; }
.article-item:hover { box-shadow: var(--shadow-md); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.art-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cream-dark); background: var(--white); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.art-check:hover { border-color: var(--green); }
.article-item.done .art-check { background: var(--green); border-color: var(--green); }

.art-info { flex: 1; min-width: 0; }
.art-name { font-size: .91rem; font-weight: 500; color: var(--ink); }
.article-item.done .art-name { text-decoration: line-through; color: var(--ink-muted); }
.art-author { font-size: .69rem; color: var(--ink-muted); font-style: italic; }

/* Qty controls */
.qty-ctrl { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.qty-btn { width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--cream-dark); background: var(--white); cursor: pointer; font-size: .95rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: var(--transition); color: var(--ink); line-height: 1; padding: 0; }
.qty-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-pale); }
.qty-val { min-width: 22px; text-align: center; font-size: .88rem; font-weight: 600; }

/* Price */
.price-wrap { display: flex; align-items: center; gap: 3px; background: var(--amber-pale); border-radius: 6px; padding: 3px 8px; flex-shrink: 0; }
.price-sym { font-size: .77rem; color: #7a5500; }
.price-input { width: 60px; border: none; background: transparent; font-size: .84rem; font-weight: 500; color: var(--ink); outline: none; text-align: right; font-family: 'DM Sans', sans-serif; }
.price-input::placeholder { color: var(--ink-muted); }

/* Delete — SEMPRE VISIBILE */
.art-delete { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; color: var(--ink-muted); transition: var(--transition); flex-shrink: 0; }
.art-delete:hover { background: var(--red-pale); color: var(--red-soft); }

/* ── SHARE MODAL ── */
.members-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.member-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--cream); border-radius: var(--radius-sm); }
.member-info { flex: 1; }
.member-name { font-size: .87rem; font-weight: 500; }
.member-email { font-size: .72rem; color: var(--ink-muted); }
.member-tipo { font-size: .71rem; padding: 2px 8px; border-radius: 20px; font-weight: 500; flex-shrink: 0; }
.tipo-completo { background: var(--blue-pale); color: var(--blue); }
.tipo-parziale { background: var(--green-pale); color: var(--green); }
.stato-pending { background: var(--amber-pale); color: #7a5500; }
.share-access-info { font-size: .77rem; color: var(--ink-muted); padding: 10px 12px; background: var(--cream); border-radius: 8px; line-height: 1.6; margin-bottom: 14px; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,22,18,.35); backdrop-filter: blur(5px); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.modal-overlay.show { opacity: 1; pointer-events: all; }
.modal { background: var(--white); border-radius: 18px; padding: 26px; width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); transform: scale(.96); transition: transform .2s ease; max-height: 90vh; overflow-y: auto; }
.modal-overlay.show .modal { transform: scale(1); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600; }
.modal-close { width: 30px; height: 30px; border-radius: 8px; background: none; border: none; cursor: pointer; color: var(--ink-muted); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.modal-close:hover { background: var(--cream-dark); }
.modal-footer { display: flex; gap: 8px; margin-top: 18px; }
.modal-footer .btn { flex: 1; }

/* ── MOBILE HEADER ── */
.mobile-header { display: none; background: var(--white); border-bottom: 1px solid rgba(26,22,18,.07); padding: 0 14px; height: 52px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.mobile-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: .95rem; color: var(--ink); flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 8px; }
.mobile-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.mobile-left { display: flex; align-items: center; flex-shrink: 0; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(26,22,18,.35); z-index: 99; }

@media (max-width: 768px) {
    .app-layout { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: -285px; top: 0; width: 285px; z-index: 100; transition: left .28s ease; box-shadow: var(--shadow-lg); height: 100dvh; }
    .sidebar.open { left: 0; }
    .sidebar-overlay.show { display: block; }
    .main-header { display: none; }
    .mobile-header { display: flex; }
    .main-body { padding: 12px 14px; }
    .add-row { flex-wrap: wrap; }
    .btn-add { width: 100%; justify-content: center; }
    .auth-card { padding: 28px 20px; }
    .notif-dropdown { width: 280px; right: -40px; }
}

/* ── UTILS ── */
.spinner { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .55s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

#toast { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm); font-size: .84rem; box-shadow: var(--shadow-lg); z-index: 500; transform: translateY(60px); opacity: 0; transition: all .26s cubic-bezier(.4,0,.2,1); max-width: 290px; pointer-events: none; }
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { background: var(--green); }
#toast.error   { background: var(--red-soft); }
#toast.warning { background: var(--amber); color: var(--ink); }

/* ── SIDEBAR INVITI PANEL ──────────────────── */
.sidebar-inviti-card {
    background: var(--amber-pale);
    border: 1px solid rgba(212,168,67,.35);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
}
.sidebar-inviti-header {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #7a5500;
    margin-bottom: 8px;
}
.inviti-badge {
    background: var(--red-soft); color: white;
    border-radius: 20px; padding: 1px 7px;
    font-size: .65rem; font-weight: 700;
    margin-left: auto;
}
#sidebar-inviti-list .invito-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(212,168,67,.2);
    flex-direction: column; gap: 7px;
}
#sidebar-inviti-list .invito-item:last-child { border-bottom: none; padding-bottom: 0; }
#sidebar-inviti-list .invito-lista { font-size: .86rem; font-weight: 600; color: var(--ink); }
#sidebar-inviti-list .invito-meta  { font-size: .74rem; color: var(--ink-muted); }
#sidebar-inviti-list .invito-actions { display: flex; gap: 5px; }
#sidebar-inviti-list .btn-accept  { padding: 5px 11px; font-size: .78rem; }
#sidebar-inviti-list .btn-decline { padding: 5px 11px; font-size: .78rem; }

/* ── LIST MEMBERS TAG ──────────────────────── */
.list-members-tag {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--blue-pale); color: var(--blue);
    border-radius: 20px; padding: 1px 6px;
    font-size: .64rem; font-weight: 500;
}
.list-members-tag svg { opacity: .8; }