/* Agent cards (Standard / Plus / Pro) + tab styling — tách từ app.R */

/* ========== NHÓM STANDARD - Màu xám đậm như đen ========== */
#agent_grid_standard .agent-card,
#agent_grid_standard_view .agent-card {
  border: 2px solid #212121 !important;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(33, 33, 33, 0.3), 
              0 0 0 1px rgba(33, 33, 33, 0.12) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#agent_grid_standard .agent-card:hover,
#agent_grid_standard_view .agent-card:hover {
  border-color: #1A1A1A !important;
  box-shadow: 0 8px 30px rgba(33, 33, 33, 0.4), 
              0 0 0 2px rgba(33, 33, 33, 0.2) !important;
  transform: translateY(-8px);
}

/* Badge STANDARD */
#agent_grid_standard .agent-header,
#agent_grid_standard_view .agent-header {
  position: relative;
}

#agent_grid_standard .agent-header::after,
#agent_grid_standard_view .agent-header::after {
  content: 'STANDARD';
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #212121 0%, #1A1A1A 100%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 15px;
  letter-spacing: 1px;
  box-shadow: 0 3px 10px rgba(33, 33, 33, 0.4);
  z-index: 10;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
}

/* ========== NHÓM PLUS - Màu Silver với hiệu ứng giống Pro ========== */
#agent_grid_plus .agent-card,
#agent_grid_plus_view .agent-card {
  border: 2px solid #C0C0C0 !important;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(192, 192, 192, 0.35), 
              0 0 24px rgba(192, 192, 192, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hiệu ứng ánh sáng silver cho Plus (giống Pro) */
#agent_grid_plus .agent-card::before,
#agent_grid_plus_view .agent-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, 
    #E8E8E8 0%, 
    #D3D3D3 20%, 
    #C0C0C0 40%, 
    #A9A9A9 60%, 
    #C0C0C0 80%, 
    #D3D3D3 100%);
  background-size: 300% 300%;
  border-radius: 12px;
  z-index: -1;
  opacity: 0.6;
  animation: silverGlow 4s ease-in-out infinite;
}

@keyframes silverGlow {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 0.6;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.8;
  }
}

#agent_grid_plus .agent-card:hover,
#agent_grid_plus_view .agent-card:hover {
  border-color: #A9A9A9 !important;
  box-shadow: 0 12px 40px rgba(192, 192, 192, 0.5), 
              0 0 35px rgba(192, 192, 192, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-10px) scale(1.02);
}

/* Badge PLUS với gradient silver đẹp */
#agent_grid_plus .agent-header,
#agent_grid_plus_view .agent-header {
  position: relative;
}

#agent_grid_plus .agent-header::after,
#agent_grid_plus_view .agent-header::after {
  content: 'PLUS';
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 50%, #D3D3D3 100%);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 16px;
  letter-spacing: 1.2px;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 10;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ========== NHÓM PRO - Màu vàng Gold cao cấp ========== */
#agent_grid_pro .agent-card,
#agent_grid_pro_view .agent-card {
  border: 2px solid #F4D03F !important;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(244, 208, 63, 0.35), 
              0 0 24px rgba(255, 215, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fffef8 100%);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hiệu ứng ánh sáng vàng cho Pro */
#agent_grid_pro .agent-card::before,
#agent_grid_pro_view .agent-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, 
    #FFD700 0%, 
    #FFED4E 20%, 
    #FFD700 40%, 
    #FFC125 60%, 
    #FFD700 80%, 
    #FFED4E 100%);
  background-size: 300% 300%;
  border-radius: 12px;
  z-index: -1;
  opacity: 0.6;
  animation: goldGlow 4s ease-in-out infinite;
}

@keyframes goldGlow {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 0.6;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.8;
  }
}

#agent_grid_pro .agent-card:hover,
#agent_grid_pro_view .agent-card:hover {
  border-color: #F1C40F !important;
  box-shadow: 0 12px 40px rgba(244, 208, 63, 0.5), 
              0 0 35px rgba(255, 215, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-10px) scale(1.02);
}

/* Badge PRO với gradient vàng đẹp */
#agent_grid_pro .agent-header,
#agent_grid_pro_view .agent-header {
  position: relative;
}

#agent_grid_pro .agent-header::after,
#agent_grid_pro_view .agent-header::after {
  content: 'PRO';
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #FFD700 0%, #FFC125 50%, #F4D03F 100%);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 16px;
  letter-spacing: 1.2px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 10;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ========== STYLING CHO MODULE VIEW (Khi vào chi tiết công cụ) ========== */
/* Chỉ hiển thị badge, không có viền */

