/* ===== CSS Variables ===== */

:root {

  --primary: #2979FF;

  --primary-light: #5c9aff;

  --primary-dark: #1565c0;

  --primary-bg: #e3f2fd;

  --accent: #06b6d4;

  --accent-light: #67e8f9;

  --success: #10b981;

  --success-bg: #d1fae5;

  --warning: #f59e0b;

  --warning-bg: #fef3c7;

  --danger: #ef4444;

  --danger-bg: #fee2e2;

  --gray-50: #f9fafb;

  --gray-100: #f3f4f6;

  --gray-200: #e5e7eb;

  --gray-300: #d1d5db;

  --gray-400: #9ca3af;

  --gray-500: #6b7280;

  --gray-600: #4b5563;

  --gray-700: #374151;

  --gray-800: #1f2937;

  --gray-900: #111827;

  --sidebar-bg: #0d47a1;

  --sidebar-hover: rgba(255, 255, 255, 0.08);

  --sidebar-active: rgba(41, 121, 255, 0.6);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0.05);

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0.05);

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0.06);

  --radius-sm: 6px;

  --radius-md: 10px;

  --radius-lg: 16px;

  --radius-xl: 24px;

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



/* ===== Reset & Base===== */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;

  font-size: 14px;

  color: var(--gray-700);

  background: var(--gray-100);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



/* ===== Scrollbar ===== */

::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}



::-webkit-scrollbar-track {

  background: transparent;

}



::-webkit-scrollbar-thumb {

  background: var(--gray-300);

  border-radius: 3px;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--gray-400);

}



/* ===== Login Page ===== */

.login-wrapper {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 30%, #2979FF 70%, #06b6d4 100%);

  position: relative;

  overflow: hidden;

}



.login-wrapper::before {

  content: '';

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(ellipse at center, rgba(41, 121, 255, 0.15) 0%, transparent 70%);

  animation: loginPulse 8s ease-in-out infinite;

}



@keyframes loginPulse {

  0%, 100% { transform: scale(1); opacity: 0.5; }

  50% { transform: scale(1.1); opacity: 0.8; }

}



.login-box {

  background: rgba(255, 255, 0.95);

  backdrop-filter: blur(20px);

  padding: 56px 48px;

  border-radius: var(--radius-xl);

  width: 420px;

  box-shadow: var(--shadow-xl), 0 0 1px rgba(255, 255, 255, 0.1);

  text-align: center;

  position: relative;

  z-index: 1;

  animation: loginSlideUp 0.6s ease-out;

}



@keyframes loginSlideUp {

  from { opacity: 0; transform: translateY(30px); }

  to { opacity: 1; transform: translateY(0); }

}



.login-box h2 {

  font-size: 30px;

  margin-bottom: 8px;

  background: linear-gradient(135deg, var(--primary), #06b6d4);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  font-weight: 700;

  letter-spacing: -0.5px;

}



.login-desc {

  color: var(--gray-500);

  margin-bottom: 36px;

  font-size: 15px;

}



/* ===== Form Elements ===== */

.form-group {

  margin-bottom: 20px;

}



.form-group input,

.form-group select,

.input-sm {

  width: 100%;

  height: 46px;

  border: 1.5px solid var(--gray-200);

  border-radius: var(--radius-md);

  padding: 0 16px;

  font-size: 14px;

  outline: none;

  transition: var(--transition);

  background: var(--gray-50);

  color: var(--gray-700);

}



.form-group input:hover,

.input-sm:hover {

  border-color: var(--gray-300);

}



.form-group input:focus,

.input-sm:focus {

  border-color: var(--primary);

  background: #fff;

  box-shadow: 0 0 3px rgba(41, 121, 255, 0.1);

}



.form-group input::placeholder {

  color: var(--gray-400);

}



.input-sm {

  height: 38px;

  width: auto;

  min-width: 130px;

  background: #fff;

}



/* ===== Buttons ===== */

.btn {

  padding: 9px 20px;

  border: none;

  border-radius: var(--radius-sm);

  cursor: pointer;

  font-size: 14px;

  font-weight: 500;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  white-space: nowrap;

}



.btn:active {

  transform: scale(0.97);

}



.btn-primary {

  background: var(--primary);

  color: #fff;

  box-shadow: 0 2px 4px rgba(41, 121, 255, 0.3);

}



.btn-primary:hover {

  background: var(--primary-dark);

  box-shadow: 0 4px 8px rgba(41, 121, 255, 0.4);

  transform: translateY(-1px);

}



.btn-secondary {

  background: #fff;

  color: var(--primary);

  border: 1.5px solid var(--primary-light);

}



.btn-secondary:hover {

  background: var(--primary-bg);

  border-color: var(--primary);

}



.btn-danger {

  background: var(--danger);

  color: #fff;

  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);

}



