/* Explain: Custom styles for UI components, including update elements and notification bells. */
/* דריסת צבעי ברירת המחדל של DaisyUI עבור כפתורים ראשיים */
.btn-primary, .btn-primary:active, .btn-primary:focus {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-primary {
    background-image: linear-gradient(135deg, #E27F6B 0%, #D86A57 100%) !important;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--primary-color) 38%, transparent);
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    background-image: linear-gradient(135deg, #D6705D 0%, #C45C49 100%) !important;
}

/* כפתור מתאר: מבטלים את הגרדיאנט של הכפתור הראשי כדי שהכיתוב יישאר קריא */
.btn-outline.btn-primary {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: none;
}

.btn-outline.btn-primary:hover {
    background-color: var(--primary-color) !important;
    background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

/* תיקון חיתוך חלונות קופצים במובייל בגלל שורת הכתובת של הדפדפן */
.modal-box {
    max-height: calc(100dvh - 3rem) !important;
}

/* תפריט צד – סימון העמוד הפעיל */
.sidebar-link {
    position: relative;
}

.sidebar-link[aria-current="page"] {
    background-color: var(--badge-bg);
    color: var(--secondary-color);
    font-weight: 700;
}

.sidebar-link[aria-current="page"] .sidebar-icon {
    color: var(--primary-color);
}

.sidebar-link[aria-current="page"]::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 4px;
    border-radius: 9999px;
    background: var(--primary-color);
}

/* תגיות סטטוס רגועות במקום הירוק/אדום הזוהרים של ברירת המחדל */
.badge.badge-success {
    background-color: var(--success-bg) !important;
    border: 1px solid var(--success-border) !important;
    color: var(--success-text) !important;
    box-shadow: none !important;
}

.badge.badge-error {
    background-color: var(--error-bg) !important;
    border: 1px solid var(--error-border) !important;
    color: var(--error-text) !important;
    box-shadow: none !important;
}

.badge.badge-warning {
    background-color: var(--warning-bg) !important;
    border: 1px solid var(--warning-border) !important;
    color: var(--warning-text) !important;
    box-shadow: none !important;
}

.badge.badge-ghost {
    color: #3a485a;
}

/* סרגל חיפוש וסינון אחיד: כפתור הניקוי שלנו מחליף את כפתור הניקוי המובנה של הדפדפן */
.filter-bar input[type="search"]::-webkit-search-cancel-button,
.filter-bar input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* תגית סטטוס (פעיל / מושהה) עם נקודת צבע – קריאה גם במבט מהיר */
.badge.badge-status {
    gap: 0.375rem;
    padding-inline: 0.625rem;
}

.badge.badge-status::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* כרטיס לוגו במסך ההצטרפות: שומר על פרופורציה ומונע ריבוע לבן תלוש סביב קבצי לוגו */
#participant-app > div:first-of-type:has(img) {
    margin-bottom: 1.25rem;
}

#participant-app > div:first-of-type:has(img) img {
    height: clamp(5rem, 18vw, 6.5rem) !important;
    width: auto !important;
    max-width: min(18rem, 82vw) !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 1rem !important;
    box-shadow: 0 6px 18px -12px rgba(15, 42, 77, 0.35) !important;
    padding: 0.75rem 1rem !important;
    mix-blend-mode: normal !important;
}

/* כרטיס תוצאת חיפוש: כל הכרטיס הוא קישור ישיר לתוצאה */
.search-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.search-result:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    box-shadow: 0 8px 20px -12px rgba(15, 42, 77, 0.35);
    transform: translateY(-2px);
}

.search-result:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.search-result-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--badge-bg);
    color: var(--secondary-color);
}

/* עדכון שנפתח מהפעמון מודגש בעמוד "מה חדש" (הסינון לפי תפקיד מתבצע בשרת – עדכון שלא מותר למשתמש לא מגיע לדפדפן) */
.update-card:target,
.update-card.is-target {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 22%, transparent), 0 12px 28px -16px rgba(15, 42, 77, 0.4);
}

/* מרכז העדכונים: תגיות אחידות – סוג העדכון, גרסה, קהל יעד ו"חדש" – באותו סדר בפעמון ובעמוד "מה חדש" */
.update-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.5rem;
    padding: 0.125rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: #3a485a;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.update-tag i {
    font-size: 0.65rem;
}

.update-tag[data-cat="feature"] {
    background: var(--badge-bg);
    border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
    color: var(--secondary-color);
}

.update-tag[data-cat="improvement"] {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.update-tag[data-cat="fix"] {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.update-tag[data-cat="release"] {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;
}

.update-tag[data-kind="audience"] {
    background: var(--background-color);
    color: var(--secondary-color);
}

.update-tag.update-new {
    background: color-mix(in srgb, var(--primary-color) 82%, #000000);
    border-color: transparent;
    color: #ffffff;
}

.update-tag.update-new::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #ffffff;
    flex-shrink: 0;
}

.update-meta-compact .update-tag {
    min-height: 1.25rem;
    padding: 0 0.45rem;
    font-size: 0.6875rem;
}

/* הזמן היחסי ("לפני 3 ימים") – אותו עיצוב בפעמון ובעמוד "מה חדש"; התאריך המלא מופיע במעבר עכבר */
.update-when {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5a6e;
    white-space: nowrap;
}

.update-meta-compact .update-when {
    font-size: 0.6875rem;
}

/* עדכון חדש: פס צבע בכרטיס בעמוד "מה חדש" ורקע עדין בחלון הפעמון */
.update-card.update-card-new {
    border-inline-start: 4px solid var(--primary-color);
}

.update-bell-item.is-new {
    background: color-mix(in srgb, var(--badge-bg) 75%, transparent);
}

.update-bell-item.is-new:hover {
    background: var(--badge-bg);
}

/* מונה העדכונים שלא נקראו על הפעמון */
.bell-count {
    position: absolute;
    top: 0.125rem;
    inset-inline-end: 0.125rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--primary-color) 82%, #000000);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--surface-color);
}

/* תנודה קצרה של הפעמון כשיש עדכונים חדשים */
.bell-ring {
    display: inline-block;
    transform-origin: 50% 0;
    animation: bell-ring 1.2s ease-in-out 0.8s 2;
}

@keyframes bell-ring {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .search-result {
        transition: none;
    }

    .search-result:hover {
        transform: none;
    }

    .bell-ring {
        animation: none;
    }
}