/* Standard modules */
#descriptive_view .module-title::after,
#data_management_view .module-title::after,
#data_transform_view .module-title::after,
#comau_view .module-title::after {
  content: 'STANDARD';
  position: relative;
  display: inline-block;
  margin-left: 10px;
  background: linear-gradient(135deg, #212121 0%, #1A1A1A 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(33, 33, 33, 0.4);
  z-index: 10;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Plus modules */
#regression_view .module-title::after,
#survival_view .module-title::after,
#kiemdinh_view .module-title::after,
#baocao_view .module-title::after {
  content: 'PLUS';
  position: relative;
  display: inline-block;
  margin-left: 10px;
  background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 50%, #D3D3D3 100%);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 10;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Pro modules */
#psy_sem_view .module-title::after,
#tltk_view .module-title::after {
  content: 'PRO';
  position: relative;
  display: inline-block;
  margin-left: 10px;
  background: linear-gradient(135deg, #FFD700 0%, #FFC125 50%, #F4D03F 100%);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 1.2px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 10;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
  vertical-align: middle;
}

/* Đảm bảo module-header có position relative */
.module-header {
  position: relative !important;
}

/* STYLING CHO LOGO DATASTAT 3.0 */
.navbar-logo {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.navbar-logo:hover {
  opacity: 0.9 !important;
}

.navbar-logo .logo-main {
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
}

.navbar-logo .logo-version {
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.2px !important;
  color: #FFB380 !important;
}

.navbar-logo:hover .logo-version {
  color: #ffcc99 !important;
  transition: color 0.2s ease !important;
}

/* ========== STYLING CHO CÁC TAB CHÍNH VÀ TAB PHỤ TRONG MODULE THỐNG KÊ CƠ BẢN ========== */
/* Áp dụng format cho tất cả các tab (chính và phụ) */
/* Format: nền trắng, chữ màu #894242 khi active, góc vuông */

/* Style cho các tab chính (tab lớn) - loại trừ tab trong tab-content */
#descriptive_view .nav-tabs > li.active > a,
#descriptive_view .nav-tabs > li.active > a:hover,
#descriptive_view .nav-tabs > li.active > a:focus,
#descriptive_view .nav-tabs > li.active > a span,
#data_management_view .nav-tabs > li.active > a,
#data_management_view .nav-tabs > li.active > a:hover,
#data_management_view .nav-tabs > li.active > a:focus,
#data_management_view .nav-tabs > li.active > a span,
#data_transform_view .nav-tabs > li.active > a,
#data_transform_view .nav-tabs > li.active > a:hover,
#data_transform_view .nav-tabs > li.active > a:focus,
#data_transform_view .nav-tabs > li.active > a span {
  color: #894242 !important;
}

/* Override cho tab chính - không áp dụng cho tab trong tab-content */
#descriptive_view > .tabsetPanel .nav-tabs > li.active > a,
#descriptive_view > .tabsetPanel .nav-tabs > li.active > a span,
#data_management_view > .tabsetPanel .nav-tabs > li.active > a,
#data_management_view > .tabsetPanel .nav-tabs > li.active > a span,
#data_transform_view > .tabsetPanel .nav-tabs > li.active > a,
#data_transform_view > .tabsetPanel .nav-tabs > li.active > a span {
  color: #894242 !important;
}

/* Đảm bảo tab chính không active vẫn giữ màu gốc */
#descriptive_view > .tabsetPanel .nav-tabs > li:not(.active) > a,
#descriptive_view > .tabsetPanel .nav-tabs > li:not(.active) > a span,
#data_management_view > .tabsetPanel .nav-tabs > li:not(.active) > a,
#data_management_view > .tabsetPanel .nav-tabs > li:not(.active) > a span,
#data_transform_view > .tabsetPanel .nav-tabs > li:not(.active) > a,
#data_transform_view > .tabsetPanel .nav-tabs > li:not(.active) > a span {
  color: #514945 !important;
}

/* Style cho nav-pills - các tab phụ */
#descriptive_view .nav-pills > li > a,
#data_management_view .nav-pills > li > a,
#data_transform_view .nav-pills > li > a {
  background-color: transparent !important;
  color: #333 !important;
  border: none !important;
  border-radius: 0 !important;
}

#descriptive_view .nav-pills > li.active > a,
#descriptive_view .nav-pills > li.active > a:hover,
#descriptive_view .nav-pills > li.active > a:focus,
#data_management_view .nav-pills > li.active > a,
#data_management_view .nav-pills > li.active > a:hover,
#data_management_view .nav-pills > li.active > a:focus,
#data_transform_view .nav-pills > li.active > a,
#data_transform_view .nav-pills > li.active > a:hover,
#data_transform_view .nav-pills > li.active > a:focus {
  background-color: #ffffff !important;
  color: #894242 !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}

#descriptive_view .nav-pills > li > a:hover,
#data_management_view .nav-pills > li > a:hover,
#data_transform_view .nav-pills > li > a:hover {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  border-radius: 0 !important;
}