.btn-danger:hover {

  background: #dc2626;

  box-shadow: 0 4px 8px rgba(239, 68, 0.4);

  transform: translateY(-1px);

}



.btn-success {

  background: var(--success);

  color: #fff;

  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);

}



.btn-success:hover {

  background: #059669;

  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);

  transform: translateY(-1px);

}



.btn-sm {

  padding: 5px 12px;

  font-size: 12px;

  border-radius: 5px;

}



.btn-block {

  width: 100%;

  height: 48px;

  font-size: 16px;

  font-weight: 600;

  border-radius: var(--radius-md);

  letter-spacing: 0.5px;

}



/* ===== Admin Layout ===== */

.admin-wrapper {

  display: flex;

  min-height: 100vh;

}



/* ===== Sidebar ===== */

.sidebar {

  width: 240px;

  background: var(--sidebar-bg);

  color: #fff;

  display: flex;

  flex-direction: column;

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  z-index: 100;

  box-shadow: 4px 0 20px rgba(0, 0, 0.15);

}



.sidebar-header {

  padding: 28px 24px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.sidebar-header h3 {

  font-size: 20px;

  font-weight: 700;

  background: linear-gradient(135deg, #fff, #80d8ff);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  letter-spacing: -0.3px;

}



.sidebar-nav {

  flex: 1;

  padding: 16px 12px;

  overflow-y: auto;

}



.nav-item {

  display: flex;

  align-items: center;

  padding: 13px 16px;

  color: rgba(255, 255, 255, 0.6);

  text-decoration: none;

  font-size: 14px;

  font-weight: 450;

  transition: var(--transition);

  border-radius: var(--radius-md);

  margin-bottom: 4px;

}



.nav-item:hover {

  background: var(--sidebar-hover);

  color: #fff;

  transform: translateX(2px);

}



.nav-item.active {

  background: var(--sidebar-active);

  color: #fff;

  box-shadow: 0 4px 12px rgba(41, 121, 255, 0.4);

  font-weight: 500;

}



.nav-icon {

  margin-right: 12px;

  font-size: 18px;

  width: 24px;

  text-align: center;

}



.sidebar-footer {

  padding: 18px 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: rgba(0, 0, 0, 0.15);

}



.sidebar-footer #admin-name {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.7);

}



/* ===== Main Content ===== */

.main-content {

  flex: 1;

  margin-left: 240px;

  padding: 32px;

  min-height: 100vh;

  background: var(--gray-100);

}



.page {

  display: none;

  animation: pageIn 0.3s ease-out;

}



.page.active {

  display: block;

}



@keyframes pageIn {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



.page-title {

  font-size: 24px;

  font-weight: 700;

  margin-bottom: 28px;

  color: var(--gray-900);

  letter-spacing: -0.3px;

}



/* ===== Stats Cards ===== */

.stats-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-bottom: 28px;

}



.stat-card {

  background: #fff;

  border-radius: var(--radius-lg);

  padding: 28px;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--gray-200);

  transition: var(--transition);

  position: relative;

  overflow: hidden;

}



.stat-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--primary), var(--accent));

  opacity: 0;

  transition: var(--transition);

}



.stat-card:hover {

  box-shadow: var(--shadow-md);

  transform: translateY(-2px);

  border-color: var(--primary-light);

}



.stat-card:hover::before {

  opacity: 1;

}



