/* ============================================================
   9. CARD ITEMS & KEBAB MENU
   ============================================================ */
.list-grid-saas { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 20px; 
}

.item-card-saas { 
    background: #FFFFFF; 
    border-radius: 18px; 
    padding: 22px; 
    border: 1px solid var(--border-color); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.02); 
    transition: all 0.2s ease; 
    word-break: break-word; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.item-card-saas:hover { 
    border-color: #cbd5e1; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.04); 
}

.card-header-saas { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.profile-saas { display: flex; gap: 14px; align-items: center; min-width: 0; }
.avatar-saas { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; object-fit: cover; }
.info-saas { min-width: 0; }
.info-saas h4 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.info-saas p { margin: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-body-saas { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.badges-saas { display: flex; gap: 6px; flex-wrap: wrap; }

.btn-more { width: 32px !important; height: 32px !important; display: flex !important; align-items: center; justify-content: center; background: transparent !important; border: none !important; font-size: 18px !important; color: #94a3b8 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 8px !important; transition: 0.2s ease; }
.btn-more:hover { background: #f1f5f9 !important; color: var(--text-main) !important; }

.dropdown-menu { position: absolute; right: 0; top: 35px; background: white; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 160px; z-index: 10; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.2s; }
.dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu button { width: 100% !important; text-align: left; background: transparent !important; padding: 10px 15px !important; font-size: 13px !important; color: #334155 !important; margin: 0 !important; border-radius: 0 !important; font-weight: 500 !important; border-bottom: 1px solid #f8fafc !important; box-shadow: none !important;}
.dropdown-menu button:last-child { border-bottom: none !important; color: var(--danger) !important; }
.dropdown-menu button:hover { background: var(--primary-light) !important; color: var(--primary) !important; }