:root {
  --monday-grass: #00c875;
  --monday-grass-light: #e6f9f1;
  --monday-sky: #579bfc;
  --monday-sky-light: #e6f0ff;
  --monday-sunset: #ffab00;
  --monday-sunset-light: #fff8e6;
  --monday-berry: #e44258;
  --monday-berry-light: #fce8eb;
  --monday-purple: #a25ddc;
  --monday-purple-light: #f3e8fa;
  --monday-ocean: #0086c0;
  --monday-ocean-light: #e6f4fa;
  --monday-dark: #323338;
  --monday-gray: #676879;
  --monday-light-gray: #c5c7d0;
}

.dark {
  --monday-grass-light: rgba(0, 200, 117, 0.15);
  --monday-sky-light: rgba(87, 155, 252, 0.15);
  --monday-sunset-light: rgba(255, 171, 0, 0.15);
  --monday-berry-light: rgba(228, 66, 88, 0.15);
  --monday-purple-light: rgba(162, 93, 220, 0.15);
  --monday-ocean-light: rgba(0, 134, 192, 0.15);
}

.dashboard .stat-card {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.dashboard .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
}
.dashboard .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}
.dashboard .stat-card-grass::before { background: var(--monday-grass); }
.dashboard .stat-card-sky::before { background: var(--monday-sky); }
.dashboard .stat-card-sunset::before { background: var(--monday-sunset); }
.dashboard .stat-card-berry::before { background: var(--monday-berry); }
.dashboard .stat-card-purple::before { background: var(--monday-purple); }
.dashboard .stat-card-ocean::before { background: var(--monday-ocean); }

.dashboard .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard .stat-icon-grass { background: var(--monday-grass-light); color: var(--monday-grass); }
.dashboard .stat-icon-sky { background: var(--monday-sky-light); color: var(--monday-sky); }
.dashboard .stat-icon-sunset { background: var(--monday-sunset-light); color: var(--monday-sunset); }
.dashboard .stat-icon-berry { background: var(--monday-berry-light); color: var(--monday-berry); }
.dashboard .stat-icon-purple { background: var(--monday-purple-light); color: var(--monday-purple); }
.dashboard .stat-icon-ocean { background: var(--monday-ocean-light); color: var(--monday-ocean); }

.dashboard .progress-bar {
  height: 6px;
  border-radius: 3px;
  background: #e6e9ef;
  overflow: hidden;
  position: relative;
}
.dark .dashboard .progress-bar {
  background: #3c3f47;
}
.dashboard .progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease-out;
  position: relative;
}
.dashboard .progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: dashboardShimmer 2s infinite;
}
@keyframes dashboardShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dashboard .project-row {
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}
.dashboard .project-row:hover {
  background: rgba(87, 155, 252, 0.05);
  border-left-color: var(--monday-sky);
}

.dashboard .status-pill {
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.dashboard .status-pending { background: var(--monday-sunset-light); color: var(--monday-sunset); }
.dashboard .status-approved { background: var(--monday-grass-light); color: var(--monday-grass); }
.dashboard .status-completed { background: var(--monday-sky-light); color: var(--monday-sky); }
.dashboard .status-draft { background: var(--monday-purple-light); color: var(--monday-purple); }
.dashboard .status-rejected { background: var(--monday-berry-light); color: var(--monday-berry); }
.dashboard .status-in-progress { background: var(--monday-ocean-light); color: var(--monday-ocean); }

.dashboard .donut-chart {
  position: relative;
  width: 160px;
  height: 160px;
}
.dashboard .donut-chart-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.dashboard .metric-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dashboard .metric-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 6px;
  background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), #e6e9ef calc(var(--progress) * 1%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.dark .dashboard .metric-ring::before {
  background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), #3c3f47 calc(var(--progress) * 1%));
}

.dashboard .monday-table th {
  background: #f5f6f8;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--monday-gray);
  padding: 8px 12px;
  border-bottom: 1px solid #e6e9ef;
}
.dark .dashboard .monday-table th {
  background: #2c2f36;
  border-color: #3c3f47;
  color: #9ca3af;
}
.dashboard .monday-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid #e6e9ef;
}
.dark .dashboard .monday-table td {
  border-color: #3c3f47;
}

.dashboard .approval-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dashboard .approval-dot-pending { background: var(--monday-sunset); }
.dashboard .approval-dot-approved { background: var(--monday-grass); }
.dashboard .approval-dot-waiting { background: #e6e9ef; }
.dark .dashboard .approval-dot-waiting { background: #3c3f47; }

.dashboard .quick-action-btn {
  transition: all 0.2s ease;
}
.dashboard .quick-action-btn:hover {
  transform: scale(1.05);
}

.dashboard .fade-in {
  animation: dashboardFadeIn 0.5s ease-out;
}
@keyframes dashboardFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dashboard .color-bar {
  height: 4px;
  background: linear-gradient(90deg,
    var(--monday-grass) 0%,
    var(--monday-sky) 20%,
    var(--monday-purple) 40%,
    var(--monday-sunset) 60%,
    var(--monday-berry) 80%,
    var(--monday-ocean) 100%
  );
  border-radius: 2px;
}