/* ============================================
   OPERULA MODULE-SPECIFIC STYLES
   ============================================
   Stili specifici per moduli installabili.
   Ogni modulo può aggiungere i propri stili qui
   o importare un proprio file CSS.
   ============================================ */

/* ============================================
   MODULE: Categories
   ============================================ */
.module-categories {
    --category-card-bg: var(--color-bg-secondary);
    --category-card-hover: var(--color-bg-hover);
    --category-card-border: var(--color-border-primary);
}

/* ============================================
   MODULE: Artisans
   ============================================ */
.module-artisans {
    --artisan-card-bg: var(--color-bg-secondary);
    --artisan-card-hover: var(--color-bg-hover);
    --artisan-badge-bg: var(--color-primary);
}

/* ============================================
   MODULE: Premium Features
   ============================================ */
.module-premium {
    --premium-badge: var(--color-warning);
    --premium-highlight: var(--color-primary-light);
}

/* ============================================
   MODULE: Marketplace
   ============================================ */
.module-marketplace {
    --marketplace-card-shadow: var(--shadow-md);
    --marketplace-price-color: var(--color-primary);
}


/* ============================================
   MODULE: In-App Notification Panel (Creem-style)
   Synced from resources/css/theme/modules.css 2026-05-03
   ============================================ */
[x-cloak] { display: none !important; }
.notification-panel-wrapper { position: relative; display: inline-block; }
.notification-bell { position: relative; background: none; border: none; cursor: pointer; padding: 6px; color: var(--accent, #b89b5e); transition: color .2s ease; }
.notification-bell:hover { opacity: .85; }
.notification-bell--active { color: var(--accent, #b89b5e); }
.notification-bell--has-unread { color: #dc2626; }
.notification-bell--has-unread:hover { color: #b91c1c; }
.notification-bell__badge { position: absolute; top: -4px; right: -4px; background: #dc2626; color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.notification-panel { position: fixed; top: 0; right: 0; width: 380px; max-width: 100vw; height: 100vh; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -4px 0 24px rgba(0,0,0,0.12); z-index: 1000; display: flex; flex-direction: column; }
.notification-panel__header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; }
.notification-panel__header h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.notification-panel__actions { display: flex; align-items: center; gap: .5rem; }
.notification-panel__mark-all { background: none; border: none; color: var(--accent, #b89b5e); cursor: pointer; font-size: .8rem; font-weight: 500; }
.notification-panel__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #6b7280; padding: 0; line-height: 1; }
.notification-panel__body { flex: 1; overflow-y: auto; }
.notification-panel__loading, .notification-panel__empty { padding: 3rem 1.5rem; text-align: center; color: #6b7280; }

.notification-snippet { display: flex; gap: .5rem; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; cursor: pointer; transition: background 0.15s; position: relative; }
.notification-snippet:hover { background: #f9fafb; }
.notification-snippet--unread { background: rgba(184, 155, 94, 0.04); border-left: 3px solid var(--accent, #b89b5e); }
.notification-snippet--pinned { background: rgba(184, 155, 94, 0.08); }
.notification-snippet__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; }
.notification-snippet__icon--success { background: #e8f8f0; color: #27ae60; }
.notification-snippet__icon--info { background: #e8f0fd; color: #2980b9; }
.notification-snippet__icon--warning { background: #fef9e7; color: #f39c12; }
.notification-snippet__icon--alert { background: #fde8e8; color: #e74c3c; }
.notification-snippet__icon--system { background: #f3f4f6; color: #6b7280; }
.notification-snippet__icon--promo { background: rgba(184, 155, 94, 0.15); color: var(--accent, #b89b5e); }
.notification-snippet__content { flex: 1; min-width: 0; }
.notification-snippet__title { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.notification-snippet__body { font-size: 0.8rem; color: #6b7280; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notification-snippet__time { font-size: 0.7rem; color: #6b7280; margin-top: 4px; }
.notification-snippet__dismiss { position: absolute; top: .5rem; right: .5rem; background: none; border: none; color: #6b7280; cursor: pointer; font-size: 1rem; opacity: 0; transition: opacity 0.15s; }
.notification-snippet:hover .notification-snippet__dismiss { opacity: 1; }

@media (max-width: 480px) {
    .notification-panel { width: 100vw; }
}