/* ═══════════════════════════════════════════════════════════
   index.css — Spezifisch für index.html
   ═══════════════════════════════════════════════════════════ */
.nav-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 16px;
   margin-top: 20px;
}

.nav-card {
   background: #fff;
   border: 1px solid #e8e8e8;
   border-radius: 12px;
   padding: 24px 20px;
   text-decoration: none;
   color: #111;
   transition: box-shadow 0.15s, border-color 0.15s;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.nav-card:hover {
   border-color: #1e3a5f;
   box-shadow: 0 2px 12px rgba(30, 58, 95, 0.1);
}

.nav-card-icon {
   font-size: 28px;
}

.nav-card-title {
   font-size: 15px;
   font-weight: 600;
   color: #1e3a5f;
}

.nav-card-desc {
   font-size: 12px;
   color: #888;
   line-height: 1.5;
}

.nav-card.locked {
   opacity: 0.4;
   pointer-events: none;
   cursor: not-allowed;
}

.role-badge {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 600;
   margin-left: 8px;
}

.role-admin {
   background: #dbeafe;
   color: #1e40af;
}

.role-trainer {
   background: #d1fae5;
   color: #065f46;
}

.role-viewer {
   background: #f3f4f6;
   color: #374151;
}

.user-actions {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 24px;
   flex-wrap: wrap;
}