/* =====================================================
   CUSTOM STYLES FOR RESEARCH MANAGEMENT SYSTEM
   =====================================================
   File: custom.css
   Description: Custom CSS styles for modern UI components
===================================================== */

/* =====================================================
   USER PROFILE CARD STYLES
===================================================== */
.user-profile-card {
  background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}

.user-profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.user-profile-inner {
  position: relative;
  z-index: 1;
  padding: 30px;
}

.user-avatar-container {
  position: relative;
  display: inline-block;
}

.user-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.user-status-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: #10b981;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.user-info h4 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-info .position-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.user-info .department-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

/* =====================================================
   ACTION CARD STYLES
===================================================== */
.action-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
}

.action-card:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.action-card-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-card-title i {
  font-size: 1rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  color: #4c1d95;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-bottom: 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.action-btn:last-child {
  margin-bottom: 0;
}

.action-btn:hover {
  background: #ffffff;
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  color: #4c1d95;
  text-decoration: none;
}

.action-btn i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
  flex-shrink: 0;
}

.action-btn.btn-approval i {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

.action-btn.btn-excel-bank i {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.action-btn.btn-excel-project i {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.action-btn-text {
  flex: 1;
  text-align: left;
}

.action-btn-arrow {
  color: #9ca3af;
  transition: transform 0.3s ease;
}

.action-btn:hover .action-btn-arrow {
  transform: translateX(5px);
  color: #4c1d95;
}

/* =====================================================
   FILTER CARD STYLES
===================================================== */
.filter-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.filter-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 20px 25px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.filter-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-header-title i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: white;
  border-radius: 12px;
  font-size: 1.1rem;
}

.filter-header-title h5 {
  margin: 0;
  font-weight: 700;
  color: #1e293b;
  font-size: 1.1rem;
}

.filter-header-title span {
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 400;
}

.total-data-badge {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.total-data-badge i {
  font-size: 0.85rem;
}

.filter-body {
  padding: 20px 25px;
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.filter-group {
  flex: 1;
  min-width: 180px;
}

.filter-group.search-group {
  flex: 2;
  min-width: 280px;
}

.filter-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
}

.modern-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background-color: #f8fafc;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.modern-select:hover {
  border-color: #0ea5e9;
  background-color: #ffffff;
}

.modern-select:focus {
  outline: none;
  border-color: #0ea5e9;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.modern-search {
  position: relative;
}

.modern-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.modern-search input {
  width: 100%;
  padding: 12px 16px 12px 46px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background-color: #f8fafc;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.modern-search input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.modern-search input:hover {
  border-color: #0ea5e9;
  background-color: #ffffff;
}

.modern-search input:focus {
  outline: none;
  border-color: #0ea5e9;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.modern-search input:focus + i,
.modern-search:focus-within i {
  color: #0ea5e9;
}

.data-container {
  padding: 0 25px 25px 25px;
}

/* =====================================================
   LOADING STYLES
===================================================== */
.modern-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 15px;
}

.modern-spinner {
  width: 45px;
  height: 45px;
  border: 4px solid #e2e8f0;
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.modern-loading-text {
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 500;
}

.no-data-message {
  text-align: center;
  padding: 40px;
  color: #64748b;
}

.no-data-message i {
  font-size: 3rem;
  color: #cbd5e1;
  margin-bottom: 15px;
}

/* =====================================================
   RESPONSIVE STYLES
===================================================== */
@media (max-width: 768px) {
  /* User Profile Card */
  .user-profile-inner {
    padding: 20px;
  }

  .user-avatar {
    width: 70px;
    height: 70px;
  }

  .user-info h4 {
    font-size: 1.2rem;
  }

  .action-btn {
    padding: 12px 14px;
    font-size: 0.85rem;
  }

  /* Filter Card */
  .filter-header {
    padding: 15px 20px;
  }

  .filter-body {
    padding: 15px 20px;
  }

  .filter-controls {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .data-container {
    padding: 0 15px 15px 15px;
  }
}

/* =====================================================
   PROJECT DETAIL STYLES
===================================================== */
.project-detail-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: none;
  background: #ffffff;
}

.project-detail-header {
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  padding: 30px 25px;
  border-radius: 16px 16px 0 0;
  position: relative;
  overflow: hidden;
}

.project-detail-header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.project-code-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* =====================================================
   RESEARCHER CARD STYLES
===================================================== */
.researcher-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-radius: 16px;
  padding: 20px;
  border-left: 4px solid #10b981;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.researcher-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.researcher-card.secondary {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-left-color: #6c757d;
}

.researcher-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.researcher-avatar.primary {
  border-color: #10b981;
}

/* =====================================================
   STAT CARD STYLES
===================================================== */
.stat-card {
  border-radius: 14px;
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -30%;
  width: 60%;
  height: 120%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stat-card.budget {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.stat-card.spent {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.stat-card.expenses {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.stat-card.duration {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-icon {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* =====================================================
   REPORT SECTION STYLES
===================================================== */
.report-section-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
}

.report-section-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.report-section-header {
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.report-section-header .icon-box {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-right: 12px;
}

.report-section-header .icon-box.progress {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.report-section-header .icon-box.complete {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: white;
}

.report-section-header .icon-box.extend {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.report-section-header .icon-box.stop {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.report-section-header .icon-box.result {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

.report-section-body {
  padding: 20px;
}

/* =====================================================
   MODERN PROGRESS BAR STYLES
===================================================== */
.modern-progress-bar {
  height: 8px;
  border-radius: 10px;
  background: #e5e7eb;
  overflow: visible;
  position: relative;
}

.modern-progress-bar .progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #10b981 0%, #047857 100%);
  transition: width 0.5s ease;
  position: relative;
}

.modern-progress-bar .progress-text {
  position: absolute;
  right: -35px;
  top: -4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
}

/* =====================================================
   STATUS STEP & BADGE STYLES
===================================================== */
.status-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.status-step:last-child {
  border-bottom: none;
}

.status-step .step-label {
  font-size: 0.9rem;
  color: #4b5563;
}

.status-step .step-date {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-left: 8px;
}

.status-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-badge.checked {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #047857;
  border: 1px solid #10b981;
}

.status-badge.unchecked {
  background: #f3f4f6;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
}

.status-badge:hover {
  transform: scale(1.05);
}

/* =====================================================
   MODERN BUTTON STYLES
===================================================== */
.modern-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  width: 100%;
  margin-bottom: 8px;
}

.modern-btn i {
  margin-right: 8px;
}

.modern-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.modern-btn.success {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: white;
}

.modern-btn.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.modern-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  color: white;
  text-decoration: none;
}

.action-btn-orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 700;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5);
}

/* =====================================================
   DEADLINE ALERT STYLES
===================================================== */
.deadline-alert {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.deadline-alert.danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border: 1px solid #fecaca;
}

.deadline-alert.warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border: 1px solid #fde68a;
}

.deadline-alert i {
  margin-right: 10px;
  font-size: 1.1rem;
}

.submit-date-footer {
  background: #f9fafb;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  margin-top: 16px;
  font-size: 0.85rem;
  color: #6b7280;
}

.submit-date-footer i {
  margin-right: 6px;
  color: #10b981;
}

/* =====================================================
   MODERN TIMELINE STYLES
===================================================== */
.timeline-section {
  padding: 25px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 20px;
  margin-top: 20px;
}

.timeline-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.timeline-header-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  margin-right: 15px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.timeline-header h5 {
  margin: 0;
  font-weight: 700;
  color: #1e293b;
  font-size: 1.15rem;
}

.timeline-header span {
  color: #64748b;
  font-size: 0.85rem;
}

.modern-timeline {
  position: relative;
  padding-left: 30px;
}

.modern-timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #10b981 0%, #3b82f6 50%, #e5e7eb 100%);
  border-radius: 3px;
}

.timeline-item {
  position: relative;
  padding-bottom: 25px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -30px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.timeline-marker.completed {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.timeline-marker.pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.timeline-marker.waiting {
  background: #e5e7eb;
  color: #9ca3af;
}

.timeline-content {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.timeline-content:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateX(5px);
}

.timeline-content.completed {
  border-left: 4px solid #10b981;
}

.timeline-content.pending {
  border-left: 4px solid #f59e0b;
}

.timeline-content.waiting {
  border-left: 4px solid #e5e7eb;
  opacity: 0.7;
}

.timeline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.timeline-title h6 {
  margin: 0;
  font-weight: 700;
  color: #374151;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.timeline-title h6 i {
  margin-right: 10px;
  font-size: 1.1rem;
}

.timeline-title h6 i.text-success {
  color: #10b981 !important;
}

.timeline-title h6 i.text-warning {
  color: #f59e0b !important;
}

.timeline-date-badge {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0369a1;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.timeline-date-badge.waiting {
  background: #f3f4f6;
  color: #9ca3af;
}

.timeline-expand-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  color: #0369a1;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin-top: 12px;
}

.timeline-expand-btn:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.2);
  text-decoration: none;
  color: #0369a1;
}

.timeline-expand-btn i {
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.timeline-expand-btn.collapsed i {
  transform: rotate(0deg);
}

.timeline-expand-btn:not(.collapsed) i {
  transform: rotate(180deg);
}

/* =====================================================
   TIMELINE DETAIL CARD STYLES
===================================================== */
.timeline-detail-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 0;
  margin-top: 15px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.timeline-detail-card .detail-header {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  padding: 15px 20px;
  color: white;
  display: flex;
  align-items: center;
}

.timeline-detail-card .detail-header i {
  font-size: 1.2rem;
  margin-right: 10px;
  opacity: 0.9;
}

.timeline-detail-card .detail-header h6 {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.timeline-detail-card .detail-body {
  padding: 20px;
}

.timeline-detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.timeline-detail-table tr {
  transition: all 0.2s ease;
}

.timeline-detail-table tr:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.timeline-detail-table tr td {
  padding: 14px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}

.timeline-detail-table tr:last-child td {
  border-bottom: none;
}

.timeline-detail-table .label-col,
.timeline-detail-table td:first-child {
  width: 25%;
  font-weight: 600;
  color: #475569;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-right: 3px solid #3b82f6;
}

.timeline-detail-table .value-col,
.timeline-detail-table td:last-child {
  color: #1e293b;
  font-size: 0.9rem;
  line-height: 1.6;
}

.timeline-detail-table .info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  margin-left: 8px;
}

.timeline-detail-table .info-badge:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.timeline-detail-table .keyword-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 3px;
  border: 1px solid #bae6fd;
  transition: all 0.2s ease;
}

.timeline-detail-table .keyword-badge:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  transform: translateY(-2px);
}

.timeline-detail-table .integration-item {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-left: 3px solid #10b981;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.timeline-detail-table .integration-item p {
  margin: 0;
  color: #047857;
  font-weight: 500;
}

.timeline-detail-table .integration-detail {
  margin-top: 5px;
  padding-left: 15px;
  color: #64748b;
  font-size: 0.85rem;
}

/* =====================================================
   TIMELINE HISTORY STYLES
===================================================== */
.timeline-history-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  background: white;
  border-radius: 12px;
  margin-bottom: 10px;
  border-left: 3px solid #10b981;
}

.timeline-history-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
  margin-right: 15px;
}

.timeline-history-content {
  flex: 1;
}

.timeline-history-name {
  font-weight: 700;
  color: #374151;
  margin-bottom: 3px;
}

.timeline-history-action {
  color: #3b82f6;
  font-weight: 600;
  font-size: 0.9rem;
}

.timeline-history-time {
  font-size: 0.8rem;
  color: #9ca3af;
}

/* =====================================================
   WITHDRAW MONEY STYLES
===================================================== */
.withdraw-money-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #bbf7d0;
}

.withdraw-money-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.withdraw-money-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
}