/* Style cho nav-tabs (tabsetPanel mặc định) - các tab phụ */
#descriptive_view .nav-tabs > li > a,
#data_management_view .nav-tabs > li > a,
#data_transform_view .nav-tabs > li > a {
  background-color: transparent !important;
  color: #333 !important;
  border: none !important;
  border-radius: 0 !important;
}

#descriptive_view .nav-tabs > li.active > a,
#descriptive_view .nav-tabs > li.active > a:hover,
#descriptive_view .nav-tabs > li.active > a:focus,
#data_management_view .nav-tabs > li.active > a,
#data_management_view .nav-tabs > li.active > a:hover,
#data_management_view .nav-tabs > li.active > a:focus,
#data_transform_view .nav-tabs > li.active > a,
#data_transform_view .nav-tabs > li.active > a:hover,
#data_transform_view .nav-tabs > li.active > a:focus {
  background-color: #ffffff !important;
  color: #894242 !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}

#descriptive_view .nav-tabs > li > a:hover,
#data_management_view .nav-tabs > li > a:hover,
#data_transform_view .nav-tabs > li > a:hover {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  border-radius: 0 !important;
}

/* Đảm bảo các tab phụ bên trong tab chính cũng có format này */
#descriptive_view .tab-content .nav-pills > li > a,
#descriptive_view .tab-content .nav-tabs > li > a,
#data_management_view .tab-content .nav-pills > li > a,
#data_management_view .tab-content .nav-tabs > li > a,
#data_transform_view .tab-content .nav-pills > li > a,
#data_transform_view .tab-content .nav-tabs > li > a {
  background-color: transparent !important;
  color: #333 !important;
  border: none !important;
  border-radius: 0 !important;
}

#descriptive_view .tab-content .nav-pills > li.active > a,
#descriptive_view .tab-content .nav-pills > li.active > a:hover,
#descriptive_view .tab-content .nav-pills > li.active > a:focus,
#descriptive_view .tab-content .nav-tabs > li.active > a,
#descriptive_view .tab-content .nav-tabs > li.active > a:hover,
#descriptive_view .tab-content .nav-tabs > li.active > a:focus,
#data_management_view .tab-content .nav-pills > li.active > a,
#data_management_view .tab-content .nav-pills > li.active > a:hover,
#data_management_view .tab-content .nav-pills > li.active > a:focus,
#data_management_view .tab-content .nav-tabs > li.active > a,
#data_management_view .tab-content .nav-tabs > li.active > a:hover,
#data_management_view .tab-content .nav-tabs > li.active > a:focus,
#data_transform_view .tab-content .nav-pills > li.active > a,
#data_transform_view .tab-content .nav-pills > li.active > a:hover,
#data_transform_view .tab-content .nav-pills > li.active > a:focus,
#data_transform_view .tab-content .nav-tabs > li.active > a,
#data_transform_view .tab-content .nav-tabs > li.active > a:hover,
#data_transform_view .tab-content .nav-tabs > li.active > a:focus {
  background-color: #ffffff !important;
  color: #894242 !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}

#descriptive_view .tab-content .nav-pills > li > a:hover,
#descriptive_view .tab-content .nav-tabs > li > a:hover,
#data_management_view .tab-content .nav-pills > li > a:hover,
#data_management_view .tab-content .nav-tabs > li > a:hover,
#data_transform_view .tab-content .nav-pills > li > a:hover,
#data_transform_view .tab-content .nav-tabs > li > a:hover {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  border-radius: 0 !important;
}

/* Bỏ bo góc cho tất cả các tab phụ */
#descriptive_view .nav-pills,
#descriptive_view .nav-tabs,
#descriptive_view .nav-pills > li,
#descriptive_view .nav-tabs > li {
  border-radius: 0 !important;
}

/* ========== Layout trang lưới công cụ (nền + card giống mockup) ========== */
#main_grid_view,
#standard_group_view,
#plus_group_view,
#pro_group_view {
  background-color: #eef1f5;
}

#main_grid_view.container,
#standard_group_view.container,
#plus_group_view.container,
#pro_group_view.container {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

#main_grid_view .ds-section-heading,
#main_grid_view .ds-section-lead {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Vùng icon: họa tiết chấm “constellation” phía sau logo */
.agent-grid .agent-card .agent-header {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-grid .agent-card .agent-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(150, 160, 175, 0.4) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 50% 45%;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.agent-grid .agent-card .agent-icon {
  position: relative;
  z-index: 1;
}

.agent-grid .agent-body {
  padding: 1.1rem 1.25rem 1.35rem;
  text-align: center;
}

.agent-grid .agent-title {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.agent-grid .agent-stats {
  margin-bottom: 0.35rem;
}

.agent-grid .agent-stats p {
  margin-bottom: 0.3rem;
  line-height: 1.45;
}

.agent-grid .rating {
  margin-bottom: 0.8rem;
}

.agent-grid .agent-actions {
  margin-top: 0.2rem;
}