﻿
.vote-row-list{perspective: 1000px;width: 100%;}
.collab-row{display: flex;align-items: center;justify-content: space-between;
/*gap:1rem;border-radius: 10px;box-shadow: 0 2px 6px rgba(0,0,0,0.06);margin-bottom: 10px;*/
border-bottom:solid 2px #d7d7d7;transition: all 0.2s ease;cursor: pointer;}
.collab-row:first-child{border-radius:12px 12px 0 0; overflow:hidden;}
.collab-row:last-child{border-radius:0 0 12px 12px; overflow:hidden;}
.icon-14{width:14px;}
.collab-row:hover{transform: translateY(-1px);}
.collab-left{display: flex;align-items: center;gap: 12px;flex: 1;min-width: 0;}
.collab-logo{width: 40px;height: 40px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
.collabs_name{width: 40px;height: 40px;border-radius: 50%;background: #eaf1fc;display: flex;align-items: center;justify-content: center;font-weight: 600;color: #8da8d0;flex-shrink: 0;border:solid 1px #e1e1e1;}
.collab-title{font-weight: 600;font-size: 15px;color: #0d428f;/*white-space: nowrap;overflow: hidden;text-overflow: ellipsis;*/}
.collab-stats{display: flex;align-items: center;gap: 20px;margin-left: 15px;color: #6c757d;font-size: 14px;flex-shrink: 0;justify-content:end;}
.stat-item{display: flex;align-items: center;gap: 4px;}
.vote-btn{background: #fff;color: #0d6efd;border: 1px solid #0d6efd;padding: 5px 8px;border-radius: 6px;font-size: 14px;transition: background 0.2s ease;flex-shrink: 0;}
.vote-btn:hover{background:#0b5ed7; color:#fff;}
.collab-row{text-decoration: none !important;color: inherit;}
.skeleton{position: relative;overflow: hidden;background: #e9ecef;border-radius: 6px;}
.skeleton::after{content: "";position: absolute;top: 0;left: -150px;height: 100%;width: 150px;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);animation: shimmer 1.2s infinite;}

@keyframes shimmer {
100%{left:100%;}
}
.skeleton-circle{width:40px;height:40px;border-radius:50%;}
.skeleton-text{height:14px;width:120px;}
.skeleton-text.title{width: 250px;height:16px;}
.skeleton-text.small{width: 50px;}
.skeleton-btn{width: 60px;height: 30px;border-radius: 6px;}
.skeleton-row{pointer-events: none;}
.left-btn{border: none;padding: 10px 14px;border-radius: 8px;background: #f1f3f5;color: #333;font-weight: 500;transition: 0.2s;}
.left-btn:hover{background: #e9ecef;}
.left-btn.active{background: #0d6efd;color: #fff;}
#dvCollaborationDirectory{padding-left: 10px;}

/*------------custom modal styles----------- */
@media (max-width: 768px) {
.custom-modal .modal-dialog {position: fixed;bottom: 0;margin: 0;width: 100%;max-width: 100%;height: auto;display: flex;align-items: flex-end;}
.custom-modal .modal-content {border-radius: 16px 16px 0 0;width: 100%;max-height: 90vh;overflow: hidden;}
.custom-modal .modal-body {overflow-y: auto;max-height: 60vh;}
.custom-modal.fade .modal-dialog {transform: translateY(100%);transition: transform 0.3s ease-out;}
.custom-modal.show .modal-dialog {transform: translateY(0);}
}
/*------------custom modal styles----------- */



@media (max-width: 768px) {
.collab-row{flex-direction:column;align-items:flex-start;gap:10px;}
.collab-title{max-width:100%;white-space:normal;}
.collab-stats{margin-left:auto;gap:12px;}
.vote-btn{align-self:flex-end;}
.left-panel{position:sticky;top:80px;display:flex;flex-direction:column;gap:10px;}
.left-panel{flex-direction:row;position:static;overflow-x:auto;}
.left-btn{flex:1;text-align:center;}
}


/*-----------------vote row flip styles-----------------*/
.vote-row {perspective: 1000px;display: block;}
.vote-inner {position: relative;width: 100%; display:grid; height:auto;transition: transform 0.6s;transform-style: preserve-3d;}
.vote-row.flip .vote-inner {transform: rotateX(180deg);}
.vote-front{background: #fff;}
.vote-front:hover{background:#f8f9fa;}
.vote-front,.vote-back {grid-area:1 / 1; width: 100%;min-height: 100%;backface-visibility: hidden; display:flex; align-items: center;padding:1rem;justify-content: space-between;}
.vote-back {background:#f5f5f5; transform: rotateX(180deg);justify-content: center;font-weight: bold;color: #0d6efd;text-align:center;}