.withdraw-money-title {
  font-weight: 700;
  color: #047857;
  margin: 0;
}

.withdraw-slip-preview {
  max-width: 100%;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  margin-top: 10px;
}

/* =====================================================
   MONEY DETAIL STYLES
===================================================== */
.money-detail-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  border-left: 4px solid #3b82f6;
}

.money-detail-item .money-type-header {
  font-weight: 700;
  color: #1e293b;
  font-size: 0.95rem;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.money-detail-item .money-type-amount {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
}

.money-detail-subitem {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 0.9rem;
}

.money-detail-subitem:last-child {
  border-bottom: none;
}

.money-total-row {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1rem;
}

/* =====================================================
   APPROVAL HISTORY STYLES
===================================================== */
.approval-history-container {
  padding: 20px;
}

.approval-history-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  border-left: 4px solid #10b981;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.approval-history-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.approval-history-item.pending {
  border-left-color: #f59e0b;
}

.approval-history-item.rejected {
  border-left-color: #ef4444;
}

.approval-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #10b981;
  flex-shrink: 0;
}

.approval-avatar.pending {
  border-color: #f59e0b;
}

.approval-avatar.rejected {
  border-color: #ef4444;
}

.approval-info {
  flex: 1;
  margin-left: 15px;
}

.approval-name {
  font-weight: 700;
  color: #1e293b;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.approval-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.approval-status.success {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
}

