/* ══════════════════════════════════════════════════
   Notifiche — Stili campanella e dropdown
   Condiviso tra backoffice e frontend clienti
   ══════════════════════════════════════════════════ */

/* ── Backoffice ── */

.notifiche-widget { position: relative; margin-left: auto; }
.notifiche-btn { background: none; border: none; cursor: pointer; padding: 6px; position: relative; color: var(--text-secondary, #6b7280); border-radius: 6px; transition: background 0.15s; }
.notifiche-btn:hover { background: var(--bg-secondary, #f1f5f9); color: var(--text, #1e293b); }

.notifiche-badge { position: absolute; top: 0; right: 0; background: #ef4444; color: #fff; font-size: 0.625rem; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px; }

.notifiche-dropdown { display: none; position: absolute; top: 100%; right: 0; width: 340px; max-height: 420px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1000; overflow: hidden; margin-top: 4px; }
.notifiche-dropdown.open { display: flex; flex-direction: column; }

.notifiche-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border, #e2e8f0); font-size: 0.875rem; }
.notifiche-btn-tutte { background: none; border: none; cursor: pointer; color: var(--primary, #4f46e5); font-size: 0.75rem; padding: 0; }
.notifiche-btn-tutte:hover { text-decoration: underline; }

.notifiche-lista { overflow-y: auto; flex: 1; max-height: 360px; }

.notifiche-vuoto { padding: 24px 14px; text-align: center; color: var(--text-muted, #9ca3af); font-size: 0.8125rem; }

.notifiche-item { padding: 10px 14px; border-bottom: 1px solid var(--bg-secondary, #f8fafc); cursor: pointer; transition: background 0.15s; }
.notifiche-item:hover { background: var(--bg-secondary, #f8fafc); }
.notifiche-item:last-child { border-bottom: none; }

.notifiche-item-nonletta { background: #eff6ff; border-left: 3px solid var(--primary, #4f46e5); }
.notifiche-item-nonletta:hover { background: #dbeafe; }

.notifiche-item-titolo { font-size: 0.8125rem; font-weight: 600; color: var(--text, #1e293b); line-height: 1.3; }
.notifiche-item-msg { font-size: 0.75rem; color: var(--text-muted, #6b7280); margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notifiche-item-data { font-size: 0.6875rem; color: var(--text-muted, #9ca3af); margin-top: 3px; }


/* ── Frontend clienti ── */

.notifiche-widget-cl { position: relative; display: flex; align-items: center; }
.notifiche-btn-cl { background: none; border: none; cursor: pointer; padding: 6px; position: relative; color: var(--text-secondary, #6b7280); border-radius: 6px; transition: color 0.15s; }
.notifiche-btn-cl:hover { color: var(--text, #1e293b); }

.notifiche-badge-cl { position: absolute; top: 0; right: -2px; background: #ef4444; color: #fff; font-size: 0.625rem; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px; }

.notifiche-dropdown-cl { display: none; position: absolute; top: 100%; right: 0; width: 320px; max-height: 400px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; overflow: hidden; margin-top: 8px; }
.notifiche-dropdown-cl.open { display: flex; flex-direction: column; }

.notifiche-dropdown-header-cl { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; font-size: 0.875rem; color: #1e293b; }
.notifiche-btn-tutte-cl { background: none; border: none; cursor: pointer; color: #4f46e5; font-size: 0.75rem; padding: 0; }
.notifiche-btn-tutte-cl:hover { text-decoration: underline; }

.notifiche-lista-cl { overflow-y: auto; flex: 1; max-height: 340px; }

.notifiche-vuoto-cl { padding: 24px 14px; text-align: center; color: #9ca3af; font-size: 0.8125rem; }

.notifiche-item-cl { padding: 10px 14px; border-bottom: 1px solid #f8fafc; cursor: pointer; transition: background 0.15s; }
.notifiche-item-cl:hover { background: #f8fafc; }
.notifiche-item-cl:last-child { border-bottom: none; }

.notifiche-item-nonletta { background: #eff6ff; border-left: 3px solid #4f46e5; }
.notifiche-item-nonletta:hover { background: #dbeafe; }

.notifiche-item-titolo-cl { font-size: 0.8125rem; font-weight: 600; color: #1e293b; line-height: 1.3; }
.notifiche-item-msg-cl { font-size: 0.75rem; color: #6b7280; margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notifiche-item-data-cl { font-size: 0.6875rem; color: #9ca3af; margin-top: 3px; }


/* ── Responsive ── */
@media (max-width: 600px) {
    .notifiche-dropdown, .notifiche-dropdown-cl { width: 280px; right: -40px; }
}