.stat-card .stat-value {

  font-size: 36px;

  font-weight: 800;

  background: linear-gradient(135deg, var(--primary), var(--primary-dark));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  line-height: 1.2;

}



.stat-card .stat-label {

  font-size: 14px;

  color: var(--gray-500);

  margin-top: 8px;

  font-weight: 450;

}



/* ===== Dashboard Panels ===== */

.dashboard-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;margin-bottom: 20px;

}



.panel {

  background: #fff;

  border-radius: var(--radius-lg);

  padding: 24px;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--gray-200);

  transition: var(--transition);

}



.panel:hover {

  box-shadow: var(--shadow-md);

}



.panel-title {

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 18px;

  padding-bottom: 14px;

  border-bottom: 1px solid var(--gray-100);

  color: var(--gray-800);

  display: flex;

  align-items: center;

}



/* ===== Chart List (Bar Charts) ===== */

.chart-list .bar-row {

  display: flex;

  align-items: center;

  margin-bottom: 16px;

  padding: 8px 12px;

  border-radius: var(--radius-sm);

  transition: var(--transition);

}



.chart-list .bar-row:hover {

  background: var(--gray-50);

}



.chart-list .bar-row:last-child {

  margin-bottom: 0;

}



.chart-list .bar-label {

  width: 80px;

  font-size: 13px;

  color: var(--gray-600);

  font-weight: 500;

  flex-shrink: 0;

}



.chart-list .bar-track {

  flex: 1;

  height: 24px;

  background: var(--gray-100);

  border-radius: 12px;

  margin: 0 12px;

  overflow: hidden;

  position: relative;

}



.chart-list .bar-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--primary), var(--primary-light));

  border-radius: 12px;

  min-width: 8px;

  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

}



.chart-list .bar-fill::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);

  border-radius: 12px;

}



.chart-list .bar-value {

  width: 48px;

  text-align: right;

  font-size: 14px;

  font-weight: 700;

  color: var(--primary);

  flex-shrink: 0;

}



/* Department chart specific colors */

#dept-chart .bar-fill {

  background: linear-gradient(90deg, var(--accent), #67e8f9);

}



#dept-chart .bar-value {

  color: var(--accent);

}



/* ===== Ranking Table ===== */

.ranking-table .rank-item {

  display: flex;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px solid var(--gray-100);

  transition: var(--transition);

}



.ranking-table .rank-item:last-child {

  border-bottom: none;

}



.ranking-table .rank-item:hover {

  background: var(--gray-50);

  margin: 0 -12px;

  padding: 12px;

  border-radius: var(--radius-sm);

}



.ranking-table .rank-num {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: var(--gray-100);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 600;

  color: var(--gray-500);

  margin-right: 14px;

  flex-shrink: 0;

}



.ranking-table .rank-num.top {

  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  color: #fff;

  box-shadow: 0 2px 6px rgba(41, 121, 255, 0.3);

}



.ranking-table .rank-info {

  flex: 1;

}



.ranking-table .rank-name {

  font-weight: 600;

  color: var(--gray-800);

  font-size: 14px;

}



.ranking-table .rank-dept {

  font-size: 12px;

  color: var(--gray-400);

  margin-left: 8px;

}



.ranking-table .rank-count {

  color: var(--primary);

  font-weight: 700;

  font-size: 15px;

}



/* ===== Recent List ===== */

.recent-list .recent-item {

  padding: 12px 0;

  border-bottom: 1px solid var(--gray-100);

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition: var(--transition);

}



.recent-list .recent-item:last-child {

  border-bottom: none;

}



.recent-list .recent-item:hover {

  background: var(--gray-50);

  margin: 0 -12px;

  padding: 12px;

  border-radius: var(--radius-sm);

}



.recent-item .recent-name {

  font-size: 13px;

  font-weight: 500;

  color: var(--gray-700);

}



.recent-item .recent-meta {

  font-size: 12px;

  color: var(--gray-400);

}



/* ===== Toolbar ===== */