.approval-status.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
}

.approval-status.danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #dc2626;
}

.approval-comment {
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 4px;
}

.approval-datetime {
  font-size: 0.8rem;
  color: #94a3b8;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.approval-datetime i {
  margin-right: 5px;
}

.agreement-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.agreement-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  color: white;
  text-decoration: none;
}

.agreement-btn i {
  margin-right: 10px;
  font-size: 1.1rem;
}

.agreement-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  padding: 20px;
  margin-top: 15px;
  text-align: center;
  border: 1px dashed #3b82f6;
}

/* =====================================================
   WITHDRAW STATUS ALERT STYLES
===================================================== */
.withdraw-status-alert {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.withdraw-status-alert.success {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-left: 4px solid #10b981;
}

.withdraw-status-alert.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
}

.withdraw-status-alert i {
  font-size: 1.5rem;
  margin-right: 12px;
}

.withdraw-status-alert.success i {
  color: #10b981;
}

.withdraw-status-alert.warning i {
  color: #f59e0b;
}

.withdraw-status-alert span {
  font-weight: 600;
  font-size: 1rem;
}

.withdraw-status-alert.success span {
  color: #047857;
}

.withdraw-status-alert.warning span {
  color: #b45309;
}

/* =====================================================
   WITHDRAW INFO CARD STYLES
===================================================== */
.withdraw-info-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.withdraw-info-header {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  padding: 15px 20px;
  color: white;
  display: flex;
  align-items: center;
}

.withdraw-info-header i {
  font-size: 1.2rem;
  margin-right: 10px;
}

.withdraw-info-header h6 {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.withdraw-info-body {
  padding: 20px;
}

.withdraw-info-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  align-items: flex-start;
}

.withdraw-info-row:last-child {
  border-bottom: none;
}

.withdraw-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.withdraw-info-icon.blue {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #2563eb;
}

.withdraw-info-icon.orange {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
  color: #ea580c;
}

.withdraw-info-icon.gray {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
}

.withdraw-info-icon.green {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #16a34a;
}

.withdraw-info-label {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 2px;
}

.withdraw-info-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
}

