/* =============================== 
   📦 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%;
    }
}


/* Final enterprise academy/content card polish */
.gridlist-container {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(18,31,58,.30));
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  overflow: visible;
}

.gridlist-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
  overflow: visible;
}

.grid-card {
  min-height: 292px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  overflow: hidden !important;
  isolation: isolate;
  text-align: left;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 15% 8%, rgba(79,172,254,.14), transparent 16rem),
    radial-gradient(circle at 95% 100%, rgba(0,242,254,.10), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(21,30,62,.58));
  box-shadow: 0 20px 54px rgba(0,0,0,.20);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.grid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.055), transparent 35%, rgba(0,242,254,.04));
  z-index: 0;
}

.grid-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,242,254,.35);
  box-shadow: 0 28px 72px rgba(0,242,254,.12), 0 18px 50px rgba(0,0,0,.22);
}

.grid-card > * {
  position: relative;
  z-index: 1;
}

.grid-card-header {
  position: relative;
  min-height: 118px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    rgba(7,18,38,.28);
  background-size: 18px 18px, 18px 18px, auto;
}

.grid-card-header .nx-image-wrapper,
.grid-card .nx-image-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  background: rgba(7,18,38,.42);
  box-shadow: none;
  transform: none;
}

.grid-card-header img,
.grid-card .nx-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  text-align: inherit;
}

.grid-card-body h3 {
  margin: 0;
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.18;
  letter-spacing: -.03em;
  word-break: break-word;
}

.grid-card-body .slug {
  margin: -2px 0 0;
  color: rgba(255,255,255,.56);
  font-weight: 700;
  font-size: .88rem;
}

.grid-card-body .description {
  margin: 2px 0;
  color: rgba(255,255,255,.62);
  font-size: .9rem;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grid-card .meta,
.grid-card-body .meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.54);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
}

.grid-card .meta i,
.grid-card-body .meta i {
  font-size: 18px;
  color: rgba(255,255,255,.72);
}

.status-badge,
.premium-badge,
.gv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  border-radius: 999px;
  padding: 6px 11px;
  font-weight: 900;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

.status-badge.active,
.gv-badge.success {
  color: #eafff2;
  background: linear-gradient(135deg, #29b761, #44d27b);
}

.status-badge.inactive,
.gv-badge.danger {
  color: #fff;
  background: linear-gradient(135deg, #ff6868, #ff8b78);
}

.premium-badge,
.gv-badge.gold {
  color: #1a1630;
  background: linear-gradient(135deg, #f49b36, #f3cd74);
}

.grid-card-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  min-height: 46px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.grid-card-actions .action-btn,
.action-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.10);
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.grid-card-actions .action-btn i,
.action-btn i {
  line-height: 1;
  font-size: 20px;
}

.action-btn.view { color: #fff8d6; background: rgba(243,205,116,.14); }
.action-btn.edit { color: #061024; background: linear-gradient(135deg,#4facfe,#00f2fe); }
.action-btn.delete { color: #fff; background: rgba(255,104,104,.16); }
.action-btn:hover { transform: translateY(-2px) scale(1.03); }

.gv-action-menu-popover {
  z-index: 2200;
}

@media (max-width: 720px) {
  .gridlist-container { padding: 16px; border-radius: 20px; }
  .gridlist-wrapper { grid-template-columns: 1fr; gap: 18px; }
  .grid-card { min-height: auto; border-radius: 20px; }
}