.toolbar {

  display: flex;

  gap: 12px;

  align-items: center;

  margin-bottom: 20px;

  flex-wrap: wrap;

  padding: 16px 20px;

  background: #fff;

  border-radius: var(--radius-md);

  border: 1px solid var(--gray-200);

  box-shadow: var(--shadow-sm);

}



/* ===== Data Table ===== */

.table-wrapper {

  background: #fff;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--gray-200);

}



.data-table {

  width: 100%;

  border-collapse: collapse;

}



.data-table th {

  background: var(--gray-50);

  padding: 14px 18px;

  text-align: left;

  font-weight: 600;

  font-size: 12px;

  color: var(--gray-500);

  border-bottom: 1px solid var(--gray-200);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.data-table td {

  padding: 14px 18px;

  border-bottom: 1px solid var(--gray-100);

  font-size: 13px;

  color: var(--gray-700);

}



.data-table tr:last-child td {

  border-bottom: none;

}



.data-table tr:hover td {

  background: var(--primary-bg);

}



.data-table tr {

  transition: var(--transition);

}



/* ===== Tags / Badges ===== */

.tag {

  display: inline-flex;

  align-items: center;

  padding: 3px 10px;

  border-radius: 20px;

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 0.2px;

}



.tag-pending {

  background: var(--warning-bg);

  color: #92400e;

}



.tag-approved {

  background: var(--success-bg);

  color: #065f46;

}



.tag-rejected {

  background: var(--danger-bg);

  color: #991b1b;

}



/* ===== Pagination ===== */

.pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  margin-top: 24px;

  padding: 16px 0;

}



.pagination .page-btn {

  padding: 8px 14px;

  border: 1.5px solid var(--gray-200);

  border-radius: var(--radius-sm);

  cursor: pointer;

  background: #fff;

  font-size: 13px;

  font-weight: 500;

  color: var(--gray-600);

  transition: var(--transition);

}



.pagination .page-btn:hover {

  border-color: var(--primary-light);

  color: var(--primary);

  background: var(--primary-bg);

}



.pagination .page-btn.active {

  background: var(--primary);

  color: #fff;

  border-color: var(--primary);

  box-shadow: 0 2px 6px rgba(41, 121, 255, 0.3);

}



.pagination .page-info {

  color: var(--gray-500);

  font-size: 13px;

  padding: 0 8px;

}
.pagination .page-ellipsis {
  color: var(--gray-400);
  font-size: 14px;
  padding: 0 4px;
  user-select: none;
}

.pagination .page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  color: var(--gray-500);
  font-size: 13px;
}

.pagination .page-jump-input {
  width: 50px;
  height: 32px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: var(--transition);
}

.pagination .page-jump-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 3px rgba(41, 121, 255, 0.1);
}

.pagination .page-jump-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pagination .page-jump-btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}





/* ===== Export Grid ===== */

.export-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

}



.export-card {

  background: #fff;

  border-radius: var(--radius-lg);

  padding: 28px;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--gray-200);

}



.export-card h3 {

  margin-bottom: 8px;

  color: var(--gray-800);

}



.export-card p {

  color: var(--gray-500);

  font-size: 13px;

  margin-bottom: 18px;

}



.export-filters {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  align-items: center;

}



/* ===== Published Tasks Status Tags ===== */

.tag-recruiting {

  background: var(--success-bg);

  color: #065f46;

}



.tag-closed {

  background: var(--warning-bg);

  color: #92400e;

}



.tag-cancelled {

  background: var(--danger-bg);

  color: #991b1b;

}



/* ===== Notification Badge ===== */

.notification-badge {

  position: absolute;

  top: -5px;

  right: -5px;

  background: var(--danger);

  color: #fff;

  font-size: 10px;

  padding: 2px 6px;

  border-radius: 10px;

  min-width: 16px;

  text-align: center;

}



/* ===== Image Gallery ===== */

.image-gallery {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 8px;

}



.image-gallery img {

  max-width: 100px;

  max-height: 100px;

  object-fit: cover;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: var(--transition);

}



.image-gallery img:hover {

  transform: scale(1.05);

  box-shadow: var(--shadow-md);

}



/* ===== Status Indicator ===== */

.status-dot {

  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  margin-right: 6px;

}