.withdraw-info-value.highlight {
  color: #10b981;
  font-size: 1.1rem;
}

.withdraw-slip-container {
  background: #f8fafc;
  border-radius: 12px;
  padding: 15px;
  margin-top: 15px;
  border: 1px dashed #cbd5e1;
}

.withdraw-slip-container embed,
.withdraw-slip-container img {
  border-radius: 10px;
  border: 2px solid #e2e8f0;
}

.receipt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  margin-top: 15px;
}

.receipt-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  color: white;
  text-decoration: none;
}

.receipt-btn i {
  margin-right: 10px;
  font-size: 1.1rem;
}

.return-money-info {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid #f59e0b;
}

.return-money-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #fbbf24;
}

.return-money-row:last-child {
  border-bottom: none;
}

.return-money-label {
  font-weight: 600;
  color: #92400e;
}

.return-money-value {
  color: #78350f;
  font-weight: 500;
}

/* =====================================================
   PROJECT CLOSURE STYLES
===================================================== */
.project-closure-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.project-closure-card.completed {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 2px solid #10b981;
}

.project-closure-card.pending {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 2px solid #f59e0b;
}

.closure-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
}

.closure-icon.completed {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: white;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  animation: celebratePulse 2s ease-in-out infinite;
}

.closure-icon.pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

@keyframes celebratePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.closure-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.closure-title.completed {
  color: #047857;
}

.closure-title.pending {
  color: #b45309;
}

.closure-subtitle {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.closure-subtitle.completed {
  color: #059669;
}

.closure-subtitle.pending {
  color: #d97706;
}

.closure-date-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
}

.closure-date-badge.completed {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.closure-date-badge.pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.closure-date-badge i {
  margin-right: 8px;
}

/* Confetti decoration for completed projects */
.project-closure-card.completed::before,
.project-closure-card.completed::after {
  content: "🎉";
  position: absolute;
  font-size: 2rem;
  animation: confettiFloat 3s ease-in-out infinite;
}

.project-closure-card.completed::before {
  top: 15px;
  left: 15px;
  animation-delay: 0s;
}

.project-closure-card.completed::after {
  top: 15px;
  right: 15px;
  animation-delay: 1.5s;
}

@keyframes confettiFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) rotate(15deg);
    opacity: 0.8;
  }
}

/* =====================================================
   RESEARCH DETAIL CARD STYLES
   รายละเอียดขอรับทุนอุดหนุนการวิจัยงบประมาณเงินรายได้
===================================================== */
.research-detail-header {
  display: flex;
  align-items: center;
  padding: 24px 28px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
  position: relative;
  overflow: hidden;
}

.research-detail-header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.research-detail-header-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 1.8rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.research-detail-header-content {
  position: relative;
  z-index: 1;
  flex: 1;
}

.research-detail-header-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.35rem;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 6px;
  line-height: 1.4;
}

.research-detail-header-subtitle {
  opacity: 0.95;
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
}

.research-detail-card {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.research-detail-card:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.research-detail-item {
  display: flex;
  align-items: flex-start;
  padding: 24px 28px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.research-detail-item:first-child {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.research-detail-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.research-detail-item:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateX(3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.research-detail-label {
  display: flex;
  align-items: center;
  min-width: 220px;
  flex-shrink: 0;
  margin-right: 24px;
}

.research-detail-label span {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  margin-left: 12px;
  letter-spacing: 0.3px;
}

.research-detail-label i {
  font-size: 1.3rem;
  min-width: 28px;
}

.research-detail-value {
  flex: 1;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.7;
}

.research-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.research-detail-item:hover .research-icon-circle {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Sub Person Card Styles */
.sub-person-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.sub-person-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
  border-left-color: #1d4ed8;
}

.sub-person-card:last-child {
  margin-bottom: 0;
}

.sub-person-card .badge {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Research Name Box */
.research-name-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  padding: 20px 24px;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.research-name-item {
  line-height: 1.8;
  margin-bottom: 12px;
  padding: 8px 0;
}

.research-name-item:last-child {
  margin-bottom: 0;
}

.research-name-item strong {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: inline-block;
  min-width: 70px;
}

.research-name-th strong {
  color: #10b981;
}

.research-name-en strong {
  color: #3b82f6;
}

.research-name-item span {
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.6;
}

/* Research Duration Box */
.research-duration-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  padding: 18px 22px;
  border-left: 4px solid #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.research-duration-box strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: #92400e;
}

.research-duration-box small {
  color: #b45309;
  font-weight: 500;
}

/* Budget Section */
.budget-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: 12px;
  padding: 20px 24px;
  border-left: 4px solid #10b981;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

.budget-section h5 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #047857;
  text-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
  margin-bottom: 4px;
}

.budget-section small {
  color: #059669;
  font-weight: 500;
  font-size: 0.9rem;
}

.budget-section .btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.budget-section .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

/* Keyword Badge Enhancement */
.research-detail-value .badge-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #fbbf24;
  font-weight: 600;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.research-detail-value .badge-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

/* Integration Items */
.research-detail-value p {
  margin-bottom: 8px;
}

.research-detail-value .fa-check-circle {
  color: #10b981;
  font-size: 1rem;
}

.research-detail-value .fa-minus-circle {
  color: #94a3b8;
  font-size: 1rem;
}

/* Place Test Items */
.research-detail-value .fa-map-pin {
  color: #ef4444;
  font-size: 0.95rem;
  margin-right: 8px;
}

/* Research Detail Item Variants */
.research-detail-item-primary {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

.research-icon-primary {
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
}

/* Research Value Styles */
.research-value-title {
  font-size: 1.05rem;
  color: #1e293b;
  font-weight: 700;
}

.research-value-text {
  font-weight: 500;
  color: #1e293b;
  font-size: 0.95rem;
}

/* Sub Person Styles */
.sub-person-name {
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 600;
}

.sub-person-dept {
  font-size: 0.85rem;
}

/* Budget Detail Button */
.budget-detail-btn {
  border-radius: 20px;
  transition: all 0.3s ease;
}

/* Keyword Badge */
.keyword-badge {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 20px;
}

/* =====================================================
   BUDGET DETAIL MODAL STYLES
   Modal รายละเอียดงบประมาณ
===================================================== */
.budget-detail-modal {
  border-radius: 20px;
  overflow: hidden;
}

.budget-detail-modal-header {
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  border-bottom: none;
  padding: 24px 28px;
  color: white;
  position: relative;
  overflow: hidden;
}

.budget-detail-modal-header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.budget-detail-header-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.budget-detail-header-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 400;
  display: block;
  margin-top: 4px;
}

.budget-detail-modal-body {
  padding: 24px 28px;
  max-height: 60vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}

.budget-type-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.budget-type-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.budget-type-header {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid #f1f5f9;
}

.budget-type-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  margin-right: 16px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
}

.budget-type-info {
  flex: 1;
}

.budget-type-name {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1e293b;
  margin-bottom: 4px;
}

.budget-type-amount {
  font-size: 0.95rem;
  color: #10b981;
  font-weight: 600;
}

.budget-type-details {
  margin-bottom: 16px;
}

.budget-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 10px;
  border-left: 3px solid #10b981;
  transition: all 0.2s ease;
}

.budget-detail-item:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  transform: translateX(3px);
  border-left-color: #3b82f6;
}

