/* =============================== 
   📦 NXAdmin GridList Pro - Final Polished, Animated & Enhanced Styles 
   =============================== */

   .gridlist-container {
    background: rgba(255, 255, 255, 0.04);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 20px;
}

/* 🚀 Controls */
.gridlist-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.gridlist-controls .control-group {
    display: flex;
    flex-direction: column;
    min-width: 160px;
    position: relative;
}

.gridlist-controls label {
    color: #ccc;
    margin-bottom: 5px;
    font-size: 13px;
}

.gridlist-controls input,
.gridlist-controls select {
    padding: 10px 16px;
    border-radius: 30px;
    border: 1px solid #4facfe;
    background-color: #2c2f5a;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.gridlist-controls select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
}

.gridlist-controls input:focus,
.gridlist-controls select:focus {
    border-color: #00f2fe;
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
    outline: none;
}

/* 🎨 Grid Layout */
.gridlist-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    min-height: 200px;
}

/* 🌟 Base Grid Card */
.grid-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.2);
}

/* =============================== 
   🎨 Custom Styled Select with Animated Arrow
   =============================== */

   .gridlist-controls select,
   .nx-select {
       position: relative;
       padding: 10px 40px 10px 16px;   /* Extra space for arrow */
       border-radius: 30px;
       border: 1px solid #4facfe;
       background-color: #2c2f5a;
       color: #fff;
       font-size: 14px;
       transition: all 0.3s ease;
       appearance: none;
       background-image: url("data:image/svg+xml;utf8,<svg class='arrow' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5'/></svg>");
       background-repeat: no-repeat;
       background-position: right 16px center;
       background-size: 16px;
       cursor: pointer;
   }
   
   /* 🔹 On Focus - Glow Effect */
   .gridlist-controls select:focus,
   .nx-select:focus {
       border-color: #00f2fe;
       box-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
       outline: none;
   }
   
   /* 🚀 Animated Arrow on Open */
   .gridlist-controls select:focus,
   .nx-select:focus {
       background-image: url("data:image/svg+xml;utf8,<svg class='arrow' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' transform='rotate(180)'><path d='M7 10l5 5 5-5'/></svg>");
   }
   
   /* Placeholder Style */
   .gridlist-controls select option[value=""],
   .nx-select option[value=""] {
       color: #bbb;
   }
   
   /* Smooth Transition */
   .gridlist-controls select,
   .nx-select {
       transition: border 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease;
   }
   

/* ⏳ Skeleton Loader */
.skeleton-card {
    height: 180px;
    border-radius: 12px;
    background: linear-gradient(90deg, #2c2f5a 25%, #3a3d6a 50%, #2c2f5a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 📄 Pagination */
.gridlist-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.gridlist-pagination button {
    padding: 8px 18px;
    border-radius: 20px;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.gridlist-pagination button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 242, 254, 0.3);
}

.gridlist-pagination button:disabled {
    background: #555;
    cursor: not-allowed;
}

.no-data {
    text-align: center;
    color: #ccc;
    font-weight: 500;
    margin-top: 20px;
}

.no-data #lottie-empty {
    width: 200px;
    height: 200px;
    margin: 0 auto 10px;
    opacity: 0.8;
}


/* 📱 Responsive */
@media (max-width: 600px) {
    .gridlist-controls .control-group {
        width: 100%;
    }
}