/* ------------------------------
   TRAIL AGENT DASHBOARD NAV
   ------------------------------ */

.tcr-dashboard-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 40px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.nav-card {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all .3s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

.nav-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #e5e7eb, #d1d5db);
  transition: all .3s ease;
}

.nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Primary Card (Submit Report) */
.nav-card.primary {
  border-color: #a7f3d0;
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}

.nav-card.primary::before {
  background: linear-gradient(90deg, #059669, #047857);
}

/* Highlight Card (Outstanding Maintenance) */
.nav-card.highlight {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  box-shadow: 0 4px 14px rgba(251,191,36,.15);
}

.nav-card.highlight::before {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.nav-card.highlight:hover {
  box-shadow: 0 12px 32px rgba(251,191,36,.25);
}

/* Admin Card */
.nav-card.admin {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
}

.nav-card.admin::before {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

/* Analytics Card */
.nav-card.analytics {
  border-color: #93c5fd;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.nav-card.analytics::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

/* Projects Card */
.nav-card.projects {
  border-color: #fdba74;
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
}

.nav-card.projects::before {
  background: linear-gradient(90deg, #f97316, #ea580c);
}

/* Icon */
.nav-icon {
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}

/* Heading */
.nav-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 12px 0;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* Description */
.nav-card p {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

/* Button */
.nav-button {
  display: inline-block;
  padding: 14px 28px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white !important;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(5,150,105,.3);
}

.nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(5,150,105,.4);
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  color: white !important;
}

/* Warning button (Outstanding) */
.nav-button.warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #78350f !important;
  box-shadow: 0 4px 14px rgba(251,191,36,.3);
}

.nav-button.warning:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 6px 20px rgba(251,191,36,.4);
  color: #78350f !important;
}

/* Admin button */
.nav-button.admin {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white !important;
  box-shadow: 0 4px 14px rgba(139,92,246,.3);
}

.nav-button.admin:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 6px 20px rgba(139,92,246,.4);
  color: white !important;
}

/* Analytics button */
.nav-button.analytics {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white !important;
  box-shadow: 0 4px 14px rgba(59,130,246,.3);
}

.nav-button.analytics:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 20px rgba(59,130,246,.4);
  color: white !important;
}

/* Projects button */
.nav-button.projects {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.3);
}

.nav-button.projects:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 6px 20px rgba(249,115,22,.4);
  color: white !important;
}

.nav-card.calendar {
  border-left: 4px solid #8b5cf6;
}

.nav-button.calendar {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white !important;
  box-shadow: 0 4px 14px rgba(139,92,246,.3);
}

.nav-button.calendar:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  box-shadow: 0 6px 20px rgba(139,92,246,.4);
  color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
  .tcr-dashboard-nav {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 24px 0;
  }

  .nav-card {
    padding: 24px 20px;
  }

  .nav-icon {
    font-size: 40px;
  }

  .nav-card h3 {
    font-size: 20px;
  }

  .nav-card p {
    font-size: 14px;
  }
}

/* Special layout for 2 cards (logged out state with no register) */
.tcr-dashboard-nav:has(.nav-card:nth-child(2):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Animation on load */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-card {
  animation: slideUp 0.5s ease-out backwards;
}

.nav-card:nth-child(1) { animation-delay: 0.05s; }
.nav-card:nth-child(2) { animation-delay: 0.1s; }
.nav-card:nth-child(3) { animation-delay: 0.15s; }
.nav-card:nth-child(4) { animation-delay: 0.2s; }
.nav-card:nth-child(5) { animation-delay: 0.25s; }