.budget-detail-description {
  flex: 1;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.6;
  padding-right: 16px;
}

.budget-detail-amount {
  color: #10b981;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.budget-type-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: 10px;
  border: 1px solid #bbf7d0;
}

.budget-type-total-label {
  font-weight: 600;
  color: #047857;
  font-size: 0.95rem;
}

.budget-type-total-amount {
  font-weight: 700;
  color: #059669;
  font-size: 1.1rem;
}

.budget-grand-total {
  margin-top: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.budget-grand-total-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.budget-grand-total-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-right: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.budget-grand-total-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.budget-grand-total-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.budget-grand-total-amount {
  color: white;
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.budget-detail-modal-footer {
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
  border-top: 1px solid #e5e7eb;
  padding: 16px 28px;
  display: flex;
  justify-content: flex-end;
}

.budget-detail-close-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.budget-detail-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  color: white;
}

/* Responsive Styles for Budget Detail Modal */
@media (max-width: 768px) {
  .budget-detail-modal-header {
    padding: 20px;
  }

  .budget-detail-header-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    margin-right: 12px;
  }

  .budget-detail-modal-body {
    padding: 20px;
    max-height: 50vh;
  }

  .budget-type-card {
    padding: 16px;
  }

  .budget-detail-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .budget-detail-amount {
    margin-top: 8px;
    align-self: flex-end;
  }

  .budget-grand-total-content {
    flex-direction: column;
    text-align: center;
  }

  .budget-grand-total-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .budget-grand-total-info {
    align-items: center;
  }

  .budget-grand-total-amount {
    font-size: 1.5rem;
  }
}

/* =====================================================
   LOG EDIT DETAIL MODAL STYLES
   Modal รายละเอียดการแก้ไขข้อมูล
===================================================== */
.log-edit-detail-modal {
  border-radius: 20px;
  overflow: hidden;
}

.log-edit-detail-modal-header {
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  padding: 24px 28px;
  color: white;
  position: relative;
  overflow: hidden;
}

.log-edit-detail-modal-header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.log-edit-detail-header-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.log-edit-detail-header-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 400;
  display: block;
  margin-top: 4px;
}

.log-edit-detail-modal-body {
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
  max-height: 70vh;
  overflow-y: auto;
}

.log-edit-detail-modal-footer {
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
  padding: 16px 28px;
  display: flex;
  justify-content: flex-end;
}

.log-edit-detail-close-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.log-edit-detail-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  color: white;
}

/* Comparison Items Styles */
.comparison-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.comparison-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.comparison-label {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}