.status-dot.online {

  background: var(--success);

}



.status-dot.offline {

  background: var(--gray-400);

}



/* ===== Quick Stats ===== */

.quick-stats {

  display: flex;

  gap: 16px;

  margin-bottom: 20px;

}



.quick-stat-item {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 12px 16px;

  background: #fff;

  border-radius: var(--radius-md);

  border: 1px solid var(--gray-200);

}



.quick-stat-icon {

  font-size: 20px;

}



.quick-stat-info {

  display: flex;

  flex-direction: column;

}



.quick-stat-value {

  font-size: 18px;

  font-weight: 700;

  color: var(--primary);

}



.quick-stat-label {

  font-size: 12px;

  color: var(--gray-500);

}



/* ===== Modal Form Styling ===== */

.modal .form-group select {

  width: 100%;

  height: 46px;

  border: 1.5px solid var(--gray-200);

  border-radius: var(--radius-md);

  padding: 0 16px;

  font-size: 14px;

  outline: none;

  transition: var(--transition);

  background: var(--gray-50);

  color: var(--gray-700);

}



.modal .form-group textarea {

  width: 100%;

  border: 1.5px solid var(--gray-200);

  border-radius: var(--radius-md);

  padding: 12px 16px;

  font-size: 14px;

  outline: none;

  transition: var(--transition);

  background: var(--gray-50);

  color: var(--gray-700);

  resize: vertical;

}



.modal .form-group textarea:focus {

  border-color: var(--primary);

  background: #fff;

  box-shadow: 0 0 3px rgba(41, 121, 255, 0.1);

}



/* ===== Modal ===== */

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0.5);

  backdrop-filter: blur(4px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1000;

  animation: overlayIn 0.2s ease-out;

}



@keyframes overlayIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



.modal {

  background: #fff;

  border-radius: var(--radius-xl);

  padding: 36px;

  width: 520px;

  max-height: 80vh;

  overflow-y: auto;

  box-shadow: var(--shadow-xl);

  animation: modalIn 0.3s ease-out;

}



@keyframes modalIn {

  from { opacity: 0; transform: scale(0.95) translateY(10px); }

  to { opacity: 1; transform: scale(1) translateY(0); }

}



.modal h3 {

  margin-bottom: 24px;

  font-size: 20px;

  font-weight: 700;

  color: var(--gray-900);

}



.modal .form-group {

  margin-bottom: 18px;

}



.modal .form-group label {

  display: block;

  margin-bottom: 6px;

  font-size: 13px;

  font-weight: 500;

  color: var(--gray-600);

}



.modal .btn-group {

  display: flex;

  gap: 12px;

  margin-top: 28px;

  justify-content: flex-end;

}



/* ===== Action Buttons ===== */

.action-btns {

  display: flex;

  gap: 6px;

}



.action-btns .btn {

  padding: 5px 12px;

  font-size: 12px;

  border-radius: 5px;

}



/* ===== Responsive ===== */

@media (max-width: 1200px) {

  .stats-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .dashboard-row {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 768px) {

  .sidebar {

    width: 200px;

  }

  .main-content {

    margin-left: 200px;

    padding: 20px;

  }

  .stats-grid {

    grid-template-columns: 1fr;

  }

  .login-box {

    width: 90%;

    padding: 40px 28px;

  }

}



/* ===== Utility ===== */

.text-center { text-align: center; }

.text-right { text-align: right; }

.mt-2 { margin-top: 8px; }

.mt-4 { margin-top: 16px; }

.mb-2 { margin-bottom: 8px; }

.mb-4 { margin-bottom: 16px; }



/* ===== User Link ===== */

.user-link {

  color: var(--primary);

  text-decoration: none;

  font-weight: 500;

  cursor: pointer;

  transition: var(--transition);

}



.user-link:hover {

  color: var(--primary-dark);

  text-decoration: underline;

}



/* ===== User Link ===== */
.user-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.user-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ===== User Tasks Stats ===== */
#user-tasks-stats .stat-card {
  cursor: default;
}

#user-tasks-stats .stat-card:hover {
  transform: none;
}