/*
 * المكوّنات: الإشعارات، المحتوى المنسّق، التقييم
 *
 * مستخرج من resources/views/layouts/app.blade.php.
 * كان مضمّناً في القالب فيُعاد تنزيله مع كل صفحة ويمنع تشديد CSP.
 * أي تعديل هنا يسري على الموقع كله.
 */

/* ===== Notification System Styles ===== */

    /* Updates Banner */
    #updates-banner {
        background: linear-gradient(135deg, var(--gray-900) 0%, var(--gradient-end) 100%);
        color: var(--bg-card);
        padding: 0.6rem 0;
        display: none;
        animation: slideDown 0.4s ease;
        position: relative;
        z-index: 999;
    }
    #updates-banner.visible { display: block; }
    @keyframes slideDown {
        from { transform: translateY(-100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    .banner-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .banner-items {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 1;
        overflow: hidden;
    }
    .banner-pulse {
        width: 10px; height: 10px;
        background: var(--accent);
        border-radius: 50%;
        flex-shrink: 0;
        animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%       { opacity: 0.5; transform: scale(1.3); }
    }
    .banner-text {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .banner-text strong { color: var(--accent); }
    .banner-link {
        background: var(--accent);
        color: var(--gray-900);
        padding: 0.3rem 0.9rem;
        border-radius: 1rem;
        font-size: 0.8rem;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .banner-close {
        background: none;
        border: none;
        color: var(--surface-blur);
        cursor: pointer;
        font-size: 1rem;
        padding: 0.2rem 0.4rem;
        flex-shrink: 0;
    }
    .banner-close:hover { color: var(--bg-card); }

    /* Bell Button */
    .bell-btn {
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--secondary);
        font-size: 1.2rem;
        padding: 0.25rem;
        display: flex;
        align-items: center;
    }
    .bell-btn:hover { color: var(--accent); }
    .bell-badge {
        position: absolute;
        top: -4px;
        left: -4px;
        background: var(--danger);
        color: var(--bg-card);
        font-size: 0.65rem;
        font-weight: 800;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        display: none;
    }

    /* Notification Dropdown */
    #notif-dropdown {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 0;
        width: 360px;
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        border: 1px solid var(--border);
        z-index: 9999;
        display: none;
        overflow: hidden;
    }
    @media (max-width: 480px) {
        #notif-dropdown { width: calc(100vw - 2rem); left: auto; right: -1rem; }
    }
    #notif-dropdown.open { display: block; }
    .notif-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .notif-header h4 { margin: 0; font-size: 1rem; font-weight: 800; }
    .notif-list { max-height: 320px; overflow-y: auto; }

    /* حالة القراءة: نقطة + خلفية خفيفة. لا نعتمد على اللون وحده — العنصر
       غير المقروء يحمل نقطة مرئية ووصفاً للقارئ الآلي. */
    .notif-item { position: relative; }
    .notif-item.is-unread { background: var(--accent-light); }
    .notif-item.is-unread .notif-title { font-weight: 800; }
    .notif-dot {
        position: absolute;
        inset-inline-end: .75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
    }
    .notif-markall {
        border: 0;
        background: none;
        padding: .2rem .4rem;
        border-radius: .4rem;
        font-family: inherit;
        font-size: .78rem;
        font-weight: 700;
        color: var(--accent);
        cursor: pointer;
    }
    .notif-markall:hover { background: var(--accent-light); }
    .notif-markall:disabled { opacity: .5; cursor: default; }
    .notif-empty i { font-size: 2rem; color: var(--gray-300); display: block; margin-bottom: .5rem; }
    .notif-item {
        display: flex;
        gap: 0.75rem;
        padding: 0.9rem 1.25rem;
        border-bottom: 1px solid var(--gray-100);
        text-decoration: none;
        color: inherit;
        transition: background 0.15s;
    }
    .notif-item:hover { background: var(--bg-body); }
    .notif-icon {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: var(--accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    .notif-content { flex: 1; min-width: 0; }
    .notif-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .notif-body {
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-top: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .notif-time {
        font-size: 0.72rem;
        color: var(--gray-400);
        margin-top: 0.25rem;
    }
    .notif-empty {
        padding: 2rem;
        text-align: center;
        color: var(--text-muted);
        font-size: 0.9rem;
    }
    .notif-footer {
        padding: 0.75rem 1.25rem;
        border-top: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .btn-subscribe {
        background: var(--primary);
        color: var(--bg-card);
        border: none;
        padding: 0.6rem 1rem;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .btn-subscribe:hover { opacity: 0.9; }
    .btn-subscribe.subscribed {
        background: var(--success);
    }
    .btn-subscribe:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .view-all-notifs {
        text-align: center;
        font-size: 0.83rem;
        color: var(--accent);
        text-decoration: none;
        font-weight: 700;
    }

    /* إرشاد تثبيت iOS — يشارك نفس هيئة نافذة الإشعارات */
    #ios-install-prompt {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%) translateY(150px);
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        padding: 1.5rem 2rem;
        width: min(420px, calc(100vw - 2rem));
        z-index: 99999;
        border: 1px solid var(--border);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: none;
    }
    #ios-install-prompt.show { display: block; transform: translateX(-50%) translateY(0); }
    .ios-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
    .ios-steps li {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        font-size: .9rem;
        line-height: 1.7;
        color: var(--text-main);
    }
    .ios-step-num {
        flex: 0 0 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--primary);
        color: var(--bg-card);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
        font-weight: 800;
    }

    /* Push Permission Prompt */
    #push-prompt {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%) translateY(150px);
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        padding: 1.5rem 2rem;
        width: min(420px, calc(100vw - 2rem));
        z-index: 99999;
        border: 1px solid var(--border);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: none;
    }
    #push-prompt.show {
        display: block;
        transform: translateX(-50%) translateY(0);
    }
    .prompt-icon { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; }
    .prompt-title { font-size: 1.1rem; font-weight: 800; text-align: center; margin-bottom: 0.5rem; color: var(--primary); }
    .prompt-text  { font-size: 0.9rem; text-align: center; color: var(--text-muted); margin-bottom: 1.5rem; }
    .prompt-preferences { display: grid; gap: .55rem; margin: 0 0 1.25rem; padding: .9rem; border-radius: var(--radius-md); background: var(--bg-body); }
    .prompt-preferences label { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; }
    .prompt-actions { display: flex; gap: 0.75rem; }
    .btn-prompt-yes {
        flex: 2;
        background: var(--primary);
        color: var(--bg-card);
        border: none;
        padding: 0.75rem;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
    }
    .btn-prompt-yes:hover { background: var(--accent); color: var(--primary); }
    .btn-prompt-no {
        flex: 1;
        background: var(--gray-100);
        color: var(--text-muted);
        border: none;
        padding: 0.75rem;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .btn-prompt-no:hover { background: var(--gray-200); }

    /* Bell wrapper */
    .bell-wrapper { position: relative; }