.comparison-label i {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.comparison-col {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 16px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.comparison-col.old-value {
  border-color: #e5e7eb;
}

.comparison-col.new-value {
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.comparison-header {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.comparison-col.old-value .comparison-header {
  color: #6b7280;
}

.comparison-col.new-value .comparison-header {
  color: #047857;
}

.comparison-col div {
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 8px;
}

.comparison-col strong {
  color: #1e293b;
  font-weight: 600;
}

/* Changed Highlight */
.changed-highlight {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  border: 1px solid #fbbf24;
}

/* No Change Alert */
.log-edit-no-change-alert {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  border: 2px solid #3b82f6;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.log-edit-no-change-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.log-edit-no-change-text {
  color: #1e40af;
}

.log-edit-no-change-text strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #1e3a8a;
}

.log-edit-no-change-text small {
  font-size: 0.9rem;
  color: #3b82f6;
  font-weight: 400;
}

/* Log Edit Request Card */
.log-edit-request-card {
  background: linear-gradient(135deg, #fff9f0 0%, #ffffff 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid #fde68a;
}

.log-edit-request-header {
  background: linear-gradient(135deg, #ff9800 0%, #ff6b00 100%);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  color: white;
}

.log-edit-request-header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.log-edit-request-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
  margin-bottom: 2px;
}

.log-edit-request-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 400;
}

.log-edit-request-body {
  padding: 24px;
}

.log-edit-section-label {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.log-edit-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 0.9rem;
  color: white;
  flex-shrink: 0;
}

.log-edit-section-icon-orange {
  background: linear-gradient(135deg, #ff9800 0%, #ff6b00 100%);
}

.log-edit-section-icon-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.log-edit-section-icon-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.log-edit-reason-box {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: 4px solid #ff9800;
  border-radius: 10px;
  padding: 16px;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.7;
}

.log-edit-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid;
  width: 100%;
}

.log-edit-file-btn-success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #047857;
  border-color: #10b981;
}

.log-edit-file-btn-success:hover {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  color: #047857;
  text-decoration: none;
}

.log-edit-file-btn-primary {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e40af;
  border-color: #3b82f6;
}

.log-edit-file-btn-primary:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  color: #1e40af;
  text-decoration: none;
}

.log-edit-no-file {
  color: #94a3b8;
  font-size: 0.9rem;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  text-align: center;
}

/* Budget Item Styles in Comparison */
.budget-item {
  transition: all 0.3s ease;
}

.budget-item:hover {
  transform: translateX(3px);
}

/* Responsive Styles for Log Edit Detail Modal */
@media (max-width: 768px) {
  .log-edit-detail-modal-header {
    padding: 20px;
    flex-direction: column;
    text-align: center;
  }

  .log-edit-detail-header-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .log-edit-detail-header-subtitle {
    font-size: 0.85rem;
  }

  .log-edit-detail-modal-body {
    padding: 20px;
    max-height: 60vh;
  }

  .comparison-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .comparison-item {
    padding: 16px;
  }
}

/* Responsive Styles for Research Detail */
@media (max-width: 768px) {
  .research-detail-header {
    padding: 20px;
    flex-direction: column;
    text-align: center;
  }

  .research-detail-header-icon {
    margin-right: 0;
    margin-bottom: 16px;
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .research-detail-header-title {
    font-size: 1.15rem;
  }

  .research-detail-header-subtitle {
    font-size: 0.85rem;
  }

  .research-detail-item {
    flex-direction: column;
    padding: 20px;
  }

  .research-detail-label {
    min-width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .research-detail-value {
    width: 100%;
  }

  .budget-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .budget-section .btn {
    width: 100%;
  }

  .research-icon-circle {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* =====================================================
   PROJECT CARD STYLES
   Modern Project Card Styles for Fund Research List
===================================================== */
.project-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all .3s ease;
  margin-bottom: 20px;
}

.project-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}

.project-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.project-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  object-fit: cover;
  flex-shrink: 0;
}

.project-info {
  flex: 1;
  min-width: 0;
}

.project-code {
  display: inline-block;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.project-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  line-height: 1.4;
  cursor: pointer;
  transition: color .2s;
}

.project-title:hover {
  color: #0ea5e9;
}

.project-title-en {
  font-size: .85rem;
  color: #64748b;
  margin-bottom: 0;
}

.project-status {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.project-body {
  padding: 20px 24px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 20px;
}

.info-section h6 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #64748b;
  margin-bottom: 12px;
  font-weight: 600;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: .9rem;
}

.info-item i {
  width: 18px;
  color: #0ea5e9;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-item .label {
  color: #64748b;
  min-width: 100px;
}

.info-item .value {
  color: #1e293b;
  font-weight: 500;
}

.researcher-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.researcher-list li {
  padding: 4px 0;
  color: #475569;
  font-size: .85rem;
}

.timeline-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.timeline-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #64748b;
}

.timeline-step.active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

.timeline-step.waiting {
  background: #fef3c7;
  color: #d97706;
}

.timeline-step i {
  font-size: .65rem;
}

.alert-box {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .85rem;
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert-box.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.alert-box.warning {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.alert-box i {
  flex-shrink: 0;
  margin-top: 2px;
}

.project-actions {
  padding: 16px 24px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Enhanced badge buttons */
.project-actions .badge {
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.project-actions .badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.project-actions a {
  text-decoration: none;
}

/* Color enhancements */
.project-actions .brc-primary-m2:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
}

.project-actions .brc-warning-m2:hover {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
}

.project-actions .brc-success-m2:hover {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
}

.project-actions .brc-red-m2:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
}

.project-actions .brc-default-m2:hover {
  background: #f1f5f9 !important;
  border-color: #64748b !important;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  border: 1px solid transparent;
  cursor: pointer;
}

.action-btn.primary {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.action-btn.primary:hover {
  background: #2563eb;
  color: #fff;
}

.action-btn.success {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.action-btn.success:hover {
  background: #16a34a;
  color: #fff;
}

.action-btn.warning {
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}

.action-btn.warning:hover {
  background: #d97706;
  color: #fff;
}

.action-btn.danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.action-btn.danger:hover {
  background: #dc2626;
  color: #fff;
}

.action-btn.default {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.action-btn.default:hover {
  background: #475569;
  color: #fff;
}

.budget-badge {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .project-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .project-status {
    position: static;
    margin-top: 10px;
  }
}

/* =====================================================
   RESEARCH LIST STYLES
   Research List - Clean Card Style
===================================================== */

/* Page Header Card */
.page-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.page-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page-header-icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.page-header-text h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.page-header-text p {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.9;
}

.page-header-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.1);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
}

.page-header-filter label {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-header-filter label::before {
  content: '\f073';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85rem;
  opacity: 0.8;
}

.year-select {
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  color: #047857;
  min-width: 130px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.year-select:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.year-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}

/* Action Buttons Bar */
.action-buttons-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.action-btn.btn-add {
  background: #10b981;
  color: #fff;
}

.action-btn.btn-add:hover {
  background: #059669;
  color: #fff;
}

.action-btn.btn-info-outline {
  background: #fff;
  color: #3b82f6;
  border: 2px solid #3b82f6;
}

.action-btn.btn-info-outline:hover {
  background: #3b82f6;
  color: #fff;
}

.action-btn.btn-download {
  background: #8b5cf6;
  color: #fff;
}

.action-btn.btn-download:hover {
  background: #7c3aed;
  color: #fff;
}

.action-btn.btn-export {
  background: #059669;
  color: #fff;
}

.action-btn.btn-export:hover {
  background: #047857;
  color: #fff;
}

@media (max-width: 768px) {
  .page-header-card {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .page-header-content {
    flex-direction: column;
  }
  
  .page-header-filter {
    width: 100%;
    justify-content: center;
  }
  
  .action-buttons-bar {
    justify-content: center;
  }
  
  .action-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

/* Container */
.research-list-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Loaded Content Container - for lazy loaded items */
#loadedContentPending,
#loadedContentApproved {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Research Row Card */
.research-row {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  border-left: 4px solid #667eea;
  padding: 0.85rem 1rem;
  position: relative;
  transition: all 0.2s ease;
}

.research-row:hover {
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.12);
  transform: translateX(2px);
}

.research-row.status-pending { border-left-color: #ec4899; }
.research-row.status-approved { border-left-color: #10b981; }
.research-row.status-reviewing { border-left-color: #f59e0b; }
.research-row.status-rejected { border-left-color: #ef4444; }

/* Status Badge - Corner */
.research-status-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.research-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 0 10px 0 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.research-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
}

.research-status-badge.bgc-blue-d3 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.research-status-badge.bgc-green-d3 { background: linear-gradient(135deg, #10b981, #059669); }
.research-status-badge.bgc-orange-d3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.research-status-badge.bgc-red-d3 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.research-status-badge.bgc-purple-d3 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.research-status-badge.bgc-grey-d3 { background: linear-gradient(135deg, #6b7280, #4b5563); }

/* Main Content */
.research-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

/* Avatar */
.research-avatar {
  flex-shrink: 0;
}

.research-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.research-avatar::after { display: none; }

.research-content {
  flex: 1;
  min-width: 0;
}

/* Title Section */
.research-title-section {
  margin-bottom: 0.6rem;
  padding-right: 110px;
}

.research-code {
  display: inline-block;
  background: linear-gradient(135deg, #2196F3, #1565C0);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}

.research-code::before { display: none; }

.research-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
  line-height: 1.45;
  cursor: pointer;
  transition: color 0.2s;
}

.research-title:hover {
  color: #667eea;
}

.research-title-en {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  font-style: italic;
}

.cancelled-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 4px;
  margin-left: 8px;
}

/* Info Box - Single Container */
.research-info-grid {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 0.75rem;
}

/* Top row - 3 columns */
.research-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.research-info-row:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 10px;
}

.research-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
}

.research-info-item.full-width {
  flex: 100%;
  min-width: 100%;
  align-items: flex-start;
}

/* Responsive for info row */
@media (max-width: 768px) {
  .research-info-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .research-info-item {
    min-width: 100%;
  }
}

.research-info-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
  font-size: 0.85rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.research-info-icon.icon-user { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.research-info-icon.icon-team { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
.research-info-icon.icon-calendar { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.research-info-icon.icon-money { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }

.research-info-details {
  flex: 1;
  min-width: 0;
}

.research-info-label {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.research-info-value {
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.research-info-value ul {
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.research-info-value ul li {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px 5px 20px;
  position: relative;
  font-size: 0.88rem;
  color: #475569;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.research-info-value ul li:hover {
  background: #f0f4ff;
  border-color: #667eea;
}

.research-info-value ul li::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
}

.research-info-value .money-amount {
  color: #059669;
  font-size: 1rem;
  font-weight: 700;
}

/* Action Buttons - Prominent Style */
.research-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
}

.action-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.action-badge:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.action-badge:active {
  transform: translateY(0);
}

.action-badge i { 
  font-size: 0.88rem;
}

/* Primary - Blue Gradient */
.action-badge.badge-primary { 
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
  color: #fff;
}

.action-badge.badge-primary:hover { 
  background: linear-gradient(135deg, #1976D2 0%, #0d47a1 100%);
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}

/* Success - Green Gradient */
.action-badge.badge-success { 
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
}

.action-badge.badge-success:hover { 
  background: linear-gradient(135deg, #0ea573 0%, #047857 100%);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* Warning - Orange Gradient */
.action-badge.badge-warning { 
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
}

.action-badge.badge-warning:hover { 
  background: linear-gradient(135deg, #e08e00 0%, #c06600 100%);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

/* Danger - Red Gradient */
.action-badge.badge-danger { 
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
}

.action-badge.badge-danger:hover { 
  background: linear-gradient(135deg, #dc3939 0%, #c41e1e 100%);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Info - Blue Gradient */
.action-badge.badge-info { 
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #fff;
}

.action-badge.badge-info:hover { 
  background: linear-gradient(135deg, #0c96d6 0%, #0273ad 100%);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
}

/* Secondary - Gray Outline Style */
.action-badge.badge-secondary { 
  background: #fff;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.action-badge.badge-secondary:hover { 
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(100, 116, 139, 0.3);
}

/* Section Header */
.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem 1.2rem;
  background: linear-gradient(135deg, #047857 0%, #1e40af 100%);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(4, 120, 87, 0.35);
}

.section-header h3 {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.section-header h3 i {
  margin-right: 8px;
  opacity: 0.9;
}

.section-header .badge-count {
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 5px 14px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
}

/* Search Box */
.search-container {
  position: relative;
  margin-bottom: 0.85rem;
  max-width: 380px;
}

.search-input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.92rem;
  background: #fff;
  transition: all 0.2s ease;
}

.search-input:focus {
  border-color: #667eea;
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.95rem;
}

/* Research Tabs */
.research-tabs {
  display: flex;
  gap: 0;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 6px;
}

.research-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s ease;
}

.research-tab:hover {
  color: #047857;
  background: rgba(4, 120, 87, 0.08);
}

.research-tab.active {
  background: #fff;
  color: #047857;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.research-tab i {
  font-size: 1.1rem;
}

.research-tab .tab-count {
  background: #e2e8f0;
  color: #64748b;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.research-tab.active .tab-count {
  background: linear-gradient(135deg, #047857, #1e40af);
  color: #fff;
}

.research-tab-content {
  display: none;
  border: none;
}

.research-tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.research-tab-content-wrapper {
  background: transparent;
  padding: 1rem 0;
  margin-top: -0.5rem;
}

.research-tab-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.research-tab-content-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
}

.research-tab-content-title i {
  color: #047857;
  font-size: 1.2rem;
}

.research-tab-content-badge {
  background: linear-gradient(135deg, #047857, #10b981);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
  .research-tabs {
    flex-direction: column;
  }
  
  .research-tab {
    padding: 12px 16px;
    font-size: 0.88rem;
  }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: #94a3b8;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 10px;
  border: 2px dashed #e2e8f0;
}

.empty-state i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  color: #cbd5e1;
}

.empty-state p {
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 992px) {
  .research-title-section {
    padding-right: 0;
  }
  
  .research-status-corner {
    position: relative;
    margin-bottom: 0.5rem;
    display: inline-block;
  }
  
  .research-status-badge {
    border-radius: 4px;
  }
}

@media (max-width: 576px) {
  .research-main {
    flex-direction: column;
  }
  
  .research-avatar {
    margin-bottom: 0.5rem;
  }
  
  .research-avatar img {
    width: 36px;
    height: 36px;
  }
  
  .section-header {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }
  
  .section-header h3 {
    font-size: 0.85rem;
  }
  
  .research-info-value ul {
    flex-direction: column;
  }
}

/* Skeleton Animation for Lazy Loading */
@keyframes skeleton-loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.skeleton-row {
  border-left-color: #e5e7eb !important;
}

.skeleton-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.skeleton-code {
  width: 100px;
  height: 24px;
  margin-bottom: 8px;
  border-radius: 12px;
}

.skeleton-title {
  width: 70%;
  height: 20px;
  margin-bottom: 6px;
}

.skeleton-subtitle {
  width: 50%;
  height: 16px;
}

.skeleton-info {
  width: 30%;
  height: 40px;
  border-radius: 6px;
}

.skeleton-btn {
  width: 120px;
  height: 36px;
  border-radius: 8px;
}

.load-more-trigger {
  text-align: center;
  padding: 1.5rem;
}

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #667eea;
  font-weight: 500;
}

.loading-spinner i {
  font-size: 1.5rem;
}

.all-loaded-message {
  text-align: center;
  padding: 1rem;
  color: #94a3b8;
  font-size: 0.9rem;
}