/* ============================================================================
   public/src/features/home/item-dropdown-menu.css
   Shared styles for the .item-dropdown-menu popover built by
   openItemDropdownMenu() (item-dropdown-menu.js) and its .exam-action-btn
   items. This popover is used by more than just the home page — the AI
   Agent's own "more" button (.ai-agent-more-btn) and its history item menu
   (.ai-agent-history-item-more) open one from create-quiz.html and
   result.html too — so these base rules live in their own stylesheet
   rather than only inside home/index.css, which those pages don't load.

   Page-specific extras (the "معلومات الامتحان" submenu, .root-quizzes-
   breakdown, --danger/--cancel button variants, etc.) are intentionally
   NOT duplicated here — they stay in index.css since only home-page menus
   use them. This file only contains what a bare {icon,label,onClick} menu
   (like the AI Agent's) needs to render correctly anywhere.
   ============================================================================ */
.item-dropdown-menu {
    position: fixed;
    z-index: var(--z-tooltip);
    width: 240px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
    direction: rtl;
    animation: itemDropdownIn 0.15s ease;
}

@keyframes itemDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.item-dropdown-menu .exam-action-btn {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.exam-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    direction: rtl;
}

.exam-action-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.exam-action-btn svg {
    flex-shrink: 0;
}

.exam-action-btn--primary {
    background: var(--gradient-accent);
    color: white;
    border: none;
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    align-items: center;
    justify-content: center;
}

.exam-action-btn--primary:hover {
    background: var(--gradient-accent);
    color: white;
    border: none;
    
    box-shadow: var(--shadow-lg);
}

.exam-action-btn.is-copying {
    cursor: progress;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .item-dropdown-menu .exam-action-btn {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}

/*
 * Danger variant — used by the user-quiz Action Overlay's delete option.
 * Same shape/layout as a regular .exam-action-btn, just colored to signal
 * a destructive action (mirrors the error tokens used elsewhere, e.g. the
 * old standalone .user-quiz-delete-btn icon this option replaced).
 */
.exam-action-btn--danger {
    background: var(--color-error-light);
    border-color: transparent;
    color: var(--color-error);
}

.exam-action-btn--danger:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: white;
}

/* Divider that groups the admin manage actions (تعديل / نقل / إعادة تسمية /
   حذف) below the public ones inside the ⋮ dropdown — see
   docs/plans/Admin actions and deletion flow for quizzes.md §5. A thin,
   full-width hairline with hairline margins on both sides. */
.item-dropdown-menu .exam-action-divider {
    height: 1px;
    margin: 4px -4px;
    background: var(--color-border);
    opacity: 0.7;
    flex-shrink: 0;
}